액션 태그 (forward / include / 템플릿 페이지 작성)

티스토리 뷰

JSP

액션 태그 (forward / include / 템플릿 페이지 작성)

태로미 2023. 2. 23. 20:25

▶▶ 액션 태그

– 서버나 클라이언트에게 어떤 행등을 하도록 명령하는 태그.
– JSP 페이지에서 페이지와 페이지 사이 제어하고, 다른 페이지의 실행 결과 내용을 현재 페이지에 포함시킴.

– 사용자에게 보여지는 프레젠테이션 부분과 요청을 처리하는 비즈니스 로직 부분을 분리하는 것이 가능하여

프로그램 재사용성을 높여주고 코드의 간결성을 향상시킴.
– 자바 빈즈(JavaBeans)등의 다양한 기능 제공.

– 액션 태그는 XML문법을 이용하여 구현된 기능이므로, 단독으로 쓰일 때는 태그의 끝에 종료 태그가 있어야 하고,

하위 태그가 있을 때는 반드시 종료태그를 밑에 적어주어야 함.

ex ) <jsp:forward page="scopeAction"/>

<jsp:forward apge="scopeAction"></jsp:forward>

• 페이지 흐름 제어 액션 (forward / include 액션)

• 자바빈 사용 액션 (useBean 액션)

• 애플릿 사용 액션 (plugin 액션)

▶ forward 액션

– forward액션은 내장 객체 중 pageContext 내장 객체의 forward() 메서드가 태그로 구현된 것.

– 현재 페이지의 요청과 응답에 관한 처리권을 page속성에 지정된 이동할 페이지로 영구적으로 넘기는 기능.

→ 사용자가 request에 지정한 속성들은 포워딩된 페이지에서도 그대로 사용할 수 있음.

– 다른 이동방식과는 다르게 request영역의 데이터를 사용 가능함.

– 주소의 변경이 없는 대신에 화면의 변경이 발생함.
– 이동할 페이지에 추가적으로 파라미터를 넘겨줄 필요가 있을 때에는
<jsp:param name="파라미터 이름" value="파라미터 값" /> 하위태그를 사용함.

▸ DNS (Domain Naming System)

– IP 네트워크에서 사용하는 시스템.

– 원래 인터넷 주소는 IP주소로 이루어져 있으나, IP주소로 하면 사용자가 알아보기 불편하므로 영어주소를 사용함.

– 내가 만든 jsp파일과 네이버를 비교해보았을 때, 나는 .jsp로 끝나지만 네이버는 .naver를 사용함.

사실상 네이버도 저렇게 주소가 깔끔하지않을 것이지만 사용자들에게는 깔끔하게 보이게끔 하며,

너무 많은 정보를 보여주면 보안에 취약해지므로 사용자들에게는 주소가 깔끔하게 보임.

그 기술이 바로 포워딩! 이렇게 주소줄을 관심있게 보면 아는만큼 보임.

▶ include 액션

– include 액션은 임시로 제어권을 include되는 페이지로 넘겼다가

그 페이지의 처리가 끝나면 처리 결과는 원래 페이지로 되돌아오고, 제어권 또한 원래 페이지로 반환하는 방식.

– JSP에서 'include'는 딱 2개, '지시어'와 '액션태그'에만 있음.

– include 지시어는 일반적으로 정적인 코드(저작권 표시 등)를 포함시킬 때 주로 사용하고,

include 액션은 JSP페이지처럼 동적인 페이지를 포함시키고자 할 때 주로 사용함.

▸ <%@ include file=" "%> (JSP 지시어)

– 정적인 데이터 추가할 때 사용.
→ 페이지를 컴파일 하기 전에 추가하는 소스코드를 포함(include)해서 컴파일 함.

▸ <jsp:include page=" "/> (JSP 액션태그)

– 동적인 페이지 추가할 때 사용.
– jsp페이지에서 자바코드 사용없이 HTML형태로 실행 가능하게 만든 태그
→ 페이지를 컴파일 한 후에 페이지를 추가해서 사용

▶ 템플릿 페이지 작성

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

– 대부분의 웹사이트 화면 구성은 좌측과 상단 메뉴는 고정되어 있고, 메뉴에 따라 메인 페이지가 변경됨.

– 템플릿을 사용하면 이렇게 반복되는 페이지의 사이트를 만들 때 매우 효율적임.

레이아웃을 구성하고 각 영역의 내용은 다른 페이지에서 가져오므로,

전체 페이지 구성 수정 시에도 이 템플릿 페이지만 변환시키면 되므로 매우 편리함.

– 크게 위(TOP), 아래(BOTTOM), 왼쪽(LEFT), 가운데(CENTER)의 네 부분으로 나누어져 있음.

