고래씌
[JSP] 4-3. 마이페이지 만들기(회원정보 변경, 회원탈퇴, 비밀번호 변경) 본문
4.1과 4-2. 내용 이어집니다.
1. 마이페이지 만들기
■ common.css 파일에 mypage-form 디자인 추가
① myPage.jsp 파일 생성
■ MyPageController.java 파일
package com.kh.member.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* Servlet implementation class MyPageController
*/
@WebServlet("/myPage.me")
public class MyPageController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public MyPageController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// url로 직접 페이지 요청시
// 로그인하기 전 요청인지 => 메인페이지로 sendRedirect
// 로그인한 후 요청인지 확인 => 마이페이지로 포워딩
HttpSession session = request.getSession();
if(session.getAttribute("loginUser") == null) { // 세션 안에 있는 로그인 정보가 있는지 없는지 확인. 로그인정보가 없다? 로그인전.
session.setAttribute("alertMsg", "로그인 후 이용해주세요.");
response.sendRedirect(request.getContextPath()); // 기본 root경로로 보냄
} else {
request.getRequestDispatcher("views/member/myPage.jsp").forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
■ myPage.jsp 파일
▶ 전화번호, 이메일, 주소입력창에 null값이면 빈값으로 출력되도록 설정, 취미도 체크가 되어있었다면 체크가 되어있도록 설정
▶ 취미도 체크가 되어있었다면 체크가 되어있도록 설정
- 방법 ①
- 방법 ②
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%@ include file="../common/menubar.jsp" %>
<div class="outer">
<br>
<h2 align="center">마이페이지</h2>
<form action="<%= contextPath %>/myPage.me" method="post" id="mypage-form">
<table>
<tr>
<td>* 아이디</td>
<td><input type="text" name="userId" value="<%= loginUser.getUserId() %>" maxlength="12" readonly></td>
<td></td>
</tr>
<tr>
<td>* 이름</td>
<td><input type="text" name="userName" value="<%= loginUser.getUserName() %>" maxlength="6" required></td>
<td></td>
</tr>
<tr>
<td>전화번호</td>
<td><input type="text" name="phone" value="<%= loginUser.getPhone() == null ? "" : loginUser.getPhone() %>"placeholder="- 포함해서 입력"></td>
<td></td>
</tr>
<tr>
<td>이메일</td>
<td>
<input type="email" name="email" value="<%= loginUser.getEmail() == null ? "" : loginUser.getEmail() %>"></td>
<td></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" name="address" value="<%= loginUser.getAddress() == null ? "" : loginUser.getAddress()%>"></td>
<td></td>
</tr>
<tr>
<td>관심분야</td>
<td colspan="2">
<!-- 방법2 -->
<% String interest = loginUser.getInterest() == null ? "" : loginUser.getInterest(); // "운동, 낚시, 취미" %>
<input type="checkbox" name="interest" id="interest1" value="운동"
<%= interest.contains("운동") ? "checked" : "" %>><label for="interest1">운동</label>
<input type="checkbox" name="interest" id="interest2" value="등산"
<%= interest.contains("등산") ? "checked" : "" %>><label for="interest2">등산</label>
<input type="checkbox" name="interest" id="interest3" value="낚시"
<%= interest.contains("낚시") ? "checked" : "" %>><label for="interest3">낚시</label>
<input type="checkbox" name="interest" id="interest4" value="요리"
<%= interest.contains("요리") ? "checked" : "" %>><label for="interest4">요리</label>
<input type="checkbox" name="interest" id="interest5" value="게임"
<%= interest.contains("게임") ? "checked" : "" %>><label for="interest5">게임</label>
<input type="checkbox" name="interest" id="interest6" value="영화"
<%= interest.contains("영화") ? "checked" : "" %>><label for="interest6">영화</label>
</td>
</tr>
</table>
<script>
// 방법1
const interest = "<%= loginUser.getInterest()%>"; // "운동, 요리" / "null"
//console.log(intereest);
// ["운동", "요리",..]
interest.split(",").forEach(function(value){
document.querySelector("input[type=checkbox][value='"+value+"']");
console.log(value);
// checkbox.checked = true;
})
</script>
<br><br>
<div align="center">
<button type="submit">정보변경</button>
</div>
</form>
</div>
</body>
</html>
2. 사용자가 마이페이지 수정할 때
■ member-mapper.xml 파일
- 회원정보 변경 할 때
- 회원정보 페이지 다시 가져올 때
■ MyPageController.java
package com.kh.member.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.kh.member.model.service.MemberService;
import com.kh.member.model.vo.Member;
/**
* Servlet implementation class MyPageController
*/
@WebServlet("/myPage.me")
public class MyPageController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public MyPageController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// url로 직접 페이지 요청시
// 로그인하기 전 요청인지 => 메인페이지로 sendRedirect
// 로그인한 후 요청인지 확인 => 마이페이지로 포워딩
// 마이페이지로 포워딩
HttpSession session = request.getSession();
if(session.getAttribute("loginUser") == null) { // 세션 안에 있는 로그인 정보가 있는지 없는지 확인. 로그인정보가 없다? 로그인전.
session.setAttribute("alertMsg", "로그인 후 이용해주세요.");
response.sendRedirect(request.getContextPath()); // 기본 root경로로 보냄
} else {
request.getRequestDispatcher("views/member/myPage.jsp").forward(request, response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 회원정보 변경 페이지
request.setCharacterEncoding("UTF-8");
String userId = request.getParameter("userId");
String userName = request.getParameter("userName");
String phone = request.getParameter("phone");
String email = request.getParameter("email");
String address = request.getParameter("address");
String interest = String.join(",",
request.getParameterValues("interest") == null ?
new String[]{} : request.getParameterValues("interest"));
// 사용자가 체크한 값이 없다면 빈 배열을 보여주고, 있다면 체크한 항못들을 보여준다.
Member m = new Member(userId, userName, phone, email, address, interest);
// 3) 요청처리
Member updateMem = new MemberService().updateMember(m);
// 4) 돌려받은 결과를 가지고 사용자가 보게될 응답 화면 지정
if(updateMem == null) { // 실패
request.setAttribute("errorMsg", "회원정보 수정에 실패했습니다.");
request.getRequestDispatcher("views/common/errorPage.jsp").forward(request, response);
} else { // 성공
HttpSession session = request.getSession();
session.setAttribute("alertMsg", "성공적으로 회원정보를 수정했습니다.");
// session.removeAttribute("loginUser"); // 이것을 안지워도 된다! 왜냐하면...
session.setAttribute("loginUser", updateMem); // 같은 키값은 존재할 수 없다! => 같은 키값이 존재하면 덮어쓰기된다.
// 회원정보가 변경됨
response.sendRedirect(request.getContextPath()+"/myPage.me"); // 다시 마이페이지로 url 재요청
}
}
}
▶ Member클래스. 생성자가 없기때문에 Member클래스에 생성자를 생성해준다.
=> Member 클래스에 생성자가 없기 때문에 만들어줌
■ MemberService.java 파일에 회원정보 변경에 관한 메소드 추가
■ MemberDao 클래스에 updateMember 메소드와 selectMember 메소드 추가
UPDATE => 처리된 행의 개수를 반환한다.
3. 회원탈퇴
■ myPage.jsp 파일에 </body> 바로 앞에 이와같은 코드를 붙힌다.
<!-- The Modal -->
<div class="modal" id="deleteForm">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">회원탈퇴</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" align="center">
<b>탈퇴 후 복구가 불가능합니다. <br>정말로 탈퇴하시겠습니까?</b><br><br>
<form action="<%= contextPath %>/delete.me" method="post">
<table>
<tr>
<td>비밀번호</td>
<td><input type="password" name="userPwd" required></td>
</tr>
</table>
<br>
<button type="submit" class="btn btn-danger btn-sm">탈퇴하기</button>
</form>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="updatePwdForm">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">비밀번호 변경</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" align="center">
<form action="<%= contextPath %>/updatePwd.me" method="post">
<!-- 현재 비밀번호, 변경할 비밀번호, 변경할 비밀번호 재입력 -->
<input type="hidden" name="userId" value="<%= loginUser.getUserId() %>">
<table>
<tr>
<td>현재 비밀번호</td>
<td><input type="password" name="userPwd" required></td>
</tr>
<tr>
<td>변경할 비밀번호</td>
<td><input type="password" name="updatePwd" required></td>
</tr>
<tr>
<td>변경할 비밀번호 재입력</td>
<td><input type="password" name="checkPwd" required></td>
</tr>
</table>
<br>
<button type="submit" class="btn btn-secondary btn-sm" onclick="return validatePwd();">비밀번호 변경</button>
</form>
<script>
// 제대로된 비밀번호를 입력했는지 유효성 검사
function validatePwd() {
if($("input[name=updatePwd]").val() != $("input[name=checkPwd]").val()) {
alert("비밀번호가 일치하지 않습니다.");
return false;
}
}
</script>
</div>
</div>
</div>
</div>
■ DelectController.java 파일
package com.kh.member.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.kh.member.model.service.MemberService;
import com.kh.member.model.vo.Member;
/**
* Servlet implementation class DelectController
*/
@WebServlet("/delete.me")
public class DelectController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DelectController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 회원탈퇴
request.setCharacterEncoding("UTF-8");
String userPwd = request.getParameter("userPwd"); // 사용자가 입력한 값은 비밀번호임
// sessoin에서 loginUser내에 있는 id 값 가져오기
HttpSession session = request.getSession();
String userId = ((Member) session.getAttribute("loginUser")).getUserId();
int result = new MemberService().deleteMember(userId, userPwd);
if(result > 0) {
session.setAttribute("alertMsg", "성공적으로 회원탈되 되었습니다.");
session.removeAttribute("loginUser");
response.sendRedirect(request.getContextPath());
}else {
request.setAttribute("errorMsg", "회원탈퇴에 실패했습니다.");
request.getRequestDispatcher("views/common/errorPage.jsp").forward(request, response);
}
}
}
=> 비밀번호가 일치하지않아 실패할경우 errorPage.jsp로 넘어가서 실패했다는 문구가 뜨도록 설정
=> 실패할경우 아래와 같은 페이지로 이동하도록 설정하였다.
■ MemberService.java
■ member-mapper.xml
■ MemberDao.java
▶ 구현영상
4. 비밀번호 변경
① 비밀번호 변경 쿼리문 작성
=> 로그인 쿼리문 호출시켜서 변경하는 방법도 있긴하다!
■ member-mapper.xml
② myPage.js에 form 태그의 action 확인 후 servelt 작성
■ MemberUpdatePwdController.java
package com.kh.member.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.kh.member.model.service.MemberService;
import com.kh.member.model.vo.Member;
/**
* Servlet implementation class MemberUpdatePwdController
*/
@WebServlet("/updatePwd.me")
public class MemberUpdatePwdController extends HttpServlet {
private static final long serialVersionUID = 1L;
public MemberUpdatePwdController() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String userId = request.getParameter("userId");
String userPwd = request.getParameter("userPwd");
String updatePwd = request.getParameter("updatePwd");
Member updateMem = new MemberService().updatePwdMember(userId, userPwd, updatePwd);
HttpSession session = request.getSession();
if(updateMem == null) { // 실패
session.setAttribute("alertMsg", "비밀번호 변경에 실패했습니다.");
} else {
session.setAttribute("alertMsg", "성공적으로 비밀번호를 변경했습니다.");
session.setAttribute("loginUser", updateMem); // 조회한 키값으로 동일하다면 덮어씌우기함
}
response.sendRedirect(request.getContextPath()+"/myPage.me"); // request.getContextPath() => /jsp
}
}
=> 갱신된 회원정보를 조회하고(updateMem) 있다면 "성공적으로 비밀번호를 변경했습니다."라는 알람창 출력하고 덮어씌워지게 된다.
| Member updateMem = new MemberService().updatePwdMember(userId, userPwd, updatePwd); |
=> 갱신된 회원정보를 가져와 저장
③ JDBC 객체 연결
=> JDBCTemplated에 있는 getConnection() 호출하여 Connection 객체 생성함!!
■ MemberService.java
④ SQL문 처리
■ MemberDao.java
'Server > JSP과 Servlet' 카테고리의 다른 글
| [JSP] 5-2. 게시판 상세 페이지 만들기(+첨부파일 업로드) (0) | 2023.12.11 |
|---|---|
| [JSP] 5-1. 게시판 만들기(페이지) (0) | 2023.12.08 |
| [JSP] 4-2. 로그아웃, 회원가입 페이지 만들기 (0) | 2023.12.07 |
| [JSP] 4-1. DB 이용하여 로그인 기능 만들기 (0) | 2023.12.06 |
| [JSP] 피자주문 실습문제 (1) | 2023.12.06 |
'Server/JSP과 Servlet' Related Articles
more
