본문 바로가기
JSP, Servlet/JSP를 이용하여 로그인 페이지 만들기

[JSP] 데이터베이스를 이용한 회원관리 시스템 - 5(회원가입 구현)

Jamesy leather 2020. 8. 20. 11:05

 GET방식과 POST 방식 사용 구분
   GET 방식 – 입력 폼을 출력할 때 사용(회원 가입, 게시글 작성 등)
   POST 방식 – 입력 폼에 자료 입력 후 데이터베이스에 정보 저장 시 사용

 

 회원정보 입력폼을 출력하기 위한 서블릿 클래스를 작성한다.

클래스명 : JoinServlet

패키지명 : com.human.controller

URL Mapping : /join.do

<JoinServlet.java get부분>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String url = "member/join.jsp";
		// 회원가입 화면을 표시한다.
		request.getRequestDispatcher(url).forward(request, response);
	}

 

 

회원정보 입력 폼 만들기

 회원 가입을 위해 사용자 정보를 입력 받는 폼

파일명 : member/join.jsp

action 속성 값 : join.do

<join.jsp>

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

</head>
<body>
	<h3>Join</h3>
	<form method="POST" action="${pageContext.request.contextPath }/join.do" name="joinform">
		<table>
			<thead>*표시 항목은 필수 입력 항목입니다.</thead>
			<tr>
				<td>이름</td>
				<td><input type="text" name="name">*</td>
			</tr>
			<tr>
				<td>아이디</td>
				<td><input type="text" name="userid">*<input type="hidden" name="reid"><input type="button" value="중복확인" onclick="return idCheck()"></td>
			</tr>
			<tr>
				<td>암호</td>
				<td><input type="password" name="pwd">*</td>
			</tr>
			<tr>
				<td>암호확인</td>
				<td><input type="password" name="pwdpwd">*</td>
			</tr>
			<tr>
				<td>이메일</td>
				<td><input type="email" name="email"></td>
			</tr>
			<tr>
				<td>전화번호</td>
				<td><input type="text" name="phone" placeholder="010-xxxx-xxxx"></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><input type="submit" value="join" onclick="return joinCheck()"></td>
				<td><input type="reset" value="cancle"></td>
			</tr>
			<tr>
				<td colspan="2">${message }</td>
			</tr>
		</table>
	</form>
</body>
</html>

 “아이디” 입력 후, [중복체크] 를 누르면 이미 등록된 회원인지 DB 조회

  member.js에 idCheck() 구현

   중복 체크 페이지를 새로운 창으로 띄우기 위한 자바스크립트
   이미 존재하는 아이디로 회원 가입을 하지 못하도록 아이디 중복 체크를 수행
   새로운 창을 띄우기 위해 window 객체의 open() 메소드 사용

 

 회원 정보 입력 후, [확인] 버튼을 누르면 필수 입력사항을 확인한다.

  member.js에 joinCheck()구현

   회원 정보를 데이터베이스에 추가하기 위한 유효성 확인
   회원가입 입력 폼의 * 표시 항목 입력 확인
   아이디가 4글자 이상인지 확인
   암호와 암호확인의 일치 확인
   아이디의 중복 체크 여부 확인

<member.js joinCheck()와 idCheck()부분>

/**
회원정보 입력 필수 입력 사항 확인
이름, 아이디, 암호, 암호확인
아이디 4글자 이상
암호와 암호확인이 일치 확인
re id의 값이 존재하는지 확인하여 중복체크여부를 검사
 */

function joinCheck() {
	if (document.joinform.name.value == "") {
		alert("이름을 입력해주세요.");
		document.joinform.name.focus();
		return false;
	}

	if (document.joinform.userid.value == "") {
		alert("아이디를 입력해주세요.");
		document.joinform.userid.focus();
		return false;
	}

	if (document.joinform.userid.value.length < 4) {
		alert("아이디는 4글자 이상이어야 합니다.");
		document.joinform.name.focus();
		return false;
	}

	if (document.joinform.pwd.value == "") {
		alert("비밀번호를 입력해주세요.");
		document.joinform.pwd.focus();
		return false;
	}

	if (document.joinform.pwdpwd.value == "") {
		alert("비밀번호를 확인해주세요.");
		document.joinform.pwdpwd.focus();
		return false;
	}


	if (document.joinform.reid.value == "") {
		alert("아이디 중복체크를 하지 않았습니다.");
		return false;
	}

	if (document.joinform.pwd.value != document.joinform.pwdpwd.value) {
		alert("비밀번호가 일치하지 않습니다.");
		document.joinform.pwdpwd.focus();
		return false;
	}

	return true;
}

