2020년 12월 29일

업데이트: December 29, 2020

회원 정보 조회

로그인이 되었을 때 출력하는 코드

회원 이름을 클릭 할 경우 Mypage로 넘어감 header.jsp

<c:otherwise>
<li class="nav-item active">
<%-- 로그인 회원의 이름을 가져와 출력 --%>
<a class="nav-link" href="${contextPath }/member/myPage.do">${loginMember.memberName}</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="${contextPath}/member/logout.do">Logout</a>
</li>
</c:otherwise>

MyPage와 연결되는 서블릿

forward 하기 위해 MyPageServlet 생성 MyPageServlet.java

package com.kh.wsp.member.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;


@WebServlet("/member/myPage.do")
public class MyPageServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 로그인 된 정보, DB와 Session에 담겨져 있다.
		
		String path = "/WEB-INF/views/member/myPage.jsp";
		RequestDispatcher view = request.getRequestDispatcher(path);
		view.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

페이지 좌측에 보이는 메뉴

sideMenu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="col-sm-4 mt-5">
	<h3>사이드 메뉴</h3>
	<ul class="list-group">
		<li class="list-group-item list-group-item-action"><a href="myPage.do">내정보</a></li>
		<li class="list-group-item list-group-item-action"><a href="changePwd.do">비밀번호 변경</a></li>
		<li class="list-group-item list-group-item-action"><a href="secession.do">회원 탈퇴</a></li>
	</ul>
</div>