TOP, BOTTOM, LEFT페이지의 경우는 메뉴로 사용되고 있으므로, 매번 변경되는 페이지는 CENTER 페이지.

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

– 템플릿 페이지의 설계에서 중요한 것은 '레이아웃 구조'를 결정하는 것.

– 레이아웃 구조를 결정한 뒤에, 각 레이아웃에 넣을 페이지들을 작성하면 됨.

EX )

• 가장 전형적인 웹 페이지 구조인 TOP, BOTTLE, LEFT, CENTER로 나누어 설계하고,

'신상품', '인기상품' 메뉴만 페이지화시켜 보겠음.

→ 템플릿 페이지를 사용하는 이유와 특성을 익히기 위함이 목적이므로 비교적 간단하게 작성함.

• 화면을 구성하는 각 페이지들은 다음 표와 같이 구성함.

파일 이름	설명
top.jsp	화면 상단에 표시될 메뉴 파일 이름.
bottom.jsp	화면 하단에 표시될 파일 이름.
left.jsp	화면 좌측에 표시될 메뉴 파일 이름.
newitem.jsp	신상품 페이지 파일 이름.
bestitem.jsp	인기상품 페이지 파일 이름.
color.jsp	컬러를 모아놓은 파일.
main.jsp	템플릿 페이지(레이아웃) 파일 이름이며 가장 중요한 파일. TOP, BOTTOM, LEFT, CENTER의 레이아웃 구조를 담고 있을 파일이며, 메뉴에 따라 이동되는 페이지 또한 표시해줄 페이지임.

— top.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>

	<a href="login.jsp">Login</a>
	<a href="join.jsp">Join</a>

</body>
</html>

— bottom.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>

	<center>Since 2008</center>
	
</body>
</html>

— left.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>

	<center>
	<a href="./template.jsp?page=newitem">신상품</a><br><br>
	<a href="./template.jsp?page=bestitem">인기상품</a>
	</center>

</body>
</html>

— newitem.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>

	<b>신상품 목록입니다.</b>

</body>
</html>

— bestitem.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>

	<b>인기상품 목록입니다.</b>

</body>
</html>

— color.jsp 페이지 작성

<%
	String col1 = "yellow";
	String col2 = "red";
	String col3 = "green";
	String col4 = "orange";
	String col5 = "blue";
%>

— main.jsp 작성하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ include file="color.jspf" %>



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

→ 컬러를 모아놓은 color.jspf파일을 include함. 이제 자동완성으로 body의 bgcolor 컬러 지정 가능.

.jspf는 jsp파일 덩어리? 느낌으로 생각하면 됨.

→ 이어서 body부분 작성함.

<body bgcolor=<%=col4 %>>
	<h1>main.jsp</h1>


	<table border="1" width="600" height="600">
	<tr>
		<td colspan="2" height="100"> 
			<h3>top - header : 로고이미지,메뉴,검색창 등</h3>
			<jsp:include page="top.jsp"></jsp:include> 		<!-- JSP : 은 액션태그 -->
		</td>
	</tr>
	<tr>
		<td width="150">
			<h3>Left - sub Menu : 보조메뉴, 검색 결과 참고</h3>
			<jsp:include page="left.jsp"></jsp:include>
		</td>
		<td>
			<h3>Main : 본문</h3>
		</td>
	</tr>
	<tr>
		<td colspan="2" height="100"> 
			<h3>Bottom - footer : 회사정보 등</h3> 
			<jsp:include page="bottom.jsp"></jsp:include>
		</td>
	</tr>
	</table>

	
</body>
</html>

→ body태그에 bgcolor 속성으로 color.jspf파일에 있던 컬러를 사용할 수 있음.

변수에 저장했으므로 변수명을 적어 출력해야함. 따라서 표현식을 사용하여 원하는 색깔의 변수명 적어주기.

→ 테이블 코드를 작성하여, 알맞은 위치에 액션태그(jsp:)로 해당하는 페이지를 넣어줌.

✓ 실행 결과

🐾 참조 도서 및 사이트 🐾

— JSP 2.3 & Servlet 3.1

저작자표시 비영리 변경금지

'JSP' 카테고리의 다른 글

예외 처리 (에러 페이지) (0)	2023.02.25
세션(Session)과 쿠키(Cookie) (0)	2023.02.23
내장 객체 (영역 객체(Scope) / 속성(Attribute)) (0)	2023.02.23
내장 객체 (form 태그 사용으로 입력 & 출력하기) (0)	2023.02.23
내장 객체 (javax.servlet 패키지 / java.lang 패키지) (0)	2023.02.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				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

글 보관함

TAErogramming_____태로그래밍 *

티스토리 뷰