Jam's story

[JSP] 페이지 모듈화와 요청 흐름 ->공통적인 부분 처리 본문

JSP

[JSP] 페이지 모듈화와 요청 흐름 ->공통적인 부분 처리

애플쩀 2022. 6. 20. 11:24

top.jsp

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div style="border: solid 1px gray; height: 100px; text-align: center;">
	<h1>홍길동 웹사이트 TOP-수정</h1>
</div>
<a href="#">게시판 </a>|
<a href="#">회원관리 </a>|

bottom.jsp

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div style="border: solid 1px gray; height: 100px; text-align: center;">
	<h3>홍길동 웹사이트 BOTTOM 소개</h3>
</div>

days05/layout/left.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<ul>
	<li>로그인</li>
	<li>회원관리</li>
	<li>도움말</li>
</ul>

days05/layout/right.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
광고1<br>
광고2<br>
광고3<br>

ex02_template.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<title>2022. 6. 20.-오전 10:31:35</title>
</head>
<body>
<h3></h3>
<div style="text-align: center;">
	<table width="600" border="1" align="center">
		<tr>
			<td colspan="3">
<!-- 			top부분이 필요하다면  include 지시자 
jsp:include로 불러오기, top부분 수정이 필요하면 top.jsp만 수정  -->
				<jsp:include page="/layout/top.jsp"></jsp:include>
			</td>
		</tr>
		
		<tr height ="300">
			<td width="150" valign="top" style="background: yellow">
				<jsp:include page="/days05/layout/left.jsp"></jsp:include>
			</td>
			<td>
			<a href="ex02_memberAdd.jsp">회원추가</a>
					회원관리 Content부분<br>
					회원관리 Content부분<br>
							회원관리 Content부분<br>
									회원관리 Content부분<br>
											회원관리 Content부분<br>
			</td>

			<td valign="top" style="background: red">
				<jsp:include page="/days05/layout/right.jsp"></jsp:include>
			</td>
		</tr>
		
		<tr>
			<td colspan="3">
				<jsp:include page="/layout/bottom.jsp"></jsp:include>
			</td>
		</tr>
		
	</table>
</div>
</body>
</html>

ex02_memberAdd.jsp

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<title>2022. 6. 20.-오전 10:31:35</title>
</head>
<body>
<h3></h3>
<div style="text-align: center;">
	<table width="600" border="1" align="center">
		<tr>
			<td colspan="3">
<!-- 			top부분이 필요하다면  include 지시자 
jsp:include로 불러오기, top부분 수정이 필요하면 top.jsp만 수정  -->
				<jsp:include page="/layout/top.jsp"></jsp:include>
			</td>
		</tr>
		
		<tr height ="300">
			<td width="150" valign="top" style="background: yellow">
				<jsp:include page="/days05/layout/left.jsp"></jsp:include>
			</td>
			<td>
			회원관리 Content부분<br> 
			회원관리Content부분<br> 
			회원관리 Content부분<br> 
			회원관리 Content부분<br> 
			회원관리 Content부분<br>
			회원관리 Content부분<br>
				</td>

			<td valign="top" style="background: red">
				<jsp:include page="/days05/layout/right.jsp"></jsp:include>
			</td>
		</tr>
		
		<tr>
			<td colspan="3">
				<jsp:include page="/layout/bottom.jsp"></jsp:include>
			</td>
		</tr>
		
	</table>
</div>
</body>
</html>

 

 include 액션태그와 include 지시자  차이점 

<pre> include 액션태그</pre>
<jsp:include page="/layout/top.jsp"></jsp:include>
<pre> include 지시자 </pre>
<%@ include file="/layout/top.jsp" %>

 

top.jsp에 추가 

<%!
String id="kenik";
%>

 

incldue 액션태그는 top.jsp에서 id 변수 인식못함 

서블릿객체가 따로

include 지시자로  했을때는 변수가 출력된다. 

하나의 서블릿이 된다. 코딩자체가 옮겨짐 

 

 

차이점 정리

 

 

include.jspf

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String contextPath = request.getContextPath();
%>

 

이렇게 추가해주고 

<%@ include file="/include.jspf" %>

 

 

 

flush: 출력버퍼에 담겨있는 응답데이터를 클라이언트에게 전송하고 출력버퍼를 비우겠다.

 

<jsp:include page="/layout/top.jsp" flush="false"></jsp:include>

 

 

코드조각 자동추가하는 기능 

<%@ include file="/include.jspf" %> 이렇게 일일이 추가하기가 힘들다 

 

web.xml

url패턴이 days05인 , 

prelude는 앞에 , coda는 뒤에 가져온다. 

  <jsp-config>
  <jsp-property-group>
  <url-pattern>/days05/*</url-pattern>
  <include-prelude>/common/header.jspf</include-prelude>
  <include-coda>/common/header.jspf</include-coda>
  </jsp-property-group>
  </jsp-config>

 

 

 

저작자표시 (새창열림)

'JSP' 카테고리의 다른 글

[JSP] 게시판 - 목록, 글쓰기 기능 , 페이징 처리  (0) 2022.06.20
[JSP]자바빈즈  (0) 2022.06.20
[JSP] 에러처리  (0) 2022.06.20
[JSP] 파라미터 처리하는 메소드  (0) 2022.06.20
[JSP] 입력한 정수만큼의 합을 출력 , 계산기만들기  (0) 2022.06.19
'JSP' Related Articles more
Comments