본문 바로가기
코딩도전기/JSP

CODO Day16_JSP(Scope/AtionTag/JavaBean/ElTag/JSTL)

by 코도꼬마 2023. 2. 22.

Scope(저장영역)

  • JSP에서 데이터 저장 시 공유하는 영역
  • 데이터를 “언제까지 가지고 있는지”를 중심으로 구분
영역 영역 객체 속성의 유효 범위
page  pageContext  해당 페이지를 제공하는 동안 (한페이지)
request  request  클라이언트의 요청이 처리되는 동안  -  요청을 받고 응답하는 동안 (두페이지 정도)
session  session  세션이 유지되는 동안  -  브라우저가 켜져있는 동안
application  application  어플리케이션이 실행되고 있는 동안  -  보안 낮음(실행되고 있는 동안 계속 지우지 않기 때문) 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="application.jsp" method="post">
		<h3>Application 영역에 저장될 내용</h3>
		<p>ID : <input type="text" name="userId"/></p>
		<p>이름 : <input type="text" name="userName"/></p>
		<p><input type="submit" value="전송"/></p>		
	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//index.jsp에서 받아온 데이터를 application 영역에 저장
	request.setCharacterEncoding("UTF-8");
	String id = request.getParameter("userId");
	String name = request.getParameter("userName");
	
	//application 영역에 저장할 경우 application 내장 객체를 사용
	application.setAttribute("id", id);
	application.setAttribute("name", name);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="session.jsp" method="post">
		<h3>Session 영역에 저장될 내용</h3>
		<p>이메일 : <input type="text" name="email"/></p>
		<p>연락처 : <input type="text" name="phone"/></p>
		<p><input type="submit" value="전송"/></p>		
	</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//application.jsp에서 보낸 값을 받아서 
	request.setCharacterEncoding("UTF-8");
	String email = request.getParameter("email");
	String phone = request.getParameter("phone");
	//System.out.println(email);
	//System.out.println(phone);
	//session에 email, phone이라는 이름으로 받아서 값 넣기
	session.setAttribute("email", email);
	session.setAttribute("phone", phone);
	response.sendRedirect("result.jsp");
%>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//application
	String id = (String)application.getAttribute("id");
	String name = (String)application.getAttribute("name");
	
	//session
	String email = (String)session.getAttribute("email");
	String phone = (String)session.getAttribute("phone");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>application 영역 - 서버가 꺼져야 사라짐</h3>
	<p>ID : <%=id %></p>
	<p>NAME : <%=name %></p>
	
	<h3>session 영역 - 브라우저를 끄거나 바뀌면 사라짐</h3>
	<p>EMAIL : <%=email %></p>
	<p>PHONE : <%=phone %></p>
</body>
</html>

 

 

 

Action TAG

  • scriptlet을 최소한으로 쓰기 위해 action tag를 만듦
  • 현재 거의 사용하지 않음
  사용법 설명
forward <jsp:forward page=“” /> 특정 페이지로 데이터를 전달
include <jsp:include page=“” flush=“”/> 특정 페이지를 불러옴
useBean <jsp:useBean id=“” class=“” scope=“”/> 빈을 사용(이 부분은 자바빈 이후 다룰 예정)

 

 

Forward

  • 특정 페이지로 이동시켜주는 역할

 

  -  Redirect와 차이점

  redirect forward
사용 객체 Response 객체 Request 객체
파라메터 파라메터를 추가할 수 없음 파라메터 추가 가능
표시되는
페이지 주소		 마지막 페이지 표시
(client를 새로운 페이지로 이동시킴)		 이동 전 페이지 표시(보안↑)
(서버 자체에서 이동하므로 변경된 페이지 표시x)

 

  • start.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>forward 시작 페이지</h3>
	<form action="stopPage.jsp" method="post">
		<table>
			<tr>
			<th>이름</th>
			<td><input type="text" name="name"/></td>
			</tr>
			<tr>
			<th>나이</th>
			<td><input type="text" name="age"/></td>
			</tr>
			<tr>
			<th>주소</th>
			<td><input type="text" name="address"/></td>
			</tr>
			<tr>
			<th><button>전송</button></th>  <!-- button태그는 submit 속성을 가지고 있음 -->
			</tr>
		</table>
		<input type="hidden" name="nextPage" value="result.jsp"/>
	</form>
</body>
</html>

  • stopPage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String nextPage = request.getParameter("nextPage");
%>

