너굴 개발 일지

TIL_210429_JSP,Servlet 활용 로그인 및 회원가입 프로그램 본문

JSP,Serlvet

TIL_210429_JSP,Servlet 활용 로그인 및 회원가입 프로그램

너굴냥 2021. 4. 29. 22:12

 

※ 회원 정보 업데이트쪽은 미완성 단계

 

멤버관리 프로젝트 준비작업

1. 프로젝트 생성 및 설계 (MemberDTO 클래스의 멤버변수 생성시 DB 테이블 레코드 참고, 단 no는 생성 X)

2. DB 테이블, 시퀀스 생성

 

프로젝트 파일 사진
MemberDAO 클래스 설명

 

Servlet url 맵핑

IdCheckServlet / idCheck.do

JoinServlet / join.do

LoginServlet /  login.do

LogoutServlet /  logout.do

MemberUpdateServlet /  memberUpdate.do

 

DB 클래스 및 시퀀스 정보

테이블명 : member_tbl
member_seq 시퀀스

 

프로젝트 흐름도

 

 

프로젝트 실행 화면

 

 

프로젝트 코드

더보기 
index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index.jsp</title>
</head>

<body>
	<a href="login.do">로그인 페이지로 이동 : LoginServlet (get방식 요청 : doGet()호출)</a><br />
	LoginServlet : 이미 접속이 되어 있으면 main.jsp<br />
	처음 접속하면  member/login.jsp 
</body>
</html>
LoginServlet.java

package com.bjy.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 com.bjy.dao.MemberDAO;
import com.bjy.dto.MemberDTO;


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

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// index.jsp의 링크(<a href="login.do">)에 의해 요청되어 자동 호출됨
		String url = "member/login.jsp";
		
		// session 사용 이유 : 로그인 한 후 해당 userid를 세션에 저장(세션명 : "loginUser" )한다
		HttpSession session = request.getSession();
		if(session.getAttribute("loginUser") != null) { // 이미 로그인된 사용자라면
			url = "main.jsp"; // 메인페이지로 이동
		}
		
		RequestDispatcher rd = request.getRequestDispatcher(url);
		rd.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// member/login.jsp에 의해 요청됨 
		
		String url = "member/login.jsp";
		
		String userid = request.getParameter("userid");
		String pwd = request.getParameter("pwd");
		
		MemberDAO dao = MemberDAO.getInstance();
		int result = dao.userCheck(userid, pwd);
		
		if(result == 1) {
			MemberDTO dto = dao.getMember(userid);
			
			HttpSession session = request.getSession();
			session.setAttribute("loginUser", dto);
	
			request.setAttribute("message", "로그인 되었습니다");
			url = "main.jsp";
		}else if(result == 0) {
			request.setAttribute("message", "비밀번호가 틀립니다");
		}else if(result == -1) {
			request.setAttribute("message", "존재하지 않는 아이디입니다");
		}
		
		RequestDispatcher rd = request.getRequestDispatcher(url);
		rd.forward(request, response);
	}

}

member / login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>login.jsp</title>
</head>

<body>
login.jsp는 두가지 값을 출력 : <br />
1. 아이디 입력 부분에 userid를 기본값으로 설정 <br />
2. 맨 아래쪽에 메시지(message)를 출력  <br />
	<h3>로그인 화면</h3>
	
	<form action="login.do" method="post">
		<table>
			<tr>
				<td>아이디</td>
				<td><input type="text" name="userid" value="${userid}" required="required" /></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="password" name="pwd" required="required" /></td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
				<input type="submit" value="로그인" />
				<input type="reset" value="취소" />
				<input type="button" value="회원가입" onclick="location.href='join.do'" />
			</tr>
			
			<tr>
				<td colspan="2">${message }</td>
			</tr>
		</table>
	</form>
</body>
</html>
JoinServlet.java

package com.bjy.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 com.bjy.dao.MemberDAO;
import com.bjy.dto.MemberDTO;

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// login.jsp <input type="button" value="회원가입" onclick="location.href='join.do'" />
		// 단순히 회원 가입 화면(member/join.jsp)만 응답 처리
		RequestDispatcher rd = request.getRequestDispatcher("member/join.jsp");
		rd.forward(request, response);
		
		//response.sendRedirect("member/join.jsp");
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 회원 가입 화면(member/join.jsp)에서 입력값을 모두 입력 후, 가입 버튼을 눌렀을 때
		request.setCharacterEncoding("UTF-8");
		
		MemberDTO dto = new MemberDTO();
		dto.setName(request.getParameter("name"));
		dto.setUserid(request.getParameter("userid"));
		dto.setPwd(request.getParameter("pwd"));
		dto.setEmail(request.getParameter("email"));
		dto.setPhone(request.getParameter("phone"));
		dto.setAdmin(Integer.parseInt(request.getParameter("admin")));
		
		MemberDAO dao = MemberDAO.getInstance();
		int result = dao.insertMember(dto);
		
		HttpSession session = request.getSession();
		if(result == 1) {
			session.setAttribute("userid", dto.getUserid()); // 로그인 화면에서 아이디 바로 출력하기 위해서
			session.setAttribute("message", "회원 가입에 성공하였습니다");
		}else {
			session.setAttribute("message", "회원 가입에 실패하였습니다");
		}
		
		RequestDispatcher rd = request.getRequestDispatcher("member/login.jsp");
		rd.forward(request, response);
	}

}

