JAVA개념&실습

WEB : [0602] EL / JSTL

u_SZero 2023. 6. 6. 22:31

! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !


WebApp22


■■■ EL(Expression Language) 과 JSTL(Jsp Standard Tag Library) ■■■

-- 기능 설명 및 사용방법

더보기

○ EL(Expression Language : 표현 언어)

    표현 언어는 JSTL 1.0 스펙에서 잠깐 소개되었다가
    JSP 2.0 부터 공식적으로 포함되었으며
    JSP 페이지에 사용되는 자바 코드를 대신해서
    액션 태그 엘리먼트의 속성에 값을 지정하는 역할을 수행한다.
    
    예를 들어,
    <someTag:aTag> 액션 태그 엘리먼트 속성은 attribute 이고
    속성값은 <% pageContent.getAttribute("aName")%> 인 경우
  
    <someTag:aTag attribute="<%=pageContent.getAttribute("aName")%>">
    의 방식으로 표현해야 하지만
    표현 언어에서는 다음과 같이 표현한다.
    <someTag:aTag attribute="${aName}">

    ==> - 표현 언어(EL)는 표현식(『<%= %>』)을 대신하는 효과를 갖는다.
        - null 을 가지는 변수(데이터)에 대해 좀 더 관대한 특징을 갖는다.
        - 데이터 형 변환을 자동적으로 처리해준다.
        - setAttribute() 로 넘김 데이터를 getAttribute() 로 받는 대신
          『${}』로 받는다.


○ JSTL(Jsp Standard Tag Library : JSP 표준 태그 라이브러리) 

    JSP 에서는 XML 처럼 사용자가 태그를 정의해서 사용하는 것이 가능하며
    이와 같은 사용자 정의 태그를 커스텀 태그라고 하는데
    이들 중 자주 사용하는 것을 표준으로 만들어 놓은 것이 JSTL 이다.
   
    JSP Standard Tag Library(JSTL)는 일반적인 웹 어플리케이션 기능인
    반복(iteration)과 조건, 데이터 관리, 포맷, XML 조작, 데이터베이스 액세스를
    구현하는 커스텀 태그 라이브러리 모음이다.

    JSP의 스크립트와 HTML 코드를 같이 혼용해서 사용하면
    개발의 편의성을 제공하긴 하지만 코드의 복잡성을 증대시키는 문제가 있다.
    이와 같은 문제를 해결하기 위해 로직 부분의 JSP 코드를 태그로 대치시켜
    HTML 과 같은 태그로 이루어진 코딩 방법이 제시되었다.

    JSTL 은 JSP 로직을 담당하는 부분인 if, for, while, DB 처리 등과 관련된
    표준 커스텀 태그를 제공함으로써
    코드를 간결하고 가독성이 좋도록 하며
    데이터 포맷, 반복 콘텐트 또는 조건 콘텐트와 같은
    전형적인 표현 레이어를 위한 표준 구현을 제공하기 때문에
    JSP 작성자들이 어플리케이션 개발에 집중하는데 도움이 된다.

    JSP(JSTL) 작성 시 주의할 사항은
    액션 태그도 그렇지만 JSTL 커스텀 태그도 XML 기반에서 작성되었기 때문에
                                                                       --------
                                                                        :꼬장꼬장, 빡빡, html은 허용해주지만 xml은 절대 X
    모든 태그는 시작 태그와 종료 태그의 쌍으로 이루어져야 한다는 것이다.
   
    기존의 컨텍스트에서 JSTL 을 사용하기 위해서는
    웹 어플리케이션의 WEB-INF/lib 디렉터리에
    필요한 라이브러리를 복사하여 붙여넣으면 된다. +a(다른 방법도 존재)
    JSTL 의 주된 라이브러리 파일은 jstl.jar, standard.jar 파일이고,
    jaxen-full.jar, sxpath.jar, jaxp-api.jar 파일 등이 필요하다.
    이 파일들을 적대하고 컨텍스트를 리로드한다.


    - JSTL 을 사용하기 위한 환경 설정

      1. 웹 브라우저 URL 요청 『http://jakarta.apache.org/
         → 『https://jakarta.apache.org/』 페이지로 이동
      2. 페이지 내 왼편 메뉴 목록들 중... 『Taglibs』 클릭
         → 『https://tomcat.apache.org/taglibs/』 페이지로 이동
      3. 페이지 내 왼편의 메뉴 목록들 중... 『Standard』 클릭
         → 『https://tomcat.apache.org/taglibs/standard/』 페이지로 이동
      4. 페이지 본문의 목록들 중... 『Standard 1.1』 항목의 『download』 클릭
         → 『http://archive.apache.org/dist/jakarta/taglibs/standard/』 페이지로 이동
      5. 페이지 본문의 목록들 중... 『binaries』 클릭
         → 『http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/』 페이지로 이동
      6. 페이지 본문의 목록들 중... 『jakarta-taglibs-standard-1.1.2.zip 2004-10-25 20:57 933k』클릭
         → 다운로드 대화창 호출(jakarta-taglibs-standard-1.1.2.zip)
      7. 해당 파일 다운로드 후 압축 해제

     압축 해제 이후...
     『C:\Downloads\13_JSTL\jakarta-taglibs-standard-1.1.2\lib』 디렉터리 안에 있는
     『jstl.jar』 파일과 『standard.jar』파일..
     이렇게 두 개의 jar 파일을
     현재 작업할(또는 작업 중인) 프로젝트의 
     『WebContent > WEB-INF > lib』 경로에 복사하여 붙여넣기 한다.

     다음으로...
     이클립스 환경 설정(이클립스 Window 메뉴 > preferences) 클릭
     → Web > JSP Files > Editor > Templates 클릭

     템플릿의 리스트 항목들 중... (체크박스는 건드리지 말고...)
     『New JSP File(html 5)』항목 선택 → Edit... 버튼 클릭

     다음으로 열리는 대화창에서(Edit Template)
     최초 디렉티브(page 디렉티브) 아래에 다음과 같은 내용 추가

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

     OK(대화창 닫힘) → Apply and Close(대화창 닫힘) → 환경설정 종료


