6월25~27일 복습하기
주말내내 회원가입 Servlet/JSP 를 다시 만들어 보았다.
MVC2 모델 방식으로
1.View(jsp로 만듬)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 연습하기</title>
<!-- 자바스크립트 파일 연결 -->
<script type="text/javascript" src="member_01.js"></script>
</head>
<body>
<h1>로그인</h1>
<table>
<!-- LoginServlet01 으로 post방식으로 이동 -->
<form action="login.do" method="post" name="frm">
<tr>
<td>아이디:</td>
<td><input type="text" name="userid" ></td>
</tr>
<tr>
<td>비밀번호:</td>
<td><input type="password" name="pwd" ></td>
</tr>
<tr>
<!-- LoginServlet01 으로 이동하여 result의 결과값에따라 message 다르게 나옴 -->
<!-- JoinServlet01 으로 이동하여 result의 결과값에따라 message 다르게 나옴 -->
<td colspan="2">${message}</td>
</tr>
</table>
<td colspan="2" align="center">
<!-- 로그인버튼을 누르면 onclick에 의하여 자바스크립트로 넘어가서 유효성을 체크하고
위에 설정해준 방식대로 LoginServlet01 으로 post방식으로 이동-->
<input type="submit" value="로그인" onclick="return loginCheck()">
<input type="reset" value="취소">
<!-- 회원가입 폼으로 이동 -->
<input type="button" value="회원 가입" onclick="location.href='join_01.jsp'"></td>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script type="text/javascript" src="member_01.js"></script>
</head>
<body>
<h2>회원가입</h2>
<!-- JoinServlet01으로 이동, post형식으로 이동 -->
<form action="Join.do" method="post" name="frm">
<table>
<tr>
<td>이름</td>
<td><input type="text" name="name" size="20"></td>
</tr>
<tr>
<td>아이디</td>
<td>
<!-- 나중에 idok 함수에서 값을 넣어준다. -->
<input type="text" name="userid" size="20">
<input type="hidden" name="reid" size="20">
<!-- 자바스크립트 idCheck() 함수로 이동-->
<input type="button" value="중복체크" onclick="idCheck()">
*4글자 이상
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type="password" name="pwd" size="20">
</td>
</tr>
<tr>
<td>비밀번호확인</td>
<td>
<input type="password" name="pwd_check" size="20">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- 자바스크립트 joinCheck()로 유효성 체크 -->
<input type="submit" value="확인" onclick="return joinCheck()">
<input type="reset" value="취소">
</td>
</tr>
<tr>
<!-- JoinServlet01에서 받은 message 출력 -->
<td colspan="2">${message}</td>
</tr>
</table>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- LoginServlet01 에서 result 값 1이나와 main_01.jsp로 이동-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 전용 페이지</title>
<script type="text/javascript" src="member_01.js"></script>
</head>
<body>
<h2>회원 전용 페이지</h2>
<form action="logout.do">
<table>
<tr>
<!-- LoginServlet01 에서 session.setAttribute로 속성을 mVo객체로 저장한
loginUser에서 userid를 꺼냄-->
<td>안녕하세요. ${loginUser.userid} 님!!!</td>
</tr>
<tr>
<td>
<!-- LogoutServlet01 서블릿으로 이동 -->
<input type="submit" value="로그아웃">
<!-- 버튼 클릭시 href로 이동하기 때문에 MemberUpdateServlet01으로 이동할때 get방식으로 이동한다.
이동할때 session.setAttribute로 속성을 mVo객체로 저장한 loginUser에서 userid를 가지고 이동하렴-->
<input type="button" value="회원정보변경" onclick=" location.href='memberUpdate.do? userid=${loginUser.userid}'">
</td>
</tr>
</table>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원수정</title>
<script type="text/javascript" src="member_01.js"></script>
</head>
<body>
<h2>회원 수정</h2>
<form action="memberUpdate.do" method="post" name="frm">
<table>
<tr>
<td>이름</td>
<!-- session객체에 있는 loginUser의 name을 넣어줌 -->
<td><input type="text" name="name" size="20" value= "${loginUser.name}" readonly></td>
</tr>
<tr>
<td>아이디</td> <!-- session객체에 있는 loginUser의 userid을 넣어줌 -->
<td><input type="text" name="userid" size="20" value="${loginUser.userid}" readonly></td>
</tr>
<tr>
<td>비밀번호</td><!-- session객체에 있는 loginUser의 pwd을 넣어줌 -->
<td><input type="text" name="pwd" size="20" value="${loginUser.pwd}" ></td>
</tr>
<tr>
<td><!-- id유효성 체크 -->
<input type="submit" value="확인" onclick="return joinCheck()">
<input type="reset" value="취소" >
</td>
</tr>
</table>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 확인</title>
<script type="text/javascript" src="member_01.js"></script>
</head>
<body>
<h2>아이디 중복 확인</h2>
<!-- idCheck.do로 이동, get방식으로 -->
<form action="idCheck.do" method="get" name="frm">
<!-- idCheckServlet01에서 request객체에 저장된 userid -->
아이디: <input type="text" name="userid" value="${userid}">
<!-- idCheck.do로 이동, get방식으로, 창을 띄어두고 가입할수있는 아이디를 여러번 확인할때 필요하므로 '중복체크'버튼을 만듬-->
<input type="submit" value="중복 체크"><br>
<!-- 만약 result가 1이면 아래 실행코드를 실행해죠-->
<c:if test="${result==1}">
<script type="text/javascript">
opener.document.frm.userid.value="";
</script>
${userid}는 이미 사용 중인 아이디 입니다.
</c:if>
<!-- 만약 result가 -1이면 아래 실행코드를 실행해죠-->
<c:if test="${result==-1}">
${userid}는 사용 가능한 아이디입니다.
<input type="button" value="사용" onclick="idok('${userid}')"> <!-- 자바스크립트 idok로 request객체에 저장된 userid를 가지고 -->
</c:if>
</form>
</body>
</html>2.자바스크립트
//login_01.jsp 폼의 로그인 유효성 체크
function loginCheck(){
if(document.frm.userid.value.length==0){
alert("아이디를 써주세요.");
frm.userid.focus();
return false;
}
if(document.frm.pwd.value.length==""){
alert("비밀번호를 써주세요.");
frm.pwd.focus();
return false;
}
return ture;
}
//아이디 유효성 체크
function idCheck(){
if(document.frm.userid.value==""){
alert('아이디를 입력하세요');
document.frm.userid.focus();
return true;
}
//url 선언, idCheckServlet01으로 이동시 userid=idcheck_01.jsp의 userid의 입력값을 가지고 가죠
var url="idCheck.do?userid="+document.frm.userid.value;
//새창을 열기위한 자바스크립트 window.open(url, name, specs);
window.open(url,"_blank_1","toolbar=no, menubar=no, scrollbars=yes, resizable=no,width=450,height=200");
}
//사용 버튼을 눌렀을때 idok 함수호출
function idok(userid){
//부모창인 join_01.jsp에 idcheck_01.jsp에서 읽어온 값을 대입해 주고 창을 스스로 닫는 기능
opener.frm.userid.value=document.frm.userid.value;
opener.frm.reid.value=document.frm.userid.value;
self.close();
}
//가입시 유효성 체크
function joinCheck(){
if(document.frm.name.value.length==0){
alert("이름을 써주세요");
frm.name.focus();
return false;
}
if(document.frm.userid.value.length==0){
alert("아이디를 써주세요");
frm.userid.focus();
return false;
}
if(document.frm.userid.value.length<4){
alert("4글자 이상");
frm.userid.focus();
return false;
}
if(document.frm.pwd.value.length==0){
alert("비밀번호를 써주세요");
frm.pwd.focus();
return false;
}
if(document.frm.pwd_check.value==""){
alert("비밀번호확인 써주세요");
frm.pwd_check.focus();
return false;
}
if(document.frm.pwd.value!=
document.frm.pwd_check.value){
alert("암호가 일치 하지 않습니다.");
frm.pwd_check.focus();
return false;
}
if(document.frm.reid.value.length==0){
alert("중복 체크를 하지 않았습니다.");
frm.userid.focus();
return false;
}
return true;
}
좋은개발자가 되기위한 삽질기록 노트