본문 바로가기
Web

[WEB]JSP,EL,JSTL

by whitedeveloper 2022. 9. 20.

## -------------------------------------------
## JSP(Java Server Page)
## -------------------------------------------

##model2 archtecture
-- M : 자바클래스
-- V : jsp
-- C : servlet

##model1 archtecture
-- M : java bean component
-- V : jsp
-- C : jsp

## 목적 : 
-- 서블릿에 혼재된 view 부분(html tag부분)을 별도로 담당처리하기 위해서 분리
-- view (presentation logic) 담당 : MVC pattern


## JSP 페이지 구성요소 : 화면설계 Tag 기반 작성 가능
-- HTML tag + plain text
-- JSP tag
-- Action tag
-- EL & JSTL
-- Custom tag

## JSP 서비스 절차
-- Hello.jsp 
    => Hello_jsp.java (소스코드 변환) 
    => Hello_jsp.class (컴파일)
    => JSP Life Cycle 에 의해서 컨테이너가 서비스 제공

##JSP life Cycle
1.jspInit() : 초기화 메서드, 사용자 재정의 가능
2, jsDestory(0 :자원해제 메서드, 사용자 재정의 가능
3. _jspService() :서비스 메서드, 사용자 재정의 불가,<%= %>, <% %> 태그 내용 자동으로 _jspservice() 내부로 변환


## JSP tag
1. Comment Tag:
<!-- HTML 주석내용 (응답시에 전달 : 사용자 소스보기 가능)-->

<% // JAVA 한줄 주석내용-변환된 소스코드 포함 주석 %>
<% /* JAVA 여러줄 주석내용-변환된 소스코드 포함 주석 */ %>

<%-- JSP 주석내용 --%>

2. Directive Tag:
<%@ page contentType="text/html" %>
<%@ taglib %> - 자바 스탠다드 라이브러리 사용
<%@ include %>

3. Declaration Tag:
<%! 멤버변수; | 멤버메서드(){};라이프사이클메서드 재정의; %>

4. Expression Tag:
<%= 출력인수 %> => _jspService() {} 서비스코드로 변환

5. Scriptlet Tag:
<% 자바서비스코드수행문; %> => _jspService() {} 서비스코드로 변환


## Directive Tag:
-- JSP 페이지에 대한 정보를 설정
<%@ 지시어 속성명="속성값" 속성명x="속성값"  %>

2.1 page 지시어 
-- 속성 : contentType, import, errorPage, isErrorPage, buffer, autoflush, info, extends

<%@ page contentType="text/html;charset=euc-kr" %>
<%@ page import="ucamp.dao.*, ucamp.dto.UserDTO" %>
<%@ page import="java.util.ArrayList" %>

<%@ page errorPage="error/DispatcherError.jsp" %>
<%@ page isErrorPage="true" %>

2.2 include 지시어
<%@ include file="topMenu.jsp" %>

2.3 taglib 지시어
<%@ taglib uri="http://www.ssafy.com" prefix="s" %>


## JSP Life Cycle 
(1) jspInit()     : JSP 초기화시 사용자 재정의
(2) jspDestroy()  : JSP 자원해제 사용자 재정의

(3) _jspService() : 
    >> 서비스 처리 메서드 자동 변환
    >> <%= expression %>, <% scriptlet tag %>


## JSP 내장객체 관계: _jspServie() 서비스메서드 내부에서만 사용가능한 지역변수
-- .jsp 가 변환된 .java 클래스의 _jspService() 서비스 메서드 내부에 선언한 지역변수

-- request == HttpServletRequest
-- response == HttpServletResponse
-- config == ServletConfig
-- application == ServletContext
-- session == HttpSession
-- exception == Throwable
-- page     == PageContext
-- out == JspWriter


## Java Bean Component
-- 재사용 가능한 자바 클래스
-- 규칙 :
   (1) package 선언
   (2) no argument 생성자 : 기본생성자
   (3) private 멤버변수 선언     
   (4) public setter() / getter() 멤버메서드 선언 : 이름규칙준수(주의)


## -------------------------------------------
## JSP Action Tag
## -------------------------------------------


## Action tag   
-- 객체 생성 및 사용을 하기위해 제공되는 태그
-- JSP 페이지의 자바 코드대신에 태그를 사용할 수 있음

## 기본형식 : 
(1) <jsp:액션태그명 속성명="속성값" 속성명x="속성값"> ~~~ </jsp:액션태그명>
(2) <jsp:액션태그명 속성명="속성값" 속성명x="속성값" />

## action tag 종류
1. <jsp:include page="포함시킬조각페이지.jsp" />
2. <jsp:forward page="제어권을넘길다른페이지.jsp />
3. <jsp:param name="변수명" value="값" /> 
    -- <jsp:include>, <jsp:forward> 컨텐트 내용으로만 올 수있음

4. <jsp:useBean id="참조변수명" class="생성할클래스명" scope="page|request|session|application" />
5. <jsp:setProperty name="참조변수명" property="프로퍼티명 | *" />
6. <jsp:getProperty name="참조변수명" property="프로퍼티명" />


## action tag attributes
1) <jsp:useBean id="객체에대한참조변수명"
                scope="page | request | session | application" 
                class="top.sub.클래스이름" />
  
   -- 객체 생성 : new JavaBean클래스이름();
   -- 객체 검색 사용 : scope.getAttribute("객체에대한참조변수명")
   -- scope 생략 default : page        
                 
