mvcPageWEB-INF 폴더의 member.properties 하단에 다음의 내용을 추가/member/registerUser.do=kr.member.action.RegisterUserAction
/member/loginForm.do=kr.member.action.LoginFormAction
/member/login.do=kr.member.action.LoginAction
/member/logout.do=kr.member.action.LogoutAction
/member/myPage.do=kr.member.action.MyPageAction
/member/modifyUserForm.do=kr.member.action.ModifyUserFormAction
/member/modifyUser.do=kr.member.action.ModifyUserAction
/member/modifyPasswordForm.do=kr.member.action.ModifyPasswordFormAction
css 폴더의 layout.css에서 다음의 내용을 수정form{
width:600px;
margin:0 auto;
padding:10px 10px 10px 30px;
border:1px solid #000;
}
label{
width:130px;
float:left;
}
RegisterUserAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
public class RegisterUserAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 전송된 데이터 인코딩 처리
request.setCharacterEncoding("UTF-8");
// 자바빈 생성
MemberVO member = new MemberVO();
member.setId(request.getParameter("id"));
member.setName(request.getParameter("name"));
member.setPasswd(request.getParameter("passwd"));
member.setPhone(request.getParameter("phone"));
member.setEmail(request.getParameter("email"));
member.setZipcode(request.getParameter("zipcode"));
member.setAddress1(request.getParameter("address1"));
member.setAddress2(request.getParameter("address2"));
MemberDAO dao = MemberDAO.getInstance();
dao.insertMember(member);
// JSP 경로 반환
return "/WEB-INF/views/member/registerUser.jsp";
}
}
LoginFormAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import kr.controller.Action;
public class LoginFormAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
// JSP 경로 반환
return "/WEB-INF/views/member/loginForm.jsp";
}
}
LoginAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
public class LoginAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 전송된 데이터 인코딩 처리
request.setCharacterEncoding("UTF-8");
// 전송된 데이터 반환
String id = request.getParameter("id");
String passwd = request.getParameter("passwd");
MemberDAO dao = MemberDAO.getInstance();
MemberVO member = dao.checkMember(id);
boolean check = false;
if(member!=null) { // 아이디 존재
// 비밀번호 일치 여부 체크
check = member.isCheckedPassword(passwd); // isCheckedPassword() 메서드에서 탈퇴 및 정지 회원은 false 반환
// 로그인 실패시 auth 값을 이용하기 위해 request 영역에 저장
request.setAttribute("auth", member.getAuth());
}
if(check) { // 인증 성공
// 로그인 처리
HttpSession session = request.getSession();
session.setAttribute("user_num", member.getMem_num());
session.setAttribute("user_id", member.getId());
session.setAttribute("user_auth", member.getAuth());
session.setAttribute("user_photo", member.getPhoto());
// 인증 성공시 호출
return "redirect:/main/main.do";
}
// 인증 실패시 호출
return "/WEB-INF/views/member/login.jsp";
}
}
LogoutAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import kr.controller.Action;
public class LogoutAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
// 세션의 모든 속성 제거
session.invalidate();
// 리다이렉트 처리
return "redirect:/main/main.do";
}
}
MyPageAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
public class MyPageAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
Integer user_num = (Integer)session.getAttribute("user_num");
if(user_num==null) { // 로그인되어 있지 않은 경우
return "redirect:/member/loginForm.do"; // 클라이언트가 호출 가능한 영역(*.do 형식)은 redirect로 처리
}
// 로그인되어 있는 경우
MemberDAO dao = MemberDAO.getInstance();
MemberVO member = dao.getMember(user_num);
request.setAttribute("member", member);
// JSP 경로 반환
return "/WEB-INF/views/member/myPage.jsp"; // 클라이언트가 호출 불가한 영역(WEB-INF 폴더 하위의 JSP 파일들)은 forward로 처리
}
}
ModifyUserFormAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
public class ModifyUserFormAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
Integer user_num = (Integer)session.getAttribute("user_num");
if(user_num==null) { // 로그인되어 있지 않은 경우
return "redirect:/member/loginForm.do";
}
// 로그인되어 있는 경우
MemberDAO dao = MemberDAO.getInstance();
MemberVO member = dao.getMember(user_num);
request.setAttribute("member", member);
// JSP 경로 반환
return "/WEB-INF/views/member/modifyUserForm.jsp";
}
}
ModifyUserAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import kr.controller.Action;
import kr.member.dao.MemberDAO;
import kr.member.vo.MemberVO;
public class ModifyUserAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
Integer user_num = (Integer)session.getAttribute("user_num");
if(user_num==null) { // 로그인되어 있지 않은 경우
return "redirect:/member/loginForm.do";
}
// 로그인되어 있는 경우
// 전송된 데이터 인코딩 처리
request.setCharacterEncoding("UTF-8");
// 자바빈 생성
MemberVO member = new MemberVO();
member.setMem_num(user_num);
member.setName(request.getParameter("name"));
member.setPhone(request.getParameter("phone"));
member.setEmail(request.getParameter("email"));
member.setZipcode(request.getParameter("zipcode"));
member.setAddress1(request.getParameter("address1"));
member.setAddress2(request.getParameter("address2"));
MemberDAO dao = MemberDAO.getInstance();
dao.updateMember(member);
// JSP 경로 반환
return "/WEB-INF/views/member/modifyUser.jsp";
}
}
ModifyPasswordFormAction 생성package kr.member.action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import kr.controller.Action;
public class ModifyPasswordFormAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
Integer user_num = (Integer)session.getAttribute("user_num");
if(user_num==null) { // 로그인되어 있지 않은 경우
return "redirect:/member/loginForm.do";
}
// JSP 경로 반환
return "/WEB-INF/views/member/modifyPasswordForm.jsp";
}
}
member 폴더에 새 JSP 파일 registerUser.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입 완료</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
</head>
<body>
<div class="page-main">
<jsp:include page="/WEB-INF/views/common/header.jsp"/> <%-- <jsp:include> 태그 사용시에는 서블릿으로 변환되면서 Context Path를 인식하기 때문에 EL로 Context Path를 읽어오지 않아도 됨 --%>
<h2>회원 가입 완료</h2>
<div class="result-display">
<div class="align-center">
회원 가입이 완료되었습니다.
<p>
<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
</div>
</div>
</div>
</body>
</html>
member 폴더에 새 JSP 파일 loginForm.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('#login_form').submit(function() {
let isValid = true;
$('li').each(function() {
let input = $(this).find('input');
if(input.val().trim()=='') {
let word = $(this).find('label').text();
let post = (word.charCodeAt(word.length - 1) - '가'.charCodeAt(0)) % 28 > 0 ? '을' : '를';
alert(word + post + ' 입력하세요!');
input.val('').focus();
isValid = false;
return false;
}
}); // end of each
return isValid;
}); // end of submit
});
</script>
</head>
<body>
<div class="page-main">
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<h2>로그인</h2>
<form id="login_form" action="login.do" method="post">
<ul>
<li>
<label for="id">아이디</label>
<input type="text" name="id" id="id" maxlength="12">
</li>
<li>
<label for="passwd">비밀번호</label>
<input type="password" name="passwd" id="passwd" maxlength="12">
</li>
</ul>
<div class="align-center">
<input type="submit" value="로그인">
<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
</div>
</form>
</div>
</body>
</html>
member 폴더에 새 JSP 파일 login.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:choose>
<c:when test="${auth<2}">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 정보</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
</head>
<body>
<div class="page-main">
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<h2>회원 정보</h2>
<div class="result-display">
<div class="align-center">
<c:if test="${auth==1}">
정지된 회원 아이디입니다.
</c:if>
<c:if test="${auth==0}">
탈퇴한 회원 아이디입니다.
</c:if>
<p>
<input type="button" value="홈으로" onclick="location.href = '${pageContext.request.contextPath}/main/main.do';">
</div>
</div>
</div>
</body>
</html>
</c:when>
<c:otherwise>
<script type="text/javascript">
alert('아이디 또는 비밀번호가 불일치합니다!');
history.go(-1);
</script>
</c:otherwise>
</c:choose>
member 폴더에 새 JSP 파일 myPage.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
let photo_path = $('.my-photo').attr('src'); // 이미지 경로를 담을 변수; 원래 이미지를 처음 프로필 사진으로 지정
let my_photo; // File 객체를 담을 변수
$('#photo_btn').click(function() {
$('#photo_choice').show();
$(this).hide(); // 수정 버튼 감추기
}); // end of click
// 이미지 미리보기 취소
$('#photo_reset').click(function() {
$('.my-photo').attr('src', photo_path); // 미리보기 전 원래 이미지로 되돌리기
$('#photo').val(''); // <input type="file"> 태그에서 선택한 파일 정보 지우기
$('#photo_choice').hide();
$('#photo_btn').show(); // 수정 버튼 보이기
}); // end of click
// 이미지 선택 및 이미지 미리보기
$('#photo').change(function() {
my_photo = this.files[0];
if(!my_photo) {
$('.my-photo').attr('src', photo_path); // 파일 선택 취소시 원래 이미지로 되돌리기
return;
}
if(my_photo.size>1024*1024) {
alert('1MB까지만 업로드 가능합니다!');
$(this).val('');
return;
}
let reader = new FileReader();
reader.readAsDataURL(my_photo);
reader.onload = function() {
$('.my-photo').attr('src', reader.result);
}; // end of onload
}); // end of change
// 이미지 전송
$('#photo_submit').click(function() {
if($('#photo').val()=='') {
alert('이미지를 선택하세요!');
$('#photo').focus();
return;
}
// 파일 전송
let form_data = new FormData(); // FormData 객체에 저장된 key와 value는 <form> 태그의 입력 필드와 같은 효과
form_data.append('photo', my_photo); // photo는 식별자, my_photo는 선택된 파일 정보
$.ajax({
url:'updateMyPhoto.do',
type:'post',
data:form_data,
dataType:'json',
contentType:false, // 기본값은 "application/x-www-form-urlencoded; charset=UTF-8"이며, "multipart/form-data"로 전송되게 하기 위해 false로 설정
processData:false, // true일 경우 jQuery 내부적으로 key와 value를 Query String으로 변환; 일반 문자열이 아니라 파일로 전송되어야 하므로 false로 설정
enctype:'multipart/form-data',
success:function(param) {
if(param.result=='logout') {
alert('로그인 후 사용하세요!');
}
else if(param.result=='success') {
alert('프로필 사진이 수정되었습니다.');
photo_path = $('.my-photo').attr('src'); // 원래 이미지를 수정한 프로필 사진으로 갱신
$('#photo').val('');
$('#photo_choice').hide();
$('#photo_btn').show();
}
else {
alert('파일 전송 오류 발생!');
}
},
error:function() {
alert('네트워크 오류 발생!');
}
}); // end of ajax
}); // end of click
});
</script>
</head>
<body>
<div class="page-main">
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<h2>회원 정보</h2>
<div class="mypage-div">
<h3>프로필 사진</h3>
<ul>
<li>
<c:if test="${empty member.photo}">
<img src="${pageContext.request.contextPath}/images/face.png" width="200" height="200" class="my-photo">
</c:if>
<c:if test="${!empty member.photo}">
<img src="${pageContext.request.contextPath}/upload/${member.photo}" width="200" height="200" class="my-photo">
</c:if>
</li>
<li>
<div class="align-center">
<input type="button" value="수정" id="photo_btn">
</div>
<div id="photo_choice" style="display: none;">
<input type="file" id="photo" accept="image/gif, image/png, image/jpeg">
<input type="button" value="전송" id="photo_submit">
<input type="button" value="취소" id="photo_reset">
</div>
</li>
</ul>
<h3>회원 탈퇴</h3>
<ul>
<li>
<input type="button" value="회원 탈퇴" onclick="location.href = 'deleteUserForm.do';"> <%-- myPage.do와 같은 폴더에 있으므로 Context Path 생략 가능 --%>
</li>
</ul>
</div>
<div class="mypage-div">
<h3>연락처</h3>
<ul>
<li>
이름 : ${member.name}
</li>
<li>
전화번호 : ${member.phone}
</li>
<li>
이메일 : ${member.email}
</li>
<li>
우편번호 : ${member.zipcode}
</li>
<li>
주소 : ${member.address1} ${member.address2}
</li>
<li>
가입일 : ${member.reg_date}
</li>
<c:if test="${!empty member.modify_date}">
<li>
최근 정보 수정일 : ${member.modify_date}
</li>
</c:if>
<li>
<input type="button" value="연락처 수정" onclick="location.href = 'modifyUserForm.do';">
</li>
</ul>
<h3>비밀번호 수정</h3>
<ul>
<li>
<input type="button" value="비밀번호 수정" onclick="location.href = 'modifyPasswordForm.do';">
</li>
</ul>
</div>
</div>
</body>
</html>
member 폴더에 새 JSP 파일 modifyUserForm.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보 수정</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('#modify_form').submit(function() {
let isValid = true; // submit()의 return 값 지정
$('li').each(function() {
let input = $(this).find('input[type!="button"]'); // button이 아닌 <input> 태그들만 선택
if(!input.val().trim()) {
let word = $(this).find('label').text();
let post = (word.charCodeAt(word.length-1) - '가'.charCodeAt(0)) % 28 > 0 ? '을' : '를';
alert(word + post + ' 입력하세요!');
input.val('').focus();
isValid = false; // submit()의 return 값 지정
return false; // each() 루프 중단
}
}); // end of each
return isValid;
}); // end of submit
});
</script>
</head>
<body>
<div class="page-main">
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<h2>회원 정보 수정</h2>
<form action="modifyUser.do" method="post" id="modify_form">
<ul>
<li>
<label for="name">이름</label>
<input type="text" name="name" id="name" value="${member.name}" maxlength="10">
</li>
<li>
<label for="phone">전화번호</label>
<input type="text" name="phone" id="phone" value="${member.phone}" maxlength="15">
</li>
<li>
<label for="email">이메일</label>
<input type="email" name="email" id="email" value="${member.email}" maxlength="50">
</li>
<li>
<label for="zipcode">우편번호</label>
<input type="text" name="zipcode" id="zipcode" value="${member.zipcode}" maxlength="5">
<input type="button" value="우편번호 찾기" onclick="sample2_execDaumPostcode()">
</li>
<li>
<label for="address1">주소</label>
<input type="text" name="address1" id="address1" value="${member.address1}" maxlength="30">
</li>
<li>
<label for="address2">나머지 주소</label>
<input type="text" name="address2" id="address2" value="${member.address2}" maxlength="30">
</li>
</ul>
<div class="align-center">
<input type="submit" value="수정">
<input type="button" value="MyPage" onclick="location.href='myPage.do';">
</div>
</form>
<!-- 우편번호 스크립트 시작 -->
<!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
// 우편번호 찾기 화면을 넣을 element
var element_layer = document.getElementById('layer');
function closeDaumPostcode() {
// iframe을 넣은 element를 안보이게 한다.
element_layer.style.display = 'none';
}
function sample2_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
//(주의)address1에 참고항목이 보여지도록 수정
// 조합된 참고항목을 해당 필드에 넣는다.
//(수정) document.getElementById("address2").value = extraAddr;
}
//(수정) else {
//(수정) document.getElementById("address2").value = '';
//(수정) }
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
//(수정) + extraAddr를 추가해서 address1에 참고항목이 보여지도록 수정
document.getElementById("address1").value = addr + extraAddr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("address2").focus();
// iframe을 넣은 element를 안보이게 한다.
// (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
element_layer.style.display = 'none';
},
width : '100%',
height : '100%',
maxSuggestItems : 5
}).embed(element_layer);
// iframe을 넣은 element를 보이게 한다.
element_layer.style.display = 'block';
// iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
initLayerPosition();
}
// 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
// resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
// 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
function initLayerPosition(){
var width = 300; //우편번호서비스가 들어갈 element의 width
var height = 400; //우편번호서비스가 들어갈 element의 height
var borderWidth = 5; //샘플에서 사용하는 border의 두께
// 위에서 선언한 값들을 실제 element에 넣는다.
element_layer.style.width = width + 'px';
element_layer.style.height = height + 'px';
element_layer.style.border = borderWidth + 'px solid';
// 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px';
element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px';
}
</script>
<!-- 우편번호 스크립트 끝 -->
</div>
</body>
</html>
member 폴더에 새 JSP 파일 modifyUser.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script type="text/javascript">
alert('회원 정보를 수정하였습니다.');
location.href = 'myPage.do';
</script>
member 폴더에 새 JSP 파일 modifyPasswordForm.jsp 생성<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비밀번호 수정</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('#password_form').submit(function() {
let isValid = true; // submit()의 return 값 지정
$('li').each(function() {
let input = $(this).find('input');
if(!input.val().trim()) {
let word = $(this).find('label').text();
let post = (word.charCodeAt(word.length-1) - '가'.charCodeAt(0)) % 28 > 0 ? '을' : '를';
alert(word + post + ' 입력하세요!');
input.val('').focus();
isValid = false; // submit()의 return 값 지정
return false; // each() 루프 중단
}
}); // end of each
if($('#passwd').val()!=$('#cpasswd').val()) {
if(isValid) alert('새 비밀번호와 새 비밀번호 확인이 불일치합니다!');
$('#cpasswd').val('').focus();
isValid = false; // submit()의 return 값 지정;
}
return isValid;
}); // end of submit
// 새 비밀번호 확인까지 명시한 후 다시 새 비밀번호를 수정하려고 하면 새 비밀번호 확인을 초기화
$('#passwd').keyup(function() {
$('#cpasswd').val('');
$('#message_cpasswd').text('');
}); // end of keyup
// 새 비밀번호와 새 비밀번호 확인 일치 여부 체크
$('#cpasswd').keyup(function() {
if($('#passwd').val()==$('#cpasswd').val()) {
$('#message_cpasswd').text('새 비밀번호 일치');
}
else {
$('#message_cpasswd').text('');
}
}); // end of keyup
});
</script>
</head>
<body>
<div class="page-main">
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<h2>비밀번호 수정</h2>
<form action="modifyPassword.do" method="post" id="password_form">
<ul>
<li>
<label for="id">아이디</label>
<input type="text" name="id" id="id" maxlength="12">
</li>
<li>
<label for="origin_passwd">현재 비밀번호</label>
<input type="password" name="origin_passwd" id="origin_passwd" maxlength="12">
</li>
<li>
<label for="passwd">새 비밀번호</label>
<input type="password" name="passwd" id="passwd" maxlength="12">
</li>
<li>
<label for="cpasswd">새 비밀번호 확인</label>
<input type="password" name="cpasswd" id="cpasswd" maxlength="12">
<span id="message_cpasswd"></span>
</li>
</ul>
<div class="align-center">
<input type="submit" value="비밀번호 수정">
<input type="button" value="MyPage" onclick="location.href='myPage.do';">
</div>
</form>
</div>
</body>
</html>