[필기정리] Day84-2 - EL 문제, JSTL 등

Web/JSP

2020. 10. 26. 18:07

Q. 코드 내에서 EL로 바꿀 수 있는 곳을 모두 바꾸시오.

- EL1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<hr>
	
	<%=10 %><br />
	<%=99.99 %><br />
	<%="ABC" %><br />
	<%=true %><br />
	
</body>
</html>

- EL2_Opereator.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<hr>
	
	<%=  1+2 %> <br />
	<%= 1-2 %> <br />
	<%= 1*2 %> <br />
	<%= 1/2 %> <br />
	<%= 1>2 %> <br />
	<%= 1<2 %> <br />
	<%= (1>2) ? 1 : 2 %> <br />
	<%= (1>2) || (1<2) %> <br />
	
</body>
</html>

- EL3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="member" class="com.superman.www.MemberInfo" scope="page" />
<jsp:setProperty name="member" property="name" value="홍길동"/>
<jsp:setProperty name="member" property="id" value="abc"/>
<jsp:setProperty name="member" property="pw" value="123"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<hr />
	
	이름 : <%= member.getName() %><br />
	아이디 : <%= member.getId() %><br />
	비밀번호 : <%= member.getPw() %><br />
</body>
</html>

- EL4Obj.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="EL4ObjOK.jsp" method="get">
		아이디 : <input type="text" name="id"><br />
		비밀번호 : <input type="password" name="pw">
		<input type="submit" value="login">
	</form>
	
	<% 
		application.setAttribute("application_name", "application_value");
		session.setAttribute("session_name", "session_value");
		pageContext.setAttribute("page_name", "page_value");
		request.setAttribute("request_name", "request_value");
//		RequestDispatcher dispatcher = request.getRequestDispatcher("NewFile1.jsp");
//		dispatcher.forward(request, response);
	%>
</body>
</html>

- EL4ObjOK.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
	%>
	
	아이디 : <%= id %> <br />
	비밀번호 : <%= pw %>
	
	<hr />
	
	applicationScope : <%= application.getAttribute("application_name") %><br />
	sessionScope : <%= session.getAttribute("session_name") %><br />
	pageScope : <%= pageContext.getAttribute("page_name") %><br />
	requestScope : <%= request.getAttribute("request_name") %><br />
	
	<hr />
	
	context 초기화 파라미터<br />
	<%= application.getInitParameter("companyName") %> <br />
	<%= application.getInitParameter("companyTel") %> <br />
	<%= application.getInitParameter("companyEmail") %> <br />
	
</body>
</html>

- EL5Form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<form method="post" action="EL5FormOK.jsp">
이름 : <input type="text" name="name"><br>
성별 : <input type="radio" name="gender" value="male" checked>남 <input type="radio" name="gender" value="female">여<br>
취미 : 	<input type="checkbox" name="hobby" value="swimming">수영
		<input type="checkbox" name="hobby" value="baseball">야구
		<input type="checkbox" name="hobby" value="soccer">축구
		<input type="checkbox" name="hobby" value="basketball">농구
<input type="submit" value="전송">
</form>
</body>
</html>

- EL5FormOK.jsp

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%request.setCharacterEncoding("UTF-8"); %>

이름 : <%=request.getParameter("name") %><br>
성별 : <%=request.getParameter("gender") %><br>
취미 : 
<%
	String[] hobby = request.getParameterValues("hobby");
	for(int i=0;i<hobby.length;i++)
	{
		out.print(hobby[i] + " ");
	}
%>

<hr>

</body>
</html>

- MemverInfo.java

package com.superman.www;

public class MemberInfo {

		private String name;
		private String id;
		private String pw;
		
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}
		public String getId() {
			return id;
		}
		public void setId(String id) {
			this.id = id;
		}
		public String getPw() {
			return pw;
		}
		public void setPw(String pw) {
			this.pw = pw;
		}
}

A.

- EL1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<hr>
	
	${10}<br />
	${99.99}<br />
	${"ABC"}<br />
	${true}<br />
	
