본문 바로가기
웹 개발/쇼핑몰 프로젝트(개인)

쇼핑몰 만들기(12)-관리자 페이지(주문관리, 주문 상태 변경, 주문취소)

osy9907 2024. 4. 30. 11:55
728x90

이번에는 emp가 고객의 주문상태를 변경하는 기능, 고객의 주문을 취소하는 기능을 만들어보

 

그 전에 앞서 관리자 페이지에 주문관리 페이지를 만들었다.

주문관리 페이지는 고객들의 주문이 리스트로 보여진다.

emp의 주문관리 페이지

 

empOrdersList.jsp

<%@page import="shop.dao.GoodsDAO"%>
<%@page import="java.util.*"%>
<%@page import="shop.dao.OrdersDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>
<%
	//현재 페이지 구하기
	int currentPage = 1;
	if(request.getParameter("currentPage") != null) {
		currentPage = Integer.parseInt(request.getParameter("currentPage"));
	}

	// 페이지당 보여줄 row 수
	int rowPerPage = 10;
	
	// select 박스로 rowPerPage 구하기
	if(request.getParameter("rowPerPage") != null) {
		rowPerPage = Integer.parseInt(request.getParameter("rowPerPage"));
	}
	
	// 모든 주문들의 개수
	int ordersNum = OrdersDAO.selectTotalOrdersNum();
	
	// 마지막 페이지 구하기
	int lastPage = ordersNum / rowPerPage;
	if(ordersNum % rowPerPage != 0) {
		lastPage += 1;
	}
		
	// 페이지당 시작할 row
	int startRow = (currentPage - 1) * rowPerPage;

	// 고객의 주문 목록
	ArrayList<HashMap<String, Object>> ordersList = OrdersDAO.selectTotalOrdersList(startRow, rowPerPage);
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>전체 고객 주문 목록</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<!-- 메인 메뉴 -->
<jsp:include page="/emp/inc/empMenu.jsp"></jsp:include>

	<div class="col"></div>

	<div class="col-8">
		<h1>전체 고객 주문 목록</h1>
		<table class="w3-table w3-centered w3-card-4 w3-bordered" style="margin-top: 50px; width: 100%;">
			<thead class="w3-dark-grey">
				<tr>
					<th>상품정보</th>
					<th>주문일자</th>
					<th>주문고객</th>
					<th>주문번호</th>
					<th>주문금액</th>
					<th colspan="3">주문상태</th>
				</tr>
			</thead>
			<tbody>
				<%
					for(HashMap<String, Object> m : ordersList) {
						// 이미지를 출력하기 위해 상품 데이터를 가져오는 메서드 실행
						String imgName = (String)GoodsDAO.selectGoodsInfo((String)m.get("goodsNo")).get("imgName");
				%>
						<tr>
							<td>
								<a href="/shop/emp/goods/goodsOne.jsp?goodsNo=<%=(String)(m.get("goodsNo"))%>" 
									style="text-decoration: none; color: black;">
									<img alt="" src="/shop/upload/<%=imgName%>" width="80px;">
									<%=m.get("goodsTitle")%>
								</a>
							</td>
							<td style="vertical-align: middle;"><%=m.get("ordersDate")%></td>
							<td style="vertical-align: middle;"><%=m.get("customerId")%></td>
							<td style="vertical-align: middle;">
								<a href="/shop/emp/empOrdersOne.jsp?ordersNo=<%=m.get("ordersNo")%>"
									style="text-decoration: none; color: black;">
									<%=m.get("ordersNo")%>
								</a>
								
							</td>
							<td style="vertical-align: middle;"><%=m.get("totalPrice")%>원</td>
							<td style="vertical-align: middle;"><%=m.get("ordersState")%></td>
							<%
								if(((String)(m.get("ordersState"))).equals("결제완료")) {
							%>	
									<td style="width: 10%;">
										<a class="a-to-button" href="/shop/emp/updateOrdersState.jsp?ordersNo=<%=m.get("ordersNo")%>" style="width: 100%;">배송시작</a>
									</td>
							<%
								} else if(((String)(m.get("ordersState"))).equals("리뷰완료")) {
							%>
								<td style="width: 10%;">
									<a class="a-to-button" href="/shop/emp/review/empReviewOne.jsp?ordersNo=<%=m.get("ordersNo")%>" style="width: 100%;">리뷰보기</a>
								</td>
							<%
								}
							%>
							
							<%
								if(((String)(m.get("ordersState"))).equals("결제완료")) {
							%>
									<td>
										<a class="a-to-button" href="/shop/emp/cancelEmpOrdersForm.jsp?ordersNo=<%=m.get("ordersNo")%>" style="width: 100%;">주문취소</a>
									</td>
							<%
								}
							%>
						</tr>
				<%
					}
				%>
				
			</tbody>
		</table>
		
		<!-- 페이징 버튼 -->	
		<div class="w3-bar w3-center">
	
			<%
				if(currentPage > 1) {
			%>	
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=1">처음페이지</a>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=<%=currentPage-1%>">이전페이지</a>
			<%		
				} else {
			%>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=1">처음페이지</a>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=1">이전페이지</a>
			<%		
				}
	
				if(currentPage < lastPage) {
			%>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=<%=currentPage+1%>">다음페이지</a>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=<%=lastPage%>">마지막페이지</a>
			<%		
				} else {
			%>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=<%=lastPage%>">다음페이지</a>
					<a class="w3-button" href="/shop/emp/empOrdersList.jsp?currentPage=<%=lastPage%>">마지막페이지</a>
			<%
				}
			%>
	
		</div>
	</div>
	
	<div class="col"></div>
