이전까지 회원 가입 버튼을 눌러 회원 등록을 하면 DB에 데이터가 저장되는 것 까지 알아보았다.
등록한 데이터를 가지고 로그인을 해보자.
이곳에서 LOGIN을 누르면 Session값을 받아와 로그인 하기를 만들어 보려고 한다.
header.jsp이다.
<c: choose> 를 사용해 when, otherwise를 나누어주었다. when은 ~~일 때, otherwise는 그렇지 않을 때 이다.
즉, if 와 else if와 유사한 구문이라고 생각할 수 있다.
when을 사용하여 session값을 불러온 값이 not empty 비어있지 않을 때 로그인이 되어야 하지만, 아직까지는 session 값을 받아오지 않았으므로 LOGIN을 누르면 otherwise에 있는 loginForm.me로 들어간다.
loginForm.me는 MemberController 서블릿에서 만들어 주었다.
MemberController.java 서블릿
login.jsp 페이지로 이동하라고 되있다.
login.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <%@ 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> <style type="text/css"> .loginDiv { background-color: yellow; width: 30%; margin: 0 auto; padding: 1rem; } /* rem : 글자 x개의 높이만큼 주겠다. */ /* 클래스가 loginDiv에 있는 자손테이블 중 input태그 다 사용 */ /* .loginDiv > input 얘는 자식테이블을 가리킨다.따라서 적용안댐.*/ .loginDiv input[type="text"], .loginDiv input[type="password"] { width: 100%; height: 2rem; border: 1px solid red; border-radius: 5px; padding: 4px; } /* 인풋 태그에 focus가 있을 때 */ .loginDiv input[type="text"]:focus { outline: none; border: 1px soild green; } .loginDiv>div { margin: 0.5rem; } </style> </head> <body> <form action="login.me" method="post"> <div class="loginDiv"> <div> Login To Your Account </div> <div> <input type="text" placeholder="UserName" name="memId" required> </div> <div> <input type="password" placeholder="Password" name="memPw" required> </div> <div> <div><input type="submit" class="btn btn-full" value="Login"> </div> </div> </div> </form> </body> </html> | cs |
memId와 memPw를 입력하고 Login 버튼을 누르면,
input 태그로 submit을 받아가 form 내의 모든 input의 name값을 login.me 서블릿에 전달한다.
MemberController.java 서블릿
memId와 memPw를 문자열로 받아 String 함수로 다시 한번 저장한다. 이후 바로 member-mapper.xml로 가자.
member-mapper.xml
아까는 여기서 <insert>를 하여 회원가입을 해주었다.
이번엔 <select> 조회를 사용해야 하므로 <resultMap>도 만들어 주어야 한다. resultMap은 select할때만 사용한다.
매개변수 및 리턴 타입 결정 방법(우선적으로 실행 시 쿼리를 작성)
매개변수 : 쿼리 실행 시 빈 값을 채울 용도
1. 쿼리에서 채워 줄 값이 없을 경우 : 매개변수 없음
2. 채워줄 값이 하나일 경우
2-1) 채워줄 값이 숫자인 경우 : 매개변수 int형 하나
2-2) 채워줄 값이 문자인 경우 : 매개변수 String형 하나
3. 채워줄 값이 여러개인 경우 : 매개변수는 DTO 객체.
리턴타입 : 쿼리 실행 결과를 어떻게 받아올지에 대한 정의
INSERT, UPDATE, DELETE 쿼리 실행 결과는
리턴타입을 int 혹은 void 사용하면됨.
SELECT 쿼리 결과의 리턴타입은 크게 두 가지로 나뉨.
조회결과 데이터가 무조건 한줄만 조회 : DTO 객체.
조회 결과 데이터가 0줄이상 가변적일 경우 : List<DTO> 객체.
MemberService.java 인터페이스
MemberServiceImpl.java (클래스)
이후 다시 MemberController.java 서블릿으로 넘어가자.
MemberController.java 서블릿
다시 돌아와서 인터페이스에서 만들었던 MemberDTO 클래스에
객체 result를 만들어주어 memId와 memPw를 member에 저장해 넘겨준다.
이후, result의 값이 아까 만들었던 데이터 베이스에 저장된 memId와 memPw와 동일하다면 로그인이 성공한다.
if문을 이용하여 세션 객체를 생성한 후 세션에 데이터를 저장할 수 있다.
세션에 저장된 데이터를 loginInfo로 login_result.jsp에 뿌려줄 수 있다.
login_result.jsp
이곳에 아까 뿌려준 sessionScope의 loginInfo 값이 들어와 데이터 베이스에 저장된 값과 같으면
자바스크립트로 '로그인 성공!' 이라는 알람 창이 뜨며 boardList.bo로 이동한다.
일치하지 않으면 '로그인 실패'가 뜨면서 loginForm.me로 이동한다.
로그인 성공시
로그인 실패시
로그인을 했으면, 로그아웃까지 정상적으로 Session을 통해 해보자.
header.jsp
header.jsp에서 logout.me를 누르면
MemberController.java 서블릿
logout.me 커맨드가 실행이 된다. Session값을 요청 받아 session 객체에 저장하고, loginInfo를 remove하여 삭제시킨 후 boardList.bo로 이동하면 세션 값이 삭제되며 로그아웃 된 것을 확인할 수 있다.
이렇게 회원 가입 후 로그인까지 구현해 보았다. 다음에는 게시글을 써보자.!!
댓글