[jsp] 20. 웹사이트 제작법6_ 마이페이지 제작 (feat. JSP)

01. 🔒JSPF파일로 만들어 @inlclude 디렉티브를 이용하면 좋은 코드

• 권한과 관련된 보완처리 중복코드
• 기록관련 중복코드
• 예외처리관련 중복코드

02. 로그인 사용자인지 확인 (🔒security > login_check.jspf)

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 비로그인 사용자인 경우 에러메세지 출력페이지(error_400.jsp)로 이동하는 JSPF 파일 --%>    
<%
	//세션에 저장된 권한 관련 정보를 반환받아 저장
	MemberDTO loginMember=(MemberDTO)session.getAttribute("loginMember");

	//비로그인 사용자가 JSP 문서를 요청한 경우 - 비정상적인 요청에 대한 응답 처리
	if(loginMember==null) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
%>

03. 마이페이지 (member > member_mypage.jsp) - 입력

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 로그인 사용자의 정보를 클라이언트에게 전달하는 JSP 문서 --%>
//<%-- => 로그인 사용자만 요청 가능한 JSP 문서 --%>
//<%-- => [회원정보변경]을 클릭한 경우 비밀번호 입력페이지(password_confirm.jsp)로 이동 - 페이지 이동 관련 정보 전달 --%>
//<%-- => [회원탈퇴]를 클릭한 경우 비밀번호 입력페이지(password_confirm.jsp)로 이동 - 페이지 이동 관련 정보 전달 --%>

//<%-- 🔒방법1.(비권장) --%>
/*
<%--
	//세션에 저장된 권한 관련 정보를 반환받아 저장
	MemberDTO loginMember=(MemberDTO)session.getAttribute("loginMember");

	//비로그인 사용자가 JSP 문서를 요청한 경우 - 비정상적인 요청에 대한 응답 처리
	if(loginMember==null) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
--%>
*/

//<%-- 🔒방법2.(권장) 앞으로 많이 쓸 코드를 [jspf파일]로 만들어 include directive 이용하자 --%>
//<%-- => 동적포함이 아니니 활용하면 좋을 것! --%>
//<%-- => 권한 관련 중복코드를 JSPF 파일로 작성하여 include 디렉티브를 이용하여 포함하여 사용 --%>
//<%-- => 코드의 중복을 최소화 하여 생산성을 높이고 유지보수의 효율성 증가 --%>
<%@include file="/security/login_check.jspf" %>

<style type="text/css">
#datail {
	width: 500px;
	margin: 0 auto;
	text-align: left;
}
#link{
	font-size: 1.1em;
}
#link a:hover {
	color: orange;
}
</style>

<h1>내정보</h1>
<div id="datail">
	<p>아이디 = <%= loginMember.getId() %></p>
	<p>이름 = <%= loginMember.getName() %></p>
	<p>이메일 = <%= loginMember.getEmail() %></p>
	<p>전화번호 = <%= loginMember.getMobile() %></p>
	<p>주소 = [<%= loginMember.getZipcode()%>] <%=loginMember.getAddress1() %> <%=loginMember.getAddress2() %></p>
	<p>회원가입날짜 = <%= loginMember.getJoinDate() %></p>
	<p>마지막 로그인 날짜 = <%= loginMember.getLastLogin() %></p>
</div>
<div id="link">
	<a href="<%=request.getContextPath()%>/index.jsp?workgroup=member&work=password_confirm&action=modify">[회원정보 변경]</a>&nbsp;&nbsp;
	<a href="<%=request.getContextPath()%>/index.jsp?workgroup=member&work=password_confirm&action=remove">[회원탈퇴]</a>&nbsp;&nbsp;
</div>

04. 비밀번호 확인페이지 (member > password_confirm.jsp) - 입력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 회원정보변경 또는 회원탈퇴를 위한 비밀번호를 입력받기 위한 JSP 문서  --%>
//<%-- => 로그인 사용자만 요청 가능한 JSP 문서 --%>
//<%-- => [입력완료]를 클릭한 경우 전달값에 의한 페이지 이동 - 입력값 전달 --%>

<%@include file="/security/login_check.jspf" %>    

