땅콩이 맛난고 먹이자

[부스트코스]{2. DB 연결 웹 앱}(6. JSTL & EL - BE)_JSTL 본문

edwith_부스트코스_웹 프로그래밍

[부스트코스]{2. DB 연결 웹 앱}(6. JSTL & EL - BE)_JSTL

pea_Nut 2020. 3. 1. 16:33

JSTL

=> http://tomcat.apache.org/download-taglibs.cgi

 

Apache Tomcat® - Apache Taglibs Downloads

Welcome to the Apache Taglibs download page. This page provides download links for obtaining the latest version of the Apache Standard Taglib, as well as links to the archives of older releases. You must verify the integrity of the downloaded files. We pro

tomcat.apache.org

위의 사이트에서 3가지 jar파일을 다운로드한 후 WEB-INF/lib/ 폴더에 복사를 한다.

 

 

 

 

 

 

#JSTL이 제공하는 태그의 종류

 

 

 

 

 

#코어 태그

 

 

 

 

 

 

 

#코어 태그: 변수 지원 태그 - set, remove

 

 

 

 

 

 

#set, remove의 활용 실습

=>라이브러리 추가 후 jsp에 라이브러리를 선언해서 사용할 것을 알려줘야 한다.

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

'uri에서 지정한 태그들을 쓸 거야'라는 의미이다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<c:set var="value1" scope="request" value="kang"/>

<!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>

성 : ${value1} <br>

<c:remove var="value1" scope="request"/>

성 : ${value1 }
</body>
</html>

 

코드 설명

set tag

<c:set var="value1" scope="request" value="kang"/>

remove tag

<c:remove var="value1" scope="request"/>

 

출력 화면

 

 

#코어태그: 변수 지원 태그 - 프로퍼티, 맵의 처리

 

 

 

 

 

#코어 태그: 흐름 제어 태그 - if 

 

if만 있다. else는 따로 없다.

 

 

 

 

#if의 활용 실습

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%
request.setAttribute("n", 10);
%>

<!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>
<c:if test="${n == 0}">
n과 0은 같습니다.
</c:if>

<c:if test="${n == 10}">
n과 10은 같습니다.
</c:if>
</body>
</html>

 

코드 설명

request.setAttribute("n", 10);는 <c:set var="n" scope="request" value="10"/> 로 쓸 수 있다.

 

첫 번째 조건문

<c:if test="${n == 0}"> n과 0은 같습니다. </c:if>

두번째 조건문

<c:if test="${n == 10}"> n과 10은 같습니다. </c:if>

-->둘 중 true 인 경우만 값이 출력된다.

 

 

 

 

 

 

 

 

#코어 태그: 흐름 제어 태그 - choose 

 

if-else의 용도로 쓸 수 있다.

 

 

 

 

#switch의 활용 실습

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page import="java.util.*" %>
<%
    request.setAttribute("score", 83);
%>

<!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>
<c:choose>
    <c:when test="${score >=90 }">
    A학점입니다.
    </c:when>
    <c:when test="${score >=80 }">
    B학점입니다.
    </c:when>
    <c:when test="${score >=70 }">
    C학점입니다.
    </c:when>
    <c:when test="${score >=60 }">
    D학점입니다.
    </c:when>
    <c:otherwise>
    F학점입니다.
    </c:otherwise>            
</c:choose>
</body>
</html>

코드 설명

각 조건에 맞을 때 만 출력한다. 만족하는 조건이 없는 경우 otherwise 에 해당하는 결과가 출력된다.

 

 

 

 

 

 

#코어 태그: 흐름제어 태그 - forEach

배열 및 Collection에 저장된 요소를 차례대로 처리한다.

 

 

 

#forEach 실습

 

=>list를 사용할 것이기 때문에 라이브러리를 임포트 해야 한다.

<%@ page import="java.util.*" %>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page import="java.util.*" %>
<%
    List<String> list = new ArrayList<>();
    list.add("hello");
    list.add("world");
    list.add("!!!");
    request.setAttribute("list", list);
