#2 JSP Project 02(CURD게시판)

JSP

#2 JSP Project 02(CURD게시판) - 기본개념02

H-V 2021. 8. 14. 10:48

유투버 'ITTHISGO. IT 이거라도 알고 가자!' 님의 강의 참조

JSP를 위한 기본 객체 및 문법

* 웹브라우저는 항상 클라이언트(이용자), 이클립스를 통해서 서버를 돌리는 아파치톰켓은 서버(응답자)

* 이용자는 항상 톰켓에서 요구하는 'localhost8080/_____' 이하로만 접근이 된다
(localhost8080 자신의 포트, /___ 는 ContextPath)

※ 예제를 통해 알아보자

예제1 - REQUEST

*index.jsp

<body>
<ol>
	<li>
		<a href="<%= request.getContextPath() %>/ex01.jsp">ex01.jsp</a>
	</li>
	
</ol>
</body>

*ex01

<body>
클라이언트IP: <%= request.getRemoteAddr() %><br>
요청 정보 문서 타입:<%= request.getContentType() %><br>
요청 정보 전송 방식:<%= request.getMethod() %><br>
요청 URL:<%= request.getRequestURL() %><br>
요청 URL:<%= request.getRequestURI() %><br>
ContextPath:<%= request.getContextPath() %><br>
서버 이름:<%= request.getServerName() %><br>
서버 포트:<%= request.getServerPort() %><br>
</body>

예제1은 클라이언트(웹브라우저)에서 서버로 요청할때 보낸 정보를 볼 수 있다. 이 요청은 HTTP프로토콜에 맞춰 REQUEST헤더에 담기는 내용이다.
즉 서버에 저장되어있는 데이터나 값을 클라이언트는 객체로 받아야하는데 이때 쓰는 문법이 'request.'.

*중요포인트

request.get... 이하로 request안의 원하는 값을 서버로부터 받아 올 수 있다.

예제2 - REQUEST GET방식

*index.jsp

	<li>
		<a href="<%= request.getContextPath() %>/ex02.jsp">ex02.jsp</a>
	</li>

*ex02
<body>
<form action="ex02-result.jsp">
	<input type="text" name="name" placeholder="문자열입력">
	<input type="submit" value="전송">
</form>
</body>


*ex02-result
<body>
<%
String name = request.getParameter("name");
System.out.println("전송받은 값:" + name);

if (name.equals("원빈")){
%>
<%=name %>님 환영합니다.
<% } else { %>s
누구세요?
<% } %>
</form>

form태그를 이용해 전송버튼을 누르면 "action="이하로 이동되고 JSP문법을 이용해 JSP값은 JSP대로 출력하고 자바 문법과 섞어서 표현이 가능

*중요포인트

form태그에서 method를 정의하지않으면 default는 'GET' 방식이다
request.getParameter는 요청받은 매개변수를 들고오라는 것. 여기서 매개변수는 name. 즉 input 상자를 통해 입력되는 name값은 form태그의 action을 통해서 ex02-result로 이동하며 result.jsp에서 getParameter("")이하 값에 맞춰서 결과가 표시 되는 것. 콘솔에도 역시 요청받아진 값(name)이 표시가 된다.
계속해서 클라이언트와 서버간의 request ↔ response가 이루어지고 있다.
1) 클라이언트(웹브라우저) index.jsp에서 링크(ex02) 클릭 요청 -> 서버에서 응답을 ex02로 돌려줌
2) 클라이언트는 ex02에서 원하는 값을 넣어 전송 버튼 클릭 요청 -> 서버에서는 응답으로 ex02-result 페이지 및 받은 요청 값을 적용해서 응답으로 화면에 돌려줌

예제3 - REQUEST POST방식

*ex03
<form action="ex03-result.jsp" method="post">
	<input type="text" name="n1">
	+<input type="text" name="n2">
	<br>
	<input type="submit" value="계산">
</form>