2) <jsp:setProperty name="객체에대한참조변수명" 
                    property="* 또는 property이름" => JavaBean 컴포넌트 멤버변수명
                    value="명시적초기값"
                    param="뷰화면엘리먼트이름" 
                     />
                     
   -- 객체의 속성에 값을 설정 : setter()                 
                    
3) <jsp:getProperty name="객체에대한참조변수명" 
                    property="property이름"
                     />
   
   -- 객체의 속성 값을 사용 : getter() 
    
    
4) <jsp:forward page="/sub-foler/포워드페이지url" />

5) <jsp:include page="/sub-foler/조각페이지url" />

6) <jsp:param name="변수명" value="값" />
              

## -----------------------------------------
## 조각페이지 사용
## -----------------------------------------


1. directive tag
    <%@ include file="/sub-folder/file.jsp" %>

    >> 정적 include 방식
    >> include하는 jsp 파일내에 복사되어 같이 컴파일됨
    >> include되는 jsp 파일내 전역변수를 상위 jsp에서 사용가능??

2. action tag
    <jsp:include page="/sub-folder/file.jsp" />

    <jsp:include page="/sub-folder/file.jsp" >
        <jsp:param name="key" value="value" />
    </jsp:include>

    >> 동적 include 방식
    >> include되는 jsp파일의 출력결과(Html 코드)만 포함
    >> include되는 jsp파일의 변수 사용 불가
    >> <jsp:param> 태그로 동적 값 전송 가능

3.  <c:import url="/sub-folder/file.jsp" />

    <c:import url="/sub-folder/file.jsp | ftp 외부리소스" >
        <c:param name="key" value="value" />
    </c:import>

    <c:out value="${param.key}" />

    >> 동적 include 방식
    >> include 되는 jsp파일의 출력결과(Html 코드)만 포함
    >> 외부자원 사용가능
    >> <c:param> 태그로 값 전송 가능


-- inc/headr.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String CONTEXT_PATH = request.getContextPath();
%> 

-- index.jsp
<%@ include file="/include/header.jsp" %>
<jsp:include page="/include/header.jsp" />

<link rel="stylesheet" href="<%= CONTEXT_PATH %>/css/common.css">
<img src="<%= CONTEXT_PATH %>/img/logo.png">

<a href="<%= CONTEXT_PATH %>/guestbook/write.jsp">글쓰기</a><br> 
<form action="<%= CONTEXT_PATH %>/url-pattern">

--  EL 경로설정
<a href="${pageContext.serveltContext.contextPath}/sub-folder/file">
<a href="${pageContext.request.contextPath}/sub-folder/file">

-- JSTL
<a href="<c:url value='/sub-folder/file' />"></a>



## -------------------------------------------
## Custom Tag
## -------------------------------------------
-- 사용자 정의 태그

-- 관련요소: 
=> tag handler class : 태그처리클래스 (*.jar)
=> tag library descriptor(TLD): 태그사용설명
=> tag namespace uri 지정


## 주의사항 : 
-- jsp 페이지등에 주석가능하면 사용하지말것 
=> 주석으로 인해서 parsing error 발생됨


## 비교
JSP : <%= pageContext.getAttribute("notice").getWriter() %>
EL : ${notice.writer}  ==  ${notice[wirter]}
JSTL: <c:out value="${notice.writer}" default="guest"/>


## -------------------------------------------
## EL : Expression Language
## -------------------------------------------
-- JSP 2.0 EL 포함, 추가 라이브러리(.jar) 필요하지 않음
-- JSP 페이지를 쉽게 작성 가능, java code 대체, 재사용 가능

1. 기술방법 : ${ expression }
-- ${객체.프로퍼티명}
-- ${변수명}
-- ${requestScope.변수명}

2. 연산자 지원: 산술, 비교, 논리, 공백 연산자 제공
산술연산자 : +, -, *, / div, % mod
비교연산자 : == eq, != ne, < lt, > gt, <= le, >= ge
논리연산자 : && and, || or, ! not
공백연산자 : empty (null 또는 공백여부 확인), not empty, !empty

