[ITWILL : JSP]홈페이지만들기2 : 아이디중복체크 포함한 회원가입기능 구현

💡 핵심 요약 (TL;DR)

홈페이지만들기2 : 아이디중복체크 포함한 회원가입기능 구현의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. * input태그에 onclick=”winopen()”을 설정해준 뒤 아래 winopen()함수를 생성한다.

ITWILL학원 : 34강 JSP기초 BY 정규태강사

1. 회원가입기능 구현

1-1. joinForm.jsp 추가작성

<body>
<div id="wrap">
<!-- 헤더들어가는 곳 -->
<jsp:include page="../inc/top.jsp"></jsp:include>
<!-- 헤더들어가는 곳 -->

<!-- 본문들어가는 곳 -->
<!-- 본문메인이미지 -->
<div id="sub_img_member"></div>
<!-- 본문메인이미지 -->

<!-- 왼쪽메뉴 -->
<nav id="sub_menu">
	<ul>
		<li><a href="#">회원가입</a></li>
		<li><a href="#">개인정보취급방침</a></li>
	</ul>
</nav>
<!-- 왼쪽메뉴 -->

<!-- 본문내용 -->
<article>
<h1>Join Us</h1>
<form action="joinPro.jsp" method="post" id="join" name="fr" onsubmit="return check();">
<!-- 필수입력사항 -->
<fieldset>
<legend>필수입력사항</legend>
	<label>아이디</label>
	<input type="text" name="id" class="id">
	<input type="button" value="중복확인" class="dup" onclick="winopen()"><br>
	<label>비밀번호</label>
	<input type="password" name="pw" placeholder="영문숫자조합 4자리이상" required><br>
	<label>비밀번호확인</label>
	<input type="password" name="pass2" required><br>
	<label>이름</label>
	<input type="text" name="name" required><br>
	<label>이메일</label>
	<input type="email" name="email" placeholder="예시 : funweb@funweb.com (@포함기입)" required><br>
	<label>생년월일</label>
	<input type="text" name="birth"  placeholder="예시 : 801231 (6자리)" maxlength="6" required><br>
	<label>성별</label>
	<input type="radio" name="gender" value="f">여	
	<input type="radio" name="gender" value="m">남<br>
</fieldset>

<!-- 선택입력사항 -->
<fieldset>
<legend>선택입력사항</legend>
<label>주소</label>
<!-- <input type="text" name="address"><br> -->

<input type="text" id="sample4_postcode" placeholder="우편번호">
<input type="button" onclick="daumPostcode()" value="우편번호 찾기"><br>
<label>도로명주소(자동입력)</label>
<input type="text" name="addr" id="sample4_roadAddress" placeholder="우편번호찾기를 이용해주세요" readonly><br>
<input type="hidden" id="sample4_jibunAddress" placeholder="지번주소">
<span id="guide" style="color:#999;display:none"></span>
<input type="hidden" id="sample4_extraAddress" placeholder="참고항목">

<label>휴대폰번호</label>
<input type="text" name="mobile" placeholder="예시 : 010-1234-5678" maxlength="13"><br>
</fieldset>

<div class="clear"></div>
<div id="buttons">
<input type="submit" value="회원가입" class="submit">
<input type="reset" value="초기화" class="cancel">
</div>
</form>
</article>
<!-- 본문내용 -->
<!-- 본문들어가는 곳 -->

<div class="clear"></div>

<!-- 푸터들어가는 곳 -->
<jsp:include page="../inc/bottom.jsp"></jsp:include>
<!-- 푸터들어가는 곳 -->
</div>

<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<!-- 유효성체크 : 데이터 빈공백체크(id와 성별) -->
<script type="text/javascript">
function check(){ 
	//아이디가 입력이 안되어있을 경우 아이디입력하라는 메세지 출력
	if(document.fr.id.value == "" || document.fr.id.value.length < 0){ 
		alert("아이디를 입력해주세요")
		history.back()
		document.fr.id.focus();
		return false;
	}
	
	if(document.fr.gender[0].checked == false && document.fr.gender[1].checked == false){
		alert("성별을 확인해주세요")
		history.back()
		document.fr.id.focus();
		return false;
	}
}