<!-- *redirect는 데이터를 실어보낼 수 없다(response는 쓰는 역할) -->
<!-- *forward는 데이터를 실어보낼 수 있다(request 객체 하위) -->
<!-- jsp 태그 안에 주석 넣으면 에러남 -->
<jsp:forward page="<%=nextPage %>">
	<jsp:param value="010-1234-5678" name="tel"/>
</jsp:forward>

 

  • result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- forward는 최종 주소를 밝히지 않음 -->
	<p>이름 : <%= request.getParameter("name") %></p>
	<p>나이 : <%= request.getParameter("age") %></p>
	<p>주소 : <%= request.getParameter("address") %></p>
	<p>전화 : <%= request.getParameter("tel") %></p>
</body>
</html>

 

 

Include

  • <jsp:include page="불러올 페이지"/>
  • scriptlet의 <%@ page include %>를 대체하기 위해 생김
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<h1>HEADER</h1>
<hr/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div>
	<h1>BODY</h1>
	<!-- main.jsp에서 param으로 보낸 값 -->
	<h3><%=request.getParameter("content") %></h3>
</div>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<hr/>
<h1>FOOTER</h1>

 

  • main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 불러올 페이지(header.jsp) -->
	<!-- jsp태그 사이에 불러올 값이 없으면 /로 바로 닫을 수 있음 -->
	<jsp:include page="header.jsp"/>
	<!-- 불러올 페이지(body.jsp) -->
	
	<jsp:include page="body.jsp">
		<jsp:param value="my content body" name="content"/>	
	</jsp:include>
	<!-- 불러올 페이지(footer.jsp) -->
	
	<jsp:include page="footer.jsp"/>
</body>
</html>

 

 

 

JAVA Bean(class)

  • Scriptlet을 최소화시키려는 이유는 JAVA LOGIC과 HTML을 분리시키기 위함(Scriptlet을 남발할 경우 헷갈리기 때문)
  • JAVA Bean을 이용하면 JAVA CODE의 일부를 분리할 수 있음(JAVA DATA와 JAVA LOGIC 분리)
  • 우리는 이것을 MODEL 1이라고 지칭(현재 사용하지 않음)
  • Model 1 vs Model 2 비교 (*면접질문)

 

  • Bean은 여러 JSP에서 생성되는 데이터의 창고 역할을 수행  :  
  • Bean에서 data를 공통으로 저장하고 사용
  • <jsp:useBean id=“빈 이름” class=“빈에 대응할 클래스” scope=“빈의 사용 범위” />

 

  • model1 : scriptlet에서 데이터 부분만 java파일로 이동시킨 모델 / jsp와 java를 분리하기 위한 시도
  • 데이터를 저장해 줄 class 먼저 생성(web에서 java 프로그램 실행 시 main 메소드 없어도 가능)
  • beans 규약 : 빈을 만들 때는 반드시 멤버변수를 private으로 한다.

 

  • FirstBean.class
package com.gudi.beans;

public class FirstBean {
	
	//beans 규약 : 빈을 만들 때는 반드시 멤버변수를 private으로 한다.
	private String name = "hong gil-dong";

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}	
}

 

  • index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- id=호출이름,class="빈 클래스 위치", scope=사용영역(page,request,session,application) -->
<jsp:useBean id="firstBean" class="com.gudi.beans.FirstBean" scope="page"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>java bean : <%=firstBean.getName() %></h3>
	<a href="exam/main.jsp">빈 사용 예시</a>
</body>
</html>

 

  • main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="beanProc.jsp"> <!-- 설정 안해주면 get으로 보냄 -->
		이름 : <input type="text" name="userName"/>
		<button>전송</button>
	</form>
</body>
</html>

 

  • beanProc.jsp  /  Bean에 값 넣기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 
	1. 파라메터를 받아서 빈에 저장
	2. 이후 result.jsp로 이동
 -->
 
 <jsp:useBean id="firstBean" class="com.gudi.beans.FirstBean" scope="session"/>
 
 <!-- 스크립틀릿 활용 -->
 <%--
 	String name = request.getParameter("userName");  //파라메터에서 받아와서
 	firstBean.setName(name);                            //빈에 저장하고
 	response.sendRedirect("result.jsp");                 //페이지 이동
 --%> 
 
 <!-- 액션태그 활용 -->
 <!-- 
 property="사용할 필드" name="사용할 빈" value="직접 넣을 값" param = "가져올 파라메터 이름";
 Param이 아닌 일반 값을 넣고 싶다면 value속성 사용
  -->
<%-- <jsp:setProperty property="name" name="firstBean" value="홍길동"/> --%>
<jsp:setProperty name="firstBean" property="name" param="userName"/>
<!-- 액션태그에는 redirect는 없음 -->
<jsp:forward page="result.jsp"/>

 

  • result.jsp  /  Bean에 저장된 값 빼오기
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<jsp:useBean id="firstBean" class="com.gudi.beans.FirstBean" scope="session"/>

