[JSP] JSTL

sang·2024년 3월 23일

No tags

[Spring] 2024 자바웹을다루는기술_book (con.)

목록 보기

19/30

커스텀 태그

자바 코드를 대체하기 위해 만들어진 태그

JSTL
기타 커스텀 태그: 스트러츠, 스프링 프레임워크에서 제공

JSTL

JSP 표준 태그 라이브러리
JSP Standard Tag Library

JSP 페이지에서 많이 사용하는 기능 제공
JSTL 라이브러리 설치 후 사용

JSTL 태그 종류

c (core): 변수, 흐름 제어, 반복문, URL
fmt (국제화): 지역, 형식
x (XML): XML, 흐름 제어
sql
fn (function): 컬렉션, 문자열

Core Tag Library

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
사용 시 선언 필요

표현 언어로 접근 가능

종류

<c:set>: 변수 지정
<c:remove>: 변수 제거

<c:if>: 조건문
<c:choose>: switch문
<c:when>
c:otherwise
<c:forEach>: 반복문
<c:forTokens>: 구분자로 분리된 토큰 처리

<c:import>
<c:redirect>: reponse, sendredirect
<c:url>: 요청 매개변수 URL

<c:catch>: 예외 처리
<c:out>: JspWriter 내용 출력 및 처리

변수

변수 설정: <c:set var="변수 이름" value="변수값" [scope="(scope)"] />
변수 제거: <c:remove var="변수이름" [scope="(scope)"] />

pro14/WebContent/test03/member.jsp

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

<%-- core 태그 라이브러리 사용 선언 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%  request.setCharacterEncoding("UTF-8"); %>

<%-- core 변수 선언 및 초기화 --%>
<c:set var="id" value="hong" scope="page" />
<c:set var="pwd" value="1234" scope="page" />
<c:set var="name" value="${'홍길동'}" scope="page" />
<c:set var=" age" value="${22}" scope="page" />
<c:set var="height" value="${177}" scope="page" />
<%-- core 변수 삭제 --%>
<c:remove var="age" />
<c:remove var="height" />

<%-- core 링크 변수 --%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<%-- core 컬렉션 변수 --%>
<jsp:useBean id="membersList" class="java.util.ArrayList" />
<jsp:useBean id="membersMap" class="java.util.HashMap" />
<%
  membersMap.put("id", "park2"); //map(1)
  membersMap.put("pwd", "4321"); //map(2)
  membersMap.put("name", "박지성"); //map(3)
  
  membersMap.put("email", "park2@test.com");
  MemberBean m1 = new MemberBean("son", "1234", "손흥민", ”son@test.com”);
  MemberBean m2 = new MemberBean("ki", "4321", "기성용", "ki@test.com");
  membersList.add(m1);
  membersList.add(m2);
  membersMap.put("membersList", membersList); //map(4)
%>
<c:set var="membersList" value="${membersMap.membersList}" />

<head>
  <meta charset="UTF-8">
  <title>회원 정보 출력창</title>
</head>
<html>
<body>
  <table align="center" border=1 >
    <tr align="center" bgcolor="lightgreen" >
      <td width="7%"><b>아이디</b></td>
      <td width="7%"><b>비밀번호</b></td>
      <td width="7%"><b>이름</b></td>
      <td width="7%"><b>나이</b></td>
      <td width="7%"><b>키</b></td>
    </tr>
    <tr align="center">
      <!-- 표현 언어로 core 변수 접근 및 출력 -->
      <td>${id}</td>
      <td>${pwd}</td>
      <td>${name}</td>
      <td>${age}</td> <!-- 삭제된 변수, 출력값 없음 -->
      <td>${height}</td> <!-- 삭제된 변수, 출력값 없음 -->
    </tr>
    
    <!-- core 컬렉션 변수 접근 및 출력 -->
    <tr align="center">
      <td>${membersList[0].id}</td>
      <td>${membersList[0].pwd}</td>
      <td>${membersList[0].name}</td>
      <td>${membersList[0].email}</td>
    </tr>
    <tr align="center">
      <td>${membersList[1].id}</td>
      <td>${membersList[1].pwd}</td>
      <td>${membersList[1].name}</td>
      <td>${membersList[1].email}</td>
    </tr>
  </table>
  
  <!-- core 링크 변수 접근 및 출력 -->
  <!-- core 태그 적용 전 -->
  <a href="${pageContext.request.contextPath}/memberForm.jsp">새 계정 추가</a>
  <!-- core 태그 적용 후 -->
  <a href="${contextPath}/test03/memberForm.jsp">새 계정 추가</a>
