스프링(spring)/ 회원 시스템 구축 3(회원정보 수정 및 탈퇴)

Programming/스프링(spring) - Enterprise

스프링(spring)/ 회원 시스템 구축 3(회원정보 수정 및 탈퇴)

esoog Polaris 2023. 8. 1. 21:45

0. 이번에는 뭔가 시작부터 매퍼에 코드를 추가 해놓고 시작해보자. 더 편할 것 같다.

어쨌든 회원 정보를 수정해서 데이터 처리 작업을 해야할 테니까.

accountMapper.xml파일에 추가.

	<!-- 회원정보 수정 -->
	<update id="memberUpdate">
		UPDATE user SET
		pwd = #{pwd},
		email = #{email}
	</update>

* 만들려는 프로젝트의 특성상 바꾸고 싶은 컬럼만 적었다.

1. 그럼 다음은 DAO와 Service를 먼저 설정해준다.

UserDAO와 UserService파일에 아래 코드 추가

// 회원정보 수정
	public void memberUpdate(UserVO vo)throws Exception;

그리고 UserDAOImpl파일에 아래 코드 추가

    // 정보 수정
    @Override
    public void memberUpdate(UserVO vo) throws Exception {
    	sqlSession.update(namespace+".memberUpdate", vo); 
    }

UserServiceImpl파일에 아래 코드 추가

	@Override
	public void memberUpdate(UserVO vo) throws Exception {
		userDAO.memberUpdate(vo);
	}

2. 그리고 UserController파일에서 jsp로 데이터 처리 로직을 만든다.

	// 회원정보 수정
	@GetMapping("/account/update")
	public void getUpdate() throws Exception{
	}

	@PostMapping("/account/update")
	public String postUpdate(UserVO vo) throws Exception{
		userService.memberUpdate(vo);
		return "redirect:/";
	}

3. 그래서 회원정보 수정은 어디서? 우선은 로그인 페이지에 만들어 보았다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
		<!-- 합쳐지고 최소화된 최신 CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<!-- 부가적인 테마 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
</head>

<body>
	<form name='login' method="post" >
		<c:if test="${member == null}">
		<!-- member는 컨트롤러 메서드로 실행 후 세션 객체로 받은 이름이다. -->
			<div>
				<label for="id"></label>
				<input type="text" id="id" name="id" required>
			</div>
			<div>
				<label for="pwd"></label>
				<input type="password" id="pwd" name="pwd" required>
			</div>
			<div>
				<button type="submit">로그인</button>
				<button type="button">회원가입</button>
			</div>
		</c:if>
		<c:if test="${member != null }">
			<div>
				<p>${member.id}님 환영 합니다.</p>
				<button id="memberUpdateBtn" type="button">회원정보수정</button>
				<button id="logoutBtn" type="button">로그아웃</button>
			</div>
		</c:if>
		<c:if test="${msg == false}">
			<p style="color: red;">로그인 실패! 아이디와 비밀번호 확인해주세요.</p>
		</c:if>
	</form>
	
	<script type="text/javascript">
		$(document).ready(function(){
		    $("#logoutBtn").on("click", function(){
		        // 로그아웃 버튼 클릭 시 /logout 경로로 POST 요청을 보냄
		        $.post("/logout", function(data) {
		            // 로그아웃 성공 시 홈으로 리다이렉트
		            location.href = "/";
		        }).fail(function() {
		            // 로그아웃 실패 시 에러 메시지를 표시할 수 있음
		            alert("로그아웃 실패!");
		        });
		    });
		    
		    $("#memberUpdateBtn").on("click", function(){
				location.href="/account/update";
			});
		});
	</script>
</body>
</html>

*바뀐거는 member세션 기능이 활성화 되면, 회원정보 수정 버튼 출력.

아래 자바스크립트에서 클릭시, 정보 수정페이지로 이동.

