프로그래밍/JSP / / 2021. 8. 23. 19:16

JSP - 미니 프로젝트(2. 로그인)

 

로그인 클릭하면 

아래와같은 화면나오도록 jsp작성

 

로그인 버튼누르면 /login 으로 값보내도록설정하고

스크립트이용해 아이디와 비밀번호 칸이 입력되어있을때만 submit 작동하도록 하였다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="<%=request.getContextPath() %>/resources/css/loginpage-style.css" rel="stylesheet">
</head>
<body>
	<%@ include file="/WEB-INF/views/common/header.jsp" %>
	<div class="wrapper">
    	<div class="outer">
    		<form class="loginArea" action="<%=request.getContextPath() %>/login" method="post" onsubmit="return validate();">
    			<h1>로그인</h1>
    			<h4>아이디</h4>
    			<span class="input_area">
    				<input type="text" name="userId" id="userId" placeholder="아이디를 입력하세요">
    			</span>
    			<h4>비밀번호</h4>
    			<span class="input_area">
    				<input type="password" name="userPwd" id="userPwd" placeholder="비밀번호를 입력하세요">
    			</span>
    			<h5>
    				<input type="checkbox" name="remember" id="remember"><label for="remember">아이디 기억하기</label>
    			</h5>
    			<span class="input_area">
    				<input type="submit" value="로그인">
    			</span>
    		</form>
    	</div>
    </div>
    
    <script>
    	function validate(){
    		let userId = document.getElementById('userId');
    		let userPwd = document.getElementById('userPwd');
    		
    		if(userId.value.length <= 0){
    			alert("아이디를 입력해주세요!");
    			userId.select();
    			return false;
    		}
    		
    		if(userPwd.value.length <= 0){
    			alert("비밀번호를 입력해주세요!");
    			userPwd.select();
    			return false;
    		}
    		
    		return true;
    	}
    
    </script>
</body>
</html>

 

전송버튼을 누르게되면 /login 으로 요청이되는데

비즈니스로직은 서블릿을통해 처리를하게된다.

a 태그로 이동하거나 주소표시줄에 직접타이핑해 접근하면

get방식으로 접근이되어서 doGet 메소드가 호출된다.

package member.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import member.model.vo.Member;
import member.service.MemberService;

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher view = request.getRequestDispatcher("/WEB-INF/views/member/loginpage.jsp");
		view.forward(request, response);
	}
	
}

로그인창으로 이동이될것이다.

아이디 비밀번호 입력후 로그인버튼을누르면 post방식으로 db까지확인하는방식으로 이동한다

login.jsp => login.servlet => MemberService => MemberDAO

 

LoginServlet.java

아이디와 비밀번호 request.getParameter로 값받아서

MemberService 클래스로 전달해준다.

 

그리고 로그인에 성공하게되면

유저정보를 session에 저장하게된다.

session은 브라우저 에 저장되는 객체이므로

브라우저를 닫거나, 서버가 재가동되면 삭제된다.

 

package member.controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import member.model.vo.Member;
import member.service.MemberService;

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher view = request.getRequestDispatcher("/WEB-INF/views/member/loginpage.jsp");
		view.forward(request, response);
		
		
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		
		String userId = request.getParameter("userId");
		String userPwd = request.getParameter("userPwd");
		
		Member userLogin = new MemberService().loginMember(userId, userPwd);
		String view = "";
		if(userLogin == null) {
			request.setAttribute("msg", "로그인에 실패하였습니다.");
			view = "/WEB-INF/views/common/errorpage.jsp";
			request.getRequestDispatcher(view).forward(request, response);
		}else {
			HttpSession session = request.getSession();
			session.setAttribute("userLogin", userLogin);
			response.sendRedirect(request.getContextPath());
		}
		
		
	}

}

 

MemberService.java

서비스에서는 커넥션연결과 DAO에 값을보내 값을받는방식을 이용한다.

package member.service;

import static common.JDBCTemplate.*;

import java.sql.Connection;

import member.model.dao.MemberDAO;
import member.model.vo.Member;

public class MemberService {
	
	// 1. 로그인
	public Member loginMember(String id, String pwd) {
		
		Connection conn = getConnection();
		
		Member loginUser = new MemberDAO().loginMember(conn, id, pwd);
		
		
		return loginUser;
	}

}

 

우선 JDBCTemplate

getConnection() 커넥션연결하는방식사용한다 .

연결 값은 properties 파일이용한다.

close() 메소드는 DAO에서 JDBC이용후 객체 닫을 때 이용한다.

commit/rollback은 db에서 insert, update, delete이용후 commit을 해줘야 반영이된다.

package common;

import java.io.FileReader;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

public class JDBCTemplate {

	// getConnection 연결
	public static Connection getConnection() {
		Connection conn = null;
		Properties proper = new Properties();
		String fileName = JDBCTemplate.class.getResource("/sql/driver.properties").getPath();
		try {
			proper.load(new FileReader(fileName));
			
			Class.forName(proper.getProperty("dirver"));
			conn = DriverManager.getConnection(proper.getProperty("url"), proper.getProperty("id"), proper.getProperty("pw"));
			conn.setAutoCommit(false);
			
		} catch (IOException e) {
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return conn;
	}
	
	// 닫기
	public static void close(Connection conn) {
		try {
			if(conn != null && !conn.isClosed()) {
				conn.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
	public static void close(Statement stmt) {
		try {
			if(stmt != null && !stmt.isClosed()) {
				stmt.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
	public static void close(ResultSet rs) {
		try {
			if(rs != null && !rs.isClosed()) {
				rs.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
	// commit
	public static void commit(Connection conn) {
		try {
			if(conn != null && !conn.isClosed()) {
			conn.commit();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
	// rollback
		public static void rollback(Connection conn) {
			try {
				if(conn != null && !conn.isClosed()) {
				conn.rollback();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	
}

 

MemberDAO

sql쿼리문도 직접작성하지않고 

xml파일에 미리작성해두고 사용하는 방식을사용하였다.

만약 아이디와 비밀번호가일치하면 사용자의 정보를 Member객체로 반환한다.

만약 일치하지않을시 null이 반환될것이다. 

package member.model.dao;

import java.io.FileInputStream;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;

import member.model.vo.Member;
import static common.JDBCTemplate.close;

public class MemberDAO {
	Properties prop = new Properties();
	
	public MemberDAO() {
		String fileName = MemberDAO.class.getResource("/sql/member/member-query.xml").getPath(); 
		try {
			prop.loadFromXML(new FileInputStream(fileName));
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
	
	// 1. 로그인 기능
	public Member loginMember(Connection conn, String id, String pwd) {
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		Member member = null;
		String sql = prop.getProperty("loginMember");
		// System.out.println(sql);
		
		try {
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, id);
			pstmt.setString(2, pwd);
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				member = new Member(
										    rs.getInt("USER_NO"),
										    rs.getString("USER_ID"),
										    rs.getString("USER_PWD"),
										    rs.getString("USER_NAME"),
										    rs.getString("PHONE"),
										    rs.getString("EMAIL"),
										    rs.getString("ADDRESS"),
										    rs.getString("INTEREST"),
										    rs.getDate("ENROLL_DATE"),
										    rs.getDate("MODIFY_DATE"),
										    rs.getString("STATUS")
						);
				// System.out.println(member);
				
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			close(rs);
			close(pstmt);
			
		}
		
		return member;
	}	
}

 

 

로그인 안했을시 화면

 

로그인 했을시 화면

 

만약 로그인을 했는데도 정보수정 로그아웃 이라는 버튼이안나오게되면 session쪽을 확인해보면 될것이다.

 

저작자표시

'프로그래밍 > JSP' 카테고리의 다른 글

JSP - 미니 프로젝트(4. 회원가입)  (1) 2021.08.23
JSP - 미니 프로젝트(3. 로그아웃)  (0) 2021.08.23
JSP - 미니 프로젝트(1.메인페이지)  (1) 2021.08.23
JSP - 미니 프로젝트 INTRO  (0) 2021.08.23
JSP  (0) 2021.08.18
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유
프로그래밍/JSP 관련 글
글 더보기

티스토리툴바