본문 바로가기
Programming/JSP

JSP 5일차

by yoon9i 2024. 5. 24.

##########################################################################
5일차

4. MyBatis 연동

1> SE 버전 아키텍쳐

    (main 메서드)                                      Empservice(인터페이스)
    JComponent04_JTextField  ----------> EmpServiceImpl ----------> EmpDAO ----------> MySQL
                                                 <----------                <----------        <----------

    - 2개의 jar 파일을 build path 로 설정.

2> EE 버전 아키텍쳐

                      (main메서드역할)             Empservice(인터페이스)
      브라우저 ------> EmpListServlet  ----------> EmpServiceImpl ----------> EmpDAO ----------> MySQL
                            |                             <----------                            <----------                   <----------
                            |
                            |(위임)
              <-------   list.jsp

    - 2개의 jar 파일을 build path 로 설정하지 않고 WEB-INF/lib 폴더에 jar 복사한다.
      자동으로 build path 됨.

----------------------------------------------------------

1. EL(Expression Language)

1> JSP 의 구성요소
- html
- jsp 태그
  --> expression tag: <%= 값 %>
      용도: 값을 브라우저에서 출력됨. 
            <% out.print(값) %> 와 동일기능.
- EL
- JSTL

=> JSP 는 주로 EL 과 JSTL 을 사용한다.

2> 문법: 

  ${표현식(값)|key}
  ==> servlet 에서 scope에 저장할 때 사용된 key 값.

3> 기능 및 특징
- 브라우저에서 출력됨.
- ${리터럴값} ==> 리터럴값이 브라우저에 출력
  ${리터럴값+1} // 산술연산 가능
  ${리터럴값>1} // 비교연산 가능
  ${리터럴값>1 && 리터럴값 < 20} // 논리연산 가능

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>EL(1) 기본문법 정리</h1>
	${10}<br>
	${3.14}<br>
	${10+1}<br>
	${10 > 1}<br>
	${10 > 1 && 10 < 20}<br>
</body>
</html>



- ${key}
==> 서블릿에서 scope 에 저장할 때 지정한 key 값으로서
    자동으로 key에 해당하는 데이터를 얻고 웹 브라우저에 출력함.

    # 서블릿 작업
// 1. request scope 에 저장(HttpServletRequest request)
request.setAttribute("userid", "홍길동");

    # JSP 작업
    가. <% %> 이용
    <%
  String userid = (String)request.getAttribute("userid");
  out.print(userid);
  %>    

    나. ${key} 이용

      ${userid}<br>

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@WebServlet("/SetServlet2")
public class SetServlet2 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("SetServlet.doGet");
		
		// 3가지 scope 에 데이터 저장
		// 1. request scope 에 저장(HttpServletRequest request)
		request.setAttribute("userid", "홍길동");
				
		// 2. session scope 에 저장
		HttpSession session = request.getSession();		
		session.setAttribute("userid2", "이순신");

		
		// 3. application scope 에 저장
		ServletContext application = getServletContext();
		application.setAttribute("userid3", "유관순");
		
		// jsp 요청위임
		request.getRequestDispatcher("el2.jsp").forward(request, response);
	}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL - scope 에 저장된 데이터 출력</title>
</head>
<body>
	<h1>EL(2) - scope 에 저장된 데이터 출력</h1>
	JSP작업:
    <%
		String userid = (String)request.getAttribute("userid");
		out.print(userid);
	 %>
	 <br>
	 <br>
	 EL 이용<br>
	request scope: ${userid}<br>
	<input type="text" name="xxx" value="${userid}"><br>
	
	session scope: ${userid2}<br>
	application scope: ${userid3}<br>
</body>
</html>
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@WebServlet("/SetServlet4")
public class SetServlet4 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("SetServlet.doGet");
		
		request.setAttribute("userid", "홍길동");
		
		// jsp 요청위임
		request.getRequestDispatcher("el4.jsp").forward(request, response);
	}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL - null 값 처리</title>