*ex03-result
<body>
<%
String n1str = request.getParameter("n1");
String n2str = request.getParameter("n2");
int n1 = Integer.parseInt(n1str);
int n2 = Integer.parseInt(n2str);
System.out.println("전송받은 값:" + n1+","+n2);
%>
연산:<%=n1%>+<%=n2%>
결과값:<%=n1+n2 %>
</form>

form태그에서 method방식을 추가해서 "post"로 처리했다.

*중요포인트

클라이언트가 ex03.jsp에서 계산버튼으로 "post"방식의 요청을 하였고 서버는 그것을 받아서 post방식에 맞게 응답한다.
post 방식일때는 request시에 request body부분에 요청하고 응답되어야하는 FormData를 담아서 요청이 되고 서버는 이것을 바탕으로 응답을 하는것.
GET vs POST 의 차이를 보면 GET은 단순 정보 조회용으로 BODY가 필요없고 쿼리스트링(?=)을 통해 전달이 된다 (무언가를 얻기위한 목적)
POST방식은 자원을 생성/변경을 위한것이므로 HTTP BODY에 원한는 데이터값을 들어와야 처리가 된다.
(무언가를 보내는 목적)

예제4 - 여러 PARAMETER 받기

*ex04
<form action="ex04-result.jsp" method="post">
	<input type="text" name="name" placeholder="이름"><br>
	<input type="text" name="address" placeholder="주소"><br>
	<br>
	좋아하는 동물<br>
	<input type="checkbox" name="pet" value="dog">Puppy<br>
	<input type="checkbox" name="pet" value="cat">Cat<br>
	<input type="checkbox" name="pet" value="shark">Shark<br>
	<input type="submit" value="전송">
	<br>
</form>

*ex04-result
<body>
<%
request.setCharacterEncoding("utf-8"); //한글 깨짐 방지
String name = request.getParameter("name");
String address = request.getParameter("address");
String[] pets = request.getParameterValues("pet");

System.out.println("name:"+name);
System.out.println("address:"+address);
for(String pet:pets){
	System.out.println("pet:"+pet);
}
%>
전송 완료!
</form>

*중요포인트

똑같이 "POST"방식으로 받았고 여러 파라미터를 받을시에는 배열+포문으로 'getParameterValues'를 요청
항상 요청 정보와 그 정보가 서버측에서 어떻게 찍히는지 보는게 중요하다!
getParameterNames()/getParameterMap() 객체도 중요하다

예제5 - RESPONSE

*ex05
<body>
구글로 이동! <%response.sendRedirect("https://www.google.com/"); %>
</body>

요청이오면 반드시 응답이 있다 (REQUEST ↔ RESPONSE)
요청에대한 결과가 단순 처리만 하는 일이라면 response.sendRedirect를 이용해서 처리 후 다른 페이지로 보내는 기능
302상태코드는 sendRedrirect가 성공적으로 되면 나타난다

*중요포인트

request/response의 개념을 다시 짚고 넘어가자.
서버는 웹페이지를 저장하고있다가 클라이언트의 요청에 의해 웹페이지로 응답을 준다
클라이언트(웹브라우저)는 서버에 저장되어있는 웹페이지를 이용하기위해 request로 요청한다
서버는 request를 받고 request가 가지고있는 명령들을 처리한 후 response로 웹브라우저에 나타낸다

	정의	기능
REQUEST	클라이언트가 전송하는 요청정보를 담고 있는 객체	클라이언트와 관련된 정보 읽기 서버와 관련된 정보 읽기 클라이언트가 요청한 각종 읽기 및 속성 기능 처리(reuqest.get...) 등
RESPONSE	클라이언트 요청에 대한 응답정보를 담고 있는 객체	서버 정보 서버 기능 컨텐츠 정보 페이지 출력 등

예제6 - 로그인

*ex06
<form action="ex06-result.jsp" method="post">
	<input type="text" name="userid" placeholder="아이디"><br>
	<input type="password" name="userpw" placeholder="패스워드"><br>
	<input type="submit" value="로그인"><br>
</form>


*ex06-result
<body>
<%
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");

