초급의 끄적거림

[MVC] EL / JSTL / 에러페이지 구현 본문

JSP

[MVC] EL / JSTL / 에러페이지 구현

codingD 2019. 10. 1. 13:22

0. EL (Expression Language)와 JSTL (JSP Standard Tag Library)

  • JSP는 스크립트의 값을 간결하고 편리하게 사용하게하는 표현언어를 사용할 수 있다
  • EL은 JSP객체의 출력을 단순화하는 용도에 사용된다

       - <%= i %> : JSP에서의 값 표기법, i는 변수

       -  ${ i } : EL에서의 값 표기법, i 는 이름

       - <% %>는 HTML 태그 들여쓰기를 할 때 가독성이 많이 떨어지기 때문에 JSTL과 EL 사용을 권장함

  • JSP는 개발자가 직접 정의한 커스텀 태그라는 것도 사용할 수 있는데, 커스텀 태그들 중 많이 사용되는 것들을 모아서 제공하는 JSTL(JSP Standard Tag Library 표준태그 라이브러리)이라는 커스텀 태그가 있다.
  •  - model 부분은 data를 말하는것 DAO에 해당
  •  - controller는 HttpServlet을 상속받아서 만들 것
  •  - view는 jsp 뿐만 아니라 el 로도 표현 됨
  • EL은 삼항연산자외에 제어문을 사용할 수 없어 JSTL과 같이 사용한다

1. EL

 1-1) EL(Expression Language) 표현식

 - $ 과 { } 를 사용하여 값 표현

 - el 폴더와 elTest1.jsp 파일 생성

 - elTest1.jsp에 HTML, CSS, JavaScript, JSP가 혼재하기 때문에 헷갈림 + EL, JSTL 추가

 -  HTML, CSS, JavaScript 어디에서나 허용 / JSP, EL, JSTL은 자바에서만 허용

 

 1-2) EL(Expression Language) 표현언어

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elTest1.jsp</title>
</head>
<body>
    <h3>* EL (Expression Language) 표현언어 *</h3>
    123+456 <hr>
    표현식 : <%= 123%> <hr>
    표현식 : <%= 123+456 %> <hr>
    표현언어 : ${123} <hr>
    표현언어 : ${123+456} <hr>
	
</body>
</html>

 

 

 1-3) EL에서 사용되는 연산자

    - 에러가 아닌데 에러가 표시가 발생하기 때문에 신경쓰지말고 진행

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elTest1.jsp</title>
</head>
<body>
	<h3>* EL에서 사용되는 연산자 *</h3>
    더하기 :${123+456} <hr>
    빼기 : ${123-456} <hr> 
	곱하기 : ${123*456} <hr> 
	나누기 : ${123/456} <hr> 
	
	
	2가 3보다 작다 : ${ 2 < 3 } <hr> <!-- true -->
	2가 3보다 크다 : ${ 2 > 3 } <hr> <!-- false -->
</body>
</html>

 

2. EL 파라미터 예제

  - EL방식은 JSP방식보다 비교적 단순하다는 장점

 2-1) elTest.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elTest2.jsp</title>
</head>
<body>
	<h3>* EL 파라미터 예제 *</h3>
	<form action="elTest2ok.jsp">
	아이디 : <input type="text" name="id"><br>
	비밀번호 : <input type="password" name="pw"><br>
				  <input type="submit" value="확인">
	</form>
</body>
</html>

 

 2-2) elTest2ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elTest2ok.jsp</title>
</head>
<body>
	<h3>* EL 파라미터 결과 *</h3>
    1) JSP 방식 <br>
    아이디 : <%=request.getParameter("id") %> <br>
    비밀번호 : <%=request.getParameter("pw" %> <br>
    
    <hr>
    
    2) EL방식
    아이디 : ${param.id} <br>
    비밀번호 : ${param.pw} <br>
</body>
</html>

 

param : 컬렉션으로 '내부객체'와 같은 의미 (파라미터 값을 가져오기 위한 객체 )

 

 

