개발일지/JSP

[JSP] 로그인 화면 분석하기③

연습용365 2021. 11. 29. 01:49

 

<user/userRegForm.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.icia.common.util.StringUtil" %>
<%@ page import="com.icia.web.util.CookieUtil" %>
<%@ page import="com.icia.web.util.HttpUtil" %>
<%@ page import="com.icia.web.dao.UserDao" %>
<%@ page import="com.icia.web.model.User" %>
<%@ page import="org.apache.logging.log4j.LogManager" %>
<%@ page import="org.apache.logging.log4j.Logger" %>
<%
   //로그
   Logger logger = LogManager.getLogger("/user/userRegForm.jsp"); 
   //현재 소스이름 넣으면 알아서 찍어주는 용도라서 틀려도 괜찮음
   
   HttpUtil.requestLogString(request, logger);
   //HttpUtil 사용 //값을 담음
   
   //회원가입 가능 여부
   boolean bSuccess = false;
   
   //쿠키 정보 가져오기
   String cookieUserId = CookieUtil.getValue(request, "USER_ID"); 
   //클라이언트에서 넘어 온 쿠키 정보를 읽는 메소드
   //"USER_ID" 비어있는 경우 로그인이 안 돼 있다는 뜻

   if(!StringUtil.isEmpty(cookieUserId)) //쿠키 값이 있다면?
   {
      //쿠키정보가 있을때
      logger.debug("cookie UserId : " + cookieUserId);
      //콘솔창에 뜸
      
      UserDao userDao = new UserDao(); //객체생성
      User user = userDao.userSelect(cookieUserId);
      //정보 갖고옴. 당연히 쿠키니까 아이디를 인수값으로 넘김
      
      if(user != null) 
      //유저 정보에는 없는데 쿠키가 있다? 뭔가 잘못됨 ㄱ-
      //때문에 쿠키를 날려버리고 로그인 페이지로 넘어가야 한다.
      {
         //사용자 정보가 있다면 //Status Y인가요?
         //if(user.getStatus().equals("Y")) //StringUtil이 없을 때
         if(StringUtil.equals(user.getStatus(), "Y")) //메소드 사용
         {
            //정상 사용자인 경우라면 페이지로 이동
            response.sendRedirect("/board/list.jsp");
         }
         else
         {
            //정지사용자인 경우 쿠키를 삭제하고 로그인 페이지로 이동
            CookieUtil.deleteCookie(request, response, "USER_ID"); //삭제 메소드
            response.sendRedirect("/index.jsp");
            //아래 거 복사한 거임
         }
      }
      else //정보 없음
      {
         CookieUtil.deleteCookie(request, response, "USER_ID"); //쿠키 날림
         response.sendRedirect("/index.jsp"); //응답으로 페이지를 보낸다
      }
   }
   else //쿠키가 없을 때
   {
      bSuccess = true; 
      //정상적인 회원가입
      //아래의 페이지를 보여줌
   }
   
   if(bSuccess == true)
   {
%>

<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<script type="text/javascript">
$(document).ready(function() {
    
   $("#userId").focus();
   
   $("#btnReg").on("click", function() { 
   //Ajax통신 화면에 안 보이지만 이 때 함께 실행된다.
      
      // 모든 공백 체크 정규식
      var emptCheck = /\s/g;
      // 영문 대소문자, 숫자로만 이루어진 4~12자리 정규식
      var idPwCheck = /^[a-zA-Z0-9]{4,12}$/;
            
      if($.trim($("#userId").val()).length <= 0)
      {
         alert("사용자 아이디를 입력하세요.");
         $("#userId").val("");
         $("#userId").focus();
         return;
      }
      
      if (emptCheck.test($("#userId").val())) 
      {
         alert("사용자 아이디는 공백을 포함할 수 없습니다.");
         $("#userId").focus();
         return;
      }
      
      if (!idPwCheck.test($("#userId").val())) 
      {
         alert("사용자 아이디는 4~12자의 영문 대소문자와 숫자로만 입력하세요");
         $("#userId").focus();
         return;
      }
      
      if($.trim($("#userPwd1").val()).length <= 0)
      {
         alert("비밀번호를 입력하세요.");
         $("#userPwd1").val("");
         $("#userPwd1").focus();
         return;
      }
      
      if (emptCheck.test($("#userPwd1").val())) 
      {
         alert("비밀번호는 공백을 포함할 수 없습니다.");
         $("#userPwd1").focus();
         return;
      }
      
      if (!idPwCheck.test($("#userPwd1").val())) 
      {
         alert("비밀번호는 영문 대소문자와 숫자로 4~12자리 입니다.");
         $("#userPwd1").focus();
         return;
      }
      
      if ($("#userPwd1").val() != $("#userPwd2").val()) 
      {
         alert("비밀번호가 일치하지 않습니다.");
         $("#userPwd2").focus();
         return;
      }
      
      if($.trim($("#userName").val()).length <= 0)
      {
         alert("사용자 이름을 입력하세요.");
         $("#userName").val("");
         $("#userName").focus();
         return;
      }
      
      if(!fn_validateEmail($("#userEmail").val()))
      {
         alert("사용자 이메일 형식이 올바르지 않습니다.");
         $("#userEmail").focus();
         return;   
      }
      
      $("#userPwd").val($("#userPwd1").val());
      
      $.ajax({
         type : "POST",
         url : "/user/userIdCheckAjax.jsp",
         data : {
            userId : $("#userId").val()
         },
         datatype : "JSON",
         success : function(obj) {
            var data = JSON.parse(obj);

            if(data.flag == 0)
            {
               document.regForm.submit();
            }
            else
            {
               alert("중복된 아이디 입니다.");
            }   
         },
         complete : function(data) {// 응답이 종료되면 실행, 잘 사용하지않는다
            console.log(data);
         },
         error : function(xhr, status, error) {
            alert("아이디 중복 체크 에러!");
         }
      });
   });
   
});

function fn_validateEmail(value)
{
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
   
   return emailReg.test(value);
}
</script>
</head>
<body>
<%@ include file="/include/navigation.jsp" %>
<div class="container">
    <div class="row mt-5">
       <h1>회원가입</h1>
    </div>
    <div class="row mt-2">
        <div class="col-12">
         <form id="regForm" name="regForm" action="/user/userProc.jsp" method="post">
         <!-- DB에 Insert를 하는 애 -->
                <div class="form-group">
                    <label for="username">사용자 아이디</label>
                    <input type="text" class="form-control" id="userId" name="userId" placeholder="사용자 아이디" maxlength="12" />
                </div>
                <div class="form-group">
                    <label for="username">비밀번호</label>
                    <input type="password" class="form-control" id="userPwd1" name="userPwd1" placeholder="비밀번호" maxlength="12" />
                </div>
                <div class="form-group">
                    <label for="username">비밀번호 확인</label>
                    <input type="password" class="form-control" id="userPwd2" name="userPwd2" placeholder="비밀번호 확인" maxlength="12" />
                </div>
                <div class="form-group">
                    <label for="username">사용자 이름</label>
                    <input type="text" class="form-control" id="userName" name="userName" placeholder="사용자 이름" maxlength="15" />
                </div>
                <div class="form-group">
                    <label for="username">사용자 이메일</label>
                    <input type="text" class="form-control" id="userEmail" name="userEmail" placeholder="사용자 이메일" maxlength="30" />
                </div>
                <input type="hidden" id="userPwd" name="userPwd" value="" /> //hidden 개발자가 작성
                <button type="button" id="btnReg" class="btn btn-primary">등록</button>
         </form>
        </div>
    </div>
</div>
</body>
</html>
<%
   }
  //이렇게 괄호를 닫음
