GuestBook #4 검색 디테일부터 마무리까지

검색구현

-대소문자 문제

-좌우 공백 문제 (trim)

-중간 공백이 있을 때 어떻게 검색 처리?

-DB에 저장할 때 대소문자를 구분해서 넣을 건지 생각해야 함 (JPA는 대소문자 구분 안 해줌)

그래서 이 부분은 JPA은 사용하지 않고 메소드를 만듦

 

⇒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 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>
          </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"
                  id="btn-search" type="button">검색</button>
          <button class="btn btn-outline-secondary btn-clear"
                  id="btn-clear" type="button">초기화</button>
        </div>

      </div>
    </form>

    <script>
      var searchForm = document.getElementById("searchForm");

      document.getElementById("btn-search")
        .addEventListener("click", (e) => {
        searchForm.submit();
      });

      document.getElementById("btn-clear")
        .addEventListener("click", (e) => {
        searchForm.reset();
      });
    </script>

 

⇒list.html 상세 보기 수정

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

 

⇒read.html 목록 보기 수정

<a th:href="@{/guestbook/list(page=${requestDTO.page} , type=${requestDTO.type}, keyword =${requestDTO.keyword})}">
      <button type="button" class="btn btn-info">목록</button>
    </a>

 

⇒좌우 공백 제거

@Override
public PageResponseDTO<GuestBookDTO, GuestBook> getList(PageRequestDTO requestDTO) {

	String keyword=requestDTO.getKeyword();
    if(keyword !=null)
     requestDTO.setKeyword(keyword.trim());