[JSP/Servlet] 5. 마이페이지와 수정

[JSP/Servlet] 5. 마이페이지와 수정개발자가 되기까지 (2023.08.16~2024.04.15)/[Servlet] Basic Web2023. 12. 10. 00:32@rlozlr

Table of Contents

마이페이지를 만들어서 개인정보 수정과 회원 탈퇴 기능을 넣고자 했다.

회원탈퇴는 다음 게시글에서 설명하기로하고 마이페이지와 수정 기능을 먼저 만들기로 했다.

index.jsp에 마이페이지 화면을 넘어가 줄 a태그를 설정하고 webapp > member > mypage.jsp를 생성했다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- c:out 태그를 사용하기 위해서는 JSTL(Core Tag Library)을 사용 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semicolone</title>
</head>
<body>
	<header>
		<div>Logo</div>
		<div>
			<ul>
				<li><a href="/index.jsp">HOME</a></li>
				<c:if test="${ses.id eq null }">
					<li><a href="/member/login.jsp">LOGIN</a></li>
					<li><a href="/memb/join">SIGNUP</a></li>
				</c:if>
				<c:if test="${ses.id ne null }">
					<li><a href="#">BOARD</a></li>
					<li><a href="/memb/mypage">MYPAGE</a></li>
					<li><a href="/memb/logout">LOGOUT</a></li>
				</c:if>
			</ul>
		</div>
	</header>

// ... (기존코드 )

</body>
</html>

mypage는 기존의 정보들을 불러오되, 비밀번호 / 이메일 / 팀은 수정 가능하게 할 예정이다.

수정이 완료되면 alert도 하나 띄우려고 script를 추가로 작성했다.

물론 <c:out>을 사용할 수 있도록 taglib를 상단에 선언하는 것도 잊지 말아야한다.

mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>마이페이지</h1>
	<form action="/memb/modify" method="post">
		<table>
			<tr>
				<th>ID</th>
				<td>${mvo.id }</td>
			</tr>
			<tr>
				<th>Password</th>
				<td><input type="text" name="pwd" value="${mvo.pwd }"></td>
			</tr>
			<tr>
				<th>E-mail</th>
				<td><input type="text" name="email" value="${mvo.email }"></td>
			</tr>
			<tr>
				<th>Team</th>
				<td><input type="text" name="team" value="${mvo.team }"></td>
			</tr>
			<tr>
				<th>계정 생성일</th>
				<td>${mvo.regdate }</td>
			</tr>
			<tr>
				<th>최근 접속일</th>
				<td>${mvo.lastlogin }</td>
			</tr>
		</table>
		<button type="submit">수정</button>
		<a href="#"><button type="button">회원탈퇴</button></a>
	</form>
	
	<script type="text/javascript">
		const msg_modify = `<c:out value="${msg_modify}" />`;
		console.log(msg_modify);
		if(msg_modify == 'success') {
			alert('수정이 완료되었습니다!');
		}
	</script>
</body>
</html>

먼저 mypage.jsp에 로그인한 계정의 정보를 뿌리기 위해서 MemberController에 case mypage를 작성한다.

MemberController.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import service.MemberService;
import service.MemberServiceImpl;

@WebServlet("/memb/*")
public class MemberController extends HttpServlet {

// ... (기존 코드)
			
		case "mypage":
			 try {
				HttpSession ses = request.getSession();
				MemberVO mvo = (MemberVO)ses.getAttribute("ses");
				log.info(">>> ses mvo >>> {}",mvo);
				
				request.setAttribute("mvo", mvo);
				log.info(">>> mypage check 1");
				
				destPage = "/member/mypage.jsp";
				
			} catch (Exception e) {
				e.printStackTrace();
				log.info(">>> mypage error");
			}
			break;
		}
		
// ... (기존 코드)

}

여기까지 완료하면 mypage.jsp 화면에 로그인한 계정의 정보가 뿌려지는 걸 확인할 수 있다.

마이페이지 화면

정보가 제대로 들어오는 것을 확인했으니, 수정하는 기능을 만들기 위해

MemberController에 case modify를 만들고 수정에 성공하면

session을 끊고 다시 로그인을 시킬지, 화면을 유지할지 고민하다가

alert를 띄우는 코드를 작성하기로 했다.

Controller 작성 후에는 service부터 순차적으로 mapper까지 코드를 작성한다.

