쇼핑몰
주문하기
지난시간에 만든 코드들을 조금씩 수정하겠다.
뷰 수정.
@WebServlet(urlPatterns = {"/customer/purchase.do"})
public class CustomerPurchaseController extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.getRequestDispatcher("/WEB-INF/customer/customer_purchase.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// DB에 추가하기
Long itemno = Long.parseLong(request.getParameter("itemno"));
Long cnt = Long.parseLong(request.getParameter("cnt"));
// 로그인된 id 정보 불러오기
String id = (String) request.getSession().getAttribute("id");
// 구매에 필요한 정보 넣기
Purchase obj = new Purchase();
obj.setItemno(itemno);
obj.setCnt(cnt);
obj.setCustomerid(id);
int ret = MybatisContext.getSqlSession().getMapper(PurchaseMapper.class).insertPurahcaseOne(obj);
if(ret == 1) { // 구매에 실패했을 때
response.sendRedirect("mypage.do?menu=4");
return;
}
response.sendRedirect("product.do?itemno="+itemno);
}
}CustomerPurchaseController.java를 위처럼 수정하였다.
주문내역
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String menu = request.getParameter("menu");
if(menu == null) {
response.sendRedirect("mypage.do?menu=1");
return; //메소드 종료. 아래쪽 실행 안됨.
}
String id = (String) request.getSession().getAttribute("id");
if( Integer.parseInt(menu) == 1 ) { //정보변경시
Member obj = MybatisContext.getSqlSession().getMapper(MemberMapper.class).selectMemberOne(id);
request.setAttribute("obj", obj);
}
else if(Integer.parseInt(menu) == 2) {
}
else if(Integer.parseInt(menu) == 3) {
}
else if(Integer.parseInt(menu) == 4) {
// 주문내역 가져오기
List<PurchaseView> list = MybatisContext.getSqlSession().getMapper(PurchaseMapper.class).selectPurchaseViewMember(id);
request.setAttribute("list", list);
}
request.getRequestDispatcher("/WEB-INF/customer/customer_mypage.jsp").forward(request, response);
}CustomerMypageController.java를 위처럼 수정하고
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<div>
<form action="deletepurchase.do" method="post" id="form4">
<table class="table">
<thead>
<tr>
<th scope="col">주문번호</th>
<th scope="col">주문수량</th>
<th scope="col">주문일자</th>
<th scope="col">고객아이디</th>
<th scope="col">고객명</th>
<th scope="col">물품번호</th>
<th scope="col">물품명</th>
<th scope="col">물품가격</th>
<th scope="col">주문금액</th>
</tr>
</thead>
<tbody>
<c:set var="total" value="${0}" />
<c:forEach var="obj" items="${list}">
<tr>
<th scope="row"><input type="checkbox" name="chk[]" value="${obj.no}" />${obj.no}</th>
<td><fmt:formatNumber value="${obj.cnt}" pattern="#,###" /></td>
<td><fmt:formatDate value="${obj.regdate}" pattern="yyyy-MM-dd hh:mm:ss" /></td>
<td>${obj.customerid}</td>
<td>${obj.customername}</td>
<td>${obj.itemno}</td>
<td>${obj.itemname}</td>
<td><fmt:formatNumber value="${obj.itemprice}" pattern="#,###" /></td>
<td><fmt:formatNumber value="${obj.cnt*obj.itemprice}" pattern="#,###" /></td>
<c:set var="total" value="${total + (obj.cnt*obj.itemprice) }" />
</tr>
</c:forEach>
<tr>
<th colspan="8">합계</th>
<td>
<fmt:formatNumber value="${total}" pattern="#,###" />원
</td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-sm btn-primary" value="주문취소" onclick="deletePurchaseAction()" />
</form>
</div>
<script>
function deletePurchaseAction(){
// 태그중에서 name값이 chk[]인것을 n개 찾음
const chk = document.getElementsByName("chk[]");
let isCheck = 0;
for(let i=0; i<chk.length; i++){ //찾은 개수 만큼 반복함.
if( chk[i].checked === true ) { //체크된게 있다면
isCheck = 1;
break;
}
}
// 체크 된것이 있는지 확인
if( isCheck === 1 ){
if(confirm('주문을 취소할까요?')) {
document.getElementById("form4").submit();
}
}
else{
alert('항목을 체크하세요.');
return false;
}
}
</script>menu4.jsp를 위처럼 생성한다.
위처럼 입력한 항목들이 나오게 된다.
체크박스 체크가 가능하고, 모든 숫자들은 #,###,###으로 표시된다.
체크하지 않고 주문취소를 눌렀을 때.
체크하고 주문취소를 눌렀을 때.
@WebServlet(urlPatterns = {"/customer/deletepurchase.do"})
public class CustomerDeletePurchaseController extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// n개의 값을 받을 때는
String[] chk = request.getParameterValues("chk[]");
for(int i=0; i<chk.length; i++) {
System.out.println(chk[i]);
}
response.sendRedirect("mypage.do?menu=4");
}
}CustomerDeletePurchaseController.java를 생성하였다.
항목을 선택하고 주문취소를 누르면 해당 주문번호가 출력된다.
이제 기능을 넣어보자.
@Delete({
"<script>",
" DELETE FROM purchase WHERE customerid=#{map.id} AND no IN( ",
"<foreach collection='map.chk' item='tmp' separator=','>",
"#{tmp}",
"</foreach>",
") ",
"</script>"
})
// DELETE FROM 테이블명 WHERE customerid='a' AND no(1,2,3,4);
public int deletePurchase(@Param("map") Map<String, Object> map);mapper를 생성하고 삭제해보자.
두개를 체크하고 주문취소를 누르면
이렇게 주문내역이 사라진다.
DB에도 고객이 주문한 내역이 사라진 것을 볼 수 있다.
판매자
@WebServlet(urlPatterns = {"/purchase/select.do"})
public class ItemWriteController extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String menu = request.getParameter("menu");
if(menu == null) {
response.sendRedirect("select.do?menu=1");
return; // 메소드 종료
}
request.getRequestDispatcher("/WEB-INF/purchase/purchase_select.jsp").forward(request, response);
}
}PurchaseSelectController.java를 생성하고
<%@ 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 lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>주문관리</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" />
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a href="select.do?menu=1" class="btn btn-sm btn-primary">전체 주문목록</a>
<a href="select.do?menu=2" class="btn btn-sm btn-primary">회원별 주문목록</a>
<a href="select.do?menu=3" class="btn btn-sm btn-primary">물품별 주문목록</a>
<a href="select.do?menu=4" class="btn btn-sm btn-primary">시간대별 주문목록</a>
<hr />
<c:if test="${param.menu == 1}">
<jsp:include page="../purchase_menu/menu1.jsp"></jsp:include>
</c:if>
<c:if test="${param.menu == 2}">
<jsp:include page="../purchase_menu/menu2.jsp"></jsp:include>
</c:if>
<c:if test="${param.menu == 3}">
3
</c:if>
<c:if test="${param.menu == 4}">
4
</c:if>
</div>
<script>
</script>
</body>
</html>purchase_select.jsp를 생성하고
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div>
<h3>전체 주문목록</h3>
</div>menu1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div>
<h3>회원별 주문목록</h3>
<div style="width:700px; border:1px solid #cccccc; padding:50px;">
<canvas id="myChart"></canvas>
</div>
<button onclick="changeChart()">차트변경</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById("myChart").getContext("2d");
const config={
type : 'bar',
data : {
labels: ['a','b','c'],
datasets : [
{
label : '테스트',
data : [10,20,30]
},
{
label : '테스트1',
data : [45,20,90]
}
]
}
}
const chart = new Chart(ctx, config);
function changeChart(){
config.data.datasets[1].label='테스트1111';
config.data.datasets[1].data=[55,66,77];
chart.update();
}
</script>menu2.jsp이다.
차트가 생성이 되고
차트 변경을 누르면 입력한 숫자대로 차트가 변경된다.
@Select({
" SELECT customerid, SUM(cnt) cnt FROM purchase GROUP BY customerid"
})
public List< Map<String, Object> > selectMemberGroup();mapper를 생성하고
@WebServlet(urlPatterns = {"/api/purchase/member.json"})
public class RestPurchaseMemberController extends HttpServlet {
private static final long serialVersionUID = 1L;
private Gson gson = new Gson();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// mapper를 이용해서 회원별 주문수량 합계
response.setContentType("application/json");
List<Map<String,Object>> list = MybatisContext.getSqlSession().getMapper(PurchaseMapper.class).selectMemberGroup();
String jsonString = gson.toJson(list);
PrintWriter out = response.getWriter();
out.print(jsonString);
out.flush();
}
}RestPurchaseMemberController.java를 생성한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div>
<h3>회원별 주문수량</h3>
<div style="width:700px; border:1px solid #cccccc; padding:50px;">
<canvas id="myChart"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById("myChart").getContext("2d");
const config = {
type : 'bar',
data : {
labels: ['a','b','c'],
datasets : [{
label : '테스트',
data : [10, 20, 30]
}]
}
}
const chart = new Chart(ctx, config);
async function changeChart(){
const url = '${pageContext.request.contextPath}/api/purchase/member.json';
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
console.log(data); // [{…}, {…}]
let label = []; // 빈 배열 생성하기
let cnt = []; // 빈 배열 생성하기
for(let tmp of data) {
console.log(tmp);
label.push( tmp.CUSTOMERID ); // 고객아이디만 추출해서 label변수에 추가하기
cnt.push( tmp.CNT ); // 주문수량만 추출해서 cnt변수에 추가하기
}
//data값을 config변수로 변경
config.data.labels=label; //추출한 배열변수로 변경
config.data.datasets[0].label="회원별 주문수량";
config.data.datasets[0].data=cnt; //추출한 배열 변수로 변경
chart.update();
}
changeChart(); //함수는 자동으로 호출되지 않기 때문에 호출하기
</script>menu2.jsp를 위처럼 수정하면
등록되어있는 데이터로 표가 나온다.
