본문 바로가기
프로그래밍/JSTL

2021년 10월 31일 : JSTL 사전 예습

by 철제백조 2021. 10. 31.

JSTL (JSP Standard Tag Library)

JSP 개발을 단순화하기위한 태그 library

 

 

 

장점

  1. 빠른 개발 -> JSP를 단순화하는 많은 태그를 제공
  2. 코드 재사용성 -> 다양한 페이지에서 JSTL 태그 사용 가능
  3. 스크립틀릿 태그를 사용할 필요가 없음 (스크립틀릿 태그를 사용하지 않음)

 

 

 

★ Ex1

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>   
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<%
		request.setAttribute("siteName", "JSPStudy.co.kr");
	%>

<title>Expression Language</title>
</head>
<body>

	<h2>EL의 기본문법1</h2>
	사이트명: <b>${siteName}</b>

</body>
</html>

 

 

 

★ Ex2

 

 

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

<!-- EL문법 무시 -->
<%@ page isELIgnored="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<%
		request.setAttribute("siteName", "JSPStudy.co.kr");
	%>

<title>Expression Language</title>
</head>
<body>

	<h2>EL의 기본문법2</h2>
	사이트명: <b>${siteName }</b>

</body>
</html>

 

 

 

★ Ex3_scope1

 

그냥 sum으로 넣어도 됨

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<title>Insert title here</title>
</head>
<body>

	<h2>EL의 Scope1</h2>
	
	<%
		int sum= 0;
		
		for(int i=1; i<=10; i++)
			sum+=i;
		
		/* request 저장소에 sum 속성으로 1~10까지의 합을 저장함 */
		request.setAttribute("sum", new Integer(sum));
	%>
	
	<!-- foward 액션태그를 사용하여 scope2.jsp를 포워드함 -->
	<jsp:forward page="scope2.jsp"/>
	
</body>
</html>

 

 

 

★ Ex3_scope2

 

 

주소창 : http://localhost:8067/JspMiniProject/JSTL/scope1.jsp

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<%
		pageContext.setAttribute("msg", "꿈은 이루어 진다");
	%>

<title>Insert title here</title>
</head>
<body>

	<h2>EL의 Scope1</h2>
	<!-- pageContext에 저장된 값 출력 -->
	msg(pageScope로 받은값): <b>${pageScope.msg}</b><p/>
	
	<!-- request에 저장된 값을 표현식을 이용해출력 -->
	1에서 10까지의 합(request로 받은값): <b><%=request.getAttribute("sum") %></b><p/>
	1에서 10까지의 합(requestScope로 받은값): <b>${requestScope.sum }</b><p/>
	
</body>
</html>

 

 

 

★ Ex4_scope3

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<%
		/* session 저장소의 id 속성에 'rorod'라는 문자열 저장 */
		session.setAttribute("id", "rorod");
	
		/* application 저장소에 siteName 속성에 문자열 저장 */
		application.setAttribute("siteName", "JSPStudy.co.kr");
	%>

<title>Insert title here</title>
</head>
<body>

	<h2>EL의 Scope2</h2>
	
	<!-- scope3에서 요청된 모든 정보를 가지고 scope4로 제어권 넘어감 -->
	<jsp:forward page="scope4.jsp"/>

</body>
</html>

 

 

 

★ Ex4_scope4

 

 

주소창 : http://localhost:8067/JspMiniProject/JSTL/scope3.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>


	<h2>EL의 Scope?</h2>
	
	<!-- EL의 문법으로 id 속성값을 출력 -->
	id(sessionScope로 받은값): <b>${sessionScope.id}</b><p/>
	
	<!-- EL의 문법으로 siteName 속성값 출력 -->
	siteName(applicationScope로 받은값): <b>${applicationScope.siteName }</b><p/>

</body>
</html>

 

 

 

★ Ex5_param1.html

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

	<h2>EL의 param1</h2>	
	<form method="post" action="param1.jsp">
		id: <input name="id"><br>
		pass: <input type="password" name="pwd"><br>
		<input type="submit" value="LOGIN">
	</form>

</body>
</html>

 

 

 

★ Ex5_param1.jsp

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>

	<h2>EL의 param1</h2>
	
	<!-- 매개변수로 받은 id를 EL 문법으로 출력합니다 -->
	id: ${param.id }<br>
	
	<!-- 매개변수로 받은 pw를 다른 방법의 EL문법으로 출력 -->
	pass: ${param["pwd"] }<br>

</body>
</html>

 

 

 