</body>
</html>

- EL2_Opereator.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<hr>
	
	${1 + 2} <br />
	${1 - 2} <br />
	${1 * 2} <br />
	${1 / 2} <br />
	${1 > 2} <br />
	${1 < 2} <br />
	${(1>2) ? 1 : 2} <br />
	${(1>2) || (1<2)} <br />
	
</body>
</html>

- EL3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:useBean id="member" class="com.superman.www.MemberInfo" scope="page" />
<jsp:setProperty name="member" property="name" value="홍길동"/>
<jsp:setProperty name="member" property="id" value="abc"/>
<jsp:setProperty name="member" property="pw" value="123"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	이름 : <jsp:getProperty name="member" property="name"/><br />
	아이디 : <jsp:getProperty name="member" property="id"/><br />
	비밀번호 : <jsp:getProperty name="member" property="pw"/><br />
	
	<hr />
	
	이름 : ${member.name }<br />
	아이디 : ${member.id }<br />
	비밀번호 : ${member.pw }<br />
</body>
</html>

- EL4Obj.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="EL4ObjOK.jsp" method="get">
		아이디 : <input type="text" name="id"><br />
		비밀번호 : <input type="password" name="pw">
		<input type="submit" value="login">
	</form>
	
	<% 
		application.setAttribute("application_name", "application_value");
		session.setAttribute("session_name", "session_value");
		pageContext.setAttribute("page_name", "page_value");
		request.setAttribute("request_name", "request_value");
//		RequestDispatcher dispatcher = request.getRequestDispatcher("NewFile1.jsp");
//		dispatcher.forward(request, response);
	%>
</body>
</html>

- EL4ObjOK.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
	%>
	
	아이디 : <%= id %> <br />
	비밀번호 : <%= pw %>
	
	<hr />
	
	applicationScope : <%= application.getAttribute("application_name") %><br />
	sessionScope : <%= session.getAttribute("session_name") %><br />
	pageScope : <%= pageContext.getAttribute("page_name") %><br />
	requestScope : <%= request.getAttribute("request_name") %><br />
	
	<hr />
	
	context 초기화 파라미터<br />
	<%= application.getInitParameter("companyName") %> <br />
	<%= application.getInitParameter("companyTel") %> <br />
	<%= application.getInitParameter("companyEmail") %> <br />
	
	<hr />
	
	아이디 : ${ param.id } <br />
	비밀번호 : ${ param.pw } <br />
	아이디 : ${ param["id"] } <br />
	비밀번호 : ${ param["pw"] }
	
	<hr />
	
	applicationScope : ${ applicationScope.application_name }<br />
	sessionScope : ${ sessionScope.session_name }<br />
	pageScope : ${ pageScope.page_name }<br />
	requestScope : ${ requestScope.request_name }<br />
	
	<hr />
	
	context 초기화 파라미터<br />
	${ initParam.companyName } <br />
	${ initParam.companyTel } <br />
	${ initParam.companyEmail } <br />
</body>
</html>

- EL5Form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<form method="post" action="EL5FormOK.jsp">
이름 : <input type="text" name="name"><br>
성별 : <input type="radio" name="gender" value="male" checked>남 <input type="radio" name="gender" value="female">여<br>
취미 : 	<input type="checkbox" name="hobby" value="swimming">수영
		<input type="checkbox" name="hobby" value="baseball">야구
		<input type="checkbox" name="hobby" value="soccer">축구
		<input type="checkbox" name="hobby" value="basketball">농구
<input type="submit" value="전송">
</form>
</body>
</html>

- EL5FormOK.jsp

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
<%request.setCharacterEncoding("UTF-8"); %>

이름 : <%=request.getParameter("name") %><br>
성별 : <%=request.getParameter("gender") %><br>
취미 : 
<%
	String[] hobby = request.getParameterValues("hobby");
	for(int i=0;i<hobby.length;i++)
	{
		out.print(hobby[i] + " ");
	}
