[89일차] 주문하기 / 주문자 정보 & 배송지 정보 폼 / 카카오페이 결제

728x90

20221129(화)

목차
- 주문하기
- 주문자 정보 & 배송지 정보 폼 추가
- 위 정보와 같음 체크 시
- 카카오페이 결제

< 주문하기 >

** 먼저 장바구니 목록에서 주문하기 클릭 시 이어지도록 연결

0. sql

-- 6 - 1. 주문 테이블
CREATE TABLE ORDER_TBL(
   ODR_CODE             NUMBER                        CONSTRAINT PK_ORDER_CODE PRIMARY KEY,
   MEM_ID               VARCHAR2(15)                  NOT NULL,
   ODR_NAME             VARCHAR2(30)                  NOT NULL,
   ODR_ZIPCODE          CHAR(5)                       NOT NULL,
   ODR_ADDR             VARCHAR2(50)                  NOT NULL,
   ODR_ADDR_D           VARCHAR2(50)                  NOT NULL,
   ODR_PHONE            VARCHAR2(20)                  NOT NULL,
   ODR_TOTAL_PRICE      NUMBER                        NOT NULL,
   ODR_STATUS           VARCHAR2(30)                  NOT NULL,
   PAYMENT_STATUS       VARCHAR2(30)                  NOT NULL,
   ODR_DATE             DATE DEFAULT SYSDATE          NOT NULL
);   
COMMIT;

--6 - 2. 주문 상세 테이블
CREATE TABLE ORDER_DETAIL_TBL(
   ODR_CODE           NUMBER                        NOT NULL,
   PDT_NUM            NUMBER                        NOT NULL,
   ODR_AMOUNT         NUMBER                        NOT NULL,
   ODR_PRICE          NUMBER                        NOT NULL,
   PRIMARY KEY (ODR_CODE, PDT_NUM) 
);

-- 주문번호
CREATE SEQUENCE SEQ_ORD_CODE;

1. OrderVO 생성

2. Order 컨트롤러

3. Order 매퍼

- Cart 매퍼 내용을 가져와서 사용(Order 매퍼 생략)

4. Order 서비스

5. Order 컨트롤러

6. views > order > orderList.jsp 생성

- 필요한 부분만 남기고 나머진 날리기

7. orderListInfo.jsp

- cartlist.jsp 파일에서 복붙

ex) 실행화면

< 주문자 정보 & 배송지 정보 폼 추가 >

orderListInfo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.101.0">
    <title>Pricing example · Bootstrap v4.6</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/pricing/">

    <%@include file="/WEB-INF/views/include/common.jsp" %>

    <!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.6/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.6/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.6/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.6/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
   <script>
      let msg = '${msg}';
      if(msg != '') {
        alert(msg);
      }

    </script>
    
  </head>
  <body>
    
<%@include file="/WEB-INF/views/include/header.jsp" %>
<%@include file="/WEB-INF/views/include/categoryMenu.jsp" %>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h1 class="display-4">${cate_name }</h1>
</div>

