<이공계기술전문연수> 10. Servlet / JSP MVC2 실습(2) 회원가입/로그인/로그아웃

Eclipse package

 

(1) org.kh.member.model.vo

package org.kh.member.model.vo;

import java.sql.Date;

public class Member {
	
	private String memberId;
	private String memberPw;
	private String memberName;
	private int age;
	private String email;
	private String phone;
	private Date enrollDate;
	public Member() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Member(String memberId, String memberPw, String memberName, int age, String email, String phone,
			Date enrollDate) {
		super();
		this.memberId = memberId;
		this.memberPw = memberPw;
		this.memberName = memberName;
		this.age = age;
		this.email = email;
		this.phone = phone;
		this.enrollDate = enrollDate;
	}
	public String getMemberId() {
		return memberId;
	}
	public void setMemberId(String memberId) {
		this.memberId = memberId;
	}
	public String getMemberPw() {
		return memberPw;
	}
	public void setMemberPw(String memberPw) {
		this.memberPw = memberPw;
	}
	public String getMemberName() {
		return memberName;
	}
	public void setMemberName(String memberName) {
		this.memberName = memberName;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public Date getEnrollDate() {
		return enrollDate;
	}
	public void setEnrollDate(Date enrollDate) {
		this.enrollDate = enrollDate;
	}
	

}

 

 

 

(2) org.kh.member.model.controller

 

<로그인 controller>

package org.kh.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 org.kh.member.model.service.MemberService;
import org.kh.member.model.vo.Member;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet(name = "Login", urlPatterns = { "/login" })
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("로그인 Servlet 시작");
		//1. 인코딩
		request.setCharacterEncoding("utf-8");
		//2. 변수저장
		String memberId = request.getParameter("memberId"); //name=id
		String memberPw = request.getParameter("memberPw");
		System.out.println(memberId);
		System.out.println(memberPw);
		//3. 비지니스로직처리
		MemberService service = new MemberService();
		Member m = service.login(memberId, memberPw);
		//4. view처리
		if(m!=null) {
			HttpSession session = request.getSession();
			session.setAttribute("member", m);
			//scope : session, request
			request.setAttribute("msg","로그인성공");
			//jsp에게 전달해주는것!! 담아쓸수있음
		}else {
			request.setAttribute("msg","로그인실패");
		}
		request.setAttribute("loc", "/index.jsp");
		// localhost 로 이동시킬거임    /만 써도됨!!
		RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/common/msg.jsp");
		rd.forward(request,response);
		
		System.out.println("로그인 Servlet 끝!");
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

 

<로그아웃 controller>

package org.kh.member.controller;

import java.io.IOException;
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;

/**
 * Servlet implementation class LogoutServlet
 */
@WebServlet(name = "Logout", urlPatterns = { "/logout" })
public class LogoutServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LogoutServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession session = request.getSession(false); // false를 주면 현재 세션을 가지고 오는데 없으면 안가져옴
		if(session != null) {
			session.invalidate();
		}
		response.sendRedirect("/"); //데이터 전송은 안하고 페이지 이동을 할때 이 방식을 사용한다!!!!!!!!
									//dispatcher 와 비교!!!!!
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

<회원가입 controller>

package org.kh.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 org.kh.member.model.service.MemberService;
import org.kh.member.model.vo.Member;

/**
 * Servlet implementation class JoinServlet
 */
@WebServlet(name = "Join", urlPatterns = { "/join" })
public class JoinServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JoinServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.인코딩
		request.setCharacterEncoding("utf-8");
		//2.변수 저장
		String memberId = request.getParameter("memberId");
		String memberPw = request.getParameter("memberPw");
		String memberName = request.getParameter("memberName");
		
		int age = Integer.parseInt(request.getParameter("age"));
		String email = request.getParameter("email");
		String phone = request.getParameter("phone");
		
		Member m = new Member(memberId, memberPw, memberName, age, email, phone, null);
				
		//3.비지니스 로직
		MemberService service = new MemberService();
		int result = service.insertMember(m);
		
		//4.뷰 처리
		
		if(result > 0) {
			request.setAttribute("msg", "회원가입 성공");
		}else {
			request.setAttribute("msg", "회원가입 실패");
		}
		request.setAttribute("loc", "/");
		RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/views/common/msg.jsp");
		rd.forward(request, response);
		
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

 

 

 

(3) org.kh.member.model.service

package org.kh.member.model.service;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.ArrayList;

import org.kh.common.JDBCTemplate;
import org.kh.member.model.dao.MemberDao;
import org.kh.member.model.vo.Member;


public class MemberService {
    