%>

<hr>
이름 : ${param.name }<br>
성별 : ${param.gender }<br>
취미 : ${paramValues["hobby"][0] }
${paramValues["hobby"][1] }
${paramValues["hobby"][2] }
${paramValues["hobby"][3] }<br>

</body>
</html>

- MemverInfo.java

package com.superman.www;

public class MemberInfo {

		private String name;
		private String id;
		private String pw;
		
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}
		public String getId() {
			return id;
		}
		public void setId(String id) {
			this.id = id;
		}
		public String getPw() {
			return pw;
		}
		public void setPw(String pw) {
			this.pw = pw;
		}
}

 

# JSTL(JSP Standard Tag Library) - JSP 확장 태그

   JSTLJSP의 기본 태그가 아니므로 사용하려면

   JSTL API 및 이를 구현한 자바 라이브러리를 별도로 내려받아야 한다.

 

   JSTL 태그를 이용하면 JSP 페이지에서 자바 코딩을 줄일 수 있다.

   이를 통해 웹 디자이너나 웹 퍼블리셔의 공동 작업을 원할하게 진행할 수 있다.

 

# JSTL 주요 태그의 사용법

- 사용할 태그 라이브러리를 선언

  자바에서는 java.lang 패키지에 소속된 클래스인 경우 별도의 선언 없이 사용한다.

  그러나 그 외 패키지에 소속된 클래스를 사용할 때는 import 문을 선언해야 한다.

 

  JSP에서도 <jsp:useBean> 태그와 같이 기본으로 제공되는 태그는 별도의 선언 없이 사용하지만

  JSTL 확장 태그를 사용하려면 그 태그의 라이브러리를 선언해야 한다.

  다음은 태그 라이브러리를 선언하는 문법이다.

<%@ taglib uri="사용할 태그의 라이브러리 URI" prefix="접두사" %>

① <%@ taglib %> : JSP의 지시자 태그

② uri 속성 :  태그 라이브러리의 네임스페이스 이름 (네임스페이스 이름은 URI로 되어 있음)

③ prefix 속성 : JSTL 태그를 사용할 때 태그 이름 앞에 붙일 접두사

 

JSTL 기본(core) 태그 사용 시 taglib 지시자 선언

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

 

① <c:out> 태그 : 출력문 만드는 태그

<c:out value="출력할 값" default="기본값"/>
또는
<c:out value="출력할 값">기본값</c:out>

 

value 속성 값으로 EL 표현식을 사용할 수 있다.

value 값이 null 이면, 기본값이 출력된다.

기본값마저 없다면 빈 문자열이 출력된다.

 

ex)

<c:out value="안녕하세요!"/><br/>
<c:out value="${null}">반갑습니다.</c:out><br/>
<c:out value="안녕하세요!">반갑습니다.</c:out><br/>
<c:out value="${null}" default="디폴트 값"/><br/>
<c:out value="${null}"/><br/>
실행결과
안녕하세요!
반갑습니다.
안녕하세요!
디폴트 값

② <c:set> 태그 : 변수 생성 혹은 기존 변수의 값을 덮어쓸 때 사용

    이 태그로 생성한 변수는 JSP 페이지의 로컬 변수가 아니라

    보관소(JspContext, ServletRequest, HttpSession, ServletContext)에 저장된다.

 

// value 속성을 사용하여 값 설정

<c:set var="변수명" value="값" scope="page|request|session|application"/>

// 태그 콘텐츠를 사용하여 값 설정

<c:set var="변수명" scope="page|request|session|application">값</c:set>

scope 속성의 기본값은 page이다.

scope를 생략하면 JspContext(page)에 변수명으로 값이 저장된다.

 

ex)

<h3>값 설정 방식</h3>
<c:set var="username1" value="홍길동"/>
<c:set var="username2">임꺽정</c:set>
1 ${username1}<br/>
2 ${username2}<br/>


<h3>기본 보관소 - page</h3>
3 ${pageScope.username1}<br/>
4 ${requestScope.username2}<br/>

