프로젝트(영화 평점사이트)

10. 검색 페이지 기능 구현

MY_STUDY 2023. 9. 25. 11:21

헤더 부분에 검색창을 만들었다. 이름으로 검색할 시, 영화 이름에 해당 키워드가 포함된다면 그것들이 검색된다. 장르로 검색할 시, 해당 장르에 속한 영화들이 검색될 것이다. 검색 페이지에는 인기순, 최신순으로 영화를 정렬하는 것이 있으니 그것도 구현할 예정이다.

 

 

 

검색창을 만든 헤더 부분의 html, select 태그에 name 요소를 searchField로, text input 태그에 name을 keyword로 명명하여 이 정보들을 컨트롤러에 전달할 예정이다. 이름 옵션과 장르 옵션에 각각 value로 값을 집어넣는다. 여기 값들을 이용하여 이름으로 조회했는지, 장르로 조회했는지 구분할 예정이다.

 

 

 

Mapper에 영화 이름으로 검색하는 메소드와 , 장르로 검색하는 메소드를 만든다. 각각 인기순, 최신순을 반영하는 메소드

 

 

 

 

영화 정보가 들어있는 movie 테이블과, 각 코멘트당 평점이 들어있는 comment 테이블을 조인한다. 각 코멘트당 평점이 들어있는 코멘트문의 score 필드의 평균을 구해 나타나게 하고, order by로 순서는 인기순이면 평점순, 만약 최신순 날짜순으로 내림차순 정렬을 한다. LIKE문과 CONCAT문을 활용하여 영화 이름에 "스" 가 들어간 영화들을 조회하였다. CONCAT문은 쿼리를 적용할 때, 그냥 %#{keyword}%로 작성할 경우 해당 영화들이 제대로 조회되지 않았기에, concat문을 같이 쓰기로 했다.

 

 

xml에 해당 쿼리문을 넣어, resultMap을 적용하였다. 검색어가 들어갈 자리에 #{keyword}를 적었다.

 

 

장르로 검색할 시, 또 하나의 테이블을 추가하여야 했기 때문에 join을 한번 더 사용하였다.  movie_category가 코미디 일 경우 코미디에 해당하는 영화 데이터들을 불러온다. resultMap 역시 해당 VO의 association을 하나 더 추가한다.

 

 

 

컨트롤러로 와서 RequestParam을 이용해 header의 form에서 요청받아서 온 keyword와 searchField를 불러온다. 만약 searchField가 "name"일 경우 영화 이름으로 검색을 하고 "genre"일 경우 영화 장르로 검색한다. 당연히 불러오는 Mapper의 메소드를 달리 한다. 마지막에 "/search"를 리턴하여 검색창으로 이동하게 하고, model을 이용해 해당 검색창에 정보들을 불러오게 한다.

 

 

 

이동해서 온 검색창의 html. model로 불러온 값들을 넣으면 완성.

 

 

 

제대로 검색이 되는걸 확인할 수 있다.