간단한 웹페이지 만들기 - 로그인

임승현·2022년 12월 20일

JSP

목록 보기

17/20

🐧로그인 관련

🌈Part 1 - member_login.jsp 만들기

📃member_login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 사용자로부터 로그인정보를 입력받기 위한 JSP 문서 --%>
<%-- → [로그인]을 클릭한 경우 로그인 처리페이지(member_login_action.jsp)로 이동 - 입력값 전달 --%>
<%
	String message=(String)session.getAttribute("message");
	if(message==null) {
		message="";
	} else {
		session.removeAttribute("message");
	}
	//
	String id=(String)session.getAttribute("id");
	if(id==null) {
		id="";
	} else {
		session.removeAttribute("id");
	}
%>
<style type="text/css">
#space {
	height: 50px;
}    
.login_tag {
	margin: 5px auto;
	width: 300px;
}    
#login label {
	text-align: right;
	width: 100px;
	float: left;
}
#login ul li {
	list-style-type: none;
	margin-bottom: 10px;
}
#login input:focus {
	border: 2px solid aqua;
}
#login_btn {
	margin: 0 auto;
	padding: 5px;
	width: 300px;
	background-color: aqua;
	font-size: 1.2em;
	cursor: pointer;
	letter-spacing: 20px;
	font-weight: bold; 	 
}
#search {
	margin-top: 10px;	
	margin-bottom: 20px;	
}
#message {
	color: red;	
	font-weight: bold;
}
a:hover {
	background-color: orange;
}
</style>
<div id="space"></div>
<form id="login" name="loginForm" action="index.jsp?workgroup=member&work=member_login_action" method="post">
	<ul class="login_tag">
		<li>
			<label for="id">아이디</label>
			<input type="text" name="id" id="id" value="<%=id%>">
		</li>
		<li>
			<label for="id">비밀번호</label>
			<input type="password" name="passwd" id="passwd">
		</li>
	</ul>
	<div id="login_btn">로그인</div>
	<div id="search">
		<a href="#">아이디 찾기</a> |
		<a href="#">비밀번호 찾기</a> 
	</div>
	<div id="message"><%=message %></div>
</form>
<script type="text/javascript">
$("#id").focus();
$("#login_btn").click(function() {
	if($("#id").val()=="") {
		$("#message").text("아이디를 입력해 주세요.");
		$("#id").focus();
		return;
	}
	//
	if($("#passwd").val()=="") {
		$("#message").text("비밀번호를 입력해 주세요.");
		$("#passwd").focus();
		return;
	}
	//
	$("#login").submit();
});
</script>

🌈Part 2 - member_login_action.jsp 만들기

📃member_login_action.jsp

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@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 테이블에 저장된 회원정보와 비교하여 인증처리하고 처리결과를 이용하여 클라이언트에게 URL 주소를 전달하는 JSP 문서 --%>
<%-- → 인증실패 : 로그인정보 입력페이지(member_login.jsp)로 이동 --%>
<%-- → 인증성공 : 세션에 권한 관련 정보를 저장하고 기존 요청 페이지로 이동하거나 또는 메인페이지(main_page.jsp)로 이동 --%>
<%
	//비정상적인 요청에 대한 응답 처리
	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 id=request.getParameter("id");
	String passwd=Utility.encrypt(request.getParameter("passwd"));
	//
	//아이디를 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원정보를 검색하여 반환하는 DAO 클래스의 메소드 호출
	MemberDTO member=MemberDAO.getDAO().selectMember(id);
	//
	//전달받은 아이디로 검색된 회원정보가 없거나 탈퇴회원인 경우 - 아이디 인증 실패
	if(member==null || member.getStatus()==0) {
		session.setAttribute("message", "입력한 아이디가 존재하지 않습니다.");
		session.setAttribute("id", id);
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_login';");
		out.println("<script>");
		return;
	}
	//
	//검색된 회원정보의 비밀번호와 전달받은 비밀번호가 맞지 않은 경우 - 비밀번호 인증 실패
	if(!member.getPasswd().equals(passwd)) {
		session.setAttribute("message", "입력한 아이디가 잘못 되었거나 비밀번호가 맞지 않습니다..");
		session.setAttribute("id", id);
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_login';");
		out.println("<script>");
		return;
	}
	//
	//인증 성공
	//
	//아이디를 전달받아 MEMBER 테이블에 저장된 해당 아이디의 회원정보에서 마지막 로그인 날짜를
	//변경하는 DAO 클래스의 메소드 호출
	MemberDAO.getDAO().updateLastLogin(id);
	//
	//세션에 권한 관련 정보(회원정보) 저장
	session.setAttribute("loginMember", MemberDAO.getDAO().selectMember(id));
	//
	//세션에 저장된 요청 페이지의 URL 주소를 반환받아 저장
	String url=(String)session.getAttribute("url");
	//
	if(url==null) {//요청 페이지가 없는 경우
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=main&work=main_page';");
		out.println("</script>");
	} else {//요청 페이지가 있는 경우
		session.removeAttribute("url");
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+url+"';");
		out.println("</script>");
	}
