[JSP] 액션 태그를 활용한 템플릿 페이지 작성

▶ 템플릿 페이지를 사용하는 이유

템플릿 페이지는 레이아웃을 구성하고 각 영역의 내용은 다른 페이지에서 가져오므로 전체 페이지 구성 수정 시에도 이 템플릿 페이지만 변환시키면 되므로 매우 편리하다.

▶ 템플릿 페이지의 설계

템플릿 페이지의 설계에서 중요한 것은 레이아웃 구조를 결정하는 것이다. 템플릿 페이지 자체가 레이아웃 구조나 마찬가지이기 때문이다. 템플릿 페이지 설계를 위해서는 사이트 화면의 틀이 결정되어야 한다.

▶ 액션 태그를 이용한 템플릿 페이지의 작성

파일 이름	설명
top.jsp	화면 상단에 표시될 메뉴 파일 이름이다.
bottom.jsp	화면 하단에 표시될 파일 이름이다.
left.jsp	화면 좌측에 표시될 메뉴 파일 이름이다.
newitem.jsp	신상품 페이지 파일 이름이다.
bestitem.jsp	인기상품 페이지 파일 이름이다.
template.jsp	템플릿 페이지(레이아웃) 파일 이름이다.
Login.jsp	로그인 창이 표시될 파일 이름이다.
Join.jsp	회원가입 창이 표시될 파일 이름이다.
LoginReg.jsp	로그인 성공시 표시될 파일 이름이다.
JoinReg.jsp	회원가입시 표시될 파일 이름이다.
Logout.jsp	로그아웃시 표시될 파일 이름이다.

-Login, Join, LoginReg, JoinReg, Logout은 본인이 직접 만든거,,

선생님께서 자바스크립트로 쓰는 법을 보여주셨는데 앞으로도 계속 나올거라고 하셔서 따로 적진 않았다.

top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%  String id = (String)session.getAttribute("id"); %>

<% if(id == null) {%>
	<a href="template.jsp?page=Login">Login</a>
	<a href="template.jsp?page=Join">Join</a>
<% } else { %>
	<%=id %> 님 환영합니다.
	<a href="logout.jsp">Logout</a>
<% } %>

left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<center>
<a href="./template.jsp?page=newitem">신상품</a><br><br>
<a href="./template.jsp?page=bestitem">인기상품</a><br><br>
</center>

bottom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<center>Since 2008</center>

newitem.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<b>신상품 목록입니다.</b>

bestitem.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<b>인기상품 목록입니다.</b>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="LoginReg.jsp" method="post">
		아이디 : <input type="text" name="id"><br> 
		비밀번호 : <input type="text" name="passward"><br> 
				<input type="submit" value="로그인"/>
	</form>
</body>
</html>

Join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>회원 가입</h1>
	<form action="JoinReg.jsp" method="post">
		아이디 : <input type="text" name="id"><br> 
		비밀번호 : <input type="text" name="passward"><br> 
		이름 : <input type="text" name="name"><br> 
		전화번호 : <input type="text" name="tel"><br>
		<input type="submit" value="회원 가입" />
	</form>
</body>
</html>

LoginReg.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
    <tr>
        <td><%=request.getParameter("id") %>님. 반갑습니다!</td>
    </tr>
    <a href="template.jsp?page=Logout">Logout</a>
</table>
</body>
</html>

JoinReg.jsp

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
    <tr>
        <td><%=request.getParameter("name") %>님의 회원가입이 완료되었습니다!</td>
    </tr>
</table>
</body>
</html>

Logout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
로그아웃되었습니다.
</body>
</html>

template.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String pagefile=request.getParameter("page");
	if (pagefile==null) {pagefile="newitem";}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Template Test</title>
<style>
	table {
		margin:auto;
		width:960px;
		color:gray;
		border:1px solid gray;
	}
</style>
</head>
<body>
<table border="1">
	<tr>
		<td height="43" colspan=3 align=left>
			<jsp:include page="top.jsp"/>
		</td>
	</tr>
	<tr>
		<td width="15%" align=right valign=top><br>
			<jsp:include page="left.jsp"/>
		</td>
		<td colspan=2 align=center>
			<jsp:include page='<%=pagefile+".jsp" %>'/>
		</td>
	</tr>
	<tr>
		<td width="100%" height="40" colspan="3">
			<jsp:include page="bottom.jsp"/>
		</td>
	</tr>
</table>
</body>
</html>

<실행 결과>

-신상품,인기상품 페이지

기본값을 "newitem"으로 지정했기 때문에 신상품 출력 페이지가 뜬다.

-로그인, 로그아웃

-회원가입

저작자표시

'JSP' 카테고리의 다른 글

[JSP] JSP에서 자바빈 사용하기 (0)	2021.02.24
[JSP] 자바빈 (0)	2021.02.24
[JSP] 액션 태그 (0)	2021.02.10
[JSP] 내장 객체와 액션 태그 - 영역 객체와 속성 (0)	2021.02.10
[JSP] 내장 객체와 액션 태그 - 내장 객체 (0)	2021.02.10

🐠붕어의 코딩 공부 기록🐠

[JSP] 액션 태그를 활용한 템플릿 페이지 작성

▶ 템플릿 페이지를 사용하는 이유

▶ 템플릿 페이지의 설계

▶ 액션 태그를 이용한 템플릿 페이지의 작성

<실행 결과>

'JSP' 카테고리의 다른 글

댓글

티스토리툴바

[JSP] 액션 태그를 활용한 템플릿 페이지 작성

▶ 템플릿 페이지를 사용하는 이유

▶ 템플릿 페이지의 설계

▶ 액션 태그를 이용한 템플릿 페이지의 작성

<실행 결과>

'JSP' 카테고리의 다른 글

관련글

댓글

티스토리툴바