검색 처리

검색처리

• 서버 쪽 처리
  • PageRequestDTO에 검색 타입(type)과 키워드(keyword) 추가
  • 이하 서비스 계층에서 Querydsl을 이용해서 검색 처리
• 화면 쪽 처리

---

1. PageRequestDTO 에 검색을 위한 검색조건과 검색 키워드 추가

PageRequestDTO

---

2. GuestbookServiceImpl에 getSearch() 메서드 추가

private BooleanBuilder getSearch(PageRequestDTO requestDTO) {//querydsl처리
        String type = requestDTO.getType();
        BooleanBuilder booleanBuilder = new BooleanBuilder();
        QGuestbook qGuestbook = QGuestbook.guestbook;
        String keyword = requestDTO.getKeyword();
        BooleanExpression expression = qGuestbook.gno.gt(0L); // gno > 0

        booleanBuilder.and(expression);
        if (type == null || type.trim().length() == 0) { // 검색 조건이 없는 경우
            return booleanBuilder;
        }
        // 검색 조건 작성하기
        BooleanBuilder conditionBuilder = new BooleanBuilder();
        if (type.contains("t")) {
            conditionBuilder.or(qGuestbook.title.contains(keyword));
        }
        if (type.contains("c")) {
            conditionBuilder.or(qGuestbook.content.contains(keyword));
        }
        if (type.contains("w")) {
            conditionBuilder.or(qGuestbook.writer.contains(keyword));
        }
        booleanBuilder.and(conditionBuilder);
        
        return booleanBuilder;
    }

• PageRequestDTO를 파라미터로받음
• 검색조건(type)이 있는 경우, conditionBuilder변수를 생성하여 각 검색 조건을 or로 연결 처리
• 검색조건이 없는 경우 gno > 0 조건으로만 생성

---

3. GuestbookServiceImpl의 getList() 수정

GuestbookServiceImpl

---

Test 추가하여 확인

@Test
public void testSearch(){
    PageRequestDTO pageRequestDTO = PageRequestDTO.builder()
            .page(1)
            .size(10)
            .type("tc")      // 검색조건
            .keyword("한글")  // 검색 키워드
            .build();

    PageResultDTO<GuestbookDTO, Guestbook> resultDTO = service.getList(pageRequestDTO);

    System.out.println("PREV : " + resultDTO.isPrev());
    System.out.println("NEXT : " + resultDTO.isNext());
    System.out.println("TOTAL : " + resultDTO.getTotalPage());
    System.out.println("--------------------------------------");
    
    for (GuestbookDTO guestbookDTO : resultDTO.getDtoList()){
        System.out.println(guestbookDTO);
    }

    System.out.println("=========================================");
    resultDTO.getPageList().forEach(i -> System.out.println(i));

}

• tc = title과 content에서 "한글"이 포함된 글만 검색

 

---

4. list.html 수정

4-1. 검색창 추가

<form action = "/guestbook/list" method="get" id = "searchForm">
            <div class = "input-group">
                <input type="hidden" name="page" value = "1">
                <div class="input-group-prepend">
                    <select class="custom-select" name = "type">
                        <option th:selected = "${pageRequestDTO.type == null}">------</option>
                        <option value="t" th:selected="${pageRequestDTO.type=='t'">제목</option>
                        <option value="c" th:selected="${pageRequestDTO.type=='c'">내용</option>
                        <option value="w" th:selected="${pageRequestDTO.type=='w'">작성자</option>
                        <option value="tc" th:selected="${pageRequestDTO.type=='tc'">제목+내용</option>
                        <option value="tcw" th:selected="${pageRequestDTO.type=='t'">제목+내용+작성자</option>
                    </select>
                </div>
                <input class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
                <div class="input-group-append" id="button-addon4">
                    <button class="btn btn-outline-secondary btn-search" type="button">Search</button>
                    <button class="btn btn-outline-secondary btn-clear" type="button">Clear</button>
                </div>
            </div>
        </form>

• 게시글 목록 위에 추가
• <select>태그를 이용하여 value값 을 보내줌.
  PageRequestDTO를 이용해 검색타입에 맞게 자동으로 선택됨
• 키워드(검색어)는 <input>태그로 처리

• 주소창에 쿼리스트링을 입력하면 해당 키워드와 검색타입이 적용된 상태로 출력되는 것 확인

---

4-2. 검색버튼 클릭시 이벤트 작성

var searchForm = $("#searchForm");
            $('.btn-search').click(function(e){
                searchForm.submit();
            });
            $('.btn-clear').click(function(e){
                searchForm.empty().submit();
            });

• form을 submit함으로써 변경된 검색 타입, 검색어가 쿼리스트링에 반영

---

4-3. 페이지 네비게이션 링크에 type과 keyword 추가

, type=${pageRequestDTO.type}, keyword=${pageRequestDTO.keyword}

• 기존 페이지 네비게이션은 page 값만을 처리함
• 네비게이션 클릭시 검색된 결과값 목록 중에서 이동하도록 변경

---

• thymeleaf 이용시 검색어 쿼리스트링의 공백이나 한글도 인코딩 처리되어 표시됨
• ex) "타임리프" 검색 

---

원래 한글이 인코딩 되어야 하는데 왜 안되는지

 

---

5. read.html

5-1. 조회 페이지 이동 링크에 type & keyword 추가

 <th scope="row" ><a th:href="@{/guestbook/read(gno=${dto.gno}, page=${result.page}, type=${pageRequestDTO.type}, keyword=${pageRequestDTO.keyword)}">[[${dto.gno}]]</a></th>

---

5-2. 조회 페이지 하단 링크 (수정, 목록) 처리

<a th:href="@{/guestbook/modify(gno=${dto.gno}, page=${requestDTO.page}, type=${pageRequestDTO.type}, keyword=${pageRequestDTO.keyword})}"><button type="button" class="btn btn-primary">Modify</button></a>
<a th:href="@{/guestbook/list(page=${requestDTO.page}, type=${pageRequestDTO.type}, keyword=${pageRequestDTO.keyword})}"><button type="button" class="btn btn-info">List</button></a>

---

6. modify.html 

6-1. 수정 작업 후 이동 처리 

• 등록처리 : 1페이지로 이동
• 삭제처리 : 1페이지로 이동
• 수정처리 : 조회 페이지로 이동

• page뿐 아니라 type과 keyword부분도 같이 보관했다가 <form>태그와 같이 전송하도록 수업

---

7. GuestbookController.java

7-1. 수정한 후에 조회페이지로 리다이렉트 처리될 때 검색조건 유지하도록 추가