게시판 만들어보기 12일차

게시글 검색 기능 추가

게시글의 제목이나 내용 또는 작성자중에 검색해서 찾을 수 있도록 검색기능을 추가해보려고한다.
우선을 게시글의 제목으로 글을 찾아오는것부터 만들어보자.

index.html 수정

 <div style="float: right" class="collapse navbar-collapse" id="mynavbar">
                <form action="/auth/board/search" class="d-flex" method="post">
                    <input id="search" class="form-control me-2" type="text" placeholder="Search" name="searchTitle">
                    <button class="btn btn-primary" type="submit">Search</button>
                </form>
            </div>

검색창을 만들어주고 form 태그로 /auth/board/search로 데이터를 넘겨준다
비회원도 검색기능을 사용할 수 있는 /auth를 붙여준다.

BoardApiController 수정

@PostMapping("/auth/board/search")
    public String search(String searchTitle,Model model) {
        List<Board> boardList=boardService.searchBoard(searchTitle);
        model.addAttribute("boardList", boardList);
        return "index";
    }

BoardSerivce 수정

    public List<Board> searchBoard(String searchTitle) {
        List<Board> boardList = boardRepository.findByTitleContaining(searchTitle);
        return boardList;
    }

BoardRepository 수정

@Repository
public interface BoardRepository extends JpaRepository<Board,Integer> {
   List<Board> findByTitleContaining(String searchTitle);
}

JPA의 네이밍쿼리 기능에서 findBy필드명Containing 이라는 속성이 있음
containing를 사용하면 searchTitle이 들어간 board를 찾아내준다.

JPA Named Query 속성 종류

홈화면 에서 boardList를 받아서 보여주기때문에 boardRepository에서 검색해서 찾은 boardList를 리턴시켜서 홈화면으로 전달해주면 자동으로 검색된 Board들만 나오게된다.

검색후

오류 발생

검색후에 게시글을 누르고 되돌아가기누르면 전에 검색했던 내용을 기억하지 못하고 오류가 발생

POST 방법으로 데이터를 전달하다보니 전에 검색했던 내용을 기억하지 못했다.
이를 해결하기위해서 GET 방법의 파라미터를 전달해서 url 주소를 기억할 수 있게 수정했다.

index.html 수정

          <div style="float: right" class="collapse navbar-collapse" id="mynavbar">
                <form action="/auth/board/search" class="d-flex" method="get">
                    <input id="search" class="form-control me-2" type="text" placeholder="Search" name="searchTitle">
                    <button class="btn btn-primary" type="submit">Search</button>
                </form>
            </div>

BoardApiController에서 BoardController로 이동

    @GetMapping("/auth/board/search")
    public String search(@RequestParam("searchTitle") String searchTitle, Model model) {
        List<Board> boardList=boardService.searchBoard(searchTitle);
        model.addAttribute("boardList", boardList);
        return "index";
    }

form 태그로 데이터를 전달할때 GET 메서드를 선택하면 url에 파라미터로 값이 전달된다는 것을 알았고 이전페이지로 이동을해도 url이 남아있어서 정삭으로 작동된다.

검색했던 내용이 무엇이였는지 알기위해서 search부분 input태그에 타임리프를 사용해서 값을 넣어줌

          <div style="float: right" class="collapse navbar-collapse" id="mynavbar">
                <form action="/auth/board/search" class="d-flex" method="get">
                    <input th:value="${searchTitle}" id="search" class="form-control me-2" type="text" placeholder="Search" name="searchTitle">
                    <button class="btn btn-primary" type="submit">Search</button>
                </form>
            </div>