09009
[JSP] (4) 회원 가입 - 1 본문
웹사이트 로그인은 가입이 완료된 회원에 한해서만 가능하고 비회원인 경우 회원 가입부터 해야 한다.
로그인 폼에서 <회원 가입> 버튼을 클릭 → 회원 가입을 위한 입력 폼을 띄우기 위해 join.do를 get 방식으로 요청한다.
회원 가입 요청 방식
get 방식: 회원 가입이나 게시글 작성과 같은 입력 폼이 화면에 나타나도록 해야할 때 요청한다.
post 방식: 회원 정보나 게시글 정보를 모두 입력한 후 데이터베이스에 정보를 저장하기 위한 작업을 해야할 때 요청한다.
로그인 페이지 (login.jsp)에서 <회원 가입> 버튼을 클릭하면 join.do가 요청되도록 아래와 같이 코드를 작성한다.
<input type="button" value="회원 가입" onclick = "location.href='join.do'">그 이후, join.do 요청에 대한 처리를 수행할 서블릿을 정의해야 한다.
링크에 의한 요청은 get 방식이므로 doGet() 메서드에 회원 가입을 위한 입력 폼 join.jsp로 이동(포워딩)하도록
코드를 작성한다.
회원 정보 입력 폼을 위한 서블릿 클래스 생성
controller 패키지에 오른쪽 마우스 클릭 - [New - Servlet] 클릭 - 서블릿 클래스명을 JoinServlet이라고 작성
[Next] 버튼 클릭 후 [URL Mappings:] 목록에서 항목 선택 후 [Edit] 버튼 클릭
→ [URL Mappings] 창이 뜨면 [Pattern:] 입력란에 /join.do 작성 후 [OK] 버튼 클릭 → [Finish] 버튼 클릭하면
서블릿 클래스가 생성된다.
✍ JoinServlet.java
package 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("/Join.do")
public class JoinServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
RequestDispatcher dispatcher = request.getRequestDispatcher("member/join.jsp");
dispatcher.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}join.do가 get 방식으로 요청되면 회원 가입을 위한 폼인 join.jsp를 띄우도록 코드를 작성하였다.
회원 가입을 위한 회원 정보를 입력받는 폼 작성
member 폴더에 join.jsp 파일을 생성한다.
회원 가입을 위해 정보를 입력받는 폼을 아래와 같이 작성한다.
✍ member/join.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 관리</title>
<script type="text/javascript" src="script/member.js"></script>
</head>
<body>
<h2>회원 가입</h2>
'*' 표시 항목은 필수 입력 항목입니다.
<form action="join.do" method="post" name="frm">
<table>
<tr>
<td> 이름 </td>
<td><input type="text" name="name" size="20"> *</td>
</tr>
<tr>
<td> 아이디 </td>
<td><input type="text" name="userid" size="20" id="userid"> *
<!-- 중복체크를 하였는지 확인하는 용도로 hidden 태그 생성 -->
<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"> *</td>
</tr>
<tr height="30">
<td width="80">암호 확인</td>
<td><input type="password" name="pwd_check" size="20"> *</td>
</tr>
<tr>
<td> 이메일 </td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td> 전화번호 </td>
<td><input type="text" 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" align="center">
<input type="submit" value="확인" onclick="return joinCheck()">
<input type="reset" value="취소">
</td>
</tr>
<tr><td colspan="2">${message}</td></tr>
</table>
</form>
</body>
</html>
- 입력 폼을 정상적으로 수행하기 위해서 자바스크립트 파일(member.js)이 필요하다.
회원 정보를 입력한 후 <확인> 버튼을 클릭하면 자바스크립트 파일(member.js)에 정의된 joinCheck() 함수를 호출한다.
joinCheck() 함수는 입력이 제대로 완료되었는지 검사한 후, frm 폼의 action 속성에 지정한 파일 (join.do)로 제어를 옮기는 역할을 수행할 것이다.
<form action="join.do" method="post" name="frm">
- 데이터베이스를 설계할 때 아이디에 중복된 값을 저장할 수 없도록 primary key 제약 조건을 설정하였으므로
이미 입력된 아이디로 insert문을 수행할 시 에러가 발생할 것이다.
그러므로 회원 정보를 데이터베이스에 추가하기 전에 이미 등록된 회원인지 아이디 중복 체크를 해야 한다.
<중복 체크> 버튼을 클릭하면 idCheck() 함수를 호출하도록 설정하였다.
다음으로 <중복 체크> 버튼을 클릭할 때 아이디 중복 체크 작업을 수행하기 위한 페이지로 이동하도록
자바스크립트 함수 idCheck()를 작성한다.
* 아이디 중복 체크 페이지를 새로운 창으로 띄우기 위한 자바스크립트 함수 작성
✍ script/member.js
// 위의 중복된 내용은 생략
function idCheck() {
if(document.frm.userid.value.length == 0) {
alert("아이디를 작성해주세요.");
frm.userid.focus();
return;
}
var url = "idCheck.do?userid=" + document.frm.userid.value;
window.open(url, "_black_1",
"toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=450, height=200");
}쿼리 스트링 : 사용자가 입력한 데이터를 서버로 전달하는 방법 중 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘긴다.
쿼리 스트링 방법은 get 방식으로 요청하였을 때 URL 주소 뒤에 입력 데이터를 함께 제공한다.
[JSP] 쿼리 스트링
사용자가 입력한 데이터가 서버로 보내져야 서버가 그 값으로 여러 가지 로직을 구현할 수 있다. 서버는 사용자가 입력한 값을 어떻게 얻어올 수 있을까? 서버에서 클라이언트가 보낸 데이터를
haaland09009.tistory.com
위 함수에서 document는 join.jsp를 의미함
아이디 중복 체크를 위한 idcheck.jsp(추후 작성할 예정) 페이지는 현재 페이지가 아닌 새로운 창으로 출력하기 위해
window 객체의 open() 메서드를 작성한다.
idcheck.jsp 페이지는 idCheck.do로 요청할 예정이다.
idCheck.do를 요청하면서 입력받은 회원 아이디를 서블릿에 전송하여 데이터베이스에 이 아이디가 저장되어 있는지 확인할 것이다.
이미 존재하는 아이디로 회원 가입을 할 수 없도록 설정해야 한다.
아이디 중복 체크를 수행하여 존재하지 않는 아이디만 회원 가입하도록 하기 위해 아이디 중복 체크 작업은 필수이다.
아이디 중복 체크를 위해서는 데이터베이스에 존재하는 아이디인지 점검하기 위한 메서드를 DAO에 추가해야 한다.
아이디 중복 체크를 위한 메서드 추가
✍ MemberDAO.java
// 위에 중복되는 내용은 생략
// 회원 가입 시 아이디 중복을 확인하는 메서드 추가
// 해당 아이디가 존재하면 1, 없으면 -1 반환
public int confirmID(String userid) {
int result = -1;
String sql = "select userid from member where userid=?";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, userid);
rs = pstmt.executeQuery();
if (rs.next()) result = 1;
else result = -1;
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
}catch(Exception e) {
e.printStackTrace();
}
}
return result;
}
}
위에서 자바스크립트로 아이디 중복 체크를 위한 함수 idCheck()를 추가하였으므로
<중복 체크> 버튼을 클릭하면 idCheck.do가 요청되게 한다.
idCheck.do 요청에 의한 처리를 위한 서블릿 클래스를 아래와 같이 작성한다.
아이디 중복 체크를 위한 서블릿 클래스 생성
아래 경로로 서블릿 클래스를 아래 화면과 같이 생성한다.
[Next] 버튼을 클릭하여 [URL Mappings:] 목록에서 항목 선택 후 [Edit] 버튼 클릭
→ [URL Mappings]창이 나타나면 [Pattern:] 입력란에 패턴명 "/idCheck.do" 입력한 후 [OK] 버튼 클릭
→ [Finish] 버튼 클릭하면 서블릿 클래스가 생성된다.
✍ IdCheckServlet.java
package 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 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에서)
String userid = request.getParameter("userid");
MemberDAO mdao = MemberDAO.getInstance();
// 아이디 중복 체크를 위해 만든 confirmID() 메서드에 아이디를 전달
int result = mdao.confirmID(userid);
// 아이디 중복 체크 후 얻어온 결과값을 사용자 아이디와 함께 idcheck.jsp 페이지에 어트리뷰트에 실어 보낸다.
request.setAttribute("userid", userid);
request.setAttribute("result", result);
RequestDispatcher dispatcher = request.getRequestDispatcher("member/idcheck.jsp");
dispatcher.forward(request, response);
}
다음으로 아이디 중복 체크를 위해 회원 가입 폼(join.jsp)에서 <중복 체크> 버튼을 클릭할 때
새로운 창에 나타날 jsp 페이지 (idcheck.jsp)를 작성한다.
입력받은 아이디가 사용 가능한 아이디인지 아닌지 알려주는 역할을 한다.
아이디 중복 체크를 위한 JSP 페이지 작성
✍ 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>회원 관리</title>
<script type="text/javascript" src="script/member.js"></script>
</head>
<body>
<h2>아이디 중복 확인</h2>
<!-- <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}"> <!-- 서블릿에서 넘겨준 값이 1이면 이미 사용중인 아이디 -->
<script type="text/javascript">
opener.document.frm.userid.value=""; <!-- 회원가입 폼에서 입력 받은 아이디를 지운다. -->
<!-- 자바스크립트에서 opener는 이 창을 열어준 부모 창(회원 가입 폼 join.jsp)을 말한다 -->
</script>
${userid}는 이미 사용 중인 아이디입니다.
</c:if>
<c:if test = "${result == -1}">
${userid}는 사용 가능한 아이디입니다.
<input type="button" value="사용" class="cancel" onclick="idok()">
</c:if>
</body>
</html>
다음으로 idcheck.jsp에서 <사용> 버튼이 클릭되면 호출되는 자바스크립트 함수를 작성해야 한다.
이 함수에서는 회원 가입 폼의 아이디(userid)와 아이디 중복 체크를 했는지 하지 않았는지 확인하기 위한
글상자(reid)에 아이디 중복 체크하여 사용 가능한 아이디를 저장해 둔다.
아이디 중복 체크 완료 처리를 위한 자바스크립트 함수 작성
✍ script/member.js
// 위의 중복된 내용은 생략
function idok() {
opener.frm.userid.value = document.frm.userid.value;
opener.frm.reid.value = document.frm.userid.value;
// 아이디 중복 체크하는 창을 닫는다.
self.close();
}자바스크립트에서 opener = 이 창을 열어준 부모 창을 의미함
opener = 회원 가입 폼 (join.jsp)
document = 아이디 중복 체크 폼 (idcheck.jsp)
회원 가입 폼의 아이디를 입력받는 폼에 아이디 중복 체크가 끝난 아이디 값을 준다.
opener.frm.userid.value = document.frm.userid.value;reid는 아이디 중복 체크 과정을 완료하였는지 확인하기 위해 회원 가입 폼(join.jsp)에 작성한 히든 태그이다.
히든 태그는 사용자의 눈에 보이지 않지만 여기에 값을 저장할 수 있다.
히든 태그의 이름을 reid로 설정하였으므로 opener.frm.reid로 접근하여 value 속성에
아이디 중복 체크가 끝난 아이디 값을 건네준다.
'JSP > 회원 관리' 카테고리의 다른 글
| [JSP] (6) 로그아웃 (0) | 2023.04.16 |
|---|---|
| [JSP] (5) 회원 가입 - 2 (0) | 2023.04.15 |
| [JSP] (3) 로그인 - 2 (0) | 2023.04.15 |
| [JSP] (2) 로그인 - 1 (0) | 2023.04.15 |
| [JSP] (1) VO, DAO, 프로젝트 설계 (0) | 2023.04.15 |