10/26/2018

스프링 쇼핑몰 만들기 #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에 배송 상태를 출력할 코드를 추가합니다.

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

태그 :
게시물 수정
  1. walnutGod9/08/2020

    OrderVO, OrderListVO에 private String delivery 추가 안하신분들은 추가하시고 getter setter 하시면 됩니다.

    답글삭제
    답글
    1. kuzuro9/11/2020

      안녕하세요? 방문해주셔서 감사합니다.

      제가 빼먹은게 좀.. 많네요..ㅠㅠ 감사합니다.

      삭제