32일차(2)/jsp(14) : 회원정보 수정, 회원 탈퇴 기능 구현

국비교육(22-23)

32일차(2)/jsp(14) : 회원정보 수정, 회원 탈퇴 기능 구현

서리/Seori 2022. 11. 22. 18:24

- 비밀번호 수정 기능 구현

/users/private/ <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>
		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>

- 주의 창을 띄우기 위해서는 javascript가 필요하다.

- Form 안의 지정된 버튼을 클릭하면 submit이라는 이벤트가 일어난다. 이 때 일어날 동작을 javascript로 코딩하기.

document.querySelector("#myForm").addEventListener("submit", function(event){
	event.preventDefault();//폼 전송 막기			
});

.preventDefault(); : 폼 제출을 막는 함수

- id가 myForm인 폼에 대해, submit이라는 이벤트가 일어날 때

submit의 기본 상태(제출되기)를 막아버린다!

- '새 비밀번호'와 '새 비밀번호 확인'의 값이 다를 경우, 알림창이 뜨고 다음 페이지로 넘어가지 않는다.

/users/private/ <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 객체에 위의 3개 정보를 담고
	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>

- update 메소드에서 이 내용을 수행할 예정!

- id, 구 비밀번호, 새 비밀번호를 각각 매칭시키기

- 로그인되어 있는 id 의 구 비밀번호도 맞아야 하고, 새 비밀번호를 두번 입력하는것도 맞아야 한다.

- dto에 새 비밀번호 필드를 추가해야 한다.

package test.users.dto;

public class UsersDto {
	private String id;
	private String pwd;
	private String email;
	private String profile;
	private String regdate;
	//새 비밀번호를 담을 필드
	private String newPwd;
	
	public UsersDto() {}

