커뮤니티 - 회원 정보 수정 기능 구현 (23.07.10~11)

현·2023년 7월 10일

server

Server

목록 보기

12/35

📝 회원 정보 수정 기능

💡 VS Code

🔎 myPage-info.html

<!-- <%@ 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 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="../resources/css/main-style.css">

    <link rel="stylesheet" href="../resources/css/myPage-style.css">
    
    <script src="https://kit.fontawesome.com/4dca1921b4.js" crossorigin="anonymous"></script>

</head>
<body>

    <main>
        <header>
            
            <!-- 클릭 시 메인페이지로 이동하는 로고 -->
            <section>
                <a href="#">
                    <img src="resources/images/logo.jpg" id="home-logo">
                </a>
            </section>

            <!-- header의 두번째 자식 div -->
            <section>
                <article class="search-area">

                    <!-- form 내부 input 태그 값을 서버 또는 페이지로 전달 -->
                    <form action="#" name="search form">

                        <!-- fieldset : form 내부에서 input을 종류별로 묶는 용도로 많이 사용 -->
                        <fieldset>

                            <input type="search" id="query" name="query" 
                                placeholder="검색어를 입력해주세요" autocomplete="off">

                            <!-- 검색 버튼 -->
                            <button type="submit" id="search-btn" class="fa-solid fa-magnifying-glass"></button>
                            
                        </fieldset>

                    </form>
                </article>
            </section>
            <section></section>
        </header>

        <nav>

            <ul>
                <li><a href=#>공지사항</a></li>
                <li><a href=#>자유 게시판</a></li>
                <li><a href=#>질문 게시판</a></li>
                <li><a href=#>FAQ</a></li>
                <li><a href=#>1:1문의</a></li>
            </ul>
        </nav>

        <!-- 마이페이지 - 내 정보 -->
        <section class="myPage-content">
            
            <!-- 왼쪽 사이드 메뉴 -->
            <section class="left-side">
                사이드 메뉴

                <ul class="list-group">
                    <li> <a href="#">프로필</a> </li>
                    <li> <a href="#">내 정보</a> </li>
                    <li> <a href="#">비밀번호 변경</a> </li>
                    <li> <a href="#">회원 탈퇴</a> </li>
                </ul>

            </section>

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

                <h1 class="myPage-title">내 정보</h1>
                <span class="myPage-explanation">원하는 회원 정보를 수정할 수 있습니다.</span>

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

                    <div class="myPage-row">
                        <label>닉네임</label>
                        <input type="text" name="memberNickname" value="로그인 회원 별명" maxlength="10">
                    </div>

                    <div class="myPage-row">
                        <label>전화번호</label>
                        <input type="text" name="memberTel" value="01012341234" maxlength="11">
                    </div>

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

                    <div class="myPage-row info-address">
                        <input type="text" name="memberAddress" value="우편번호" maxlength="6">

                        <button type="button" id="info-address-btn">검색</button>
                    </div>

                    <div class="myPage-row info-address">
                        <input type="text" name="memberAddress" value="도로명주소">
                    </div>

                    <div class="myPage-row info-address">
                        <input type="text" name="memberAddress" value="상세주소">
                    </div>

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

                </form>

            </section>

        </section>

    </main>
    <footer>
        <p>Copyright &copy; KH Information Educational Institute M-Class</p>

        <article>
            <a href="#">프로젝트 소개</a>
            <span>|</span>
            <a href="#">이용약관</a>
            <span>|</span>
            <a href="#">개인정보처리방침</a>
            <span>|</span>
            <a href="#">고객센터</a>
        </article>
    </footer>

</body>
</html>

🔎 myPage-style.css

/* 마이페이지 영역 */
.myPage-content{
    width: 1000px;
    height: 800px;
    margin: 50px auto;

    display: flex;
}

/* 왼쪽 사이드 메뉴 */
.left-side{
    width: 25%;
    border-right: 2px solid #ddd;
}

.list-group{
    width: 100%;
    padding: 0 20px 0 0;
          /* 상 우 하 좌 */
}

.list-group > li{
    list-style: none;
    height: 50px;
    font-size: 18px;
}

.list-group > li > a{
    text-decoration: none;
    color: black;
    height: 100%;

    border-bottom: 2px solid #ddd;

    display: flex;

    justify-content: center;
    align-items: center;
}

.list-group > li:hover{
    background-color: #f2f2f2;
}

/* 마이페이지 공통 부분 */
.myPage-main{
    width: 75%;
    padding: 0 50px;
}

.myPage-title{
    margin: 0 0 10px 0;
    font-size: 30px;
}

.myPage-explanation{
    display: block;
    font-size: 14px;
    margin-bottom: 30px;    
    letter-spacing: -1px;
}

.myPage-row{
    width: 500px;
    height: 50px;
    margin-top: 20px;

    display: flex;
    align-items: center;
    border-bottom: 2px solid #ddd;
}

