백엔드 프로그래밍

백엔드 (5) - JSP, EL, JSTL, Core 태그

hyovvely 2022. 1. 1. 00:06

맥북은 왜 티스토리 사진 업로드만 하면 글이 안써지는가 진짜 불편하다 진짜 불편하다 진짜 불편하다 개발자들 일 좀 해라 제발 답답하다 참

JSP(2)

자바 빈 액션 태그 예제

빈 클래스 : StudentBean.java  (DTO/VO와 동일)
  패키지 생성 : sec01
  Getters / Setters
studentBean.jsp
  useBean 액션 태그
  setProperty 액션 태그
  getProperty 액션 태그
    Getter 사용한 것과 결과 동일

자바 빈 액션 태그 예제2

폼에서 입력한 값으로
setProperty 액션 태그를 사용해서 한꺼번에 값을 설정하는 예제
studentForm.jsp
newStudentOk.jsp

표현 언어 : EL (Expression Language)

JSP 발전 과정

초기 : HTML 태그를 중심으로 자바를 이용해서 화면 구현
JSP 구성 내용 : HTML + JSP 태그 + JAVA 코드
화면에 대한 요구 사항이 복잡해지면서 자바 코드를 대체하는 액션 태그 등장
복잡한 자바 코드를 제거하는 방향을 발전
- 복잡한 자바 코드로 인해 화면 작업 어려움
- 프론트엔드 개발자와 백엔드 개발자 분리
현재 JSP페이지는 JSP태그의 스크립트 요소보다 표현 언어와 JSTL을 사용
- 프론트엔드 개발 : HTML + EL + JSTL

EL (Expression Language)

표현 언어
자바 코드가 들어가 표현식을 좀 더 편리하게 사용하기 위해 JSP 2.0부터 도입된 데이터 출력 가능
표현식 또는 액션 태그 대신에 값을 표현
<%= 값 %> -> ${값} (이게 EL 표현이 된거!!!)
attribute 또는 parameter 등을 JSP 파일에서 출력할 용도로 사용
attribute : ${attribute 이름}
parameter : $(param. 이름) 또는 ${paramValue[인덱스]}

EL 연산자

산술 연산자 : +, -, *, / %, (div, mod)
관계 연산자 : >, >=, <, <=, ==, !=
- (gt, ge, lt, le, eq, ne)
논리 연산자 : &&, ||, !, (and, or, not)
조건 연산자 : 수식 ? 참일 때 값 : 거짓일 때 값
empty 연산자
- 값이 null 이거나 길이가 0이면 참 (true)
- ${empty 변수} : 변수가 null 이거나 0이면 참
- ${not empty 변수} : 변수가 null이 아니거나 0이 아니면 참

webapp에 폴더 생성 : sec01

EL 예제 : el.jsp

EL을 액션 태그로 사용

<jsp:getProperty name=”member” property=”id” />
-> ${member.id}
예제 : el2.jsp

EL 내장 객체

param 내장 객체

폼에서 입력 값을 받을 때
- request.getParameter() 대신에 param 객체 사용
- ${param.stdNo}
예제
- studentForm2.jsp
  - 폼에서 값 입력하고 전달
- newStudentOk2
  - request.getParameter() 대신에 param 객체 사용

pageContext 내장 객체

컨텍스트 이름(프로젝트명) 가져오기
getContextPath() 메소드 이용해서 컨텍스트 이름 가져오기 했던 것을
pageContext 내장 객체 사용 해서 컨텍스트 이름 가져올 수 있음
로그인
<a href=”<%=request.getContextPath()%>/sec01/login.jsp”>로그인</a>
로그인
로그인
예제 : 로그인 페이지로 이동 4가지 방법
- (1) url 사용 : “http://localhost:8080/JSP01/sec01/login.jsp”
- (2) <a>에서 ContextPath + ServletPath (URI) 사용
  - ”/JSP01/sec01/login.jsp”
- (3) getContextPath() 메소드 사용
  - request.getContextPath()
- (4) pageContext 내장 객체 사용
  - ${pageContext.request.contextPath}
- newStudentOk2.jsp에 추가

