Html 페이지 간 데이터 전달 - Html peiji gan deiteo jeondal

Question

Mon/Feb/03

[Java] day23.

- 페이지 간 데이터 이동

JSP 기본 (이어서)

목차 Show

[Java] day23.
- 페이지 간 데이터 이동

* 웹 페이지와 페이지 사이 data 전달하는 방법

1. HTML

→ JSP / Servlet

data 전달에는 반드시 parameter가 필요

문자열만 가능 (ArrayList, ResultSet 등 객체 전달 X)

- HTML

< form action = "*.jsp" >

< input name = "*" />

</ form >

- JSP

*.jsp? # = #

request.getParamter("#")

- Servlet

@WebServlet ("/*")

<select ... multiple > 일 때는

request.getParameterValues()로 전달 받아서

String[] 으로 저장

url?parameter = #

- <input onclick = "location.href = '*.jsp? # = # '" />

- <a href = "location.href = '*.jsp? # = # '" > </ a>

2. JSP / Servlet

→ JSP / Servlet

parameter (url)

response.sendRedirect

RequestDispatcher()

반드시 request.getRequestDispatcher() 호출해야 함

- forward () : 이동 방식, HTML의 <a>와 유사

- include () : 참조 방식

* javax.servlet.RequestDispatcher interface

* 객체 전달 가능

// 다른 페이지로 전달할 때

RequestDispatcher dispatcher = request.getRequestDispatcher("*.jsp/servlet");
// 1. RequestDispatcher 객체 생성
// 화면 이동만 하려면 *.html 도 가능

request.setAttribute("문자열", 객체);
// 1.5. JSP로 데이터 넘길 경우 forward 보다 먼저 호출해서 request 내장 변수에 data 저장
// 기본 변수 type도 Wrapper Class 객체로 보내야 함
// ex) new Integer(10)
// 여러 data를 넘길 경우 해당되는 객체마다 request.setAttribute로 넘겨야 함

dispatcher.forward(request, response);
// 2. forward method 로 객체 전달
// ; a에서 b로 page 완전 이동
// ; response.sendResponse()는 Thread  사용 불가, forward는 사용 가능

dispatcher.include(request, response);
// 2-1. 참조만 하려면 include method
// ; a에서 b로 갔다가 다시 바로 a로 돌아오는 방식


// 다른 JSP에서 데이터 전달 받을 때
// ex)

ResultSet a = request.getAttribute("  ");
ArrayList b = request.getAttribute("  ");
// 해당되는 객체 type으로 호출

* HTML - Servlet - JSP 간 data 이동

이동 과정 반드시 외워둘 것!

HTML	Servlet (adder.java)	JSP (r.jsp)
<form action = "adder" > <input name = "NUM1" /> <input name = "NUM2" /> <input type = "submit" /> </ form>
	url로 parameter 전달 ~/adder?NUM1=10&NUM2=20
		doGet(request, response)	doGet의 내장 변수 - params 영역에 data 저장 NUM1 = "10" NUM2 = "20" - attribute 영역	request - params 영역 - attribute 영역 response
		request.setAttribute ("ADD", new Integer(NUM1+NUM2));	* jsp 로 넘기기 전에 연산("ADD") 필요한 경우	attribute 영역에 ("ADD", 30) 저장
		RequestDispatcher rd = request.getRequestDispatcher("r.jsp"); rd.forward(request, response)	RequestDispatcher 를 통해 r.jsp로 전달	request > params 영역에 data 저장 NUM1 = "10" NUM2 = "20"

예제)

home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>

<h2>ADDER</h2>

<form action = "adder">
	NUM1 : <input type = "text"  name = "NUM1" required /> <br />
	NUM2 : <input type = "text"  name = "NUM2" required /> <br /><br />
	<input type = "submit" value = "SUBMIT" />
</form>

</body>
</html>

AddServlet.java

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/adder")
public class AddServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public AddServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		int n1 = Integer.parseInt(request.getParameter("NUM1"));
		int n2 = Integer.parseInt(request.getParameter("NUM2"));
		
		RequestDispatcher rd = request.getRequestDispatcher("r.jsp");
		
		request.setAttribute("ADD", new Integer(n1 + n2));
		
		rd.forward(request, response);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		doGet(request, response);
	}

}

r.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RESULT</title>
</head>
<body>

NUM1 = <%=request.getParameter("NUM1") %> <br />
NUM2 = <%=request.getParameter("NUM2") %> <br />
SUM = <%=request.getAttribute("ADD") %>