    //로그인
	public Member login(String memberId, String memberPw) {
		Connection conn = JDBCTemplate.getConnection();
		MemberDao dao = new MemberDao();
		Member m = dao.login(conn, memberId, memberPw);
		JDBCTemplate.close(conn);
		return m;
	}
    
    //회원가입
	public int insertMember(Member m) {
		Connection conn = JDBCTemplate.getConnection();
		
		MemberDao dao = new MemberDao();
		int result = dao.insertMember(conn, m);
		
		if(result > 0) {
			JDBCTemplate.commit(conn);
		}else {
			JDBCTemplate.rollback(conn);
		}
		JDBCTemplate.close(conn);
		
		return result;
	}

}
	

 

(4) org.kh.member.model.dao

package org.kh.member.model.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import org.kh.common.JDBCTemplate;
import org.kh.member.model.vo.Member;

public class MemberDao {
	//로그인
	public Member login(Connection conn, String memberId, String memberPw) {

		Member m = null;
		PreparedStatement pstmt = null;
		ResultSet rset = null;
		String query = "select * from member where member_id=? and member_pw=?";

		System.out.println("dao : " + memberId + "/" + memberPw + "/");
		try {
			pstmt = conn.prepareStatement(query);
			pstmt.setString(1, memberId);
			pstmt.setString(2, memberPw);
			rset = pstmt.executeQuery();
			if (rset.next()) {
				m = new Member();
				m.setAge(rset.getInt("age"));
				m.setEmail(rset.getString("email"));
				m.setEnrollDate(rset.getDate("enroll_date"));
				m.setMemberId(rset.getString("member_id"));
				m.setMemberName(rset.getString("member_name"));
				m.setMemberPw(rset.getString("member_pw"));
				m.setPhone(rset.getString("phone"));

			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			JDBCTemplate.close(rset);
			JDBCTemplate.close(pstmt);
		}
		return m;
	}
    
    //회원가입
	public int insertMember(Connection conn, Member m) {
		PreparedStatement pstmt = null;
		int result = 0;
		String query = "insert into member values(?,?,?,?,?,?,sysdate)";

		try {
			pstmt = conn.prepareStatement(query);
			pstmt.setString(1, m.getMemberId());
			pstmt.setString(2, m.getMemberPw());
			pstmt.setString(3, m.getMemberName());
			pstmt.setInt(4, m.getAge());
			pstmt.setString(5, m.getEmail());
			pstmt.setString(6, m.getPhone());
			result = pstmt.executeUpdate(); // 꼭 해줄것!!!!!!!
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			JDBCTemplate.close(pstmt);
		}
		return result;
	}

}

 

 

(5)View

 

<index.jsp>

header include

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Welcome</title>
</head>
<body>
	<%@include file="/WEB-INF/views/common/header.jsp" %>
</body>
</html>

 

 

<header.jsp>

<%@page import="org.kh.member.model.vo.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%
    	Member m = (Member)session.getAttribute("member");
    %>

<script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/header/style.css">
<link rel="stylesheet" href="/css/header/responsive.css">
<script type="text/javascript" src="/js/bootstrap.js"></script>

