오늘은 include 액션태그를 이용해서 중복된 페이지를
보통 하나의 웹 사이트를 구성하는 페이지들은 상단, 좌측 메뉴 등 동일한 페이지들로 구성된다. 이렇게 공통적으로 구성된 페이지의 코드를 모든 JSP 페이지마다 작성을 한다면 코드 중복이 발생하게된다.
이런 화면 구성 요소의 코드 중복 문제를 없앨 때 사용하는 것이 <jsp:include>액션태그이다.
이번에는 include 액션태그를 이용해서 간단한 페이지를 만들어 보고자 한다
먼저 우리가 만들 결과 화면이다.
이 화면을 구성하기 위해서는 top, bottom, left, newitem, bestitem, template.jsp 총 6개의 jsp 파일이 필요하다.
*top.jsp
|
1
2 |
<a href="Login.jsp">Login</a> | <!-- Login.jsp로 이동하는 하이퍼링크를 지정해준다. -->
<a href="Join.jsp">Join</a> |
cs |
간단하게 만들어 보기위해서 Login, Join.jsp의 기능들은 생략한다.
*bottom.jsp
|
1 |
<p align="center">Since 2018</p> |
cs |
메인 화면의 하단부를 구성하는 부분이다.
*left.jsp
|
1
2 |
<a href ="?page=newitem">신상품</a><br><br> <!-- .jsp가 보이면 다른사람이 어떤 파일로 만들었는지에 대해 알 수 있어서 보안상의 문제로 지우는게 낫다. -->
<a href ="?page=bestitem">인기상품</a> |
cs |
메인 화면의 좌측메뉴를 구성하는 부분이다.
*newitem.jsp
|
1 |
<h2>신상품 목록입니다.</h2> |
cs |
메인화면에서 좌측메뉴에서 신상품목록을 클릭시 오른쪽칸에 바뀌는 페이지이다.
*bestitem.jsp
|
1 |
<h2>인기상품 목록입니다.</h2> |
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
38
39
40 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>상품페이지</title>
</head>
<body>
<table border="3" width="1000" >
<tr>
<td colspan="2" height="50">
<jsp:include page="top.jsp"></jsp:include> <%-- 화면의 상단 부분인 테이블의 첫번째 칸 부분에 top.jsp를 include 액션태그를 이용해서 include를 시킨다 --%>
</td>
<tr>
<td align ="center" width="150" height="100">
<jsp:include page="left.jsp"></jsp:include> <%-- 테이블의 두번째칸의 왼쪽부분에 --%>
</td>
<%
String sel_page = request.getParameter("page"); /* 처음에 template페이지에서 바로 실행하니까 sel_page에는 null값이 들어온다. */
if(sel_page == null){
sel_page = "newitem"; /* 초기화면에 표시될 include페이지 */
}
sel_page += ".jsp"; /* left.jsp에서 링크를 누르면 page의 값 newitem이나 bestitem이 들어오고 그 뒤에 .jsp를 붙인다 */
%>
<td align="center">
<jsp:include page="<%= sel_page %>"></jsp:include> <!-- newitem이나 bestitem뒤에 .jsp가 붙은채로 sel_page가 넘어와서 표현식으로 화면에 표시한다. -->
</td>
</tr>
<tr>
<td colspan="2" height="50">
<jsp:include page="bottom.jsp"></jsp:include> <%-- 화면의 하단 부분인 테이블의 세번째 칸 부분에 bottom.jsp를 include 액션태그를 이용해서 include를 시킨다 --%>
</td>
</tr>
</table>
</body>
</html> |
cs |
인기상품을 클릭한 결과화면
응용해서 다른 홈페이지를 만들때 사용하면 좋을거 같다.
'JSP' 카테고리의 다른 글
| JDBC를 활용한 회원가입 예제 (0) | 2018.05.01 |
|---|---|
| 자바빈(Beans)를 이용한 회원가입(유효성검사) (0) | 2018.04.16 |
| Errorpage(오류페이지) 설정하기 (0) | 2018.04.16 |
| [JSP]session을 활용한 프로그램 (0) | 2018.04.16 |
