검색기능 추가 및 view 정비

1. 검색기능 추가

---

• 먼저 가장 간단한 방식인 제목 검색을 추가하자.
• posts 화면에서 검색어를 입력하면 해당 글만 보여주고 싶다.

 

1.1 SearchForm

---

• HTML Form에서 사용할 객체이다.
• keyword에 검색어를 담을 예정.

@Data
public class SearchForm {

    String keyword;

    public SearchForm(String keyword) {
        this.keyword = keyword;
    }

    public SearchForm() {
    }
}

 

 

1.2 PostController

---

• 글 전체 목록 요청이 올 때 Model에 빈 SearchForm객체를 넘기자.
• 그러면 HTML Form에서 th:object를 활용이 가능하다.
• search()메서드에서  view에서 넘어온 keyword파라미터를 @RequestParam을 통해 바인딩한다. 
• 해당 keyword로 poserService의 findByTitleContaints()를 호출한다. 이후 결과를 "posts"에 담고
• view에서 랜더링.

    @GetMapping
    public String posts(Model model, HttpServletRequest request) {

        MemberDto loginMemberDto = getLoginMember(request);

        List<Post> posts = postService.findAll();
        List<PostDto> postsDto = getPostDtos(posts);

        model.addAttribute("member", loginMemberDto);
        model.addAttribute("posts", postsDto);
        model.addAttribute("searchForm", new SearchForm());

        return "post/posts";
    }

    @GetMapping("/search")
    public String search(@RequestParam("keyword") String keyword, Model model, HttpServletRequest request){

        log.info("keyword: {}", keyword);
        MemberDto loginMemberDto = getLoginMember(request);

        List<Post> posts = postService.findByTitleContains(keyword);
        List<PostDto> postsDto = getPostDtos(posts);

        model.addAttribute("member", loginMemberDto);
        model.addAttribute("posts", postsDto);
        model.addAttribute("searchForm", new SearchForm(keyword));
        model.addAttribute("status", status);

        return "post/posts";
    }

 

 

1.3 PostService, Repository

---

• 넘어온 keyword를 받아 쿼리를 날린다.
• 제목에 keyword를 포함하는 엔티티를 찾기 위한 목적임. 

    @Override
    public Optional<List<Post>> findByTitleContains(String keyword) {
        String query = "%"+keyword+"%";
        log.info("query: {}", query);
        return Optional.ofNullable(
                em.createQuery("select p from Post p where p.title like :keyword", Post.class)
                .setParameter("keyword", query)
                .getResultList());
    }

 

 

1.4 Posts.html

---

• Model에 담겨 넘어온 searchForm 객체를 th:object를 통해 활용.
• input 에 th:field="*{keyword}"를 지정했는데, input에 입력한 값이 QueryParam으로 넘어간다.
• ~~~?keyword=input

    <form action="posts.html" th:action="@{/posts/search}" th:object="${searchForm}" method="get">
        <div class="input-group mb-3">
            <input type="text" class="form-control" th:field="*{keyword}" placeholder="검색어" aria-label="Recipient's username" aria-describedby="button-addon2">
        </div>
    </form>

 

 

2. view 정비

---

• 페이지가 너무 지저분해서... 정리좀 했다. ㅋㅋㅋ

 

 

 

3. 결과

---

• 홈 화면

홈화면

• 회원가입

• 로그인 화면

• 로그인 홈 화면

• 글 목록

• 글 상세 페이지

 

• 글 검색

 

 

4. 앞으로..

---

• est용 data 서버시작할 때 DB에 올리기
• Listener
  
  • createdAt, updatedAt등
• 게시글에 작성자 표시
• view 정리
• 게시글 검색
  • 검색 옵션 추가 : 작성자, 제목 구분
• 영속성 전이 설정
• 댓글 삭제 버튼
• 대댓글
• 검증 & 예외처리
  • 회원 가입시 필수 정보 지정.
  • 데이터 타입 지정
• 인증처리
  • 로그인한 사용자만 글 & 댓글 작성 가능.
  • 본인이 작성한 글, 댓글만 삭제 가능
  • 관리자는 모든 권한
• 예외처리
• 페이징 처리
• 컬렉션 조회 최적화

 

5 GitHub: 211008 upgrade view, add search Function

---