4. 그리고는 account폴더에 update.jsp파일을 생성 후 아래 코드를 추가.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
	<head>
		<!-- 합쳐지고 최소화된 최신 CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<!-- 부가적인 테마 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	 	
	 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>회원 정보 수정</title>
	</head>
	
	<body>
		<section id="container">
			<form method="post">
				<div class="form-group has-feedback">
					<label class="control-label" for="id">아이디</label>
					<input class="form-control" type="text" id=id name="id" value="${member.id}" readonly="readonly"/>
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="pwd">패스워드</label>
					<input class="form-control" type="password" id="pwd" name="pwd" />
				</div>
				<div class="form-group has-feedback">
				    <label class="control-label" for="confirmPwd">패스워드 확인</label>
				    <input class="form-control" type="password" id="confirmPwd" name="confirmPwd" required/>
				    <span id="passwordMatchMessage" class="help-block"></span>
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="nick">닉네임(*변경불가)</label>
					<input class="form-control" type="text" id="nick" name="nick" value="${member.nick}" readonly="readonly"/>
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="email">이메일</label>
					<input class="form-control" type="email" id="email" name="email" value="${member.email}"/>
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="ncode">국가(*변경불가)</label>
					<input class="form-control" type="text" id="ncode" name="ncode" value="${member.ncode}" readonly="readonly"/>
				</div>
				<div class="form-group has-feedback">
					<button class="btn btn-success" type="submit" id="submit">회원정보수정</button>
					<button class="cancle btn btn-danger" type="button">취소</button>
				</div>
			</form>
		</section>
		
		<script type="text/javascript">
			$(document).ready(function(){
				// 취소
				$(".cancle").on("click", function(){
					location.href = "/";
				})
				
		        // 패스워드 확인 로직
		        $("#submit").on("click", function () {
		            if ($("#pwd").val() === "") {
		                alert("비밀번호를 입력해주세요.");
		                $("#pwd").focus();
		                return false;
		            }

		            var password = $("#pwd").val();
		            var confirmPassword = $("#confirmPwd").val();

		            if (password !== confirmPassword) {
		                alert("패스워드가 일치하지 않습니다.");
		                return false;
		            }
		        });
			})
		</script>
		
	</body>
</html>

*마지막에 #submit 이용한 자바스크립트로

비밀번호 검증 로직을 구현. 일치 않으면 수정 불가하도록 설정.

* 그리고 input 속성으로 readonly="readonly"는 읽기만 가능.

* disabled 속성은 사용할 수 없게 함. 데이터 전송도 안됨.

5. 이번에는 회원탈퇴 기능을 구현위해서. 다시 매퍼부터.

UserMapper.xml파일에서 쿼리문 추가 작성

	<!-- 회원탈퇴 -->
	<delete id="memberDelete">
		DELETE FROM user
		WHERE id = #{id}
		AND pwd = #{pwd}
	</delete>

*아이디와 패스워드가 일치하는 녀석 레코드를 삭제.

6. 그럼 다음은 DAO와 Service를 설정해준다.

UserDAO와 UserService파일에 아래 코드 추가

	// 회원 탈퇴
	public void memberDelete(UserVO vo)throws Exception;

UserDAOImpl파일에는 아래 코드 추가

    // 회원탈퇴
	@Override
	public void memberDelete(UserVO vo) throws Exception {
		sqlSession.delete(namespace+".memberDelete", vo);
	}

UserServiceImpl파일에는 아래 코드 추가

	// 회원탈퇴
	@Override
	public void memberDelete(UserVO vo) throws Exception {
		userDAO.memberDelete(vo);
	}

