[JSP] servlet 활용 _ 로그인, 로그아웃 기능만들기

JSP

[JSP] servlet 활용 _ 로그인, 로그아웃 기능만들기

(งᐛ)ว 2023. 11. 4. 21:20

728x90

필요한 파일을 먼저 세팅하자

DBService.java파일은 그대로 사용가능 (캡쳐생략)

VO/DAO

check_login.jsp (로그인 상태여부를 검증하는 jsp)

main_content.jsp (로그인 성공했을때만 접근가능한 페이지)

login_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src = "js/httpRequest.js"></script> <!-- ajax 사용을 위해 입력 -->
		<script type="text/javascript">
			function send(f){
				var id = f.id.value.trim();
				var pwd = f.pwd.value.trim();
			 	
				if(id==""){
					alert("아이디를 입력하세요");
					return;
				}
				
				if(pwd==""){
					alert("비밀번호를 입력하세요");
					return;
				}
				
				//ajax로보내기
				////////////////////////////////////////
				//LoginAction.java 생성 후 작성예정 
				////////////////////////////////////////
			
		</script>
	</head>
	<body>
		<form>
			<table border="1" align="center">
				<caption>:::로그인:::</caption>
				<tr>
					<th>아이디</th>
					<td><input name = "id"></td>
				</tr>
				<tr>
					<th>비밀번호</th>
					<td><input name = "pwd" type="password"></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
					<input type="button" value="로그인" onclick="send(this.form)"> 
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

LoginAction.java

URL mappings 수정명 : /login.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class LoginAction
 */
@WebServlet("/login.do")
public class LoginAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String id = request.getParameter("id");
		String pwd = request.getParameter("pwd"); //우리가 입력한 비밀번호
		
		MemberVO vo = MemberDAO.getInstance().selectOne(id);

DAO 이어서

LoginAction.java 이어서

		String param="";
		String resultStr="";
		
		if(vo==null) {
			param="no_id";
			resultStr = String.format("[{'param':'%s'}]",param);
			response.getWriter().print(resultStr);
			return;
		}
		
		if(!vo.getPwd().equals(pwd)) { //getPwd() : DB에 저장된 비밀번호 
			param="no_pwd";
			resultStr = String.format("[{'param':'%s'}]",param);
			response.getWriter().print(resultStr);
			return;
			
		}
		
		//아이디와 비밀번호 체크에 문제가 없다면 세션에 바인딩한다.
		//세션은 서버의 메모리(램)를 사용하기 때문에 세션을 많이 사용할수록 브라우저가 느려진다. 필요한 곳에서만 세션을 쓰도록 하자. 
		
		HttpSession session = request.getSession(); //세션객체생성
		session.setMaxInactiveInterval(3600); //1시간 -> 3600초. 초단위로 작성해야함 
		session.setAttribute("vo", vo);
		
		//세션은 브라우저 하나당 객체가 하나가 있기 때문에 별도의 포워딩이 필요없고 어느 jsp에서든지 el표기법으로 사용할 수 있다.
		
		param="clear";
		resultStr=String.format("[{'param':'%s'}]",param);
		response.getWriter().print(resultStr);
	}

}

login_form.jsp 이어서 빗금부분 채우기

				//ajax로보내기
				////////////////////////////////////////
				//LoginAction.java 생성 후 작성예정 
				////////////////////////////////////////
                
				var url = "login.do"; 
				var param = "id="+id+"&pwd="+encodeURIComponent(pwd); 
                					   //encodeURIComponent:특수문자 안깨지게 
				
				sendRequest(url,param,myCheck,"POST");
			}
				
				//콜백메서드
				function myCheck(){
					if(xhr.readyState == 4 && xhr.status == 200){
						
						var data = xhr.responseText;
						var json = eval(data);
						
						if(json[0].param=="no_id"){
							alert("아이디가 존재하지 않습니다.")
						}else if(json[0].param=="no_pwd"){
							alert("비밀번호가 틀렸습니다.")
						}else{
							alert("로그인 성공");
							location.href="main_content.jsp";
						}
					}
				}

check_login.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 코어라이브러리 -->    
    <c:if test="${empty vo}"> <!-- vo가 비어있다는 것은 세션에 저장을 못했다는것 -->
		<script>
			alert("로그인이 필요합니다");
			location.href="login_form.jsp";
		</script>
	</c:if>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
	</body>
</html>

main_content.jsp (로그인 성공시 접근가능)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		
		<jsp:include page="check_login.jsp"/> 
		<!-- include 액션태그는 디렉티브태그처럼 jsp페이지의 특정 영역에 외부파일의 내용을 포함하는 태그이다. 
		jsp 페이지에 포함할 수 있는 외부파일은 html, jsp, 서블렛페이지가 있다.
		main_content페이지에 접근하려고 해도 check_login에 먼저 접근해야 한다. -->
		
		
		메인페이지<br>
		${vo.name}님 로그인을 환영합니다.<br>
		
		<input type="button" value="로그아웃" onclick="location.href='logout.do'">
	</body>
</html>

**include 액션태그와 디렉티브태그 모두 특정 영역에 외부파일의 내용을 포함하는 공통점이 있다.

차이점은 다음과 같다.

처리과정 차이

액션태그 사용시 흐름이 실제 다른 페이지로 넘어가서 실행한 후 돌아옴

디렉티브태그 사용시 코드 자체를 포함시킨 후 하나의 페이지로 처리

LogoutAction.java

URL mappings 수정명 : /logout.do

package action;

import java.io.IOException;

/**
 * Servlet implementation class LogoutAction
 */
@WebServlet("/logout.do")
public class LogoutAction extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//request.getSession()
		//session이 있으면 그 객체를 반환
		//session이 없으면 새 객체를 반환
		HttpSession session = request.getSession();
		
		//세션에 들어있는 모든 속성 제거는 위험할 수 있으므로
		//session.invalidate();
		
		//로그아웃을 요청한 사람만 제거
		session.removeAttribute("vo");		
		
		//세션에서 제거해주고 다시 세션이 필요한곳에서 접근을 못하게하면됨 
		response.sendRedirect("login_form.jsp");
	}

}

확인은 login_form.jsp 에서 실행

결과

위의 include 디렉티브 태그 사용해보기

layout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<table width="500" border="1">
			<tr>
				<td>
					<jsp:include page = "top.jsp"/>
				</td>
			</tr>
			<tr>
				<td>
					<jsp:include page = "content.jsp"/>
				</td>
			</tr>
			<tr>
				<td>
					<jsp:include page = "bottom.jsp"/>
				</td>
			</tr>
		</table>
	</body>
</html>

top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>top</title>
	</head>
	<body>
		상단메뉴 : 
		<a href = "#">HOME</a>
		<a href = "#">INFO</a>
	</body>
</html>

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<br><br>
		내용 페이지 
		<br><br>		
	</body>
</html>

bottom.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		하단메뉴 : 
		<a href="#">도움말</a>
		<a href="#">약관</a>
		<a href="#">사이트맵</a>
	</body>
</html>

layout.jsp에서 실행

include 태그로 태그중복을 줄일 수 있는 장점이 있다.

728x90