<!-- 아이디중복체크 -->
function winopen(){
	//새창을 열어서 페이지를 오픈 후 -> 회원아이디정보를 가지고 중복체크
	//아래 2-1에 구현
}

//도로명주소 카카오API사용
function daumPostcode() {
    new daum.Postcode({
		(생략)
    }).open();
}

</script>
</body>

1-2. joinPro.jsp 추가작성

<%
//1. 한글처리 
request.setCharacterEncoding("UTF-8");

%>
<!-- 2. 전달되는 데이터 입력(저장) => 자바빈 객채, 액션태그사용-->
<jsp:useBean id="mb" class="com.itwillbs.member.MemberBean" />
<jsp:setProperty property="*" name="mb"/>
<%
//3. 현재 날짜정보저장(또는 DAO에서 sql구문 작성시 now()를 이용해서 현재시각을 DB에 바로 담을 수 있다.)
mb.setRe_date(new Date(System.currentTimeMillis()));

//4. MemberDAO객체생성 -> 전달받은 정보 모두 저장
MemberDAO mdao = new MemberDAO();

//5. 회원 가입 메서드 (insertMember())
mdao.insertMember(mb);
%>

//6. 회원가입 완료시 로그인페이지로 이동
<script type="text/javascript">
alert("회원가입성공")
location.href="loginForm.jsp";
</script>

1-3. MemberDAO에 insertMember()메서드생성

• 매개변수 6개 이상이면 성능이 급격하게 떨어진다는 연구결과가 있음
• 매개변수가 6개이상일때는 javabean을 이용하여 받아오는 것이 성능에 좋다

//회원가입메서드
private void insertMember(MemberBean mb){
	try {
		con = getCon();
		sql = "insert into fun_member values (?,?,?,?,?, "
				+"?,?,?,?)";
		pstmt = con.prepareStatement(sql);
		pstmt.setString(1, mb.getId());
		pstmt.setString(2, mb.getPw());
		pstmt.setString(3, mb.getName());
		pstmt.setString(4, mb.getEmail());
		pstmt.setInt(5, mb.getBirth());
		pstmt.setString(6, mb.getGender());
		pstmt.setString(7, mb.getAddr());
		pstmt.setString(8, mb.getMobile());
		pstmt.setDate(9, mb.getRe_date());
		
		pstmt.executeUpdate();
		System.out.println("회원가입성공");
	} catch (NamingException e) {
		e.printStackTrace();
	} catch (SQLException e) {
		e.printStackTrace();
	} catch (Exception e) {
		System.out.println("회원가입성공");
		e.printStackTrace();
	} finally {
		closeDB();
	}
}//insertMember메서드닫음

2. 아이디중복체크 구현

2-1. joinForm.jsp 추가작성

• input태그에 onclick=”winopen()”을 설정해준 뒤 아래 winopen()함수를 생성한다.

• 요즘은 버튼을 클릭하는 대신 제이쿼리의 ajax라이브러리를 사용하여 keydown이나 keyup function을 이용한 비동기처리방식을 사용한다

  • 예시 : 네이버회원가입
  • 참고링크 : 동기와 비동기처리방식

<!-- 필수입력사항 -->
<fieldset>
<legend>필수입력사항</legend>
	<label>아이디</label>
	<input type="text" name="id" class="id">
	<input type="button" value="중복확인" class="dup" onclick="winopen()"><br>
	<label>비밀번호</label>
	<input type="password" name="pw" placeholder="영문숫자조합 4자리이상" required><br>
	<label>비밀번호확인</label>
	<input type="password" name="pass2" required><br>
	<label>이름</label>
	<input type="text" name="name" required><br>
	<label>이메일</label>
	<input type="email" name="email" placeholder="예시 : funweb@funweb.com (@포함기입)" required><br>
	<label>생년월일</label>
	<input type="text" name="birth"  placeholder="예시 : 801231 (6자리)" maxlength="6" required><br>
	<label>성별</label>
	<input type="radio" name="gender" value="f">여	
	<input type="radio" name="gender" value="m">남<br>
