[05] 모달을 사용한 비밀번호변경

비밀번호 변경 및 탈퇴

부트스트랩의 모달을 활용하여 기능을 꾸려보자

---

 

<< 이전포스팅에서 완료된 요청     |    이번포스팅에서 구현할 요청 >>

기능	url요청	요청시 전달값		응답페이지 또는 url재요청
	/web			index.jsp
로그인요청	/login.me	userId=?&userPwd=?	실패시	views/common/errorPage.jsp
			성공시	/web  url재요청=> index.jsp
로그아웃요청	/logout.me			/web  url재요청=> index.jsp
회원가입페이지	/enrollForm.me			views/member/memberEnrollForm.jsp
회원가입요청	/insert.me	userId=? ... 등	실패시	views/common/errorPage.jsp
			성공시	/web  url재요청 => index.jsp
마이페이지요청	/myPage.me		로그인전	/web   url재요청 => index.jsp
			로그인후	views.member/myPage.jsp
정보변경요청	/update.me	userId=? ... 등	실패시	view/common/errorPage.jsp
			성공시	/myPage.me   url재요청
비번변경요청	/updatePwd.me		성공/실패	/myPage.me   url재요청
탈퇴요청	/delete.me		실패시	/myPage.me   url재요청
			성공시	/web   url재요청

 

 

---

비밀번호변경

부트스트랩의 모달을 이용하여

비밀번호 변경을진행해보자

---

STEP1) menubar.jsp (수정)

• 부트스트랩 사용을 위한 CND태그를 헤드부에 삽입한다.
  **공식사이트에서 제공하는 구문에는 제이쿼리 스크립트 태그도 포함되어있는데, 기존 사용하던것과 버전이 다르니 가져오지 않도록 주의
• 부트스트랩 더 알아보기

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

 

 

STEP2) mypage.jsp (수정)

• 비밀번호 변경 버튼을 눌렀을 때 모달이 뜨면서 값을 입력받도록 수정한다.
• 모달 : div가 display none으로 되어있다가 클릭 이벤트 발생시 display block으로 뜨는 것
  >> 부트스트랩 사이트에 기본 골격이 제공된다.
• 1) 비밀번호 변경버튼에 부여할 속성 
  1-1) data-toggle="modal"
       >>클릭시 모달 효과를 주도록 부트스트랩이 만든 속성).
         버튼이 아닌 다른요소에도 활용할 수 있다.
  1-2) data-target="#아이디"
       >>모달이 될 div의 아이디를 입력한다.
• 2) div 태그에 부여할 속성
  2-1) class="modal"
       >> 모달로 설정함(처음에 안보이게 만듦)
  2-2) id="아이디"
       >> 버튼의 data-target에 쓰일 아이디
• 3) div의 header, body, footer 영역별로 코드수정
  3-1) body에 form태그를 두어 데이터를 입력받는다. 
       >> action값 : updatePwd.me
  3-2) sql에 로그인한 회원의 아이디가 필요하나 따로 받지 않고 있음
       >>input type=hidden으로 몰래 담아서 함께 넘긴다.
  3-3) data-dismiss="modal"
       >> 버튼 태그 안에 넣으면 모닫 닫기 기능이 된다.

<button type="button" data-toggle="modal" data-target="#updatePwdModal">비밀번호변경</button>
.....
<!-- 비밀번호 변경용 모달 div  -->
<div class="modal" id="updatePwdModal">
.....
<!-- Modal Header -->
<div class="modal-header">
    <h4 class="modal-title">비밀번호 변경</h4>
    <button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
.....	
<!-- Modal body -->
<div class="modal-body">
    <form action="<%=contextPath%>/updatePwd.me" method="post">
        <input type="hidden" name="userId" value="<%=userId%>"> 
        현재 비밀번호 : <input type="password" name="userPwd" required>
        변경할 비밀번호 : <input type="password" name="updatePwd" required>
        변경할 비밀번호 확인 : <input type="password" required>
        <button type="submit">비밀번호 변경</button>	        
    </form>
</div>
.....

 

 

STEP3) MemberPwdUpdateController.java

• 생성위치 : com.br.member.controller
  서블릿/매핑값 updatePwd.me
• 비밀번호 요청이 들어왔을 때 처리하는 메소드
• update를 한 후 변경된 정보를 select문으로 가지고 온다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1) 요청시 전달값
    // post 방식이나 한글이 없어서 인코딩 안해도됨
    String userId = request.getParameter("userId");
    String userPwd = request.getParameter("userPwd");
    String updatePwd = request.getParameter("updatePwd");
    // 2) 요청처리
    Member updateMem = new MemberService().updatePwdMember(userId, userPwd, updatePwd);
		
    // 3) 응답뷰
    HttpSession session = request.getSession();
    if(updateMem==null) { //실패(현재 비밀번호 잘못 입력했을경우)
        // 에러페이지로 가지않고 마이페이지에서 확인하라는 알람창
        session.setAttribute("alertMsg", "현재 비밀번호를 다시 확인해주세요.");
    }else { //성공
        // 마이페이지에서 성공했다는 알림창
        session.setAttribute("alertMsg", "성공적으로 비밀번호 변경되었습니다.");
        // session에 담긴 회원정보 갱신하기
        session.setAttribute("loginUser", updateMem);
    }
    //성공과 실패 둘다 실행할 코드
    response.sendRedirect(request.getContextPath()+"/myPage.me");
}

 

 