</body>
</html>

파일 Include

Now.jsp - 오늘 일자

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

<% GregorianCalendar now = new GregorianCalendar(); %>

<%=String.format("%Ty년 %Tm월 %Td일", now, now, now) %>

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MENU</title>
</head>
<body>

<h2>오늘의 메뉴</h2>
- 짜장면 <br />
- 볶음밥 <br />
- 짬뽕 <br /><br />

<%
out.flush();
RequestDispatcher dispatcher = request.getRequestDispatcher("Now.jsp");
dispatcher.include(request, response);
%>

</body>
</html>

* out.flush()

여기서 include()가 나오면 Now.jsp를 실행시키면서 Now.jsp내용이 먼저 나오게 되기 때문에

out.flush()를 통해 out에 그 위의 내용을 저장시키는 것. ( 현재 자신의 위치에 결과값 참조 )

include()와 함께 따라다니는 method. (반드시 암기!)

* 여기서는 dispatcher에 특별히 저장하는 내용이 없기 때문에, <%@include file = "Now.jsp" %>로만 처리해도 무방함

* Now.jsp 에서는 날짜값만 연산해서 test.jsp로 가져오는 거기 때문에, Now.jsp 에는 다른 HTML tags 있으면 안됨

쿠키와 세션

쿠키 Cookie - 브라우저 상의 임시 저장소 ; browser에 저장되기 때문에 눈으로 확인 가능, 노출 가능성 큼

세션 Session - 웹 서버 상의 임시 저장소 ; Server 내부에 저장되기 때문에 눈으로 확인 불가, 노출 가능성 적음

쿠키가 먼저 탄생, 쿠키의 기술을 그대로 서버 내부로 가져간 것이 세션

쿠키 Cookie

쿠키를 만드는 방법 : Cookie Class 객체 생성 - response.addCookie로 전달

Cookie coo = new Cookie ("cookie_name", "cookie_value");

response.addCookie(coo);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
response.addCookie(new Cookie("NAME", "John"));
response.addCookie(new Cookie("GENDER", "Male"));
response.addCookie(new Cookie("AGE", "15"));
%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>StoreCookie</title>
</head>
<body>

COOKIE DATA ARE SAVED! <BR />

</body>
</html>

Chrome 에서 cookie data 확인 > JSESSIONID는 cookie data를 관리하기 위한 것

쿠키를 불러오는 방법 : request.getCookies() 모든 쿠키를 Cookie 배열로 return

Cookie cookies[] = request.getCookies();

String name = coo.getName();
// cookie의 이름

String value = coo.getValue();
// cookie의 값

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	Cookie[] cookies = request.getCookies();	
%>

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ReadCookies</title>
</head>
<body>

	<h2>Read Cookies</h2>
	이름 : <%= getCookieValue(cookies, "NAME") %> <br />
	성별 : <%= getCookieValue(cookies, "GENDER") %> <br />
	나이 : <%= getCookieValue(cookies, "AGE") %>

</body>
</html>

<%!
	private String getCookieValue(Cookie[] cookies, String name){
		String value = null;
		if(cookies == null) return null;
		for(Cookie cookie : cookies) {
			if(cookie.getName().equals(name))
				return cookie.getValue();
		}
		return null;
	}
%>

BROWSER 종료 후 다시 실행하면 모두 NULL

* 접속 URL에 따라 cookies 다르게 저장됨

ex) localhost:8080/~으로 저장 후 127.0.0.1:8080/~로 접속하면 null 값만 보임

localhost:8080/과 127.0.0.1:8080/ 둘다 동일한 위치이지만, 브라우저는 url로 비교하기 때문

* Cookie는 수정 / 삭제 method 없음

- 수정하려면 동일한 cookie 명으로 덮어써야 함

- 삭제하려면 1. browser 끄거나 2. cookie의 수명 지정

; cookie의 기본 수명은 browser 종료와 함께 삭제

cookie.setMaxAge(3600)
// 1시간 수명, parameter는 초

cookie.setMaxAge(0)
// 바로 삭제

cookie.setMaxAge(-1)
// browser 종료와 함께 삭제, cookie의 기본 수명

Cookie cookie = new Cookie("GENDER", "");
cookie.setMaxAge(0);
// addCookie전에 수명을 먼저 지정해야 함
response.addCookie(cookie);

* servlet class 내부에서도 동일하게 쓰이지만, 일반적으로 잘 사용하지 않음