function idCheck() {
	// 사용자 아이디가 입력되었는지 확인 루틴 구현
	if (document.joinform.userid.value == "") {
		alert("사용자 아이디를 입력해주세요.");
		document.joinform.userid.focus();
		return false;
	}
	// 아이디 중복 체크를 위한 페이지는 새로운 창에 출력한다.(idcheck.jsp)
	var url = "idCheck.do?userid=" + document.joinform.userid.value;
	window.open(url, "_blank_1", "toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=450, height=200");
}

idCheck.do로 요청하여 idCheck.jsp 페이지를 출력한다. 요청시 userid를 파라미터로 보내 서블릿에서 아이디 확인을 위해 데이터베이스를 조회한다.

 

아이디 중복 체크 구현

 데이터베이스에서 아이디 조회

파일명 : MemberDAO.java

메소드명 : int confirmID(String userid)

   지정한 아이디가 있으면 1, 없으면 -1을 반환한다.

<MemberDAO.java cofirmID, insertMember 부분>

// 지정한 아이디가 있으면 1, 없으면 -1을 반환한다.
	public int confirmID(String userid) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		int result = -1;

		String sql = "select pwd from membership where userid=?";

		try {
			conn = getConnection(); // DB 연결 시도
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);

			rs = pstmt.executeQuery();

			if (rs.next()) { // 조회 결과가 있으면 userid가 존재한다는 의미
				result = 1;
			} else {
				// 조회한 결과가 값이 없으므로 userid가 존재하지 않음.
				result = -1;
			}

		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (conn != null) {
					conn.close();
				}
				if (pstmt != null) {
					pstmt.close();
				}
				if (rs != null) {
					rs.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return result;
	}
    
    public int insertMember(MemberVO mVo) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;

		int result = 0;

		String sql = "insert into membership values(?, ?, ?, ?, ?, ?)";

		try {
			conn = getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, mVo.getName());
			pstmt.setString(2, mVo.getUserid());
			pstmt.setString(3, mVo.getPwd());
			pstmt.setString(4, mVo.getEmail());
			pstmt.setString(5, mVo.getPhone());
			pstmt.setInt(6, mVo.getAdmin());

			result = pstmt.executeUpdate(); // 성공하면 insert가 성공한 행의 수를 반환, 싪패하면 0
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (conn != null) {
					conn.close();
				}
				if (pstmt != null) {
					pstmt.close();
				}
				if (rs != null) {
					rs.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return result;
	}

 

 

 아이디 중복 체크를 위한 서블릿 클래스 만들기

패키지명 : com.human.controller

클래스명 : IDCheckServlet

URL Mapping : /idCheck.do

<IdCheckServlet> - 사실 get 방식만 사용해도 괜찮음

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

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

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public IdCheckServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	// idCheck.jsp 화면을 띄워준다.
	// join.jsp에서 받아온 userid를 idCheck.jsp로 전달하여 출력
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String userid = request.getParameter("userid");

		// DB에서 userid가 존재하는지 확인
		MemberDAO mDao = MemberDAO.getInstance();
		
		int result = mDao.confirmID(userid);

		request.setAttribute("userid", userid);
		request.setAttribute("result", result);

		// 회원가입 화면을 표시한다.
		request.getRequestDispatcher("member/idCheck.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	// 입력한 userid가 존재하는지 확인하여 결과를 idCheck.jsp로 전달한다.	
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		/*
		String userid = request.getParameter("userid");

		// DB에서 userid가 존재하는지 확인
		MemberDAO mDao = MemberDAO.getInstance();
		int result = mDao.confirmID(userid);

		request.setAttribute("userid", userid);
		request.setAttribute("result", result);

		// 회원가입 화면을 표시한다.
		String url = "member/idCheck.jsp";
		request.getRequestDispatcher(url).forward(request, response);
		*/
	}

}

 

 

 아이디 중복 체크 페이지 만들기

<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>중복 체크</title>
<script type="text/javascript" src="script/member.js"></script>
</head>
<body>
	<h3>아이디 중복 확인</h3>
	<form method="get" action="${pageContext.request.contextPath }/idCheck.do" name="frm">
		<table>
			<tr>
				<td><label for="id">아이디</label></td>
				<td><input type="text" name="userid" id="id" value="${userid }"></td>
				<td><input type="submit" value="중복 체크"></td>
			</tr>
			<tr>
				<td colspan="3"><c:choose>
						<c:when test="${result == 1 }">${userid }는 사용중인 아이디입니다.</c:when>
						<c:when test="${result == -1 }">${userid }가 사용가능한 아이디입니다. &nbsp;<input type="button" value="사용" onclick="idOk()"></c:when>
						<c:otherwise></c:otherwise>
					</c:choose></td>
			</tr>
		</table>
	</form>
