[JSP/Servlet] 3. 로그인
rlozlr
[JSP/Servlet] 3. 로그인개발자가 되기까지 (2023.08.16~2024.04.15)/[Servlet] Basic Web2023. 12. 9. 18:41@rlozlr
Table of Contents

webapp > member > login.jsp를 생성한다.

이번에는 form action을 미리 설정해주었다.

 

 

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
</head>
<body>
	<div>
		<form action="/memb/login" method="post">
			<input type="text" name="id" placeholder="ID">
			<input type="password" name="pwd" placeholder="Password">
			<button type="submit">로그인</button>
		</form>
	</div>
</body>
</html>

 

 

form action에서 MemberController에서 login을 취한다고 기재해두었으니,

MemberController에서 case로 login을 추가하고, 거기에 login에 필요한 코드를 작성한다.

 

 

MmeberController.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import service.MemberService;
import service.MemberServiceImpl;

@WebServlet("/memb/*")
public class MemberController extends HttpServlet {

// ... (기존 코드)

		case "login":
			try {
				// login.jsp에서 id, pwd를 전송
				String id = request.getParameter("id");
				String pwd = request.getParameter("pwd");
				// id, pwd를 객체화해서 DB로 전송
				MemberVO mvo = new MemberVO(id,pwd);
				log.info(">>> login check 1");
				
				// id와 pwd가 일치하는 데이터의 객체를 리턴
				MemberVO loginMvo = msv.login(mvo);
				log.info("login mov >>> {}", loginMvo);
				
				// 로그인 객체가 있다면...
				if(loginMvo != null) {
					// Session 객체 가져오기
					// 연결된 세션 객체가 있다면 기존 객체 가져오기, 없으면 생성
					HttpSession ses = request.getSession();
					ses.setAttribute("ses", loginMvo);
					// 로그인 유지시간(초단위로 설정) => 10*60 10분*60초 / 없으면 브라우저 끄면 날아감
					ses.setMaxInactiveInterval(10*60);	
				}
				
			} catch (Exception e) {
				e.printStackTrace();
				log.info(">>> login error");
			}
			break;
		}
		
// ... (기존 코드)

}

 

 

msv.login(mvo)이 구현 될 수 있도록 MemberService와 MemberServiceImpl을 작성한다.

 

 

MemberService.interface

package service;

import domain.MemberVO;

public interface MemberService {

	int register(MemberVO mvo);

	MemberVO login(MemberVO mvo);

}

 

 

MemeberServiceImpl.java

package service;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import repository.MemberDAO;
import repository.MemberDAOImpl;

public class MemberServiceImpl implements MemberService {
	private static final Logger log = LoggerFactory.getLogger(MemberServiceImpl.class);
	private MemberDAO mdao;	// repository 패키지에 interface로
	
	public MemberServiceImpl() {
		mdao = new MemberDAOImpl();
	}
	
	@Override
	public int register(MemberVO mvo) {
		log.info(">>> join check 2");
		return mdao.insert(mvo);
	}

	@Override
	public MemberVO login(MemberVO mvo) {
		log.info(">>> login check 2");
		return mdao.login(mvo);
	}

}

 

 

mdao.login(mvo)이 구현 될 수 있도록 MemeberDAO와 MemberDAOImpl에 코드를 추가한다.

 

 

MemberDAO.interface

package repository;

import domain.MemberVO;

public interface MemberDAO {

	int insert(MemberVO mvo);

	MemberVO login(MemberVO mvo);

}

 

 

MemberDAOImpl.java

package repository;

import org.apache.ibatis.session.SqlSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import orm.DatabaseBuilder;

public class MemberDAOImpl implements MemberDAO {

// ... (기존 코드)

	@Override
	public MemberVO login(MemberVO mvo) {
		log.info(">>> login check 3");
		return sql.selectOne("MemberMapper.login", mvo);
	}

}

 

 

memberMapper에 관련 sql 문을 추가해 준다.

select id ="login"의 경우, DB에서 결과를 mvo라는 객체로 가져오기 위해서 resultType를 사용한다.

 

 

memberMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  <mapper namespace="MemberMapper">
	<insert id="reg">
		insert into member(id, pwd, email, team)
		values(#{id}, #{pwd}, #{email}, #{team})
	</insert>
	<select id="login" resultType="mvo">
		select * from member where id = #{id} and pwd = #{pwd}
	</select>
  </mapper>

 

 

여기까지 완료 되었다면 index.jsp에서 로그인 화면과 연결될 a태그에 login.jsp를 연결해주고,

ID와 Password가 일치하지 않으면 일치하지 않는다고 alert를 띄워줄 수 있게 script까지 추가해주었다. 

 

 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- c:out 태그를 사용하기 위해서는 JSTL(Core Tag Library)을 사용 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semicolone</title>
</head>
<body>
	<header>
		<div>Logo</div>
		<div>
			<ul>
				<li><a href="/index.jsp">HOME</a></li>
				<li><a href="/member/login.jsp">LOGIN</a></li>
				<li><a href="/memb/join">SIGNUP</a></li>
				<li><a href="#">BOARD</a></li>
				<li><a href="#">Profile</a></li>
				<li><a href="#">LOGOUT</a></li>
			</ul>
		</div>
	</header>
	<main></main>
	<footer></footer>
	
	<script type="text/javascript">
		const msg_join = `<c:out value="${msg_join}" />`;
		console.log(msg_join);
		if (msg_join == 'welcome') {
			alert('회원가입이 완료되었습니다~!!\n환영합니다!');
		}
		
		const msg_login = `<c:out value="${msg_login}" />`;
		console.log(msg_login);
		if (msg_login == 'fail') {
			alert('로그인 정보가 일치하지 않습니다.');
		}
		
	</script>
</body>
</html>

 

 

마지막으로 다시 MemeberController에 돌아와 login을 실패했을 때 alert를 띄우게 하고

login 버튼을 눌렀을 때 이동하게 될 페이지를 설정해 준다.

 

 

MemberController.java

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import domain.MemberVO;
import service.MemberService;
import service.MemberServiceImpl;

@WebServlet("/memb/*")
public class MemberController extends HttpServlet {

// ... (기존 코드)
			
		case "login":
			try {
				// login.jsp에서 id, pwd를 전송
				String id = request.getParameter("id");
				String pwd = request.getParameter("pwd");
				// id, pwd를 객체화해서 DB로 전송
				MemberVO mvo = new MemberVO(id,pwd);
				log.info(">>> login check 1");
				
				// id와 pwd가 일치하는 데이터의 객체를 리턴
				MemberVO loginMvo = msv.login(mvo);
				log.info("login mov >>> {}", loginMvo);
				
				// 로그인 객체가 있다면...
				if(loginMvo != null) {
					// Session 객체 가져오기
					// 연결된 세션 객체가 있다면 기존 객체 가져오기, 없으면 생성
					HttpSession ses = request.getSession();
					ses.setAttribute("ses", loginMvo);
					// 로그인 유지시간(초단위로 설정) => 10*60 10분*60초 / 없으면 브라우저 끄면 날아감
					ses.setMaxInactiveInterval(10*60);	
				} else {
					request.setAttribute("msg_login","fail");
				}
				
				destPage = "/index.jsp";
				
			} catch (Exception e) {
				e.printStackTrace();
				log.info(">>> login error");
			}
			break;
		}
		
// ... (기존 코드)

}

 

 

여기까지 하려고 했는데, 로그인을 해보니 로그인 전후의 차이를 주고 싶어서

index.jsp에서 로그인 했을 때와 안했을 때 보이는 a태그가 달리 보이도록 코드를 추가해보았다.

<c:if> 를 사용해서 로그인을 하지 않았을 때는 home / login / signup 만 보이게 했고

로그인을 했을 때는 home / board / mypage / logout이 보이게 수정했다.

 

 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- c:out 태그를 사용하기 위해서는 JSTL(Core Tag Library)을 사용 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semicolone</title>
</head>
<body>
	<header>
		<div>Logo</div>
		<div>
			<ul>
				<li><a href="/index.jsp">HOME</a></li>
				<c:if test="${ses.id eq null }">
					<li><a href="/member/login.jsp">LOGIN</a></li>
					<li><a href="/memb/join">SIGNUP</a></li>
				</c:if>
				<c:if test="${ses.id ne null }">
					<li><a href="#">BOARD</a></li>
					<li><a href="#">MYPAGE</a></li>
					<li><a href="#">LOGOUT</a></li>
				</c:if>
			</ul>
		</div>
	</header>
	<main></main>
	<footer></footer>
	
	<script type="text/javascript">
		const msg_join = `<c:out value="${msg_join}" />`;
		console.log(msg_join);
		if (msg_join == 'welcome') {
			alert('회원가입이 완료되었습니다~!!\n환영합니다!');
		}
		
		const msg_login = `<c:out value="${msg_login}" />`;
		console.log(msg_login);
		if (msg_login == 'fail') {
			alert('로그인 정보가 일치하지 않습니다.');
		}
	</script>
</body>
</html>

 

 

로그인 전 index 화면

 

 

로그인 화면

 

 

로그인 실패 시 alert

 

 

로그인 후 index 화면

 

 

 

[JSP/Servlet] 3. 로그인

(다음 게시물 예고편)
[JSP/Servlet] 4. 로그아웃

728x90
저작자표시 비영리 변경금지
rlozlr
@rlozlr :: 얼렁뚱땅 개발자

얼렁뚱땅 주니어 개발자

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

개발자가 되기까지 (2023.08.16~2024.04.15)/[Servlet] Basic Web 추천 글
more
image

티스토리툴바