스프링 쇼핑몰 만들기 #24. 주문 상태 표시

스프링 쇼핑몰 만들기
- 깃허브 링크

상품을 주문했다면, 상품이 현재 배송준비를 하고 있는건지 아니면 배송중인건지 그것도 아니면 배송이 완료되어서 상품이 날 기다리고 있는건지 궁금해집니다.

관리자 모드의 aside.jsp를 열고

주문 목록 페이지로 이동하는 링크를 추가합니다.

모든 주문 사항을 볼 수 있는 쿼리를 작성합니다.

또, 특정 주문을 볼 수 있는 쿼리를 작성합니다.

매퍼에 쿼리를 추가합니다.

<!-- 모든 유저의 주문 목록 -->
<select id="orderList" resultType="com.kubg.domain.OrderVO">
 select
     orderId, userId, orderRec,
     userAddr1, userAddr2, userAddr3,
     orderPhon, amount, orderDate, delivery
 from tbl_order
</select>

<!-- 특정 주문 목록 -->
<select id="orderView" resultType="com.kubg.domain.OrderListVO">
 select
     o.orderId, o.userId, o.orderRec,
     o.userAddr1, o.userAddr2, o.userAddr3,
     o.orderPhon, o.amount, o.orderDate, o.delivery,
     d.orderDetailsNum, d.gdsNum, d.cartStock,
     g.gdsName, g.gdsThumbImg, g.gdsPrice
 from tbl_order o
         inner join tbl_order_details d
             on o.orderId = d.orderId
         inner join tbl_goods g
             on d.gdsNum = g.gdsNum
     where o.orderId = #{orderId}
</select>

DAO와 Service를 작성합니다.

컨트롤러에 주문 목록, 주문 상세 목록용 메서드를 추가합니다. 상품 컨트롤러(ShpController)에서 쓰는것과 비슷합니다.

// 주문 목록
@RequestMapping(value = "/shop/orderList", method = RequestMethod.GET)
public void getOrderList(Model model) throws Exception {
 logger.info("get order list");
   
 List<OrderVO> orderList = adminService.orderList();
 
 model.addAttribute("orderList", orderList);
}

// 주문 상세 목록
@RequestMapping(value = "/shop/orderView", method = RequestMethod.GET)
public void getOrderList(@RequestParam("n") String orderId,
      OrderVO order, Model model) throws Exception {
 logger.info("get order view");
 
 order.setOrderId(orderId);  
 List<OrderListVO> orderView = adminService.orderView(order);
 
 model.addAttribute("orderView", orderView);
}

admin 폴더에 shop 폴더를 생성한 뒤, list.jsp를 복사/붙여넣기 합니다. 그뒤 각각 orderList.jsp, orderView.jsp로 이름을 변경합니다.

orderList.jsp에 코드를 추가합니다.

<ul class="orderList">
 <c:forEach items="${orderList}" var="orderList">
 <li>
 <div>
  <p><span>주문번호</span><a href="/admin/shop/orderView?n=${orderList.orderId}">${orderList.orderId}</a></p>
  <p><span>주문자</span>${orderList.userId}</p>
  <p><span>수령인</span>${orderList.orderRec}</p>
  <p><span>주소</span>(${orderList.userAddr1}) ${orderList.userAddr2} ${orderList.userAddr3}</p>
  <p><span>가격</span><fmt:formatNumber pattern="###,###,###" value="${orderList.amount}" /> 원</p> 
 </div>
 </li>
 </c:forEach>
</ul>

추가된 요소에 대한 스타일을 추가합니다.

<style>
/*
#container_box table { width:900px; }
#container_box table th { font-size:20px; font-weight:bold;
       text-align:center; padding:10px; border-bottom:2px solid #666; }
#container_box table tr:hover { background:#eee; }
#container_box table td { padding:10px; text-align:center; }
#container_box table img { width:150px; height:auto; }
*/
 div#container_box ul li { border:5px solid #eee; padding:10px 20px; margin-bottom:20px; }
 div#container_box .orderList span { font-size:20px; font-weight:bold; display:inline-block; width:90px; margin-right:10px; }
</style>

관리자 모드에서 모든 사용자의 주문 사항을 확인할 수 있습니다.

orderView.jsp에도 코드를 추가합니다.

<div class="orderInfo">
  <c:forEach items="${orderView}" var="orderView" varStatus="status">
  
  <c:if test="${status.first}">
   <p><span>주문자</span>${orderView.userId}</p>
   <p><span>수령인</span>${orderView.orderRec}</p>
   <p><span>주소</span>(${orderView.userAddr1}) ${orderView.userAddr2} ${orderView.userAddr3}</p>
   <p><span>가격</span><fmt:formatNumber pattern="###,###,###" value="${orderView.amount}" /> 원</p>
  </c:if>
  
 </c:forEach>
</div>

<ul class="orderView">
 <c:forEach items="${orderView}" var="orderView">     
 <li>
  <div class="thumb">
   <img src="${orderView.gdsThumbImg}" />
  </div>
  <div class="gdsInfo">
   <p>
    <span>상품명</span>${orderView.gdsName}<br />
    <span>개당 가격</span><fmt:formatNumber pattern="###,###,###" value="${orderView.gdsPrice}" /> 원<br />
    <span>구입 수량</span>${orderView.cartStock} 개<br />
    <span>최종 가격</span><fmt:formatNumber pattern="###,###,###" value="${orderView.gdsPrice * orderView.cartStock}" /> 원                  
   </p>
  </div>
 </li>     
 </c:forEach>