%>

 

등록 버튼 눌렀을 때 
실제로 DB에 Insert 서브밋 하기 전 값을 다 체크해야한다. 

이 아이디가 가입 돼 있는 아이디가 아닌지 중복 여부 체크

그걸 체크하기 위해서는 userIdCheckAjax.jsp 파일을 만들어 주어야함~

 

자바를 만들 때는 src/main/java에서 만들지만~ 
jsp 만들 때는 무조건 webapp에서 만든다!!!

 

 

<user/userIdCheckAjax.jsp>

회원가입 할 때의 아이디 중복체크

다 복사해 온 것임~

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.icia.common.util.StringUtil" %>
<%@ page import="com.icia.web.util.CookieUtil" %>
<%@ page import="com.icia.web.util.HttpUtil" %>
<%@ page import="com.icia.web.dao.UserDao" %>
<%@ page import="com.icia.web.model.User" %>
<%@ page import="org.apache.logging.log4j.LogManager" %>
<%@ page import="org.apache.logging.log4j.Logger" %>
<%
   //로그
   Logger logger = LogManager.getLogger("/user/userIdCheckAjax.jsp");
   //현재 소스 찍어만 주는 용도임
   HttpUtil.requestLogString(request, logger);
   
   String userId = HttpUtil.get(request, "userId");
   //클라이언트에서 넘어오는 값 "userId"를 변수에 담을 거임
   //""안의 이름과 userRegForm>ajax>data: { userId : $("#userId").val() },
   
   if(!StringUtil.isEmpty(userId))
   {
      UserDao userDao = new UserDao();
      if(userDao.userIdSelectCount(userId) <= 0)
      {
         //사용가능 ID
         response.getWriter().write("{\"flag\":0}");
      }
      else //값이 안 넘어 옴
      {
         //존재하는 ID
         response.getWriter().write("{\"flag\":1}");
      }
   }
   else
   {
      response.getWriter().write("{\"flag\":-1}");   //값 없음
   }
%>

 

 

<userProc.jsp>

userRegForm에서 넘어 온 값을 다 받아 준다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.icia.common.util.StringUtil" %>
<%@ page import="com.icia.web.util.CookieUtil" %>
<%@ page import="com.icia.web.util.HttpUtil" %>
<%@ page import="com.icia.web.dao.UserDao" %>
<%@ page import="com.icia.web.model.User" %>
<%@ page import="org.apache.logging.log4j.LogManager" %>
<%@ page import="org.apache.logging.log4j.Logger" %>
<% 
	//로그
	Logger logger = LogManager.getLogger("/user/userProc.jsp");
	HttpUtil.requestLogString(request, logger);
	
	String redirectUrl = ""; 
	String msg = "";
	
    String userId = HttpUtil.get(request, "userId");
	String userPwd = HttpUtil.get(request, "userPwd");
	String userName = HttpUtil.get(request, "userName");
	String userEmail = HttpUtil.get(request, "userEmail");
	//userRegForm 값을 다 받아서 지역변수에 넣음
   	 String cookieUserId = CookieUtil.getValue(request, "userId");
       	//얘만 CookieUtil에서 받아 와야함
        //용도 2 (회원가입 - 쿠키정보X, 회원정보수정 - 쿠키정보O)
	
	
	
	UserDao userDao = new UserDao();
	
	if(StringUtil.isEmpty(cookieUserId)) //비어 있어?
	{
    	//클라이언트 화면에서 Jquery를 다 체크 했다. (위에서 다 체크함)
        //서버에서도 체크 하기 위해서 여기서도 체크함
		//회원 가입
		if(!StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd) && 
				!StringUtil.isEmpty(userName) && !StringUtil.isEmpty(userEmail))
                //하나도 비어져 있으면 안 되기 때문에 ||가 아니라 &&를 했음
		{
			if(userDao.userIdSelectCount(userId) > 0) //카운트가 0 이어야함
			{
				//중복아이디 존재
				msg = "사용자 아이디가 존재 합니다.";
				redirectUrl = "/user/userRegForm"; //다시 가입 페이지
			}
			else
			{
				//회원 가입(INSERT)
               	 		//insert 메소드의 매개변수를 User로 받으니까 User 객체 생성을 한다.
				User user = new User();
				
				user.setUserId(userId);
				user.setUserPwd(userPwd);
				user.setUserName(userName);
				user.setUserEmail(userEmail);
				user.setStatus("Y");
                		//user객체에 값을 넣어 보냄
				
                	//해당 메소드 콜
				if(userDao.userInsert(user) > 0) 
				{
					msg = "회원가입이 완료 되었습니다.";
					redirectUrl = "/"; //index.jsp
				}
				else
				{
					msg = "회원가입중 오류가 발생했습니다.";
					redirectUrl = "/user/userRegForm.jsp";
				}
			}
		}
		else
		{
			msg = "회원가입 중 입력값이 잘 못 되었습니다.";
			redirectUrl = "/user/userRegForm.jsp";
            		//회원가입 페이지로 다시 가줘야 한다.
		}
			
	}
	else
	{
		//회원 정보 수정
	}
%>

<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<script type="text/javascript">
$(document).ready(function() {
   alert("<%=msg%>");
   location.href = "<%=redirectUrl%>";
});   
</script>
</head>
<body>

</body>
</html>

 

 

기술 면접 TIP!!

- 회사에서 하는 것 처럼 시도해 보려고 공통 모듈 빼서 사용해 봤습니다. 하면 됨~!