JSP, Servlet, MySQL/JSP - webmarket

디렉티브 태그 : 한글 출력 및 페이지 모듈화 하기 2

샤리미 2023. 9. 3. 05:52
728x90
반응형

chapter3-2

03. include 디렉티브 태그의 기능과 사용법

include 디렉티브 태그는 이름에서 알수 있듯이 현재 jsp 페이지의 특정 영역에 외부 파일의 내용을 포함하는 태그로 형식은 다음과 같다. 현재 jsp 페이제 포함할수있는 외부파일은, html, jsp , 텍스트 파일 등이다. include 디렉티브 태그는 jsp 페이지 어디에서든 선언 할 수 있다.

<%@ include file="파일명" %>

여기서 file 속성 값은 현재 jsp 페이지에 포함할 내용을 가진 외부 파일명이다. 이떄 외부파일이 현재 jsp 페이지와 같은 디렉터리에 있으면 파일명만 설정하고, 그렇지 않으면 전체 URL(또는 상대 경로)를 설정해야 한다.

include 디렉티브 태그는 서블릿 프로그램으로 번역될 때 현재 jsp 페이지와 설정된 다른 외부 파일의 내용이 병합되어 번역된다. 즉 현재 jsp 페이지에서 include 디렉티브 태그가 사용된 위치에 설정된 파일의 원본 내용을 ‘있는 그대로’ 붙여 넣은 다음 전체 페이지를 자바코드(서블릿)으로 변환한다.

 

💡 include 디렉티브 태그를 사용하는 이유

 

include 디렉티브 태그를 사용하는 대신 현재 jso 페이지에 외부 파일의 내용을 추가하는 방법은 없을까? 외부파일의 내용을 복사하여 현재 jsp 페이지에 붙여넣을 수 있지만 이는 좋은 방법이 아니다. 예를 들어 머리글과 바닥글에 해당하는 외부파일 2개와 100개의 jsp 페이지가 있는 경우를 생각해 보자. 만약 jsp 페이지 100개에 외부파일 2개의 내용을 복사하여 붙여넣었을 때 이 외부파일의 내용을 변경해야 한다면 jsp 페이지 100개를 모두 수정 편집 해야 한다. 하지만 include 디렉티브 태그를 사용하면 모든 외부 파일을 포함하므로 외부파일의 내용을 변경할 때 마다 특정 외부 파일만 수정 편집 하면 된다.

이처럼 include 디렉티브 태그를 사용하면 코드 재사용의 기능성을 향상할 수 있다. 즉 웹 애플리케이션의 모든 jsp 페이지에 공통된 특정 코드나 데이터를 하나의 별도 외부 파일로 만들면 이 외부 파일을 모든 jsp 페이지에 포함할 수 있기 때문이다.

include 디렉티브 태그는 머리글과 바닥글 같은 공통된 부분을 별도의 jsp 파일로 만들어 웹페이지를 모듈화 할 수 있다. 그래서 코드를 재사용하고 중복된 코드를 줄임으로써 유지보수 측면에서 매우 유용하다.

다음은 include 디렉티브 태그를 사용하여 현재 jsp 페이지의 머리글과 바닥글에 해당하는 header.jsp 와 footer.jsp 파일을 포함하는 ㅇㅖ이다. 이 두 외부파일은 현재 jsp 페이지와 같은 디렉터리에 있다. 만약 두 외부파일과 현재 jsp 페이지가 다른 디렉터리에 있다면 전체경로를 지정해야 한다.

[include 디렉티브 태그 사용 예]

<html>
<body>
<%@ include file="header.jsp" %> //header.jsp 파일의 내용을 이 jsp 페이지에 포함한다는 것을 의미
Today is : <%=java.util.Calendar.getInstance().getTime() %>
<%@ include file="footer.jsp" %> //footer.jsp 파일의 내용을 이 jsp페이지에 포함한다는 것을 의미
</body>
</html>