<%
	//비정상적인 요청에 대한 응답 처리
	if(request.getParameter("action")==null) { //action이름으로 전달값이 없는 경우
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//전달값을 반환받아 저장
	String action=request.getParameter("action");
	
	//비정상적인 요청에 대한 응답 처리
	if(!action.equals("modify") && !action.equals("remove")) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
	
	String message=(String)session.getAttribute("message");
	if(message==null) {
		message="";
	} else {
		session.removeAttribute("message");
	}
%>

//디자인이 똑같은 JSP 문서를 제어문을 통해 내용만 다르도록 만듦!
//내용 다름을 구분하기 위해 action 전달값을 이용하였음
<% if(action.equals("modify")) { %>
	<p>회원정보변경을 위해 비밀번호를 입력해 주세요.</p>
<% } else { %>	
	<p>회원탈퇴를 위해 비밀번호를 입력해 주세요.</p>
<% } %>

<form  method="post" name="passwordForm">
	<input type="password" name="passwd">
	<button type="button" onclick="submitCheck();">입력완료</button>
</form>
<p id="message" style="color:red"><%=message %></p>

<script type="text/javascript">

passwordForm.passwd.focus();

function submitCheck() {
	if(passwordForm.passwd.value=="") {
		document.getElementById("message").innerHTML="비밀번호를 반드시 입력해 주세요.";
		passwordForm.passwd.focus();
		return;
	}

//	<%-- 전달값에 의해 form 태그로 요청하는 JSP 문서(action 속성값)를 다르게 설정 --%>
	<% if(action.equals("modify")) { //[회원정보변경]인 경우 %>
		passwordForm.action="<%=request.getContextPath()%>/index.jsp?workgroup=member&work=member_modify";
	<% } else { //[회원탈퇴]인 경우 %>
		passwordForm.action="<%=request.getContextPath()%>/index.jsp?workgroup=member&work=member_remove_action";
	<% } %>
	passwordForm.submit();
}
</script>

05. 회원정보 변경페이지 (member > member_modify.jsp) - 입력

<%@page import="xyz.itwill.util.Utility"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 비밀번호를 전달받아 로그인 사용자의 비밀번호와 비교하여 같은 경우 로그인 사용자의 정보를 입력태그의 초기값으로 설정하고 변경값을 입력받기 위한 JSP 문서 --%>
//<%-- => 로그인 사용자만 요청 가능한 JSP 문서 --%>
//<%-- => [회원변경]을 클릭한 경우 회원정보 변경페이지(member_modify_action.jsp)로 이동 - 입력값 전달 --%>

<%@include file="/security/login_check.jspf" %>

<%
	//비정상적인 요청에 대한 응답 처리
	if(request.getMethod().equals("GET")) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//전달값을 반환받아 저장
	String passwd=Utility.encrypt(request.getParameter("passwd"));
	
	//전달된 비밀번호가 로그인 사용자의 비밀번호와 같지 않은 경우 비밀번호 입력페이지
	//(password_confirm.jsp)로 이동
	if(!passwd.equals(loginMember.getPasswd())) {
		session.setAttribute("message", "비밀번호가 맞지 않습니다.");
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=password_confirm&action=modify';");
		out.println("</script>");
		return;
	}
%>

<style type="text/css">
fieldset { text-align: left; margin: 10px auto; width: 1100px; }
legend { font-size: 1.2em; }
#join label { width: 150px; text-align: right; float: left; margin-right: 10px; }
#join ul li { list-style-type: none; margin: 15px 0; }
#fs { text-align: center; }
.error { color: red; position: relative; left: 160px; display: none; }
#idCheck, #postSearch { font-size: 12px; font-weight: bold; cursor: pointer; margin-left: 10px; padding: 2px 10px; border: 1px solid black; }
#idCheck:hover, #postSearch:hover { background: aqua; }
</style>

<form id="join" action="index.jsp?workgroup=member&work=member_modify_action" method="post">
<fieldset>
	<legend>회원정보변경</legend>
	<ul>
		<li>
			<label for="id">아이디</label>
			<input type="text" name="id" id="id" value="<%=loginMember.getId()%>" readonly="readonly">
		</li>
		<li>
			<label for="passwd">비밀번호</label>
			<input type="password" name="passwd" id="passwd">
			<span style="color: red;">비밀번호를 변경하지 않을 경우 입력하지 마세요.</span>
			<div id="passwdRegMsg" class="error">비밀번호는 영문자,숫자,특수문자가 반드시 하나이상 포함된 6~20 범위의 문자로만 작성 가능합니다.</div>
		</li>
		<li>
			<label for="name">이름</label>
			<input type="text" name="name" id="name" value="<%=loginMember.getName()%>" >
			<div id="nameMsg" class="error">이름을 입력해 주세요.</div>
		</li>
		<li>
			<label for="email">이메일</label>
			<input type="text" name="email" id="email" value="<%=loginMember.getEmail()%>" >
			<div id="emailMsg" class="error">이메일을 입력해 주세요.</div>
			<div id="emailRegMsg" class="error">입력한 이메일이 형식에 맞지 않습니다.</div>
		</li>
		<li>
			<label for="mobile">전화번호</label>
			<% String[] mobile=loginMember.getMobile().split("-"); %>
			<select name="mobile1">
				<option value="010" <% if(mobile[0].equals("010")) { %> selected <% } %>>&nbsp;010&nbsp;</option>
				<option value="011" <% if(mobile[0].equals("011")) { %> selected <% } %>>&nbsp;011&nbsp;</option>
				<option value="016" <% if(mobile[0].equals("016")) { %> selected <% } %>>&nbsp;016&nbsp;</option>
				<option value="017" <% if(mobile[0].equals("017")) { %> selected <% } %>>&nbsp;017&nbsp;</option>
				<option value="018" <% if(mobile[0].equals("018")) { %> selected <% } %>>&nbsp;018&nbsp;</option>
				<option value="019" <% if(mobile[0].equals("019")) { %> selected <% } %>>&nbsp;019&nbsp;</option>
			</select>
			- <input type="text" name="mobile2" id="mobile2" size="4" maxlength="4" value="<%=mobile[1]%>">
			- <input type="text" name="mobile3" id="mobile3" size="4" maxlength="4" value="<%=mobile[2]%>">
			<div id="mobileMsg" class="error">전화번호를 입력해 입력해 주세요.</div>
			<div id="mobileRegMsg" class="error">전화번호는 3~4 자리의 숫자로만 입력해 주세요.</div>
		</li>
		<li>
			<label>우편번호</label>
			<input type="text" name="zipcode" id="zipcode" size="7" value="<%=loginMember.getZipcode()%>"  readonly="readonly">
			<span id="postSearch">우편번호 검색</span>
			<div id="zipcodeMsg" class="error">우편번호를 입력해 주세요.</div>
		</li>
		<li>
			<label for="address1">기본주소</label>
			<input type="text" name="address1" id="address1" size="50" value="<%=loginMember.getAddress1()%>"  readonly="readonly">
			<div id="address1Msg" class="error">기본주소를 입력해 주세요.</div>
		</li>
		<li>
			<label for="address2">상세주소</label>
			<input type="text" name="address2" id="address2" size="50" value="<%=loginMember.getAddress2()%>" >
			<div id="address2Msg" class="error">상세주소를 입력해 주세요.</div>
		</li>
	</ul>
</fieldset>
<div id="fs">
	<button type="submit">회원변경</button>
	<button type="reset">다시입력</button>
</div>
</form>

<script type="text/javascript">
$("#join").submit(function() {
	var submitResult=true;
	
	$(".error").css("display","none");

	var passwdReg=/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_-]).{6,20}$/g;
	if($("#passwd").val()!="" && !passwdReg.test($("#passwd").val())) {
		$("#passwdRegMsg").css("display","block");
		submitResult=false;
	} 

	if($("#name").val()=="") {
		$("#nameMsg").css("display","block");
		submitResult=false;
	}
	
	var emailReg=/^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+(\\.[-a-zA-Z0-9]+)+)*$/g;
	if($("#email").val()=="") {
		$("#emailMsg").css("display","block");
		submitResult=false;
	} else if(!emailReg.test($("#email").val())) {
		$("#emailRegMsg").css("display","block");
		submitResult=false;
	}

	var mobile2Reg=/\\d{3,4}/;
	var mobile3Reg=/\\d{4}/;
	if($("#mobile2").val()=="" || $("#mobile3").val()=="") {
		$("#mobileMsg").css("display","block");
		submitResult=false;
	} else if(!mobile2Reg.test($("#mobile2").val()) || !mobile3Reg.test($("#mobile3").val())) {
		$("#mobileRegMsg").css("display","block");
		submitResult=false;
	}
	
	if($("#zipcode").val()=="") {
		$("#zipcodeMsg").css("display","block");
		submitResult=false;
	}
	
	if($("#address1").val()=="") {
		$("#address1Msg").css("display","block");
		submitResult=false;
	}
	
	if($("#address2").val()=="") {
		$("#address2Msg").css("display","block");
		submitResult=false;
	}
	
	return submitResult;
});
</script>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
$("#postSearch").click(function() {
	new daum.Postcode({
	    oncomplete: function(data) {
	        $("#zipcode").val(data.zonecode);
	        $("#address1").val(data.address);
	    }
	}).open();
});
</script>

