> For the complete documentation index, see [llms.txt](https://heunnajo.gitbook.io/jpa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://heunnajo.gitbook.io/jpa/7./undefined-7.md).

# 주문 목록 검색, 취소

**주문 검색** **컨트롤러 정리**

1. Get방식으로 들어오는 데이터를 OrderSearch로 바인딩한다.\
   @ModelAttribute는 "orderSearch" 이름으로 이 객체 데이터를 뷰 템플릿에 전달한다!
2. orderSearch로 orderService의 findOrders메서드를 호출하여 Order 들을 검색한다.\
   Order컬렉션(orders)를 생성하고, 이 객체 데이터도 뷰 템플릿에 전달한다!

```java
@GetMapping("/orders")
public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model){
    List<Order> orders = orderService.findOrders(orderSearch);
    model.addAttribute("orders",orders);

    return "order/orderList";
}
```

구현할 내용\
**상품 주문까지 완료. 주문 완료된 상품 목록들을 조회하면서 주문 검색 기능과 취소 기능을 함께 구현해본다!**

1. 컨트롤러

아래 보이는 것처럼 회원, 상품에 의존하며 회원 데이터와 상품 데이터를 가져와야한다.

![](/files/-MeS_5RuuyqQTeaUC2Tu)

@ModelAttribute로 요청 파라미터 값들을 바인딩하여 OrderSearch 객체 인스턴스에 담아서 이것을 모델에 담아 템플릿에 넘긴다.

```java
@GetMapping("/orders")
public String orderList(@ModelAttribute("orderSearch") OrderSearch orderSearch, Model model){
  List<Order> orders = orderService.findOrders(orderSearch);
  model.addAttribute("orders",orders);
  return "order/orderList";
}
```

&#x20; 2\. 타임리프 템플릿 : orderList.html **+JavaScript 추가됨**

orderList.html 분석\
일단 아래처럼 회원이름과 주문상태로 검색할 수 있도록 form태그를 추가해야한다!

![주문 내역 목업 화면](/files/-MeSbri_83KX1fMfM6Qc)

검색 기능 구현 준비물 : OrderSearch 클래스, OrderService의 검색 기능 메서드 구현(findOrders)\
OrderSearch 클래스

```java
@Getter @Setter
public class OrderSearch {
    private String memberName;//회원 이름
    private OrderStatus orderStatus;//주문 상태[ORDER, CANCEL]
}
```

OrderService의 findOrders(OrderSearch orderSearch)메서드 : 검색 기능

```java
public List<Order> findOrders(OrderSearch orderSearch){
  return orderRepository.findAllByCriteria(orderSearch);//단순위임한다.=>컨트롤러에서 리포지토리로 바로 불러도 괜찮다.단순 화면 조회같은 경우.
}
```

닭이 먼저인가 계란이 먼저인가?어떻게 시작되는 거지?(아리까리한 부분 질문 완료)\
form태그의 orderSearch가 잇는 걸 보면\
**폼 페이지에서 데이터를 먼저 전송해서 컨트롤러에서 그 데이터를 객체로 담고, 이 객체 데이터를 템플릿에 전달한 걸로 보임.**\
**폼 페이지 구성할 때 orderSearch 객체 데이터로 구성!?**\
(일단 컨트롤러에서 /orders 로 접속하면 "order/orderList" 페이지 랜더링부터해야하는 거 아닌가?)\
1\. form 태그에서 회원명, 주문 상태를 GET방식으로 데이터 전송한다.\
2\. @ModelAttribute로 요청파라미터값들을 OrderSearch 객체로 바인딩한다!\
3\. OrderService의 findOrders(orderSearch)를 호출해서 List\<Order> 변수 orders에 저장.\
4\. 모델에 "orders"이름으로 orders 담아 orderList 템플릿에 전달한다!\
5\. orderList 템플릿 렌더링한다.\
**=>@ModelAttribute("orderSearch") : 요청파라미터들을 객체로 만들 뿐만 아니라 "orderSearch" 이름으로 모델에 객체 데이터 담아서 템플릿에 전달한다!**

![](/files/-MeScQ5YXIs_P0e3R-si)

주문 상태가 ORDER이면 취소 가능하므로 스크립트로 cancel 버튼을 만들어주고, cancel 버튼을 누르면 cancel 페이지로 이동하도록 했다.

![](/files/-MeTE3hA75_x27bXM3TD)