Spring mini project 관광지 검색 페이지

화면상에서 사용자들이 관광지의 썸네일과 장소, 이름, 좋아요 수, 교통약자 종류를 한눈에 보여주는 것이 관광지 검색페이지의 목적이다 

 

우리 사이트의 관광지 검색 방법은 총 2가지이다

 

1. 타이핑을 통한 단어 검색

2. 카테고리(교통약자 종류, 서울시 구) 를 통한 관광지 검색

 

이 두가지로 나뉘게 되는데 이부분에 대한 화면구성은 다음과 같이 하였다. 

화면적인 ui는 jsp에서 구성하였는데 엄연히 1번방법과 2번방법은 다른로직으로 구성이 되어있게끔 form태그를 2개로 분리해주었고 특히 2번째 방법은 교통약자부분을 checkbox 방식으로 정해주었고 이부분도 역시 name값을 각각 설정해주었다. 

 

1. 교통약자 종류 검색

2. 서울구 검색

 

3. 단어 검색 

 

그리고 이 방식을 만들놓고 관광지 데이터를 DB에 넣고 조회를 시켜주었다. 

 

여행관련된 tourist데이터들을 50개정도 넣어주었고 

tourist에 칼럼은 다음과 같다

CREATE TABLE tourist (
   tourist_id   Integer AUTO_INCREMENT PRIMARY KEY,
   tourist_name VARCHAR(50)   NOT NULL,
   tourist_title   VARCHAR(100)   NOT NULL,
   tourist_subtitle   VARCHAR(200)   NOT NULL,
   tourist_content   VARCHAR(2000)   NOT NULL,
   tourist_restdate   varchar(200)   NOT NULL,
   tourist_time   varchar(1000)   NOT NULL,
   tourist_phonenumber   VARCHAR(30)   NOT NULL,
   tourist_site   varchar(200)   NOT NULL,
   lati   FLOAT   NOT NULL,
   logi   FLOAT   NOT NULL,
   local varchar(200)   NOT NULL,
   menu_icon1   TINYINT(1)   NOT NULL   DEFAULT 0,
   menu_icon2   TINYINT(1)   NOT NULL   DEFAULT 0,
   menu_icon3   TINYINT(1)   NOT NULL   DEFAULT 0,
   menu_icon4   TINYINT(1)   NOT NULL   DEFAULT 0,
   menu_icon5   TINYINT(1)   NOT NULL   DEFAULT 0,
   menu_icon6   TINYINT(1)   NOT NULL   DEFAULT 0,
   menu_icon7   TINYINT(1)   NOT NULL   DEFAULT 0
);

이 정보는 menu_icon부분은 교통약자시설의 종류가 7가지 정도가 존재를 하는데 만약 장애인전용 리프트가 시설이 갖춰져있다면 1 아니면 0으로 해서 값을 넣어주었다. 이부분은 검색부분에서 사용될 예정이다

일단은 전체조회를 먼저해보자!

먼저 sql부분이다

<mapper namespace="mapper.tour">
	<select id="selecttourlist" resultType="com.seoul.guide.tour.DTO.TourDTO">
    <![CDATA[
        SELECT t.tourist_id, t.tourist_name, t.tourist_title, t.tourist_subtitle, t.tourist_content, t.tourist_restdate, t.tourist_time, t.tourist_phonenumber, t.tourist_site, t.lati, t.logi, t.local, t.menu_icon1, t.menu_icon2, t.menu_icon3, t.menu_icon4, t.menu_icon5, t.menu_icon6, t.menu_icon7, COALESCE(l.like_count, 0) AS like_count
		FROM tourist t
		LEFT JOIN (
		    SELECT tourist_id, COUNT(like_id) AS like_count
		    FROM Likemark
		    GROUP BY tourist_id
		) l ON l.tourist_id = t.tourist_id;
    ]]>
	</select>

사실 tourist부분을 select로 조회하면 끝이지만 우리는 좋아요도 표시를 해야하기에 Likemark(뒤에 등장할예정)을 join을 시켜서 tourist테이블과 같이 조회가 되게끔한다 그리고 DAO를 거치고 Service로 가서 Controller로 이동을 시켜준다 

 

touristDAO

@Override
	public List<TourDTO> selecttourlist() throws Exception {
		return sqlsession.selectList("mapper.tour.selecttourlist");
	}

TourService

@Override
	public List<TourDTO> gettourList() throws Exception {
		return tourDAO.selecttourlist();
	}

TourController

	@RequestMapping(value = "tourlist", method = RequestMethod.GET)
	public ModelAndView tour() {
		ModelAndView mav = new ModelAndView();		
		try {
			mav.addObject("tourlist", tourservice.gettourList());
			mav.setViewName("tour/tour");
		}catch (Exception e) {
			e.printStackTrace();
		}
		return mav;
	}

그리고 model에 전체조회한 List<tourist>가 들어가게 되는데 jsp에 풀어주기만 하면완성이 된다

<c:forEach items="${tourlist}" var="tour">	
        <div class="tourlist lists__item js-load">
        <a href="${path}/guide/detail?id=${tour.tourist_id}" class="result-box">
            <div class="tourimg" style="background-image: url(./resources/img/tour/tour${tour.tourist_id}.jpg);">
                <div class="heart-box">
                    <span class="material-symbols-outlined">favorite</span>
                    <p>${tour.like_count }</p>
                </div>
            </div>
                <div class="tourtext">
                    <p class="text1">${tour.tourist_title}</p>
                    <p class="text2">${tour.tourist_subtitle}</p>
                </div>
            <div class="menu_icon">
                <c:if
                    test="${tour.menu_icon1  == 1 || tour.menu_icon3  == 1 || tour.menu_icon4  == 1}">
                    <div>
                        <img class="icon1" alt="" src="resources/img/icons/Group 1.png">
                    </div>
                </c:if>
                <c:if test="${tour.menu_icon6  == 1}">
                    <div>
                        <img class="icon1" alt="" src="resources/img/icons/Group 2.png">
                    </div>
                </c:if>
                <c:if test="${tour.menu_icon5  == 1}">
                    <div>
                        <img class="icon1" alt="" src="resources/img/icons/Group 3.png">
                    </div>
                </c:if>
                <c:if test="${tour.menu_icon2  == 1}">
                    <div>
                        <img class="icon1" alt="" src="resources/img/icons/Group 4.png">
                    </div>
                </c:if>

            </div>
            </a>
        </div>

</c:forEach>

<c:forEach items="${tourlist}" var="tour"> 이부분은 이제 풀어주는 부분이다 

그리고  tour.menu_icon부분은 

각 관광지에서 7가지 종류의 교통약자시설들이 구비가 되어있는지 안되어있는지에 따라서 4가지 아이콘의 유무를 판단시켜준다. 

 

결과 페이지는 다음 같다! 

 

일단 검색하지 않을떄 전체조회가 되는부분까지 완성하였고 각각 관광지에 들어가있는 교통약자의 종류 icon 그리고 좋아요 수 등 정보를 하나씩 나타내는데 까지는 성공하였다