웹개발 수업/Server

[Day +78 / Server]JSTL(2. fmt , 3. fn)

Chole Woo 2021. 10. 14. 20:12
211014 목

 

1. index

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL/JSTL</title>
</head>
<body>
	<h1>EL(Expression Language)</h1>
	<p>
		Expression Language(표현 언어)라고 하며
		&lt;%= value &gt;, out.print(value)와 같이 JSP화면에 표현하고자 하는
		코드를 /${ value }의 형식으로 표현하여 작성하는 것
		
		EL, JSTL 학습 이유 : 
		서블릿에서는 비즈니스 로직 수행, 
		JSP에서는 클라이언트에게 응답할 때 응답에 대한 프레젠테이션 로직 사용. 
		즉, 둘다 형식적으로 자바에서 사용한다. 

		EL, JSTL을 사용해서 JSP화면을 간단하게 구현할 수 있음
	</p>
	
	
	<ul>
		<li><a href="elTest">01_EL이란?</a></li>
		<!-- ip:port/eljstl/elTest와 같음 --> 
		
		<li><a href ="views/01_EL/02_elParam.jsp">02_EL-param</a></li>
		<li><a href = "views/01_EL/03_elOperation.jsp">03_EL_operation</a></li>
	</ul>
	
	
	
	<h1>JSP Action Tag</h1>
	<p>
		JSP Action Tag는 XML 기술을 이용하여 기존의 JSP 문법을 확장하는 매커니즘을 제공하는 태그로,
		웹 브라우저에서 실행되는 것이 아니라, 웹 컨테이너에서 실행되고 결과만 브라우저로 보냄
	</p>
	
	
	<h3>1. 표준 액션(Standard Action)</h3>
	<p>
		JSP 페이지에서 바로 사용 가능하고 태그 앞에 jsp: 접두어가 붙음
	</p>
	
	<ul>
		<li><a href = "views/02_standardAction/01_include.jsp">01_inculde</a></li>
		<li><a href = "views/02_standardAction/02_forward.jsp">02_forward</a></li>
	</ul>
	
	
	<h2>2. 커스텀 액션(Custom Action)</h2>
	<p>
		별도의 라이브러리를 설치해야만 사용 가능하며 대표적으로 JSTL을 사용
		커스텀 액션은 모든 태그의 이름 앞에 jsp: 외의 접두어가 붙음
	</p>
	
	<a href="views/03_jstl/jstl.jsp">JSTL</a>
	
	
</body>
</html>

*index.jsp의 역할

: jstl.jsp 화면과 연결해줌

 

 

 

2. jstl.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSTL</title>
</head>
<body>

	<h1>JSTL(JSP Standard Tag Library)</h1>
	
	<p>
		JSP에서 사용하는 커스텀 태그로, 공통으로 사용하는 코드의 집합을 사용하기 쉽게 태그화하여 
		표준으로 제공하는 것을 말함. 라이브러리를 별도로 추가해서 사용해야 함.
	</p>
	
	<h3>JSTL 선언 방법</h3>
	<p>
		JSTL을 사용하고자 하고는 JSP 페이지 상단 page 지시자 아래에 taglib 지시자를 사용하여 선언<br>
		&lt;%@ taglib prefix="사용하고자 하는 접두사" uri="tld 파일 상의 url" %&gt; <br><br>
		
		1) prefix : 접두사. 다른 태그와 구별될 수 있는 name space를 제공함<br>
		2) uri : 실제 웹 상의 주소가 아닌, 태그 라이브러리를 나타내는 식별자<br>
		3) tld : 파일 상의 uri 값을 가리키며, 이 지시자를 통해 작성한 태그 이름과 매칭되는 자바 코드를 찾음<br>
		*tld(tag library descriptor) 파일 : 커스텀 태그 정보를 갖고 있는 라이브러리 파일
	</p>
	
	
	<h4>1. JSTL core Library</h4>
	변수와 url, 조건문, 반복문 등의 로직과 관련된 JSTL 문법을 제공<br>
	<a href="01_core.jsp">core</a>
	
	
	<h4>2. JSTL Formatting Library</h4>
	날짜, 시간, 숫자 데이터의 출력 형식을 지정할 때 사용하는 태그<br>
	<a href="02_fmt.jsp">formatting</a>
	
	
	<h4>3. JSTL Function Library</h4>
	문자열 처리에 관한 메소드들을 EL 형식에서 사용할 수 있도록 제공<br>
	<a href="03_fn.jsp">function</a>