%>

<!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>
<c:forEach items="${list}" var="item">
${item } <br>
</c:forEach>
</body>
</html>

=> 'hello' 'world' '!!!' 가 들어있는 list에서 요소 하나씩 꺼내와 출력하는 코드이다. 이때 begin 과 end 를 이용하여 원하는  index를 출력할 수 있다.

 

 

 

 

 

 

#코어 태그: 흐름제어 태그 - import 

 

지정한 URL에 연결하여 결과를 지정한 변수에 저장한다.

 

 

 

 

#import 실습

 

1. 값을 받아올 페이지 코드를 작성한다.

jstlValue.jsp

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

 

2. import를 할 jsp파일을 작성한다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ page import="java.util.*" %>
<c:import url="http://localhost:8080/webapp/jstlValue.jsp" var="urlValue" scope="request"></c:import>

<!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>
읽어들인 값 : ${urlValue}
</body>
</html>

=> jstlValue.jsp 에서 받아온 값을 urlValue에다 저장한 후 출력한다.

=> URL을 이용하여 페이지 전체를 가져올 수 도 있고, 태그를 적절히 사용하여 특정 부분만 가져올 수도 있다.

 

 

 

 

 

 

 

#코어 태그: 흐름 제어 태그 - redirect

 

지정한 페이지로 리다이렉트 한다. response.sendRedirect()와 비슷

 

 

 

 

#redirect 실습

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<c:redirect url="jstlRedirectPage.jsp"></c:redirect>

=>jstlRedirectPage.jsp로 redirect 하는 코드이다.

 

 

jstlRedirectPage.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>
<h1> redirect된 화면입니다.</h1>
</body>
</html>

=>fredirect된 후 출력되는 화면이다. URL도 jstlRedirectPage.jsp로 바뀐다.

 

 

 

 

 

 

#코어 태그: 기타 태그 - out

 

JspWriter에 데이터를 출력한다.

 

 

 

 

#out 실습

 

<%@ 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 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>
<c:set var="t" value="<script type='text/javascript'>alert(1);</script>" />
${t}
<c:out value="${t}" escapeXml="true" />
<c:out value="${t}" escapeXml="false" />
</body>
</html>

 

코드 설명

<script type='text/javascript'>alert(1);</script> 는 자바 스크립트로 실행하면 alert창이 켜진다.

하지만 escapeXml="true"한 후에 실행하면 java코드가 java코드로써의 의미를 잃고 String 값으로써 출력된다.

다시 하지만 escapeXml="false"한 후 실행하면 태그로 인식한다.

 

 

 

 

 

 

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/16713/

 

[LECTURE] 2) JSTL(JSP Standard Tag Library) : edwith

들어가기 전에 프론트 개발자가 JSP를 수정하는데, JSP 안에 자바코드와 HTML코드가 섞여 있다면 수정할 때 굉장히 어려움을 느끼게 될 가능성이 큽니다. 이런 문제를 해결하기 ... - 부스트코스

www.edwith.org

 

 

 

 

 

 

'edwith_부스트코스_웹 프로그래밍' 카테고리의 다른 글

[부스트코스]{2. DB 연결 웹 앱}(8. SQL - BE)_1. SQL & DB 시작 & Table  (0) 2020.03.03
[부스트코스]{2. DB 연결 웹 앱}(7. MySQL - BE)_DB와 DBMS  (0) 2020.03.02
[부스트코스]{2. DB 연결 웹 앱}(6. JSTL & EL -BE)_EL  (0) 2020.03.01
[부스트코스]{2. DB 연결 웹 앱}(5. scope - BE)_SCOPE  (0) 2020.03.01
[부스트코스]{2. DB 연결 웹 앱}(4. redirect & forward - BE)_3. Servlet & JSP 연동  (0) 2020.02.29
'edwith_부스트코스_웹 프로그래밍' Related Articles more