3. 키워드 : 식별자로 사용못함
and eq gt true instanceof mod
or ne   le false empty
no lt ge null div

4. default 객체: 서블릿/JSP 값들을 쉽게 접근하기 위해서 제공된 객체들

-- pageContext
=> ${pageContext.request.requestURI}
=> ${pageContext.request.contextPath}

=> 경로설정시 contextPath 가져오기
=> <a href="${pageContext.serveltContext.contextPath}/sub-folder/file">
=> <a href="${pageContext.request.contextPath}/sub-folder/file">

-- pageScope, requestScope, sessionScope, applicationScope

=> ${sessionScope.dto.memberId}
=> ${requestScope.message}
=> ${message}

-- param, paramValues
=> ${param.memberId}
=> ${paramValues.hobby}
=> request.getParameter("memberId")
=> request.getParameterValues("hobby")

-- header, headerValues
-- cookie
-- initParam


## -------------------------------------------
## JSTL : Java Standard Tag Library
## -------------------------------------------
-- JSP 코드안의 java 코드 제거가 가능함
-- 재사용 가능한 컴포넌트임
-- Dynamic Contents를 작성 가능함
-- 구성요소 = JSP + 태크 라이브러리 + [web.xml] + TagHandler 클래스
-- api: 
    >> docs.oracle.com >> Java >> Java EE >> Release: JavaEE5 >> 
        >> API Documentation 
        >> JavaServer Pages Standard Tag Library 1.1 Tag Reference
    >> https://docs.oracle.com/javaee/5/jstl/1.1/docs/tlddocs/

## 구성요소 = JSP + 태크 라이브러리(TLD) + [web.xml] + TagHandler 클래스

1. http:java.sun.com/products/jsp/jstl 참조
JSTL 1.0 : TOMCAT 4.X (web.xml 파일에 TLD 파일에 대한 uri 기술)
JSTL 1.1 : TOMCAT 5.X (web.xml 파일에 TLD 파일에 대한 uri 기술 불필요)

2. JSTL libary :  jstl.jar , standard.jar 
-- c:\tomcat\lib 폴더에 복사하고 tomcat 재구동(서버 레벨)
-- 컨텍스트의 WEB-INF\lib 폴더에 복사한다. (컨텍스트 레벨)

3. JSP 페이지에 JSTL을 사용하기 위해서 taglib 지시어 기술
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>

4. Core Library
-- 수식, 제어흐름, URL 처리등 JSP에서의 기본적 기능 제공 라이브러리

-- 출력태그 : <c:out>
-- 변수 설정 및 삭제 태그 : <c:set>, <c:remove>
-- 조건 처리 태그 : <c:if>, <c:choose>, <c:when>, <c:otherwise>
-- 반복 처리 태그 : <c:forEach>, <c:forTokens>
-- 페이지 처리 태그 : <c:import>, <c:redirect>, <c:url>, <c:param>
-- 예외 처리 태그 : <c:catch>

4.1 수식언어 지원
-- <c:out> :  
    JspWriter 통해서 수식 결과 출력
    <c:out value="${param.name}" default="Guest" />
    => <%= request.getParameter("name") %>

-- <set> : 
    변수에 값을 설정 시킴
    <c:set var="변수명" value="설정값" scope="[page]|request|session|application" />
    <c:set var="msg" value="Hello JSTL" />
    <c:out value="${msg}" />

-- <remove>
    scope에 저장된 변수 삭제시킴
    <c:remove var="삭제변수명" scope="page|request|session|application" />

-- <catch>
    예외처리 

4.2  제어흐름
-- <if> :
    조건이 참인 경우에 수행 (else 부분은 기술할 수 없음)
    <c:if test="테스트조건" 
             var="테스트조건실행결과저장변수"
             scope="page|request|session|application" />

    <c:if test="${!empty param.name}">
        이름: ${param.name}
        <br>
    </c:if>

    <c:if test="${empty param.name}">
            이름: Guest(손님)
            <br>
    </c:if>
    
-- <choose>~<when>~ <otherwise>
    다중 조건 비교 수행, switch~case~default 와 유사

    <c:choose>
        <c:when test="${param.type == 1}"><c:out value="10분간 쉽니다"/></c:when>
        <c:when test="${param.type == 2}"><c:out value="20분간 쉽니다"/></c:when>
        <c:otherwise><c:out value="오늘 수업을 마치겠습니다." /></c:otherwise>
    </c:choose>

