🏫 Open API_JAVA
[89일차] 주문하기 / 주문자 정보 & 배송지 정보 폼 / 카카오페이 결제
Dorothy_YANG
2022. 12. 1. 15:00
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
728x90