</head>
<body>
	<h1>EL(4) - null 값 처리</h1>
	<%
		String userid = (String)request.getAttribute("pw");
	%>
	userid: <%= userid %><br>
	userid 값이 null 체크: <%= userid==null %><br>
	
	<h2>2. EL</h2>
	userid: ${pw}<br>
	userid 값이 null 체크: ${empty pw}<br>
	userid 값이 null 체크(부정): ${!empty pw}<br>
</body>
</html>



- DTO 사용
    # 서블릿
  request.setAttribute("user", new User("홍길동", 20));
         
    
  # JSP
    <%
  User user = (User)request.getAttribute("user");
   String username=user.getUsername();
   int age = user.getAge();
%>
이름:<%= username %><br>
나이:<%= user.getAge() %><br>
<hr>
이름:${user.username}<br>
나이:${user.age}<br>

  - List 사용

    # servlet
    List<User> list = Arrays.asList(new User("홍길동1", 20),
                                                                      new User("홍길동2", 30));

    request.setAttribute("userList", list);

    # jsp
    <%
        List<User> list =
        (List<User>)request.getAttribute("userList");

    /*     User user1 = list.get(0);
        User user2 = list.get(1); */
    
%>
이름1:<%= list.get(0).getUsername() %><br>
나이1:<%= list.get(0).getAge() %><br>
이름2:<%= list.get(1).getUsername() %><br>
나이2:<%= list.get(1).getAge() %><br>

<hr>
${userList}<br>
이름1:${userList[0].username}<br>
나이1:${userList[0].age}<br>

이름2:${userList[1].username}<br>
나이2:${userList[1].age}<br>

package com.dto;

public class User {
	String username;
	int age;
	
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public User(String username, int age) {
		super();
		this.username = username;
		this.age = age;
	}
	
	// getter & setter
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
	// toString
	@Override
	public String toString() {
		return "User [username=" + username + ", age=" + age + "]";
	}
	
	
}
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.dto.User;


@WebServlet("/SetServlet5")
public class SetServlet5 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("SetServlet.doGet");
		
		request.setAttribute("user", new User("홍길동",20));
		
		List<User> list = Arrays.asList(new User("홍길동1",20),
										new User("홍길동2",30));
		request.setAttribute("userList", list);
		
		// jsp 요청위임
		request.getRequestDispatcher("el5.jsp").forward(request, response);
	}
}
<%@page import="java.util.List"%>
<%@page import="com.dto.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL - User 클래스 출력</title>
</head>
<body>
	<h1>EL(5) - User 클래스 출력</h1>
	<h4>기존</h4>
	<%
		User user = (User)request.getAttribute("user");
		String username = user.getUsername();
		int age = user.getAge();
	%>
	이름: <%= username %><br>
	나이: <%= user.getAge() %><br>
	<hr>
	<h4>EL</h4>
	이름: ${user.username}<br>
	나이: ${user.age}<br>
	
	<h1>EL(5) - UserList 출력</h1>
	<h4>기존</h4>
	<%
		List<User> list = (List<User>)request.getAttribute("userList");
		// User user1 = list.get(0);
		// User user2 = list.get(1);
	%>
	이름1: <%= list.get(0).getUsername() %><br>
	나이1: <%= list.get(0).getAge() %><br>
	이름2: <%= list.get(1).getUsername() %><br>
	나이2: <%= list.get(1).getAge() %><br>
	<hr>
	<h4>EL</h4>
	${userList}<br>
	이름1: ${userList[0].username}<br>
	나이1: ${userList[0].age}<br>
	이름2: ${userList[1].username}<br>
	나이2: ${userList[1].age}<br>	
</body>
</html>




  4> 명시적인 scope 지정

    <h1>EL3- scope에 저장된 데이터 출력시 명시적으로 scope지정</h1>
    request scope: ${requestScope.userid}<br>
    session scope: ${sessionScope.userid}<br>
    application scope: ${applicationScope.userid}<br>

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