%>

🌈Part 3 - member_logout_action 만들기

📃member_logout_action

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 로그아웃 처리 후 로그인정보 입력페이지로 이동하기 위한 URL 주소를 전달하는 JSP 문서 --%>
<%
	//로그아웃 처리 - 세션에 저장된 권한 관련 정보 제거하거나 세션을 언바인딩 처리
	//session.removeAttribute("loginMember");//권한 관련 정보 제거
	session.invalidate();//세션을 언바인딩 처리
	//
	//페이지 이동
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_login';");
	out.println("<script>");
%>

🌈Part 4 - member_mypage 만들기

📃member_mypage

<%@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)로 이동 - 페이지 이동 관련 정보 전달--%>
<%--(login_check.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;
	}
--%>
<%-- 권한 관련 중복코드를 JSPF 파일로 작성하여 include 디렉티브를 이용해 포함하여 사용 --%>
<%-- → 코드의 중복을 최소화 하여 생산성을 높이고 유지보수의 효율성 증가 --%>
<%@include file="/security/login_check.jspf" %>
<style type="text/css">
#detail {
	width: 500px;
	margin: 0 auto;
	text-align: left;
}
#link {
	font-size: 1.1em;
}
#link a:hover {
	color: orange;
}
</style>
<h1>내정보</h1>
<div id="detail">
	<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>

🌈Part 5 - login_check.jspf 만들기

◈webapp 폴더에 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;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

```

🌈Part 6 - password_confirm.jsp 만들기

📃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) {
		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");
	}
%>

<% if(action.equals("modify")) { %>

<p>회원정보변경을 위해 비밀번호를 입력해 주세요.</p>

<% } else { %>

<p>회원탈퇴를 위해 비밀번호를 입력해 주세요.</p>

<% } %>

입력완료

<%=message %>


### 🌈Part 7 - member_modify.jsp 만들기
>#### 📃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("

회원정보변경

아이디
비밀번호 비밀번호를 변경하지 않을 경우 입력하지 마세요.
비밀번호는 영문자,숫자,특수문자가 반드시 하나이상 포함된 6~20 범위의 문자로만 작성 가능합니다.
이름
이름을 입력해 주세요.
이메일
이메일을 입력해 주세요.

입력한 이메일이 형식에 맞지 않습니다.
전화번호 <% String[] mobile=loginMember.getMobile().split("-"); %> selected <% } %>> 010 selected <% } %>> 011 selected <% } %>> 016 selected <% } %>> 017 selected <% } %>> 018 selected <% } %>> 019 - -
전화번호를 입력해 입력해 주세요.

전화번호는 3~4 자리의 숫자로만 입력해 주세요.
우편번호 우편번호 검색
우편번호를 입력해 주세요.
기본주소
기본주소를 입력해 주세요.
상세주소
상세주소를 입력해 주세요.

회원변경 다시입력

```

🌈Part 8 - member_modify_action.jsp 만들기

📃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" %>
<%
	//비정상적인 요청에 대한 응답 처리
	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 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");
	//
	//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);
	//회원정보를 전달받아 MEMBER 테이블에 저장된 회원정보를 변경하는 DAO 클래스의 메소드 호출
	MemberDAO.getDAO().updateMember(member);
	//
	//세션에 저장된 권한 관련 정보(회원정보) 변경
	session.setAttribute("loginMember", MemberDAO.getDAO().selectMember(id));
	//
	//클라이언트에게 URL 주소 전달
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_mypage';");
	out.println("</script>");
%>

🌈Part 9 - member_remove_action.jsp 만들기

📃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" %>
<%
	//비정상적인 요청에 대한 응답 처리
	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=remove';");
		out.println("</script>");
		return;
	}
	//
	//아이디와 회원상태를 전달받아 MEMBER 태이블에 저장된 해당 아이디의 회원정보에서 회원상태를
	//변경하는 DAO 클래스의 메소드 호출 - 탈퇴회원으로 변경 처리
	MemberDAO.getDAO().updateStatus(loginMember.getId(), 0);
	//
	//클라이언트에게 URL 주소 전달
	out.println("<script type='text/javascript'>");
	out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_logout_action';");
	out.println("</script>");
