티스토리 뷰
* <jsp:include> 액션태그
보통 하나의 웹 사이트를 구성하는 페이지들은 동일한 상단 메뉴, 좌측 메뉴 그리고 하단 푸터를 갖는다. 이런 공통 구성 요소를 위한 코드를 모든 jsp 페이지마다 작성한다면 코드 중복이 발생하게 된다. 게다가 공통 구성 요소의 일부를 수정하려면 모든 jsp 페이지를 수정해야 하는 부담도 있다. 이런 화면 구성 요소의 코드 중복 문제를 없앨 때 사용 할 수 있는 것이 바로 <jsp:include> 액션 태그이다.
* <jsp:include> 액션태그 사용법
|
1 |
<jsp:include page ="포함할 페이지" flush="true"/> |
cs |
- page : 포함할 jsp 페이지의 경로를 지정한다.
- flush : 지정한 jsp 페이지를 실행하기 전에 출력 버퍼를 플러시 할지 여부를 지정한다. true이면 출력 버퍼를 플러시하고, false이면 플러시하지 않는다. 기본값은 false 이다.
출력 버퍼를 플러시한다는 말은 <jsp:include> 액션태그를 실행하는 시점에서 출력 버퍼에 저장된 출력 내용들을 출력한 뒤 페이지 이동을 실행하겠다는 것이다. 출력 버퍼를 플러시하면 응답 상태 코드와 HTTP 응답 헤더가 웹 브라우저에 함께 전송된다.
* <jsp:include> 액션태그를 이용한 중복 영역 처리
일반적인 웹 사이트는 상단 메뉴, 좌측 메뉴, 중앙 내용, 하단 메뉴 등의 요소로 구성되어 있다. 구성 요소 중에는 상단 메뉴나 하단 메뉴처럼 모든 페이지에서 동일한 것들도 있고, 좌측 메뉴처럼 페이지에 따라서 변경되는 부분도 있다. 또한, 페이지의 중앙 내용처럼 페이지마다 서로 다른 내용이 출력되는 것도 있다.
만약 각 jsp 페이지마다 공통된 화면 영역을 코드를 포함해야할때 한 개의 jsp 페이지만 코딩하면 문제가 안되지만 수십 또는 수백 개의 jsp 페이지를 코딩해야 한다면 개발 유지보수 과정에서 많은 양의 코드를 중복해서 작성해야 한다.
이 중복 문제는 <jsp:include> 액션태그를 사용하면 해결할 수 있다.
* top.jsp, bottom.jsp, left.jsp, template.jsp 를 제외한 bestitem.jsp, newitem.jsp 는 내용이 계속 바뀌는 패이지 이다. bestitem.jsp, newitem.jsp를 제외한 나머지 jsp 파일은 중복된다. 중복을 막고 페이지 a 태그를 눌렀을때 중간 화면이 바뀌게 하라.
* top.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<a href="">Login</a>
|
<a href="">Join</a>
</body>
</html> |
cs |
* bottom.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
Singce 2018
</body>
</html> |
cs |
* left.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
String pageChange;
%>
<!-- get 방식으로 값 보내기 -->
<!-- <a href="./template.jsp?page=newitem">신상품</a><br> -->
<a href="?pageChange=newitem.jsp">신상품</a>
<br>
<a href="?pageChange=bestitem.jsp">인기상품</a>
</body>
</html> |
cs |
* newitem.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
신상품 목록입니다.
</body>
</html> |
cs |
* bestitem.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
인기 상품 목록입니다.
</body>
</html> |
cs |
* template.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 |
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
String select = request.getParameter("pageChange");
if (select == null) {
select = "bestitem.jsp";
}
%>
<table border=1 width=500>
<tr>
<td colspan="2"><jsp:include page="top.jsp" flush="false" /></td>
</tr>
<tr>
<td width=100><jsp:include page="left.jsp" flush="false" /></td>
<td><jsp:include page="<%=select%>" flush="false" /></td>
</tr>
<tr>
<td colspan="2"><jsp:include page="bottom.jsp" flush="false" /></td>
</tr>
</table>
</body>
</html> |
cs |
* 풀이
선택할 수 있는 a 태그 를 누를때 <a href="?pageChange=newitem.jsp">신상품</a> 처럼 pageChange라는 변수안에 String 값을 넣는다.
메인 페이지에서 pageChange를 받아온뒤 select 변수에 넣어준다. <jsp:include> 액션 태그를 이용하여 page 이동 부분에 내가 이동할 select 값을 넣는다.
* 완성 화면
'Web > JSP' 카테고리의 다른 글
| [JSTL] <c:forEach> 태그 (1) | 2018.05.04 |
|---|---|
| [JSP] JavaBean을 이용한 회원가입 폼 만들기(유효성ver) (0) | 2018.04.16 |
| [jsp]post, get, sendRedirect를 이용한 페이지 이동 (0) | 2018.04.13 |
| [JSP] session을 이용한 장바구니 만들기 (0) | 2018.04.13 |
| [JSP] 스코프(Scope), 생성주기 (1) | 2018.04.13 |