-- <forEach>
    count, item에 의한 반복 수행
    
    // count에 의한 반복 수행
    <c:forEach var="no" begin="1" end="10" step="1">
        <c:out value="${no}" />
    </c:forEach>

    // item들에 의한 반복 수행 : Collection, Array
    // jdk1.5 for(타입 변수명 : collection참조변수명)
    <c:forEach var="item에대한참조변수명" items="${collection참조변수명}">
        <c:out value="${item에대한참조변수명.멤버이름}" />
    </c:forEach>

    <c:forEach var="h" items="${header}">
        <li> 
        <c:out value="${h.key}"/> : 
        <c:out value="${h.value}" />
    </c:forEach>

    <!-- 주의사항 : JavaBean Component 규칙 준수해야함 vo.num ==> vo.getNum() -->
    <c:forEach var="vo" items="${requestScope.array}">
      <tr align=center>
        <TD width=5% bgcolor=#eeeeee>${vo.num}</TD> 
        <TD width=15% bgcolor=#eeeeee> 
            <a href="main?action=VIEW&num=${num}">${vo.name}</a>
        </TD>
        <TD width=%10 bgcolor=#eeeeee>${vo.address}</TD>
      </tr>
    </c:forEach>

    <c:forEach var="vo" items="${requestScope.array}">
      <tr align=center>
        <TD width=5% bgcolor=#eeeeee>
            <input type="text" name="num" value="${vo.num}" readonly >
            &nbsp;[읽기전용]
        </TD> 
        
        <TD width=15% bgcolor=#eeeeee> 
          <input type="text" name="name" value="${vo.name}">
        </TD>
        
        <TD width=%10 bgcolor=#eeeeee>
            <input type="text" name="address" value="${vo.address}">
        </TD>
      </tr>
    </c:forEach>
    
-- <forTokens>

4.3 URL 관리
-- <param>
    >> <import>, <redirect>, <url> 내부에서 parameter 전달

-- <import>
    // 조각페이지 | FTP 외부 리소스
    <c:import url="/sub-folder/file.jsp" />

    <c:import url="/sub-folder/file.jsp | ftp 외부리소스" >
        <c:param name="key" value="value" />
    </c:import>

    // 서블릿 요청
    <c:import url="url-pattern" /> 

-- <redirect>
    >> response.sendRedirect("url")
    >> <c:redirect url="url경로" [context="컨텍스트 경로"] />

    <c:redirect url="/member/view.jsp" context="/example"/>
    >> "/example/member/view.jsp" 페이지로 redirect 이동
    
    <c:redirect url="/member/view.jsp" context="/example">
        <c:param name="number" value="10"/>
    </c:redirect>
    >> request.getParameter("number");

-- <url> : context-path 자동 부여해줌
    <a href="<c:url value='/sub-folder/file' />"></a>
    <img src="<c:url value='/img/logo.png" >

    <c:url value="http://localhost:8080/test">
        <c:param name="memberId" value="user01" />
    </c:url>
    => param query-string : http://localhost:8080/test?memberId=user01



5.  JSTL Sample code:
-- (1) WEB-INF\lib>폴더에 tag lib copy : jstl.jar, standard.jar
-- (2) jsp 페이지에 지시어태그로 설정
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-- (3) jsp 페이지에서 jstl 태그사용
<지정한prefix명:jslt태그명 속성명="속성값" />


## sample code
<%
if(session.getAttribute("userid") == null) {
request.setAttribute("message", "회원전용 서비스입니다. 로그인후 사용하시기 바랍니다.");
request.getRequestDispatcher("error.jsp").forward(request, response);
}
%>

<c:if test="${empty sessionScope.userid}">
<c:set var="message" value="회원전용 서비스입니다. 로그인후 사용하시기 바랍니다." 
scope="request" />
<jsp:forward page="error.jsp" />
</c:if>



<%
String title = request.getAttribute("title");
if(title == null) {
%>
전체회원 조회
<%
} else {
%>
<%= title %>
<%
}
%>

<c:set var="title" value="${requestScope.title}"/>
<c:if test="${empty title}">전체회원 조회</c:if>
<c:if test="${not empty title}">${title}</c:if>

<c:choose>
<c:when test="${empty title}">전체회원 조회</c:when>
<c:when test="${not empty title}">${title}</c:when>
</c:choose>

<c:choose>
<c:when test="${empty title}">전체회원 조회</c:when>
<c:otherwise>${title}</c:otherwise>
</c:choose>

'Web' 카테고리의 다른 글

[WEB] 예외처리  (0) 2022.09.22
[WEB]jsp경로설정  (0) 2022.09.21
[WEB]JDBC  (0) 2022.09.20
[Backend-web]JSP  (0) 2022.09.15
[Backend-web]Servlet  (0) 2022.09.15