; 내부 작동이기 때문에 굳이 쓸 이유가 없음

세션 session

Server 내부 임시저장이기 때문에, JSP와 Servlet의 session이 다름 - 각자 객체 생성해야 함

JSP에는 내장 method 있으나, Servlet에는 없음

- Servlet은 getSession () 호출해야 함

HttpSession session = request.getSession();
// javax.servlet.http.HttpSession type의 객체
// 새로운 session 시작 또는, 기존 session 정보를 객체로 만들어 return

session.setAttribute("session_name", "session_value");
// session data 영역에 data 저장

String str = (String) session.getAttribute("session_name");
// 저장된 data 호출
// 기본적으로 Object type으로 저장되어 있으므로, 형변환casting 필요

session.removeAttribute("session_name");
// 삭제 가능 : cookie와 차이점

session.invalidate();
// session 종료

적용범위

- Cookie : browser에 저장 - browser만 살아있으면 다른 파일들에서도 사용 가능 (노출 위험 상당히 높음)

- Session : 동일 application 내에서만 공유 가능, 안정성이 상대적으로 높음

예제)

join.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JOIN</title>
</head>
<body>

Insert ID/PW <br />

<form action = "join" method = get>
  ID : <input type = "text" name = "id" pattern = "\w+" required /><br/>
  PW : <input type = "password" name = "pw" pattern = "\w+" required /><br/>
  <input type = "submit" value = "가입" />
  <input type = "reset" value = "취소" />
</form>

</body>
</html>

JoinServlet.java

import java.io.IOException;

//import javax.servlet.RequestDispatcher;
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("/join")
public class JoinServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public JoinServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		HttpSession ss = request.getSession();
		ss.setAttribute("id", id);
		ss.setAttribute("pw", pw);
		
		response.sendRedirect("member.jsp");

//		RequestDispatcher rd = request.getRequestDispatcher("member.jsp");
//		rd.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

member.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"    %>
    
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEMBER</title>
</head>
<body>

<h2>Member Join Form</h2>
<form action = "result" method = "get" >
  이름  : <input type = "text" name = "name" pattern ="[ㄱ-힣]{3,4}" required /><br />
  연락처  : <input type = "text" name = "phone" pattern ="010-\d{3,4}-\d{4}" required /><br />
  이메일  : <input type = "email" name = "email" pattern ="\w+@\w+\.\w+(\.\w+)?" required /><br />
  <input type = "submit" value = "NEXT" />
  <input type = "button" value = "Previous" onclick = "location.href='join.html'">
</form>
</body>
</html>

ResultServlet.java

import java.io.IOException;

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("/result")
public class ResultServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public ResultServlet() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String name = request.getParameter("name");
		String phone = request.getParameter("phone");
		String email = request.getParameter("email");
		
		HttpSession ss = request.getSession();
		ss.setAttribute("name", name);
		ss.setAttribute("phone", phone);
		ss.setAttribute("email", email);
		
		response.sendRedirect("result.jsp");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    %>
    
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RESULTS</title>
</head>
<body>
<h2>RESULTS</h2>

<%
	String id = (String) session.getAttribute("id");
	String pw = (String) session.getAttribute("pw");
	String name = (String) session.getAttribute("name");
	String phone = (String) session.getAttribute("phone");
	String email = (String) session.getAttribute("email");
	session.invalidate();
%>

ID : <%=id %> <br />
PW : <%=pw %> <br />

이름 : <%=name %> <br />
연락처 : <%=phone %> <br />
이메일 : <%=email %> <br />
<input type = button value = "처음으로" onclick = "location.href = 'join.html'" />

</body>
</html>

* session 으로 넘길때 중간에 다시 꺼내볼 필요없이, 필요한 곳에서만 다시 꺼내보면 됨

* RequestDispatcher - rd.forward()로 전달하면 session을 쓸 필요 없음

; 알아서 다 넘겨줌

다시한번 정리 ) 외울 것

Servlet	JSP
doGet(request, response) - doPost(request, response)	내장객체 request / response / out / application / session
따라서 JSP에서는 session 객체 생성 없이 바로 String value = (String) session.getAttribute("session_name")으로 호출 가능
PrintWriter out = response.getWriter() HttpSession s = request.getSession()	request	getParameter() getParameterValues() setAttribute() getAttribute() getCookies() getRequestDispatcher()
response	sendRedirect() addCookies()
application	getContextPath() getRealPath()
session	setAttribute() getAttribute() invalidate() removeAttribute()
out	println() printf() print