본문 바로가기
웹개발/DIOS

[웹개발 - DIOS] 주문완료 페이지

by 오엥?은 2023. 2. 25.
반응형

⌦  주문완료 페이지

 


☑︎ 배송지 정보와 상품 정보 출력 기능

- Controller

@RequestMapping(value = "orderSuccess",
        method = RequestMethod.GET)
public ModelAndView getOrderSuccess(@SessionAttribute(value = "user", required = false) UserEntity user,
                                    @RequestParam(value = "num") BigInteger orderNum) {

    ModelAndView modelAndView;
    if (user == null) {
        modelAndView = new ModelAndView("redirect:/dios/login");
    } else {
        modelAndView = new ModelAndView("store/orderSuccess");
        OrderVo[] orders = this.storeService.getOrder(user, orderNum);

        Date date = orders[0].getOrderDate();
        SimpleDateFormat formatter = new SimpleDateFormat("yyyy.MM.dd");
        String date2 = formatter.format(date);

        modelAndView.addObject("order", orders[0]);
        modelAndView.addObject("count", orders.length);
        modelAndView.addObject("date", date2);
    }

    return modelAndView;
}

주문번호를 기준으로 주문 완료된 상품을 select 하여 배열에 담는다.

여기서 날짜 정보를 가져와, SimpleDateFormat 을 사용하여 원하는 날짜 형식으로 바꿔서 modelAndView 에 넣었다.

주문 상품이 여러 개가 있어도, 배열의 첫 번째 제품의 이름만 뜨도록 하기 위해 orders[0] 을 modelAndView 에 넣고, 주문 내역에 외 (상품 개수)건 (주문한 상품의 개수)을 넣기 위해 orders 배열의 길이도 넣었다.

 

 

- Service

public OrderVo[] getOrder (UserEntity user, BigInteger orderNum) {

    return this.storeMapper.selectOrderByEmail(user.getEmail(), orderNum);
}

당연히 사용자의 이메일과 주문 번호를 기준으로 레코드를 select 해야 한다.

 

 

- HTML

<table class="infoTable">
    <tr class="date-container">
        <th class="dateTitle">주문일시 | </th>
        <td class="date" th:text="${date}"></td>
    </tr>
    <tr class="item-container">
        <th class="itemTitle">주문상품 | </th>
        <td class="item" th:text="${order.getItemName()} + ' 외 (' + ${count - 1} + ')건'"></td>
    </tr>
    <tr class="name-container">
        <th class="nameTitle">받는 분 | </th>
        <td class="name" th:text="${order.getUserName()}"></td>
    </tr>
    <tr class="contact-container">
        <th class="contactTitle">연락처 | </th>
        <td class="contact" th:text="${order.getUserContact()}"></td>
    </tr>
    <tr class="address-container">
        <th class="addressTitle">주소 | </th>
        <td class="address-box">
            <a class="address one" th:text="${'(' + order.getUserAddressPostal() + ')'}"></a>
            <a class="address two" th:text="${order.getUserAddressPrimary()}"></a>
            <a class="address three" th:text="${order.getUserAddressSecondary()}"></a>
        </td>
    </tr>
    <tr class="method-container">
        <th class="methodTitle">결제 수단 | </th>
        <td class="method" th:text="${order.getPaymentMethod()}"></td>
    </tr>
    <tr class="message-container">
        <th class="messageTitle">배송 메세지 | </th>
        <td class="message" th:text="${order.getMessage()}"></td>
    </tr>
</table>

Controller 에서 담아 온 배송 정보들을 타임리프를 이용하여 HTML 에서 출력한다.

 

<td class="item" th:text="${order.getItemName()} + ' 외 (' + ${count - 1} + ')건'"></td> 을 작성해주면, Controller 부분에서 의도했던 "{첫번째 상품 이름} 외 ({상품 개수})건" 을 출력할 수 있다.

반응형