</body>
</html>

흐름 제어

조건문

pro14/WebContent/test03/member.jsp

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

<c:set var="id" value="hong" scope="page" />
<c:set var="pwd" value="1234" scope="page" />
<c:set var="name" value="${'홍길동'}" scope="page" />
<c:set var="age" value="${22}" scope="page" />
<c:set var="height" value="${177}" scope="page" />

<html>
<head>
  <meta charset="UTF-8">
  <title>조건문 실습</title>
</head>
<body>
  <!-- 조건문 if -->
  <c:if test="${true}"> <h1>항상 참</h1> </c:if>
  <c:if test="${(id=='hong') && (height>160)}"> <h1>아이디: ${id}, 키: 160 이상</h1> </c:if>

  <!-- 다중 조건문 switch -->
  <c:choose>
    <c:when test="${empty name}"> <h1>이름을 입력하세요</h1> </c:when> <!-- case 1 -->
    <c:when test="${id=='홍'}"> <h1>영문으로 입력해주세요</h1> </c:when> <!-- case 2 -->
    <c:otherwise> <h1>입력 완료</h1> </c:otherwise> <!-- default -->
  </c:choose>

</body>
</html>

반복문

<c:forEach var="변수이름" items="반복객체이름" begin="시작값" end="마지막값" step="증가값 (varStatus="반복상태변수이름") >
</c:forEach>

varStatus 속성
- index
- count: 반복한 횟수
- first: 현재 첫번째인지 여부 (boolean)
- last: 현재 마지막인지 여부 (boolean)

pro14/WebContent/test03/member.jsp

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

<%
  List dataList=new ArrayList();
  dataList.add("hello");
  dataList.add("world");
  dataList.add("안녕하세요!!");
%>
<c:set var="list" value="<%=dataList %>" />
  
<%
  List membersList = new ArrayList();
  MemberBean m1 = new MemberBean("son","1234", "손흥민", "son@test.com");
  MemberBean m2 = new MemberBean("ki","4321", "기성용", "ki@test.com");
  MemberBean m3 = new MemberBean("park", "1212", "박지성", "park@test.com");
  membersList.add(m1);
  membersList.add(m2);
  membersList.add(m3);
%>
<c:set var="membersList" value="<%= membersList%>" />

<html>
  <head>
  <meta charset="UTF-8">
  <title>반복문 실습</title>
</head>
<body>
  <c:forEach var="i" begin="1" end="10" step="2" varStatus="loop">
    i= ${i} &nbsp; 반복횟수: ${loop.count} <br>
  </c:forEach>

  <c:set var="fruits" value="사과, 파인애플, 바나나, 망고, 귤" />
  <c:forTokens var="token" items="${fruits}" delims="," >
    ${token}
  </c:forTokens>

  <c:forEach var="data" items="${list}" >
    ${data}
  </c:forEach>

  <c:forEach var="i" begin="0" end="2" step="1" >
    ${membersList[i].id}
    ${membersList[i].pwd}
    ${membersList[i].name}
    ${membersList[i].email}
  </c:forEach>

  <c:forEach var="member" items="${membersList}" >
    ${membersList[i].id}
    ${membersList[i].pwd}
    ${membersList[i].name}
    ${membersList[i].email}
  </c:forEach>
</body>
</html>

*" ": 공백 문자

URL, redirect, 출력

URL core 태그

<c:url var="변수이름" value="URL경로" [scope="scope 속성 중 하나"]
[ <c:param name="매개변수이름" value="전달값" /> ]
</c:url>

페이지 이동 시 전달할 데이터가 많은 경우 사용

redirect core 태그

<c:redirect url="redirect할 URL">
[ <c:param name="매개변수이름" value="전달값" /> ]
</c:redirect>

출력 core 태그

<c:out value="출력값" default="기본값" [escapeXml="boolean값"] />

pro14/WebContent/test03/member.jsp

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

<%-- url core 태그 이동할 페이지 설정 --%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />

<%-- url core 태그 전달할 데이터 설정 --%>
<c:url var="url1" value="/test01/member1.jsp" >
  <c:param name="id" value="hong" />
  <c:param name="pwd" value="1234" />
  <c:param name="name" value="홍길동" />
  <c:param name="email" value="hong@test.com" />
</c:url>

<html>
<head>
  <meta charset="UTF-8">
  <title> 기타 core 태그 실습 </title>
</head>
<body>
  <!-- url core 태그 적용 전 -->
  <a href='${contextPath}/test01/member.jsp'>회원정보출력</a>
  <!-- url core 태그 적용 후 -->
  <a href='${url1}'>회원정보출력</a>
  
  <!-- redirect core 태그 -->
  <c:redirect url="/test01/member.jsp" >
    <c:param name="id" value="${'hong'}" />
    <c:param name="pwd" value="${'1234'}" />
    <c:param name="name" value="${'홍길동'}" />
    <c:param name="email" value="${'hong@test.com'}" />
  </c:redirect>
  
  <!-- 출력 core 태그 -->
  <c:out value="&amp;" escapeXml="true" /> <!-- "&amp" 출력 -->
  <c:out value="&amp;" escapeXml="false" /> <!-- 특수문자 '&' 출력 -->
</body>
</html>

특수 문자
- <: <
- >: >
- &: &
- ': '
- ": "

fmt Tag Library

다국어

<fmt:setLocale>: Locale(언어) 지정
<fmt:message>: 지정 언어 표시
<fmt:setBundle>: 번들 지정
<fmt:setParam>: 매개변수 지정
<fmt:requestEncoding>: 문자 인코딩 지정

pro14/java/src/resource/member_ko.properties

mem.name = (아스키코드로 된 한글 이름)
mem.address = (아스키코드로 된 한글 주소)
mem.job = (아스키코드로 된 한글 직업)

pro14/WebContent/test05/message1.jsp

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

<html>
<head>
<meta charset="UTF-8">
<title>JSTL 다국어 기능</title>
</head>
<body>
  <fmt:setLocale value="en_US" />
  <fmt:setLocale value="ko_KR" />
  
  <h1> 회원정보<br><br>
    <fmt:bundle basename="resource.member" >
      이름:<fmt:message key="mem.name" /><br>
      주소:<fmt:message key="mem.address" /><br>
      직업:<fmt:message key="mem.job" />
    </fmt:bundle>
  </h1>
</body>
</html>

formating

<fmt:timeZone>: 태그 안에 적용할 국가 시간 지정
<fmt:setTimeZone>: 전체 적용할 국가 시간 지정
<fmt:formatNumber>: 지정 형식 숫자
<fmt:formatDate>: 지정 형식 날짜

pro14/WebContent/test05/formatTest.jsp

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

<html>
<head>
<meta charset="UTF-8">
<title>JSTL 포메팅 기능</title>
</head>
<body>
  <!-- 숫자 형식 -->
  <c:set var="price" value="100000000" />
  <fmt:formatNumber value="${price}" type="number" var="priceNumber" />
  통화로 표현 시 : <fmt:formatNumber type="currency" currencySymbol="￦" value="${price}" groupingUsed="true" /><br>
  퍼센트로 표현 시 : <fmt:formatNumber value="${price}" type="percent" groupingUsed="false" /><br>
  일반 숫자로 표현 시 : ${priceNumber}<br>
  
  <!-- 날짜 형식 -->
  <c:set var="now" value="<%=new Date() %>" />
  <fmt:formatDate value="${now }" type="date" dateStyle="full" /><br>
  <fmt:formatDate value="${now }" type="date" dateStyle="short" /><br>
  <fmt:formatDate value="${now }" type="time" /><br>
  <fmt:formatDate value="${now }" type="both" dateStyle="full" timeStyle="full" /><br>
  <fmt:formatDate value="${now }" pattern="YYYY-MM-dd :hh:mm:ss" /><br>
  
  <!-- 국가 시간 -->
  한국 현재 시간: <fmt:formatDate value="${now }" type="both" dateStyle="full" timeStyle="full" />
  <fmt:timeZone value="America/New York">
    뉴욕 현재 시간: <fmt:formatDate value="${now }" type="both" dateStyle="full" timeStyle="full" /><br>
  </fmt:timeZone>
</body>
</html>

