▶ 사용방식 : <a href="list.jsp?pageNo=2">[2]</a>
<a href = "list.jsp">목록보기</a>
<form action = "name= " method="GET">
단순하게 특정한 페이지를 요청하는 것이 아니라 특정 페이지로 많은 양의 파라미터를 전송하여 파라미터에 관한 처리를 할 때 POST 방식으로 요청을 전송.
회원가입 요청, 게시판 글쓰기 요청, 자료실 업로드 등을 처리할 때 사용하는 방식.
POST 방식으로 요청을 서버로 전송하려면 반드시 HTML의 form 태그를 사용하여 method속성을 POST로 지정해야 함
▶ 사용방식 : <form name = "action = " method = "POST">
① File → [New] → [Dynamic Web Project] 클릭
② Project name 항목에 "Chapter3" 입력 후 Next> 버튼 클릭
③ 다음 화면에서 변경 없이 Next> 버튼 클릭
④ 'Generate web.xml deployment descriptor'체크 후 Finish 버튼 클릭
(체크박스 선택하면 이클립스에서 web.xml 파일이 프로젝트에 자동 생성됨)
⑤ 아래 화면처럼 웹 프로젝트 생성
GET 방식
으로 요청이 전송되어 올 경우는 최종적으로 doGet(HttpServletRequestrequest,HttpServletResponse response)메소드
가 호출되기 때문에 해당 메소드에서 요청을 처리해줌
서블릿에서 제공되는 메스드 중 HttpServletRequest 인터페이스에서 제공되는 String getParameter(String name)메소드
가 존재하는데 이 메소드는 name
이라는 이름으로 전송되어 온 파라미터 값을 반환해주는 메소드임
① Chapter3 웹 프로젝트의 Webapp 디렉토리에서 마우스 우측 버튼을 클릭하여 [New] → [HTML File] 클릭
② File name 입력 창에 생성할 HTML 파일이름 입력 후(확장자 생략하여 작성), Next> 버튼 클릭하여 생성할 HTML 파일의 버전을 'Html5'로 선택하고 'Finish'버튼 클릭
▶ 클라이언트 페이지 코딩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style> /*HTML 본문 스타일 정의 부분*/
#loginFormArea { /*<section>태그 영역의 스타일 지정 부분*/
text-align: center; /*<section>태그 영역 안에 포함되는 내용들이
<section>태그 영역 내에서 좌우 가운데 정렬 설정*/
width: 250px; /*<section> 태그 영역의 폭 설정*/
margin: auto; /*<section> 태그 영역을 전체 화면의 가운데 정렬 설정*/
border: 1px solid red /*<section>영역 테두리 설정*/
}
h1 { /*<h1>태그 내용들 좌우 가운데 정렬 설정*/
text-align: center;
}
</style>
</head>
<body>
<h1>로그인</h1> <!-- id값이 loginFormArea를 가지는 <section>태그 영역을 정의한 부분,
태그에 지정된 id값은 <style>태그 영역에서 해당 아이디를 가지고 있는
영역의 스타일을 정의하는 용도로 사용 -->
<section id="loginFormArea"> <!-- 서버로 요청을 보내는 역할을 하는 태그인
<form>태그 영역을 정의한 부분,
action 속성값을 "login"으로 지정하여 "login" URL로 요청을 전송하며,
method속성값을 "get"으로 지정하여 get방식으로 요청을 지정 -->
<form action="login" method="get"> <!-- <label>태그에 id 속성 값을
"id"로 지정하여 HTML 실행 화면에서 "아이디"레이블을 마우스로 클릭하면
아이디를 입력하는 입력상자로 커서가 이동하게 연결, <laber>부분과 <input>영역은
id 속상 값으로 연결-->
<label id="id">아이디 : </label> <input type="text" name="id" id="id" /><br>
<label id="passwd">비밀번호 : </label> <input type="password"
name="passwd" id="passwd"><br>
<br> <input type="submit" value="로그인" /> <!-- submit버튼을 정의하여
로그인 요청을 할 수 있게 처리 -->
</form>
</section>
</body>
</html>
▶ 서블릿 생성하기
① [New] → [Servlet] 클릭 후 생성되는 화면에 <class name> 입력 후 Next> 버튼 클릭
(실질적으로 생성되는 자바 파일명을 지정하는 부분으로 web.xml 설정에서 <servlet-class>
항목에 설정되는 값)
② 다음화면에서 <URL mappings> 항목을 선택하고 <Edit> 버튼 클릭(이 부분은 web.xml 설정 파일에서 <url-pattern> 항목의 내용으로 설정되는 부분). 클라이언트 폼 태그의 요청 경로가 login (<form action="login">)
으로 설정되어 있으므로 URL mappings 값을 </login>으로 수정함(이 부분은 web.xml 설정 파일에서 <url-pattern>항목의 내용으로 추가되는 부분)
마지막으로 GET 요청 방식이면, 기본적으로 체크되어진 doPOST의 체크를 해제 후 doGET메소드만 체크 후 <Finish> 버튼 클릭
▶ 서블릿 페이지 코딩
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id");
//클라이언트에서 전송되어 오는 id라는 이름의 파라미터 값과
String passwd = request.getParameter("passwd");
//passwd의 파라미터 값을 받는 부분
response.setContentType("text/html;charset=euc-kr");
//응답하는 데이터 타입이 html 타입이고,
//charset=euc-kr로 지정하면서 응답되는 데이터들의 한글 처리를 한 부분
//서블릿에서 응답하는 데이터 타입은 XML 데이터 일수도 있고 JSON데이터일 수도 있다
//setContetntType으로 지정해 주는 마임 타입에 따라서 응답하는 데이터의 타입이 결정됨
PrintWriter out = response.getWriter();
//문자열 단위로 response 객체에 내용을 출력할 수 있는 출력 스트림을 생성한 부분
out.println("아이디=" + id + "<br>"); //응답에 id변수 값과
out.println("비밀번호=" + passwd + "<br>"); // passwd 변수값을 출력하는 부분
}
}
▶ 결과 확인
▶ 클라이언트 페이지 코딩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>2페이지 목록 요청하기</h1>
<a href="boardList?page=2">2page</a>
<!--<a>태그를 사용하여 GET 방식으로
boardList 서블릿에 요청하는 부분. GET 방식으로 요청시 파라미터 값은 요청 URL뒤에
"?" 문자를 붙이고 "파라미터이름=파라미터값" 형태로 전송함
전송해야할 파라미터 값이 여러개일 경우 "&" 문자로 연결.
"파라미터이름1=파라미터값1&파라미터이름2=파라미터값2" 형태로 파라미터 값 여러개 전송가능
-->
</body>
</html>
▶ 서블릿 페이지 코딩
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class BoardListServlet
*/
@WebServlet("/boardList") //서블릿이 "boardList" URL로 전송되어 오는 요청을
//처리하도록 설정하는 부분
public class BoardListServlet extends HttpServlet { //상속받는 클래스
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public BoardListServlet() {
super(); //상속받은 것 처리
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)//메소드 실행
throws ServletException, IOException {
// TODO Auto-generated method stub
String page = request.getParameter("page");
//클라이언트에서 전송된 page라는 이름의 파라미터 값을 받는 부분
response.setContentType("text/html;charset=euc-kr");
//서블릿에서 응답할 데이터의 타입을 HTML문서 타입으로 설정하는 부분
PrintWriter out = response.getWriter();
//클라이언트에게 보내줄 응답을 출력하는데 사용할 출력 스트림을 생성하는 부분
out.println(page + "페이지 게시판 목록 출력");
//page 변수의 값을 응답에 출력하는 부분
}
}
▶ 결과 확인하기
▶ 서블릿 페이지 코딩
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class DirectURLServlet
*/
@WebServlet("/directURL")
public class DirectURLServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DirectURLServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 클라이언트에서 전송된 name과 age라는 이름을 가지고 있는 파라미터 값을 받아서
//응답에 출력하는 부분
String name = request.getParameter("name");
String age = request.getParameter("age");
response.setContentType("text/html;charset=euc-kr");
PrintWriter out = response.getWriter();
out.println("이름 : " + name + "<br>");
out.println("나이 : " + age + "<br>");
}
}
▶ 결과 확인하기
▶ 클라이언트 페이지 코딩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원가입</h1>
<form action="memReg" method="post">
<!--form태그의 요청 메소드 방식으로 POST로 지정-->
회원명 : <input type="text" name="name"><br>
주소 : <input type="text" name="addr"><br>
전화번호 : <input type= "text" name="tel"><br>
취미 : <input type="text" name="hobby"><br>
<input type="submit" value="회원가입" />
</form>
</body>
</html>
▶ 서블릿 페이지 코딩
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MemRegServlet
*/
@WebServlet("/memReg")
public class MemRegServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public MemRegServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
//클라이언트에서 요청이 'POST'방식으로 전송되어오므로 'doPost' 메소드 구현
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=euc-kr");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
String addr = request.getParameter("addr");
String tel = request.getParameter("tel");
String hobby = request.getParameter("hobby");
out.println("이름 = " + name + "<br>");
out.println("주소 = " + addr + "<br>");
out.println("전화번호 = " + tel + "<br>");
out.println("취미 = " + hobby + "<br>");
}
}
▶ 결과확인
한글처리가 제대로 되기 위해서는 클라이언트 즉, 브라우저에서 문자를 처리하는 방식과 서버에서 문자를 처리하는 방식이 같아야 함
즉, 브라우저에서는 문자를 euc-kr방식으로 처리하는데 서버에서는 ISO-8859-1 방식으로 처리하게 되면 한글이 깨지게 됨
기본적으로 톰캣 서버에서 사용하는 캐릭터셋은 UTF-8 방식이므로 캐릭터셋을 변경해주어야 함
링크가 걸려서 요청 처리가 되는 경우 form 태그의 method 속성이 GET 방식인 경우는 페이지에서 사용하고 있는 캐릭터셋으로 인코딩 되어 파라미터가 전송됨
주소 표시줄에 파라미터를 직접 입력해서 전송하는 경우는 해당 블라우저에서 사용하고 있는 캐릭터셋을 이용해서 인코딩을 처리함
톰캣의 URL 인코딩 방식이 UTF-8 방식이므로 GET 방식으로 요청 시 클라이언트 페이지 인코딩 방식도 UTF-8 방식으로 변경해야 함
이클립스를 이용해서 html 페이지나 jsp 페이지를 생성할 때 이클립스에 지정된 기본 인코딩 방식이 euc-kr 방식이므로, UTF-8 인코딩 방식으로 변경하는 것이 편리
▶ 인코딩 방식 변경
이클립스의 [window] → [Preferences] → Preferences 대화상자에서 [Web] → [CSS Files] → Encoding : ISO 10646/Unicode(UTF-8)로 선택 → <Apple>버튼 클릭
HTML Files, JSP Files 메뉴도 각각 동일하게 작업
▶ 한글 처리용 클라이언트 페이지 작성
<!DOCTYPE html>
<html>
<head>
<!--서버로 전송되는 한글파라미터 값을 제대로 처리하기 위해 페이지지 인코딩 방식 지정한 부분-->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--GET방식으로 파라미터 값 전송을 테스트하기 위해 form 태그의 method 속성값을 get으로 설정-->
<form action="hangul" method="get">
한글이름: <input type="text" name="name" /><br>
<input type="submit" value="확인" />
</form>
</body>
</html>
▶ 한글 처리용 서블릿 페이지 작성
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class HangulServlet
*/
@WebServlet("/hangul") //'hangul' URL요청 처리하도록 설정하는 부분
public class HangulServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public HangulServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
/*클라이언트에서 GET 방식으로 전송되어 오는 요청을 처리하기 위해 doGET 메소드 재정의*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String name = request.getParameter("name");
/*클라이언트로 응답되는 데이터의 타입을 Html 타입으로 지정하는 부분*/
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("hangul Process = " + name);
}
}
▶ 결과 확인
▶ 한글 처리용 클라이언트 페이지 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="hangul2" method="post">
한글이름: <input type="text" name="name" /><br>
<input type="submit" value="확인" />
</form>
</body>
</html>
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class HangulServlet
*/
@WebServlet("/hangul")
public class HangulServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public HangulServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String name = request.getParameter("name");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("hangul Process = " + name);
}
}
클라이언트에서 POST 방식으로 전송되어온 한글 파라미터 값을 제대로 처리하려면 request 객체의 setCharacterEncoding 메소드를 사용하여 request 객체의 body 영역의 인코딩 방식을 변경해야함
doPost 메소드 부분을 다음과 같이 수정하고 POST 방식으로 다시 한글 파라미터ㅓ 값을 서블릿으로 전송하면 한글이 제대로 처리됨
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("hangul Process = " + name);
}
String[ ] getParameterValues(String paramName)
메소드 사용해서 처리▶ 클라이언트 페이지
같은 이름으로 여러개의 파라미터 값을 전송하기 위해서 체크박스 사용.
체크박스 name속성 값은 공통적으로 dog로 지정.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>당신이 좋아하는 강아지를 선택하세요</h1>
<form action="choiceDog" method="post">
<input type="checkbox" name="dog" value=siba.jpg "/>푸들
<input type="checkbox" name="dog" value=hi.jpg "/>진돗개
<input type="checkbox" name="dog" value=jindo.jpg "/>풍산개
<input type="checkbox" name="dog" value=sigor.jpg "/>삽살개
<input type="submit" value="선택" />
</form>
</body>
</html>
▶ 서블릿 페이지
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ChoiceDogServlet
*/
@WebServlet("/choiceDog")
public class ChoiceDogServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ChoiceDogServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=euc-kr");
PrintWriter out = response.getWriter();
String[] dog = request.getParameterValues("dog");
out.println("<html>");
out.println("<head>");
out.println("</head>");
out.println("<body bgcolor = 'black'>");
out.println("<table align = 'center' bgcolor = 'yellow'>");
out.print("<tr>");
for(int i = 0; i < dog.length; i++) {
out.println("<td>");
out.println("<img src = ' "+dog[i]+"' width = '200px' height='200px'/>"); //이미지 사이즈 조절
out.println("</td>");
}
out.println("</tr>");
out.println("</table>");
out.println("</body>");
out.println("</html>");
}
}
▶ 결과 확인