@WebServlet("/SetServlet3")
public class SetServlet3 extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("SetServlet.doGet");
		
		// 3가지 scope 에 데이터 저장
		// 1. request scope 에 저장(HttpServletRequest request)
		request.setAttribute("userid", "홍길동");
				
		// 2. session scope 에 저장
		HttpSession session = request.getSession();		
		session.setAttribute("userid", "이순신");

		
		// 3. application scope 에 저장
		ServletContext application = getServletContext();
		application.setAttribute("userid", "유관순");
		
		// jsp 요청위임
		request.getRequestDispatcher("el3.jsp").forward(request, response);
	}
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EL - scope 에 저장된 데이터 출력시 명시적으로 scope 지정</title>
</head>
<body>
	<h1>EL(3) - scope 에 저장된 데이터 출력시 명시적으로 scope 지정</h1>

	request scope: ${requestScope.userid}<br>
	session scope: ${sessionScope.userid}<br>
	application scope: ${applicationScope.userid}<br>
</body>
</html>




2. JSTL (Jsp Standard Tag Library)
1> 개요
- JSP 에서 커스텀 태그를 사용하자.
- 커스텀 태그 작성 방법
  java 클래스 + 태그정의서

  ex>
      만약 태그정의서에 if 를 정의한다면?
      java 클래스(IF.java) + 태그정의서(if태그정의)
      ==> *.class + *.tld
          (*.jar)

      #jsp 코드             
      <if>                  public class IF {

      </if>                 }

      결론은 이미 커스텀태그를 만들었을 것이다.
      만들어진 커스텀 태그들중에서 추려서 표준(Standard)으로 제공된 커스텀태그들 사용
      (Apache 에서 제공한 커스텀 라이브러리를 사용할 것; ANSI, js-ES6)
      이 표준화된 커스텀 태그를 JSTL 이라고 부름.
      JSTL에는 다양한 기능의 태그가 제공됨(반복, 조건,...)
      정확히는 JSTL 는 spec 임.

2> JSTL spec 의 구현체(Apache 에서 제공)

  jakarta.apache.org 에서 다운
  https://archive.apache.org/taglibs/standard/
  최신버전: Standard 1.2
  사용버전: Standard 1.1 (이유는 샘플제공, standard-examples.war)

  압축풀고 lib 폴더에 가서 2개의 jar 파일을
  생성된 웹 프로젝트 WEB-INF/lib 폴더에 복사.
  자동으로 build-path 가 된다.



3> 사용방법

  가. lib 폴더에 가서 2개의 jar 파일 복사
  나. 서블릿 만들고 scope 에 저장.
      ==> scope 에 저장된 데이터를 EL + JSTL 이용해서 핸들링함.

  다. JSP 파일에서 <%@ talib prefix="" uri="" %> 설정.

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

 

package com.dto;

public class User {

	String username;
	int age;
	
	public User() {}

	public User(String username, int age) {
		super();
		this.username = username;
		this.age = age;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	@Override
	public String toString() {
		return "User [username=" + username + ", age=" + age + "]";
	}
}
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.dto.User;


@WebServlet("/JSTLServlet")
public class JSTLServlet extends HttpServlet {

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		request.setAttribute("userid", "홍길동");
		request.setAttribute("age", "70");

		request.setAttribute("user", new User("이순신", 44));
	
		
		request.getRequestDispatcher("jstl.jsp").forward(request, response);
		
	}
}
<%@ 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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	.xxx {
		color: red;
	}
	
	.blue {
		color: blue;
	}
	
	.purple {
		color: purple;
	}
	
	.yellow {
		color: yellow;
	}
	
	.red {
		color: red;
	}