<h3>보관소 지정 - scope 속성</h3>
<c:set var="username3" scope="request">일지매</c:set>
5 ${pageScope.username3}<br/>
6 ${requestScope.username3}<br/>

<h3>기존의 값 덮어씀</h3>
<% pageContext.setAttribute("username4", "똘이장군"); %>
7 기존 값=${username4}<br>
<c:set var="username4" value="주먹대장"/>
8 덮어쓴 값 = ${username4}<br/>
실행결과

값 설정 방식

1 홍길동

2 임꺽정

기본 보관소 - page

 

3 홍길동

4

보관소 지정 - scope 속성

 

5

6 일지매

기존의 값 덮어씀

 

7 기존 값=똘이장군

8 덮어쓴 값 = 주먹대장

 

// <c:set>태그를 이용한 객체의 프로퍼티 값 설정

<h3>객체의 프로퍼티 값 변경</h3>
<%!
public static class MyMember{
  int no;
  String name;

  public int getNo(){
  return no;
  }

  public void setNo(int no){
  this.no = no;
  }

  public String getName(){
  return name;
  }

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

<%
MyMember member = new MyMember();
member.setNo(100);
member.setName("홍길동");
pageContext.setAttribute("member", member);
%>

${member.name}<br/>
<c:set target="${member}" property="name" value="임꺽정"/> // target - 참조변수, property - 멤버변수명
${member.name}<br/>
실행 결과

객체의 프로퍼티 값 변경

홍길동

임꺽정

 

예제 코드를 보면 'MyMember'라는 내장 클래스(Inner Class)를 새로 생성하였다.

<c:set>을 사용하여 객체의 프로퍼티 값을 설정할 때는 셋터 메서드의 리턴 타입이 void이어야 한다.

MyMember 클래스처럼 셋터 메서드의 리턴 타입이 void가 아니라면,

"프로퍼티"에 해당하는 셋터 메서드를 찾을 수 없다."라는 예외가 발생한다.

 

③ <c:remove> 태그 : var 속성에 이름을 지정하면, 보관소에서 해당 이름을 가진 값 제거

    물론 scope 속성으로 보관소를 명시할 수 있다.

 

// value 속성을 사용하여 값 설정

<c:remove var="변수명" scope="page|request|session|application"/>

ex)

<h3>보관소에 저장된 값 제거</h3>
<% pageContext.setAttribute("username1", "홍길동"); %>
${username1}<br/>
<c:remove var="username1"/>
${username1}<br/>
실행결과

보관소에 저장된 값 제거
홍길동

 

④ <c:if>태그 : 이 태그의 test 속성값이 참이면, 콘텐츠가 실행된다.

참거짓 테스트 결과를 보관소에 저장할 수도 있다.

<c:if test="조건" var="변수명" scope="page|request|session|application">

콘텐츠

</c:if>

 

ex)

<c:if test="${10 > 20 }" var = "result1"> // test - 조건문, var - 조건의 결과(참, 거짓)
10은 20보다 크다. <br/>
</c:if>
${result1}<br/> 

<c:if test="${10 < 20 }" var = "result2">
10은 20보다 크다.<br/>
</c:if>
${result2}<br/>
실행결과

false
// 출력안됨
10 20보다 크다.
true

 

⑤ <c:choose> 태그 : 자바의 switch, case.. 등과 같은 기능을 수행한다.

즉, 여러 가지 조건에 따라 다른 작업을 해야 할 필요가 있을 때 이 태그를 사용한다.

 

<c:choose>
<c:when test="참거짓 값"></c:when> // 참이면 when 사이의 내용을 실행한다. else if와 유사
<c:when test="참거짓 값"></c:when>
...
<c:otherwise></otherwise> // else와 같은 역할
</c:choose>

<c:when> 태그는 한 개 이상 있어야 한다. <c:other> 태그는 0 또는 한 개가 올 수 있다.

 

ex)

