[spring] 로그인 페이지 만들기📝 #1

[스프링] 기능 복습하기
학원에서 배웠던 스프링 프로젝트 기능들 복습하는 시간!〠
이번에는 로그인 기능을 구현해보겠습니다.
필요한 프로그램은 DB와 스프링 프로그램입니다. (*글쓴이는 오라클DB 사용)

#1   로그인 페이지 구현

MVC패턴을 사용하여 만드는 방법이오니 참고하시기 바랍니다.

0️⃣  제일 처음으로 데이터베이스에서 table을 생성합니다.
저는 테이블명을 member로 하였습니다.

create table member (
userid varchar2(50) not null primary key, //아이디
passwd varchar2(50) not null, //비밀번호
name varchar2(50) not null, //이름
email varchar2(50), //이메일
join_date date default sysdate //가입날짜
);

0️⃣-1️⃣  member table에 데이터 insert하기

insert into member (userid,passwd,name,email)
values ('kimcs','1234','김철수','[email protected]');

commit;

commit까지 완료합니다.
DB작업은 간단하게 작성하시면 됩니다.

이제부터 Spring에서 작업합니다.

1️⃣  MemberDTO 파일을 만들고 코드를 작성합니다.
패키지 → com.프로젝트명.dto.MemberDTO.java
로그인 기능에 쓰일 변수를 선언하고 getter와 setter, toString 코드를 작성합니다.

package com.project.dto;

import java.util.Date;

public class MemberDTO {
private String userid;
private String passwd;
private String name;
private String email;
private Date join_date;

public String getUserid() {
 return userid;
}
public void setUserid(String userid) {
 this.userid = userid;
}
public String getPasswd() {
 return passwd;
}
public void setPasswd(String passwd) {
 this.passwd = passwd;
}
public String getName() {
 return name;
}
public void setName(String name) {
 this.name = name;
}
public String getEmail() {
 return email;
}
public void setEmail(String email) {
 this.email = email;
}
public Date getJoin_date() {
 return join_date;
}
public void setJoin_date(Date join_date) { 
 this.join_date = join_date;
}

@Override
public String toString() {
return "MemberDTO [userid=" + userid + ", passwd=" + passwd + ", name=" + name + ", email=" + email + ", join_date=" + join_date + "]";
 }
}

2️⃣  MemberDAO 파일 코드를 작성합니다.
패키지 → com.프로젝트명.dao.MemberDAO.java (*interface파일로 만듭니다.)

package com.project.dao;

import com.project.dto.MemberDTO;

public interface MemberDAO {
 public String loginCheck(MemberDTO dto);
} 

3️⃣  MemberDAOImpl 파일 코드를 작성합니다.
패키지 → com.프로젝트명.dao.MemberDAOImpl.java

package com.project.dao;

import javax.inject.Inject;
import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;
import com.example.spring02.model.member.dto.MemberDTO;

@Repository // 현재 클래스를 dao bean으로 등록
public class MemberDAOImpl implements MemberDAO {

@Inject
SqlSession sqlSession; // SqlSession 의존관계 주입

@Override
public String loginCheck(MemberDTO dto) {
return sqlSession.selectOne("member.login_check", dto);
 }
}

⭐️ // 주석을 참고하시면 공부하기에 좋습니다.👍🏻

4️⃣ mappers 폴더를 생성하여 .xml 파일을 작성합니다.
mappers/member.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="member">
 <select id="login_check" resultType="String">
  select name
  from member
  where userid=#{userid} and passwd=#{passwd}
 </select>
</mapper>

5️⃣ service 파일을 작성합니다.
패키지 → com.project.service.MemberService.java
❗️ 미리 만들어놨던 MemberDTO파일을 import 시켜줍니다.

package com.project.service.member;

import javax.servlet.http.HttpSession;
import com.example.spring02.model.member.dto.MemberDTO;

public interface MemberService {
 public String loginCheck(MemberDTO dto, HttpSession session);
 public void logout(HttpSession session);
}

6️⃣ serviceImpl 파일을 작성합니다.

패키지 → com.project.service.MemberServiceImpl.java
❗️ 미리 만들어놨던 MemberDTO와 MemberDAO파일을 import 시켜줍니다.

package com.project.service.member;

import javax.inject.Inject;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Service;

import com.example.spring02.model.member.dao.MemberDAO;
import com.example.spring02.model.member.dto.MemberDTO;

