spring 게시판 구현 로그인, 회원가입

박예린·2023년 2월 22일
BackendSpringweb

셋팅은 앞의 게시물 참고 (추후 깃허브 주소로 올릴예정)

로그인

MemberController.java

package mul.cam.a.controller;

import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.model;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import mul.cam.a.dto.MemberDto;
import mul.cam.a.service.MemberService;
import org.springframework.ui.Model;

@Controller
/* Controller를 통해서 login.do로 이동 */
public class MemberController {
	//service 접근(생성)
	@Autowired
	MemberService service;
	
	@RequestMapping(value="login.do", method=RequestMethod.GET)	 /*login.do로 가라*/
	public String login() {
		System.out.println("MemberController login "+ new Date());
		
		return "login"; /* login.jsp */
	}}

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<!-- bootstrap4 -->
<!-- 	<meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- cookie -->  
<script src="http://lab.alexcican.com/set_cookies/cookie.js" type="text/javascript" ></script>

<style type="text/css">
.divider:after,
.divider:before {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}
.h-custom {
  height: calc(100% - 73px);
}
@media (max-width: 450px) {
  .h-custom {
    height: 100%;
  }
}
</style>
</head>
<body>

<section class="vh-100">
  <div class="container-fluid h-custom">
    <div class="row d-flex justify-content-center align-items-center h-100">
    
   	  <div class="col-md-9 col-lg-6 col-xl-5">
        <img src="https://www.multicampus.com/kr/images/main/2021/tab-image3.jpg" class="img-fluid"
          alt="Sample image">
      </div>
      
      <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
      	<form action="loginAf.do" method="post">
    		<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
            <p class="lead fw-normal mb-0 me-3">Sign in with</p>            
          </div>

          <div class="divider d-flex align-items-center my-4">
            <p class="text-center fw-bold mx-3 mb-0">Or</p>
          </div>
          
          <!-- id input -->
          <div class="form-outline mb-4">
            <input type="text" id="id" name="id" class="form-control form-control-lg"
              placeholder="Enter a valid id" />
            <label class="form-label" for="form3Example3">Id</label> <!-- 그냥 디자인 - 생략가능 -->
          </div>
          
          <!-- Password input -->
          <div class="form-outline mb-3">
            <input type="password" id="form3Example4" name="pwd" class="form-control form-control-lg"
              placeholder="Enter password" />
            <label class="form-label" for="form3Example4">Password</label>  <!-- 그냥 디자인 - 생략가능 -->
          </div>
          
          <div class="d-flex justify-content-between align-items-center">
            <!-- Checkbox -->
            <!-- remember me? -->
            <div class="form-check mb-0">
              <input class="form-check-input me-2" type="checkbox" value="" id="chk_save_id" />
              <label class="form-check-label" for="form2Example3">
                Remember me
              </label>
            </div>
            <a href="#!" class="text-body">Forgot password?</a>
          </div>
          
          <!-- 회원가입 -->
          <div class="text-center text-lg-start mt-4 pt-2">
            <button type="submit" class="btn btn-primary btn-lg"
              style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
              																		<!-- account함수 -->
            <p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="#" onclick="account()"
                class="link-danger">Register</a></p>
          </div>
    	</form>
    </div>
    <!-- session part-->
   <div class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
    <!-- Copyright -->
    <div class="text-white mb-3 mb-md-0">
      Copyright ©️ 2023. MultiCampus.
    </div>
    <!-- Copyright -->

    <!-- Right -->
    <div>
      <a href="#!" class="text-white me-4">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="#!" class="text-white me-4">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#!" class="text-white me-4">
        <i class="fab fa-google"></i>
      </a>
      <a href="#!" class="text-white">
        <i class="fab fa-linkedin-in"></i>
      </a>
    </div>
    <!-- Right -->
  </div>
   </div>
</section>

<script type="text/javascript">
function account(){
	location.href="regi.do";
}

/*
	cookie : id저장, pw저장 == String  	client
 	session : login한 정보 == Object		server
*/

let user_id = $.cookie("user_id");

if(user_id != null){	// 저장한 id가 있음
	$("#id").val(user_id);
	$("#chk_save_id").prop("checked", true);
}

$("#chk_save_id").click(function () {
	
	if( $("#chk_save_id").is(":checked") == true ){
		
		if( $("#id").val().trim() == "" ){
			alert('id를 입력해 주십시오');
			$("#chk_save_id").prop("checked", false);
		}else{
			// cookie를 저장
			$.cookie("user_id", $("#id").val().trim(), { expires:7, path:'./' });
		}
		
	}else{
		$.removeCookie("user_id", { path:'./' });
	}	
});

</script>

</body>
</html>

<!-- 부트스트랩 사이트 : https://mdbootstrap.com/docs/standard/extended/login/ -->

Member.xml

-sql쿼리 작성

<?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="allMember" resultType="mul.cam.a.dto.MemberDto">
	select id, pwd, name, email, auth
	from member
</select>

MemberDao.java

package mul.cam.a.dao;

import java.util.List;

import mul.cam.a.dto.MemberDto;

public interface MemberDao {

