JSP10 minutes read (About 1497 words)  0 visits

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

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

1. 회원가입기능 구현

1-1. joinForm.jsp 추가작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%
//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을 이용하여 받아오는 것이 성능에 좋다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//회원가입메서드
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을 이용한 비동기처리방식을 사용한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!-- 필수입력사항 -->
<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생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<%@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 -> 에러 발생
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//아이디중복체크 메서드
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 메서드닫음
#
Follow

Categories

Recent

Archives

Tags

APK1
Backjoon12
Book1
BookReview1
C#3
CORS1
CSRF1
ChatGPT1
Codeup10017
DBeaver1
DB설계1
DataStructure5
Discord1
Docker2
EL2
Eclipse10
Facebook1
GIT31
GeekNews1
Gson4
HTML&CSS30
Hackerrank10
Hexo6
HttpEntity1
ITWILL(JAVA)263
IntelliJ1
JAVA1
JSON2
JSTL4
JavaScript1
Journal22
Leetcode6
List11
Lombok1
MSA1
MariaDB9
Moment.js3
MyBatis6
MySQL11
NoSQL1
Node.js3
Oracle48
Port2
Programmers2
RESTfulAPI3
Redis1
RestTemplate2
Review20
SQLD2
SQL퀴즈2
STS7
SVN4
SpringBoot6
TIL359
Tomcat5
VanillaJS2
VueJS2
WEB2
Web Development1
Web Game9
Websocket3
YouTube1
ajax1
jQuery13
java.util.Calendar1
xAPI1
구글애드센스1
디자인패턴4
생활코딩5
설치1
오늘또못알아듣고말았습니다14
오류일지18
정규표현식3
차이17
패스트캠퍼스(초격차Java/Spring)12
패스트캠퍼스(파이썬웹개발)37
회고록10

Advertisement

×