- JSTL 사용
   
   JSTL 은 태생이 커스텀 태그이기 때문에 JSP 와 밀접한 관계가 있다.
   application, session, request, response, pageContext 등의
   내장 객체에 쉽게 접근하며, 그 외에도 파라미터, 쿠키, 헤더 등을
   복잡한 코드를 사용하지 않고 쉽게 직관적으로 사용할 수 있다.
   또한, 기본적인 연산이나 객체 비교 등을 『.equals()』메소드 등을
   사용하는 대신 『==』을 사용할 수 있도록 쉽게 구현하였으며,
   조건, 반복, 이동에 따른 태그를 지원하기 때문에
   태그만으로도 반복 기능을 구현할 수 있다.
 
   JSTL 의 처리 영역은 크게 4 가지로 나누어진다.
   core,                  format,  xml,         sql
   (기본핵심기능) (형식화) (xml처리) (sql처리)

※ 주요 분류 및 종류

   ○ Core
      - 기능 : 변수지원, 흐름제어, URL처리 등
      - 접두어(Prefix) : c
      - URI : http://java.sun.com/jsp/jstl/core

   ○ XML
      - 기능 : XML코어, 흐름제어, XML변환 등
      - 접두어(Prefix) : x
      - URI : http://java.sun.com/jsp/jstl/xml

   ○ 국제화(형식화)
      - 기능 : 지역, 메세지형식, 숫자및날짜형식 등
      - 접두어(Prefix) : fmt
      - URI : http://java.sun.com/jsp/jstl/fmt

   ○ 데이터베이스
      - 기능 : SQL지원
      - 접두어(Prefix) : sql
      - URI : http://java.sun.com/jsp/jstl/sql

   ○ Functions
      - 기능 : 컬렉션처리, String 처리 등
      - 접두어(Prefix) : fn
      - URI : http://java.sun.com/jsp/jstl/functions


※ 선택적 사용 시 JSTL 에 taglib 추가
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>
   <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
   <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
   <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

 

 


 

 

 

Test3.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<%
	request.setAttribute("result", "EL 테스트~!!!");	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test3.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
</head>
<body>

<div>
	<h1>EL 관련 실습</h1>
	<hr>
</div>

<div>
	<!-- action 속성 생략 : su1, su2 데이터를 전송하면서 요청하는 페이지는 자기 자신~!!! -->
	<form method="post">
		정수1 <input type="text" name="su1" class="txt"><br>
		정수2 <input type="text" name="su2" class="txt"><br>
		<button type="submit" class="btn">결과 확인</button>
	</form>
</div>
<br><br>

<div>
	<h2>폼 데이터 수신</h2>
	
	<!-- 폼의 데이터를 수신하는 방법 1 -->
	<h3><%=request.getParameter("su1")%></h3>
	
	<!-- 폼의 데이터를 수신하는 방법 2 --> <!-- ${su1} : request.setAttribut() 했을 경우 -->
	<h3>${param.su1 }</h3>
</div>