STEP4) MemberService.java (수정)

• updatePwdMember(userId, userPwd, updatePwd) 메소드 만들기
• 비밀번호 변경 성공 시 updateMem에 회원정보를 조회해서 담는다.

public Member updatePwdMember(String userId, String userPwd, String updatePwd) {
    Connection conn = getConnection();
    int result = new MemberDao().updatePwdMenber(conn, userId, userPwd, updatePwd);
    //변경 성공시 회원정보 갱신해서 담을 객체
    Member updateMem = null;
    if(result>0) {
        commit(conn);
        //이전에 만들어둔 Dao 메소드 활용
        updateMem = new MemberDao().selectMember(conn, userId);
    }else {
        rollback(conn);
    }
    close(conn);
    return updateMem;		
}

 

 

STEP5) member-mapper.xml (수정)

• 비밀번호를 변경하는 sql문을 작성한다.

	<entry key="updatePwdMenber">
		UPDATE MEMBER
		   SET USER_PWD = ?
		     , MEDIFY_DATE = SYSDATE
		 WHERE USER_ID = ?
		   AND USER_PWD = ?
	</entry>

 

 

STEP6) MemberDao.java (수정)

• updatePwdMenber(conn, userId, userPwd, updatePwd) 메소드 만들기

public int updatePwdMenber(Connection conn,String userId,String userPwd, String updatePwd) {
    //update => 처리된 행수
    int result = 0;
    PreparedStatement pstmt = null;
    String sql = prop.getProperty("updatePwdMember");
    try {
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, updatePwd);
        pstmt.setString(2, userId);
        pstmt.setString(3, userPwd);
        result = pstmt.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        close(pstmt);
    }		
    return result;
}

 

 

---

탈퇴

탈퇴에도 모달 효과를 주어 처리해보자

---

STEP1) mypage.jsp (수정)

• 탈퇴버튼에 모달효과를 주고 div 하위로 필요한 데이터를 받을 form 태그를 넣는다

<button type="button" data-toggle="modal" data-target="#deleteModal">회원탈퇴</button>
<!-- Modal body -->
<div class="modal-body" align="center">
    탈퇴 후 복구가 불가능합니다. <br> 정말로 탈퇴하시겠습니까? 
    <form action="<%=contextPath%>/delete.me" method="post">
        비밀번호 : <input type="password" name="userPwd" required>
        <button type="submit">탈퇴하기</button>
    </form>
</div>

 

 

STEP2) MemberDeleteController.java

• 생성위치 : com.br.member.controller
  서블릿/매핑값 : delete.me

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 1) 요청시 전달값
    String userId = request.getParameter("userId");
    String userPwd = request.getParameter("userPwd");
    // 2) 요청처리
    int result = new MemberService().deleteMember(userId, userPwd);
		
    // 3) 응답뷰
    HttpSession session = request.getSession();
    if(result>0) {
        session.setAttribute("alertMsg", "탈퇴가 완료되었습니다");
        //로그인 풀림처리
        session.removeAttribute("loginUser");
        response.sendRedirect(request.getContextPath());
    }else {
        session.setAttribute("alertMsg", "비밀번호가 일치하지 않습니다");
        response.sendRedirect(request.getContextPath()+"/myPage.me");
    }
}

 

 

STEP3) MemberService.java (수정)

• deleteMember(userId, userPwd) 메소드를 만든다

public int deleteMember(String userId, String userPwd) {
    Connection conn = getConnection();
    int result = new MemberDao().deleteMember(conn, userId, userPwd);		
    if(result>0) {
        commit(conn);
    }else {
        rollback(conn);
    }
    close(conn);
    return result;		
}

 

 

STEP4) member-mapper.xml (수정)

• 회원탈퇴는 status를 n으로 변경한다.

	<entry key="deleteMember">
		UPDATE MEMBER
		   SET STATUS = 'N'
		     , MODIFY_DATE = SYSDATE
		 WHERE USER_ID = ?
		   AND USER_PWD = ?	
	</entry>

 

 

STEP5) MemberDao.java (수정)

• deleteMember(conn, userId, userPwd) 메소드를 만든

public int deleteMember(Connection conn, String userId, String userPwd) {
    int result = 0;
    PreparedStatement pstmt = null;
    String sql = prop.getProperty("deleteMember");		
    try {
        pstmt = conn.prepareStatement(sql);
        pstmt.setString(1, userId);
        pstmt.setString(2, userPwd);
        result = pstmt.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    }
    close(pstmt);		
    return result;
}