이전 users 및 private () 게시글에서 이어지는 내용이다.
2022.08.22 - [Servlet&JSP] - Step04_Final (users, 회원가입, 로그인처리)
2022.08.22 - [Servlet&JSP] - Step04_Final (filter, login filter)
2022.08.23 - [Servlet&JSP] - Step04_Final (context path 정리, 페이징 처리)
2022.08.23 - [Servlet&JSP] - Step04_Final (users/private, 가입정보 관리)
singup_form, checkid, pwd_updateform, pwd_update, delete
비밀번호 수정, 회원 탈퇴 기능에 관하여 공부해보자
singup_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>signup_form.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>회원 가입 폼 입니다.</h1>
<form action="signup.jsp" method="post" id="signupForm">
<div class="mb-3">
<label class="control-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id"/>
<small class="form-text text-muted">영문자 소문자로 시작하고 5글자~10글자 이내로 입력하세요</small>
<div class="invalid-feedback">사용할 수 없는 아이디 입니다.</div>
</div>
<div class="mb-3">
<label class="control-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text text-muted">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-3">
<label class="control-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" name="pwd2" id="pwd2"/>
</div>
<div class="mb-3">
<label class="control-label" for="email">이메일</label>
<input class="form-control" type="text" name="email" id="email"/>
<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
</div>
<button class="btn btn-outline-primary" type="submit">가입</button>
</form>
</div>
<script>
//유효성 여부를 저장할 변수를 만들고 초기값 대입
let isIdValid=false;
let isPwdValid=false;
let isEmailValid=false;
// id 를 입력 할때 마다 호출되는 함수 등록
document.querySelector("#id").addEventListener("input", function(){
//input 요소의 참조값을 self 에 미리 담아 놓기
const self=this;
//일단 2개의 클래스를 모두 제거 한다음
self.classList.remove("is-valid");
self.classList.remove("is-invalid");
//1. 현재 입력한 아이디를 읽어와서
const inputId=this.value;
//아이디를 검증할 정규표현식 객체
const reg=/^[a-z].{4,9}$/;
//만일 입력한 아이디가 정규표현식을 통과 하지 못한다면 빨간색으로 표시하고 함수를 여기서 바로 종료 시키기
if(!reg.test(inputId)){
self.classList.add("is-invalid");
isIdValid=false;
return;
}
//2. 서버에 보내서(페이지 전환 없이)
//3. 사용 가능 여부를(이미 존재하는지 여부) 함수로 응답 받는다.
fetch("${pageContext.request.contextPath }/users/checkid.jsp?inputId="+inputId)
.then(function(response){
//서버에서 응답하는 문자열의 형식이 json 형식이면 response.json();
//그 이외의 형식이면 response.text(); 를 호출해서 리턴해 준다.
return response.json();
})
.then(function(data){
//서버에서 출력한 json 문자열이 object 로 변환되어서 함수에 전달된다.
console.log(data);
//data 는 {isExist:true} or {isExist:false} 형식의 object 이다.
if(data.isExist){//이미 존재하면 사용할수 없는 아이디
self.classList.add("is-invalid");
isIdValid=false;
}else{
self.classList.add("is-valid");
isIdValid=true;
}
});
});
//비밀번호를 확인 하는 함수
function checkPwd(){
document.querySelector("#pwd").classList.remove("is-valid");
document.querySelector("#pwd").classList.remove("is-invalid");
const pwd=document.querySelector("#pwd").value;
const pwd2=document.querySelector("#pwd2").value;
//비밀번호를 검증할 정규 표현식
let reg=/[\W]/;
//만일 비밀번호가 정규 표현식을 통과 하지 못한다면
if(!reg.test(pwd)){
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
return; //함수를 여기서 끝내라
}
if(pwd != pwd2){//만일 비밀번호 입력란과 확인란이 다르다면
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
}else{
document.querySelector("#pwd").classList.add("is-valid");
isPwdValid=true;
}
}
document.querySelector("#pwd").addEventListener("input", function(){
//비밀번호를 검증하는 함수 호출
checkPwd();
});
document.querySelector("#pwd2").addEventListener("input", function(){
checkPwd();
});
document.querySelector("#email").addEventListener("input", function(){
this.classList.remove("is-valid");
this.classList.remove("is-invalid");
//입력한 이메일
const inputEmail=this.value;
//이메일을 검증할 정규 표현식
const reg=/@/;
if(!reg.test(inputEmail)){
this.classList.add("is-invalid");
isEmailValid=false;
}else{
this.classList.add("is-valid");
isEmailValid=true;
}
});
//폼에 submit 이벤트가 일어 났을때 실행할 함수 등록
document.querySelector("#signupForm").addEventListener("submit", function(event){
//폼 전체의 유효성 여부
let isFormValid = isIdValid && isPwdValid && isEmailValid;
if(!isFormValid){
//폼 제출 막기
event.preventDefault();
}
});
</script>
</body>
</html>자바스크립트 정규표현식으로 간소화하여 아이디, 비밀번호, 이메일을 검사하였다. 추후에 더 구체적인 정규표현식을 구글링하여 업데이트하면 좋을 것 같다.
checkid.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// inputId 라는 파라미터명으로 전달되는 문자열 읽어오기
String inputId=request.getParameter("inputId");
// dto 는 null 일수도 있고 아닐수도 있다
UsersDto dto=UsersDao.getInstance().getData(inputId);
%>
<%if(dto==null){ %>
{"isExist":false}
<%}else{ %>
{"isExist":true}
<%}%>UserDao의 getData 메소드를 참고하여 기능을 이해하면 좋다.
2022.08.24 - [Servlet&JSP] - Step04_Final (UsersDao, UsersDto 자료)
pwd_updateform.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/pwd_updateform.jsp</title>
</head>
<body>
<div class="container">
<h1>비밀번호 수정 폼</h1>
<form action="pwd_update.jsp" method="post" id="myForm">
<div>
<label for="pwd">기존 비밀번호</label>
<input type="password" name="pwd" id="pwd"/>
</div>
<div>
<label for="newPwd">새 비밀번호</label>
<input type="password" name="newPwd" id="newPwd"/>
</div>
<div>
<label for="newPwd2">새 비밀번호 확인</label>
<input type="password" id="newPwd2"/>
</div>
<button type="submit">수정하기</button>
<button type="reset">리셋</button>
</form>
</div>
<script>
//폼에 submit 이벤트가 일어났을때 실행할 함수를 등록하고
document.querySelector("#myForm").addEventListener("submit", function(event){
let pwd1=document.querySelector("#newPwd").value;
let pwd2=document.querySelector("#newPwd2").value;
//새 비밀번호와 비밀번호 확인이 일치하지 않으면 폼 전송을 막는다.
if(pwd1 != pwd2){
alert("비밀번호를 확인 하세요!");
event.preventDefault();//폼 전송 막기
}
});
</script>
</body>
</html>기존 비밀번호와 새비밀번호가 같으면 alert 창이 뜨고 폼 전송을 막는다.
pwd_update.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session scope 에서 수정할 회원의 아이디를 읽어온다.
String id=(String)session.getAttribute("id");
//폼 전송되는 구 비밀번호, 새 비밀번호 읽어오기
String pwd=request.getParameter("pwd");
String newPwd=request.getParameter("newPwd");
UsersDto dto=new UsersDto();
dto.setId(id);
dto.setPwd(pwd);
dto.setNewPwd(newPwd);
/*
위의 정보를 이용해서 DB 를 업데이트하는 UsersDao 에 메소드를 만들어 보세요.
메소드명은 updatePwd()
작업 성공 여부를 리턴 받아서
성공이면 로그아웃 처리를 하고 다시 로그인 하는 링크를 출력하고
실패이면 비밀번호가 일치하지 않는다는 메세지를 띄우고 다시 비밀번호 수정폼으로 이동할수 있도록 해 보세요.
*/
boolean isSuccess=UsersDao.getInstance().updatePwd(dto);
if(isSuccess){ //만일 성공이면
//로그아웃 처리
session.removeAttribute("id");
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/pwd_update.jsp</title>
</head>
<body>
<div class="container">
<%if(isSuccess){ %>
<p>
비밀 번호를 수정하고 로그 아웃되었습니다.
<a href="${pageContext.request.contextPath }/users/loginform.jsp">다시 로그인</a>
</p>
<%}else{ %>
<p>
구 비밀번호가 일치하지 않습니다.
<a href="${pageContext.request.contextPath }/users/private/pwd_updateform.jsp">다시 시도</a>
</p>
<%} %>
</div>
</body>
</html>
delete .jsp
<%@page import="test.users.dao.UsersDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 로그인된 아이디를 읽어온다.
String id=(String)session.getAttribute("id");
//2. DB 에서 삭제한다.
UsersDao.getInstance().delete(id);
//3. 로그아웃 처리를 한다.
session.removeAttribute("id");
//4. 응답
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/delete.jsp</title>
</head>
<body>
<div class="container">
<h1>알림</h1>
<p>
<strong><%=id %></strong>님 탈퇴 처리 되었습니다.
<a href="${pageContext.request.contextPath }/">인덱스로 가기</a>
</p>
</div>
</body>
</html>
'Servlet&JSP' 카테고리의 다른 글
| Step04_Final (cafe) (0) | 2022.08.24 |
|---|---|
| Step04_Final (sql 자료) (0) | 2022.08.24 |
| Step04_Final (UsersDao, UsersDto 자료) (0) | 2022.08.24 |
| Step04_Final (users/private, 가입정보 관리) (0) | 2022.08.23 |
| Step04_Final (context path 정리, 페이징 처리) (0) | 2022.08.23 |
