Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

거니의 velog

(1) 로그인 페이지 본문

대덕인재개발원_2nd project

(1) 로그인 페이지

Unlimited00 2023. 10. 20. 09:21

프로젝트 패키지 구조

[index.jsp]

<%@page import="kr.or.ddit.service.CommonServiceImpl"%>
<%@page import="kr.or.ddit.service.ICommonService"%>
<%@page import="kr.or.ddit.vo.EmployeeVO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
   	// 쿠키값으로 id정보 받아오기
   	String cookieUserId = "";
   	String chkBox = "";
   	
   	Cookie[] cookieArr = request.getCookies();
   	if(cookieArr != null) {
   		for(Cookie cookie : cookieArr) {
   			
   			System.out.println("cookieName : " + cookie.getName());
   			System.out.println("cookieValue : " + cookie.getValue());
   			
   			if("loginId".equals(cookie.getName())) {
   				cookieUserId = cookie.getValue();
   				chkBox = "checked";
   			}
   		}
   	}
   	
   	//System.out.println("cookieUserId : " + cookieUserId);
   	//System.out.println("chkBox : " + chkBox);
%>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="author" content="four guys" />
        <meta name="copyright" content="대덕인재개발원_306호" />
        <meta name="description" content="전사적 자원 관리 시스템, ERP 입니다." />
        <meta name="keywords"  content="StockERP, Stock, ERP, 전사적자원관리시스템" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <title>StockERP 로그인 화면</title>
        <link href="<%= request.getContextPath() %>/css/common.css" rel="stylesheet" />
        <link href="<%= request.getContextPath() %>/images/favicon.ico" rel="shortcut icon" />
		<script src="<%= request.getContextPath() %>/js/jquery-3.7.1.min.js"></script>
        <script defer src="<%= request.getContextPath() %>/js/script.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <script>
    	
    	var contextPath = "<%= request.getContextPath() %>";	
    	var idFlag = false;
    	var passFlag = false;
    	var empNum = "";
    	var emailEmpNo = "";
    	
    	$(document).ready(function(){
    		
	    	empLogBox = $("#loginForm>div:first-of-type>div");
	    	empLogimg = $("#loginForm>div:first-of-type>div img");
	    	
		    $("#loginId").keyup(function(){
		    	
		        // 이미지 바뀌게 하는 것
		        var thisIs = $(this);
		        empNum = thisIs.val().trim();
		        
		        // 기존 웹 서버에 올라와 있던 이미지 실시간 변경
		        // ajax - 사번체크
		        //$.idChkShowImg(empNum);
		        //$.inputNum(thisIs);
		        
		        //console.log("idFlag : " + idFlag);
		        
		        // 새로 등록한 회원 실시간 이미지 변경
		        $.idChkShowImg2(empNum);
		        $.inputNum(thisIs);
		        
		    }); // #loginId 키 이벤트 끝...
		    
		    $("#loginId").trigger("keyup");
		    
		    $("#loginPw").keyup(function(){
		    	
		    	// ID / PW 입력시 영어(소/대), 특수기호만 입력받기(keyup) (!한글, 공백)
		        var thisIs = $(this);
		    	var passVal = $('#loginPw').val().trim();
		        //console.log("passVal_keyup : " + passVal);

		        var regex = /^[^가-힣\s]+$/;
		        //var regexPass = /[^0-9a-zA-Z`~!@#$%^&*()-_=+\s]/g;

		        var testResult = regex.test(passVal);
		        if (!testResult) {
		            //alert("공백은 입력이 불가능합니다.");
		            $(this).val("");
		        }

		    });
		    
		    $("#loginBtn").click(function(){
		    	// 비밀번호 길이 체크
		    	var passVal = $('#loginPw').val().trim(); // 비밀번호로 입력받는 값
		    	//console.log("passVal_click : " + passVal);
		    	//console.log("passVal.length : " + passVal.length);

	            if (passVal.length < 8) {
	                passFlag = false;
	            }else if(passVal.length > 16){
	    			passFlag = false;
	    		}else {
	    			passFlag = true;
	    		}
		        
		    	// submit!
		    	if(!idFlag){
		    		//alert("사번을 확인해 주세요.");
		    		//$("#modalBtn").trigger("click");
		    		
		    		$("#alertModal .modal-body").empty();
		    		$("#alertModal .modal-body").text("사번을 확인해 주세요.");
		    		
		    		$("#modalBtn").trigger("click");
		    		
		    		setTimeout(function(){
		    			$("#modalCloseBtn").trigger("click");
		    		}, 2000);
		    		
		    		return false;
		    	}else if(!passFlag) {
		    		//alert("비밀번호는 8자리 이상 16자리 이하입니다.\n비밀번호를 확인해 주세요.");
		    		
		    		$("#alertModal .modal-body").empty();
		    		$("#alertModal .modal-body").html("비밀번호는 8자리 이상 16자리 이하입니다.<br />비밀번호를 확인해 주세요.");
		    		
		    		$("#modalBtn").trigger("click");
		    		
		    		setTimeout(function(){
		    			$("#modalCloseBtn").trigger("click");
		    		}, 2000);
		    		
		    		return false;
		    	}else {
		    		$("#loginForm").submit();
		    	}
		    });
		    
		    $("#findPassBtn").on("click", function(){
		    	
		    	emailEmpNo = $("#loginId").val();
		    	console.log("emailEmpNo : " + emailEmpNo);
		    	
		    	//console.log(empNoVal);
		    	//$("#infoEmpNo").val(empNoVal);
		    	//console.log($("#infoEmpNo").val());
		    	//$("#findPass").submit();
		    	
		    	$.passToEmail();
		    	
		    });
		    
		    $(window).keyup(function(e){
		    	//console.log("e.keyCode" + e.keyCode);
		    	if(e.keyCode == 13){ // 엔터키를 눌렀을 때
	 		    	var idVal = $("#loginId").val();
	 		    	var pwVal = $("#loginPw").val();
	 		    	//console.log("idVal : " + !idVal);
	 		    	//console.log("pwVal : " + !pwVal);
		    		if(idVal != "" && pwVal != ""){
 		    			$("#loginBtn").trigger("click");
		    		}
		    	}
		    });
		    
    	}); // document 끝...
    	
    </script>
    <body>
        
        <button id="modalBtn" style="display: none;" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#alertModal"></button>
        
        <section id="loginContainer">
            <div class="blur">
            	<div class="loginBgColor"></div>
                <img src="<%= request.getContextPath() %>/images/login_bgimg3.jpg" alt="로그인 배경이미지" />
            </div>
            <div class="loginContentBox">
                <form id="loginForm" action="<%= request.getContextPath() %>/loginServlet.do" method="post">
                    <div>
                        <div>
                            <img id="profileImg" src="<%= request.getContextPath() %>/images/default_profile.png" alt="기본 프로필" />
                        </div>
                    </div>
                    <div>
                        <i class="fas fa-address-card"></i>
                        <input id="loginId" name="loginId" type="text" placeholder="employee number" value="<%= cookieUserId %>" />
                    </div>
                    <div>
                        <i class="fas fa-lock"></i>
                        <input id="loginPw" name="loginPw" type="password" placeholder="Password" />
                    </div>
                    <div>
                        <input id="rememId" class="form-check-input" type="checkbox" name="rememId" value="check" <%= chkBox %> />
                        <label for="rememId">ID 기억하기</label>
                        <a id="findPassBtn" href="javascript:void(0)">비밀번호 찾기</a>
                    </div>
                    <div>
                        <button id="loginBtn" class="btn btn-primary btn_submit" type="button">LOGIN</button>
                    </div>
                </form>
                <input type="hidden" id="infoEmpNo" name="infoEmpNo" />
            </div>
        </section>
        
        <div class="modal fade" id="alertModal">
		  <div class="modal-dialog">
		    <div class="modal-content">
		
		      <!-- Modal Header -->
		      <div class="modal-header">
		        <h4 class="modal-title">주의!</h4>
		        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
		      </div>
		
		      <!-- Modal body -->
		      <div class="modal-body"></div>
		
		      <!-- Modal footer -->
		      <div class="modal-footer">
		        <button id="modalCloseBtn" type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
		      </div>
		
		    </div>
		  </div>
		</div>
        
    </body>
</html>

[LoginServlet.java]

package kr.or.ddit.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import kr.or.ddit.service.CommonServiceImpl;
import kr.or.ddit.service.ICommonService;
import kr.or.ddit.vo.EmployeeVO;


@WebServlet("/loginServlet.do")
public class LoginServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		//System.out.println("쿠키, 세션, 로그인처리 서블릿에 왔어요");
		
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		
		String contextPath = request.getContextPath();
		
		// loginId, rememberId 정보 받아오기
		String loginId = request.getParameter("loginId");
		//System.out.println("loginId : " + loginId);
		String loginPw = request.getParameter("loginPw");
		//System.out.println("loginPw : " + loginPw);
		String rememId = request.getParameter("rememId");
		//System.out.println("rememId : " + rememId);
		
		// 로그인 성공 여부 확인
		ICommonService service = CommonServiceImpl.getInstance();
		EmployeeVO paramEvo = new EmployeeVO();
		paramEvo.setEmpno(loginId);
		paramEvo.setEmppass(loginPw);
		EmployeeVO resEvo = service.loginSelect(paramEvo);
		
		//System.out.println("resEvo : " + resEvo.toString());
		if(resEvo == null) { // 로그인 실패시...
			response.sendRedirect(contextPath + "/index.jsp");
		}else { // 로그인 성공시...
			
			// 쿠키 굽기 시작...
			Cookie loginCookie = new Cookie("loginId", loginId);
			loginCookie.setPath("/");
			//System.out.println("cookieName : " + loginCookie.getName());
			//System.out.println("cookieValue : " + loginCookie.getValue());
			if(rememId == null) {
				loginCookie.setMaxAge(0);
			}
			response.addCookie(loginCookie);
			// 쿠키 굽기 끝...
			
			// 세션 처리 시작...
			HttpSession loginSession = request.getSession();
			loginSession.setMaxInactiveInterval(24*60*60); // 세션 유효 시간 : 하루
			loginSession.setAttribute("loginSession", resEvo);
			// 세션 처리 끝...
			
			response.sendRedirect(contextPath + "/main/mainPage.jsp");
			
		}
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

처음 로그인 화면. 일부러 어둡게 만들었다...
사원번호가 일치하면 배경색이 밝아지면서 해당 사원의 프로필 사진이 조회된다.

비밀번호 찾기를 누르면 해당 사원이 등록한 이메일 주소로 비밀번호가 발송된다...
해당 사원의 이메일로 비밀번호가 잘 전송되었다.

validation 체크 1
validation 체크 2

쿠키 기능을 적용하여 한번 로그인 한 후 로그아웃을 해도 사원ID를 기억해서 그대로 출력해 준다.

'대덕인재개발원_2nd project' 카테고리의 다른 글

(6) common.css  (0) 2023.10.20
(5) 회원 삭제 페이지  (0) 2023.10.20
(4) 회원 수정 페이지  (0) 2023.10.20
(3) 회원 조회 페이지  (0) 2023.10.20
(2) 회원 가입 페이지  (0) 2023.10.20
'대덕인재개발원_2nd project' Related Articles more