비밀번호를 수정하는 페이지를 만들어보는 시간이다.
먼저 비밀번호를 수정할 form을 만들어준 후에
<%@page import="test.users.dto.UsersDto"%>
<%@page import="test.users.dao.UsersDao"%>
<%@ 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>
</body>
</html>
javascript 부분에는 수정하기 button을 눌렀을 때 폼에 submit 이벤트가 일어났을 때 실행할 함수를 등록한다.
<script>
//폼에 submit 이벤트가 일어났을 때 실행할 함수를 등록하고
document.querySelector("#myForm").addEventListener("submit", (e)=>{
//입력한 새 비밀번호 2개를 읽어와서
let pwd1 = document.querySelector("#newPwd").value;
let pwd2 = document.querySelector("#newPwd2").value;
//만일 새 비밀번호와 비밀번호 확인이 일치하지 않으면 폼 전송을 막는다.
if(pwd1 != pwd2){
alert("비밀번호를 확인 하세요!");
e.preventDefault();
}
})
</script>
.preventDefault는 실행이 되면 입력한 내용이 폼에 적용되지 않도록 막아준다.
이제 pwd_update.jsp를 만들어
session scope에서 수정할 회원의 아이디를 읽어오고 폼에 전송되는 구,새 비밀번호를 읽어온다.
그리고 현재 비밀번호도 읽어온다.
//session scope 에서 수정할 회원의 아이디를 읽어온다.
String id = (String)session.getAttribute("id");
//폼 전송되는 구 비밀번호, 새 비밀번호 읽어오기
String pwd = request.getParameter("pwd");
String newPwd = request.getParameter("newPwd");
//현재 비밀번호
String currentPwd = UsersDao.getInstance().getData(id).getPwd();
그 다음 db에서 비밀번호를 수정할 메소드를 만든다.
//비밀번호를 수정하는 메소드
public boolean updatePwd(UsersDto dto) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
int rowCount = 0;
try {
//DbcpBean 객체를 이용해서 Connection 객체를 얻어온다(Connection Pool 에서 얻어오기)
conn = new DbcpBean().getConn();
//실행할 sql 문
String sql = "UDATE users"
+ " SET pwd = ?"
+ " WHERE id = ?";
pstmt = conn.prepareStatement(sql);
//sql 문이 미완성이라면 여기서 완성
pstmt.setString(1, dto.getPwd());
pstmt.setString(2, dto.getId());
//select 문 수행하고 결과값 받아오기
rowCount = pstmt.executeUpdate();
//반복문 돌면서 ResultSet 에 담긴 내용 추출
} catch (SQLException se) {
se.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
//만일 변화된 row 의 갯수가 0 보다 크면 작업 성공
if (rowCount > 0) {
return true;
} else {
return false;
}
}
그리고 다시 pwd_update.jsp로 와서 비밀번호의 수정 작업을 수행하고 로그아웃을 시킨다.
//현재 비밀번호
String currentPwd = UsersDao.getInstance().getData(id).getPwd();
//만일 현재 비밀번호하고 입력한 비밀번호와 같으면
if(currentPwd.equals(pwd)){
//수정 작업을 수행하고 로그아웃을 한다.
UsersDto dto = new UsersDto();
dto.setId(id);
dto.setPwd(newPwd);
isSuccess = UsersDao.getInstance().updatePwd(dto);
}
//만일 성공이면
if(isSuccess){
//로그아웃 처리
session.removeAttribute("id");
}
그런 다음 밑에 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>
'수업내용' 카테고리의 다른 글
20230609 수업내용🤦♂️🤦♂️🤦♂️ (0) | 2023.06.09 |
---|---|
20230608 수업내용🫡🫡🫡 (0) | 2023.06.09 |
20230607 수업내용🫡🫡🫡 (0) | 2023.06.07 |
20230601 수업내용🫡🫡🫡 (0) | 2023.06.01 |
20230531 수업내용2🫡🫡🫡 (0) | 2023.05.31 |
댓글