	public UsersDto(String id, String pwd, String email, String profile, String regdate, String newPwd) {
		super();
		this.id = id;
		this.pwd = pwd;
		this.email = email;
		this.profile = profile;
		this.regdate = regdate;
		this.newPwd = newPwd;
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getProfile() {
		return profile;
	}

	public void setProfile(String profile) {
		this.profile = profile;
	}

	public String getRegdate() {
		return regdate;
	}

	public void setRegdate(String regdate) {
		this.regdate = regdate;
	}

	public String getNewPwd() {
		return newPwd;
	}

	public void setNewPwd(String newPwd) {
		this.newPwd = newPwd;
	}	
}

private String newPwd;

- 새 비밀번호 필드를 추가해주고 setter/getter추가

비밀번호를 수정하는 메소드추가

//비밀번호를 수정하는 메소드
public boolean updatePwd(UsersDto dto) {
    Connection conn = null;
    PreparedStatement pstmt = null;
    int rowCount = 0;
    try {
        conn = new DbcpBean().getConn();
        String sql = "UPDATE users"
                + " SET pwd=?"
                + " WHERE id=? AND pwd=?";
        pstmt = conn.prepareStatement(sql);
        //?에 바인딩
        pstmt.setString(1, dto.getNewPwd());
        pstmt.setString(2, dto.getId());
        pstmt.setString(3, dto.getPwd());
        //INSERT or UPDATE or DELETE문을 수행하고 수정,삭제,추가된 row의 개수 리턴
        rowCount = pstmt.executeUpdate();
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        try {
            if (pstmt != null)
                pstmt.close();
            if (conn != null)
                conn.close();
        } catch (Exception e2) {
        }
    }

    if (rowCount > 0) {
        return true;
    } else {
        return false;
    }
}

WHERE id=? AND pwd=?

- 두가지 모두 일치해야 한다. sql문 작성시 유의!

- 성공한 경우 (로그인 폼으로 이동)

- 실패한 경우 (비밀번호 변경 폼으로 이동)

/users/private/ <updateform.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");
	//수정할 회원의 정보를 얻어온다.
	UsersDto dto=UsersDao.getInstance().getData(id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/updateform.jsp</title>
</head>
<body>
	<div class="container">
		<h3>회원가입 수정 폼입니다.</h3>
		<form action="update.jsp" method="post">
			<div>
				<label for="id">아이디</label>
				<input type="text" id="id" value="<%=dto.getId() %>" disabled />
			</div>
			<div>
				<label for="email">이메일</label>
				<input type="text" id="email" name="email" value="<%=dto.getEmail() %>" />
			</div>
			<button type="submit">수정확인</button>
			<button type="reset">취소</button>		
		</form>
	</div>
</body>
</html>

- name="email" 값이 있어야 읽어올 수 있다. 빠뜨리지 않도록 주의!

/users/private/ <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"%>
<%
	//1.수정할 회원의 정보를 읽어와서
	String id=(String)session.getAttribute("id");
	String email=request.getParameter("email");
	
	UsersDto dto=new UsersDto();
	dto.setId(id);
	dto.setEmail(email);
	//2. DB에 수정반영하고
	boolean isSuccess=UsersDao.getInstance().update(dto);
	//3.응답하기
%>    
  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/update.jsp</title>
</head>
<body>
	<script>
		<% if(isSuccess){%>
			alert("수정했습니다.");
			location.href="info.jsp";
		<%}else{%>
			alert("수정 실패!");
			location.href="updateform.jsp";		
		<%}%>
	</script>
</body>
</html>

- 세션의 id 값, 폼에 입력된 email 값을 읽어와서 반영하기

<UsersDao>에 update 메소드 추가

//개인정보(이메일)를 수정하는 메소드
public boolean update(UsersDto dto) {
    Connection conn = null;
    PreparedStatement pstmt = null;
    int rowCount = 0;
    try {
        conn = new DbcpBean().getConn();
        String sql = "UPDATE users"
                + " set email=?"
                + " WHERE id=?";
        pstmt = conn.prepareStatement(sql);
        //?에 바인딩
        pstmt.setString(1, dto.getEmail());
        pstmt.setString(2, dto.getId());
        //INSERT or UPDATE or DELETE문을 수행하고 수정,삭제,추가된 row의 개수 리턴
        rowCount = pstmt.executeUpdate();
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        try {
            if (pstmt != null)
                pstmt.close();
            if (conn != null)
                conn.close();
        } catch (Exception e2) {
        }
    }

    if (rowCount > 0) {
        return true;
    } else {
        return false;
    }
}

- 회원탈퇴 기능 구현

<info.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"%>
<%
	//1. session scope에서 로그인된 아이디 불러오기
	String id=(String)session.getAttribute("id");
	//2. DB에서 가입 정보를 불러온다.
	UsersDto dto=UsersDao.getInstance().getData(id);
	//3. 응답한다.
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/private/info.jsp</title>
<style>
   #profileImage{
      width: 100px;
      height: 100px;
      border: 1px solid #cecece;
      border-radius: 50%;
   }
</style>
</head>
<body>
   <div class="container">
      <h1>가입 정보 입니다.</h1>
      <table>
         <tr>
            <th>아이디</th>
            <td><%=id %></td>
         </tr>
         <tr>
            <th>프로필 이미지</th>
            <td>
               <%if(dto.getProfile()==null){ %>
                  <svg id="profileImage" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                       <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                       <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                  </svg>
               <%}else{ %>
                  <img id="profileImage" 
                     src="${pageContext.request.contextPath }<%=dto.getProfile()%>">
               <%} %>
            </td>
         </tr>
         <tr>
            <th>비밀번호</th>
            <td><a href="pwd_updateform.jsp">수정하기</a></td>
         </tr>
         <tr>
            <th>이메일</th>
            <td><%=dto.getEmail() %></td>
         </tr>
         <tr>
            <th>가입일</th>
            <td><%=dto.getRegdate() %></td>
         </tr>
      </table>
      <a href="updateform.jsp">개인정보 수정</a>
      <a href="javascript:deleteConfirm()">탈퇴</a>
   </div>
   <script>
   		function deleteConfirm(){
   			let isDelete=confirm("확인을 누르면 회원 탈퇴가 됩니다. 탈퇴 하시겠습니까?");
   			if(isDelete){
   				location.href="delete.jsp"
   			}
   		}
   </script>
</body>
</html>

- 삭제는 신중히! 탈퇴 요청시 javascript로 한번 더 확인할 수 있도록 만들기.

<div>
	<a href="javascript:deleteConfirm().jsp">탈퇴</a>
</div>

<script>
    function deleteConfirm(){
        let isDelete=confirm("확인을 누르면 회원 탈퇴가 됩니다. 탈퇴 하시겠습니까?");
        if(isDelete){
            location.href="delete.jsp"
        }
    }
</script>

- '탈퇴'링크가 클릭될 때 실행될 javascript 코드!

- 해당 빨간색 박스 영역은 이 링크를 누를때마다 실행되는 javascript 영역이다.

- 탈퇴 기능은 삭제 메소드를 만들고, 해당 회원을 로그아웃 처리하면 된다.(세션 초기화)

/users/private/<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.invalidate();
	//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>

<UsersDao> delete메소드 생성

//개인정보(가입정보)를 삭제하는 메소드
public boolean delete(String id) {
    Connection conn = null;
    PreparedStatement pstmt = null;
    int rowCount = 0;
    try {
        conn = new DbcpBean().getConn();
        String sql = "DELETE FROM users"
                + " WHERE id=?";
        pstmt = conn.prepareStatement(sql);
        //?에 바인딩
        pstmt.setString(1, id);
        //INSERT or UPDATE or DELETE문을 수행하고 수정,삭제,추가된 row의 개수 리턴
        rowCount = pstmt.executeUpdate();
    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        try {
            if (pstmt != null)
                pstmt.close();
            if (conn != null)
                conn.close();
        } catch (Exception e2) {
        }
    }

    if (rowCount > 0) {
        return true;
    } else {
        return false;
    }
}

- ?는 하나. id 값만 매칭해주면 된다.

- 재확인을 위해 알림창을 띄우고, 창에서 확인을 누르면 삭제된다.

- WEB-INF 폴더 안에 파일을 만들어 텍스트로 기록을 남겨놓으려고 한다.

이 프로젝트에서 만든 설정값이나 잘 작동하는지에 대한 내용!

<table.sql>

-- 사용자(회원) 정보를 저장할 테이블
CREATE TABLE users(
	id VARCHAR2(100) PRIMARY KEY,
	pwd VARCHAR2(100) NOT NULL,
	email VARCHAR2(100)
	profile VARCHAR2(100)
	regdate DATE
);

-- 업로드된 파일의 정보를 저장할 테이블
CREATE TABLE board_file(
   num NUMBER PRIMARY KEY,
   writer VARCHAR2(100) NOT NULL,
   title VARCHAR2(100) NOT NULL,
   orgFileName VARCHAR2(100) NOT NULL, -- 원본 파일명
   saveFileName VARCHAR2(100) NOT NULL, -- 서버에 실제로 저장된 파일명
   fileSize NUMBER NOT NULL, -- 파일의 크기 
   regdate DATE
);

CREATE SEQUENCE board_file_seq;

- 현재 생성되어있는 테이블과 다음 예제에서 사용할 테이블 정보 저장.

'국비교육(22-23)' 카테고리의 다른 글

33일차(1)/jsp(16) : 자료실, 파일 업로드/다운로드 코드 리뷰 (0)	2022.11.23
32일차(3)/jsp(15) : 자료실, 파일 업로드/다운로드 기능 구현 (0)	2022.11.22
32일차(1)/jsp(13) : request / session / filter 복습 (0)	2022.11.22
31일차(2)/jsp(12) : 회원전용 페이지 기능 구현하기(Filter) (0)	2022.11.21
31일차(1)/jsp(11) : 회원가입, 로그인 기능 구현하기 (0)	2022.11.21

현재글32일차(2)/jsp(14) : 회원정보 수정, 회원 탈퇴 기능 구현

공부합쉬다~

mediaplayer, React, Spring, javascript, JSX, springboot, Activity, DB, html, Oracle, Android, Service, JSP, css, GIT, controller, Kotlin, 코딩, sql, java,

Today :
Yesterday :

초보개발자 개발일지