프로젝트

영화 예매 사이트 (MoVieCinema) - 영화 검색

sejin2 2024. 4. 13. 21:12

기존 영화 전체 목록을 조회하는 부분에 페이징 처리만 해놓은 부분에 searchKeyword가 있을 때 검색 결과를 조회하는 코드를 넣어준다.
키워드가 없을 때에는 전체 영화 목록을 조회하고 키워드가 있으면 해당 키워드가 있는 영화 목록을 조회한다.

영화 목록 페이지에서 사용자가 검색어를 입력하고 검색 아이콘을 누르면

위의 클릭 이벤트가 실행된다. 

사용자가 입력한 searchKeyWord를 get 방식으로 seachForm 매핑으로 넘겨주면, 컨트롤러가 받아서 해당하는 keyWord의 값을 찾아서 다시 jsp로 보내준다.

전체 목록을 조회해오는 것처럼 키워드가 맞는 결과를 조회하고, 검색 결과가 없는 경우 검색 결과가 없음을 알려준다.
전체 목록 조회와 검색 후 결과 반환 목록 조회의 주소가 다르기 때문에 ,
c:choose를 사용해 c:when에는 전체 목록 조회를 c:otherwise에는 검색한 경우의 처리를 따로 해준다.

<div class="pagination">
  <c:choose>
      <c:when test="${empty searchKeyword}">
             <a href="${pageContext.request.contextPath}/movieHome?page=0">처음으로</a>
             <a href="${pageContext.request.contextPath}/movieHome?page=${nowPage - 1}" ${nowPage <= 1 ? 'style="display:none;"' : ''}>이전</a>
             <c:forEach begin="${startPage-1}" end="${endPage}" var="pageNum">
                 <a href="${pageContext.request.contextPath}/movieHome?page=${pageNum}" ${pageNum == nowPage ? 'class="active"' : ''}>${pageNum+1}</a>
             </c:forEach>
             <a href="${pageContext.request.contextPath}/movieHome?page=${nowPage + 1}" ${nowPage >= movieList.getTotalPages()-1 ? 'style="display:none;"' : ''}>다음</a>
             <a href="${pageContext.request.contextPath}/movieHome?page=${totalPages-1}">마지막으로</a>
      </c:when>
      <c:otherwise>
          <a href="${pageContext.request.contextPath}/movieHome?page=0&searchKeyword=${fn:escapeXml(searchKeyword)}">처음으로</a>
          <a href="${pageContext.request.contextPath}/movieHome?page=${nowPage}&searchKeyword=${fn:escapeXml(searchKeyword)}" ${nowPage <= 1 ? 'style="display:none;"' : ''}>이전</a>
          <c:forEach begin="${startPage-1}" end="${endPage}" var="pageNum">
              <a href="${pageContext.request.contextPath}/movieHome?page=${pageNum}&searchKeyword=${fn:escapeXml(searchKeyword)}" ${pageNum == nowPage ? 'class="active"' : ''}>${pageNum+1}</a>
          </c:forEach>
          <a href="${pageContext.request.contextPath}/movieHome?page=${nowPage + 1}&searchKeyword=${fn:escapeXml(searchKeyword)}" ${nowPage >= movieList.getTotalPages() ? 'style="display:none;"' : ''}>다음</a>
          <a href="${pageContext.request.contextPath}/movieHome?page=${totalPages}&searchKeyword=${fn:escapeXml(searchKeyword)}" ${not empty searchKeyword ? 'style="display:none;"' : ''}>마지막으로</a>
      </c:otherwise>
  </c:choose>
</div>

그러면 전체 목록을 조회한 경우와 검색한 경우의 링크가 아래 처럼 다르게 보인다.