상품관리 (로그인 / 로그아웃)

- 상품관리 (로그인 / 로그아웃 기능 구현) -

세션을 사용해서 세션이 아이디와 비밀번호를 저장한 후 페이지를 이동해도 로그인 정보가 그대로 넘어가게 할 예정

뷰 => 컨트롤러 => 서비스 => 모델 => 뷰

-로그인-

menu.jsp 페이지에서 로그인 링크를 누르면 login.do( login.jsp 페이지 ) 로 이동.   login.jsp 페이지에서 아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 id 값 (btnLogin) 이 위쪽에 있는 javaScript 구문으로 넘겨받아서   아이디와 비밀번호가 DTO와 DAO를 거쳐서 컨트롤러에 맵핑된 login_check로 넘어간다.   name값이 null값이 아니면 (로그인이 성공하면) home페이지로 이동하고, 로그인이 실패하면 login 페이지로 되돌아간다.

menu.jsp (로그인과 로그아웃 페이지로 이동하는 태그를 추가)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<!-- 다른페이지에 include되는 페이지 -->
<a href = "${path }/memo/list.do">한줄메모장</a> ㅣ
<a href = "${path }/upload/uploadForm">업로드 테스트</a> ㅣ
<a href = "${path }/shop/product/list.do">상품목록</a> ㅣ
 
<div style = "text-align: right;">
    <a href = "${path }/member/login.do">로그인</a>
    //login.do로 이동하는 링크를 만듬
    
    <a href = "${path }/member/logout.do">로그아웃</a>
    //logout.do로 이동하는 링크를 만듬
</div>

회원테이블은 기존에 만들어놓은 테이블을 사용한다. (member 테이블)

MemberDTO.java (계층별 데이터 교환 클래스)

member테이블에 있는 속성명과 맞춰서 만든다. (데이터를 넣고 빼고가 자유롭게...)

package com.example.spring02.model.member.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 + "]";
    }
    
}
 

MemberDAO.java (DB연결 클래스)

package com.example.spring02.model.member.dao;
 
import com.example.spring02.model.member.dto.MemberDTO;
 
public interface MemberDAO {
    public String loginCheck(MemberDTO dto); //DTO에서 값을 받아 로그인을 체크하는 메소드
}
 

MemberDAOImpl.java (DB연결 구현 클래스)

package com.example.spring02.model.member.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
public class MemberDAOImpl implements MemberDAO {
 
    //mybatis를 호출하기 때문에 Inject을 받아야한다 (의존성 주입)
    
    @Inject
    SqlSession sqlSession;
    
    @Override
    public String loginCheck(MemberDTO dto) { //loginCheck메소드를 구현
        return sqlSession.selectOne("member.login_check", dto);

        //sqlsession의 selectOne메소드에 한가지 값(dto)를 담아서 리턴함
        //mapper을 호출하기 위해 mapper id와 저장할 값을 지정
    }
}

memberMapper.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와 중복되지 않도록 네임스페이스 기재 --><mapper namespace="member">    <select id = "Login_check" resultType = "com.example.spring02.model.member.dto.MemberDTO">    <!-- id 속성에는 해당 sql문을 참조하는 이름 (파일)을 적고 => Login_check  resultType는 검색결과의 레코드를 어떤 형태로 변환시킬건지 작성한다. -->    <!-- 즉 Login_check파일에서 밑에 있는 sql문을 참조하고 (실행하고) 그 결과를 MemberDTO 타입으로 변환 (다른 계층으로 자료를 이동시키기 위해) 한다. -->        select * from member    where userid = #{userid} and passwd = #{passwd}    <!-- 회원의 아이디와 비밀번호가 모두 일치하는 회원의 모든 정보를 검색하는 sql문 -->    </select></mapper>
    Colored by Color Scripter

MemberService.java (회원 서비스 인터페이스)

package com.example.spring02.service.member;
 
import javax.servlet.http.HttpSession;
 