</body>
</html>

*jstl.jsp 화면의 역할

1) 01_core.jsp

2) 02_fmt.jsp

3) 03_fn.jsp

화면으로 연결

3. 01_core.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.ArrayList, com.kh.model.vo.Person"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSRL core Library</title>
</head>
<body>

	<h1>Test Core page</h1>

	<h3>1. 변수</h3>
	<pre>
	*변수 선언(c:set)
	-변수를 선언하고 초기 값을 대입하는 기능을 가진 태그
	-변수 선언시 scope 지정할 수 있으며 생략했을 경우 기본 scope는 pageScope
	-사용 방법
		1) 변수 타입은 별도로 선언하지 않는다
		2) 초기 값은 반드시 지정해야 한다
		3) c:set 태그로 선언한 변수는 EL 안에서 사용 가능하지만 스크립틀릿 요소에서는 사용 불가
	</pre>
	
	<c:set var="num1" value="10"/>
	<c:set var="num2" value="20" scope="request"/>
	<c:set var="result" value="${ num1 + num2 }" scope="session"/>
	
	num1 변수 값 ; ${ num1 } <br>
	num2 변수 값 : ${ num2 } <br>
	
	${ num1 } + ${ num2 } = ${ result } <br>
	<!-- 출력확인만 er로 한것 -->
	
	\${ pageScope.num1 } : ${ pageScope.num1 } <br>
	\${ requestScope.num2 } : ${ requestScope.num2 } <br>
	\${ sessionScope.result } : ${ sessionScope.result } <br>
	\${ requestScope.result } : ${ requestScope.result } <br><br>
	<!-- 10, 20, 30, 값 없음 
	 why? 값 없는 이유 : requestScope는 존재하지 않으므로 공백-->
	
	
	<h4>array</h4>
	<c:set var="arr" scope="request">
		red, blue, yellow, pink, green
	</c:set>
	<!-- 열고닫는 태그 가운에 넣는 것이 value라는 값임. 중간에 써주는 방식도 있음 -->
	
	arr 배열 값 : ${ arr } <br><br>
	
	<hr>
	
	<pre>
	*변수 삭제(c:remove)
	지정한 변수를 모든 scope에서 검색해서 삭제함
	또는 지정한 scope만 삭제하는 것도 가능
	</pre>
	
	<c:set var="result" value="9999" scope="request" />
	
	삭제 전 \${ result } : ${ result } <br>
	
	1) 특정 scope에서 삭제
	<c:remove var="result" scope="request"/><br>
	삭제 후 \${ result } : ${ result } <br>
	
	2) 모든 scope에서 삭제<br>
	<c:remove var="result" />
	삭제 후 \${ result } : ${ result } <br>
	
	<hr>
	
	<pre>
	*변수 출력(c:out)
	데이터를 출력할 때 사용하는 태그
	&lt;, &gt;, & 특수문자를 자동으로 이스케이프 시퀀스로 변환 가능
	</pre>
	
	<h4>c:out 테스트입니다</h4>
	그대로 출력 : <c:out value="<b>태그로 출력하기</b>" escapeXml="true" /> <br>
	<!-- 그냥 텍스트로 해석 escape true라서-->
	
	태그로 해석되어 출력 : <c:out value="<b>태그로 출력하기</b>" escapeXml="false"/> <br>
	<!--  태그로 출력 false라서 -->
	
	기본값 출력 : <c:out value="${ requestScope.result }" default="없음"/> <br>
	<!-- value값이 없으면 default 출력되도록 -->
	
	<hr>
	
	<h3>2. 조건문 - (c:if test="조건식")</h3>
	<pre>
		-java의 if문과 비슷한 역할을 하는 태그
		-조건식은 test라는 속성의 값으로 지정해야 하며 반드시 EL형식으로 기술해야 함
	</pre>
	
	<c:if test="${num1 > num2 }">
		num1이 num2보다 큽니다.
	</c:if>
	
	
	<c:if test="${num1 < num2 }">
		num1이 num2보다 작습니다.
	</c:if>
	<!-- 이 문장만 true이므로 화면에 출력된다 -->
	
	<hr>
	
	<h3>3. 조건문(c:choose, c:when, c:otherwise)</h3>
	<pre>
		-java의 if - else if - else문과 비슷한 역할을 하는 태그
		-각 조건들은 c:choose문의 하위 요소로 c:when을 통해 작성(else 값으로는 c:otherwise)
	</pre>
	
	<c:set var="no" value="5" />
	<c:choose>
		<c:when test="${no eq 0}">
			처음뵙겠습니다
		</c:when>
		<c:when test="${no eq 1}">
			다시 뵙게되어 반갑습니다.
		</c:when>
		
		<c:otherwise>
			안녕하세요.
		</c:otherwise>
	</c:choose>
	
	
	<hr>