member / join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>join.jsp</title>
	<script type="text/javascript" src="script/member.js" ></script>
</head>

<body>
	<h3>회원 가입 화면</h3>
	'*'는 필수 입력 사항입니다.
	
	<form action="join.do" method="post" name="frm">
		<table>
			<tr>
				<td>이름</td>
				<td><input type="text" name="name" size="20" maxlength="20" required="required" />*</td>
			</tr>
			
			<tr>
				<td>아이디</td>
				<td>
					<input type="text" name="userid" size="20" maxlength="20" required="required" />
					<input type="hidden" name="reid" size="20" />
					<input type="button" value="중복체크" onclick="idCheck()" >
				</td>
			</tr>
			
			<tr>
				<td>암호</td>
				<td><input type="password" name="pwd" size="20" required="required" />*</td>
			</tr>
			
			<tr>
				<td>암호확인</td>
				<td><input type="password" name="pwd_check" size="20" required="required" />*</td>
			</tr>
			
			<tr>
				<td>이메일</td>
				<td><input type="email" name="email" size="20" /></td>
			</tr>
			
			<tr>
				<td>전화번호</td>
				<td><input type="tel" name="phone" size="20" /></td>
			</tr>
			
			<tr>
				<td>등급</td>
				<td>
					<input type="radio" name="admin" value="0" checked="checked" /> 일반회원				
					<input type="radio" name="admin" value="1" /> 관리자				
				</td>
			</tr>
			
			<tr>
				<td colspan="2">
					<input type="submit" value="확인" onclick="return joinCheck()" />
					<input type="reset" value="취소" />
				</td>
			
			<tr>
				<td colspan="2">${message }</td>
			</tr>
		</table>
		
	</form>
</body>
</html>
script / member.js

function loginCheck() {
	if (document.frm.userid.value.length == 0) {
		alert("아이디를 써주세요");
		frm.userid.focus();
		return false;
	}
	if (document.frm.pwd.value == "") {
		alert("암호는 반드시 입력해야 합니다.");
		frm.pwd.focus();
		return false;
	}
	return true;
}

function idCheck() {
	if (document.frm.userid.value == "") {
		alert('아이디를 입력하여 주십시오.');
		document.formm.userid.focus();
		return;
	}
	var url = "idCheck.do?userid=" + document.frm.userid.value;
	window.open(url, "_blank_1", "toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=450, height=200");
}

function idok(userid) {
	opener.frm.userid.value = document.frm.userid.value;
	opener.frm.reid.value = document.frm.userid.value;
	self.close();
}

function joinCheck() {
	if (document.frm.name.value.length == 0) {
		alert("이름을 써주세요.");
		frm.name.focus();
		return false;
	}
	if (document.frm.userid.value.length == 0) {
		alert("아이디를 써주세요");
		frm.userid.focus();
		return false;
	}
	if (document.frm.userid.value.length < 4) {
		alert("아이디는 4글자이상이어야 합니다.");
		frm.userid.focus();
		return false;
	}
	if (document.frm.pwd.value == "") {
		alert("암호는 반드시 입력해야 합니다.");
		frm.pwd.focus();
		return false;
	}
	if (document.frm.pwd.value != document.frm.pwd_check.value) {
		alert("암호가 일치하지 않습니다.");
		frm.pwd.focus();
		return false;
	}
	if (document.frm.reid.value.length == 0) {
		alert("중복 체크를 하지 않았습니다.");
		frm.userid.focus();
		return false;
	}
	return true;
}
member / idcheck.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>idcheck.jsp</title>
	<script type="text/javascript" src="script/member.js" ></script>
</head>