%>

🌈Part 10 - 장바구니, 구매내역은 로그인 사용자만 요청 가능

1. cart_list.jsp 작성

📃cart_list.jsp

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 장바구니 목록을 클라이언트에게 전달하는 JSP 문서 --%>
<%-- → 로그인 사용자만 요청 가능한 JSP 문서 --%>
<%--
	//세션에 저장된 권한 관련 정보(회원정보)를 반환받아 저장
	MemberDTO loginMember=(MemberDTO)session.getAttribute("loginMember");
	//비로그인 사용자가 JSP 문서를 요청한 경우 로그인정보 입력페이지(member_login.jsp)로 이동
	if(loginMember==null) {
		//request.getRequestURI() : 요청 URL 주소에서 URI 정보를 반환하는 메소드
		//ex)요청 URL 주소 - http://localhost:8000/jsp/index.jsp?workgroup=cart&work=cart_list
		// => request.getRequestURI() 메소드의 반환값 : /jsp/index.jsp
		String requestURI=request.getRequestURI();
		//System.out.println("requestURI = "+requestURI);
		//
		//request.getQueryString() : 요청 URL 주소에서 질의문자열(QueryString)을 반환하는 메소드
		//ex)요청 URL 주소 - http://localhost:8000/jsp/index.jsp?workgroup=cart&work=cart_list
		// => request.getQueryString() 메소드의 반환값 : workgroup=cart&work=cart_list
		String queryString=request.getQueryString();		
		//System.out.println("queryString = "+queryString);
		//
		//session 내장객체에 요청 URL 주소를 속성값으로 저장
		if(queryString==null || queryString.equals("")) {
			session.setAttribute("returnUrl", requestURI);	
		} else {
			session.setAttribute("returnUrl", requestURI+"?"+queryString);	
		}
		//		
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_login';");
		out.println("</script>");
		return;
	}
--%>
<%@include file="/security/login_url.jspf" %>
<h1>장바구니 목록</h1>

2. login_url.jspf 작성
→ 비로그인 사용자가 JSP 문서를 요청한 경우 로그인정보 입력페이지(member_login.jsp)로 이동

📃login_url.jsp

<%@page import="xyz.itwill.dto.MemberDTO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//세션에 저장된 권한 관련 정보(회원정보)를 반환받아 저장
	MemberDTO loginMember=(MemberDTO)session.getAttribute("loginMember");
	//
	//비로그인 사용자가 JSP 문서를 요청한 경우 로그인정보 입력페이지(member_login.jsp)로 이동
	if(loginMember==null) {
		//request.getRequestURI() : 요청 URL 주소에서 URI 정보를 반환하는 메소드
		//ex)요청 URL 주소 - http://localhost:8000/jsp/index.jsp?workgroup=cart&work=cart_list
		// => request.getRequestURI() 메소드의 반환값 : /jsp/index.jsp
		String requestURI=request.getRequestURI();
		//System.out.println("requestURI = "+requestURI);
		//
		//request.getQueryString() : 요청 URL 주소에서 질의문자열(QueryString)을 반환하는 메소드
		//ex)요청 URL 주소 - http://localhost:8000/jsp/index.jsp?workgroup=cart&work=cart_list
		// => request.getQueryString() 메소드의 반환값 : workgroup=cart&work=cart_list
		String queryString=request.getQueryString();		
		//System.out.println("queryString = "+queryString);
		//
		//session 내장객체에 요청 URL 주소를 속성값으로 저장
		if(queryString==null || queryString.equals("")) {
			session.setAttribute("returnUrl", requestURI);	
		} else {
			session.setAttribute("returnUrl", requestURI+"?"+queryString);	
		}
		//		
		out.println("<script type='text/javascript'>");
		out.println("location.href='"+request.getContextPath()+"/index.jsp?workgroup=member&work=member_login';");
		out.println("</script>");
		return;
	}
%>

3. order_list.jsp 작성

📃order_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 구매내역 목록을 클라이언트에게 전달하는 JSP 문서 --%>
<%-- → 로그인 사용자만 요청 가능한 JSP 문서 --%>
<%@include file="/security/login_url.jspf" %>    
<h1>구매내역 목록</h1>

임승현

이전 포스트

👓간단한 웹페이지 만들기 - 회원가입

다음 포스트