</style>
</head>
<body>
	<h1>1. c:out 기능 - 웹브라우저에 값 출력</h1>
	EL 만 사용: ${userid}<br>
	JSTL 이용: <c:out value="${userid}"/>
	
	<h1>2. c:set 기능 - 변수설정</h1>
	int num = 10; // 자바표현<br>
	<c:set var="num" value="${10}"/>
	num 값: ${num}<br>
	
	<c:set var="id" value="${userid}" />
	userid: ${id}<br>
	
	<h1>3. c:if 기능 - 조건</h1>
	<c:if test="${userid == '홍길동' && 10 > 4}">
		<P>안녕하세요.</P>
	</c:if>
	
	<P 
		<c:if test="${userid == '홍길동'}">
			class="xxx"
		</c:if>
	>안녕하세요.</P>
	
	<c:if test="${empty userid2}">
		<p>안녕하세요2.</p>
	</c:if>
	
	<h1>4. c:choose 기능 - 멀티조건(다중조건)</h1>
	<c:choose>
		<c:when test="${age > 19 && age < 34}">
			청년입니다.
		</c:when>
		<c:when test="${age > 35 && age < 49}">
			장년입니다.
		</c:when>
		<c:when test="${age > 50 && age < 64}">
			중년입니다.
		</c:when>
		<c:otherwise>
			노년입니다.
		</c:otherwise>
	</c:choose>
	<hr>
	<!-- 
	문제 
	출력결과
	이름: 이순신(청년-파란색, 장년-보라색, 중년-노랑색, 노년-빨간색)
	나이: 44
	-->
	<div 
		<c:choose>
			<c:when test="${age > 19 && age < 34}">
				class="blue"
			</c:when>
			<c:when test="${age > 35 && age < 49}">
				class="purple"
			</c:when>
			<c:when test="${age > 50 && age < 64}">
				class="yellow"
			</c:when>
			<c:otherwise>
				class="red"
			</c:otherwise>
		</c:choose>	
	>
		이름:${user.username}<br>
		나이: ${user.age}<br>
	</div>
</body>
</html>
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.dto.User;


@WebServlet("/JSTLServlet2")
public class JSTLServlet2 extends HttpServlet {

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		List<User> list = 
				 Arrays.asList(new User("홍길동1", 20),
						       new User("홍길동2", 30));
		
		request.setAttribute("userList", list);
		
		request.getRequestDispatcher("jstl2.jsp").forward(request, response);
		
	}
}
<%@ 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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>1. c:forEach 기능: 범위반복</h1>
<c:forEach begin="1" end="5">
 <p>Hello</p>
</c:forEach>
<hr>

<c:forEach var="x"   begin="1" end="5">
 <p>${x}:world</p>
</c:forEach>

<hr>
<c:forEach var="x"   begin="1" end="10" step="2">
 <p>${x}:happy</p>
</c:forEach>

<h1>2. c:forEach 기능: scope에 저장된 list 반복출력</h1>
<c:forEach var="dto"  items="${userList}">
   ${dto.username},${dto.age}<br>
</c:forEach>


<h1>3. c:forEach 기능: scope에 저장된 list 반복출력+ idx얻기</h1>
<c:forEach var="dto"  items="${userList}" varStatus="status">
  ${status.index}, ${status.count}, ${status.first}, ${status.last},<br>
</c:forEach>

<h1>4. c:url : 경로설정(상대경로/절대경로)</h1>

 <h3>가. 이전방식</h3>
 //  8090/app11/JSTLServlet2<br>
 
 상대경로:<a href="JSTLServlet2">이전방식:상대경로</a><br>
 절대경로:<a href="/app11/JSTLServlet2">이전방식:절대경로</a>
 
 <h3>나. JSTL(c:url)방식</h3>
 <c:url value="경로"  />
 상대경로:<a href="<c:url value="JSTLServlet2"  />">JSTL:상대경로</a><br>
 JSTL의 절대경로는 / 만 지정하면 자동으로 context명이 추가된다.
 절대경로:<a href="<c:url value="/JSTLServlet2"  />">JSTL:절대경로</a>

</body>
</html>

'Programming > JSP' 카테고리의 다른 글

JSP 5일차 - MyBatis 연동  (0) 2024.05.24
JSP 4일차  (0) 2024.05.23
JSP 3일차  (0) 2024.05.22
JSP - 2일차  (0) 2024.05.21
JSP 1일차  (0) 2024.05.20

관련글

티스토리툴바