내 정보 수정하기

2023.07.10 - [ON/Servlet] - 내 정보 보기

 

내 정보 보기에서, JSP 작성한 내정보에서 내정보수정을 할 것 이다. 

 

내 정보 보기는(index.jsp에서)  get 방식으로 가져왔고, 수정하기는 post 방식으로 가져왔다. 

http://localhost:8080/community/member/myPage/info(GET)

http://localhost:8080/community/member/myPage/info(POST)

결국 주소가 같다 그렇다면 어떻게 주소를 작성하면되냐, 

 

: 맨 마지막 info만 작성하면 된다! 가고자하는 방향은 같은데 마지막 부분만 다르다. 

 

1. JSP 주소 작성 : form action="info"

<form action="info" method="POST" name="myPage-form">

    <div class="myPage-row">
        <label>닉네임</label> <input type="text" name="memberNickname"
            value="${loginMember.memberNickname}" maxlength="10">
    </div>

    <div class="myPage-row">
        <label>전화번호</label> <input type="text" name="memberTel"
            value="${loginMember.memberTel}" maxlength="11">
    </div>

    <!-- 주소 -->				<!-- fn:splite(문자열,'구분자') 문자열을 구분자를 통해 쪼갤거야! -->
    <c:set var="addr" value="${fn:split(loginMember.memberAddress,',,')}"/>

    <div class="myPage-row info-title">
        <span>주소</span>
    </div>

    <div class="myPage-row info-address">
        <input type="text" name="memberAddress" value="${addr[0]}" maxlength="6">
        <button type="button" id="info-address-btn">검색</button>
    </div>

    <div class="myPage-row info-address">
        <input type="text" name="memberAddress" value="${addr[1]}">
    </div>

    <div class="myPage-row info-address">
        <input type="text" name="memberAddress" value="${addr[2]}">
    </div>

    <button id="info-update-btn">수정하기</button>

</form>

 

 

2. 이클립스 (servlet)

• 회원정보 수정을 하기 위해서는 회원정보로 확인할 수 있다. 

//파라미터 얻어오기 + 배열 -> 문자열 만들기 완료! 
String memberNickname = req.getParameter("memberNickname");
String memberTel = req.getParameter("memberTel");
String[] address = req.getParameterValues("memberAddress");

String memberAddress = null;

if (!address[0].equals(" ")) {
    memberAddress = String.join(",,", address);
}

//*** 세션에서 로그인한 회원 정보 얻어오기 ***
HttpSession session = req.getSession();

• 회원번호 얻어오기 

// 회원번호 얻어오기 ! 
int memberNo = loginMember.getMemberNo();

Member mem = new Member();

mem.setMemberNo(memberNo);		
mem.setMemberNickname(memberNickname);
mem.setMemberTel(memberTel);
mem.setMemberAddress(memberAddress);

•  

// 회원 정보 수정 요청(POST) : 누가 로그인했는지 확인해야한다! (회원번호가 필요하다!)
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//파라미터 얻어오기 + 배열 -> 문자열 만들기 완료! 
String memberNickname = req.getParameter("memberNickname");
String memberTel = req.getParameter("memberTel");
String[] address = req.getParameterValues("memberAddress");

String memberAddress = null;

if (!address[0].equals(" ")) {
    memberAddress = String.join(",,", address);
}

//*** 세션에서 로그인한 회원 정보 얻어오기 ***
HttpSession session = req.getSession();

//얕은복사(세션에 있는 회원 정보 객체 주소) 
// -> loginMember를 수정하면 세션에 저장된 내용이 수정된다! 
Member loginMember = (Member)(session.getAttribute("loginMember"));

// 회원번호 얻어오기 ! 
int memberNo = loginMember.getMemberNo();

Member mem = new Member();

mem.setMemberNo(memberNo);		
mem.setMemberNickname(memberNickname);
mem.setMemberTel(memberTel);
mem.setMemberAddress(memberAddress);