<div class="container">
  
  <div class="row">
     <div class="col-md-12">
        <div class="box">
         <div class="box-header">
            <h3 class="box-title">주문 목록</h3>
         </div>

         <div class="box-body no-padding">
            <table class="table table-striped" id="cartlist">
            <tbody><tr>
               <th style="width: 20%">이미지</th>
               <th style="width: 15%">상품정보</th>
               <th style="width: 15%">판매가</th>
               <th style="width: 10%">수량</th>
               <th style="width: 10%">적립금</th>
               <th style="width: 10%">배송구분</th>
               <th style="width: 10%">배송비</th>
               <th style="width: 10%">합계</th>
               
               </tr>
            <c:forEach items="${orderList }" var="orderListVO">
            <c:set var="unit_price" value="${orderListVO.sales_price }" />
            <tr>
               <td><img src="/order/displayFile?folderName=${orderListVO.pdt_img_folder }&fileName=s_${orderListVO.pdt_img}"></td>
               <td>${orderListVO.pdt_name }</td>
               <td>￦<span class="pdt_price"><fmt:formatNumber type="currency" pattern="#,###" value="${orderListVO.pdt_price }" /></span></td>
               <td>
                  <input type="text" name="cart_amount" value="${orderListVO.cart_amount }" style="width:50px;"><br>
                  
               </td>
               <td>포인트</td>
               <td>기본배송</td>
               <td>무료</td>
               <td>￦<span class="sales_price"><fmt:formatNumber type="currency" pattern="#,###" value="${orderListVO.sales_price }" />
               </span></td>
               
            </tr>
            <c:set var="sum_price" value="${sum_price +  unit_price}"></c:set>
            </c:forEach>
            </tbody>
            <tfoot>
                  <tr>
                  <c:if test="${empty  orderList}">
                  <td colspan="10" style="text-align: center">주문내역이 없습니다.</td>
                  </c:if>
                  <c:if test="${!empty  orderList}">
                  <td colspan="10" style="text-align: right">총금액: ￦<span id="sum_price"><fmt:formatNumber type="currency" pattern="#,###" value="${sum_price }" /></span></td>
                  </c:if>
                  </tr>
                  </tfoot>
            
            </table>
            <div>
               <form id="orderForm" action="" method="post">
                    <h5>주문자정보</h5>
                    <hr>
                    <div class="form-group row">
                      <label for="mem_name" class="col-sm-2 col-form-label">이름</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="s_mem_name" value="${sessionScope.loginStatus.mem_name }"  readonly>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="mem_email" class="col-sm-2 col-form-label">전자우편</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="s_mem_email" value="${sessionScope.loginStatus.mem_email }" readonly>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="mem_phone" class="col-sm-2 col-form-label">휴대폰 번호</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="s_mem_phone" value="${sessionScope.loginStatus.mem_phone }" readonly>
                        <input type="hidden" class="form-control" id="s_mem_zipcode" value="${sessionScope.loginStatus.mem_zipcode }">
                        <input type="hidden" class="form-control" id="s_mem_addr" value="${sessionScope.loginStatus.mem_addr }">
                        <input type="hidden" class="form-control" id="s_mem_addr_d" value="${sessionScope.loginStatus.mem_addr_d }">
                      </div>
                    </div>
                    <input type="checkbox" id="same"><label for="same">위 정보와 같음</label>
                    <h5>배송 정보</h5>
                    <hr>
                    <div class="form-group row">
                      <label for="mem_name" class="col-sm-2 col-form-label">이름</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="mem_name" name="odr_name">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="mem_phone" class="col-sm-2 col-form-label">휴대폰 번호</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="mem_phone" name="odr_phone">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="mem_phone" class="col-sm-2 col-form-label">배송지 선택</label>
                      <div class="col-sm-10">
                        <div class="form-check form-check-inline">
                       <input class="form-check-input" type="radio" name="receiveAddr" id="receiveAddr1" value="1" checked>
                       <label class="form-check-label" for="inlineRadio1">자택</label>
                     </div>
                    <div class="form-check form-check-inline">
                       <input class="form-check-input" type="radio" name="receiveAddr" id="receiveAddr2" value="2">
                       <label class="form-check-label" for="inlineRadio2">타지역</label>
                    </div>
                      </div>
                    </div>
                    
                    <div class="form-group row">
                      <label for="sample2_postcode" class="col-sm-2 col-form-label">우편번호</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="sample2_postcode" name="odr_zipcode" value="${sessionScope.loginStatus.mem_zipcode }">
                        <input type="button" onclick="sample2_execDaumPostcode()" value="우편번호 찾기">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="sample2_address" class="col-sm-2 col-form-label">주소</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="sample2_address" name="odr_addr" value="${sessionScope.loginStatus.mem_addr }">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="sample2_detailAddress" class="col-sm-2 col-form-label">상세주소</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="sample2_detailAddress" name="odr_addr_d" value="${sessionScope.loginStatus.mem_addr_d }">
                        <input type="hidden" id="sample2_extraAddress" placeholder="참고항목">
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="mem_phone" class="col-sm-2 col-form-label">배송지 메세지(100자 이내)</label>
                      <div class="col-sm-10">
                        <textarea name="odr_message" class="form-control" rows="5"></textarea>
                        <input type="hidden" name="odr_total_price" value="${sum }">
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="pay_method">결제방법</label>
                      <select name="pay_method" id="pay_method" class="form-control" >
                        <option value="">결제방법을 선택하세요</option>
                        <option value="무통장입금">무통장입금</option>
                        <option value="카카오페이">카카오페이</option>
                        <option value="휴대폰">휴대폰</option>
                        <option value="신용카드">신용카드</option>
                      </select>
                      <select name="bank" id="bank" class="form-control" >
                        <option value="">입금은행을 선택하세요</option>
                        <option value="00000000000000">국민은행(00000000000000)</option>
                        <option value="11111111111111">하나은행(11111111111111)</option>
                        <option value="22222222222222">신한은행(22222222222222)</option>
                        <option value="33333333333333">우리은행(33333333333333)</option>
                      </select>
                      <input type="hidden" name="pay_nobank" id="pay_nobank" value="">
                      <input type="hidden" name="pay_nobank_price" id="pay_nobank_price" value="${sum }">
                    </div>
                    <div class="form-group row">
                      <label for="mem_name" class="col-sm-2 col-form-label">입금자명</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control" id="pay_nobank_user" name="pay_nobank_user">
                      </div>
                    </div>
                    
                </form>
                </div>
         </div>
		 <div class="box-footer text-center">
   				<button type="button" id="btnOrder" class="btn btn-primary">주문하기</button>
   				<input type="image" src="/image/payment_icon_yellow_medium.png" id="kakao_pay" class="btn btn-link" disabled>
   				<button type="button" id="btnCancel" class="btn btn-primary">주문취소</button>
   		</div>

      </div>
     
     </div>
  </div>

  <%@include file="/WEB-INF/views/include/footer.jsp" %>
</div>

  <script>

    $(document).ready(function(){

      //사용자정의함수
      // 콤마제거하기. 연산할 때 사용
      $.withoutCommas = function(x) {

        return x.toString().replace(",", "");
      }

      //3자리마다 콤마찍기. 표시할 때 사용.
      $.numberWithCommas = function(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }


    }); // ready() 끝

    //sum_price가격 변경
    
    function fn_sum_price() {
        
      let sum_price = 0;
      $("table#cartlist span.sales_price").each(function(index, item){
        sum_price += parseInt($.withoutCommas($(item).text()));  
      });
      
      $("span#sum_price").text($.numberWithCommas(sum_price)); 
    }
    
  </script>  
  </body>
</html>

ex) 실행화면

< 위 정보와 같음 체크 시 >

orderListInfo.jsp 코드추가

코드 추가

< 카카오페이 결제 >

kakaopay 관련 참고 사이트
https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com