[Spring Data JPA] 이용한 검색 기능 구현 및 페이징 구현하기 -1

검색을 구현 할 창을 만듭니다.

 

Post.jsp

<div class="form-outline">
 <form action="/post/search/title" method="get" id="searchForm">
  <input type="search" id="form1" name="keyword" class="form-control" placeholder="제목을 입력해주세요." />
<button class="btn btn-primary" style="height:35px;">
        <i class="fas fa-search"></i>
          </button>
          </form>
</div>

 여기서 중요한것은 fomr action값과 input type의 name 값 입니다. 나머지는 다르게 해도 무방합니다.

 

PostController

@GetMapping("/post/search/title")
public String postSearch(String keyword){

    Post postSearch = postService.게시글검색(keyword);

    return "/post/postsearch";
}

데이터를 옮기는것이 아니기때문에 Ajax를 사용하지않을것이므로 Controller 에 만들어줍니다.

 Controller 에 action 값에 맞춘 컨트롤러 메소드를 하나 만듭니다. action으로 keyword 값을 받아와 보낼것이므로

 매개변수에 String keyword를 넣어줍니다. 

 

 

 

PostService

@Transactional(readOnly = true)
public Post 게시글검색(String keyword){

   Post postSearch =  postRepository.findByTitleContaining(keyword);


   return postSearch;
}

 

Select 만 할것이므로 @Transactional(readOnly = true) 를 붙여줍니다. (없어도되지만 붙여줍시다.)

 그 후 Repository를 통해 findByTitleContaining(keyword) 를 해줍니다.

 

여기서

findByTitleContaining

이란

 

우리가 여러번 사용한 JPA Named 쿼리 + Containing 을 붙인것입니다.

 

 즉 저는 FindByTitle ( Post DB에 있는 title 값을 기준으로 잡은것이고)

 

위와 같이 Containing을 붙여주면 Like 검색이 가능해집니다.. 즉, %{keyword}%가 가능합니다.

 

 

 

PostRepository

 

Post findByTitleContaining(String keyword);

을 붙여주면 검색기능 끝입니다.

 

PostController

@GetMapping("/post/search/title")
public String postSearch(String keyword, Model model){

    Post postSearch = postService.게시글검색(keyword);
  
    model.addAttribute("postSearch" , postSearch);
  
    return "/post/postsearch";
}

 

 

마지막으로 컨트롤러에 세션을 추가해주고, post.jsp 파일을 복사해 postsearch.jsp 를 만들어줍니다.

 

 

postsearch.jsp

											.
                                            .
                                            .
                                            .
                                            .
                                            .
                                            

<!-- forEach 문 시작 -->

<c:forEach var="post" items="${postSearch}" begin="0" end="0">
    <div class="col-lg-8" id="bigColumn">
        <!-- Featured blog post-->

        <!-- card -->
        <div class="card mb-4" id="largeColumn">

            <a href="/post/postview/${post.id}">
            <img class="card-img-top" src="/upload/${post.postImageUrlLeft}"
             style="height: 400px;width:425px;margin:10px;"  alt="..." />
            <img class="card-img-top" src="/upload/${post.postImageUrlRight}"
             style="height: 400px;width:425px;margin:10px;"  alt="..." />
             </a>

            <div class="card-body">
                <div class="small text-muted">createDate : ${post.createDate} </div>
                <h2 class="card-title">title : ${post.title} </h2>
                <p class="card-text"> content : ${post.content}</p>
                <a class="btn btn-primary" href="/post/postview/${post.id}">Read more →</a>
            </div>
        </div>
         <!-- card End-->

            </div>
        <!--col 8 end -->

        </c:forEach>
        
        										.
                                                .
                                                .
                                                .
                                                .

 

 

 

  송중기를 기입하고 검색하니 title이 송중기가 포함된 모든 게시물이 잘 불러와집니다.

(사진은 송중기 아닙니다..;)

 

 

 이제 페이징을 해줘야 합니다. 기존 Post 의 페이징과 같은 방식을 사용하되 내용이 약간 다릅니다.

 -2 에서 다루겠습니다.