★ 3, 4번이 중요 : JSP 방식보다 훨씬 단순하게 나오기 때문에 el방식으로 쓰는 것이 좋음

 

3. EL의 Collection들

 3-1) elTest3.jsp JSP / EL로 표현했을 때

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elTest3.jsp</title>
</head>
<body>
	<h3>* EL의 Collection들 *</h3>
<%
    //웹 Scope
    //프로젝트에서 페이지간에 서로 공유할 수 있는 영역
    //pageContext, request, session, application
    
    //웹전역변수 선언 및 값 저장
    pageContext.setAttribute("kor", 100);
    request.setAttribute("eng", 100);
    session.setAttribute("mat", 100);
    application.setAttribute("aver", 100);
%>
	1) page 영역 <br>
	JSP : <%=pageContext.getAttribute("kor") %><br>
	EL : ${pageScope.kor}  <br><!-- pageScope 라는 컬렉션의 kor -->
	<hr>
	2) request 영역 <br>
	JSP : <%=request.getAttribute("eng")%> <br>
	EL : ${requestScope.eng}  <br>
	<hr>
	3) session 영역 <br> 
	JSP : <%=session.getAttribute("mat")%> <br>
	EL : ${sessionScope.mat}  <br>
	<hr>
	4) application 영역 <br>
	JSP : <%=application.getAttribute("aver")%> <br>
	EL : ${applicationScope.aver}  <br>
	<hr>
    * SCOPE 생략 *  <br>
	<!-- 
			EL에서는 SCOPE 이름을 생략할 수 있다.
			Scope를 쓰지 않은 경우 자동으로 페이지에 가서 찾아옴
			page → request → session → application
			순으로 자동 검색
	 -->
	kor : ${kor} <br>
	eng : ${eng} <br> 
	mat : ${mat} <br>
	aver : ${aver} <br>
	<hr>
	
	<!-- 만약 변수가 겹친 경우 -->
<%
	pageContext.setAttribute("num", 500);
	request.setAttribute("num", 600);
	session.setAttribute("num", 700);
	application.setAttribute("num", 800);	
%>
    <!-- 
    	Scope명이 생략되면 자동으로 작은 영역순부터 찾게 된다
     -->
	num : ${num} <!-- 500 -->
	<hr>  
	
	<!-- 해당 변수가 없는 경우 -->
	uname : ${uname } <!-- null이 아닌 그냥 빈 칸 -->


</body>
</html>

 

 3-2) SCOPE 생략 

     - EL에서 Scope 이름을 생략할 수 있다.

     - Scope를 쓰지 않은 경우 자동으로 페이지에 가서 찾아옴

     - Scope명이 생략되면 자동으로

        page → request → session → application 순으로 자동 검색

 

 

 3-4) 같은 변수명을 지정한 경우

     - 같은 변수명을 사용할 경우,  자동으로 작은 영역 순으로 나타나기 때문에 맨 처음에 나타난 값만을 표시

     - 같은 변수명을 사용하지만 각자 값을 얻기 위해서 Scope를 생략하지 않으면 됨

 

 3-5) 해당 변수가 없을 때

     - 해당 변수가 없으면, 빈 칸이 나타남 (null 표시X)

 

4. JSP와 EL의 값 공유

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>elTest4.jsp</title>
</head>
<body>
	<h3>* JSP와 EL의 값 공유 *</h3>
    <!-- 원칙적으로 JSP와 EL변수는 서로 값을 공유할 수 없다 -->
	<% String uname="솔데스크";%>
    이름 (JSP) : <%= uname %> <br>
    이름 (EL) : ${uname} <br>
	<hr>
    <!-- 
		동일한 페이지 내에서 JSP와 EL이 서로 값을 공유하기 위해서는 pageContext Scope를 활용한다
	 --> 
	<%pageContext.setAttribute("uid", "user"); %>
    아이디 (JSP) : <%= pageContext.getAttribute("uid", "user"); %>
    아이디 (EL) : ${pageScope.uid} <br>
    아이디 (EL) : ${uid} <br>
