스프링부트 공부기록(23) - 방명록 작성:: 게시물 검색 구현

🤍방명록 검색 구현

검색을 구현하기 위해 생각해보아야 할 것

• 검색 기능을 구현하기 위해 PageRequestDTO에 검색 타입(type), 검색어(keyword) 추가 필요
• 서비스 계층에서 Querydsl 이용해서 검색 처리
• 검색 타입은 제목(t), 내용(c), 작성자(w)로 검색하는 경우와
• 제목 혹은 내용(tc), 제목 혹은 내용 혹은 작성자(twc)로 검색하는 경우가 있다.

 

1. PageRequestDTO 수정

 

2. 서비스 코드 작성

• PageRequestDTO를 파라미터로 받아 검색 조건(type)이 있을 시 conditionBuilder 변수를 생성해서 검색 조건을 or로 연결해서 처리함.
• 검색 조건이 없을 시 'gno>0'으로만 생성됨.

 

3. 검색 조건을 처리하기 위해 목록 getList() 메소드 수정

 

4. list.html에 검색 화면 추가

 <!--검색-->
        <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 == 'tcw'}">제목+내용+작성자</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-outline-secondary btn-clear" type="button">Clear</button>
                </div>
            </div>
        </form>

 

5. 검색 버튼, Clear 버튼에 이벤트 처리

 //검색 버튼
    var searchForm = $("#searchForm");
    $('.btn-search').click(function (e){
        searchForm.submit();
    });

    //모든 검색 조건 없이 새로 목록 페이지
    $('.btn-clear').click(function (e){
        searchForm.empty().submit();
    });

 

6. 검색 구현 완료

 

7. Clear 버튼 클릭 시 초기화됨.