<body>
    <%
      request.setCharacterEncoding("utf-8");
    %>
    
    <h3>학생 정보 출력 (EL param 객체 사용)</h3>
      학번 : ${param.stdNo } <br>
      성명 : ${param.stdName } <br>
      전화번호 : ${param.stdPhone} <br>
      주소 : ${param.stdAddress } <br>
      학년 : ${param.stdYear } <br>
      
    <h3>로그인 페이지로 이동하는 여러 가지 방법</h3>
      url 사용 : <a href="http://localhost:8080/JSP01/sec01/login.jsp"> 로그인</a><br>
      URI 사용 : <a href="/JSP01/sec01/login.jsp">로그인</a><br>
      getContextPath() 메소드 사용 : <a href="<%=request.getContextPath()%>/sec01/login.jsp">로그인</a><br>
      pageContext 내장 객체 사용  : <a href="${pageContext.request.contextPath }/sec01/login.jsp">로그인</a><br>
  </body>

경로 항상 이렇게 하기 !!!!

EL (표현 언어)로 바인딩 속성 출력하기

request, session, application 내장 객체에 속성을 바인딩한 후 다른 서블릿이나 JSP에 전달 가능
자바 코드 사용하지 않고 바인딩된 속성 이름으로 바로 값 출력
request.setAttribute(“id”, “hong”);
서블릿 : getAttribute(“id”) 해서 값 가져와서 사용
EL : ${id}
예제
- el-forward.jsp
- el-forward-result.jsp

<%
        request.setAttribute("id", "hong");
        request.setAttribute("pwd", "1234");
        request.setAttribute("name", "홍길동");
        request.setAttribute("email", "hong@test.com");
      %>
      
      <jsp:forward page="el-forward-result.jsp" />

<body>
    id : ${id } <br>
    pwd : ${pwd } <br>
    name : ${name } <br>
    email : ${email } <br>
  </body>

빈 객체 바인딩

StudentBean 사용
StudentBean student = new StudentBean(생성자로 값 초기화);
request.setAttribute(“student”, student);
–> ${student.stdNo}
예제
- el-forward2.jsp
- el-forward-result2.jsp
- StudentBean 클래스에 매개변수 있는 생성자 추가
예제2 : 빈 객체를 ArrayList에 담아서 바인딩
- el-forward3.jsp

<body>
    <%
    StudentBean s1 = new StudentBean("2001003", "이몽룡", "010", "서울", 4);
    StudentBean s2 = new StudentBean("2001005", "홍길동", "011", "경기", 1);
    StudentBean s3 = new StudentBean("2001006", "성추향", "012", "전북", 2);
    
    List studentList = new ArrayList();
    studentList.add(s1);
    studentList.add(s2);
    studentList.add(s3);
    
    request.setAttribute("stdList", studentList);   
    %>
    <jsp:forward page="el-forward-result3.jsp" />
  </body>

<!-- JSTL 배운 후 FOR문(forEach) 사용해서 변경할 것임 -->
    <%-- <c:set var="list" value="<%=stdList %>" /><!--  --> --%>
    <h3>c:forEach 사용</h3>
    <table border="1">    
      <tr><th>학번</th><th>성명</th><th>전화</th><th>주소</th><th>학년</th></tr>
    <c:forEach var="data" items="${stdList }">
      <tr>
        <td>${data.stdNo }</td>
        <td>${data.stdName }</td>
        <td>${data.stdPhone }</td>
        <td>${data.stdAddress }</td>
        <td>${data.stdYear }</td>
      </tr>
    </c:forEach>

scope : 스코드 우선순위

request, session, application 내장 객체에서는 데이터를 바인딩해서 다른 JSP 페이지로 전달
각 내장 객체에 바인딩되는 속성 이름이 같은 경우
각 내장 객체에 지정된 출력 우선순위에 따라 순서대로 속성에 접근
- 높음 page < request < session < application 낮음
pageScope : 현재 페이지 영역의 변수
requestScope : 이전 페이지에서 받아온 영역의 변수
sessionScope : session 영역의 변수
applicationScope : application 영역의 변수
예제 : scope-priority.jsp

JSTL (JSP Standard Tag Library)

