<이론>
- HTML에서는 /resources/sample/index.html로 접근한다.
- JSP 프로그램에서는 html처럼 바로 접근이 불가능하고, HomeController.java를 거쳐서 index.jsp로 접근한다.
- 왜? 보안때문이다. 그래서 은행, 관공서, 대학에서 대부분 사용한다. 우리가 스프링을 배우는 목적이다.
( PHP는 위의 HTML처럼 파일에 바로 접근이 가능하다. 주로 중소기업 홈페이지에서 사용한다. )
- 출발은 java에서 시작했다. ( java : pc용 애플리케이션, 웹프로그램도 만드는데 모두 사용가능)
- 자바에서 출발한 스프링프레임워크 : 자바에서 웹프로그램 만드는데 특화된 라이브러리를 구조화->개발자 편리성 증가 (현재 버전5.xx, 우리가 사용하는 버전4.3.22)
- 우리가 만드는 프로젝트는 스프링MVC프로젝트이다.
- MVC에서 View단에 해당하는 기술 부분이 jsp이다.
Model(데이터베이스) <-> Controller(컨트롤러 자바 클래스) <->View(jsp페이지)
- org.edu.controller 패키지명 : 자바 클래스가 있는 폴더 경로를 말한다.
- 패키지 사용 이유 : 자바클래스 기능별로 묶어놓기 위해 명시적으로 만든 묶음
- home.jsp
- jsp: Java Server Page, 자바 서버용 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>- jsp에서 자바프로그램을 사용할 때 사용하는 태그 : <% %>
- jsp만 특별한 것 X, PHP 예를 들면 : <? ?>
- @ : annotation, 페이지 지시자(필수)
- language:"java" - 언어 : java
- contentType="text/html" - 컨텐츠타입=text/html
- charset=UTF-8 : 문자set=유니코드
- pageEncoding=UTF-8
- HomeController.java
@RequestMapping(value="/", method=RequestMethod.GET)
public String home(Locale locale, Model model){
return "home";
}- public String home() { } : 자바(스프링) 메소드 기본 형태
- 공공(public) 메소드 리턴 형태 지정(String) 메소드명(home)() { 구현내용 }
- return 반환값으로 String 클래스는 문자열을 반환
-> 우리는 index.jsp와 매칭되는 문자열을 반환한다. 상대경로 필요
- return 반환값을 쓸 때, 접미사(확장자)는 생략한다. ( 위의 경우 home.jsp인데 home만 적음)
- 접두사(prefix), 접미사(suffix) / home(접두사-파일명). jsp(접미사-확장자)
<실습>
- 반응형 웹페이지 작업 결과를 스프링MVC 프로젝트에서 home.jsp로 변환
- home.jsp 결과를 헤로쿠 클라우드에 올림
- https://leesieun.herokuapp.com 반응형 홈페이지 나오게 한다.
우리가 지금까지 만들었던 "resources/sample/반응형페이지"는 실제 서비스되는 내용이 아닌, 퍼블리셔가 만들어서 준 것을 개발자가 배치하는 공간이다. 이와 같은 컨텐츠를 static 컨텐츠라고 한다.
static과 반대되는 컨텐츠를 Dynamic컨텐츠, 동적컨텐츠라고 한다. jsp 프로그램으로 컨텐츠 내용이 수시로 변경되도록 한다. 대표적인 동적 컨텐츠 영역은 게시판이다. 게시물을 등록하면 컨텐츠가 동적으로 변화한다.
실제 개발은 WEB-INF/views 폴더에 배치한다.
그렇다면, html파일을 jsp파일로 변환하는 작업이 필요하다.
1. header.jsp, footer.jsp 생성
2. index.jsp, booking.jsp, packaging.jsp, review.jsp, contact.jsp 파일 생성
jsp파일을 생성하기 전, 사전작업이 필요하다.
src/WEB-INF/views/sample/include 폴더를 만든다.(여기에 header.jsp, footer.jsp 배치)
1. header.jsp와 footer.jsp 파일을 따로 분리하여 생성하는 이유는 모든 페이지에 공통으로 적용되기 때문이다.
- index.html 파일에서 header 부분을 복사한 후, header.jsp에 붙여넣는다.
- index.html파일에서 footer부분을 복사한 후, footer.jsp에 붙여넣는다.
2. index.jsp를 src/main/webapp/WEB-INF/views/sample 에 생성한다.
- index.jsp에 header.jsp와 footer.jsp를 추가한다.
- 부트스트랩 코어는 index페이지에만 필요하기 때문에, header.jsp에 포함시키지 않고, index.jsp에 넣는다.
- index.html의 section영역을 복사한 후, index.jsp에 붙여넣는다.
- HomeController.java 에서 index.jsp에 대한 코드를 추가해준다.
@RequestMapping(value="/", method=RequestMethod.GET)
public String index() {
return "sample/index";
}
- 위 과정을 다른 페이지에서도 반복하면 jsp로 변환 끝!
여기서 조금 다른 부분은 contact.jsp에 있다.
- input form과 textarea form에 적는 내용을 SEND했을 때 GET이 아닌 POST로 변경해 정보가 노출되지 않게 해준다.
- return 값에 적은 redirect:/reivew는 당장 보낼 곳을 정해놓은 것이다.
- 아래와 같이 적었을 때, SEND를 누르면 reivew페이지로 이동한다.
@RequestMapping(value="/contact", method=RequestMethod.POST)
public String index() {
return "redirect:/review";
}
@RequestMapping(value="/contact", method=RequestMethod.GET)
public String index() {
return "sample/contact";
}
jsp파일로 모두 변환을 하고 실행했더니, index.jsp에서 gnb메뉴 스타일에서 발생한 문제를 보았다.
이유는 부트스트랩이 영향 때문이다. 우리가 설계한 스타일을 유지하기 위해서 강제로 스타일을 지정해준다.
(부트스트랩 css 무효화시키기)
/resources/sample/css/mobile.css을 수정한다.
header 영역 스타일 지정하는 곳 위에 추가한다.
ul {
margin-bottom:inherit !important; /* !important: css위치와 상관없이 무조건 강제로 적용*/
}이렇게 스타일을 추가해주면 우리가 설계한대로 다시 완성된다.
여기에 관리자메뉴를 추가해준다.
메뉴는 공통 header영역이기 때문에 header.jsp에서 수정한다. 메뉴이름 : AdminLTE
아직 페이지를 만들지 않았기 때문에, 링크 주소는 javascript:;로 적고 alert('관리자페이지입니다')를 넣어 실행여부를 확인한다.
<li><a href="javascript:;alert('관리자페이지 준비중입니다.')">AdminLTE</a></li>