반응형
01. 입력페이지
join_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
//<%-- 사용자에게 회원정보를 입력받기 위한 JSP 문서 - 입력페이지 --%>
//<%-- => [가입]을 클릭한 경우 form 태그를 실행하여 처리페이지(join_action.jsp)를 [post] 방식으로
//요청해 페이지 이동 - 사용자 입력값(회원정보) 전달 --%>
<%
/*
//방법4. [null 출력 방지를 위해]
//전달값(에러메세지)을 반환받아 저장
String message = request.getParameter("message");
if(message==null){ //전달값이 없는 경우(참조번지가 없는 경우)
message = "";
}
*/
//방법5. - 1 [null 출력 방지를 위해]
//전달값(임의값)을 반환받아 저장
String message = request.getParameter("message");
if(message!=null && message.equals("1")){ //임의값이 있다면
message="비정상적인 방법으로 요청하였습니다.";
} else { //임의값이 없다면
message="";
}
//방법5. -2 (둘 중 하나 사용)
//전달값(임의값)을 반환받아 저장
String message = request.getParameter("message");
if(message==null){ //임의값이 없다면
message="";
} else { //임의값이 있다면
message="비정상적인 방법으로 요청하였습니다.";
}
//방법6.
// [💜session 내장객체]에 저장된 속성값(에러메세지)을 반환받아 저장
String message = (String)session.getAttribute("message");
if(message==null){ //session 내장객체에 저장된 속성값이 없는 경우
message="";
} else { //session 내장객체에 저장된 속성값이 있는 경우
//session 내장객체에 저장된 속성값 삭제
//=> 다른 JSP 문서에서 session 내장객체에 저장된 속성값을 반환받아 사용하지 못하도록 삭제 처리
session.removeAttribute("message");
}
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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>
<link rel="stylesheet" href="css/common.css" type="text/css"/>
</head>
<body onload="loading();">
<h3 align="center">◆◆◆ 회원가입 ◆◆◆</h3>
<form name="join" method="post" action="join_action.jsp"
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">
<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>
<%-- 표현식(Expression)으로 변수값 출력시 변수에 [null]이 저장된 경우 [null] 문자열로 변환되어 출력 --%>
<p align="center" style="color: red;"><%=message %></p>
</body>
</html>js/common.js
// action 처리 함수
function sp_form_submit( form , action , method , target , msg )
{
if( !is_null(msg) )
if( !confirm(msg) )
return false;``
if( !is_null(action) ) form.action = action;
if( !is_null(method) ) form.method = method;
if( !is_null(target) ) form.target = target;
return( form.submit() );
}
// 두개의 폼에 입력된 값이 같은지 비교(비밀번호, 비밀번호 확인)
function isSame(obj1, obj2) {
var str1 = obj1.value;
var str2 = obj2.value;
if(str1.length == 0 || str2.length == 0)
return false;
if(str1 == str2)
return true;
return false;
}
// 폼에 입력된 내용의 길이가 원하는 길이보다 짧은지의 여부
function isShort(obj, len, msg) {
var str = obj.value;
if(str.length < len) {
if(msg) {
alert(msg);
}
obj.focus();
obj.select();
return true;
}
return false;
}
// 영문으로 입력되었는지의 여부
function isAlphabet(obj) {
var str = obj.value;
if(str.length == 0)
return false;
str = str.toUpperCase();
for(var i=0; i < str.length; i++) {
if(!('A' <= str.charAt(i) && str.charAt(i) <= 'Z'))
return false;
}
return true;
}
// 폼에 입력된 내용이 아이디로 적당한지의 여부..
function isID(obj) {
var str = obj.value;
if(str.length == 0)
return false;
str = str.toUpperCase();
if(!('A' <= str.charAt(i) && str.charAt(i) <= 'Z'))
return false;
for(var i=1; i < str.length; i++) {
if(!(('A' <= str.charAt(i) && str.charAt(i) <= 'Z') ||
('0' <= str.charAt(i) && str.charAt(i) <= '9') ||
(str.charAt(i) == '_')))
return false;
}
return true;
}
// 폼에 입력된 내용이 이메일로 적당한지의 여부..
function isEmail(obj) {
var str = obj.value;
if(str == "")
return false;
var i = str.indexOf("@");
if(i < 0)
return false;
i = str.indexOf(".");
if(i < 0)
return false;
return true;
}
// 주민등록번호인지..
function isSSN(front, back) {
var birthday = front.value;
var num = back.value;
if(birthday.length != 6) {
return false;
}
if(num.length != 7) {
return false;
}
var hap = 0;
for(var i=0; i < 6; i++) {
var temp = birthday.charAt(i) * (i+2);
hap += temp;
}
var n1 = num.charAt(0);
var n2 = num.charAt(1);
var n3 = num.charAt(2);
var n4 = num.charAt(3);
var n5 = num.charAt(4);
var n6 = num.charAt(5);
var n7 = num.charAt(6);
hap += n1*8+n2*9+n3*2+n4*3+n5*4+n6*5;
hap %= 11;
hap = 11 - hap;
hap %= 10;
if(hap != n7)
return false;
return true;
}
function sp_form_reset( form )
{
form.reset();
}
var openWin = null;
function sp_window_open( url , name , option )
{
var opt = 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=auto,resizable=yes,left=0,top=0';
if( !is_null( option ) )
opt = opt + ',' + option;
if( !openWin || openWin.closed )
{
openWin = window.open( url , name , opt );
openWin.focus();
}
else
{
openWin = window.open( url , name , opt );
openWin.focus();
}
}
function sp_window_close()
{
if( openWin && !openWin.closed )
{
self.window.focus();
openWin.close();
}
}
function is_null( obj )
{
if( obj.value == "" )
return true;
return false;
}
function is_space( string )
{
for( var i = 0; i < string.length; i++ )
if( string.charAt( i ) != ' ' )
return false;
return true;
}
function is_numeric( string )
{
if( is_null( string ) )
return false;
for( var i = 0; i < string.length; i++ ) {
if( string.charAt( i ) >= '0' && string.charAt( i ) <= '9' )
continue;
else
return false;
}
return true;
}css/common.css
a:link {color:#000000; text-decoration : none;}
a:visited {color:#0000FF; text-decoration : none;}
a:hover {color:#00FFFF; text-decoration : underline;}
a.m1 {font-size : 9pt; text-decoration : none; COLOR: #0000FF}
a.m1:visited {font-size : 9pt; text-decoration : none; COLOR: #0000FF}
a.m1:active {font-size : 9pt; text-decoration : underline; COLOR: #0000FF}
a.m1:hover {font-size : 9pt; text-decoration : underline; COLOR: #FF3300}
a.m2 {font-size : 10pt; text-decoration : none}
a.m2:visited {font-size : 10pt; text-decoration : none}
a.m2:active {font-size : 10pt; text-decoration : underline}
a.m2:hover {font-size : 10pt; text-decoration : underline}
.menu {color: #ffffff; font-size: 11pt; font-weight: bold; }
.t1 {font-size : 9pt; line-HEIGHT:140%;}
.t2 {font-size : 10pt;}
.TXTFLD {FONT-SIZE:9pt; COLOR:#000000; BORDER:1x SOLID #000000}
.TXTFLD1 {FONT-SIZE:9pt; COLOR:#000000; BORDER:0 SOLID #000000}
02. 처리(출력)페이지
- 클라이언트는 form태그(form.jsp)를 통해 action.jsp를 요청하는 것임
- 만약 클라이언트가 action.jsp를 직접 요청한다면 비정상적인 요청임!
join_action.jsp
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
//<%-- 입력페이지(join_form.jsp)에서 전달된 회원정보를 반환받아 클라이언트에게 전달하는 JSP 문서 - 처리(출력)페이지 --%>
//<%-- 원래는 회원정보를 반환받아 테이블에 저장하는 것이 맞지만, 일단 클라이언트에게 전달할 것임 --%>
<%
//1.
//비정상적인 요청에 대한 처리
//=>클라이언트에게 에러코드 전달하거나 에러페이지(입력페이지)로 이동하기 위한 URL 주소 전달
//request.getMethod() : 클라이언트의 요청방식(GET or POST)을 반환하는 메소드
if(request.getMethod().equals("GET")) { //JSP문서를 [GET]방식으로 요청한 경우 - 비정상적인 요청
//방법1.[에러코드로 응답]
//response.sendEror(int sc) : 클라이언트에게 에러코드(4XX or 5XX)를 전달하는 메소드
//=> 응답 관련 상태코드는 HttpServletResponse 인터페이스의 상수(Constant)로 제공
//response.sendError(400);
response.sendError(HttpServletResponse.SC_METHOD_NOT_ALLOWED); //에러코드 405 전달
return;
//방법2.[URL주소로 응답 - 에러페이지로 이동]
//response.sendRedirect(String location) : 클라이언트에게 요청 URL 주소를 전달하는 메소드
//=> 클라이언트는 요청 URL 주소를 전달받아 브라우저의 URL 주소를 변경하고 웹프로그램을 요청하여 결과를 응답받아 출력 - 리다이렉트 이동
//=> 리다이렉트 이동의 URL 주소는 서버의 최상위 디렉토리를 기준으로 절대경로로 표현 가능
response.sendRedirect("/jsp/error/error_400.jsp"); //절대경로 - 에러페이지 이동
return;
///방법3.[자바스크립트로 응답]
//출력스트림에 자바스크립트를 저장하여 클라이언트에게 응답함
//=> 자바스크립트는 리다이렉트이동 기능 사용 못하고, location객체 사용 가능
//out.println()메소드 이용
out.println("<script type='text/javascript'>");
out.println("alert('비정상적인 방법으로 요청하였습니다.')");
out.println("location.href='join_form.jsp';");
out.println("</script>");
return;
//방법4.[URL주소로 응답 - 입력페이지로 이동 단,사용자에게 메세지도 함께 전달] - 비권장
//질의문자열(QueryString)을 이용하여 요청 JSP 문서에 "값 전달 가능"
//=> 질의문자열을 이용하여 전달할 수 있는 값은 영문자, 숫자, 일부 특수문자만으로 구성된 값만 가능
//문제점) 영문자, 숫자, 일부 특수문자를 제외한 문자는 [질의문자열로 전달 불가능]
//해결법) 영문자, 숫자, 일부 특수문자를 제외한 문자를 [부호화 처리하여 전달]
//URLEncoder.encode(String message, String charset) : 문자열을 전달받아 원하는 문자형태의 문자열로 부호화 처리하여 반환하는 메소드
//=>Javascript의 encodeURIComponent 함수와 동일
//"비정상적인 방법으로 요청하였습니다." 를 "utf-8" 방식으로 부호화처리하여 전달
String message = URLEncoder.encode("비정상적인 방법으로 요청하였습니다.","utf-8");
response.sendRedirect("join_form.jsp?message="+message);
//response.sendRedirect("join_form.jsp?message=비정상적인 방법으로 요청하였습니다."); //상대경로 - 입력페이지 이동
//response.sendRedirect("/jsp/implicit/join_form.jsp"); //절대경로 - 입력페이지 이동
return;
//방법5.[URL주소로 응답 - 입력페이지로 이동 + 임의값1사용] - 권장
response.sendRedirect("join_form.jsp?message=1"); //입력페이지 이동
return;
//방법6.[session객체에 속성값을 저장해서 모든 JSP문서에서 공유]
// ssession 내장객체에 에러메세지를 속성값으로 저장
//=> 같은 클라이언트의 모든 JSP 문서에서 속성값을 반환받아 사용 가능
session.setAttribute("message", "비정상적인 방법으로 요청하였습니다.");
response.sendRedirect("join_form.jsp"); //전달값 없이 입력페이지 이동
return;
}
//2.
//[POST] 방식으로 요청하여 전달된 값에 대한 캐릭터셋 변경
//request.setCharacterEncoding(String encoding) : 리퀘스트 메시지 몸체부에 저장된 값에 대한 문자형태(CharacterSet)을 변경하는 메소드
//=>기본값 : ISO-8859-1
request.setCharacterEncoding("utf-8");
//3.
//전달값을 반환받아 저장
//request.getParameter(String name) : 전달값을 문자열(String 객체)로 반환하는 메소드
//=> 입력태그에 name 속성값 또는 질의문자열(QueryString)의 이름으로 전달값 구분
//=> 매개변수의 이름으로 전달된 값이 없는 경우 null 반환 - error 안떨어짐
String id=request.getParameter("id");
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");
//request.getParameterValues(String name) : 같은 이름으로 전달되는 모든 값을 문자열(String 객체) 배열로 반환하는 메소드
String[] hobby=request.getParameterValues("hobby");
String profile=request.getParameter("profile");
%>반응형
'jsp' 카테고리의 다른 글
| [jsp] 9. JSP 모델 1 VS JSP 모델 2 (0) | 2024.07.08 |
|---|---|
| [jsp] 8. 로그인 프로그램 (0) | 2024.07.07 |
| [jsp] 6. JSP 내장객체의 사용범위(Scope) (0) | 2024.07.06 |
| [jsp] 5. JSP 내장객체 (0) | 2024.07.05 |
| [jsp] 4. 커스텀 태그 클래스 등록해 사용하는 법 (taglib Directive) (0) | 2024.07.05 |
