[JS] javascript 장바구니 기능 구현, Node.js 여러 개의 상품 결제 - form 컬렉션 전송

쇼핑몰과 서점 애플리케이션을 사용하다 보면 장바구니 기능을 볼 수 있습니다.

보통 form 태그를 통해 안에 작성된 input 태그들을 하나의 묶음으로 전송하여 처리하곤 했습니다.

 

하지만, 장바구니와 같이 form 태그로 묶어서 전달해야 하는 데이터가 1개가 아닌 여러 개 일 때 어떻게 해야 될지 의문이었습니다. 

 

결론 :

1) js 문법을 이용하여 사용자가 (동적) (체크박스)를 선택한 데이터를 확인합니다.

2) 이를 서버에 json 형태로 전달해주고, 서버에서는 json 데이터를 반복문을 통해 DB에 쿼리를 전송합니다.

 

장바구니 기능 화면

 

form 태그는 보통 서버에 데이터를 전송할 때 사용합니다.
주로 사용하는 속성으로 action과 method가 있습니다.

 

action은 전송할 서버의 주소를 담고 있습니다.

method는 전송할 http method 방식을 설정합니다.

<form action="/purchase/cart/payment" id="cartForm" method="post">
    <h2 class="fw-bold mb-2"><%=who%>님의 장바구니</h2>
    <table class="table table-bordered border-primary text-center" style="width: 1300px;">
        <% if (haveCart) { %>
            <thead>
                <td class="fw-bold">구매선택</td>
                <td class="fw-bold">상품</td>
                <td class="fw-bold">상품명</td>
                <td class="fw-bold">단가</td>
                <td class="fw-bold">담은날</td>
                <td class="fw-bold">수량</td>
            </thead>
            <% var i = 0
                while (i<list.length) { %>
                    <tr>
                        <td class="align-middle">
                            <input class="form-check-input" type="checkbox" 
                                    name="selectedMerchandise" value="<%=list[i].mer_id%>">
                        </td>
                        <td>
                            <img src="<%=list[i].image%>" alt="merchandise image" style="width: 30%;">
                        </td>
                        <td class="align-middle"><%=list[i].name%></td>
                        <td class="align-middle">
                            <%=list[i].price%>
                            <input type="hidden" name="price_<%=list[i].mer_id%>" value="<%=list[i].price%>">
                        </td>
                        <td class="align-middle"><%=list[i].date%></td>
                        <td class="align-middle">
                            <input type="number" name="qty_<%=list[i].mer_id%>" min="1" max="<%=list[i].stock%>" value="<%=list[i].qty%>">
                        </td>
                    </tr>
            <% i += 1 } %>
    </table>
    <button class="btn btn-outline-primary btn-sm" onclick="submitForm()" style="float:right;">결제</button>
</form>
<% }
    else { %>
    <tr>
        <td>자료 없음</td>
    </tr>
</table>
<% } %>

 

✔️type="checkbox" 를 태그를 보면 value 값으로 데이터의 pk 값을 가지고 있습니다. 

아래에 JS 문법을 통해 선택된 체크박스의 데이터를 전송합니다.

 

<script>
    function submitForm() {
        var form = document.getElementById("cartForm");
        var checked = form.elements['selectedMerchandise'];

        var selectedItems = [];
        for (var i = 0; i < checked.length; i++){
            if (checked[i].checked) {
                var item = {
                    mer_id: checked[i].value,
                    price: form.elements['price_' + checked[i].value].value,
                    qty: form.elements['qty_' + checked[i].value].value
                };
                selectedItems.push(item);
            }
        }
        var selectedItemsInput = document.createElement('input');
        selectedItemsInput.type = 'hidden';
        selectedItemsInput.name = 'selectedItems';
        selectedItemsInput.value = JSON.stringify(selectedItems);
        form.appendChild(selectedItemsInput);
        form.submit();
    }
</script>

 

✔️ form 태그의 id 값으로 전송할 form 태그를 찾아옵니다.

✔️ 체크 박스의 name 속성은 'selectedMerchandise'로 설정되어 있어 이를 form.elements로 통해서 값을 가져옵니다.

(체크가 되었는지 OR 언체크 상태인지)

✔️ checked[i].checked를 통해 선택된 상품인지 확인합니다. 만약 선택된 항목일 경우에는 해당 인덱스를 통해 서버에 전달할 값인

checked[i].value, form.elements['price_' + checked[i].value].value, form.elements['qty_' + checked[i].value].value 을 객체에 담아 저장합니다.

 

✔️ 선택된 항목을 위의 selectedItems 리스트에 담겨 있습니다. 이를 form에 담아서 전달하기 하기 위해서는 input 태그를 통해 담아 전달해야 합니다.

✔️ type = 'hidden' / name = 'selectedItems' / value = 'JSON.stringify(selectedItems) 로 설정하여 submit 합니다.

 

 

Node.js 코드

cartPay : (req, res)=>{
    const selectedItems = JSON.parse(req.body.selectedItems);

    if(selectedItems.length === 0){
      res.end(`<script type='text/javascript'>
                alert("No product has been selected.");
                setTimeout(() => {
                    location.href='http://localhost:3000/purchase/cart';
                }, 1000); </script>`);
        return;
    }

    var loginid = req.session.userPk;
    const currentDate = dateModule.dateOfEightDigit();

    for(var i = 0; i < selectedItems.length; i++){
      var merId = parseInt(selectedItems[i].mer_id, 10);
      var price = parseInt(selectedItems[i].price, 10);
      var qty = parseInt(selectedItems[i].qty, 10);
      var point = price * 0.005;
      var total = price * qty;

      db.query('insert into purchase(loginid,mer_id,date,price,point,qty,total,payYN,cancel,refund) values(?,?,?,?,?,?,?,?,?,?)',
          [loginid, merId, currentDate, price, point, qty, total, 'N','N','N'], (err, result)=>{
            if(err){
              throw err;
            }
            db.query('delete from cart where mer_id=?', [merId], (err2, result)=>{
              if(err2){
                throw err2;
              }
            })
          });
    }
    res.writeHead(302, {Location: '/purchase'});
    res.end();
  },

 

클라이언트로부터 전달받은 데이터를

const selectedItems = JSON.parse(req.body.selectedItems); 로 받아옵니다.

여기서 selectedItems는 form 태그의 input 태그의 name 속성의 값과 같습니다. (name 값을 통해 서버에서 값을 받아옵니다.)

 

여러 개의 값을 받아오므로 반복문을 통해서 데이터를 추출한 후 DB에 쿼리를 보내어 장바구니 기능을 구현합니다.