반응형
1) 웹자원(웹디렉토리)
2) 사용자에게 받은 입력값을 서버에게 전달만 함 - 처리는 서버가 (form.html)
🍋 webapp>form.html
<!-- 사용자에게 회원정보를 입력받아 처리페이지(join.itwill)를 POST 방식으로 요청하여
입력값을 전달하는 웹문서 - "입력페이지"-->
<!--
- form 태그를 이용하여 [POST]방식으로 웹프로그램 요청
- 입력값은 리퀘스트 메세지의 몸체부(body)에 저장되어 전달
form 태그: 사용자로부터 값을 입력받아 웹프로그램을 요청하여 전달하기 위한 태그
[action]속성: 요청할 웹프로그램의 URL 주소를 속성값으로 설정 => 생략 시 현재 요청 웹프로그램을 재요청
[method]속성: 웹프로그램에 대한 요청방식(GET 또는 POST)를 속성값으로 설정 => 생략 시 기본값은 [GET]방식
[GET]방식: 입력값을 질의문자열(QueryString)으로 변환하여 전달하는 요청방식 => 소용량의 보안이 필요없는 값을 전달할 때 사용
[POST]방식: 입력값을 리퀘스트 메세지의 몸체부(Body)에 저장하여 전달하는 요청방식 => 대용량이거나 보안을 필요로 하는 값을 전달할 때 사용
웹프로그램 요청 시 전달되는 값은 이름(식별자)과 값이 하나의 쌍으로 전달 => 이름=값&이름=값&이름=값&이름=값&이름=값&이름=값&...
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<http://www.w3.org/TR/html4/loose.dtd>">
<html>
<head>
<title>Servlet</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/common.css" type="text/css"/>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
function loading() {
window.document.join.id.focus();
}
function inputCheck(form) {
if(is_null(form.id)) {
alert("아이디를 입력해 주세요.");
form.id.focus();
return false;
}
if(!isID(form.id)) {
alert("아이디는 영문자로 시작되며 영문자,숫자,_의 조합만 가능합니다.");
form.id.focus();
return false;
}
if(is_null(form.pass)) {
alert("비밀번호를 입력해 주세요.");
form.pass.focus();
return false;
}
if(is_null(form.repass)) {
alert("비밀번호확인을 입력해 주세요.");
form.repass.focus();
return false;
}
if(isShort(form.pass, 6, "비밀번호는 6글자 이상 입력해 주세요.")) {
return false;
}
if(!isSame(form.pass, form.repass)) {
alert("비밀번호와 비밀번호확인이 서로 같지 않습니다.");
form.pass.focus();
return false;
}
if(is_null(form.name)) {
alert("이름을 입력해 주세요.");
form.name.focus();
return false;
}
if(is_null(form.addr)) {
alert("주소를 입력해 주세요.");
form.addr.focus();
return false;
}
return true;
}
</script>
</head>
<body onload="loading();">
<h3 align="center">◆◆◆ 회원가입 ◆◆◆</h3>
<form name="join" method="post" action="join.itwill"
onsubmit="return inputCheck(join); ">
<table bgcolor="black" cellspacing="1" cellpadding="5" align="center">
<tr>
<th bgcolor="44ff44"><font size="2">아이디</font></th>
<td bgcolor="white" width="300">
<!-- name="id" 이름=값&이름=값&.. 에서 이름(name)으로 사용 -->
<input type="text" size="10" name="id" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">비밀번호</font></th>
<td bgcolor="white" width="300">
<input type="password" size="10" name="pass" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">비밀번호확인</font></th>
<td bgcolor="white" width="300">
<input type="password" size="10" name="repass" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">이름</font></th>
<td bgcolor="white" width="300">
<input type="text" size="10" name="name" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">주소</font></th>
<td bgcolor="white" width="300">
<input type="text" size="30" name="addr" class="TXTFLD">
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">성별</font></th>
<td bgcolor="white" width="300">
<input type="radio" name="gender" value="남자" checked><font size="2">남자</font>
<input type="radio" name="gender" value="여자"><font size="2">여자</font>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">직업</font></th>
<td bgcolor="white" width="300">
<select name="job">
<option value="학생">학생</option>
<option value="주부">주부</option>
<option value="회사원">회사원</option>
<option value="기타">기타</option>
</select>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">취미</font></th>
<td bgcolor="white" width="300">
<input type="checkbox" name="hobby" value="게임" checked><font size="2">게임</font>
<input type="checkbox" name="hobby" value="등산"><font size="2">등산</font>
<input type="checkbox" name="hobby" value="낚시"><font size="2">낚시</font>
<input type="checkbox" name="hobby" value="운동"><font size="2">운동</font>
<input type="checkbox" name="hobby" value="기타"><font size="2">기타</font>
</td>
</tr>
<tr>
<th bgcolor="44ff44"><font size="2">자기소개</font></th>
<td bgcolor="white" width="300">
<textarea rows="5" cols="40" name="profile"></textarea>
</td>
</tr>
<tr>
<th colspan="2" bgcolor="ff8888">
<input type="submit" value="가입">
<input type="reset" value="취소">
</th>
</tr>
</table>
</form>
</body>
</html>3) 에러페이지 (error.html)
🍋 webapp>error.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Servlet</title>
</head>
<body>
<h1>에러페이지</h1>
<hr>
<p>비정상적인 방법으로 웹프로그램을 요청 하였습니다.
정상적인 방법으로 사이트를 이용해 주세요.</p>
<div><a href="form.html">메인페이지 이동</a></div>
</body>
</html>
4) 입력페이지(join.html)에서 전달된 입력값(회원정보)을 반환받아 클라이언트에게 전달하는 서블릿
🍏 JoinServlet.java
- 단, form 태그가 [POST]방식으로 요청 시 제공되는 서블릿
- POST 외 다른 방식으로 요청했을 때
- 권한없는 사용자가 요청했을 때
- 전달값이 있어야 하는 데 없을 때 .. 등등
package xyz.itwill.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.regex.Pattern;
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("/join.itwill")
//=> 결국 클라이언트가 웹프로그램(서블릿)을 요청할 URL 주소는 아래와 같음
//=> <http://localhost:8000> /(서버 루트디렉토리) servlet /(Context 루트디렉토리) join.itwill
public class JoinServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.
response.setContentType("text/html;charset=utf-8");
//2.
PrintWriter out = response.getWriter();
/*
현재 실행되는 서블릿은 입력페이지(join.html)에서 form 태그를 사용하여 [POST] 방식으로 요청해야함
만약 클라이언트가 서블릿을 [GET] 방식으로 요청한 경우 비정상적인 요청이므로,
[클라이언트에게 에러코드를 전달]하거나 [에러페이지(입력페이지)로 이동]되도록 처리해야함
*/
//HttpServletRequest.getMethod() : 클라이언트의 요청방식(GET or POST)을 반환하는 메소드
//3.
//클라이언트가 서블릿(웹프로그램)을 [GET] 방식으로 요청한 경우 - 비정상적인 요청
//비정상적인 요청이면 값 전달과 처리가 되지 않도록 만들어주기
if(request.getMethod().equals("GET")) {
//방법1. [클라이언트에게 에러코드를 전달]하기
/*
//HttpServletResponse.sendError(int sc) :
//=> 클라이언트에게 에러코드(4XX or 5XX)를 전달하는 메소드
//상태코드(Status Code) : 요청에 대한 응답 관련 정보를 제공하기 위한 정수값
//100 : 처리중
//200 : 처리완료(응답결과 제공)
//300 : 재요청
//400 : 잘못된 요청
//500 : 실행 오류
response.sendError(400); response.sendError(405); //이거보다 아래꺼로
//=>서블릿에서는 HttpServletResponse 인터페이스의 상수(Constant)를 이용하여 상태코드 제공
response.sendError(HttpServletResponse.SC_BAD_REQUEST); //400 : 잘못된 모든 요청들(광범위)
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED); //405
return; //요청 처리 메소드 완전 종료
*/
//🔥방법2. [에러페이지(입력페이지)로 이동]하기 - 리다이렉트 이동 이용
//HttpServletResponse.sendRedirect(String url) : 클라이언트에게 URL 주소를 전달하는 메소드
// => 클라이언트에게 처리결과를 파일로 응답하지 않고, [301(재요청) 상태코드]와 [URL주소]를 전달하여 응답
//🔥[301 상태코드와 URL 주소를 전달받은 클라이언트]는 브라우저의 URL 주소를 변경하고 -> 변경된 URL 주소의 웹프로그램을 요청하여 -> 처리결과를 응답받아 출력 - "리다이렉트 이동"
//[에러페이지]로 이동하거나
response.sendRedirect("/servlet/error.html"); //절대경로
//response.sendRedirect("error.html"); //상대경로
//[입력페이지]로 이동하기
response.sendRedirect("/servlet/form.html"); //절대경로
//response.sendRedirect("form.html"); //상대경로
return;
//방법3.
//클라이언트가 알아서 해석해서 실행하는 것 - 클라이언트에게 자바스크립트만 전달하면 명령이 실행됨
// alert()함수로 경고창 메세지 출력 + location,href 로 url 주소 설정
out.println("<script type='text/javascript'>");
out.println("alert('비정상적인 접근입니다.');");
out.println("location.href='form.html';");
out.println("</script>");
return;
}
//4.
//클라이언트가 서블릿(웹프로그램)을 [POST]방식으로 요청한 경우 - 사용자 입력값이 request 메세지의 몸체부(Body)에 저장되어 전달
//request 메세지의 몸체부에 저장되어 전달된 값의 문자 형태(캐릭터셋)는 기본값이 서유럽어(ISO-8859-1)로 입력값에 한글이 있는 경우
//비정상적인 전달값 발생
//request 메세지의 몸체부(Body)에 저장되어 전달된 값을 원하는 문자형태(캐릭터셋)로 변경필요
//형식)
//HttpServletRequest.setCharacterEncoding(String encoding) : HttpServletRequest 객체의 캐릭터셋을 변경하는 메소드
request.setCharacterEncoding("utf-8");
//🔥[POST]방식의 요청 + 한글 입력값 있을 때 사용함
//웹프로그램 요청 시 전달된 값을 반환받아 저장
//형식)
//HttpServletRequest.getParameter(String name) : 모든 전달값을 문자열(String)로 반환하는 메소드
//=> 전달값은 무조건 문자열(String 객체)로 반환
//=> 전달값을 매개변수에 전달된 이름(식별자)으로 구분하여 값 반환
//=> 이름(식별자)으로 전달된 값이 없는 경우 null 반환
String id = request.getParameter("id");
/*
//입력값에 대한 검증
//=>생략 가능 , but 보안성을 견고하게 구현하기 위해 작성하는 것을 권장
if(id==null || id.equals("")) {//입력값이 없는 경우 - 비정상적인 요청(자바스크립트실행이안된경우..)
response.sendRedirect("error.html");
return;
}
if(!Pattern.matches("^[a-zA-Z]\\\\\\\\w{5,19}$", id)) {//입력형식이 맞지 않은 경우 - 비정상적인 요청
response.sendRedirect("error.html");
return;
}
*/
String pass = request.getParameter("pass");
String name = request.getParameter("name");
String addr = request.getParameter("addr");
String gender = request.getParameter("gender");
String job = request.getParameter("job");
//같은 이름으로 전달되는 값이 있는 경우 첫번째 전달값만 반환받아 저장
//String hobby = request.getParameter("hobby");
//형식) HttpServletRequest.getParameterValues(String name) :
//=>같은 이름으로 전달된 모든 값을 얻어와 "문자열 배열"로 반환하는 메소드
String[] hobby = request.getParameterValues("hobby");
String profile = request.getParameter("profile");
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<meta charset='UTF-8'>");
out.println("<title>Servlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>회원정보 확인</h1>");
out.println("<hr>");
out.println("<p>아이디 = "+id+"</p>");
out.println("<p>비밀번호 = "+pass+"</p>");
out.println("<p>이름 = "+name+"</p>");
out.println("<p>주소 = "+addr+"</p>");
out.println("<p>성별 = "+gender+"</p>");
out.println("<p>직업 = "+job+"</p>");
//out.println("<p>취미 = "+hobby+"</p>");
if(hobby==null) { //전달값이 없는 경우 - 취미를 선택하지 않은 경우
out.println("<p>취미 = 미선택</p>");
} else {
out.println("<p>취미 = ");
for(int i=0; i<hobby.length; i++) {
out.println(hobby[i]);
if(i<hobby.length-1) { //배열의 마지막 요소가 아닌 경우
out.println(",");
}
}
}
//엔터(Enter)는 브라우저에서 동작되지 않으므로 br 태그로 변환하여 출력
//out.println("<p>자기소개 = "+profile+"</p>");
out.println("<p>자기소개<br><hr>"+profile.replace("\\\\n", "<br>")+"</p>");
out.println("</body>");
out.println("</html>");
}
}
반응형
'servlet' 카테고리의 다른 글
| [servlet] 6. 쿠키 생성, 전달, 제거 프로그램 (cookie) (0) | 2024.05.25 |
|---|---|
| [servlet] 5. 파일업로드 프로그램 (multipart/form-data) (0) | 2024.05.24 |
| [servlet] 3. 공지사항 프로그램(이미지, html) (0) | 2024.05.23 |
| [servlet] 2. 서블릿 클래스 작성하는 법 (0) | 2024.05.23 |
| [servlet] 1. 서블릿의 개념, 동작원리 및 생명주기(Lifecycle) 관리 (0) | 2024.05.22 |
