◈ action 폴더에 templat_site 폴더 생성
◈ templat_site 각 폴더 생성
🐧템플릿 페이지
🎨part1
📢 클라이언트의 모든 요청에 대한 응답 결과를 제공하기 위한 JSP 문서 - 템플릿 페이지
→ Content 영역은 템플릿 페이지(index.jsp) 요청시 전달되는 값에 따라 다른 JSP 문서의 실행 결과를 가져와 동적으로 포함하여 응답 처리 - include 태그 사용
📢include 태그를 사용하여 전달값에 의해 생성된 JSP 문서의 파일경로로 스레드를 이동하여 실행결과를 제공받아 Content 영역에 동적으로 포함
→ 스레드가 이동될 JSP 문서가 없는 경우 에러 발생<jsp:include page="<%=contentFilePath %>"></jsp:include>
📃index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%-- 클라이언트의 모든 요청에 대한 응답 결과를 제공하기 위한 JSP 문서 - 템플릿 페이지 --%> <%-- → Content 영역은 템플릿 페이지(index.jsp) 요청시 전달되는 값에 따라 다른 JSP 문서의 실행 결과를 가져와 동적으로 포함하여 응답 처리 - include 태그 사용--%> <% //전달값을 반환받아 저장 String workgroup=request.getParameter("workgroup");//작업폴더명 if(workgroup==null) { workgroup="main"; } String process=request.getParameter("process");//작업파일명 if(process==null) { process="view"; } // //반환받은 전달값을 이용하여 Content 영역에 포함될 JSP 문서의 파일 경로 저장 String contentFilePath=workgroup+"/"+process+".jsp"; //System.out.println("contentFilePath = "+contentFilePath); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSP</title> <style type="text/css"> div { margin: 5px; padding: 5px; } #header { height: 200px; border: 1px solid red; } #header h1 { text-align: center; } #menu { font-size: 1.5em; text-align: right; } a, a:visited { text-decoration: none; color: black; } a:hover { color: orange; } #content { height: 500px; border: 1px solid green; text-align: center; } #footer { height: 150px; border: 1px solid blue; text-align: center; font-size: 1.2em; } </style> </head> <body> <div id="header"> <h1><a href="index.jsp?workgroup=main&process=view">쇼핑몰</a></h1> <div id="menu"> <a href="index.jsp?workgroup=company&process=history">회사연혁</a> <a href="index.jsp?workgroup=product&process=list">제품소개</a> <a href="index.jsp?workgroup=order&process=display">주문내역</a> <a href="index.jsp?workgroup=border&process=review">사용후기</a> </div> </div> <div id="content"> <%--<h2>메인 페이지</h2>--%> <%-- include 태그를 사용하여 전달값에 의해 생성된 JSP 문서의 파일경로로 스레드를 이동하여 실행결과를 제공받아 Content 영역에 동적으로 포함 --%> <%-- → 스레드가 이동될 JSP 문서가 없는 경우 에러 발생 --%> <jsp:include page="<%=contentFilePath %>"></jsp:include> </div> <div id="footer"> <div> <a href="index.jsp?workgroup=main&process=terms">이용약관</a> <a href="index.jsp?workgroup=main&process=info">개인정보</a> <a href="index.jsp?workgroup=main&process=center">고객센터</a> </div> <p>Copyright ©itwill Corp. All rights reserved.</p> </div> </body> </html>
🎨part2
📃view.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>메인 페이지</h1> <%-- 상대경로 : 클라이언트의 요청 JSP 문서의 경로를 기준으로 다른 자원의 경로 표현 --%> <%-- 문제점) 템플릿 페이지(index.jsp)가 아닌 스레드가 이동된 JSP 문서(view.jsp)를 요청한 경우 해당 자원을 찾을 수 없어 404 에러코드 발생 가능 --%> <%-- → 요청하는 JSP 문서와 응답 결과를 제공하는 JSP 문서의 경로가 다른 경우 문제 발생 --%> <%--<img src="images/Koala.jpg" width="300">--%> <%-- 해결법) JSP 문서에서 필요한 자원을 표현할 경우 절대경로로 표현하는 것을 권장 --%> <%-- //////////////////////////////////////////////////////////////////////////////////// --%> <%-- 절대경로 : 최상위 디렉토리를 기준으로 자원의 경로 표현 --%> <%-- → CSL(HTML,CSS,JavaScript)은 ServerRoot 디렉토리를 최상위 디렉토리로 표현하여 사용 --%> <%-- → SSL(Java)은 ContextRoot 디렉토리를 최상위 디렉토리로 표현하여 사용 --%> <%-- 문제점) 웹자원이 저장된 ContextRoot 디렉토리의 경로가 변경될 경우 해당 자원을 찾을 수 없어 404 에러코드 발생 가능 --%> <%--<img src="jsp/action/template_site/images/Koala.jpg" width="300">--%> <%-- 해결법) 메소드를 호출하여 ContextRoot 디렉토리의 경로를 반환받아 절대경로로 표현하는 것을 권장 --%> <%-- request.getContextPath() : 요청 JSP 문서가 위치한 ContextRoot 디렉토리의 경로를 반환하는 메소드 --%> <img src="<%=request.getContextPath() %>/action/template_site/images/Koala.jpg" width="300">
🎨part3
📃history.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>회사연혁</h1> <p>우리 회사는 오늘 만들었습니다.</p>
🎨part4
📃list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>제품소개</h1> <p>아주 좋은 제품이 많습니다.</p>
🎨part5
📃display.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>구매내역</h1> <p>아직 구매한 제품이 없습니다.</p>
🎨part6
📃review.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>사용후기</h1> <p>사용해 보진 않았지만 좋은 것 같습니다.</p>
🎨part7
📃terms.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>이용약관</h1> <p>이해하기 어려운 내용</p>
🎨part8
📃info.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>개인정보</h1> <p>개인정보는 아주 잘 보호되고 있습니다</p>
🎨part9
📃center.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <h1>고객센터</h1> <p>아직 운영되지 않습니다.</p>