if (userid.equals(userpw)){
	System.out.println(userid+":로그인 성공!");
	response.sendRedirect(request.getContextPath());
} else {
	System.out.println(userid+":로그인 실패!");
	response.sendRedirect("ex06.jsp");
}
%>
</body>

계속해서 똑같은 로직이다 request/response 형태
파라미터를 어떻게 받아올것이며 응답페이지는 어떻게 할것인지 등등

예제7 - 포워드와 리다이렉트

*index.jsp
<body>
	 <form action="forward.jsp" method="get">
	 	이름:<input type="text" name="name"/><br>
	 	나이:<input type="text" name="age"/><br>
	 	<input type="submit" value="포워드 요청"/><br>
	 </form>
	 <hr>
	 	 <form action="redirect.jsp" method="get">
	 	이름:<input type="text" name="name"/><br>
	 	나이:<input type="text" name="age"/><br>
	 	<input type="submit" value="리다이렉트 요청"/><br>
	 </form>
</body>

*forward.jsp
<body>
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("forward.jsp에서 request.gerParameter 확인");
System.out.println("이름:"+name);
System.out.println("나이:"+age);
System.out.println("forward_ret로 요청을 전달");
RequestDispatcher rd = request.getRequestDispatcher("forward_ret.jsp");
rd.forward(request, response);
%>
</body>


*forward_ret.jsp
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
포워드 결과<br>
요청 URL부분과 request객체는 계속 유지됩니다.<br>
<%="forward_ret.jsp에서 request파라미터 확인" %>
<%="이름:"+name %>
<%="나이:"+age %>
</body>

forward.jsp 파일만 유지되면서 값을 이어받은 fowrd_ret.jsp이 처리를 하는것을 볼 수 있ㅎ다

포워드 같은 경우 RequestDispatcher를 통해 객체를 생성 후 포워드를 받을 .jsp를 지정해서 request,response를 인자로 넘겨주면 데이터가 그대로 지정된 곳으로 간다.
포워드가되면 요청URL/REQUEST 객체도 그대로 유지되면서 forward_ret.jsp에서 그대로 쓸 수 있는걸 볼 수 있음

*redirect.jsp
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("redirect.jsp에서 request.gerParameter 확인");
System.out.println("이름:"+name);
System.out.println("나이:"+age);
System.out.println("redirect_ret로 다시 요청하라고 응답");
response.sendRedirect("redirect_ret.jsp");
%>
</body>

*redirect_ret.jsp
<body>
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
리다이렉트 결과<br>
새로 요청처리 된 것이므로 URL/request객체도 새로 생성됩니다 (값 유지 x).<br>
<%="redirect_ret.jsp에서 request파라미터 확인" %>
<%="이름:"+name %>
<%="나이:"+age %>
</body>

리다이렉트는 값을 유지 안하기때문에 당연히 받을 파라미터값이 null이 된다. 또한 포워딩가 다르게 파일 두개 모두가 열림

예제 8 - 페이지 이동 개념

*index.jsp

<body>
<form action="<%= request.getContextPath() %>/view.jsp">
페이지 선택:
	<select name="code">
		<option value="a">A 페이지</option>
		<option value="b">B 페이지</option>
		<option value="c">C 페이지</option>
	</select>
	<input type="submit" value="이동">
</form>
</body>

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

<%
String code = request.getParameter("code");
String url="";

if (code.equals("a")){
	url=request.getContextPath()+"/a.jsp";
}else if(code.equals("b")){
	url=request.getContextPath()+"/b.jsp";
}else if(code.equals("c")){
	url=request.getContextPath()+"/c.jsp";
}

RequestDispatcher dispatcher = request.getRequestDispatcher(url);
dispatcher.forward(request,response);
System.out.println(dispatcher);
%>

예제 7에서 봤듯이 포워딩을 하면 URL/REQUEST는 변경없이 넘어간다.
getRequestDispatcher(" ")에는 ContextPath 경로를 생략
sendRedirect(" ")에는 절대경로로 시작