최신글
hyeonga_code
reProject_15_주문 페이지, 주문 상세 페이지 작업 본문
반응형
reProject_14_장바구니 기능 구현_3_기능 실행 결과
reProject_13_장바구니 기능 구현_2_상품 상세 페이지에서 장바구니에 추가 기능 구현 2023.12.29 - [Project] - reProject_12_장바구니 기능 구현_1_장바구니 페이지 수정, 상품 선택 삭제, 전체 삭제 2023.12.28 --
hyeonga493.tistory.com
2024-01-02
주문페이지로 이동 시 session이 없는 경우(로그인하지 않은 경우) , cookie 값이 없는 경우(비회원 쿠키가 생성되지 않은 경우) 로그인/비회원으로 주문 버튼이 보여지게 된다.
로그인 시 아이디, 비밀번호를 입력받는 form이 보여지도록 합니다. 로그인이 성공하거나 비회원으로 주문하기 버튼을 클릭하는 경우 주문서 div가 보여지도록 작업하고 주문 성공 시 주문 완료 메세지가 출력되도록 하려고 한다.
1. client_order.jsp 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEATHERWEAR</title>
<link rel="stylesheet" href="/w2/resources/client/client_css/client_base_style.css">
<link rel="stylesheet" href="/w2/resources/client/client_css/client_order_style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/w2/resources/util/util_js/util_checkbox.js"></script>
<!-- 주소 검색 -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="/w2/resources/client/client_js/client_post.js"></script>
<script src="/w2/resources/client/client_js/client_order.js"></script>
</head>
<body>
<div class="container">
<%@ include file="/WEB-INF/views/client/base/client_header.jspf" %>
<div class="body">
<c:if test="${ session == null && cookie.clientCookie.value == null }">
<div class="order" id="order_div">
<div class="order_title">
<span class="order_div_span">로그인</span>
</div>
<div id="order_login_div">
<input type="button" value="로그인하기" onclick="select_login()"><br>
<input type="button" value="비회원 주문하기" onclick="select_cookie()">
</div>
</div>
</c:if>
<c:if test="${ session != null || cookie.clientCookie.value != null }">
<script>
$(document).ready(function(){
document.querySelector("#order_form_div").style.display = "flex";
})
</script>
</c:if>
<div class="order" id="order_form_div">
<form class="order_form">
<!-- 주문자 -->
<div class="order_table person">
<div class="order_title">
<span class="order_title_span">주문자</span>
</div>
<div class="order_person_content">
<ul class="order_table_ul">
<li class="order_table_th">주문자</li>
<li class="order_table_td"><input type="text" name=""></li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">전화번호</li>
<li class="order_table_td"><input type="text" name=""></li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">이메일</li>
<li class="order_table_td"><input type="text" name=""></li>
</ul>
</div>
</div>
<!-- 배송지 -->
<div class="order_table deli">
<div class="order_title">
<span class="order_title_span">배송지</span>
</div>
<div class="order_deli_content">
<ul class="order_table_ul radio">
<li class="order_table_td">
<input type="radio" value="newDeli" id="newDeli" name="deli_info"><label for="newDeli">새로운 배송지</label>
<input type="radio" value="sameDeli" id="sameDeli" name="deli_info"><label for="sameDeli">주문자 정보와 동일</label>
</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">받는 사람</li>
<li class="order_table_td"><input type="text" name=""></li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">주소</li>
<li class="order_table_td">
<ul class="order_ul_table">
<li class="order_td_table">
<input type="text" name="addPostNum" id="addPostNum" placeholder="우편번호" disabled="disabled">
<input type="button" value="우편번호 찾기" onclick="daumPost()">
</li>
<li class="order_td_table"><input type="text" name="address1" id="address1" placeholder="기본 주소" disabled="disabled"></li>
<li class="order_td_table"><input type="text" name="address2" id="address2" placeholder="나머지 주소"></li>
</ul>
</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">전화번호</li>
<li class="order_table_td"><input type="text" name=""></li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">배송메모</li>
<li class="order_table_td">
<select class="select">
<option value="SELECT">선택</option>
<option value="">배송 전 미리 연락바랍니다.</option>
<option value="">부재 시 경비실에 맡겨주세요.</option>
<option value="">부재 시 문 앞에 놓아주세요.</option>
<option value="">빠른 배송 부탁드립니다.</option>
<option value="">택배함에 보관해 주세요.</option>
<option value="">직접입력</option>
</select>
</li>
</ul>
</div>
</div>
<!-- 비회원 비밀번호 -->
<div class="order_table pwd">
<div class="order_title">
<span class="order_title_span">비회원 주문조회 비밀번호</span>
</div>
<div class="order_pwd_content">
<ul class="order_table_ul">
<li class="order_table_th">비밀번호</li>
<li class="order_table_td"><input type="text" name=""></li>
<li class="order_table_td"></li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">비밀번호 확인</li>
<li class="order_table_td"><input type="text" name=""></li>
<li class="order_table_td"></li>
</ul>
</div>
</div>
<!-- 주문 상품 -->
<div class="order_table product">
<div class="order_title">
<span class="order_title_span">주문상품</span>
</div>
<div class="order_product_content">
<!-- 상품마다 반복 시작 -->
<ul class="order_table_ul">
<li class="order_table_td order_product">
<div class="product_info_div">
<section class="product_image_section">
<img class="product_image" src="" onclick="location.href='clientProductInfo.do?proId='">
</section>
<section class="product_content_section">
<span class="order_product_name">
<a href="clientProductInfo.do?proId=" class="community_a">
상품이름
</a>
</span>
<span class="order_product_option">
옵션
</span>
<span class="order_product_cnt">
수량
</span>
<span class="order_product_price">
금액
</span>
</section>
</div>
</li>
</ul>
<!-- 상품마다 반복 끝 -->
<ul class="order_table_ul">
<li class="order_table_th">배송비</li>
<li class="order_table_td"><input type="text" name=""></li>
</ul>
</div>
</div>
<!-- 할인 -->
<div class="order_table discount">
<div class="order_title">
<span class="order_title_span">할인</span>
</div>
<div class="order_discount_content">
<ul class="order_table_ul">
<li class="order_table_th">할인 쿠폰</li>
<li class="order_table_td">
<select class="select">
<option value="SELECT">선택</option>
<!-- 쿠폰 반복 -->
<option value="">신규 회원 배송비 무료</option>
</select>
</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">포인트</li>
<li class="order_table_td">
<input type="text" name="" id="usePoint">
<input type="button" value="사용하기">
</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">적용 금액</li>
<li class="order_table_td">- 0</li>
</ul>
</div>
</div>
<!-- 결재 정보 -->
<div class="order_table payment">
<div class="order_title">
<span class="order_title_span">결제 정보</span>
</div>
<div class="order_payment_content">
<ul class="order_table_ul">
<li class="order_table_th">주문상품</li>
<li class="order_table_td">00원</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">배송비</li>
<li class="order_table_td">00원</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">할인</li>
<li class="order_table_td">00원</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">최종 결제 금액</li>
<li class="order_table_td">00원</li>
</ul>
</div>
</div>
<!-- 결재 수단 -->
<div class="order_table payment">
<div class="order_title">
<span class="order_title_span">결제 수단</span>
</div>
<div class="order_payment_content">
<ul class="order_payment_ul">
<li class="order_payment_li">
<ul class="payment_menu">
<li id="credit_btn" class="payment_menu_btn">신용카드</li>
<li id="naver_btn" class="payment_menu_btn">네이버페이</li>
<li id="kakao_btn" class="payment_menu_btn">카카오페이</li>
</ul>
</li>
<li class="order_payment_li">
<div id="paymentDiv">
</div>
</li>
</ul>
</div>
</div>
<!-- 약관 동의 -->
<div class="order_table">
<div class="order_title">
<span class="order_title_span">약관 동의</span>
</div>
<div class="term checklist">
<input type="checkbox" value="term01" id="checkAll" name="checkAll">
<label for="checkAll"> 모든 약관 동의</label><br><br>
<div class="order_term_list">
<input type="checkbox" value="" id="check01" name="" class="check">
<label for="check01"> 쇼핑몰 이용 약관 동의 <font color="red">[ 필수 ]</font></label><br><br>
<span class="term_content">
</span>
</div><br><br>
<div class="order_term_list">
<input type="checkbox" value="" id="check02" name="" class="check">
<label for="check02"> 개인정보 수집 및 이용 동의<font color="red">[ 필수 ]</font></label><br><br>
<span class="term_content">
내용
</span>
</div><br><br>
</div>
</div>
<!-- 버튼 -->
<div class="order_btn">
<ul class="order_table_ul">
<li class="order_table_li order_btn"><input type="submit" class="btn_form" value="결제하기"></li>
</ul>
</div>
</form>
</div>
<!-- 주문 완료 -->
<div class="order">
<div class="order_title">
<span class="order_title_span">주문 완료</span>
</div>
<input type="button" value="메인페이지로"><br>
<input type="button" value="주문 상세보기">
</div>
</div>
<%@ include file="/WEB-INF/views/client/base/client_footer.jspf" %>
</div>
</body>
</html>
|
2. client_order_style.css 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
|
@charset "UTF-8";
#order_login_div {
width: width;
display: flex;
flex-direction: column;
align-items: center;
}
#order_form_div {
display: none;
}
.order_login_table {
width: 100%;
}
.order_login_table_ul {
list-style-type: none;
display: flex;
justify-content: space-around;
padding-left: 0px;
}
.order_login_table_th {
width: 30%;
margin: 2px;
padding-left: 15px;
display: flex;
align-items: center;
}
.order_login_table_td {
width: 70%;
margin: 2px;
}
.order_login_table_li {
margin: 2px;
}
.login_btn {
width: 100%;
display: flex;
justify-content: center;
}
.order {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
min-height: 300px;
}
.order_form {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.btn_form{
width: 100% !important;
height: 77px !important;
font-size: x-large !important;
font-weight: bold !important;
letter-spacing: 5px !important;
}
.order_table {
width: 90%;
border: 2px solid silver;
margin-bottom: 10px;
margin-top: 10px;
min-height: 280px;
}
.order_title {
display: flex;
justify-content: left;
height: 80px;
align-items: center;
margin: 2px;
padding-left: 15px;
}
.order_div_span {
font-size: x-large;
font-weight: bold;
}
.order_title_span {
font-size: x-large;
font-weight: bold;
padding-left: 10px;
width: 95%;
border-bottom: 3px solid grey;
padding-bottom: 20px;
}
.order_table_ul {
width: 100%;
list-style-type: none;
display: flex;
justify-content: space-around;
padding-left: 0px;
}
.order_table_ul.radio {
justify-content: flex-start !important;
}
.order_table_th {
width: 25%;
margin: 2px;
padding-left: 15px;
display: flex;
align-items: center;
margin-left: 25px;
letter-spacing: 3px;
font-weight: bold;
font-size: large;
color: dimgrey;
}
.order_table_td {
width: 55%;
margin: 2px;
padding: 8px 16px 7px 8px;
}
.order_ul_table {
width: 100%;
display: flex;
list-style-type: none;
flex-direction: column;
justify-content: space-around;
padding-left: 0px;
}
.order_td_table {
margin: 5px;
}
.order_table_li {
margin: 2px;
}
.order_btn {
width: 70%;
}
#addPostNum {
width: 50% !important;
margin-right: 15px;
}
#usePoint {
width: 50% !important;
margin-right: 15px;
}
.select {
width: 100% !important;
}
.order_product {
width: 85%;
height: 150px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.product_info_div {
width: 100%;
display: flex;
}
.product_image {
min-width: 150px;
min-height: 150px;
max-width: 170px;
max-height: 170px;
width: 70%;
height: auto;
}
.product_content_section {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
justify-content: space-evenly;
flex-direction: column;
margin-left: 20px;
}
.order_product_name > a {
text-decoration: none;
color: black;
cursor: pointer;
font-weight: bold;
font-size: large;
}
.order_product_option {
width: 100%;
}
.order_product_price {
width: 100%;
}
.term {
width: 95%;
margin: 30px;
}
.order_term_list {
width: 100%;
}
.term_content{
display: flex;
height: 90px;
border: 1px solid silver;
overflow: auto;
}
.order_payment_ul {
width: 100%;
list-style-type: none;
padding-left: 0px;
}
.order_payment_li {
width: 100%;
padding-left: 0px;
}
.payment_menu {
list-style: none;
display: flex;
padding-left: 0;
width: 80%;
font-size: x-large;
color: silver;
justify-content: flex-start;
}
.payment_menu_btn {
width: 25%;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
}
|
3. client_order.js 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
$(document).ready(function(){
// 클릭 시 페이지로 이동
const credit_btn = document.querySelector("#credit_btn");
const naver_btn = document.querySelector("#naver_btn");
const kakao_btn = document.querySelector("#kakao_btn");
const paymentDiv = document.querySelector("#paymentDiv");
let credit_span = "<ul class='order_table_ul'><li class='order_table_th'>카드 선택</li><li class='order_table_td'><select class='select'>";
credit_span += "<option value='SELECT'>선택</option><!-- 카드 반복 --><option value=''>신한카드</option></select></li></ul>";
credit_span += "<ul class='order_table_ul'><li class='order_table_th'>할부 기간</li><li class='order_table_td'><select class='select'>";
credit_span += "<option value='SELECT'>일시불</option><!-- 할부기간 반복 --><option value=''>1개월</option></select></li></ul>";
// 선택된 메뉴 강조
const select = (target) => {
credit_btn.style.color = "silver";
naver_btn.style.color = "silver";
kakao_btn.style.color = "silver";
target.style.color="dimgrey";
}
credit_btn.addEventListener('click', () => {
paymentDiv.innerHTML = credit_span;
select(credit_btn);
});
naver_btn.addEventListener('click', () => {
paymentDiv.innerHTML = "";
select(naver_btn);
});
kakao_btn.addEventListener('click', () => {
paymentDiv.innerHTML = "";
select(kakao_btn);
});
});
function select_login(){
const login_btn = document.querySelector("#order_login_btn");
const loginDiv = document.querySelector("#order_login_div");
let login_span = "<div class='order_login_table'><ul class='order_login_table_ul'><li class='order_login_table_th'>아이디 : </li>";
login_span += "<li class='order_login_table_td'><input type='text' name='clientId' placeholder='아이디'></li></ul>";
login_span += "<ul class='order_login_table_ul'><li class='order_login_table_th'>비밀번호 : </li>";
login_span += "<li class='order_login_table_td'><input type='password' name='clientPwd' placeholder='비밀번호'></li></ul>";
login_span += "<ul class='order_login_table_ul'><li class='order_login_table_li login_btn'><input type='button' value='로 그 인' onclick='orderLogin()'></li></ul></div>";
loginDiv.innerHTML = login_span;
}
function orderLogin(){
let clientId = $("input[name='clientId']").val();
let clientPwd = $("input[name='clientPwd']").val();
$.ajax({
url: "/w2/clientOrderLogin.do",
type: "POST",
async: true,
dataType: "text",
data: JSON.stringify({
clientId : clientId,
clientPwd : clientPwd
}),
contentType: "application/json",
success: function(result){
switch(result){
case '1':
alert("로그인 성공");
$("#order_div").remove();
document.querySelector("#order_form_div").style.display = "flex";
break;
case '2':
alert("비밀번호가 일치하지 않습니다. 다시 시도해주세요");
select_login();
break;
case '3':
alert("아이디가 존재하지 않습니다. 다시 시도해주세요");
select_login();
break;
}
}
});
}
function select_cookie(){
$.ajax({
url: "/w2/clientOrderCookie.do",
type: "GET",
async: true,
dataType: "text",
contentType: "application/json",
success: function(result){
// 쿠키 생성됨
$("#order_div").remove();
document.querySelector("#order_form_div").style.display = "flex";
},
error: function(){
alert("실패");
}
});
}
|
4. client_orderInfo.jsp 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEATHERWEAR</title>
<link rel="stylesheet" href="/w2/resources/client/client_css/client_base_style.css">
<link rel="stylesheet" href="/w2/resources/client/client_css/client_orderInfo_style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<%@ include file="/WEB-INF/views/client/base/client_header.jspf" %>
<div class="body">
<div class="order">
<div class="order_success">
<!-- 왼쪽 -->
<div class="order_success_left">
<!-- 주문 상태 -->
<div class="order_success_table">
<div class="order_title">
<span class="order_title_span">주문 상태</span>
</div>
<div class="order_success_content">
<ul class="order_table_ul">
<li class="order_table_th">주문번호</li>
<li class="order_table_td">
주문번호
</li>
</ul>
<ul class="order_table_ul">
<li class="order_table_th">배송지</li>
<li class="order_table_td">
<ul class="order_ul_table">
<li class="order_td_table">홍길동</li>
<li class="order_td_table">010-1234-1234</li>
<li class="order_td_table">기본주소</li>
<li class="order_td_table">(우편번호)</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 주문 상품 -->
<div class="order_success_table">
<div class="order_title">
<span class="order_title_span">주문 상품</span>
</div>
<div class="order_success_content">
<ul class="order_success_ul">
<!-- 상품마다 반복 시작 -->
<li class="order_table_td order_product">
<div class="product_info_div">
<section class="product_image_section">
<img class="product_image" src="" onclick="location.href='clientProductInfo.do?proId='">
</section>
<section class="product_content_section">
<span class="order_product_name">
<a href="clientProductInfo.do?proId=" class="community_a">
상품이름
</a>
</span>
<span class="order_product_option">
옵션
</span>
<span class="order_product_cnt">
수량
</span>
<span class="order_product_price">
금액
</span>
</section>
</div>
</li>
<!-- 상품마다 반복 끝 -->
<!-- 상품마다 반복 시작 -->
<li class="order_table_td order_product">
<div class="product_info_div">
<section class="product_image_section">
<img class="product_image" src="" onclick="location.href='clientProductInfo.do?proId='">
</section>
<section class="product_content_section">
<span class="order_product_name">
<a href="clientProductInfo.do?proId=" class="community_a">
상품이름
</a>
</span>
<span class="order_product_option">
옵션
</span>
<span class="order_product_cnt">
수량
</span>
<span class="order_product_price">
금액
</span>
</section>
</div>
</li>
<!-- 상품마다 반복 끝 -->
</ul>
</div>
</div>
</div>
<!-- 오른쪽 -->
<div class="order_success_rigth">
<!-- 주문 금액 -->
<div class="order_success_table">
<div class="order_success_title">
<span class="order_success_span">주문 금액</span>
<span class="order_success_span success_price">000원</span>
</div>
<div class="order_success_content">
<ul class="order_table_ul">
<li class="order_success_th">상품 금액</li>
<li class="order_success_td success_price">00원</li>
</ul>
<ul class="order_table_ul">
<li class="order_success_th">배송비</li>
<li class="order_success_td success_price">00원</li>
</ul>
<ul class="order_table_ul">
<li class="order_success_th">할인</li>
<li class="order_success_td success_price">00원</li>
</ul>
</div>
</div>
<!-- 결제 상세 -->
<div class="order_success_table">
<div class="order_success_title">
<span class="order_title_span">결제 상세</span>
</div>
<div class="order_success_content">
<ul class="order_table_ul">
<li class="order_success_th">신용카드 / 네이버페이</li>
<li class="order_success_td success_price">00원</li>
</ul>
<ul class="order_table_ul">
<li class="order_success_th">카드번호 | 일시불</li>
<li class="order_success_td success_price"></li>
</ul>
<ul class="order_table_ul">
<li class="order_success_th">승인일시 : 일시</li>
<li class="order_success_td success_price"></li>
</ul>
</div>
</div>
<!-- btn -->
<div class="order_success_btn">
<input type="button" value="구매내역보기">
<input type="button" value="메인페이지로">
</div><br>
<div class="order_success_btn">
<input type="button" value="취소요청">
<input type="button" value="교환요청">
</div>
</div>
</div>
</div>
</div>
<%@ include file="/WEB-INF/views/client/base/client_footer.jspf" %>
</div>
</body>
</html>
|
5. client_orderInfo_style.css 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
|
@charset "UTF-8";
.order {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
min-height: 300px;
}
.order_title {
display: flex;
justify-content: left;
height: 80px;
align-items: center;
margin: 2px;
padding-left: 15px;
}
.order_title_span {
font-size: x-large;
font-weight: bold;
padding-left: 10px;
width: 95%;
border-bottom: 3px solid grey;
padding-bottom: 20px;
}
.order_table_ul {
width: 100%;
list-style-type: none;
display: flex;
justify-content: space-around;
padding-left: 0px;
}
.order_table_ul.radio {
justify-content: flex-start !important;
}
.order_table_th {
width: 30%;
margin: 2px;
padding-left: 15px;
display: flex;
align-items: center;
margin-left: 25px;
letter-spacing: 3px;
font-weight: bold;
font-size: large;
color: dimgrey;
}
.order_table_td {
width: 70%;
margin: 2px;
padding: 8px 16px 7px 8px;
}
.order_ul_table {
width: 100%;
display: flex;
list-style-type: none;
flex-direction: column;
justify-content: space-around;
padding-left: 0px;
}
.order_td_table {
margin: 5px;
}
.order_table_li {
margin: 2px;
}
.order_product {
width: 95%;
height: 150px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.product_info_div {
width: 100%;
display: flex;
}
.product_image {
min-width: 150px;
min-height: 150px;
max-width: 170px;
max-height: 170px;
width: 70%;
height: auto;
}
.product_content_section {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
justify-content: space-evenly;
flex-direction: column;
margin-left: 20px;
}
.order_product_name > a {
text-decoration: none;
color: black;
cursor: pointer;
font-weight: bold;
font-size: large;
}
.order_product_option {
width: 100%;
}
.order_product_price {
width: 100%;
}
.order_success_content {
width: 100%;
}
.order_success {
width: 90%;
display: flex;
justify-content: space-between;
align-items: flex-start;
min-height: 350px;
flex-wrap: wrap;
}
.order_success_table {
width: 100%;
border: 2px solid silver;
margin-bottom: 10px;
margin-top: 10px;
min-height: 280px;
float:left;
}
.order_success_left {
width: 64%;
display: flex;
flex-direction: column;
align-items: center;
}
.order_success_rigth {
width: 34%;
display: flex;
flex-direction: column;
align-items: center;
}
.order_success_ul {
width: 100%;
list-style-type: none;
display: flex;
justify-content: space-around;
padding-left: 0px;
flex-direction: column;
}
.order_success_title {
display: flex;
justify-content: left;
height: 80px;
align-items: center;
margin: 2px;
padding-left: 15px;
}
.order_success_span {
font-size: x-large;
font-weight: bold;
padding-left: 10px;
width: 44%;
border-bottom: 3px solid grey;
padding-bottom: 20px;
}
.success_price {
text-align: right !important;
padding-right: 20px;
}
.order_success_th {
width: 70%;
margin: 2px;
padding-left: 15px;
display: flex;
align-items: center;
margin-left: 25px;
letter-spacing: 3px;
font-weight: bold;
font-size: large;
color: dimgrey;
}
.order_success_td {
width: 30%;
margin: 2px;
padding: 8px 16px 7px 8px;
}
.order_success_btn{
width: 100%;
display: flex;
justify-content: space-evenly;
}
label {
font-size: larger;
}
|
6. ClientPostController.java 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
package com.w2.client.controller;
import java.io.IOException;
import java.util.Map;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.util.WebUtils;
import com.w2.client.ClientService;
import com.w2.client.ClientVO;
import com.w2.util.ClientCookie;
import com.w2.util.RandomString;
@Controller
public class ClientPostController {
@Autowired
private ClientService clientService;
@Autowired // 비밀번호 암호화
private BCryptPasswordEncoder pwden;
/** 로그인 */
@PostMapping("clientLogin.do")
public String clientLogin(HttpServletRequest request) {
System.out.println("1. [ Client Post Controller ] clientLogin");
HttpSession session = request.getSession(false);
String id = request.getParameter("clientId");
String pwd = request.getParameter("clientPwd");
System.out.println("id : " + id + ", pwd : " + pwd);
ClientVO result = clientService.getClient(id);
if(result != null) {
System.out.println("4. [ Controller ] 아이디 존재");
if(pwden.matches(pwd, result.getClientPwd())) {
System.out.println("5. [ Controller ] 비밀번호 일치");
session.setAttribute("session", id);
System.out.println("6. [ Controller ] 세션 설정");
/** 세션 값 확인 방법
* session.getAttribute("session");
* session.getValue("session");
*/
// 최근 로그인 날짜 변경
clientService.setLogDate(id);
return "redirect:/clientMain.do";
}
System.out.println("5. [ Controller ] 비밀번호 불일치");
} else {
System.out.println("4. [ Controller ] 아이디 없음");
}
return "redirect:/clientLogin.do";
}
/** 아이디 찾기 */
@PostMapping("clientFindId.do")
public void clientFindId(@RequestBody Map<String, String> data, HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientFindId");
String type = request.getParameter("type");
String clientName = data.get("clientName");
String keyword = data.get("keyword");
String id = clientService.clientFindId(type, clientName, keyword);
System.out.println("4. [ Controller ] 결과 : " + id);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(id));
}
/** 비밀번호 찾기 */
@PostMapping("clientFindPwd.do")
public void clientFindPwd(@RequestBody Map<String, String> data, HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientFindPwd");
String type = request.getParameter("type");
String clientName = data.get("clientName");
String clientId = data.get("clientId");
String keyword = data.get("keyword");
int result = clientService.clientFindPwd(type, clientName, clientId, keyword);
System.out.println("4. [ Controller ] 결과 : " + result);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(result));
}
/** 비밀번호 변경 */
@PostMapping("clientSetPwd.do")
public void clientSetPwd(@RequestBody Map<String, String> data, HttpServletResponse response, ClientVO client) throws Exception {
System.out.println("1. [ Client Post Controller ] clientSetPwd");
client.setClientId(data.get("clientId"));
client.setClientPwd(pwden.encode(data.get("clientPwd")));
int result = clientService.clientSetPwd(client);
System.out.println("4. [ Controller ] 결과 : " + result);
response.setContentType("aaplication/json");
response.getWriter().write(String.valueOf(result));
}
/** 중복 체크 */
@PostMapping("clientCheck.do")
public void clientCheck(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("1. [ Client Post Controller ] clientCheck");
String comp = request.getParameter("comp");
String with = request.getParameter("checkWith");
System.err.println("comp : " + comp + ", with : " + with);
int check = clientService.clientCheckService(comp, with);
System.out.println("5. [ Controller ] 결과 : " + check);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(check));
}
/** 회원 가입 */
@PostMapping("clientSignup.do")
public String clientSignup(HttpServletRequest request, ClientVO client, Model model) {
System.out.println("1. [ Client Post Controller ] clientSignup");
System.out.println("EmailCheck : " + request.getParameter("clientEmailCheck"));
// 신규 회원 기본 설정
client.setGradeId("S");
client.setClientPoint(3000);
if(request.getParameter("clientEmailCheck") != null) {
client.setClientEmailCheck("Y");
} else {
client.setClientEmailCheck("N");
}
// 비밀번호 암호화
client.setClientPwd(pwden.encode(client.getClientPwd()));
int result = clientService.clientSignup(client);
model.addAttribute("result", result);
if(result == 1 ) {
System.out.println("4. [ Controller ] 가입 성공");
return "client_login";
}
System.out.println("4. [ Controller ] 가입 실패");
return "client_signup";
}
/** 주문 로그인 */
@PostMapping("clientOrderLogin.do")
public void clientOrderLogin(@RequestBody Map<String, String> data, HttpServletResponse response, HttpServletRequest request) throws IOException {
System.out.println("1. [ Client Post Controller ] clientLogin");
HttpSession session = request.getSession(false);
String id = data.get("clientId");
String pwd = data.get("clientPwd");
ClientVO result = clientService.getClient(id);
if(result != null) {
response.setContentType("application/json");
System.out.println("4. [ Controller ] 아이디 존재");
if(pwden.matches(pwd, result.getClientPwd())) {
System.out.println("5. [ Controller ] 비밀번호 일치");
session.setAttribute("session", id);
System.out.println("6. [ Controller ] 세션 설정");
/** 세션 값 확인 방법
* session.getAttribute("session");
* session.getValue("session");
*/
// 쿠키 존재하는 경우 쿠키 삭제
if(ClientCookie.checkCookie(request, response) == 1) {
ClientCookie.removeCookie(WebUtils.getCookie(request, "clientCookie"), response);
}
response.getWriter().write(String.valueOf(1));
// 최근 로그인 날짜 변경
clientService.setLogDate(id);
return;
}
response.getWriter().write(String.valueOf(2));
System.out.println("5. [ Controller ] 비밀번호 불일치");
} else {
response.getWriter().write(String.valueOf(3));
System.out.println("4. [ Controller ] 아이디 없음");
}
}
/** 장바구니에 상품 추가 */
@RequestMapping("clientOrderCookie.do")
public void clientOrderCookie(HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("1. [ Client Post Controller ] clientOrderCookie");
String ckId = ClientCookie.setCookie(request, response);
response.setContentType("application/json");
response.getWriter().write(String.valueOf(ckId));
return;
}
}
|
7. ClientCookie.java 작성
-- Cookie를 계속 사용해야 하므로 util 패키지로 묶어 작업하려고 합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
package com.w2.util;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.util.WebUtils;
public class ClientCookie {
// 쿠키 설정
public static String setCookie(HttpServletRequest request, HttpServletResponse response) {
System.out.println("[ ClientCookie ] setCookie");
Cookie cookie = WebUtils.getCookie(request, "clientCookie");
String ckId = null;
if(cookie == null) { // 쿠키가 생성된 적 없는 경우
ckId = RandomString.setRandomString(15);
Cookie newCookie = new Cookie("clientCookie", ckId);
newCookie.setComment("비회원 아이디");
newCookie.setPath("/w2/");
newCookie.setMaxAge(60*60*24*2);
response.addCookie(newCookie);
} else { // 이미 생성된 쿠키가 있는 경우
ckId = cookie.getValue();
// 쿠키 세션 재설정
cookie.setMaxAge(60*60*24*2);
response.addCookie(cookie);
}
return ckId;
}
// 쿠키 존재 여부 확인
public static int checkCookie(HttpServletRequest request, HttpServletResponse response) {
System.out.println("[ ClientCookie ] checkCookie");
Cookie cookie = WebUtils.getCookie(request, "clientCookie");
if(cookie == null) { // 쿠키가 생성된 적 없는 경우
return 0;
}
return 1;
}
// 쿠키 제거
public static void removeCookie(Cookie cookie, HttpServletResponse response) {
System.out.println("[ ClientCookie ] removeCookie");
if(cookie != null) {
cookie.setMaxAge(0);
response.addCookie(cookie);
}
}
}
|
>> 실행(존재하는 cookie를 삭제고 진행)
>>> 로그인하기 버튼 클릭
>>> 아이디 존재하지 않는 경우
>>> 비밀번호가 일치하지 않는 경우
>>> 로그인에 성공한 경우
>>>확인 클릭시 주문서 출력됨
-- 이후 추가할 작업
---- 세션이 있는 경우(로그인한 경우) 주문자 정보에 자동으로 기본 정보가 입력되도록 추가할 것
---- 배송지 정보에 주문자 정보와 동일을 선택 시 배송지 기본 정보가 입력되도록 추가할 것
---- 새로운 배송지 입력시 기본 배송지로 저장하는 기능 추가
---- 주문 완료 섹션은 주문 성공 시 보여질 것
>>> 주문 상세 페이지
reProject_16_ 장바구니 기능 구현 수정, 재고 수량 적용
reProject_15_주문 페이지, 주문 상세 페이지 작업 2024-01-02 주문페이지로 이동 시 session이 없는 경우(로그인하지 않은 경우) , cookie 값이 없는 경우(비회원 쿠키가 생성되지 않은 경우) 로그인/비회원
hyeonga493.tistory.com
반응형
'Project_WEATHERWEAR' 카테고리의 다른 글
| Project_AWS_S3_서버에 이미지 업로드 프로젝트에 적용하기 ver.1 (1) | 2024.01.03 |
|---|---|
| Project_AWS_S3_IAM 사용자 생성, S3 설정 (0) | 2024.01.03 |
| reProject_14_장바구니 기능 구현_3_기능 실행 결과 (0) | 2023.12.29 |
| reProject_13_장바구니 기능 구현_2_상품 상세 페이지에서 장바구니에 추가 기능 구현 (0) | 2023.12.29 |
| reProject_12_장바구니 기능 구현_1_장바구니 페이지 수정, 상품 선택 삭제, 전체 삭제 (1) | 2023.12.29 |
'Project_WEATHERWEAR' Related Articles
more
