본문 바로가기
수업내용

20230607 수업내용2🤷‍♀️🤷‍♀️🤷‍♀️🤷‍♀️

by titlejjk 2023. 6. 7.

비밀번호를 수정하는 페이지를 만들어보는 시간이다.

먼저 비밀번호를 수정할 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>

댓글