myPage

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" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내정보</title>
<style>
	input[type="number"]::-webkit-outer-spin-button, 
	input[type="number"]::-webkit-inner-spin-button
		{
		-webkit-appearance: none;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<jsp:include page="../common/header.jsp"></jsp:include>
		
		<%-- 전화번호, 주소를  구분자를 이용하여 분리된 배열 형태로 저장 --%>
		<%-- ${fn:split(문자열,구분자) } : 배열로 저장됨. --%> 
		<c:set var="phone" value="${fn:split(loginMember.memberPhone,'-') }"/>
		<c:set var="address" value="${fn:split(loginMember.memberAddress,', ') }"/>


    <div class="row my-5">
        <jsp:include page="sideMenu.jsp"></jsp:include>		
            
    <div class="col-sm-8">
        <h3>My Page</h3>
        <hr>
        <div class="bg-white rounded shadow-sm container p-3">
            <form method="POST" action="updateMember.do" onsubmit="return memberUpdateValidate();" class="form-horizontal" role="form">
            <!-- 아이디 -->
            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <h6>아이디</h6>
                </div>
                <div class="col-md-6">
                    <h5 id="id">${loginMember.memberId}</h5>
                </div>
            </div>

            <!-- 이름 -->
            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <h6>이름</h6>
                </div>
                <div class="col-md-6">
                    <h5 id="name">${loginMember.memberName} </h5>
                </div>
            </div>

            <!-- 전화번호 -->
            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <label for="phone1">전화번호</label>
                </div>
                <!-- 전화번호1 -->
                <div class="col-md-3">
                    <select class="custom-select" id="phone1" name="phone1">
                        <option>010</option>
                        <option>011</option>
                        <option>016</option>
                        <option>017</option>
                        <option>019</option>
                    </select>
                </div>
                

                <!-- 전화번호2 -->
                <div class="col-md-3">
                    <input type="number" class="form-control phone" id="phone2" name="phone2" value="${phone[1] }">
                </div>

                <!-- 전화번호3 -->
                <div class="col-md-3">
                    <input type="number" class="form-control phone" id="phone3" name="phone3" value="${phone[2] }">
                </div>
            </div>

            <!-- 이메일 -->
            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <label for="memberEmail">Email</label>
                </div>
                <div class="col-md-6">
                    <input type="email" class="form-control" id="email" name="email" value="${loginMember.memberEmail}">
                </div>
            </div>
            <br>

            <!-- 주소 -->
            <!-- 오픈소스 도로명 주소 API -->
            <!-- https://www.poesis.org/postcodify/ -->
            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <label for="postcodify_search_button">우편번호</label>
                </div>
                <div class="col-md-3">
                    <input type="text" name="post" class="form-control postcodify_postcode5" value="${address[0] }">
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-primary" id="postcodify_search_button">검색</button>
                </div>
            </div>

            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <label for="address1">도로명 주소</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control postcodify_address" name="address1" id="address1"  value="${address[1] }">
                </div>
            </div>

            <div class="row mb-3 form-row">
                <div class="col-md-3">
                    <label for="address2">상세주소</label>
                </div>
                <div class="col-md-9">
                    <input type="text" class="form-control postcodify_details" name="address2" id="address2"  value="${address[2] }">
                </div>
            </div>


            <!-- 관심분야 -->
            <hr class="mb-4">
            <div class="row">
                <div class="col-md-3">
                    <label>관심 분야</label>
                </div>
                
                <div class="col-md-9 custom-control custom-checkbox">
                
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input custom-control-input"
                            name="memberInterest" id="sports" value="운동">
                        <label class="form-check-label custom-control-label" for="sports">운동</label>
                    </div>
                    
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input custom-control-input"
                            name="memberInterest" id="movie" value="영화">
                        <label class="form-check-label custom-control-label" for="movie">영화</label>
                    </div>
                    
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input custom-control-input" 
                            name="memberInterest" id="music" value="음악">
                        <label class="form-check-label custom-control-label" for="music">음악</label>
                    </div>
                    <br>
                    
                    <div class="form-check form-check-inline">
                        <input type="checkbox" name="memberInterest" id="cooking"
                            value="요리" class="form-check-input custom-control-input">
                        <label class="form-check-label custom-control-label"
                            for="cooking">요리</label>
                    </div>
                    
                    <div class="form-check form-check-inline">
                        <input type="checkbox"  class="form-check-input custom-control-input" 
                            name="memberInterest" id="game" value="게임">
                        <label class="form-check-label custom-control-label" for="game">게임</label>
                    </div>
                    
                    <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input custom-control-input" 
                            name="memberInterest" id="etc" value="기타"> 
                        <label class="form-check-label custom-control-label" for="etc">기타</label>
                    </div>
                    
                </div>
            </div>

            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit">수정</button>
                </form>
            </div>
        </div>
    </div>
</div>
<br><br>
	
	<jsp:include page="../common/footer.jsp"></jsp:include>
		
		
		
	<!-- postcodify를 로딩 -->
	<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
	
	<!-- 회원 관련 Javascript 코드를 모아둘 wsp_member.js 파일을 작성 -->
	<script src="${contextPath}/resources/js/wsp_member.js"></script>
	
 		
	<script>
    /* 스크립트 코드에 EL/JSTL 이 포함된 경우 별도 js파일에 작성할 수 없다
    - js파일은 요청 시 클라이언트 측으로 전달되어져 브라우저가 해석하지만
        JSP(EL/JSTL)는 서버측에서 JAVA로 변환되고 해석되어야함.
        -> js파일에 작성하는 경우 EL/JSTL 코드가 해석되지 않은 상태로 클라이언트로 전달되어 
            의도한 형태로 해석되지 않는 문제가 발생함.
    */
    
    //  전화번호 첫 번재 자리(option 태그)를 회원 전화번호 첫 번째 자리와 일치하는 값으로 선택하기
    // (function(){})(); -> 즉시 처리 함수
    // 함수가 정의 되자마자 수행되는 함수, 변수명 충돌 현상 방지 + 속도적 측면에서 우위가 있음.
    (function(){
        
        // #phone1의 자식 중 option 태그들을 반복 접근
        $("#phone1 > option").each(function(index, item){
            // index : 현재 접근중인 인덱스
            // item : 현재 접근중인 요소
            
                // 현재 접근한 요소에 써져있는 값과 전화번호 배열의 첫번째 값이 같다면
            if( $(item).text() == "${phone[0]}"){
                // 현재 접근한 요소에 seleted라는 옵션을 추가
                $(item).prop("selected",true);
            }
        });
    })();		
				
		
    // 관심분야 중 회원 정보와 일치하는 부분 체크하기
    (function(){
        
        // 회원 정보에서 관심분야 문자열을 얻어와 ' , '를 구분자로 하여 분리하기
        var interest = "${loginMember.memberInterest}".split(",");
        
        // 체크 박스 요소를 모두 선택하여 반복 접근
        $("input[name='memberInterest']").each(function(index, item){
        
        // interest 배열 내에
        // 현재 접근 중인 체크박스의 value와 일치하는 요소가 있는지 확인
        if(interest.indexOf( $(item).val()) != -1 ){
            $(item).prop("checked", true);
        }
        });
    })();
		
		
	</script>

</body>
</html>

회원정보 화면

로그인 후 사용자의 이름을 클릭
사용자의 정보 (sqlDeveloper)
마이페이지

회원정보 수정

회원정보 수정 시 호출하는 함수

myPage.jsp

<form method="POST" action="updateMember.do" 
onsubmit="return memberUpdateValidate();" class="form-horizontal" role="form">

회원정보 수정에 필요한 코드

회원정보를 수정할 때도 유효성 검사를 해줘야된다.

wsp_member.js

// 회원 정보 수정--------------------------------------
// 회원 정보 수정 유효성 검사
function memberUpdateValidate(){
  
    // 유효성 검사를 저장할 객체 생성
    var updateCheck = {"phone2":false,
                        "email":false}

    var regExp1 = /^\d{3,4}$/; // 숫자 3~4 글자
	var regExp2 = /^\d{4,4}$/; // 숫자 4 글자
	var regExp3 = /^[\w]{4,}@[\w]+(\.[\w]+){1,3}$/;


    // 전화번호 유효성 검사
    var p2 = $("#phone2").val();
    var p3 = $("#phone3").val();
    if(!regExp1.test(p2) || !regExp2.test(p3)){
        updateCheck.phone2 = false;
    }else{
        updateCheck.phone2 = true;
    }

    // 이메일 유효성 검사
    if(!regExp3.test( $("#email").val() )){
        updateCheck.email = false;
    }else{
        updateCheck.email = true;
    }


    // updateCheck 내부에 저장된 값 검사
    for(var key in updateCheck){

        // 업데이트에서 가져온 값이 false 라면
        if(!updateCheck[key]){
            swal("일부 값이 유효하지 않습니다.");
            return false;
        }
    }
}

회원정보 유효성 검사 화면

기존 회원 정보
유효성 검사 위반했을 때

회원정보 수정 servlet

package com.kh.wsp.member.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 com.kh.wsp.member.model.service.MemberService;
import com.kh.wsp.member.model.vo.Member;


@WebServlet("/member/updateMember.do")
public class UpdateMemberServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
  
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// 전송된 파라미터를 변수에 저장
		String memberEmail = request.getParameter("email");
		
		String phone1 = request.getParameter("phone1");
		String phone2 = request.getParameter("phone2");
		String phone3 = request.getParameter("phone3");
		// 전화번호를 '-'를 구분자로 하여 하나로 합치기
		String memberPhone = phone1+"-"+phone2+"-"+phone3;
		
		String post = request.getParameter("post"); //우편번호
		String address1 = request.getParameter("address1"); // 도로명 주소
		String address2 = request.getParameter("address2"); // 상세주소
		// 주소를 ", "를 구분자로 하여 하나로 합치기
		String memberAddress = post+","+address1+","+address2;
		
		String[] interest = request.getParameterValues("memberInterest");
		String memberInterest = null;
		if(interest != null ) memberInterest = String.join(",", interest);
		
		// Session에 있는 로그인 정보를 얻어옴. -> 회원 번호 사용
		HttpSession session = request.getSession();
		Member loginMember = (Member)session.getAttribute("loginMember");
		
		// 얻어온 수정 정보와 회원 번호를 하나의 Member객체에 저장
		Member member = new Member();
		member.setMemberNo(loginMember.getMemberNo()); //회원번호
		member.setMemberEmail(memberEmail);
		member.setMemberPhone(memberPhone);
		member.setMemberAddress(memberAddress);
		member.setMemberInterest(memberInterest);
		
		try {
			// 비즈니스 로직 수행 후 결과 반환
			int result = new MemberService().updateMember(member);

			
			
			String swalIcon = null;
			String swalTitle = null;
			String swalText = null;
			
			if(result>0) {
				swalIcon = "success";
				swalTitle = "회원정보 수정 성공";
				swalText = "회원정보가 성공적으로 수정되었습니다.";
				
				// DB에는 정보가 수정되었지만 session에는 정보 수정이 되지않음.
				// session 정보 갱신해주기.
				
				// 기존 로그인 정보에서 id를 얻어와 갱신에 사용된 member객체에 저장
				member.setMemberId(loginMember.getMemberId());
				member.setMemberName(loginMember.getMemberName());
				member.setMemberGrade(loginMember.getMemberGrade());
				// -> member 객체가 갱신된 회원 정보를 모두 갖게됨.
				
				// Session에 있는 loginMember 정보를 member로 갱신
				session.setAttribute("loginMember", member);
				
			}else {
				swalIcon ="error";
				swalTitle ="회원정보 수정 실패";
				swalText = "회원정보 수정에 실패하였습니다.";
			}
			
			session.setAttribute("swalIcon", swalIcon);
			session.setAttribute("swalTitle", swalTitle);
			session.setAttribute("swalText", swalText);
			
			// 수정 완료 후 다시 내 정보 페이지로 재요청
			response.sendRedirect("myPage.do");
					     		// == mypageServlet (jsp로 요청 위임하는 곳)
								// -> myPage.jsp (세션에 있는 정보들을 이용해서 화면 출력하는 곳)
			
			//response.sendRedirect(request.getHeader("referer"));
			// 도 가능하다, (요청 이전페이지 = 마이페이지)
			
		}catch(Exception e) {
			e.printStackTrace();
			request.setAttribute("errorMsg", "회원 수정 과정에서 오류가 발생했습니다.");
			String path = "/WEB-INF/views/common/errorPage.jsp";
			RequestDispatcher view = request.getRequestDispatcher(path);
			view.forward(request,response);
			
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

회원정보 수정 service

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

int result = dao.updateMember(conn,member);

if(result>0)  commit(conn);
else		  rollback(conn);

close(conn);

return result;
}

회원정보 수정 SQL

<entry key="updateMember">
UPDATE MEMBER 
SET MEMBER_EMAIL=?,
		MEMBER_PHONE=?,
		MEMBER_ADDR=?,
		MEMBER_INTEREST=?
WHERE MEMBER_NO=? 
</entry>

회원정보 수정 DAO

/** 회원정보 수정 DAO
* @param conn
* @param member
* @return	result
* @throws Exception
*/
public int updateMember(Connection conn, Member member) throws Exception {
int result = 0;

    String query = prop.getProperty("updateMember");
    
try {
    pstmt = conn.prepareStatement(query);
    pstmt.setString(1, member.getMemberEmail());
    pstmt.setString(2, member.getMemberPhone());
    pstmt.setString(3, member.getMemberAddress());
    pstmt.setString(4, member.getMemberInterest());
    pstmt.setInt(5, member.getMemberNo());
    
    result = pstmt.executeUpdate();
    
}finally {
    close(pstmt);
}

return result;
}

회원정보 수정 화면

수정 전 정보
DB

내정보 화면
수정 할 정보
수정 성공
수정 된 정보
DB

내정보 화면

Twitter Google+ LinkedIn

techhan

2020년 12월 29일

회원 정보 조회

로그인이 되었을 때 출력하는 코드

MyPage와 연결되는 서블릿

페이지 좌측에 보이는 메뉴

myPage

회원정보 화면

회원정보 수정

회원정보 수정 시 호출하는 함수

회원정보 수정에 필요한 코드

회원정보 유효성 검사 화면

회원정보 수정 servlet

회원정보 수정 service

회원정보 수정 SQL

회원정보 수정 DAO

회원정보 수정 화면

공유하기

댓글남기기

관련 글 더보기

[정올] 1658_최대공약수와 최소공배수 (JAVA)

[정올] 2809_약수 (JAVA)

[정올] 1402_약수 구하기 (JAVA)

[정올] 1071_약수와 배수 (JAVA)