fn Tag Library

문자열 처리 함수

boolean fn:contains(A,B): A에 B 포함 여부
boolean fn:endWith(A, B): A가 B로 끝나는지 여부
int fn:indexOf(A, B): A 안에서 B가 있는 첫 인덱스
int fn:length(A): A 길이
String fn:replace(A, B, C): A 안에서 B까지 잘라서 C에 반환?
String fn:toLowerCase(A): 소문자 변환
String fn:toUpperCase(A): 대문자 변환
String fn:substring(A, i, j): A 안에서 i~j앞까지 반환?
String[ ] fn:split(A, B): A를 구분자 B로 나눈 배열 반환
String fn:trim(A): 앞뒤 공백 제거

pro14/WebContent/test05/fnTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%  request.setCharacterEncoding("UTF-8"); %>

<html>
<head>
<meta charset="UTF-8">
<title>JSTL 문자열 처리 기능</title>
</head>

<body>
  <c:set var="title" value="hello world!" />

  fn:substring(title,3,6)=${fn:substring(title,3,6)}<br>
  fn:trim(title)=${fn:trim(title)}<br>
  fn:replace(title, " ","/")=${fn:replace(title," ","/")}<br><br>
</body>
</html>

JSTL 회원관리

pro14/WebContent/test06/memberForm.jsp

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>회원 가입창</title>
</head>
<body>
  <form method="post" action="member_action.jsp">
    <h1 style="text-align:center">회원 가입창</h1>
    <table align="center">
      <tr>
        <td width="200"> <p align="right">아이디 </td>
        <td width="400"><input type="text" name="id"></td>
      </tr>
      <tr>
        <td width="200"> <p align="right">비밀번호 </td>
        <td width="400"><input type="password" name="pwd"></td>
      </tr>
    </table>
  </form>
</body>
</html>

pro14/WebContent/test06/member_action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" import=" java.util.*,sec02.ex01.*" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%  request.setCharacterEncoding("UTF-8"); %>

<html>
<head>
<meta charset="UTF-8">
<jsp:useBean id="m" class="sec02.ex01.MemberBean" />
<jsp:setProperty name="m" property="*" />

<% /* 회원정보 추가, 회원목록 갱신, 회원목록 포워딩 */
  MemberDAO memDAO = new MemberDAO();
  memDAO.addMember(m);
  List membersList = memDAO.listMembers();
  request.setAttribute("membersList", membersList);
%>
</head>
<body>
<jsp:forward page="membersList.jsp" />
</body>
</html>

pro14/WebContent/test06/memberList.jsp

...
<body>
  <table align="center" border="1">
    <tr align="center" bgcolor="lightgreeen">
      <td width="7%"><b>아이디</b></td>
      <td width="7%"><b>비밀번호</b></td>
      <td width="7%"><b>이름</b></td>
      <td width="7%"><b>이메일</b></td>
      <td width="7%"><b>가입일</b></td>
    </tr>
    
    <c:choose>
      <c:when test="${ membersList == null}"> <%-- ArrayList list = request.getAttribute("membersList"); --%>
        <tr>
          <td colspan=5> <b>등록된 회원이 없습니다.</b> </td>
        </tr>
      </c:when>
      <c:when test="${membersList != null}">
        <c:forEach var="mem" items="${membersList }"> <%-- membersList 순회 --%>
          <tr align="center">
            <td>${mem.id }</td>
            <td>${mem.pwd}</td>
            <td>${mem.name}</td>
            <td>${mem.email}</td>
            <td>${mem.joinDate}</td>
          </tr>
        </c:forEach>
      </c:when>
    </c:choose>
    
  </table>
</body>

*자바 웹을 다루는 기술

sang

CS 메모장

이전 포스트

[JSP] EL 표현 언어

다음 포스트

[JSP] JSTL

[Spring] 2024 자바웹을다루는기술_book (con.)

커스텀 태그

JSTL

JSTL 태그 종류

Core Tag Library

종류

변수

흐름 제어

조건문

반복문

URL, redirect, 출력

URL core 태그

redirect core 태그

출력 core 태그

fmt Tag Library

다국어

formating

fn Tag Library

문자열 처리 함수

JSTL 회원관리

[JSP] EL 표현 언어

[jQuery] jQuery Ajax XML / JSON

0개의 댓글