<body>
	<h3>아이디 중복 확인 결과 화면 : 새창</h3>
	<form action="idCheck.do" method="get" name="frm">
			아이디 : <input type="text" name="userid" value="${userid }" />
			<input type="submit" value="중복체크" />
			<br />
			<c:if test="${result ==1 }">
				<script type="text/javascript">
					opener.document.frm.userid.value="";
				</script>
				${userid }는 이미 사용중인 아이디입니다.
			</c:if>
			
			<c:if test="${result == -1 }">
				${userid }는 사용 가능한 아이디 입니다
				<input type="button" value="사용" onclick="idok('${userid}')" />
			</c:if>
	</form>
</body>
</html>
idCheckServlet.java

package com.bjy.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 com.bjy.dao.MemberDAO;


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

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// join.jsp -> 중복체크 버튼 -> script / member.js -> idCheck() 내에서 window.open() 요청 
		String userid = request.getParameter("userid");
		
		MemberDAO dao = MemberDAO.getInstance();
		int result = dao.confirmID(userid);    // 1 (id 중복 O) / -1 (id 중복 X)
		
		request.setAttribute("userid", userid);
		request.setAttribute("result", result);
		
		RequestDispatcher rd = request.getRequestDispatcher("member/idcheck.jsp");
		rd.forward(request, response);
	}

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

}

LogoutServlet.java

package com.bjy.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;


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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// main.jsp의 로그아웃 버튼 클릭시 요청됨
		HttpSession session = request.getSession();
		session.invalidate();
		
		RequestDispatcher rd = request.getRequestDispatcher("member/login.jsp");
		rd.forward(request, response);
	}

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

}

MemberDAO.java

package com.bjy.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;


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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// main.jsp의 로그아웃 버튼 클릭시 요청됨
		HttpSession session = request.getSession();
		session.invalidate();
		
		RequestDispatcher rd = request.getRequestDispatcher("member/login.jsp");
		rd.forward(request, response);
	}

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

}

MemberDTO.java

package com.bjy.dto;

public class MemberDTO {
	private String name;
	private String userid;
	private String pwd;
	private String email;
	private String phone;
	private int admin;
	
	public MemberDTO() {
		// TODO Auto-generated constructor stub
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	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 int getAdmin() {
		return admin;
	}

	public void setAdmin(int admin) {
		this.admin = admin;
	}
	
	@Override
	public String toString() {
		return "MemberDTO [name=" + name + ", userid=" + userid + ", pwd=" + pwd + ", email=" + email + ", phone=" + phone + ", admin=" + admin + "]";
	}


}

main.jsp 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:if test="${empty loginUser }">
	<jsp:forward page="login.do"></jsp:forward>
</c:if>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>main.jsp</title>
</head>

<body>
	<h3>여기는 로그인 후 화면</h3>
	<h4>회원 전용 페이지</h4>
		<form action="logout.do">
			<table>
			<tr>
				<td>안녕하세요~ ${loginUser.name } (${loginUser.userid } ) 님</td>
			</tr>
			
			<tr>
				<td><input type="submit" value="로그아웃" /></td>
				<td><input type="button" value="회원정보변경" onclick="location.href='memberUpdate.do?userid=${loginUser.userid}" /></td>
			</tr>
		</table>	
		</form>
</body>
</html>

프로젝트 실행 결과 사진 

프로그램 실행 시 첫 화면
로그인 화면 
회원 가입 화면
회원 가입 시 ID 중복 체크 화면
회원 가입 후 바뀌는 로그인 화면
로그인 후 메인 화면

Q) idCheckServlet에서 사용 가능한 ID를 session에 저장하는 이유는 ?

join.jsp의 id input value값으로 사용하며 회원 가입 완료 후 login.jsp에서 아이디를 저장하기 위해 (2번 이상 사용) 

request 객체가 아닌 session 객체에 저장하여 편리하게 사용한다 

 

Q) member.js의 document.frm.name.value란?

body 태그 사이에 name 속성이 frm인 form의 value를 뜻한다. 따라서 해당 파일의 body 태그 안에 name="frm"인 태그가 중복되어선 안된다

 

Q) input type="hidden"이란?

 사용자에게는 보이지 않는 부분으로 join.jsp에서 중복체크시 정상결과 도출하면 입력한 아이디를 저장시키기 위해서 사용

 

Q) <script type="text/javascript" src="script/member.js">에서 src는? source의 약자로 읽어들일 파일을 명시한다

 

 

 

'JSP,Serlvet' 카테고리의 다른 글

TIL_210531_model1,model2,MVC 패턴  (0) 2021.05.31
TIL_210428_DAO,DTO,JSP, Servlet 활용 데이터 가공 문제  (0) 2021.04.28
210427_JSP 관련 데이터 다루기 문제  (0) 2021.04.27
TIL_210423_쿠키, 세션  (0) 2021.04.27
TIL_210426_JSTL ,Servlet 기초  (0) 2021.04.26
'JSP,Serlvet' Related Articles more