<div>
	<h2>폼의 데이터를 받아 연산 수행</h2>
	
	<!-- 폼의 데이터를 받아 연산 수행하는 방법 1 -->	
	<%
		String s1 = request.getParameter("su1");
		String s2 = request.getParameter("su2");
		
		int s = 0;
		
		if(s1 != null && s2 != null)
		{
			s = Integer.parseInt(s1) + Integer.parseInt(s2);
		}
	%>
	<h3>합 : <%=s %></h3>
	
	<!-- 폼의 데이터를 받아 연산 수행하는 방법 2 -->
	<h3>합 : ${param.su1 + param.su2}</h3>	
	<!-- → 파라미터 수신도 알아서... -->
	<!-- → 필요한 캐스팅도 알아서 자동으로 수행... -->
	<!-- → null 을 대하는 방식도 자연스럽게 수행... -->
	<!-- _초기 설정하지 않아도 null의 합이 아무것도 없다는 것으로 표현 됨
	 + 서블릿컨테이너가 값을 받지만 산술적인 연산을 수행하라고 인지해서 빈 값을 0으로 표현해주는 것 -->
	
	
</div>
<br><br>

<div>
	<h2>setAttribute() 로 넘긴 데이터 수신</h2>
	
	<!-- setAttribute() 로 넘긴 데이터를 수신하는 방법 1 -->
	<h3><%=(String)request.getAttribute("result") %></h3>		
	<!-- _자동으로 다운캐스팅을 해주긴 하지만 원칙적으로는 (String)으로 다운캐스팅해줘야 함 -->
	
	<!-- setAttribute() 로 넘긴 데이터를 수신하는 방법 2 -->
	<h3>${result }</h3>
	<!-- _setAttribute로 설정한 값은 param필요 없음. getParameter로 넘겨받은 앖은 param.으로 해줘야 함 -->

</div>


</body>
</html>

form의 action 속성 생략 : su1, su2 데이터를 전송하면서 요청하는 페이지는 자기 자신.

 

 

 

 

Test4.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test4.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
</head>
<body>

<div>
	<h1>JSTL 코어(Core) if문 실습</h1>
	<hr>
</div>

<div>
	<!-- form 태그의 action 속성 생략 → 전송하는 데이터의 수신처는 자기 자신 -->
	<form method="post">
		정수 <input type="text" name="su" class="txt"><br><br>
		<button type="submit" class="btn">결과 확인</button>
	</form>
</div>
<br><br>

<div>
	<%-- <h2>${param.su }</h2> --%>
		
	<%-- 『c:if test="" ~ /c:if』: JSTL Core if문 --%>
	<%-- 『test=""』 : 조건식을 지정. 파라미터로 수신한 su 에 값이 있으면... (if() == if test="") --%>
	<%-- 『param.su』 : EL 을 이용한 폼 전송 데이터를 수신하는 부분 --%>
	<c:if test="${!empty param.su }">  <%-- empty : 비어있다, EL의 일종의 연산자(값이있다:false / 값이없다:true) --%>
		<!-- <h2>있다</h2> !-->
                                  <%--
                                       if()
                                       {
                                           있다.
                                       } 
                                  --%>
								
		<!-- 파라미터로 수신한 su가 짝수라면... -->
		<c:if test="${param.su % 2 == 0}">
			<!-- → 20 : 짝수 -->
			<h2>${param.su } : 짝수</h2>
		</c:if>
		
		<!-- JSTL Core if 에는.. if는 있지만 else 는 없다. -->
		<!-- 파라미터로 수신한 su가 홀수라면... -->
		<c:if test="${param.su % 2!= 0 }">
			<!-- → 21 : 홀수 -->
			<h2>${param.su } : 홀수</h2>
		</c:if> 
		
	</c:if>
	
</div>

</body>
</html>

 

 

 

 

 

Test5.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test5.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
</head>
<body>

<div>
	<h1>JSTL 코어(Core) forEach문 실습</h1>
	<hr>
</div>

<div>
	<table class="table">
	
		<!-- JSTL 코어(Core) 반복문 -->
		<%-- 『c:forEach var="변수" begin="시작값" end="끝값" step="증가값" ~ /c:forEach』 --%>
		<c:forEach var="a" begin="1" end="9" step="1">		<!-- 1 2 3 4 5 6 7 8 9 -->
		<tr>
			<c:forEach var="b" begin="1" end="9" step="1">  <!-- 1 2 3 4 5 6 7 8 9 -->
			<td style="width: 20px;">
				${a*b }
			</td>
			</c:forEach>	
		</tr>
		</c:forEach>
		
	</table>