JSP 표준 태그 라이브러리
<%@ taglib prefix=”c” uri=”http:.....” %>
JSP와 HTML을 같이 사용함으로서 가독성이 떨어지는 것을 보완하고자 만들어진 태그 라이브러리
JSP 페이지 내에서 자바 코드를 사용하지 않고 태그를 사용하도록 함
JSP 페이지의 로직을 담당하는 부분인 제어문 및 데이터베이스 처리 등을 표준 커스텀 태그로 제공
사용하기 위해서는 별도 라이브러리 필요
JSTL 라이브러리 다운로드 받아서
- https://tomcat.apache.org
- 왼쪽 Download / Taglibs
- 오른쪽 Jar Files 4개 다운로드
apache-tomcat-9.0.55\lib 폴더에 저장
이클립스 닫았다가 새로 열기 (새로 열면서 읽어올 수 있도록)

JSTL 라이브러리 구성 : 5개의 라이브러리

Core (코어)

URI : http://java.sun.com.jsp/jstl/core

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

Prefix : c
제공 기공
- 변수 선언 및 삭제 등 변수와 관련된 작업
- if, for 문 등과 같은 제어문
- URL 처리 및 그 밖의 예외처리 및 화면 출력

Core 태그

변수 지원
- c:set
  - 변수 지정
  - setAttribute()와 같은 역할
- c:remove
  - 지정된 변수 제거
흐름 제어
- c:if : 조건문
- c:choose
  - switch문에 해당
  - c:when, c:otherwise 서브 태그
- c:forEach : 반복문
- c:forTokens : 구분자로 분리된 각 토큰 처리

URL 처리
- c:import : 다른 자원 추가

기타
- c:catch : 예외 처리 c:out : 출력

c:set 태그 : 변수 선언

<c:set var=”변수명” value=”값” [scope=””] />
예제 :
- sec02
- c_set.jsp

<%@ 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="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="${20 }" scope="page" />
<!--  value 값으로 EL 사용해도 됨 -->

<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!-- 복잡한 속셩명을 짧게 줄여서 사용 -->

c:if 태그 : 조건문 (else문 없을 경우의 if문)

<c:if test=”${조건식}” >
예제 : c_if.jsp

<body>
    <c:if test="${true }">
      <h3>항상 참입니다</h3>
    </c:if>
    
    <c:if test="${(id=='hong') && (name=='홍길동')}">
      <h3>아이디는 ${id }이고, 이름은 ${name }입니다</h3>
    </c:if>
  </body>

c:choose 태그 : switch문 기능

c:choose
<c:choose>
<c:when test=”조건식1”>본문내용1</c:when>
<c:when test=”조건식2”>본문내용2</c:when>
<c:otherwise>본문내용n</c:otherwise>
</c:choose>
예제 : c_choose.jsp

<body>
    <table border="1" align="center">
      <tr align="center" bgcolor="lightgreen">
        <td width="7%">아이디</td>
        <td width="7%">비밀번호</td>
        <td width="7%">이름</td>
        <td width="7%">나이</td>
        <td width="7%">키</td></tr>
        
    <c:choose>
      <%-- <c:when test="${empty name }"> --%>
      <c:when test="${name==null }">   <!-- null 또는 empty  -->
        <tr  align="center" ><td colspan=5>이름이 없습니다</td></tr>
      </c:when>
    
      <c:otherwise>
        <tr  align="center">
          <td>${id }</td>
          <td>${pwd }</td>
          <td>${name }</td>
          <td>${age }</td>
          <td>${height }</td>
        </tr>
      </c:otherwise>    
    </c:choose>   
    </table>
  </body>

c:forEach 태그 : 반복문 수행

<c:forEach var=”변수명 items=”반복할 객체명” begin=”시작값” end=”마지막값” step=”증가값” varStatus=”반복상태변수명”>
/c:forEach
varStatus : 반복 상태 속성 지정
- index : 인덱스 번호 반환 (일반적으로 0부터 시작. begin 값을 1로 설정하면 인덱스도 1부터 시작)
- count : 몇번째 반복인지 숫자 반환
- first: 첫 번째 여부 (boolean 값 반환)
- last : 마지막 여부(boolean 값 반환)
예제 : c_forEach.jsp

<body>
    <c:forEach var="i" begin="1" end="10" step="1" varStatus="loop">
      i = ${i } &nbsp;&nbsp; 반복회수 : ${loop.count } 
       &nbsp;&nbsp; 인덱스 :  ${loop.index }
       &nbsp;&nbsp; 첫 번째 : ${loop.first } 
       &nbsp;&nbsp; 마지막 : ${loop.last }<br>   
    </c:forEach>
  </body>