7. 그리고 UserController파일에서 다시 jsp로 데이터 처리 로직을 만든다.

	// 회원 탈퇴 get
	@GetMapping("/account/delete")
	public void getDelete() throws Exception{
	}
	
	// 회원 탈퇴 post
	@PostMapping("/account/delete")
	public String postDelete(UserVO vo, HttpSession session, RedirectAttributes rttr) throws Exception{
		UserVO member = (UserVO)session.getAttribute("member");
		// 세션에서 데이터를 가져오려는 건데, 세션 데이터는 기본적으로 Object형이다.
		// 그래서 (UserVO)타입으로 형변환 해서 member에 담고 있다.
		
		// 현재 로그인 되어 세션에있는 비밀번호 UserVO 게터 사용.
		String sessionPass = member.getPwd();
		// vo로 들어오는 비밀번호
		String voPass = vo.getPwd();
		
		if(!(sessionPass.equals(voPass))) {
			rttr.addFlashAttribute("msg", false);
			// msg라는 이름으로 false를 넘겨준다.
			return "redirect:/account/delete";
		}
		
		userService.memberDelete(vo);
		session.invalidate();
		return "redirect:/";
	}

* 회원 탈퇴 페이지를 따로 만들어서 비밀번호를 검증하도록 로직 구현.

로그인 되어잇는 세션 정보와 대조하는 기술을 사용.

8. 그래서 회원탈퇴는 어디서? 일반적으로 회원정보 수정 페이지에서 본 듯하다.

update.jsp파일을 아래 코드를 추가한다. 먼저 버튼에 추가

<button id="memberDeleteBtn" type="button">회원 탈퇴</button>

그리고 자바스크립트에 아래코드 추가. 버튼 로직 구현

//회원탈퇴
$("#memberDeleteBtn").on("click", function(){
    location.href="/account/delete";
});

4. 그리고는 account폴더에 delete.jsp파일을 생성 후 아래 코드를 추가.

회원탈퇴도 단순히 클릭이 아닌 비밀번호 검증을 위해 페이지를 따로 만듦.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
	<head>
		<!-- 합쳐지고 최소화된 최신 CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<!-- 부가적인 테마 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	 	
	 	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<title>회원탈퇴</title>
	</head>
	<body>
		<section id="container">
			<form method="post">
				<div class="form-group has-feedback">
					<label class="control-label" for="id">아이디</label>
					<input class="form-control" type="text" id="id" name="id" value="${member.id}" readonly="readonly"/>
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="pwd">패스워드</label>
					<input class="form-control" type="password" id="pwd" name="pwd" />
				</div>
				<div class="form-group has-feedback">
					<label class="control-label" for="nick">닉네임</label>
					<input class="form-control" type="text" id="nick" name="nick" value="${member.nick}" readonly="readonly"/>
				</div>
				<div class="form-group has-feedback">
					<button class="btn btn-success" type="submit" id="submit">회원탈퇴</button>
					<button class="cancle btn btn-danger" type="button">취소</button>
				</div>
			</form>
			<div>
				<c:if test="${msg == false}">
					비밀번호가 맞지 않습니다.
				</c:if>
			</div>
		</section>
		
		<script type="text/javascript">
			$(document).ready(function(){
				// 취소
				$(".cancle").on("click", function(){
					location.href = "/";	    
				})
			
				$("#submit").on("click", function(){
					if($("#pwd").val()==""){
						alert("비밀번호를 입력해주세요.");
						$("#pwd").focus();
						return false;
					}	
				});
			})
		</script>
	</body>
	
</html>

확인. 나이스.

728x90

저작자표시 비영리 변경금지

'Programming > 스프링(spring) - Enterprise' 카테고리의 다른 글

스프링(spring)/ +더하기 1(검색 시스템과 알림 시스템) (0)	2023.08.02
스프링(spring)/ 회원 시스템 구축 4(암호화) (0)	2023.08.02
스프링(spring)/ 회원 시스템 구축 2(로그인 페이지) (0)	2023.08.01
스프링(spring)/ 회원 시스템 구축 1(회원가입 페이지) (0)	2023.08.01
스프링(spring)/ 게시판 구축 5(좋아요 기능) (0)	2023.07.21

현재글스프링(spring)/ 회원 시스템 구축 3(회원정보 수정 및 탈퇴)

Blue Whale Wave