</body>
</html>

 

  - 원칙적으로 JSP와 EL 변수는 서로 값을 공유 할 수 없다.

    : 그렇기 때문에 '이름 (EL)' 에 '솔데스크'가 입력되지 않음

 

  - 동일한 페이지 내에서 JSP와 EL이 서로 값을 공유하기 위해서는 pageContext Scope를 이용하면 가능

 

5. JSTL

 5-1) JSTL 기본 개요

   - 커스텀 태그 (사용자 정의 태그) + 함수

   - 자주 사용될 수 있는 커스텀 태그들을 모아 표준으로 정해놓은 태그 라이브러리

   - 사용자가 정의한 어떤 태그라도 설정의 정보는 uri 속성의 값이 가지고 있고, 이것을 해당 페이지 내에서 사용할 때 uri 속성의 값이 복잡하기 때문에 prefix속성의 값이 별명과 같은 역할

   - 태그의 종류는 다양하기 때문에 전부 다루기 어려움

라이브러리 접두어 URI
코어 c http://java.sun.com/jsp/jstl/core
변수지원,흐름제어,URL처리
XML x http://java.sun.com/jsp/jstl/xml
XML관련처리, XML흐름제어
국제화 fmt http://java.sun.com/jsp/jstl/fmt
국제화처리, 메시지관리
데이터베이스 sql http://java.sun.com/jsp/jstl/sql
데이터베이스 접근
함수 fn http://java.sun.com/jsp/jstl/sql
데이터베이스 접근

 

 5-2) jstl 폴더와 jstlTest1.jsp 파일 생성

 5-3) tomcat-8.0\webapps\examples\WEB-INF\lib의 라이브러리 파일 2개 복사해서 

       WebContent\WEB-INF\lib에 붙여넣기

 

 5-4) 태그라이브러리

<!-- 태그라이브러리를 사용하기 위해 사용하는 디렉토리 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<!-- function의 약자 : fn -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

    - prefix="c" 입력, uri="" → 큰 따옴표 안에서 Ctrl+space bar → http://java.sun.com/jsp/jstl/core 선택  

    - 강사님 사이트의 'JSTL의 표준태그라이브러리 ' 확인

    - 커스텀태그를 c 라이브러리에서 가져다 쓰는 것 

 

 5-5) 1) JSP 변수 선언 과 2) JSTL변수 선언

<%@page import="java.util.Date"%>
<%@page import="javax.xml.crypto.Data"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- JSTL를 사용하기 위해서 Directive를 지정한다 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 태그라이브러리를 사용하기 위해 사용하는 디렉토리 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <!-- function의 약자 : fn -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstlTest1.jsp</title>
</head>
<body>
	<h3>* JSTL (JSP Standard Tag Library 전용태그) *</h3>
    1) JSP 변수 선언 <br>
    <%int a=3;%>
    a: <%= a%> <br>
    <hr>
    
    2) JSTL변수 선언
    <c:set var="b" value="5"></c:set>
    <c:set var="c" value="7"></c:set>
    b : ${b} <br>
    c : ${c} <br>
    b+c : ${b+c} <br>
    <hr>
    <c:out value="2"></c:out> <br>
    <c:out value="${b}"></c:out> <br>
    <c:out value="${c}"></c:out> <br>
    <c:out value="${b+c}"></c:out> <br>
    <hr>
    
    <c:set var="dt" value"<%=new Date()%>" > </c:set>
    오늘날짜 : ${dt} <br>
    오늘날짜 : <c:out value="${dt}"></c:out> <br>
    <hr>
    
    3) b, c 변수제거 <br>
    <c:remove var="b"/>
    <c:remove var="c"/>
    b + c : ${b+c}

</body>
</html>

 

 

6. JSTL 제어문 연습

 -  jstlTest2.jsp 

<%@page import="java.util.Date"%>
<%@page import="javax.xml.crypto.Data"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- JSTL를 사용하기 위해서 Directive를 지정한다 -->

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 태그라이브러리를 사용하기 위해 사용하는 디렉토리 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <!-- function의 약자 : fn -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstlTest2.jsp</title>
</head>
<body>
	<h3>* JSTL 제어문 연습 *</h3>
    <form action="jstlTest2ok.jsp>
    이름 : <input type="text" name="name"> <br>
    나이 : <input type="text" name="age"> <br>
    <input type="submit" name="확인"> 
    </form>