<!-- 스크립틀릿 활용 -->
Bean Value : <%= firstBean.getName() %>
<br/><br/>

<!-- 액션태그 활용 -->
Bean Value : <jsp:getProperty name="firstBean" property="name"/>

 

 

 

EL TAG

  • Action Tag만으로는 scriptlet을 대체하기 어려워 Expression Language Tag 등장
  • <%= %>(출력문)을 간단하게 표현하려는 것이 목적
Action Tag EL Tag
<%= variable %> ${variable}
<%= session.getAttrebute( “id” ) %> ${sessionScope.id}
<%= request.getParameter( “id” ) %> ${param.id}

 

  • EL태그에서 사용하는 내장객체와 속성의 명칭은 조금 다름
SCRIPTLET EL TAG  
page pageScope page 영역에 존재하는 객체 참조
request requestScope request 영역에 존재하는 객체 참조
session sessionScope session 영역에 존재하는 객체 참조
getParameter param Parameter 값을 얻어 올 경우
getParameterValues paramValue Parameter 값을 배열로 받아 올 경우
cookie cookie cookie 객체 참조

 

  • index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	session.setAttribute("sessionId", session.getId());
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="result.jsp">
		ID : <input type="text" name="id"/>
		<button>전송</button>	
	</form>
	<a href="oper.jsp">연산자 예제</a>
</body>
</html>

 

  • 간단한 사칙연산 및 비교연산도 가능
== eq 두 값이 같으면 true, 다르면 false
!= ne 두 값이 다르면 true, 같으면 false
< lt(Less Than) 왼쪽 항이 오른쪽 항보다 작으면 true
> gt(Greater Than) 왼쪽 항이 오른쪽 항보다 크면 true
<= le 왼쪽 항이 오른쪽 항보다 같거나 작으면 true
>= ge 왼쪽 항이 오른쪽 항보다 같거나 크면 true

 

  • oper.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>이스케이프문자(\:역슬래시)를 통해 고유의 특수능력을 없앨 수 있다</p>
	<ul>
		<li>\${5+7} => ${5+7}</li>
		<li>\${5-7} => ${5-7}</li>
		<li>\${5*7} => ${5*7}</li>
		<li>\${5/7} => ${5/7}</li>
		<li>\${6%2} => ${6%2}</li>
	</ul>
	
	<ul>
		<li>\${10 == 9} = ${10 eq 9}</li>
		<li>\${5 != 7} = ${5 ne 7}</li>
		<li>\${3 < 8} = ${3 lt 8}</li>
		<li>\${8 > 8} = ${8 gt 8}</li>
		<li>\${15 <= 9} = ${15 le 9}</li>
		<li>\${7 >= 7} = ${7 ge 7}</li>
		<li>\${5+3 == 8? 1:0} = ${5+3 == 8? 1:0}</li>
	</ul>
</body>
</html>

  • result.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	session ID : ${sessionScope.sessionId}
	<br/>
	ID : ${param.id}
</body>
</html>

 

  • 헷갈리지 말자!
    $()  >>   j-query
    #{}  >>  mybatis

 

 

 

JSTL(Jsp Standard Tag Library)

  • 개발자들이 필요한 Custom Tag를 제작할 수 있도록 허용해줌
  • Custom TAG 중 자주 사용되고 유용한 것만을 모아 만든 라이브러리가 JSTL
  • EL은 주로 간단한 표현에 사용되었다면 JSTL은 좀 더 다양하게 사용
  • JSTL을 사용하려면 Library를 다운받은 후 해당 프로젝트 WEB-INF/lib 폴더에 넣어주어야 함
  • 페이지 맨 윗 부분에 "<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>"로 명시(선언)해주어야 함

 

JSTL 설치

  • 아파치 사이트에서 라이브러리 다운로드
  • jstl-impl-1.2.jar                           :  JSTL
    taglibs-standard-spec-1.2.5.jar  :  SPEC(규격)
    jstl-jstlel-1.2.jar                           :  EL(el태그와 jstl연결)
  • 위 세개의 파일을 WEB-INF/lib 폴더에 복사
  • jsp파일 최상단에 다음 내용 추가  :  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

JSTL TAG 종류