import com.example.spring02.model.member.dto.MemberDTO;
 
public interface MemberService {
    //HttpSession은 사용자 인증정보를 처리하는 클래스
    public String loginCheck(MemberDTO dto, HttpSession session); //로그인 체크 메소드
    public void logout(HttpSession session); //로그아웃 체크 메소드
}
 

MemberServiceImpl.java (회원 서비스 인터페이스 구현 클래스)

package com.example.spring02.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
public class MemberServiceImpl implements MemberService {
 
    // 서비스는 dao를 호출하기 때문에 의존성을 주입해야한다.
    @Inject
    MemberDAO memberDao;
 
    @Override
    public String loginCheck(MemberDTO dto, HttpSession session) {
        // 로그인 체크 메소드
        // 그러니까 DTO => DAO 로 넘어가는 과정
        // 아이디와 비밀번호가 맞으면 이름이 넘어오고 틀리면 null이 넘어온다.
        // dao 클래스에 로그인 체크 메소드에 매개값으로 주어진 이름을 name변수에 저장
        String name = memberDao.loginCheck(dto);
 
        if (name != null) {// 맞으면
            // 세션변수 등록
            session.setAttribute("userid", dto.getUserid());
            // DTO에 저장된 회원의 아이디를 userid라는 이름으로 세션에 저장
 
            session.setAttribute("name", name);
            // 위에서 로그인체크를 할때 받은 name를 세션에 저장하고 이 이름을 name라고 저장한다.
        }
 
        return name;
 
    }
 
    @Override
    public void logout(HttpSession session) {
        // 세션을 모두 초기화시킴 (로그아웃이므로 세션에 저장된 회원정보를 없애야 한다.)
        // invalidate( )메소드를 사용하면 사용자의 id까지 바뀌어버린다.
        session.invalidate();
 
    }
 
}
 

MemberController.java (회원정보 컨트롤러)

package com.example.spring02.controller.member;
 
import javax.inject.Inject;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.example.spring02.service.member.MemberService;
 
@Controller
@RequestMapping("/member/*") // 클래스 전체에서 사용하는 공통적인 url 매핑, 매핑을 할때 공통적인 코드를 줄이기 위해서 사용한다.
public class MemberController {
 
    private static final Logger logger = LoggerFactory.getLogger(MemberController.class);
    // MemberController의 로그를 출력하기 위해 getLogger 메소드를 사용해서 LoggewrFactory 에 담고 logger 변수에 저장
    
 
    // 컨트롤러에서 서비스를 호출하기 때문에 어노테이션을 사용해서 의존성을 주입해야한다.
    // 객체 생성과 소멸을 스프링에서 관리하게끔 하기 위해
    @Inject
    MemberService memberService;
 
    @RequestMapping("login.do") // 이쪽에 있는건 세부적인 매핑
    // login.do로 요청을 하면 member 폴더의 login.jsp 파일로 이동해서 로그인 할 수 있는 화면을 만들어주게끔 한다.
    public String login() {
        return "member/login";
    }
}
 

