12일차 - 메인 페이지에서의 검색 기능 구현 및 배너

 

 

 

 

 

[ 배너 ]

banner, script

<div class="main--banner">
	<img src="/img/xIcon.png" alt="x" class="x--icon">
	<img src="/img/main_pop.jpg" alt="시데 데이트 배너">
</div>

<script>
	<!-- 헤더 상단 팝업 배너 -->
	document.addEventListener('DOMContentLoaded', function() {
		   var xIcon = document.querySelector('.x--icon');
	
		   xIcon.addEventListener('click', function() {
		       var mainBanner = document.querySelector('.main--banner');
		       mainBanner.style.display = 'none';
		  });
	});
</script>

 

 

banner.css

/* 상단 배너 */
.main--banner{
	width: 100%;
	position: relative;
}

.x--icon {
    position: absolute;
    right: 460px;
    cursor: pointer;
}

 

 

 

---

 

 

[ 검색 기능 ]

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>


<!-- header.jsp -->
<%@ include file="/WEB-INF/view/layout/header.jsp"%>
<div id="wrap">
    <div id="in--wrap">
        <h1 class="section--title">
            영화 검색 결과 <span style="font-size: 18px">총 ${searchList.size()}건</span>
        </h1>

        <div class="seach--movie--wrap">
        <c:choose>
            <c:when test="${not empty searchList}">
                <c:forEach var="search" items="${searchList}">
                    <div class="seach--movie--item">
                        <div class="movie--post">
                            <img src="https://image.tmdb.org/t/p/w342/${search.movieImg}" alt="${search.title}" width="100%" height="411px">
                        </div>
                        <div class="search--movie--sub">
                            <div class="seach--movie--info">
                                <div class="movie--title">${search.title}</div>
                                <div class="movie--release">${search.releaseDate}</div>
                                <div class="movie--watchgrade">${search.watchGradeNm}</div>
                            </div>
                            
                            <div class="">
                                <button type="button" class="movie--btn btn"><a href="/movie/detail?title=${movieList.title}">상세보기</a></button>
                                <button type="button" class="movie--btn btn"><a href="/movie/detail?title=${movieList.title}">예매하기</a></button>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <div class="search--result">
                    <span>검색 결과가 없습니다.</span>
                </div>
            </c:otherwise>
        </c:choose>
        </div>
    </div>
</div>
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>

 

 

 

 

SearchDTO

package com.tenco.movie.repository.model;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
@ToString
public class Search {

	private String title;
	private String movieImg;
	private String movieDesc;
	private String releaseDate;
	
	// 영화 디테일 테이블 추가
	private String prdStatNm;
	private String watchGradeNm;
	
}

 

 

 

SearchController

package com.tenco.movie.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.tenco.movie.repository.model.Search;
import com.tenco.movie.service.SearchService;

@Controller
@RequestMapping("/search")
public class SearchController {

	@Autowired
	private SearchService searchService;

	/**
	 * 메인 검색 기능
	 * 
	 * @param model
	 * @param titleSearch
	 * @return
	 */
	@GetMapping("/search")
	public String searchMovieList(Model model, @RequestParam(name = "search") String title) {

		List<Search> searchList = searchService.searchMoiveTitle(title);
		model.addAttribute("searchList", searchList);

		return "search/search";

	}

}

 

 

 

SearchService

package com.tenco.movie.service;

import java.util.Collections;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DataAccessException;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Service;

import com.tenco.movie.handler.exception.DataDeliveryException;
import com.tenco.movie.handler.exception.RedirectException;
import com.tenco.movie.repository.interfaces.SearchRepository;
import com.tenco.movie.repository.model.Search;
import com.tenco.movie.utils.Define;

import lombok.RequiredArgsConstructor;
@Service
@RequiredArgsConstructor
public class SearchService {
	
	@Autowired
	private final SearchRepository searchRepository;

	/**
	 * 메인 검색 기능
	 * @param title
	 * @return
	 */
	public List<Search> searchMoiveTitle(String title) {
		
		List<Search> searchListEntity = null;
		
		try {
			searchListEntity = searchRepository.searchMoiveTitle(title);
		} catch (DataAccessException e) {
			throw new DataDeliveryException(Define.INVALID_INPUT, HttpStatus.INTERNAL_SERVER_ERROR);
		} catch (Exception e) {
			throw new RedirectException(Define.UNKNOWN_ERROR, HttpStatus.SERVICE_UNAVAILABLE);
		}
		
		return searchListEntity != null ? searchListEntity : Collections.emptyList();
	}
	
}

 

 

 

SearchRepository

package com.tenco.movie.repository.interfaces;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import com.tenco.movie.repository.model.Search;

@Mapper
public interface SearchRepository {

	// 검색 리스트 불러오기
	public List<Search> searchMoiveTitle(@Param("title")String title);

}

 

 

 

search.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.tenco.movie.repository.interfaces.SearchRepository">

	<select id="searchMoiveTitle" resultType="com.tenco.movie.repository.model.Search">
		SELECT m.title , m.movie_img, m.movie_desc, m.release_date, md.prd_stat_nm, md.watch_grade_Nm
	    FROM movies_tb AS m
	    LEFT JOIN movie_detail_tb AS md ON m.id = md.id
	    WHERE m.title LIKE CONCAT('%', #{title}, '%')
	</select>

</mapper>