★ Ex6_param2.html

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

	<h2>EL의 param2</h2>
	<form method="post" action="param2.jsp">
		name: <input name="name"><br>
		hobby: <input type="checkbox" name="hobby" value="독서">독서
				<input type="checkbox" name="hobby" value="여행">여행
				<input type="checkbox" name="hobby" value="게임">게임
				<input type="checkbox" name="hobby" value="영화">영화
				<input type="checkbox" name="hobby" value="운동">운동
				<br>		
				
				<input type="submit" value="SAVE">
	</form>

</body>
</html>

 

 

 

★ Ex6_param2.jsp

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>

	<% 
		/* 폼으로 넘겨받을 때 엔코딩은 필수 */
		request.setCharacterEncoding("utf-8");
	%>

	<h2>EL의 param2</h2>
	
	name: ${param.name }<br>
	
	<!-- param2.html에서 checkbox에서 체크된 첫번째 hobby 속성값을 출력 -->
	hobby: ${paramValues.hobby[0] }&nbsp;
			${paramValues.hobby[1] }&nbsp;
			${paramValues.hobby[2] }&nbsp;
			${paramValues.hobby[3] }&nbsp;
			${paramValues.hobby[4] }
</body>
</html>

 

 

 

★ Ex7_empty

 

 

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>

	<h2>EL의 Empty</h2>
	<!-- empty 연산자를 통해 요청된 name 속성 값 유무를 판단한다 -->
	name의 요청 여부: <b>${empty param.name }</b><br>
	
	<!-- name속성에 'rorod'값을 가지고 자신의 페이지를 요청 -->
	<a href="empty.jsp?name=rorod">name값이 있는 요청</a> ||
	<a href="empty.jsp">name값이 없는 요청</a>

</body>
</html>

 

 

 

★ Ex7_array1

 

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

	<%
		String studyArr[] = {"Java", "JSP", "Android", "Spring"};
	
		/* pageContext 저장소에 study 속성으로 studyArr 배열객체를 저장 */
		pageContext.setAttribute("study", studyArr);
	%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>

	<h2>EL의 Array1</h2>
	<b>Java Program 과목</b>
	
	<hr width="150" align="left">
	
	1. ${study[0] }<br>
	2. ${study[1] }<br>
	3. ${study[2] }<br>
	4. ${study[3] }<br>

</body>
</html>

 


★ Ex7_array2

 

 

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>

	<%
		ArrayList<String> familyList = new ArrayList<String>();
		String nameArr[] = {"simba", "rorod", "tina", "poli"};
		
		for(int i=0; i<nameArr.length; i++){
			familyList.add(nameArr[i]);
		}
		
		/* pageContext 저장소에 Family 속성으로 ArrayList 타입의 familyList 객체를 저장함 */
		pageContext.setAttribute("Family", familyList);
	%>

<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>

	<h2>EL의 Array2</h2>
	<b>Family List</b>
	
	<hr width="135" align="left">
	
	1. ${Family[0] }<br>
	2. ${Family[1] }<br>
	3. ${Family[2] }<br>
	4. ${Family[3] }<br>

</body>
</html>

 

 

 

☆ JSTL 설치

 

◎ JSTL 설치방법

https://codedragon.tistory.com/4343

 

 

 

◎ JSTL 

http://tomcat.apache.org/taglibs/standard/

 

Apache Taglibs - Apache Standard Taglib: JSP[tm] Standard Tag Library (JSTL) implementations

 

 

 

jakarta-taglibs-standard-1.1.2.zip
0.91MB

 

 

 

 

 

 

◎ 압축해제 후 lib 폴더에 있는 jstl.jar와 standard.jar를 복사 후 WEB-INF/lib 폴더에 저장

 

 

 

 

 

 

◎ JSTL 기본 사용법

https://atoz-develop.tistory.com/entry/JSP-JSTL-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95-%EC%A3%BC%EC%9A%94-%ED%83%9C%EA%B7%B8-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

 

[JSP] JSTL 사용 방법 - 주요 태그 문법 정리

JSTL을 사용하려면 라이브러리가 필요하다. 라이브러리 다운로드 및 프로젝트 세팅은 이 포스트를 참고한다. 태그 라이브러리 선언 자바에서 import문을 선언하듯 JSP에서도 JSTL 확장 태그를 사용

atoz-develop.tistory.com

 

 

 

 

◎ core 태그 사용을 위해 아래의 코드를 선언해야한다.

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

'프로그래밍 > JSTL' 카테고리의 다른 글

2021년 11월 11일 - JSTL 기초  (0) 2021.11.11

관련글

댓글

티스토리툴바