05. 회원정보 변경 처리 (member > member_modify_action.jsp) - 처리

<%@page import="xyz.itwill.dao.MemberDAO"%>
<%@page import="xyz.itwill.util.Utility"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 회원정보를 전달받아 MEMBER 테이블에 저장된 회원정보를 변경하고 내정보 출력페이지(member_mypage.jsp)로 이동하기 위한 URL 주소 전달하는 JSP 문서 --%>

//<%-- => 로그인 사용자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/login_check.jspf" %>

<%
	//1.
	//비정상적인 요청에 대한 응답 처리
	if(request.getMethod().equals("GET")) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}
	
	//2.
	//전달값을 반환받아 저장
	String id=request.getParameter("id");
	String passwd=request.getParameter("passwd");
	if(passwd==null || passwd.equals("")) {//비밀번호 전달값이 없는 경우
		//로그인 사용자의 비밀번호를 변수에 저장 - 기존 비밀번호 유지
		passwd=loginMember.getPasswd();
	} else {//비밀번호 전달값이 있는 경우
		//새로운 비밀번호를 암호화 처리하여 변수에 저장 - 비밀번호 변경
		passwd=Utility.encrypt(passwd);
	}
	String name=request.getParameter("name");
	String email=request.getParameter("email");
	String mobile=request.getParameter("mobile1")+"-"
		+request.getParameter("mobile2")+"-"+request.getParameter("mobile3");
	String zipcode=request.getParameter("zipcode");
	String address1=request.getParameter("address1");
	String address2=request.getParameter("address2");
	
	//3.
	//MemberDTO 객체를 생성하여 전달값으로 필드값 변경
	MemberDTO member=new MemberDTO();
	member.setId(id);
	member.setPasswd(passwd);
	member.setName(name);
	member.setEmail(email);
	member.setMobile(mobile);
	member.setZipcode(zipcode);
	member.setAddress1(address1);
	member.setAddress2(address2);

	//4.
	//회원정보를 전달받아 MEMBER 테이블에 저장된 회원정보를 변경하는 DAO 클래스의 메소드 호출
	MemberDAO.getDAO().updateMember(member);
	
	//5.
	//세션에 저장된 권한 관련 정보(회원정보) 변경
	session.setAttribute("loginMember", MemberDAO.getDAO().selectMember(id));
	
	//6.
	//클라이언트에게 URL 주소 전달
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_mypage';");
	out.println("</script>");