@Service // service bean으로 등록
public class MemberServiceImpl implements MemberService {

@Inject
MemberDAO memberDao;
@Override
public String loginCheck(MemberDTO dto, HttpSession session) {
String name = memberDao.loginCheck(dto);
 if (name != null) { // 세션 변수 저장
  session.setAttribute("userid", dto.getUserid());
  session.setAttribute("name", name);
}
 return name; 
}

@Override
public void logout(HttpSession session) {
 session.invalidate(); // 세션 초기화
 }
}

7️⃣ Controller 파일을 작성합니다.
패키지 → com.project.controller.MemberController.java

package com.example.spring02.controller.member;

import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView;
import com.example.spring02.model.member.dto.MemberDTO; import com.example.spring02.service.member.MemberService;

@Controller // 컨트롤러 빈으로 등록 
@RequestMapping("/member/*")
public class MemberController {

@Inject
 // menu.do를 클릭하면 views/member/login.jsp로 이동 
@RequestMapping("login.do")
 public String login() {
  return "member/login";
}

@RequestMapping("login_check.do")
public ModelAndView login_check(@ModelAttribute MemberDTO dto, HttpSe ssion session) {
 String name = memberService.loginCheck(dto, session);  
 ModelAndView mav = new ModelAndView();
  if (name != null) { // 로그인 성공 시
   mav.setViewName("home"); // 뷰의 이름
   } else { // 로그인 실패 시
     mav.setViewName("member/login"); 		
     mav.addObject("message", "error");
     }
     return mav;
   }
   
@RequestMapping("logout.do")
public ModelAndView logout(HttpSession session, ModelAndView mav) {
memberService.logout(session); 
 mav.setViewName("member/login"); 
 mav.addObject("message", "logout"); 
  return mav;
  }
 }

jsp파일 작성하기

1️⃣ login.jsp 페이지 작성
스프링 webapp폴더에서 view 폴더를 생성 → 그 안에 member폴더를 생성 → login.jsp 파일을 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title>
<%@ include file="../include/header.jsp" %>
<script>
$(function(){
$("#btnLogin").click(function(){
 userid=$("#userid").val();
 var passwd=$("#passwd").val(); if(userid == ""){
  alert("아이디를 입력하세요");
  $("#userid").focus(); //입력포커스 이동

  return; //함수 종료
}
if(passwd==""){
 alert("비밀번호를 입력하세요"); 
 $("#passwd").focus();
  return;
}
//폼 내부의 데이터를 전송할 주소
 document.form1.action= "${path}/member/login_check.do";
 document.form1.submit(); //제출
 });
});
</script>
</head>

<body>
<%@ include file="../include/menu.jsp" %>
<h2>로그인</h2>
<form name="form1" method="post">
<table border="1" width="400px">
<tr>
 <td>아이디</td>
 <td><input id="userid" name="userid"></td>
</tr>
<tr>
 <td>비밀번호</td>
 <td><input type="password" id="passwd" name="passwd"></td>
</tr>
<tr>
 <td colspan="2" align="center">
 <button type="button" id="btnLogin">로그인 </button>
 <c:if test="${message == 'error'}">
 <div style="color:red;"> 아이디 또는 비밀번호가 일치하지 않습니다.
 </div>
</c:if>
<c:if test="${message == 'logout'}">
 <div style="color:red;"> 로그아웃되었습니다.
 </div>
</c:if>
</td>
</tr>
</table>
</form>
</body>
</html>

스크립트와 바디 부분에 코드를 작성해 주었습니다.
login.jsp 페이지는 하단의 화면처럼 나오게 됩니다.👇🏻

이제 거의 다 왔습니다 :)
로그인 성공 시, 첫화면으로 이동하게 되어집니다.
2️⃣ home.jsp 화면 작성 (서버를 시작하면 나오는 첫 화면)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title>
<%@ include file="include/header.jsp" %> 
</head>
<body>
<%@ include file="include/menu.jsp" %>
<P> The time on the server is ${serverTime}. 
</P> // server타임은 생략해도 됨
 ${result}
</body>
</html>

📍 그럼 로그인 시연을 해보겠습니다.

데이터베이스에서 insert한 데이터로 로그인합니다.

• 로그인 성공 시
  로그인에 성공하면 홈페이지 첫화면이 뜹니다.
  

• 로그인 실패 시
  로그인에 실패하면 '아이디 또는 비밀번호가 일치하지 않습니다.' 문구가 뜹니다.

spring과 DBMS를 이용하여 로그인 페이지를 만들어보았습니다.
추후에 여유가 된다면, 로그인 페이지를 css를 이용하여 꾸며보는 포스팅을 작성해보겠습니다!

🧚🏻‍♀️ 개발 마스터가 되는 그날까지...!