</body>
</html>

 

 6-1) jstlTest2ok.jsp  → JSP를 이용하여 결과값 확인

<%@page import="java.util.Date"%>
<%@page import="javax.xml.crypto.Data"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstlTest2ok.jsp</title>
</head>
<body>
	<h3>* 결과페이지 (JSP) *</h3>
<%
	//1) 이름, 나이를 변수에 대입 후 출력
    String name=request.getParameter("name");
    int age=Integer.parseInt(request.getParameter("age"));
    out.print("이름 : "+ name +"<br>");
    out.print("나이 : "+ age +"<br>");

	//2) 나이가 10 미만 "어린이", 20 미만 "청소년", 나머지 "성인" 출력
    if(age<10){
    	out.print("어린이");
    }else if(age<20){
    	out.print("청소년");
    }else{
    	out.print("성인");
    }//if end
    
	out.print("<br>");
	
	//3) 1~나이 까지 홀수는 빨강색, 짝수는 파랑색으로 출력
	for(int a=1; a<=age; a++){
      if(a%2==1){
      	out.print("<span style='color: red'>"+a+"</span>");
      }else{
      	out.print("<span style='color: blue'>"+a+"</span>");
      }//if
    }//for end
%>
	
</body>
</html>

 

   - 나이가 10 미만 "어린이", 20 미만 "청소년", 나머지 "성인" 출력

 

   - 1~나이 까지 홀수는 빨강색, 짝수는 파랑색으로 출력

 

 

 6-2) jstlTest2yes.jsp  → JSTL를 이용하여 결과값 확인

     - JSTL은 디렉티브 필요 (taglib 설정)

<c:set>   변수설정 
<c:out>   화면에 변수값 출력
<c:remove>   변수제거
<c:catch>   코드의 예외를 잡아냄
<c:if test="조건식">   조건문
<c:choose>   switch문, if~else문
<c:forEach>   반복문
<c:forTokens>   StringTokeniszer를 JSTL를 사용하면 아주 간편하게 사용

 

  +) include를 JSTL로 바꾸면 다음과 같다

<jsp:incldue page="/WEB-INF/views/includes/header.jsp"/>
<c:impoart url="/WEB-INF/views/includes/header.jsp"/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- JSTL를 사용하기 위해서 Directive를 지정한다 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!-- 태그라이브러리를 사용하기 위해 사용하는 디렉토리 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <!-- function의 약자 : fn -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstlTest2yes.jsp</title>
</head>
<body>
	<h3>* 결과페이지 (EL + JSTL) *</h3>
    <c:set var="name" value="${param.name}"></c:set>
    <c:set var="age" value="${param.age}"></c:set>
    이름 : ${name} / <c:out value="${name}"></c:out>
    <br>
    나이 : ${age} / <c:out value="${age}"></c:out>
    <br>
    <!-- 조건문 if--> 
	<c:if test="${name=='장만월' }">호텔 델루나</c:if>
	
	<!-- 다중 조건문 choose -->
	<c:choose>
			<c:when test="${age<10}">아이</c:when>
			<c:when test="${age<20}">아이</c:when>
			<c:otherwise>성인</c:otherwise>
	</c:choose>
	<c:choose>
		<c:when test="${age<10}">어린이</c:when>
		<c:when test="${age<20}">청소년</c:when>
		<c:otherwise>성인</c:otherwise>
	</c:choose>
	
	<!-- 반복문 forEach -->
	<!-- 반복문을 사용하여 나이 수만큼 # 입력 -->
	<c:forEach var="a" begin="1" end="${age}" step="1">
		<c:out value="#"></c:out> 
	</c:forEach>
	<hr>
	
	<!-- 반복문을 사용하여 홀수는 파란색, 짝수는 빨간색으로 숫자 입력 -->
	<c:forEach var="a" begin="1" end="${age}" step="1">
		<c:choose>
			<c:when test="${a%2==1 }">
				<span style="color: blue">${a}</span>
			</c:when>
			<c:when test="${a%2==0 }">
				<span style="color: red">${a}</span>
			</c:when>
		</c:choose>
	</c:forEach>
	
