[55~56일] jsp (27) - myweb 프로젝트(로그인, 로그아웃)

이전에 만들었던 member 테이블에 데이터를 입력한다.

-- 행추가
insert into member(id, passwd, mname, tel, email, zipcode, address1, address2, job, mlevel, mdate)
values('webmaster', '12341234', '웹마스터', '123-4567', 'webmaster@itwill.com'
     , '12345', '서울시 강남구 역삼동', '삼원타워4층', 'A02', 'A1', sysdate );
     
insert into member(id, passwd, mname, tel, email, zipcode, address1, address2, job, mlevel, mdate)
values('itwill', '12341234', '웹마스터', '123-4567', 'itwill@itwill.com'
     , '12345', '서울시 강남구 역삼동', '삼원타워4층', 'A02', 'D1', sysdate );
     
insert into member(id, passwd, mname, tel, email, zipcode, address1, address2, job, mlevel, mdate)
values('user1', '12341234', '웹마스터', '123-4567', 'user1@soldesk.com'
     , '12345', '서울시 종로구 관철동', '코아빌딩8층', 'A02', 'F1', sysdate );

 

아이디와 비번을 입력받아서 로그인을 한다.

 

 

sql문 작성할 때는 특정 값을 가정하여 썼다. 실제 코딩할때는 ?로 변수 처리할 것이다.

 

--로그인
--아이디와 비번이 일치하면 회원등급 가져오기
select mlevel
from member
where id='webmaster' and passwd='12341234' and mlevel in ('A1', 'B1', 'C1', 'D1');

select mlevel
from member
where id='itwill' and passwd='12341234' and mlevel in ('A1', 'B1', 'C1', 'D1');

select mlevel
from member
where id='user1' and passwd='12341234' and mlevel in ('A1', 'B1', 'C1', 'D1');

 

 

로그인을 할 수 있도록 loginProc()를 구현해보자

 

MemberDAO.java

package net.member;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import net.utility.DBClose;
import net.utility.DBOpen;

public class MemberDAO { //Data Access Object
	                     //DB 접근 객체
	
	private DBOpen dbopen = null;
	private Connection con = null;
	private PreparedStatement pstmt = null;
	private ResultSet rs = null;
	private StringBuilder sql = null;
	
	public MemberDAO() {
		dbopen = new DBOpen();
	}//end

	
	//비즈니스 로직 구현
	public String loginProc(MemberDTO dto) {
		String mlevel = null;
		try {
			con = dbopen.getConection();
			
			sql = new StringBuilder();
			sql.append(" SELECT mlevel ");
			sql.append(" FROM member ");
			sql.append(" WHERE id=? AND passwd=? ");
			sql.append(" AND mlevel IN ('A1', 'B1', 'C1', 'D1') ");
			
			pstmt = con.prepareStatement(sql.toString());
			pstmt.setString(1, dto.getId());
			pstmt.setString(2, dto.getPasswd());
			
			rs = pstmt.executeQuery();
			if(rs.next()) {
				mlevel = rs.getString("mlevel");
			}//if end
			
		} catch (Exception e) {
			System.out.println("로그인 실패 : " + e);
		} finally {
			DBClose.close(con, pstmt, rs);
		}//end
		return mlevel;
	}//loginProc() end
	
}//class end

 

이번에도 ssi.jsp를 만들어 공통 코드를 모아놓자

 

ssi.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%-- ssi.jsp 공통코드 --%>

<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>

<%@ page import="net.utility.*"%>
<%@ page import="net.member.*"%>

<jsp:useBean id="dao" class="net.member.MemberDAO" scope="page"></jsp:useBean>
<jsp:useBean id="dto" class="net.member.MemberDTO" scope="page"></jsp:useBean>

<%request.setCharacterEncoding("UTF-8");%>

 

loginForm.jsp에 ssi.jsp를 포함시키고 form에 action을 넣자

 

loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 loginForm.jsp-->
<h3>* 로 그 인 *</h3>
<form name="loginfrm" id="loginfrm" action="loginProc.jsp">
	<table class="table">
		<tr>
		    <td>
			   <input type="text" name="id" id="id" placeholder="아이디" maxlength="10" required>
		    </td>
		    <td rowspan="2">
			   <!-- type=image는 기본 속성이 submit -->
			   <input type="image" src="../images/bt_login.gif">		   
		    </td>
		</tr>
		<tr>
		   <td>
		      <input type="password" name="passwd" id="passwd" placeholder="비밀번호" maxlength="10" required>
		   </td>
		</tr>
		<tr>
		   <td colspan="2">
		      <label><input type="checkbox" name="c_id" value="SAVE">아이디 저장</label>			  
			  &nbsp;&nbsp;&nbsp;
			  회원가입
			  &nbsp;&nbsp;&nbsp;
			  아이디/비밀번호찾기
		   </td>
		</tr>		  
	</table>
</form>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

 

loginProc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 loginProc.jsp-->
<h3>* 로 그 인 결 과 *</h3>
<%
	String id = request.getParameter("id").trim();
	String passwd = request.getParameter("passwd").trim();
	dto.setId(id);
	dto.setPasswd(passwd);
	
	String mlevel = dao.loginProc(dto);
	if(mlevel==null) {
		out.println("<p>아이디/비밀번호 다시 한번 확인해주세요!!</p>");
		out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
	} else {
		//로그인 성공
		out.print("로그인 성공~~");
		out.print("회원등급:" + mlevel);
	}//if end

%>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>

로그인 성공

 

 

로그인 실패

 

 

아이디와 비밀번호를 입력하지 않아도 서버로 전송되는 것을 막기위해 자바스크립트로 함수를 만들자

 

loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 loginForm.jsp-->
<h3>* 로 그 인 *</h3>
<form name="loginfrm" id="loginfrm" action="loginProc.jsp" onsubmit="return loginCheck()"><!-- myscript.js -->
	<table class="table">
    ...

 

myscript.js

function loginCheck() { //로그인 유효성 검사 (아이디, 비번)
	//1)아이디 5~10글자 이내인지 검사
 	let id = document.getElementById("id").value;
	id = id.trim();
	if(id.length>=5 && id.length<=10) {
		alert("아이디 5~10글자 이내로 입력해 주세요");
		document.getElementById("id").focus();
		return false;
	}//if end
	
	//2)비밀번호 5~10글자 이내인지 검사
	let passwd = document.getElementById("passwd").value;
	passwd = passwd.trim();
	if(passwd.length>=5 && passwd.length<=10) {
		alert("비밀번호 5~10글자 이내로 입력해 주세요");
		document.getElementById("passwd").focus(); //작성자 칸에 커서
		return false;
	}//if end
	
	return true;
}//loginCheck() end

 

로그인 성공, 실패 여부를 loginProc.jsp에서만 인식시키는게 아니고 myweb 전체에서 인식시켜야 한다.

session과 application을 활용할 수 있는데, application으로 할 경우 다른 사람들이 나의 정보를 볼 수 있기 때문에 session으로 해야 한다.

 

예를 들자면 session은 개인 사물함에 나의 짐을 두는 것이고, application은 교실 혹은 복도에 나의 짐을 두게 되는 것이다.

 

로그인 후 어떤 화면을 보여줄 것인지 결정해야한다. 처음 화면을 보여줄 수도 있고, 로그인 하기 직전의 화면을 보여줄 수도 있다.(카페 화면에서 로그인했다면 카페, 블로그 화면에서 로그인했다면 블로그)

우리는 처음 인트로 화면을 보여주는 것으로 해보겠다.

 

loginProc.jsp