c:url 태그

<c:url var=”변수명” value=”url경로” [scope] />
<c:url var="url1" value="/sec01/login.jsp" />
- /가 있어서야 ContextPath (/JSP01)부터 찾음
- / 없는 경우
  - <c:url var="url1" value="sec01/login.jsp" />
  - /JSP01/sec02/sec01/login.jsp

c:redirect 태그

response.sendRedirect() 기능
매개변수 전달 가능
<c:redirect url=”redirect할 url”>
- <c:param name=”id” value=”${‘hong’}” />
/c:redirect
예제 : c_redirect.jsp

<c:redirect url="redirect_result.jsp">
      <c:param name="name" value="${'홍길동' }" />
      <c:param name="email" value="${'hong@test.com' }" />
</c:redirect>

<body>
    <h3> redirect 할 때 전달된 param 받기</h3>
    성명 : ${param.name }<br>
    이메일 : ${param.email }<br>
  </body>

포매팅 태그 라이브러리

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
숫자, 날짜, 통화 관련 포매팅 태그 라이브러리
fmt:formatDate
fmt:formatNumber
fmt:timeZone
예제 : format_taglib.jsp

<title>JSP 포매팅 태그 라이브러리</title>
  </head>
  <body>
    <h3>formatNumber : 숫자 포매팅</h3>
    <c:set var="price" value="100000000" />
    
    <fmt:formatNumber type="number" value="${price }" var="priceNumber"/>
    일반 숫자로 표현 시 : ${priceNumber } <br>
    통화로 표현 : <fmt:formatNumber type="currency" currencySymbol="\\" value="${price }" groupingUsed="true"/><br>
    <!-- 천 단위 구분 표시 : groupingUsed="true" 또는 "false" / "true" 디폴트-->
    퍼센트로 표현 : <fmt:formatNumber type="percent" currencySymbol="\\" value="${price }" groupingUsed="true"/>
    <!-- 속성 이름은 반드시 whitespace 다음에 나타나야 합니다. : 속성명은 띄어쓰기 해야 함 -->
    
    <h2>formatDate : 날짜 포매팅</h2>
    <c:set var="now" value="<%=new Date() %>" />
    <fmt:formatDate type="date" value="${now }"/><br>
    <fmt:formatDate type="date" value="${now }" dateStyle="full" /><br>
    <fmt:formatDate type="date" value="${now }" dateStyle="short" /><br>
    
    <fmt:formatDate type="time" value="${now }"/><br>
    <fmt:formatDate type="both" value="${now }"/><br>
    <fmt:formatDate type="both" value="${now }" dateStyle="full" timeStyle="full"/><br>
    <fmt:formatDate value="${now }" pattern="yyyy-MM-dd :hh:mm:ss"/><br>
    
    한국 현재 시간:
    <fmt:formatDate type="both" value="${now }" dateStyle="full" timeStyle="full"/><br>
    
    뉴욕 현재 시간 :
    <fmt:timeZone value="America/New York">
          <fmt:formatDate type="both" value="${now }" dateStyle="full" timeStyle="full"/>
    </fmt:timeZone>
    
  </body>

문자열 처리 함수

함수 기능 태그 라이브러리

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
예제 : fn_string.jsp

<body>
    <c:set var="title1" value="hello world!" />
    <c:set var="title2" value="쇼핑몰 중심 JSP입니다!" />
    <c:set var="str" value="중심" />
    <h3>여러 가지 문자열 함수 기능</h3>
    title1 : ${title1 }<br>
    title2 : ${title2 }<br>
    str : ${str }<br><br>
    
    
    title1 : ${title1 }의 문자열 길이 : ${fn:length(title1) } <br>
    title1 : 3번째 ~ 5번째 문자열 추출 : ${fn:substring(title1, 2, 5) } <br>
    공백을 /로 변환 : ${fn:replace(title1,"","/") } <br>
    title1 '중심' 단어 포함 여부 : ${fn:contains(title1, str) } <br>
    title2 '중심' 단어 포함 여부 : ${fn:contains(title2, str) }
    
  </body>