<c:set var="userid" value="admin" /> 
<c:choose>
<c:when test="${userid == 'hong'}">
홍길동님 반갑습니다.
</c:when>
<c:when test="${userid == 'leem'}">
임꺽정님 반갑습니다.
</c:when>
<c:when test="${userid == 'admin'}">
관리자 전용 페이지입니다.
</c:when>
<c:otherwise>
등록되지 않은 사용자입니다.
</c:otherwise>
</c:choose>
실행결과

관리자 전용 페이지입니다.

 

⑥ <c:forEach> 태그 // for문과 거의 흡사

반복적인 작업을 정의할 때 사용한다.

목록에서 값을 꺼내어 처리하고 싶을 때 이 태그를 사용하면 된다.

<c:forEach var="변수명" items="목록데이터" begin="시작인덱스" end="종료인덱스">

콘텐츠 

</c:forEach>

item 속성 값으로 올 수 있는 값들
배열
java.util.Collection 구현체. ) ArrayList, LinkedList, Vector, EnumSet 
java.util.Enumeration 구현체
java.util.Map 구현체
콤마(,) 구분자로 나열된 문자열. ) 홍길동, 임꺽정, 일지매

 

var 속성은 반복문을 돌면서 items에서 꺼낸 항목 값을 가리키는 참조 변수이다.

beginend 속성은 items를 반복할 때 몇 번째 인덱스에서 시작하고, 몇 번째 인덱스에서 종료할 것인지를 지정한다.

 

ex) 배열을 반복할 경우

<% pageContext.setAttribute("nameList", new String[] {"홍길동", "임꺽정", "일지매"}); %>
<ul>
<c:forEach var="name" items="${nameList}">
<li>${name}</li>
</c:forEach>
</ul>
실행결과

홍길동
임꺽정
일지매

 

ex) 반복 대상에 대해 시작 인덱스와 종료 인덱스를 지정하는 경우

<% pageContext.setAttribute("nameList", new String[] {"홍길동", "임꺽정", "일지매", "주먹대장", "똘이장군"}); %>
<ul>
<c:forEach var="name" items="${nameList}" begin="2" end="3">
<li>${name}</li>
</c:forEach>
</ul>
실행결과

일지매
주먹대장

ex) ArrayList 객체에 대해 반복문을 적용한 예

<%
ArrayList<String> nameList3 = new ArrayList<String>();
nameList3.add("홍길동");
nameList3.add("임꺽정");
nameList3.add("일지매");
nameList3.add("주먹대장");
nameList3.add("똘이장군");
pageContext.setAttribute("nameList3", nameList3);
%>
<ul>
<c:forEach var="name" items="${nameList3}"> // 활용예시 : ${dto.name}
<li>${name}</li>
</c:forEach>
</ul>
실행결과

홍길동
임꺽정
일지매
주먹대장
똘이장군

ex) 콤마(,)로 구분된 문자열도 반복문 적용 가능

<% pageContext.setAttribute("nameList4", "홍길동, 임꺽정, 일지매, 주먹대장, 똘이장군"); %>
<ul>
<c:forEach var="name" items="${nameList4}">
<li>${name}</li>
</c:forEach>
</ul>
실행결과

홍길동
임꺽정
일지매
주먹대장
똘이장군

ex) 배열이나 List 없이 임의적으로 특정 횟수만큼 반복문을 돌리고 싶을 때

<ul>
<c:forEach var="no" begin="1" end="6">
<li><a href="jstl0${no}.jsp">JSTL 예제 ${no}</a></li>
</c:forEach>
</ul>
실행결과

JSTL 예제 1
JSTL 예제 2
JSTL 예제 3
JSTL 예제 4
JSTL 예제 5
JSTL 예제 6

 

ex) 증가 단계 지정

<c:forEach var="i" begin="0" end="3" step="2"> // step - 증가값 = i+=2
<p><c:out value="${i}" /></p>
</c:forEach>
실행결과

0
2

0부터 2씩 증가하면서 출력합니다.