login.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>
 
 
<%@ include file="../include/header.jsp"%>
<script>
//아래쪽에서 id값을 받아서 데이터를 전송한다.
//click 메소드 안에 있는 함수를 실행해서 id와 비밀번호를 저장하고
//빈 값(공백값) 이면 경고창을 출력하고, 커서를 이동시킨다.
// val () 메소드는 form (양식)의 값을 가져오거나 값을 설정하는 메소드
// focus () 메소드는 해당 요소에 포커스를 부여하고, 텍스트 창의 경우 커서를 위치시켜 바로 입력이 가능하도록 하던가
// 버튼의 경우, 엔터키를 눌렀을때 클릭 효과를 낸다.
$(function(){
    $("#btnLogin").click(function(){
        var userid = $("#userid").val();
        var passwd = $("#passwd").val();
        if(userid==""){
            alert("아이디를 입력하세요.");
            $("#userid").focus();
            return;
        }
        if(passwd==""){
            alert("비밀번호를 입력하세요.");
            $("#passwd").focus();
            return;
        }
        //아이디와 비밀번호가 맞으면 login_check페이지로 넘어간다.
        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">
                    <!-- type가 button타입이기 때문에 데이터 전송기능이 없다. --> <!-- 그래서 id값을 javascript에 줘서 자바스크립트에서 데이터를 전송할 수 있게끔 한다. -->
                    <button type="button" id="btnLogin">로그인</button> <!-- param(파라미터)를 사용해서 값이 다시 넘어오는 경우 로그인이 안되어있으면 (nologin) -->
                    <!-- 먼저 로그인 하라는 메시지를 출력한다. --> <c:if
                        test="${param.message == 'nologin' }">
                        <div style="color: red;">먼저 로그인 하세요.</div>
                    </c:if> <!-- param(파라미터)를 사용해서 값이 넘어오는 경우에 아이디와 비밀번호가 틀려서 'error'과 같으면 -->
                    <!-- 아이디 또는 비밀번호가 일치하지 않는다는 메시지를 출력함 --> <c:if
                        test="${param.message == 'error' }">
                        <div style="color: red;">아이디 또는 비밀번호가 일치하지 않습니다.</div>
                    </c:if> <!-- 또한 로그아웃틀 하게되면 로그아웃이 되었다는 메시지를 출력함 --> <c:if
                        test="${param.message == 'logout' }">
                        <div style="color: red;">로그아웃 되었습니다.</div>
                    </c:if>
        </table>
    </form>
</body>
</html>

login 페이지에서 로그인 정보를 쓰고 로그인 버튼을 누르면 컨트롤러의 logincheck 로 넘어감.

MemberController.java 중 일부 

//View (login 페이지에서 아이디와 비밀번호를 쓰게 되면 컨트롤러에서 이 메소드를 거쳐서 logincheck페이지로 이동함)
    @RequestMapping("login_check.do")
    public ModelAndView login_check(@ModelAttribute MemberDTO dto, HttpSession session) {
        //login페이지에서 넘어와서 DTO에 저장된 아이디와 비밀번호를  @ModeAttribute어노테이션을 사용해서 한꺼번에 2개를 다 받는다.
        //사용자가 로그인한 정보를 계속 가지고 있게 하기 위해서 세션도 받는다.
        //로그인 성공 => 이름이 넘어옴, 실패  => NULL이 넘어옴
        
        String name = memberService.loginCheck(dto, session);
        //서비스 계층에 loginCheck메소드의 매개값으로 dto (아이디, 비밀번호, 세션) 변수 name에 저장
        
        ModelAndView mav = new ModelAndView();
        // 데이터를 보낼 뷰와 데이터를 동시에 설정하기 위해 ModelAndView타입의 객체를 생성한다.
        
        if (name != null) { //로그인이 성공하면 시작페이지로 이동함.
            
            mav.setViewName("home");
            
        }else {//로그인이 실패하면 login 페이지로 다시 돌아감
            mav.setViewName("member/login");
            
            mav.addObject("message", "error"); //로그인 페이지에 에러라는 값을 준다. 그러면 그 에러메시지를 값으로 받아서 경고메시지 출력
        }
        return mav;
    }    

-로그아웃-

MemberController.java 중 일부

@RequestMapping("logout.do") //logout.do에 매핑
    public ModelAndView logout(
            HttpSession session, ModelAndView mav) {
        memberService.logout(session); //세션 초기화 작업
        mav.setViewName("member/login"); //이동할 페이지의 이름
        mav.addObject("message","logout"); //변수 저장 
        return mav; //페이지로 이동
    }

login.jsp 중 일부

mav에 있는 logout 메시지가 아래 구문에서 걸려서 "로그아웃 되었습니다" 메시지를 출력한다.

            <c:if test="${message == 'logout' }">
                <div style="color:red;">
                    로그아웃되었습니다.
                </div>
            </c:if>