국비 교육 66일차 - mainPage만들기

mvc구조를 이용해서 메인페이지를 통해 모든 페이지가 띄워질 수 있게끔 하는 사이트를 만드는게 팀 프로젝트의 목표이다. 그래서 이번 시간에는 mainpage를 연결하는 방법을 배웠다. 

 

먼저 mvc구조의 핵심은 model, view, controller를 나누는 것이기 때문에, model 부분에 대한 이해가 필수적이다. 

 

package com.sist.model;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sist.controller.Controller;
import com.sist.controller.RequestMapping;
import com.sist.dao.MainImageDAO;
import com.sist.dao.TripDAO;
import com.sist.vo.*;
import java.util.*;

@Controller
public class MainModel {
	@RequestMapping("main/main.do")
	public String main_home(HttpServletRequest request, HttpServletResponse response)
	{
		MainImageDAO dao=new MainImageDAO();
		List<MainImageVO> mList=dao.MainImageListData();
		
		
		/*
		 * // 쿠키 List<TripVO> ckList=new ArrayList<TripVO>(); Cookie[]
		 * cookies=request.getCookies(); if(cookies!=null) { for(int i=cookies.length;
		 * i<=0; i--) { if(cookies[i].getName().startsWith("m")) {
		 * cookies[i].setPath("/"); String no=cookies[i].getValue(); // dao연결해야함 TripVO
		 * vo=dao.tripCookieData(Integer.parseInt(no)); ckList.add(vo); } } }
		 * 
		 * request.setAttribute("ckList", ckList);
		 */

		
		request.setAttribute("mList", mList);
		request.setAttribute("main_jsp", "../main/home.jsp");
		return "../main/main.jsp";
	}
	
	
}

 main/main.do를 열면 메인화면에 데이터들을 불러올 수 있도록 작업을 해야한다. 

이번 프로젝트의 경우 쿠키로 봤던 데이터들을 추가할 생각이기 때문에, 관련 코드도 우선 적어뒀다. 

 

DAO에서 메인에 띄울 데이터들을 가져올 sql문장을 만들어서 실행시켜 준다. 

그 결과값은 List에 담아 request에 넣어준다. 마찬가지로 "main_jsp"라는 변수에 ../main/home.jsp파일을 불러올 수 있도록 셋팅을 해준다. 

 

모든 창은 main위에 띄워야하기 때문에, 리턴값은 main.jsp이다. 

 

사용자는 main.do파일을 요청하기 때문에, @RequestMapping에는 main.do 파일이 올라가게 된다. 

 

 </header>
   <!-- 내용 들어가는 위치 -->
    <jsp:include page="${main_jsp }"></jsp:include>
 
    <!-- Footer Start-->
     <footer>

 이렇게 main.jsp파일에 헤더와 푸터사이에 출력해줄 페이지를 의미하는 ${main_jsp}변수를 include해준다. 

 

아래는 home.jsp파일이다. 

 

 <c:forEach var="vo" items="${mList }" varStatus="s">
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="single-place mb-30">
                            <div class="place-img">
                                <img src="${vo.rink }" alt="">
                            </div>
                            <div class="place-cap">
                                <div class="place-cap-top">
                                    <!-- <span><i class="fas fa-star"></i><span></span> </span> -->
                                    <h3><a href="#">${vo.img_name}</a></h3>
                                   	<p class="dolor"> <span>/ Per Person</span></p>
                                </div>
                                <div class="place-cap-bottom">
                                    <ul>
                                        <li><i class="far fa-clock"></i>3 Days</li>
                                        <li><i class="fas fa-map-marker-alt"></i>Los Angeles</li> 
                                    </ul>
                                </div>
                            </div>
                        </div>      
                    </div>
                    </c:forEach>

 카드를 css로 만들어준 다음, dao에서 만들어준대로 각각의 값을 가져와준다. 이때 사용한건 c:forEach구문이다. 

 

 그럼 이런식으로 우선 출력은 완성된다. 사실상 나머지 상세보기, 카테고리별 데이터 보기도 같은 방식으로 이루어져있기 때문에, 이 부분만 잘 이해를 한다면 메인페이지를 통해 나머지 페이지를 보여주는것은 그렇게 어렵지 않다.