include 디렉티브 태그로 외부파일의 내용포함하기

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	<%@ include file="include01_header.jsp" %>
	<h4>_________현재 페이지 영역 ____________</h4>	
</body>
</html>

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	<h4>헤더 페이지 영역입니다. </h4>
</body>
</html>

출력결과:
헤더 페이지 영역입니다.
_________현재 페이지 영역 ____________

include 디렉티브 태그로 머리글과 바닥글에 외부 파일 내용 포함하기

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Directives Tag</title>
</head>
<body>
	<%@ include file="include02_header.jsp" %>
	<p>방문해 주셔서 감사합니다. </p>
	<%@ include file="include02_footer.jsp" %>
</body>
</html>

header

<%@ page contentType="text/html; charset=utf-8" %>
<%!
	int pageCount = 0;
	void addCount(){
		pageCount++;
	}
%>
<%
	addCount();
%>
<p>이 사이트 방문은 <%=pageCount%>번째 입니다. </p>

footer

Copyright (c) JSPBook

출력결과:
이 사이트 방문은 2번째 입니다.

방분해 주셔서 감사합니다.

Copyright (c) JSPBook

04. taglib 디렉티브 태그의 기능과 사용법

taglib 디렉티브 태그는 현재 jsp 페이지에표현 언어, JSTL, 사용자 정의 태그(custom tag)등 태그 라이브러리를 설정하는 태그이다.

<%@ taglib uri="경로" prefix="태그 식별자" %>

여기서 uri속성은 사용자가 정의한 태그의 설정 정보를 가진 경로 주소이고, prefix 속성은 uri에 설정한, 사용자가 정의한 태그를 식별하기 위한 고유 이름이다. 해당, jsp 페이지 내에서 uri 속성 값을 그대로 사용하면 복잡하므로 prefix 속성 값이 대신 식별 할 수 있게 해주는 것이다.

taglib 디렉티브 태그가 서블릿 프로그램으로 번역될 때 uri 속성 값은 jsp 컨테이너에 사용자가 정의한 태그 라이브러리의 위치를 알려준다. prefix 속성 값은 사용자가 정의한 태그 라이브러리의 접두어 태그가 무엇인지 jsp 컨테이너에 알려주는 역할을 한다.

다음은 taglib 디렉티브 태그에 태그 라이브러리로 JSTL을 설정하는 예이다. 여기서 uri 속성값은 JSTL의 Core 태그 라이브러리의 위치를 나타내고, ptrfix 속성 값은 JSTL의 Core 태그를 식별하기 위한 접두어로 c를 사용한다.

[taglib 디렉티브 태그 사용 예]

<%@ page contentType="text/html; charset=utf=8" %>
<%@ taglib uri="<http://java.sun.com/jsp/jstl/core>" prefix="c" %> //JSTL Core 태그 라이브러리

 

💡 JSTL 태그

 

일반적으로 웹 애플리케이션에서 쉽게 접할 수 있는 것은 JSTL 태그 라이브러리입니다. 유용한 JSP 태그의 모음인 JSTL 은 자주 사용되는 핵심 기능을 제공합니다. 반복문, 조건문과 같은 논리적 구조 작업, XML 문서 조작, 국제화 태그 조작, SQL 조작 수행을 위한 태그 등을 지원한다.

JSTL 을 사용하려면 WebContent/WEB-INF/lib/디렉터리의 위치에 jstl.jar 라이브러리 파일이 있어야 한다. 이 파일은 Apache Standard Taglib 페이지 에서 다운로드 할 수 있다.

include 디렉티브 태그에 JSTL의 Core 태그를 설정하여 1부터 10까지출력하기

/WEB-INF/lib/폴더에 JSTL태그 라이브러리인 JSTL-1.2.jar파일을 추가한다.(압축 풀지말고 바로넣는다.)

<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>


	
		
	



출력결과:
1 2 3 4 5 6 7 8 9 10

05. 한글 출력 및 페이지 모듈화하기