set JSP에서 사용될 변수 설정
remove 설정한 변수 제거
if 조건에 따라 내부코드 수행(If문)
choose 다중조건을 처리할 때 사용(Switch문과 비슷하지만 다중조건 가능)
forEach 컬렉션이나 Map의 각 항목을 처리할 때 사용
forTokens 구분자로 분리된 각각의 토큰을 처리할 때 사용
import URL을 사용하여 다른 자원의 결과를 삽입
redirect 지정한 경로로 리다이렉트
url URL을 재작성
catch 익셉션 처리에 사용
out JspWriter에 내용을 알맞게 처리한 후 출력

 

  • index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ol>
		<li><a href="taglist/set.jsp">*c:set</a></li>
		<li><a href="taglist/if.jsp">*c:if</a></li>
		<li>
			*c:choos
			<form action="./taglist/choose.jsp">
				<input type="text" name="num"/>
				<button>submit</button>
			</form>
		</li>
		<li><a href="./taglist/foreach.jsp">*c:foreach</a></li>
		<li><a href="./taglist/url.jsp">*c:url</a></li>
		
		<li><a href="./taglist/forTokens.jsp">c:forTokens</a>
		<li><a href="./taglist/import.jsp">c:import</a>
		<li><a href="./taglist/redirect.jsp">c:redirect</a>
		<li><a href="./taglist/function.jsp">fn:000</a>
	</ol>
</body>
</html>

  # 상대경로*  :  ./ (해당 파일을 기준으로 움직임 - '.'으로 상위파일을 표시)   VS  절대경로  :  해당 파일명

 

  • Set Tag
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	session.setAttribute("myid", "admin");
	session.setAttribute("uid", "105784");
%>
    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>set tag</h3>
	<!-- el 변수 생성(페이지 내에서 el로 무언가하고 싶다면 변수를 생성해야 함) -->
	<%--<c:set var="변수명" value="값" [scope="저장영역"]/>--%>
	<%--<c:set var="변수명" [scope="저장영역"]></c:set> --%>
	<ul>
		<li>var : 변수의 이름</li>
		<li>value : 변수가 담을 값</li>
		<li>scope : 저장할 영역(*page, request, session, application) / 생략가능</li>
	</ul>
	<c:set var="name1" value="test" scope="page"/>
	<c:set var="name2" value="${sessionScope.myid }"/>
	<c:set var="name3" value="${session.Scope.myid}_${sessionScope.uid}"/>
	
	<c:set var="name4" scope="request">test2</c:set>
	<c:set var="name5">${sessionScope.myid}</c:set>
	<c:set var="name6">${session.Scope.myid}_${sessionScope.uid}</c:set>
	
	<h3>변수 리스트</h3>
	<ul>
		<li>${name1}</li>
		<li>${name2}</li>
		<li>${name3}</li>
		<li>${name4}</li>
		<li>${name5}</li>
		<li>${name6}</li>
	</ul>
	
	<!-- 변수 삭제 -->
	<%-- <c:remove var="변수명" scope="저장영역"/> --%>
	<c:remove var="name4" scope="request"/>
	<c:remove var="name5"/>
	
	<h3>삭제 후 변수 리스트</h3>
	<ul>
		<li>${name1}</li>
		<li>${name2}</li>
		<li>${name3}</li>
		<li>${name4}</li>
		<li>${name5}</li>
		<li>${name6}</li>
	</ul>
</body>
</html>

 

If Tag

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul>
		<li>자바 if문과 비슷한 기능 제공</li>
		<li>c:if test="조건"</li>
		<li>test속성 내의 결과가 true일 경우 몸체 내용이 처리됨</li>
		<li>c:if test="조건" var="조건 결과가 저장되는 변수명"</li>
	</ul>
	
	<% if(true){ %>
		<p>항상 실행된다</p>
	<% } %>
	
	<c:if test="true">
		<p>항상 실행된다</p>
	</c:if>
	
	<c:set var="myid">admin</c:set>
		<c:if test="${myid eq 'admin'}" var="result">
			myid는 admin이 맞습니다.<br/>
			결과값 : ${result}
		</c:if>
		<c:if test="${myid ne 'admin'}">
			myid는 admin이 아닙니다.
		</c:if>
	
</body>
</html>

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

'코딩도전기 > JSP' 카테고리의 다른 글

JSP Templates 설정  (0) 2023.03.02
CODO Day17_JSP(JSTL태그&함수)  (0) 2023.02.23
CODO Day15_JSP(Out/Response/Cookie/Session)  (0) 2023.02.21
JSP_TEST  (1) 2023.02.20
CODO Day14_Java Servlet(server) Page(Web/WAS/TOMCAT/Scriptlet/내장객체(Request객체))  (0) 2023.02.20

관련글

티스토리툴바