try {

    MemberService servie = new MemberService();

    int result = servie.updateMember(mem);

    //수정 성공/실패에 따른 메세지 출력 제어 
    if(result>0) {//성공
        session.setAttribute("message", "회원정보가 수정되었습니다.");

        //DB는 수정되었지만 로그인한 정보가 담겨있는 Session의 정보는 그대로다! 
        //-> 동기화 작업 
        loginMember.setMemberNickname(memberNickname);
        loginMember.setMemberTel(memberTel);
        loginMember.setMemberAddress(memberAddress);

    }else {//실패
        session.setAttribute("message", "회원정보 수정이 실패되었습니다.");
    }

    //성공/실패 여부 관계없이 "내정보"화면 재요청
    //절대경로
    //resp.sendRedirect(req.getContextPath()+"/member/myPage/info");

    //상대경로
    resp.sendRedirect("info");


} catch (Exception e) {
    e.printStackTrace();
}

}

 

---

사이드바 메뉴 

 

1. jsp 만들기 ( sideMenu.jsp ) 

- myPage-Info.jsp에 사이드바 짤라서 sideMenu.jsp에 넣기

- myPage-Info.jsp 사이드 사이드바 짤라놨으니까 include 해주기 

<!-- 사이드메뉴 include  -->
<jsp:include page="/WEB-INF/views/member/sideMenu.jsp"></jsp:include>

- 비밀번호 변경 클릭시 보이는 링크 만들기 

<li><a href="${contextPath}/member/myPage/changePw">비밀번호 변경</a></li>

전체 코드 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!-- 왼쪽 사이드 메뉴  -->
<section class="left-side">

	사이드메뉴
	<ul class="list-group">
		<li><a href="#">프로필</a></li>
		
		<!-- /community/member/myPage/info -->
		<li><a href="${contextPath}/member/myPage/info">내정보</a></li>
		
		<!-- /community/member/myPage/changePw -->
		<li><a href="${contextPath}/member/myPage/changePw">비밀번호 변경</a></li>
		<li><a href="#">회원 탈퇴</a></li>
	</ul>


</section>

1. servlet 만들기 ( sideMenu.jsp 잡아서 처리해줄  ) 

package edu.kh.community.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;

@WebServlet("/member/myPage/changePw")
public class MyPageChangePwServlet extends HttpServlet {

	
	// get 방식 요청 : /WEB-INF/views/member/myPage-changePw.jsp 위임
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException {

		String path = "/WEB-INF/views/member/myPage-changePw.jsp";
		req.getRequestDispatcher(path).forward(req, resp);
	}

}

 

- 작성한 myPage-changePw.jsp 만들어주기 

→ changePw클릭시 화면 jsp로 잡아주기

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

<!-- 문자열 관련함수(메소드) 제공 JSTL (EL 형식으로 작성) -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>



<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<link rel="stylesheet"
href="${contextPath}/resources/css/main-style.css">
<link rel="stylesheet"
href="${contextPath}/resources/css/myPage-style.css">
<script src="https://kit.fontawesome.com/7bc7245179.js"
crossorigin="anonymous"></script>
s
</head>

<body>

<main>

<jsp:include page="/WEB-INF/views/common/header.jsp"></jsp:include>
<!-- 마이페이지 - 내정보 -->
<section class="myPage-content">

    <!-- 사이드메뉴 include  -->
    <jsp:include page="/WEB-INF/views/member/sideMenu.jsp"></jsp:include>

    <!-- 오른쪽 마이페이지 주요 내용 부분 -->
    <section class="myPage-main">

        <h1 class="mypage-title">비밀번호 변경</h1>
        <span class="myPage-explnation">현재 비밀번호가 일치하는 경우 새 비밀번호로 변경할
            수 있습니다.</span>

        <!-- http://localhost:8080/community/member/myPage/changePw(GET)
             http://localhost:8080/community/member/myPage/changePw(POST) 

             동일한 주소일때, GET/POST 방식이 다를때 마지막으로 갈 부분에 대해서만 작성하면된다. 
        -->

        <form action="changePw" method="POST" name="myPage-form">

            <div class="myPage-row">
                <label>현재 비밀번호</label> <input type="password" name="currentPw"
                    id="currentPw" maxlength="30">
            </div>

            <div class="myPage-row">
                <label>새 비밀번호</label> <input type="password" name="newPw"
                    maxlength="30">
            </div>

            <div class="myPage-row">
                <label>새 비밀번호 확인</label> <input type="password" name="newPwConfirm"
                    maxlength="30">
            </div>


            <button id="info-update-btn">수정하기</button>

        </form>

    </section>

</section>

</main>

<jsp:include page="/WEB-INF/views/common/footer.jsp"></jsp:include>

</body>

</html>