한글 및 현재 접속 시각 출력하기

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.util.Date" %>
<html>
	<head>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
	 rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
		<title>Welcome</title>
	</head>
	<body>
		<nav class="navbar navbar-expand navbar-dark bg-info">
		  <div class="container">
		  	<div class="navbar-header">
		    	<a class="navbar-brand" href="./welcome.jsp">Home</a>
		    </div>
		  </div>
		</nav>
		<%! String greeting = "웹 쇼핑몰에 오신 것을 환영합니다.";
		String tagline = "Welcome to Web Market!";%>
		
		<div class = "jumbotron">
			<div class= "container">
				<h1 class = "display-3">
					<%= greeting %>
				</h1>
			</div>
		</div>
		<div class = "container">
			<div class = "text-center">
				<h3>
					<%= tagline %>
				</h3>
				<%
					Date day = new java.util.Date(); //현재날짜와시각을얻기위해 Date 클래스의 인스턴스 day를 생성.
					String am_pm;
					int hour = day.getHours();
					int minute = day.getMinutes();
					int second = day.getSeconds();
					if(hour /12 ==0){
						am_pm = "AM";
					}else{
						am_pm = "PM";
						hour = hour -12;
					}
					String CT = hour +":" +minute + ":" + second + " " + am_pm;
					out.println("현재 접속 시각:" + CT +"\n");
				%>
			</div>
		</div>
		
		<footer class = "container">
			<p>&copy; WebMarket</p>
		</footer>
		
	
	
	</body>
</html>
<%@ page import="java.util.Date" %>

java.util.Date 패키지를 사용하기 위해 page 디렉티브 태그의 import 속성을 작성.

	<h3>
					<%= tagline %>
				</h3>
				<%
					Date day = new java.util.Date(); //현재날짜와시각을얻기위해 Date 클래스의 인스턴스 day를 생성.
					String am_pm;
					int hour = day.getHours();
					int minute = day.getMinutes();
					int second = day.getSeconds();
					if(hour /12 ==0){
						am_pm = "AM";
					}else{
						am_pm = "PM";
						hour = hour -12;
					}
					String CT = hour +":" +minute + ":" + second + " " + am_pm;
					out.println("현재 접속 시각:" + CT +"\n");
				%>

현재 시각을 출력하도록 스크립틀릿 태그를 작성.

현재 시각이 12이하면 ‘AM’을 출력 12를 초과하면’PM’을 출력.

 

 

웹 페이지 모듈화 하기

/Webapp/폴더 안에 menu.jsp 파일 생성

<nav class="navbar navbar-expand navbar-dark bg-info">
		  <div class="container">
		  	<div class="navbar-header">
		    	<a class="navbar-brand" href="./welcome.jsp">Home</a>
		    </div>
		  </div>
		</nav>

/Webapp/폴더 안에 footer.jsp 파일 생성

<footer class = "container">
			<p>&copy; WebMarket</p>
		</footer>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.util.Date" %>
<html>
	<head>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
	 rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
		<title>Welcome</title>
	</head>
	<body>
		<%@ include file="menu.jsp" %>
		<%! String greeting = "웹 쇼핑몰에 오신 것을 환영합니다.";
		String tagline = "Welcome to Web Market!";%>
		
		<div class = "jumbotron">
			<div class= "container">
				<h1 class = "display-3">
					<%= greeting %>
				</h1>
			</div>
		</div>
		<div class = "container">
			<div class = "text-center">
				<h3>
					<%= tagline %>
				</h3>
				<%
					Date day = new java.util.Date();
					String am_pm;
					int hour = day.getHours();
					int minute = day.getMinutes();
					int second = day.getSeconds();
					if(hour /12 ==0){
						am_pm = "AM";
					}else{
						am_pm = "PM";
						hour = hour -12;
					}
					String CT = hour +":" +minute + ":" + second + " " + am_pm;
					out.println("현재 접속 시각:" + CT +"\n");
				%>
			</div>
		</div>
		<%@ include file="footer.jsp" %>
	
	</body>
</html>

728x90
반응형