.myPage-row > *{
    font-size: 18px;
    font-weight: bold;
}

.myPage-row > label{
    width: 30%;
    color: #455ba8;
}

.myPage-row > span{
    width: 70%;
}

.myPage-row > input{
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    font-weight: normal;
}

.myPage-row:focus-within{
    border-bottom: 2px solid #455ba8;
}

form[name="myPage-form"]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 내 정보 */
.info-title{
    color: #455ba8;
    border: 0;
}

.info-address{ margin: 0; }

/* 검색 버튼 */
#info-address-btn{
    width: 30%;
    height: 70%;
    
    font-size: 14px;
    font-weight: normal;

    background-color: white;
    border: 1px solid gray;
    cursor: pointer;
}

#info-update-btn{
    width: 100%;
    padding: 10px;
    margin: 50px 0;
    border: none;
    font-size: 20px;
    font-weight: bold;
    background-color: #455ba8;
    color: white;
    cursor: pointer;
}

💡 Eclipse

🔎 myPage-info.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/4dca1921b4.js" crossorigin="anonymous"></script>

</head>
<body>

    <main>
		
		<jsp:include page="/WEB-INF/views/common/header.jsp"/>
		
        <!-- 마이페이지 - 내 정보 -->
        <section class="myPage-content">
            
            <!-- 왼쪽 사이드 메뉴 -->
            <section class="left-side">
                사이드 메뉴

                <ul class="list-group">
                    <li> <a href="#">프로필</a> </li>
                    <li> <a href="#">내 정보</a> </li>
                    <li> <a href="#">비밀번호 변경</a> </li>
                    <li> <a href="#">회원 탈퇴</a> </li>
                </ul>

            </section>

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

                <h1 class="myPage-title">내 정보</h1>
                <span class="myPage-explanation">원하는 회원 정보를 수정할 수 있습니다.</span>

                <form action="#" 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:split(문자열, '구분자') -->
                    <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>

            </section>

        </section>

    </main>

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

</body>
</html>

🔎 index.jsp

.
.
.

            		</c:when>
            		
            		<%-- 로그인이 되어 있는 경우 --%>
            		<c:otherwise>
            			<article class='login-area'>
            			
            				<!-- 회원 프로필 이미지 -->
            				<a href="#">
            					<img src="/community/resources/images/user.png" id="member-profile">
            				</a>

							<!-- 회원 정보 + 로그아웃 버튼 -->
							<div class="my-info">
								<div>
									<a href="${contextPath}/member/myPage/info" id="nickname">${sessionScope.loginMember.memberNickname}</a>

									<a href="/community/member/logout" id="logout-btn">로그아웃</a>
								</div>
								
								<p>
									${sessionScope.loginMember.memberEmail}
								</p>
							</div>
							
            			</article>
            		</c:otherwise>

            	</c:choose>
                
.
.
.

🔎 MyPageInfoServlet.java

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;
import javax.servlet.http.HttpSession;

import edu.kh.community.member.model.service.MemberService;
import edu.kh.community.member.model.vo.Member;

@WebServlet("/member/myPage/info")
public class MyPageInfoServlet extends HttpServlet{
	
	// 메인페이지 -> 별명 클릭 시 요청(GET)
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String path = "/WEB-INF/views/member/myPage-info.jsp";
		req.getRequestDispatcher(path).forward(req, resp);
	}
	
	// 회원 정보 수정 요청(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 객체 생성
		Member mem = new Member();
		
		mem.setMemberNo(memberNo);
		mem.setMemberNickname(memberNickname);
		mem.setMemberTel(memberTel);
		mem.setMemberAddress(memberAddress);
		
		try {
			MemberService service = new MemberService();
			
			int result = service.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();
		}
		
	}
}

🔎 MemberService.java

.
.
.
	/** 회원 정보 수정 Service
	 * @param mem
	 * @return result
	 * @throws Exception
	 */
	public int updateMember(Member mem) throws Exception{
		
		Connection conn = getConnection();
		
		int result = dao.updateMember(conn, mem);

		if(result > 0) commit(conn);
		else		   rollback(conn);
		
		close(conn);
		
		return result;
	}
.
.
.

🔎 MembeDAO.java

.
.
.
	/** 회원 정보 수정 DAO
	 * @param conn
	 * @param mem
	 * @return result
	 * @throws Exception
	 */
	public int updateMember(Connection conn, Member mem) throws Exception {
		
		int result = 0;
		
		try {
			String sql = prop.getProperty("updateMember");
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, mem.getMemberNickname());
			pstmt.setString(2, mem.getMemberTel());
			pstmt.setString(3, mem.getMemberAddress());
			pstmt.setInt(	4, mem.getMemberNo());
			
			result = pstmt.executeUpdate();
			
		} finally {
			close(pstmt);
		}
		
		return result;
	}
.
.
.