</div>
</body>
</html>

 

고객들의 주문리스트가 많아지면 페이지 하나에 보기 불편하므로 페이징을 해줬다.

// 고객의 주문 목록
ArrayList<HashMap<String, Object>> ordersList = OrdersDAO.selectTotalOrdersList(startRow, rowPerPage);

OrdersDAO의 메서드를 통해 list<map> 형태로 주문목록들을 가져와 담았다.

그리고 주문목록의 리스트의 맵의 요소들을 하나씩 가져오며 페이지에 뿌려줬다.

 

각각의 주문의 주문상태에 따라 표시되는 버튼을 if문으로 분기시켰다.

  1. 결제완료일 경우 emp가 배송시작으로 상태를 변경 할 수 있고,
  2. 고객이 구매확정으로 상태를 변경 시켰을 경우, 리뷰를 작성하게되고, 리뷰완료 상태로 변경된다.
  3. 고객은 구매확정 상태일 경우에 주문을 취소 할 수도 있다.
  4. 리뷰완료 상태일 경우 리뷰보기버튼이 생겨 리뷰를 볼 수 있다.
  5. 고객이 작성한 리뷰는 고객 본인이 삭제할 수 있고, emp또한 삭제할 수 있다.

또한 주문 번호를 눌렀을 경우 해당 주문을 상세하게 볼 수 있다.

empOrdersOne.jsp

<%@page import="shop.dao.OrdersDAO"%>
<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>
<%
	// 요청 값
	String ordersNo = request.getParameter("ordersNo");
	
	System.out.println("empOrdersOne - ordersNo = " + ordersNo);
	
	// 해당 jsp 파일 바로 실행시 ordersNo가 null이므로 고객 주문 목록 페이지로 redirect
	if(ordersNo == null) {
		response.sendRedirect("/shop/emp/empOrdersList.jsp");
		return;
	}
%>
<%
	// 해당 주문 목록의 정보들과 상품명, 상품이미지 데이터
	HashMap<String, Object> ordersOneByEmp = OrdersDAO.selectOrdersOneByEmp(ordersNo);
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>고객 주문 상세보기</title>
	<link href="/shop/css/w3.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<!-- 메인 메뉴 -->
<jsp:include page="/emp/inc/empMenu.jsp"></jsp:include>

	<div class="col"></div>

	<div class="col-4">
		<!-- 주문 및 상품 정보, 고객 리뷰 내용 출력 -->
		<table class="w3-table w3-centered w3-card-4 w3-bordered" style="margin-top: 50px; width: 100%;">
			<thead class="w3-dark-grey">
				<tr>
					<td colspan="2">
						<h1>주문번호 <%=ordersOneByEmp.get("ordersNo")%>의 상세 내역</h1>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th style="vertical-align: middle;">상품번호</th>
					<td>
						<%=ordersOneByEmp.get("goodsNo")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">상품명</th>
					<td>
						<%=ordersOneByEmp.get("goodsTitle")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">주문고객</th>
					<td>
						<%=ordersOneByEmp.get("customerId")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">상품사진</th>
					<td>
						<img alt="" src="/shop/upload/<%=ordersOneByEmp.get("imgName")%>">
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">주문수량</th>
					<td>
						<%=ordersOneByEmp.get("totalAmount")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">주문금액</th>
					<td>
						<%=ordersOneByEmp.get("totalPrice")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">배달주소</th>
					<td>
						<%=ordersOneByEmp.get("orderAdderess")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">주문일자</th>
					<td>
						<%=ordersOneByEmp.get("ordersDate")%>
					</td>
				</tr>
				<tr>
					<th style="vertical-align: middle;">주문상태</th>
					<td>
						<%=ordersOneByEmp.get("ordersState")%>
						<%
							if(((String)(ordersOneByEmp.get("ordersState"))).equals("결제완료")) {
						%>	
								<a class="a-to-button" href="/shop/emp/updateOrdersState.jsp?ordersNo=<%=ordersOneByEmp.get("ordersNo")%>" style="width: 100%; margin: 5px auto;">배송 시작</a>
								<a class="a-to-button" href="/shop/emp/cancelEmpOrdersForm.jsp?ordersNo=<%=ordersOneByEmp.get("ordersNo")%>" style="width: 100%; margin: 0;">주문취소</a>
						<%
							} 
						%>
					</td>	
				</tr>
			</tbody>
		</table>
		
	</div>
	
	<div class="col"></div>
</div>
</body>
</html>

 