*반복문부터 수업했음

<h3>4. 반복문 - forEach (c:forEach var =" begin="" end="" step="" items="" varStatus="")</h3>
	<pre>
	
		&lt;c:ForEach&gt; 반복시 실행할 내용 &tl;/c:forEach&gt;
		-Java의 for문에 해당하는 기능 제공
		-forEach문에서는 여러가지 속성이 사용됨(But, 한꺼번에 다 써야 하는 것은 아님)
		
		var : 현재 반복 횟수에 해당하는 변수의 이름
		begin : 반복이 시작할 요소 번호
		end : 반복이 끝나는 요소 번호
		step : 반복 시 증가할 수
		items : 반복할 객체명
		varStatus : 현재 반복에 해당하는 객체의 요소 정보
	</pre>
	
	<h4>기본 사용법</h4>
	<c:forEach var="i" begin="1" end="10">
		반복 확인  : ${ i } <br>
	</c:forEach>
	
<!-- 	답
		반복 확인 : 1
		반복 확인 : 2
		반복 확인 : 3
		반복 확인 : 4
		반복 확인 : 5
		반복 확인 : 6
		반복 확인 : 7
		반복 확인 : 8
		반복 확인 : 9
		반복 확인 : 10 -->
		
		<br>
		
		<c:forEach var="i" begin="1" end="6">
			<h${i}>h${i}<h${i}>
			
		</c:forEach>
		
<!-- 	답 : 글자 점점 작아짐, 태그에서도 사용가능
		h1
		h2
		h3
		h4
		h5
		h6 -->
		
		<br>
		
		<c:forEach var="i" begin="1" end="10" step="3">
			반복 확인 : ${ i }
		</c:forEach>
		
		<!-- 답 
		반복 확인 : 1 반복 확인 : 4 반복 확인 : 7 반복 확인 : 10 -->
		
		<br>
		
		<c:forEach var="color" items="${arr}">
			<font color="${color}">배열 확인 : ${color }</font>
		</c:forEach>
		
		<!-- 답
		배열 확인 : red 배열 확인 : blue 배열 확인 : yellow 배열 확인 : pink 배열 확인 : green -->
	
		<br>
		
		<%
			ArrayList<Person> list = new ArrayList<>();
			list.add(new Person("홍길동", 30, '남'));	
			list.add(new Person("금성무", 25, '남'));	
			list.add(new Person("구웅", 31, '남'));	
			pageContext.setAttribute("list", list);
		%>
		
		
		<table border="1">
			<tr>
				<th>번호</th>
				<th>순번</th>
				<th>이름</th>
				<th>나이</th>
				<th>성별</th>
			</tr>
			
			<c:forEach var="p" items="${list}" varStatus="status">
			<!-- var = 변수, items="불러올 배열" varStatus="속성" -->
			<tr>
				<td>${status.index}</td>
				<td>${status.count}</td>
				<td>${p.name}</td>
				<td>${p.age}</td>
				<td>${p.gender}</td>
			</tr>
			</c:forEach>
		</table>
		
		<hr>
		
		<h3>5. forTokens</h3>
		<pre>
		-문자열에 포함된 구분자를 통해 토큰을 분리해서 반복 처리
		-Java의 String.split() 또는 StringTokenizer와 비슷한 기능
		-item 속성에는 토큰을 포함하는 문자열을 지정하고, delims 속성에는 토큰을 분리하는데 사용할 구획 문자를 기술
		</pre>
		
		<c:set var="device">
			컴퓨터, 핸드폰.TV/에어컨, 냉장고.세탁기
		</c:set>
		
		<ul>
			<c:forTokens var="d" items="${device}" delims=",./">
			<li>${ d }</li>
			</c:forTokens>
		</ul>
		
<!-- 	답
		컴퓨터
		핸드폰
		TV
		에어컨
		냉장고
		세탁기 -->
		
		<ul>
			<c:forTokens var="color" items="yellow pink aqua green red silver olive lime" delims=" ">
				<li style="background:${color}">${ color }</li>
			</c:forTokens>
		</ul>
		
		
		<hr>
		
		
		<h3>6. url</h3>
		<pre>
		&lt;c:url&gt;
			&lt;param name="" value="" /&gt;
		&lt;/c:url&gt;
		
		-url 경로는 생성하고, 해당 url의 param 속성을 선언하여 쿼리스트링을 정의할 수 있는 태그
		-해당 태그를 통해 url의 경로와 관련된 쿼리스트링 값을 미리 설정하여 이를 제어할 수 있음
		
		*쿼리 스트링
		: ip:port/context path/memberJoin?name=value&name=value&....
		이런식으로 속성들을 넘길 수 있는데 이것을 쿼리 스트링이라고 한다
		</pre> 
		
		<c:url var="url" value="testPage.jsp">
			<c:param name="pName" value="LG그램"/>
			<c:param name="pCount" value="30"/>
			<c:param name="option" value="ssd256G"/>
			<c:param name="option" value="ram16G"/>
		</c:url>
		
		<a href="${ url }">클릭하세요</a>
		
		<!-- 클릭하면 페이지로 이동되는데 url에 쿼리스트링이 만들어진다 -->
		
</body>
</html>

 

 

4. 03_fn.jsp

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

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Formatting Library</title>
</head>
<body>
	<h1>Test Form Library</h1>
	<h3>1. formatNumber</h3>
	<pre>
	숫자의 데이터 포맷 지정
	-표현하고자 하는 숫자의 형식을 통화 기호, % 등 원하는 쓰임에 맞게 지정하는 태그
	</pre>
	
	<h4>groupingUsed : 숫자 단위의 구분자 표시 여부 지정</h4>
	숫자 그대로 출력 : <fmt:formatNumber value="123456789" groupingUsed="false"/><br>
	세자리마다 구분하여 출력 : <fmt:formatNumber value="123456789" groupingUsed="true"/><br>
	
	<h4>pattern : 화면에 표시할 데이터 스타일 지정. 소수점 아래 자릿수 지정. #, 0 기호 이용. 초과 값 반올림 처리.</h4>
	#을 이용하여 지정 : <fmt:formatNumber value="1.23" pattern="#.###"/><br>
	<!-- 1.23 -->
	0을 이용하여 지정 : <fmt:formatNumber value="1.23" pattern="0.000"/><br>
	<!-- 1.230 -->
	
	
	<h4>maxIntegerDigits, minIntegerDigits : 표시하고자 하는 수의 단위 표현</h4>
	maxIntegerDigits : <fmt:formatNumber value="12345.678" maxIntegerDigits="4"/><br>
	<!-- 답 : 2,345.678
	1이 잘리고 최대로 표현할 수 있는 수 2345만 남음  -->
	minIntegerDigits : <fmt:formatNumber value="12.34" minIntegerDigits="4"/><br>
	<!-- 답  : 0,012.34 -->
	
	<h4>maxFractionDigits, minFractionDigits : 표시하고자 하는 소수 자리의 단위 표현</h4>
	maxFractionDigits : <fmt:formatNumber value="12300.126"
						pattern="000.00" maxFractionDigits="2"/><br>
	minFractionDigits : <fmt:formatNumber value="12300.1"
						pattern="###.###" minFractionDigits="3"/><br>
						
<!-- 	답
		maxFractionDigits : 12300.13(반올림 됨)
		minFractionDigits : 12300.100 -->
		
	   <h4>type: number(일반 숫자), percent(백분율), currency(통화)</h4>
   percent : <fmt:formatNumber value="0.75" type="percent"/><br>
   currency : <fmt:formatNumber value="50000" type="currency"/><br>
   currencySymbol : <fmt:formatNumber value="50000" type="currency" currencySymbol="$"/>
	
	
	<hr>
	
	<h3>2. formatDate</h3>
	<pre>
	날짜와 시간에 데이터 포맷 형식 지정
	value 속성에는 java.util.Date 객체를 사용
	</pre>
	
	<fmt:formatDate value="<%= new java.util.Date() %>"/>
	<!-- 답 : 2021. 10. 14 
	아무것도 적용하지 않았을 경우-->
	
	<c:set var="current" value="<%= new java.util.Date() %>"/>
	
	<ul>
		<li>오늘 날짜 : <fmt:formatDate value="${ current }" type="date"/></li>
		<li>현재 시간 : <fmt:formatDate value="${ current }" type="time"/></li>
		<li>둘 다 : <fmt:formatDate value="${ current }" type="both"/></li>
		<li>[full] : <fmt:formatDate value="${ current }" type="both"
		dateStyle="full" timeStyle="full"/></li>
		<li>[long] : <fmt:formatDate value="${ current }" type="both"
		dateStyle="long" timeStyle="long"/></li>
		<li>[medium] : <fmt:formatDate value="${ current }" type="both"
		dateStyle="medium" timeStyle="medium"/></li>
		<li>[short] : <fmt:formatDate value="${ current }" type="both"
		dateStyle="short" timeStyle="short"/></li>
		
		<li>내 맘대로 할거야 패턴 : <fmt:formatDate value="${current }" type="both"
		pattern="yyyy-MM-dd(E) HH:mm:ss(a)"/></li>
	</ul>
	
		<!-- 	답
		오늘 날짜 : 2021. 10. 14
		현재 시간 : 오후 5:01:23
		둘 다 : 2021. 10. 14 오후 5:01:23 
		[full] : 2021년 10월 14일 목요일 오후 5시 03분 27초 KST
		[long] : 2021년 10월 14일 (목) 오후 5시 03분 27초
		[medium] : 2021. 10. 14 오후 5:03:27
		[short] : 21. 10. 14 오후 5:03
		*미디움이 기본임
		
		내 맘대로 할거야 패턴 : 2021-10-14(목) 17:05:50(오후)
		-->
		
		<hr>
		
		<h3>3. setLocale/timeZone</h3>
		<pre>
		지역 설정을 통해 통화 기호나 시간 대역을 다르게 설정 가능
		</pre>
		
		
		<h4>대한민국</h4>
		금액 : <fmt:formatNumber value="10000000" type="currency"/><br>
		일시 : <fmt:formatDate value="${current }" type="both" dateStyle="full" timeStyle="full"/>
		
	<!-- 	답
금액 : ₩10,000,000
일시 : 2021년 10월 14일 목요일 오후 5시 09분 11초 KST	 -->

		<h4>미국/뉴욕</h4>
  		<fmt:setLocale value="en_us" />
   		금액 : <fmt:formatNumber value="10000000" type="currency" /><br>
  		 <fmt:timeZone value="America/New_York">
   		일시 : <fmt:formatDate value="${ current }" type="both" dateStyle="full" timeStyle="full"/><br>
  		 </fmt:timeZone>
  		 
  		<h4>영국/런던</h4>
  		<fmt:setLocale value="en_us" />
   		금액 : <fmt:formatNumber value="10000000" type="currency" /><br>
  		 <fmt:timeZone value="Europe/London">
   		일시 : <fmt:formatDate value="${ current }" type="both" dateStyle="full" timeStyle="full"/><br>
  		 </fmt:timeZone>
  		 
  		 
</body>
</html>