step는 음수를 사용할 수 없다.

 

⑦ <c:forTokens>태그 // tokernizer : 분리 하는 것

    이 태그를 사용하면 문자열을 특정 구분자(delimiter)로 분리하여 반복문을 돌릴 수 있다.

ex)

<% pageContext.setAttribute("tokens", "v1=20&v2=30&op=+"); %>
<ul>
<c:forTokens var="item" items="${tokens}" delims="&"> // delims - 구분자
<li>${item}</li>
</c:forTokens>
</ul>
실행결과

v1=20
v2=30
op=+

 

⑧ <c:url> 태그 : URL을 만들 때 사용하는 태그

    이 태그를 사용하면 매개변수를 포함한 URL을 손쉽게 만들 수 있다.

ex)

<c:url var="calcUrl" value="http://localhost:8080/calc">
<c:param name="v1" value="20"/>
<c:param name="v2" value="30"/>
<c:param name="op" value="+"/>
</c:url>
<a href="${calcUrl}">계산하기</a>
실행결과

http://localhost:8080/calc?v1=20&v2=30&op=+ // get 방식

 

⑨ <c:redirect> 태그 : 이 태그를 사용하여 리다이렉트를 처리할 수 있다.

    즉, 내부적으로 HttpServletResponsesendRedirect()를 호출한다.

ex) <c:redirect url="coderbear.tistory.com">

 

ex)

- JSTLTest15.jsp

<%@page import="java.util.HashMap"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- Map 선언 -->
<c:set var="mapTest" value="<%=new HashMap<String, String>()%>" /> //HashMap = 빠른 검색

<!-- Map 에 값 넣기 -->
<c:set target="${mapTest}" property="key1" value="value1" />
<c:set target="${mapTest}" property="key2" value="value2" />

${mapTest.key1}<!-- value1이 출력됨 -->
${mapTest.key2}<!-- value2이 출력됨 -->
<c:forEach var="mapTest" items="${mapTest}">
${mapTest.key}<!--  key1, key2 ... 이 출력됨 -->
${mapTest.value}<!--  value1, value2 ... 이 출력됨 -->
</c:forEach>
</body>
</html>

 

# JSP 페이지에서 자바코드를 제거하는 것이 중요한 이유

EL과 더블어 JSTL을 사용하면 JSP 페이지에서 자바 코드를 완전히 제거할 수 있는데 

이는 아래와 같은 이유로 중요하다.

 
첫째, JSP 페이지에서 자바 코드가 있으면 웹 디자이너와 웹 퍼블리셔와 함께 작업하기 어렵다. 

그들은 자바를 잘 모르기 때문에, 자바 코드가 덕지덕지 붙어 있는 JSP 페이지를 만지려 하지 않을 것이다.

결국, 자바 개발자들의 일만 늘어난다.

UI 작업에 그들을 깊숙이 끌어들이고 싶지 않다면 JSP 페이지에 자바 코드를 넣지 말 것

둘째, JSP 페이지에 자바 코드를 넣지 않으면, 자연스럽게 JSP 페이지에 비즈니스 로직을 작성하지 않게 된다. 

MVC 아키텍처의 핵심은 비즈니스 로직은 모델 객체에게, 화면은 JSP에게 맡기는 것이다. 

 

그런데 간혹 개발자들이 작성한 JSP 소스를 보다 보면, 

컨트롤러나 모델 객체에 있어야 할 로직이 JSP에 있는 경우가 있다. 

 

이런 경우를 의식적으로 막기 위해서라도 JSP 페이지에 자바 코드를 넣지 않는 것이 좋다. 

JSP 페이지에 자바 코드를 넣을 수 없다면, 개발자들은 어쩔 수 없이 컨트롤러나 모델에 로직을 작성할 수 밖에 없다.

 

ex) el과 jstl 활용 예시

- list.jsp

<%@page import="com.superman.ex.dto.BoardDTO"%>
<%@page import="java.util.ArrayList"%>
<%@ 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 lang="ko-kr">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록</title>
</head>
<body>