</div>

</body>
</html>

 

 


 

 

 

MyData.java

/*===============================
   MyData.java
   - 사용자 정의 데이터타입 활용
================================*/


package com.test;

public class MyData
{
	// 주요 속성 구성
	private String name;
	private int age;
	
	// default 생성자 형태의 사용자 정의 생성자
	public MyData()
	{
		
	}

	// 매개변수 2개인 사용자 정의 생성자
	public MyData(String name, int age)
	{
		//super();
		this.name = name;
		this.age = age;
	}

	public String getName()
	{
		return name;
	}
	public void setName(String name)
	{
		this.name = name;
	}
	public int getAge()
	{
		return age;
	}
	public void setAge(int age)
	{
		this.age = age;
	}
	
}

 

 

 

 

Test6.jsp

<%@page import="com.test.MyData"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<%
	//Test6.jsp
	//-- 사용자 정의 데이터타입을 취하는(요소로 갖는) 자료구조 생성
	
	List<MyData> lists = new ArrayList<MyData>();

	MyData ob = new MyData("홍길동", 15);
	lists.add(ob);
	
	ob = new MyData("고길동", 13);
	lists.add(ob);
	
	ob = new MyData("둘리", 8);
	lists.add(ob);
	
	ob = new MyData("희동이", 17);
	lists.add(ob);
	
	ob = new MyData("또치", 20);
	lists.add(ob);

	ob = new MyData("도우너", 85);
	lists.add(ob);
	
	request.setAttribute("lists", lists);
%>

<jsp:forward page = "Test6_result.jsp"></jsp:forward> <!-- 스크립릿에서 하려면 request.Distpatcher...해줘야 함 -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test6.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
</head>
<body>

</body>
</html>

 

 

 

 

 

Test6_result.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test6_result.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
</head>
<body>

<div>
	<h1>JSTL 코어(Core) forEach문을 이용한</h1>
	<h1>자료구조 활용 실습</h1>
	<hr>
</div> 

<div>
	<table class="table">
		<tr>
			<th>이름</th>
			<th>나이</th>
		</tr>
	
	
	<!-- 컬렉션 객체 접근용(처리용, 출력용) 반복문 구성 --> 
	<c:forEach var="dto" items="${lists }">	<!-- ① items="" ② var=""-->
	<tr>
		<td style="text-align: center;">${dto.name }</td>
		<td style="text-align: center;">${dto.age }</td>
	</tr>
	</c:forEach>
	
	</table>
</div>

</body>
</html>

 

 

 

 

 

Test7.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<% 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test7.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
</head>
<body>

<div>
	<h1>JSTL 코어(Core) set문 실습</h1>
	<h2>지수승 구하기</h2>
	<hr>
</div>

<div>
	<p>『c:set』은 JSP의 setAttribute() 와 같은 역할을 수행한다.</p>
	<p> (page | request | session | application)
		범위의 변수(속성)을 설정한다.</p>
	<p>『c:remove』는 JSP의 removeAttribute() 와 같은 역할을 수행한다.</p>
	<p> (page | request | session | application)
		범위의 변수(속성)을 제거한다.</p>
	<p> scope 속성이 생략될 경우 기본 값(default)은 page 이다.</p> <!-- (page | request | session | application) -->
</div>

<div>
	<form action="" method="post">
		정수1<input type="text" name="su1" class="txt"><br>
		정수2<input type="text" name="su2" class="txt"><br>
	
		<button type="submit" class="btn">결과 확인</button>
	</form>
</div>

<div>
	<!-- request.getParameter("su1"); 로 수행한 결과값이 존재할 경우... -->
	<c:if test="${!empty param.su1 }">
	
		<%-- 『c:set var="변수" value="값" ~ /c:set』 --%>
		<%-- → 변수의 값을 지정하는 구문 --%>
		<%-- → 해당 스코프에 지정된 변수가 존재하지 않을 경우 --%>
		<%--    변수를 새로 선언하여 쵝화 하는 기능을 수행하게 되며 --%>
		<%--    해당 스코프에 이미 지정된 변수가 존재할 경우 --%>
		<%--    그 변수의 값을 다시 초기화(덮어쓰기)하는 효과가 적용된다. --%>
		<c:set var="result" value="1"></c:set>
		
		<c:forEach var="a" begin="1" end="${param.su2 }" step="1">
			<c:set var="result" value="${result * param.su1 }"></c:set>
			<p>${param.su1 } ^ ${a } = ${result }</p>
		</c:forEach>
	</c:if>
</div>

</body>
</html>

 

 

 


! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !