다연이네

[days05] 페이지 모듈화 - <%@include %>지시자와 <jsp:include>액션태그 본문

JSP

[days05] 페이지 모듈화 - <%@include %>지시자와 <jsp:include>액션태그

　다연　 2020. 12. 29. 20:27
반응형

여러 페이지에서 사용되는 공통 부분 - 페이지 모듈화

 

1) include 지시자    <%@include file="ex03_02_sub.jsp" %>
   ㄱ. main.jsp + sub.jsp 합쳐져서 하나의 서블릿 클래스가 생성 -> 출력 버퍼
   ㄴ. 공통적인 변수 또는 코딩이 있다면 사용 (마치 현재 페이지에 선언한 것 처럼)


2) jsp:include 액션태그    <jsp:include page="ex01.jsp" flush="false">
   ㄱ. main.jsp 서블릿 클래스 
        sub.jsp 서블릿 클래스 
        각각 만들어짐 (sub 실행될때 main 서블릿 잠깐 멈추고 sub 서블릿 끝나면 다시 main 실행)
        == main 서블릿 -> sub 서블릿 -> main 서블릿
   ㄴ. TOP/BOTTOM/LEFT 등 페이지의 Layout 잡을때 사용

결과물은 같지만 완전히 다르다.

 

 

 

include 액션태그 사용해보기

 

ex03_02_main.jsp

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

<%
	String name= "hong";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
	<h3>ex03_02_main.jsp</h3>
	
	main.jsp content.<br>
	main.jsp content.<br>
	main.jsp content.<br>
	
<!-- 	
	<h3>여러 페이지에서 사용되는 공통 부분 - 페이지 모듈화</h3>
<p>
공통부분<br>
공통부분<br>
공통부분<br>
공통부분<br>
</p>
-->

 <jsp:include page="ex03_02_sub.jsp" flush="false">
 	<jsp:param value="20" name="age"/>
 	<jsp:param value="${param.name }" name="name"/>
 </jsp:include> 
   <!-- 서블릿에서 서블릿 넘겨주기 -->
	<!-- false(기본) : 출력버퍼는 하나 쓰겠다 / true주면 출력버퍼 따로 주겠다 -->
	<!-- url 뒤에 ?name=admin 넘겨주면 출력됨 -->
<%-- 	
<%@include file="ex03_02_sub.jsp" %>	
--%>
	
	main.jsp content.<br>
	main.jsp content.<br>

</body>
</html>

ex03_02_sub.jsp

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

<%
	String age = request.getParameter("age");
%>
<h3>여러 페이지에서 사용되는 공통 부분 - 페이지 모듈화 :<%=age %>/${param.name} </h3>
<p>
공통부분<br>
공통부분<br>
공통부분<br>
공통부분<br>
</p>

http://localhost/jspPro/days05/ex03_02_main.jsp

파란색으로 체크한 부분이 ex03_02_sub.jsp에서 넘겨받은 부분이다. 여기서 URL 뒤에 파라미터를 붙혀주면 name 값도 출력된다.

http://localhost/jspPro/days05/ex03_02_main.jsp?name=dayeon

 

include 지시자 사용해보기

 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- include 지시자의 file 속성의 URL 설정  -->
<!-- WebContent>includee.jspf -->
<%-- <%@include file="includee.jspf" %> --%>
<!-- 서버니까 jspPro까지 왔다 == /를 붙히자 -->
 <%
	String name= "hong";
%>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>
<%-- <jsp:include page="/includee.jspf"></jsp:include> --%>
<!-- 밑 줄 contextPath 못찾음 (다른 서블릿 객체이기 때문에 변수 호환 불가) -->
includee.jspf contextPath = <%=contextPath %><br>
</body>
</html>

includee.jspf

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

<%
	//모든 웹페이지에서 공통적으로 사용할 변수, 또는 코딩
	request.setCharacterEncoding("UTF-8");
	String contextPath = request.getContextPath(); 	// /jspPro
	//web.xml
	String downLoad = application.getInitParameter("downLoad");
%>

> _main.jsp name = <%=name%><br>

 

includee.jspf 공통 변수 또는 코딩  @include 지시자 사용 필요 없이 자동으로 넣어주고 싶다

=> web.xml에 추가하자

<jsp-config>
  	<jsp-property-group>
  		<url-pattern>/days01/*</url-pattern>
  		<include-prelude>/includee.jspf</include-prelude>
  		<include-coda>/includee.jspf</include-coda>
  	</jsp-property-group>
</jsp-config>

일일히 앞에 선언할 필요 없이 days01폴더의 모든 파일들 앞에(prelude)/뒤에(coda) 삽입된 것이다.

 

 

 

include 액션태그를 사용해 페이지 레이아웃 잡기

<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){     
   });
</script>
</head>
<body>


<div style="text-align: center;">
	<table width="600" border="1" align="center">
		<tr>
			<td colspan="3">
				<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>
			회원관리부분
			</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>
				<!-- 이때@include쓰지 말자 (오류는 안나지만 쓰지마라) -->
			</td>
		</tr>
		
	</table>
</div>
</body>
</html>

 

top
<%@ 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>|


left
<%@ 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>


right
<%@ 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>


bottom
<%@ 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>

 

 

 

+

포워딩하는 액션태그
 <jsp:forward page=""> </jsp:forward> 

(쓸일은 없음, 포워딩하는 액션 태그 존재한다고만 알기)

반응형
저작자표시 비영리

'JSP' 카테고리의 다른 글

[days05] 게시판 만들기  (0) 2020.12.29
[days05] 자바 빈즈(Java Beans)  (0) 2020.12.29
[days05] JSP 예외처리  (0) 2020.12.29
[days04] 웹 어플리케이션의 4가지의 영역(scope)  (0) 2020.12.28
[days04] JSP 기본 내장 객체 1. request 2. response 3. out 4. pageContext 5. application  (0) 2020.12.28
'JSP' Related Articles more
Comments