</body>
</html>

 

7. JSTL 함수

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jstlTest3.jsp</title>
</head>
<body>
	<h3>* JSTL 함수 *</h3>
    <c:set var="txt" value="	white space  "></c:set>
    글자개수 : ${fn:length(txt)}
    <hr>
    <c:set var="txt" value="${fn:trim(txt)"></c:set>
    글자개수 : ${fn:length(txt)}
    <hr>
    <c:set var="txt" value="Hi My name is waldo"></c:set>
	${fn:substring(txt, 3, 9)} <!-- My nam -->
	<hr>
<%
    //엔터를 <br>로 바꾸기
    //1) JSP
    String content="";
    content.replace("\n", "<br>");
    
    //2) EL + JSTL
    pageContext.setAttribute("cn", "\n");
%>

	<c:set var="content" value="Hi
                                My name is
	 		           			waldo "></c:set>
	 ${fn:replace(content, cn, "<br>") }
</body>
</html>

 7-1) 엔터를 <br>로 바꾸기

 

8. loginResult.jsp에서 실행

  - 결과 확인 : http://localhost:8090/mvcTest/login.do

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

	2) EL (표현언어) <br>
    아이디 : ${requestScope.r_uid} <br>
    비밀번호 : ${requestScope.r_upw} <br>
	<hr>
    아이디 : ${sessionScope.s_uid} <br>
    비밀번호 : ${sessionScope.s_upw} <br>
	<hr>
    아이디 : ${applicationScope.a_uid} <br>
    비밀번호 : ${applicationScope.a_upw} <br>
	<hr>
    아이디 : ${r_uid} <br> 비밀번호 : ${r_upw} <br>
    아이디 : ${s_uid} <br> 비밀번호 : ${s_upw} <br>
    아이디 : ${a_uid} <br> 비밀번호 : ${a_upw} <br>
	<hr>
    ${msg} <br> ${img}

</body>
</html>

 

9. 에러페이지 구현

  - error 폴더와 404code.jsp 파일 생성

  - error 페이지인지 확인해주는 것 → web.xml

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404code.jsp</title>
</head>
<body>
	<h3>
	요청하신 주소를 찾을 수 없습니다. <br>
	관리자에게 문의하십시오.
	</h3>
</body>
</html>

 

web.xml

	<!-- 에러가 발생(error-code)했을 때 처리할 페이지(location)의 정보 -->
	<!-- http://localhost:8090/mvcTest/hello.jsp -->
	<error-page>
		<error-code>404</error-code>
		<location>/error/404code.jsp</location>
	</error-page>

 

  - 넘긴 값이 없어서 500 에러에 에러메세지가 발생

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>500code.jsp</title>
</head>
<body>
	<h3>
	이용에 불편을 드려 죄송합니다. <br>
	관리자에게 문의하십시오.
	</h3>
</body>
</html>

 

web.xml

<!-- 요청 파라미터값이 없을 때 가져오는 경우  -->
	<!-- http://localhost:8090/mvcTest/test.jsp -->
	<error-page>
		<error-code>500</error-code>
		<location>/error/500code.jsp</location>
	</error-page>

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

'JSP' 카테고리의 다른 글

[JSP] 한글 깨짐 여러 유형  (0) 2019.11.03
[servlet] 사용자 정의 서블릿 작성 (MyController 클래스)  (0) 2019.10.02
[MVC] 서블릿 개요, JSP 형식 출력  (0) 2019.09.30
[에러] Could not delete 경로/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/myweb/storage. May be locked by another process.  (0) 2019.09.30
HTTP Status 500 - java.lang.NumberFormatException: null  (0) 2019.09.25
'JSP' Related Articles more
Comments