주문번호를 클릭하면 해당 페이지로 ordersNo가 넘어가고, 요청값으로 받는다

OrdersDAO의 주문번호를 통해 테이블에서 데이터를 가져오는 메서드를 사용해 map데 값을 담는다.

그리고 페이지에 값을 뽑아서 출력하면 된다!

주문상태에 따른 버튼들은 ordersList와 마찬가지이다.

ordersOne페이지

 

배송시작을 누르면 상태가 배송시작으로 변경된다.

아래에 주문상태를 변경 시키는 jsp파일이다

updateOrdersState.jsp

<%@page import="shop.dao.OrdersDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/emp/inc/commonSessionCheck.jsp"%>
<%
	// 요청 값
	String ordersNo = request.getParameter("ordersNo");
	
	// 디버깅
	System.out.println("updateOrdersState - ordersNo = " + ordersNo);
	
	// 주문번호가 null일 경우
	if(ordersNo == null) {
		// emp의 고객 주문 목록으로 redirect
		response.sendRedirect("/shop/emp/empOrdersList.jsp");
		return;
	}
%>
<%
	// 주문 상태 배송중으로 변경
	String updateState = "배송중";
	int updateOrdersStateRow = OrdersDAO.updateOrdersState(ordersNo, updateState);
	// 디버깅
	System.out.println("updateOrdersState - updateOrdersStateRow = " + updateOrdersStateRow);
	
	// 주문 상태 변경 후 주문 목록 리스트로 redirect
	response.sendRedirect("/shop/emp/empOrdersList.jsp");
%>

 

ordersNo를 요청 값으로 받고 OrdersDAO의 주문 상태 변경 메서드를 사용해 주문상태를 변경시켜준다.

주문 시작 후 list와 상세보기

 

다음은 주문 취소이다.

 

주문취소의 경우는 고객과 emp가 모두 할 수 있다.

일단 emp가 주문을 취소하는 것 먼저 하겠다.

고객 주문 취소 폼 - emp

 

주문 목록 또는 주문 상세 페이지에서 주문취소를 눌렀을 경우 해당 페이지가 나타나고, 관리자의 id, pw를 입력받도록 한다. 입력하고 버튼을 클릭하면 주문 취소 액션 페이지로 넘어간다.

 

cancelEmpOrdersAction.jsp

<%@page import="java.net.URLEncoder"%>
<%@page import="shop.dao.OrdersDAO"%>
<%@page import="shop.dao.EmpDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file ="/emp/inc/commonSessionCheck.jsp" %>

<%
	// 요청 값
	String ordersNo = request.getParameter("ordersNo");
	String empId = request.getParameter("empId");
	String empPw = request.getParameter("empPw");
	
	// 요청 값 디버깅
	System.out.println("cancelEmpOrdersAction - ordersNo = " + ordersNo);
	System.out.println("cancelEmpOrdersAction - empId = " + empId);
	System.out.println("cancelEmpOrdersAction - empPw = " + empPw);
	
	// 요청 값 null일 경우
	if(ordersNo == null || empId == null || empPw == null	) {
		response.sendRedirect("/shop/emp/empOrdersList.jsp");
		return;
	}
	
	// emp의 id,pw 검증
	boolean isEmp = EmpDAO.checkEmpIdPw(empId, empPw);
	
	// emp가 맞다면
	if(isEmp) {
		// ordersNo값 integer로 변환 후 emp에 의한 주문 삭제 쿼리 실행
		int deleteOrdersRow = OrdersDAO.deleteOrders(Integer.parseInt(ordersNo));	
		
		// 디버깅
		System.out.println("cancelEmpOrdersAction - deleteOrdersRow = " + deleteOrdersRow);
		
		response.sendRedirect("/shop/emp/empOrdersList.jsp");
		return;
	} else {
		// id, pw 불일치
		String msg = URLEncoder.encode("아이디와 비밀번호가 잘못되었습니다.", "utf-8");
		response.sendRedirect("/shop/emp/cancelEmpOrdersForm.jsp?msg=" + msg);
		return;
	}

%>

 

id,pw가 존재하는 지 emp 검증 메서드를 통해 검증을 하고, emp가 맞다면

OrdersDAO의 주문을 삭제하는 메서드로 주문을 삭제하면 끝이다.

 

삭제 후

 

728x90

'웹 개발 > 쇼핑몰 프로젝트(개인)' 카테고리의 다른 글

쇼핑몰 만들기를 마치며  (0) 2024.05.21
쇼핑몰 만들기(13)-고객 페이지(구매확정, 리뷰 기능, pw히스토리 테이블 생성)  (0) 2024.05.07
쇼핑몰 만들기(11)-고객 페이지(주문하기)  (0) 2024.04.22
쇼핑몰 만들기(10)-고객 페이지(상품 상세페이지, 고객 마이페이지(회원정보 수정 및 탈퇴)  (0) 2024.04.22
쇼핑몰 만들기(9)-고객 페이지(쇼핑몰 메인페이지, 회원가입)  (1) 2024.04.18

'웹 개발/쇼핑몰 프로젝트(개인)' Related Articles

티스토리툴바