</fieldset>

<!-- 아이디중복체크 -->
function winopen(){
	//새창을 열어서 페이지를 오픈 후 -> 회원아이디정보를 가지고 중복체크
	//1. 아이디가 없으면 알림창과 진행x
	if(document.fr.id.value =="" || document.fr.id.value.length < 0){
		alert("아이디를 먼저 입력해주세요")
		document.fr.id.focus();
	}else{
		//2. 회원정보아이디를 가지고 있는 지 체크하려면 DB에 접근해야한다.
		//자바스크립트로 어떻게 DB에 접근할까? => 파라미터로 id값을 가져가서 jsp페이지에서 진행하면 된다.
		window.open("joinIdCheck.jsp?userid="+document.fr.id.value,"","width=500, height=300");
	}
}

2-2. joinIdCheck.jsp생성

<%@page import="com.itwillbs.dao.MemberDAO"%>
<%@ 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>
<h2>아이디중복체크</h2>
<%//1. 한글처리 & 받아온 파라미터 변수화
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("userid");

//2. MemberDAO객체생성 -> 전달받은 정보 모두 저장
MemberDAO mdao = new MemberDAO();

//3. joinIdCheck(ID)메서드
int result = mdao.joinIdCheck(id);
if (result == 1){
	out.print("사용가능한 아이디입니다");
	//5. 아이디사용하기버튼추가 => 동기방식사용 but 요즘은 비동기방식을 더 많이사용한다
	%>
	 <input type="button" value="아이디 사용하기" onclick="result();">
	<%
	
}else if(result == 0){
	out.print("중복된 아이디입니다");
}else{
	out.print("에러 발생!!!(-1)"); 
}

%>
<!-- 4.팝업창구현  -->
<fieldset>
	<!-- <form action="" method="post">
	action속성에 값이 없으면 기본적으로 자기자신을 불러오지만 중복확인 버튼을 클릭했을때 변경되지않는다.-->	
	<form action="joinIdCheck.jsp" method="post" name="wfr">
		ID : <input type="text" name="userid" value="<%=id%>">
		<input type="submit" value="중복 확인">	 
	</form>
</fieldset>

<!-- 6. 선택된아이디는 중복확인창에서 회원가입 페이지로 정보전달  -->
 <script type="text/javascript">
    function result(){
    	//팝업창의 아이디정보를 회원가입창에 아이디정보로 전달
    	//팝업창은 기존창과 종속관계를 가지고 있으므로 opener를 이용하면 된다.
    	//alert("팝업창의 id값"+document.wfr.userid.value + ", 회원가입창의 id값 : " +opener.document.fr.id.value)
    	//6-1. 회원가입페이지의 id값에 아이디중복으로 선택된 id값을 대입.
    	opener.document.fr.id.value = document.wfr.userid.value;
    	
    	//6-3. 회원가입창 제어
    	//readonly 속성제어(커멜표기가 아닐때는 제어가 안됨 신기하네 ㅋㅋㅋ)
    	opener.document.fr.id.readOnly=true;
    	
    	//6-2. 창닫기
    	window.close();
    }
 
 </script>

</body>

2-3. MemberDAO.java에 joinIdCheck()메서드 구현

rs데이터 처리

• 1 - 사용 가능한 아이디
• 0 - 사용 불가능한 아이디
• -1 -> 에러 발생

//아이디중복체크 메서드
public int joinIdCheck(String id){
	int result = -1;
	try {
		//1. DB연결
		con = getCon();
		//2. sql 구문 & pstmt생성
		sql = "select id from fun_member where id=?";
		pstmt = con.prepareStatement(sql);
		pstmt.setString(1, id);

		//3. 실행 -> select -> rs저장
		rs = pstmt.executeQuery();

		//4. 데이터처리

		if(rs.next()){	
			result = 0;
		}else{
			result = 1;
		}

		System.out.println("아이디 중복체크결과 : "+result);
	} catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} finally {
		closeDB();
	}
	return result;
}//joinIdCheck 메서드닫음

#TILITWILL(JAVA)