	List<MemberDto> allMember();
}

MemberDaoImpl.java

package mul.cam.a.dao.impl;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import mul.cam.a.dao.MemberDao;
import mul.cam.a.dto.MemberDto;

@Repository // == 저장소
public class MemberDaoImpl implements MemberDao {
	// MyBatis 접근(생성)
	@Autowired  // 자동생성
	SqlSession session;
	
	String ns = "Member.";
	
	@Override
	public List<MemberDto> allMember() {						
		return session.selectList(ns + "allMember");
	}}

MemberService.java

-편집해주는 service인터페이스

package mul.cam.a.service;

import java.util.List;

import org.springframework.stereotype.Service;

import mul.cam.a.dto.MemberDto;

//편집해주는 service인터페이스
public interface MemberService {
	
	List<MemberDto> allMember();
    }

MemberServiceImpl.java

package mul.cam.a.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import mul.cam.a.dao.MemberDao;
import mul.cam.a.dto.MemberDto;
import mul.cam.a.service.MemberService;

@Service
public class MemberServiceImpl implements MemberService{
	//Dao 접근(생성)
	@Autowired
	MemberDao dao;
	
	@Override
	public List<MemberDto> allMember() {		
		return dao.allMember();
	}}

회원가입

MemberController.java

@RequestMapping(value="regi.do", method=RequestMethod.GET)	 /*regi.do로 가라*/
	public String regi() {
		System.out.println("MemberController regi "+ new Date());
		
		return "regi"; /* regi.jsp */
	}

regi.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>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

</head>
<body>

<article class="card-body mx-auto" style="max-width: 400px;">

	<h4 class="card-title mt-3 text-center">회원가입</h4>	
	
	<form action="regiAf.do" method="post">
	
	<div class="form-group input-group">
		<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-user"></i> </span>
		 </div>
        <input id="id" name="id" class="form-control" placeholder="id" type="text">   
           
    </div> <!-- form-group// -->
    
    <div class="form-group input-group">
    	<button type="button" id="idChkBtn" class="btn btn-danger">id check</button> 
    	<p id="idcheck" style="margin-left:10px;"></p> 
    </div>    
    	
	<div class="form-group input-group">
		<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-user"></i> </span>
		 </div>
        <input name="name" class="form-control" placeholder="Full name" type="text">
    </div> <!-- form-group// -->
    
    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
		 </div>
        <input name="email" class="form-control" placeholder="Email address" type="email">
    </div> <!-- form-group// -->
    
    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-phone"></i> </span>
		</div>
		<select class="custom-select" style="max-width: 120px;">
		    <option selected="selected">+02</option>
		    <option value="1">+032</option>
		    <option value="2">+041</option>
		    <option value="3">+053</option>
		</select>
    	<input name="" class="form-control" placeholder="Phone number" type="text">
    </div> <!-- form-group// -->
    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-building"></i> </span>
		</div>
		<select class="form-control">
			<option selected="selected">직업</option>
			<option>디자이너</option>
			<option>프로그래머</option>
			<option>자영업</option>
		</select>
	</div> <!-- form-group end.// -->
    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
		</div>
        <input id="" name="pwd" class="form-control" placeholder="Create password" type="password">
    </div> <!-- form-group// -->
    
    <div class="form-group input-group">
    	<div class="input-group-prepend">
		    <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
		</div>
        <input class="form-control" placeholder="Repeat password" type="password">
    </div> <!-- form-group// --> 
                                         
    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block"> Create Account  </button>
    </div> <!-- form-group// -->      
    <p class="text-center">Have an account? <a href="login.do">Log In</a> </p>                                                                 
</form>
</article>

<script type="text/javascript">
$(document).ready(function() {
	
	$("#idChkBtn").click(function() {		
		// id의 빈칸을 조사!
		
		$.ajax({
			type:"post",
			url:"idcheck.do",
			data:{ "id":$("#id").val() },
			success:function(msg){				
				if(msg == "YES"){
					$("#idcheck").css("color", "#0000ff");
					$("#idcheck").text("사용할 수 있는 아이디입니다");
				}else{
					$("#idcheck").css("color", "#ff0000");
					$("#idcheck").text("사용중인 아이디입니다");
					$("#id").val("");
				}
			},
			error:function(){
				alert('error');
			}
		});
	});
});
</script>

</body>
</html>

MemberDao, MemberDaoImpl, MemberService, MemberServiceImpl 로그인과 동일

아이디 중복 체크

MemberController.java

@ResponseBody
	@RequestMapping(value="idcheck.do", method=RequestMethod.POST)	 /*idcheck.do로 가라*/
	public String idcheck(String id) {
		System.out.println("MemberController idcheck "+ new Date());
		
		boolean isS = service.idCheck(id);
		if(isS == true) {	// id가 있음
			return "NO";
		}
		
		return "YES";	// id가 없음
	}

regi.jsp