MemberController.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
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 org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import service.MemberService;
import service.MemberServiceImpl;

@WebServlet("/memb/*")
public class MemberController extends HttpServlet {

// ... (기존 코드)
			
		case "mypage":
			 try {
				HttpSession ses = request.getSession();
				MemberVO mvo = (MemberVO)ses.getAttribute("ses");
				log.info(">>> ses mvo >>> {}",mvo);
				
				request.setAttribute("mvo", mvo);
				log.info(">>> mypage check 1");
				
				destPage = "/member/mypage.jsp";
				
			} catch (Exception e) {
				e.printStackTrace();
				log.info(">>> mypage error");
			}
			break;
			
		case "modify":
			try {
				// mypage.jsp의 form method = post
				// equalsIgnoreCase를 사용하면 POST / post 대소문자 다 사용 가능
				if(request.getMethod().equalsIgnoreCase("post")) {
					HttpSession ses = request.getSession();
					MemberVO mvo = (MemberVO) ses.getAttribute("ses");
					log.info(">>> ses mvo >>> {}", mvo);
					
					// 수정할 정보
					String pwd = request.getParameter("pwd");
					String email = request.getParameter("email");
					int team = Integer.parseInt(request.getParameter("team"));
					
					// 현재 로그인된 계정의 아이디를 가져와서 수정된 객체 생성
					String id = mvo.getId();
					MemberVO updateMvo = new MemberVO(mvo.getId(), pwd, email, team);
					
					// 수정 로직 수행
					int isOk = msv.modify(updateMvo);
					log.info(">>> modify >>> ", (isOk > 0)? "OK":"FAIL");
					
					// 수정 후 로그인 중인 계정 정보 갱신
					mvo = msv.login(new MemberVO(mvo.getId(), pwd));
					// 로그인 한 계정의 정보 업데이트
					ses.setAttribute("ses", mvo);
					
					if(isOk > 0) {
						request.setAttribute("msg_modify", "success");
					}
					
					// 프로필 수정 후의 정보 업데이트
					ses.setAttribute("mvo", mvo);
					
					// modify 요청이 /memb/modify로 진행되므로 
					///memb/mypage로 이동하고 싶으면 /memb/를 생각하고 mypage만 써줘도 된다 (상대경로)
					// 절대경로를 사용하려면 /memb/mypage로 써주면 된다
					destPage = "mypage";
					
				}
				
			} catch (Exception e) {
				e.printStackTrace();
				log.info(">>> mypage modify error");
			}
			break;
		}
		
// ... (기존 코드)

}

MemberService.interface

package service;

import domain.MemberVO;

public interface MemberService {

	int register(MemberVO mvo);

	MemberVO login(MemberVO mvo);

	int lastLogin(String id);

	int modify(MemberVO updateMvo);

}

MemberServiceImpl.java

package service;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import repository.MemberDAO;
import repository.MemberDAOImpl;

public class MemberServiceImpl implements MemberService {

// ... (기존 코드)

	@Override
	public int modify(MemberVO updateMvo) {
		log.info(">>> modify check 2");
		return mdao.update(updateMvo);
	}

}

MemberDAO.interface

package repository;

import domain.MemberVO;

public interface MemberDAO {

	int insert(MemberVO mvo);

	MemberVO login(MemberVO mvo);

	int lastLogin(String id);

	int update(MemberVO updateMvo);

}

MemberDAOImpl.java

package repository;

import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import orm.DatabaseBuilder;

public class MemberDAOImpl implements MemberDAO {

// ... (기존 코드)

	@Override
	public int update(MemberVO updateMvo) {
		 log.info(">>> modify check 3");
	        int isOk = sql.update("MemberMapper.mypage", updateMvo);
	        if (isOk > 0) sql.commit();
	        return isOk;
	}

}

memberMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="MemberMapper">
	<insert id="reg">
		insert into member(id, pwd, email, team)
		values(#{id}, #{pwd}, #{email}, #{team})
	</insert>
	<select id="login" resultType="mvo">
		select * from member 
		where id = #{id} and pwd = #{pwd}
	</select>
	<update id="last">
	    update member set lastlogin = now() 
	    where id = #{id}
	</update>
	<update id="mypage">
		update member set pwd = #{pwd}, email = #{email}, team = #{team}
		where id = #{id}
	</update>
  </mapper>

마이페이지 화면