<table border="1">
	<tr>
		<td>번호</td><td>이름</td><td>제목</td><td>날짜</td><td>조회수</td>
	</tr>
	<c:forEach var="dto" items="${list}" >
		<tr>
			<td>${dto.num}</td>
			<td>${dto.name}</td>
			<td>
				<c:forEach var="i" begin="1" end="${dto.indentNum}" step="1">
					<c:out value="-" />
				</c:forEach>

				<a href="view.do?num=${dto.num}">${dto.title}</a>
			</td>
			<td>${dto.wtime}</td>
			<td>${dto.hit}</td>
		</tr>	
	</c:forEach>
	<tr>
		<td colspan="5"><a href="write.do">글작성</a></td>
	</tr>
</table>
</body>
</html>

- write.jsp

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

<!DOCTYPE html>
<html lang="ko-kr">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
	<form method="post" action="writeOK.do">
		<table border="1">
			<tr>
				<td>이름</td><td><input type="text" name="name" /></td>
			</tr>
			<tr>
				<td>제목</td><td><input type="text" name="title" /></td>
			</tr>
			<tr>
				<td>내용</td><td><textarea name="contents" cols="100" rows="15"></textarea></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="입력"> <a href="list.do">목록</a></td>
			</tr>
		</table>
	</form>
</body>
</html>

- view.jsp

<%@page import="com.superman.ex.dto.BoardDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="ko-kr">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
	<form method="post" action="modifyOK.do">
		<table border="1">
			<tr>
				<td>번호</td><td>${dto.num}</td>
			</tr>
			<tr>
				<td>조회수</td><td>${dto.hit}</td>
			</tr>
			<tr>
				<td>이름</td><td><input type="text" name="name" value="${dto.name}"/></td>
			</tr>
			<tr>
				<td>제목</td><td><input type="text" name="title" value="${dto.title}"/></td>
			</tr>
			<tr>
				<td>내용</td><td><textarea name="contents" cols="100" rows="15">${dto.contents}</textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="hidden" name="num" value="${dto.num}">
					<input type="submit" value="수정"> 
					<a href="list.do">목록</a>
					<a href="delete.do?num=${dto.num}">삭제</a>
					<a href="reply.do?num=${dto.num}">답변</a>
				</td>
			</tr>
		</table>		
	</form>
</body>
</html>

- reply.jsp

<%@page import="com.superman.ex.dto.BoardDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="ko-kr">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Study">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Bruce">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
</head>
<body>
	<form method="post" action="replyOK.do">
		<table border="1">
			<tr>
				<td>번호</td><td>${dto.num}</td>
			</tr>
			<tr>
				<td>조회수</td><td>${dto.hit}</td>
			</tr>
			<tr>
				<td>이름</td><td><input type="text" name="name" autofocus/></td>
			</tr>
			<tr>
				<td>제목</td><td><input type="text" name="title" value="re: ${dto.title}"/></td>
			</tr>
			<tr>
				<td>내용</td><td><textarea name="contents" cols="100" rows="15">&#10&#13re: ${dto.contents}</textarea></td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="답변"> 
					<a href="list.do">목록</a>
				</td>
			</tr>
		</table>
		<input type="hidden" name="num" value="${dto.num}" />
		<input type="hidden" name="groupNum" value="${dto.groupNum}" />
		<input type="hidden" name="stepNum" value="${dto.stepNum}" />
		<input type="hidden" name="indentNum" value="${dto.indentNum}" />
	</form>
	
	<!-- 
	&#10;     Line feed 
	&#13;     Carriage Return
	
	Line Feed (LF)

	아스키 코드: 16진수로 0A
	기능: 커서를 현재 행의 다음 행으로, 즉 아래로 내리기

	Carriage Return (CR)

	아스키 코드: 16진수로 0D
	기능: 커서를 현재 행의 맨 좌측으로 옮기기
-->
</body>
</html>
728x90