<script type="text/javascript">
$(document).ready(function() {
	
	$("#idChkBtn").click(function() {		
		// id의 빈칸을 조사!
		
		$.ajax({
			type:"post",
			url:"idcheck.do",
			data:{ "id":$("#id").val() },
			success:function(msg){				
				if(msg == "YES"){
					$("#idcheck").css("color", "#0000ff");
					$("#idcheck").text("사용할 수 있는 아이디입니다");
				}else{
					$("#idcheck").css("color", "#ff0000");
					$("#idcheck").text("사용중인 아이디입니다");
					$("#id").val("");
				}
			},
			error:function(){
				alert('error');
			}
		});
	});
});
</script>

Member.xml

<!-- 아이디 중복 체크 -->
<select id="idcheck" parameterType="String" resultType="Integer">
	select count(*)
	from member
	where id=#{id}
</select>

MemberDao.java

package mul.cam.a.dao;

import java.util.List;

import mul.cam.a.dto.MemberDto;

public interface MemberDao {
	
    int idCheck(String id);}

MemberDaoImpl.java

@Override
	public int addMember(MemberDto dto) {		
		return session.insert(ns + "addmember", dto);
	}

MemberService.java

//아이디 중복체크
	boolean idCheck(String id);

MemberServiceImpl.java

//아이디 중복체크 mapper 접근
	@Override
	public boolean idCheck(String id) {
		int count = dao.idCheck(id);
		return count>0?true:false;
	}

회원가입 정보 추가

MemberController.java

//회원가입 부분
	@RequestMapping(value = "regiAf.do", method = RequestMethod.POST)
	public String regiAf(Model model, MemberDto dto) {
		System.out.println("MemberController regiAf " + new Date());
		
		boolean isS = service.addMember(dto);
		String message = "";
		if(isS) {
			message = "MEMBER_ADD_YES";
		}else {
			message = "MEMBER_ADD_NO";
		}
		model.addAttribute("message", message);
		
		return "message";
	}

message.jsp

-가입 성공 여부 message

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<%
String message = (String)request.getAttribute("message");
if(message != null && !message.equals("")){
	if(message.equals("MEMBER_ADD_YES")){
		%>
		<script type="text/javascript">
		alert("성공적으로 가입되었습니다");
		location.href = "login.do";
		</script>
		<%
	}else{
		%>
		<script type="text/javascript">
		alert("가입되지 않았습니다 다시 가입해 주십시오");
		location.href = "regi.do";
		</script>
		<%		
	}
}

Member.xml

<!-- 회원가입 정보 추가 -->
<insert id="addmember" parameterType="mul.cam.a.dto.MemberDto">
	insert into member(id, pwd, name, email, auth)
	values(#{id}, #{pwd}, #{name}, #{email}, 3)
</insert>

MemberDao.java

//Member.xml - 회원가입 sql문 addmember 함수 생성
	int addMember(MemberDto dto);

MemberDaoImpl.java

@Override
	public int addMember(MemberDto dto) {		
		return session.insert(ns + "addmember", dto);
	}

MemberService.java

//회원가입 체크
	boolean addMember(MemberDto dto);

MemberServiceImpl.java

@Override
	public boolean addMember(MemberDto dto) {
		int count = dao.addMember(dto);
		return count>0?true:false;
	}

로그인 조회

-loginAf

MemberController.java

@RequestMapping(value = "loginAf.do", method = RequestMethod.POST)
	public String login(HttpServletRequest req, Model model, MemberDto dto) {
		System.out.println("MemberController login " + new Date());
		
		MemberDto mem = service.login(dto);
		String msg = "";
		if(mem != null) {	// login 성공
			req.getSession().setAttribute("login", mem);
			req.getSession().setMaxInactiveInterval(60 * 60 * 2);
			
			msg = "LOGIN_OK";
		}else {				// login 실패
			msg = "LOGIN_FAIL";
		}
		model.addAttribute("login", msg);
		
		return "message";
	}
}

message.jsp

-로그인 성공 여부 message

String login = (String)request.getAttribute("login");
if(login != null && !login.equals("")){
	if(login.equals("LOGIN_OK")){
		%>
		<script type="text/javascript">
		alert("로그인되었습니다");
		location.href = "login.do";
		</script>
		<%
	}else{
		%>
		<script type="text/javascript">
		alert("아이디나 패스워드를 확인해 주십시오");
		location.href = "login.do";
		</script>
		<%
	}	
}

Member.xml

-db에서 맞는 id,pwd찾기

<select id="login" parameterType="mul.cam.a.dto.MemberDto"
	resultType="mul.cam.a.dto.MemberDto">
	select id, name, email
	from member
	where id=#{id} and pwd=#{pwd}
</select>

MemberDao.java

MemberDto login(MemberDto dto);

MemberDaoImpl.java

@Override
	public MemberDto login(MemberDto dto) {
		MemberDto mem = session.selectOne(ns + "login", dto);
		return mem;
	}

MemberService.java

MemberDto login(MemberDto dto);

MemberServiceImpl.java

@Override
	public MemberDto login(MemberDto dto) {		
		return dao.login(dto);
	}
profile
박예린
개발자를 꿈꾸는 귀여운 나
이전 포스트

spring jQuery Ajax를 이용한 아이디 중복검사

다음 포스트

spring 스프링 AOP

0개의 댓글