<%@page import="javax.swing.event.MouseInputListener"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 loginProc.jsp-->
<h3>* 로 그 인 결 과 *</h3>
<%
	String id = request.getParameter("id").trim();
	String passwd = request.getParameter("passwd").trim();
	dto.setId(id);
	dto.setPasswd(passwd);
	
	String mlevel = dao.loginProc(dto);
	if(mlevel==null) {
		out.println("<p>아이디/비밀번호 다시 한번 확인해주세요!!</p>");
		out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
	} else {
		//로그인 성공
		//out.print("로그인 성공~~");
		//out.print("회원등급:" + mlevel);
		
		//다른 페이지에서 로그인 상태 정보를 공유할 수 있도록
		session.setAttribute("s_id", id);
		session.setAttribute("s_passwd", passwd);
		session.setAttribute("s_mlevel", mlevel);
		
		//첫페이지 이동
		//http://localhost:9090/myweb/index.jsp
		String root = Utility.getRoot();
		response.sendRedirect(root+"/index.jsp");
	}//if end

%>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>

 

이전에 받은 net.utility 패키지의 Utility 클래스에 가면

위와 같이 root 속성과 getRoot()가 있다. 이를 활용하여 첫 페이지 이동에 활용할 것이다. 이렇게 변수로 할 시 Utility 클래스에서 root 값만 변경하면 되므로 활용도가 높아진다.

 

로그인 상태 정보를 확인하는 공통 페이지를 만들자

 

auth.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- auth.jsp -->
<!-- 로그인 상태 정보 확인 -->
<%
	String s_id="";
	String s_passwd="";
	String s_mlevel="";
	
	if(session.getAttribute("s_id")==null || session.getAttribute("s_passwd")==null || session.getAttribute("s_mlevel")==null){
		//로그인 하지 않았다면
		s_id="guest";
		s_passwd="guest";
		s_mlevel="guest";
	} else {
		//로그인 성공 했다면 세션 변수값 가져오기
		s_id = (String)session.getAttribute("s_id");
		s_passwd = (String)session.getAttribute("s_passwd");
		s_mlevel = (String)session.getAttribute("s_mlevel");
	}//if end
%>

 

loginForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="auth.jsp"%>
<%@ include file="../header.jsp"%>
<!-- 본문 시작 loginForm.jsp-->
<h3>* 로 그 인 *</h3>

<%if(s_id.equals("guest") || s_passwd.equals("guest") || s_mlevel.equals("guest")) { %>
<form name="loginfrm" id="loginfrm" action="loginProc.jsp" onsubmit="return loginCheck()"><!-- myscript.js -->
	<table class="table">
		<tr>
		    <td>
			   <input type="text" name="id" id="id" placeholder="아이디" maxlength="10" required>
		    </td>
		    <td rowspan="2">
			   <!-- type=image는 기본 속성이 submit -->
			   <input type="image" src="../images/bt_login.gif">		   
		    </td>
		</tr>
		<tr>
		   <td>
		      <input type="password" name="passwd" id="passwd" placeholder="비밀번호" maxlength="10" required>
		   </td>
		</tr>
		<tr>
		   <td colspan="2">
		      <label><input type="checkbox" name="c_id" value="SAVE">아이디 저장</label>			  
			  &nbsp;&nbsp;&nbsp;
			  회원가입
			  &nbsp;&nbsp;&nbsp;
			  아이디/비밀번호찾기
		   </td>
		</tr>		  
	</table>
</form>

<%
} else {
	//로그인 성공했다면
	out.println("<strong>" + s_id + "</strong> 님");
	out.println("<a href='logout.jsp'>[로그아웃]</a>");
}//if end
%>
<!-- 본문끝 -->
<%@ include file="../footer.jsp"%>

로그인을 하지 않은 상태면 로그인 화면을, 로그인을 한 상태면 로그아웃 화면이 보이게 만들었다.

 

로그아웃은 로그인 시 세션에 놨던 변수를 지우면 된다.

 

logout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%-- logout.jsp --%>
<%
	//세션변수 제거 -> null값
	session.removeAttribute("s_id");
	session.removeAttribute("s_passwd");
	session.removeAttribute("s_mlevel");
	
	//페이지 이동
	response.sendRedirect("loginForm.jsp");
%>