ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 백엔드 (5) - JSP, EL, JSTL, Core 태그
    백엔드 프로그래밍 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 라이브러리 다운로드 받아서
    • 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 태그

    • URL 처리

    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>

    포매팅 태그 라이브러리

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

     

     

    문자열 처리 함수

    함수 기능 태그 라이브러리

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

    댓글

Designed by Tistory.