%>

06. 회원정보 삭제 처리 (member > member_remove_action.jsp) - 처리

<%@page import="xyz.itwill.dao.MemberDAO"%>
<%@page import="xyz.itwill.util.Utility"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
//<%-- 비밀번호를 전달받아 로그인 사용자의 비밀번호와 비교하여 같은 경우 MEMBER 테이블에 저장된 회원정보의 회원상태를 변경하여 탈퇴 처리하고 로그아웃 처리페이지(member_logout_action.jsp)로  이동하는 URL 주소를 전달하는 JSP 문서 --%>

//<%-- => 로그인 사용자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/login_check.jspf" %>

<%
	//1.
	//비정상적인 요청에 대한 응답 처리
	if(request.getMethod().equals("GET")) {
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=error&work=error_400';");
		out.println("</script>");
		return;
	}

	//2.
	//전달값을 반환받아 저장
	String passwd=Utility.encrypt(request.getParameter("passwd"));

	//3.	
	//전달된 비밀번호가 로그인 사용자의 비밀번호와 같지 않은 경우 비밀번호 입력페이지
	//(password_confirm.jsp)로 이동
	if(!passwd.equals(loginMember.getPasswd())) {
		session.setAttribute("message", "비밀번호가 맞지 않습니다.");
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=password_confirm&action=remove';");
		out.println("</script>");
		return;
	}

	//4.	
	//아이디와 회원상태를 전달받아 MEMBER 태이블에 저장된 해당 아이디의 회원정보에서 회원상태를
	//변경하는 DAO 클래스의 메소드 호출 - 탈퇴회원으로 변경 처리
	MemberDAO.getDAO().updateStatus(loginMember.getId(), 0);

	//5.	
	//클라이언트에게 URL 주소 전달
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_logout_action';");
	out.println("</script>");
%>