</ul>

추가된 요소에 대한 스타일을 추가합니다.

<style>
/*
#container_box table { width:900px; }
#container_box table th { font-size:20px; font-weight:bold;
       text-align:center; padding:10px; border-bottom:2px solid #666; }
#container_box table tr:hover { background:#eee; }
#container_box table td { padding:10px; text-align:center; }
#container_box table img { width:150px; height:auto; }
*/
 .orderInfo { border:5px solid #eee; padding:10px 20px; margin:20px 0;}
 .orderInfo span { font-size:20px; font-weight:bold; display:inline-block; width:90px; }
 
 .orderView li { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #999; }
 .orderView li::after { content:""; display:block; clear:both; }
 
 .thumb { float:left; width:200px; }
 .thumb img { width:200px; height:200px; }
 .gdsInfo { float:right; width:calc(100% - 220px); line-height:2; }
 .gdsInfo span { font-size:20px; font-weight:bold; display:inline-block; width:100px; margin-right:10px; }
</style>

이제 관리자 모드에서 주문에 대한 상세 사항을 확인할 수 있습니다.

tbl_order 에 새로운 컬럼을 추가합니다. 이 컬럼은 배송 정보를 표시합니다.

alter table tbl_order
    add(
        delivery    varchar2(20)    default '배송준비'
    );

기본값(default)을 '배송준비'로 했기 때문에, 기존에 있던 주문과 새로 추가될 주문에는 '배송준비'가 기본으로 출력됩니다.

shopMapper와 adminMapper에서 주문 목록(orderList)과 주문 상세(orderView)에 새로 추가한 컬럼인 delivery를 추가합니다.

admin/shop/orderList.jsp에 코드를 추가합니다.

<p><span>상태</span>${orderList.delivery}</p>

이제 배송 상태가 표시됩니다.

admin/shop/orderView.jsp에 코드를 추가합니다.

<c:if test="${status.first}">
 <p><span>주문자</span>${orderView.userId}</p>
 <p><span>수령인</span>${orderView.orderRec}</p>
 <p><span>주소</span>(${orderView.userAddr1}) ${orderView.userAddr2} ${orderView.userAddr3}</p>
 <p><span>가격</span><fmt:formatNumber pattern="###,###,###" value="${orderView.amount}" /> 원</p>
 <p><span>상태</span>${orderView.delivery}</p>
 
 <div class="deliveryChange">
   <button type="button" class="delivery1_btn">배송 중</button>
   <button type="button" class="delivery2_btn">배송 완료</button>
 </div>
</c:if>

추가된 요소에 대한 스타일을 추가합니다

.deliveryChange { text-align:right; }
.delivery1_btn,
.delivery2_btn { font-size:16px; background:#fff; border:1px solid #999; margin-left:10px; }

배송 상태 아래에 배송 중 버튼과 배송 완료 버튼이 생겼습니다.

버튼을 클릭하면 컨트롤러에 데이터를 넘겨줄 수 있도록 코드를 추가합니다.

<div class="deliveryChange">
 <form role="form" method="post" class="deliveryForm">
 
  <input type="hidden" name="orderId" value="${orderView.orderId}" />
  <input type="hidden" name="delivery" class="delivery" value="" />
  
  <button type="button" class="delivery1_btn">배송 중</button>
  <button type="button" class="delivery2_btn">배송 완료</button>
  
  <script>
   $(".delivery1_btn").click(function(){
    $(".delivery").val("배송 중");
    run();
   });
   
   $(".delivery2_btn").click(function(){
    $(".delivery").val("배송 완료");
    run();
    
   });
   
   function run(){
    $(".deliveryForm").submit();
   }
  
  </script>
 </form>
</div>

버튼을 클릭하면 숨겨져있는 인풋박스에 값이 입력되고, 인풋박스의 데이터를 컨트롤러로 전송합니다.

배송 정보를 수정하는 쿼리를 작성합니다.

매퍼에 작성했던 쿼리를 추가합니다.

<!-- 배송 상태 -->
<update id="delivery">
 update tbl_order
     set delivery = #{delivery}
 where orderId = #{orderId}
 
</update>

DAO와 Service를 작성합니다.

컨트롤러에 메서드를 추가합니다.

// 주문 상세 목록 - 상태 변경
@RequestMapping(value = "/shop/orderView", method = RequestMethod.POST)
public String delivery(OrderVO order) throws Exception {
 logger.info("post order view");
   
 adminService.delivery(order);

 return "redirect:/admin/shop/orderView?n=" + order.getOrderId();
}

주문 상세 페이지에서 버튼을 클릭하면

배송 상태가 변경됩니다.

관리자 모드쪽을 작업했으니, 사용자 모드쪽도 수정해야합니다.

/shop/orderList.jsp와 /shop/orderView.jsp에 배송 상태를 출력할 코드를 추가합니다.

사용자들도 현재 상품의 상태를 확인할 수 있게 되었습니다.