71일차: Model 2 회원 관리(2)_ 2021.09.27

 

목차

1.     회원가입(ID 중복 검사)

2.     로그인

 

 

1. 회원가입(ID 중복 검사)

 

1) 유효성 검사 파일(js 파일)

- 비동기식 방식인 ajax로 ID 중복 검사를 한다.

- 전송 방식은 post 방식으로 설정하고, 확장자를 do로 설정해서 컨트롤러 클래스를 찾아간다.

- 유효성 검사 파일(js 파일) → 컨트롤러 클래스

 

$(document).ready(function(){    
    
    // ID 중복검사
    $("#idcheck").click(function(){
        if($("#id").val()==""){
            alert("ID를 입력하세요");
            $("#id").focus();
            return false;
        }else{
            
            var id = $("#id").val();    
            
            $.ajax({
                type:"post",
                url:"/model2member/Idcheck.do",
                data:{"id":id},
                datatype:"text",
                success:function(data){
//                    alert(data);
                    
                    if(data==1){    // 중복 ID
                        $("#myid").text("중복ID");
                        $("#id").val("").focus();
                    }else{            // 사용 가능한 ID
                        $("#myid").text("사용 가능한 ID");
                        $("#passwd").focus();
                    }                    
                }
            });            
        }        
    });

 

2) 컨트롤러 클래스

- Action 인터페이스를 상속받은 Idcheck 클래스로 객체를 생성한다.

- 생성된 객체로 메소드 오버라이딩 된 execute() 메소드를 실행하고, 이때 request와 response 객체를 매개변수로 전달한다.

- 컨트롤러 클래스 → 서비스 클래스(Idcheck.java)

 

// ID 중복 검사(ajax)
        }else if(command.equals("/Idcheck.do")) {
            try {
                action = new Idcheck();
                forward = action.execute(request, response);
            }catch(Exception e) {
                e.printStackTrace();
            }

package service;
 
import java.io.PrintWriter;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import dao.MemberDAO;
 
public class Idcheck implements Action {
    // 메소드 오버라이딩
    @Override
    public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // TODO Auto-generated method stub
        System.out.println("Idcheck");
        
        PrintWriter out = response.getWriter();        // out 객체 생성
        
        request.setCharacterEncoding("utf-8");
        
        String id = request.getParameter("id");
        System.out.println("id:"+id);
        
        MemberDAO dao = MemberDAO.getInstance();
        int result = dao.idcheck(id);                // ID 중복 검사
        System.out.println("result:"+result);        // 1  : 중복 ID
                                                    // -1 : 사용 가능한 ID
        
        // 브라우저에 출력되는 값이 callback 함수로 리턴된다.
        out.println(result);
        
        return null;
    }
 
}
 

 

2. 로그인

 

• 로그인 페이지(loginform.jsp)

<tr>
    <td colspan=2 align=center>
        <input type="button" value="회원가입" 
                       onClick="location.href='<%=request.getContextPath()%>/MemberForm.do' ">
        <input type="submit" value="로그인">
        <input type="reset" value="취소">
    </td>
</tr>

 

1) ‘회원가입’ 버튼 클릭

- 로그인 페이지에서 ‘회원가입’ 버튼을 클릭하면 회원가입 페이지로 이동시킨다.

- 이때, DB 연동은 필요없으므로 컨트롤 클래스에서 서비스 클래스로 이동할 필요 없이 바로 뷰(View) 페이지로 출력시킨다.

 

• 컨트롤러 클래스(MemberController.java)

// 회원 가입 폼
        }else if(command.equals("/MemberForm.do")) {
            forward = new ActionForward();
            forward.setRedirect(false);
            forward.setPath("./member/memberform.jsp");
 
 

 

2) '로그인' 버튼 클릭

-

① 로그인 폼 페이지(loginform.jsp)

 

<form method="post" action="<%=request.getContextPath() %>/Login.do">

 

② 컨트롤러 클래스(MemberController.java)

 

// 로그인 (회원 인증)
        }else if(command.equals("/Login.do")) {
            try {
                action = new Login();
                forward = action.execute(request, response);    
            }catch(Exception e) {
                e.printStackTrace();
            }
 
 

 

③ 서비스 클래스(Login.java)

• 회원 인증 성공: session 객체로 id 값 공유 설정,

                       ActionForward 객체 생성하고 전송 방식과 path 설정

• 회원 인증 실패: out 객체로 ‘로그인 실패’ 창 띄우고 이전 페이지(로그인 페이지)로 이동

 

package service;
 
import java.io.PrintWriter;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import dao.MemberDAO;
 
public class Login implements Action {
 
    @Override
    public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // TODO Auto-generated method stub
        System.out.println("Login");
        
        response.setContentType("text/html; charset=utf-8");     // 현재 페이지에 대한 인코딩 설정
        request.setCharacterEncoding("utf-8");                    // post 방식으로 전송되는 한글 값에 대한 인코딩 설정
        
        HttpSession session = request.getSession();        // session 객체 생성(내장 객체가 아님)
        PrintWriter out = response.getWriter();            // out 객체 생성
        
        String id = request.getParameter("id");
        String passwd = request.getParameter("passwd");
        
        MemberDAO dao = MemberDAO.getInstance();
        int result = dao.memberAuth(id, passwd);        // 회원 인증
        if(result == 1) System.out.println("회원 인증 성공");
        
        if(result == 1) {            // 회원 인증 성공
            session.setAttribute("id", id);                // 세션 공유 설정
        }else {                        // 회원 인증 실패
            out.println("<script>");
            out.println("alert('로그인 실패');");
            out.println("history.go(-1);");
            out.println("</script>");
            out.close();
            
            return null;        // if ~ else ~ 함수 빠져나감
        }
        
        ActionForward forward = new ActionForward();
        forward.setRedirect(false);
        forward.setPath("./member/main.jsp");
        
        return forward;
    }
 
}
 

 

④ 뷰 페이지(main.jsp)

- 로그인(회원 인증) 성공하면 포워딩되는 페이지

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
<!-- 세션이 있는 경우 -->
<c:if test="${sessionScope.id != null }">
    ${sessionScope.id}님 환영합니다. <br><br>
    
    <a href="./UpdateMember.do"> 회원 정보 수정 </a> <br><br>
    <a href="./Logout.do"> 로그아웃 </a> <br><br>
    <a href="./DeleteMember.do"> 회원 탈퇴 </a> <br><br>
</c:if>
 
<!-- 세션이 없는 경우 -->
<c:if test="${sessionScope.id == null }">
    <a href="<%=request.getContextPath()%>/MemberForm.do">회원가입</a> <br><br>
    <a href="<%=request.getContextPath()%>/LoginForm.do">로그인</a> <br><br>
</c:if>