</body>
</html>

 [중복체크] 버튼을 클릭하면 idCheck.do가 요청되어 IdCheckServlet을 실행하고 사용자 ID 조회 결과를 현재 페이지(아이디 중복 체크 페이지)로 알려준다.

 

 아이디 중복 체크 완료 처리 자바스크립트 함수

idCheck.jsp 화면의 [사용] 버튼이 클리되면 호출된다.

파일명 : member.js

 함수명: idok()

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

 opener – 현재 창을 열어 준 부모 창(회원 가입 폼).
 reid – 아이디 중복 체크 과정을 거쳤는지 확인하기 위해 회원가입 폼에 만들어 둔 숨겨진 태그.

 

 회원 정보를 데이터베이스에 추가 시 구조
   회원 가입 폼(join.jsp)에서 확인 버튼을 클릭하면 POST 방식으로 join.do를 호출

   가입이 성공적으로 이루어지면 다시 로그인 페이지로 돌아간다.

 

 회원 정보의 데이터베이스 추가 메소드

파일명 : MemberDAO.java

메소드명 : int insertMember(MemberVO mVo)

 회원 가입 폼에서 입력 받은 회원 정보를 MemberVO 타입의 매개변수로 전달 받는다.

 

 회원 정보 추가 처리를 위한 서블릿 작성

   데이터베이스 처리를 위한 코드는 doPost() 메소드에서 처리한다.

protected void doPost() {
(1) 회원정보 입력폼에서 전달된 각 회원정보의 파라미터를 읽는다.
(2) MemberVO 객체를 생성하고 회원정보 파라미터의 값을 저장한다.
(3) MembeDAO 객체를 생성하고 insertMember()를 호출하여 결과를 result에 저장한다.
(4) 데이터베이스 insert 결과에 따라
 성공이면 session 객체에 userid 속성을 저장, request객체의 message에 “회원 가입 성공”
을 저장
 실패이면 request 객체의 message에 “회원 가입 실패” 저장

(5) RequestDispatcher 객체를 생성하고 member/login.jsp 로 forward한다

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String name = request.getParameter("name");
		String userid = request.getParameter("userid");
		String pwd = request.getParameter("pwd");
		String email = request.getParameter("email");
		String phone = request.getParameter("phone");
		int admin = Integer.parseInt(request.getParameter("admin"));
		int result = 0;
		
		MemberDAO mDao = MemberDAO.getInstance();
		
		MemberVO mVo = new MemberVO();
		mVo.setName(name);
		mVo.setUserid(userid);
		mVo.setPwd(pwd);
		mVo.setEmail(email);
		mVo.setPhone(phone);
		mVo.setAdmin(admin);
		
		result = mDao.insertMember(mVo);
		if(result == 1) {
			HttpSession session = request.getSession();
			session.setAttribute("userid", userid);
			request.setAttribute("message", "회원 가입 성공");
		}else {
			request.setAttribute("message", "회원 가입 실패");
		}
		request.getRequestDispatcher("member/login.jsp").forward(request, response);
		
	}

 

로그아웃 처리

logout.do가 요쳥되면 사용자의 인증을 무효화하는 서블릿 클래스

패키지명 : com.human.controller

클래스명 : LogoutServlet

URL Mapping : /logout.do

package com.human.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("/logout.do")
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();
		session.invalidate();
		request.getRequestDispatcher("member/login.jsp").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);
	}

}

 

 

728x90
반응형
저작자표시

'JSP, Servlet > JSP를 이용하여 로그인 페이지 만들기' 카테고리의 다른 글

[JSP] 데이터베이스를 이용한 회원관리 시스템 - 6(회원정보 수정)  (0) 2020.08.20
[JSP] 데이터베이스를 이용한 회원관리 시스템 - 4(로그인 인증처리, 회원 인증 처리)  (0) 2020.08.19
[JSP] 데이터베이스를 이용한 회원관리 시스템 - 3(로그인 입력 폼과 자바스크립트로 데이터 유효성 검사)  (0) 2020.08.18
[JSP] 데이터베이스를 이용한 회원관리 시스템 - 2(DAO, VO클래스 생성)  (0) 2020.08.18
[JSP] 데이터베이스를 이용한 회원관리 시스템 - 1(기본세팅-테이블 생성)  (0) 2020.08.18

'JSP, Servlet/JSP를 이용하여 로그인 페이지 만들기' Related Articles

티스토리툴바