	<header class="header_area">
		<nav class="navbar navbar-expand-lg navbar-light">
			<div class="container">
				<a class="navbar-brand logo_h" href="/">
					<img src="/img/logo.png" width="165" height="80">
				</a>
				<button class="navbar-toggler" type="button"
				data-toggle="collapse" data-target="navbarSupportedContent"
				aria-controls="navbarSupportedContent"
				aria-expanded="false"
				aria-label="Toggle navigation">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="collapse navbar-collapse offset"
				id="navbarSupportedContent">
					<ul class="nav navbar-nav menu_nav ml-auto">
						<li class="nav-item"><a class="nav-link" href="/noticeList">공지사항</a></li>
						<li class="nav-item"><a class="nav-link" href="/boardList">자유게시판</a></li>
						<li class="nav-item"><a class="nav-link" href="/views/Test/ajaxTest.jsp">AjaxTest</a></li>
						<li class="nav-item"><a class="nav-link" href="/photoList">사진게시판</a></li>
						<li class="nav-item"><a class="nav-link" href="/views/Test/apiTest.jsp">APITest</a></li>
					</ul>
				</div>
				<div class="right-button">
					<ul>
						<%if(m==null){%> 
						<li class="nav-item"><button class="btn btn-danger" onclick="location.href='/views/member/login.jsp'">로그인</button></li>
						
						<li class="nav-item"><button class="btn btn-danger" onclick="location.href='/views/member/join.jsp'">회원가입</button></li>
						<%}else{%>
						<li class="nav-item"><button class="btn btn-danger" onclick="location.href='/mypage?memberId=<%=m.getMemberId()%>'"><%=m.getMemberName() %></button></li>
						<li class="nav-item"><button class="btn btn-danger" onclick="location.href='/logout'">로그아웃</button></li>
						<%}%>
					</ul>
				</div>
			</div>
		</nav>
	</header>

 

 

header.jsp

 

 

 

 

<login.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="/css/member/login.css">
</head>
<body>
	<%@ include file="/WEB-INF/views/common/header.jsp" %>
	<section>
		<form action="/login" method="post" id="login-box">
			<h1>로그인</h1>
			<ul>
				<li><label for="memberId">아이디</label></li>
				<li><input type="text" name="memberId" id="memberId" class="form-control"></li><br>
				<li><label for="memnerPw">비밀번호</label></li>
				<li><input type="password" name="memberPw" id="memberPw" class="form-control"></li><br>
				<li id="btn-wrapper">
					<br>
					<button type="submit" class="btn btn-outline-danger btn-lg">로그인</button>
					<button type="reset" class="btn btn-outline-danger btn-lg">초기화</button>
					<br><br>
					<a href="/views/member/searchId.jsp">아이디 /</a>
					<a href="/views/member/searchPw.jsp">비밀번호 찾기</a>
			</ul>
		</form>
	</section>
	
</body>
</html>

 

 

<join.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%@ include file="/WEB-INF/views/common/header.jsp" %>
	<section>
		<div id="container" style="margin:0 auto; width:800px; color:black; text-align:center;">
			<form name="checkIdFrm">
				<input type="hidden" name="checkId">
			</form>
			<form action="/join" method="post" id="memberJoin">
				<h1>회원가입</h1>
				<table class="table">
					<tr>
						<th><label for="memberId">아이디</label></th>
						<td><input type="text" name="memberId" id="memberId"  class="form-control"></td>
						<!--<td style="width:150px;"><button type="button" onclick="checkId()" 
						class="btn btn-primary">중복체크</button></td>-->
						<td style="width:150px"><span id="chkMsg"></span></td>
					</tr>
					<tr>
						<th><label for="memberPw">비밀번호</label></th>
						<td><input type="password" name="memberPw" id="memberPw" class="form-control">
						<td colspan="2"></td>
					</tr>
					<tr>
						<th><label for="pwChk">비밀번호확인</label></th>
						<td><input type="password" id="pwChk" class="form-control">
						<td colspan="2"></td>
					</tr>
					<tr>
						<th><label for="memberName">이름</label></th>
						<td><input type="text" name="memberName" id="memberName" class="form-control"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<th><label for="age">나이</label></th>
						<td><input type="text" name="age" id="age" class="form-control"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<th><label for="email">이메일</label></th>
						<td><input type="text" name="email" id="email" class="form-control"></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<th><label for="phone">전화번호</label></th>
						<td><input type="text" name="phone" id="phone" class="form-control"></td>
						<td colspan="2"></td>
					</tr>
				</table>
				<hr>
				<div id="btn-box">
					<button type="submit" class="btn btn-success btn-lg">회원가입</button>
					<button type="reset" class="btn btn-success btn-lg">초기화</button>
				</div>
			</form>
		</div>
	</section>
	<script>
		$("#memberId").change(function(){
			var memberId = $("#memberId").val();
			$.ajax({
				url : "/ajaxCheckId.do",
				type : "get",
				data : {memberId:memberId},
				success : function(data){
					var msg = $("#chkMsg");
					if(data == '1'){
						msg.html('사용가능');
						msg.css('color','green');
					}else{
						msg.html('사용중');
						msg.css('color','red');
					}
				},
				error : function(){
					console.log("아이디 중복체크 실패");
				}
			});
		});
		function checkId(){
			var memberId = document.getElementById("memberId").value;
			if(memberId ==""){
				alert("아이디를 입력하세요.");
				return;
			}
			var url = "/checkId";//요청 서블릿 url
			var title = "checkId"; //팝업창 타이틀
			var status = "left=500px, top=100px, width=300px, height=200px, menubar=no, status=no, scrollbar=yes";
			var popup = window.open("",title,status); //빈창 오픈
			checkIdFrm.checkId.value=memberId; //히든으로 되어있는 input창에 값 세팅
			
			checkIdFrm.target = title; // popup창과 form 태그를 연결
			//action, method 설정 후 form 태그 submit
			checkIdFrm.action=url;
			checkIdFrm.method="post";
			checkIdFrm.submit();
		}
	</script>
</body>
</html>