JAVA 교육/myWeb
2019/09/16 myWeb 회원가입과 아이디 중복확인
조별하
2019. 9. 16. 11:12
회원가입
1. 회원가입 링크
▲ 로그인 form 에서 회원가입 text에 링크를 걸어서 회원가입 약관으로 이동하게하자
2. 회원가입 약관 폼
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="../header.jsp"%>
<!-- 본문시작 agreement.jsp-->
<div style="text-align: center">* 회/원/약/관 *</div>
<br>
<!--
onsubmit 이벤트는 form이 submit이 될 때 발생함.
실행된 함수가 false를 리턴하면 submit을 하지 않음.
-->
<form action="memberForm.jsp"
onsubmit="return send(this)">
<table border="0" cellspacing="0" cellpadding="2" align="center">
<tr align="center" height="10">
<td>
<textarea cols="55" rows="14" readonly>Community 서비스약관 (2005. 7. 18 부터 유효)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 내용 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</textarea>
</td>
</tr>
</table>
<div style="text-align: center">
<input type="checkbox" name="agree"/> 약관에 동의합니다
<input type="submit" value="회원가입"/>
<input type="button" value="취소" onclick="javascript:history.back();"/>
</div>
</form>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%> ▲ 약관 폼을 만들어서 input 태그에 submit 속성으로 회원가입 버튼을 누르면 제출이 되는데
onsubmit 속성때문에 send()함수를 거쳐 검사를 한다
3. Send()
▲ 회원가입 버튼 위에 있는 name을 'agree'를 가진 checkbox 선택을 해 주면 return반환
그렇지 않으면 경고창 출력 후 false 값 반환
4. 회원가입 폼
▲ id와 eamil을 중복 확인을 javascript로 검사해 주겠다.
중복에 대한 커맨트는 AJAX 로 구현가능
▶ 1) input 으로 onclick()을 했을때 이벤트 발생!!
<input type="text" name="id" id="id" size="15" readonly>
<input type="button" value="ID중복확인" onclick="idCheck()">
<input type="text" name="email" id="email" size="30" readonly>
<input type="button" value="Email 중복확인" onclick="emailCheck()">▶ 2) 중복확인을 누르면 팝업창 띄우기
새창만들기 (팝업창)
window.open("파일명","새창이름","다양한옵션");
function idCheck(){
//아이디 중복화인
window.open("idCheckForm.jsp","idwin","width=400 height=350")
}//idCheck()> 윈도우 창을 오픈할때, idCheckForm.jsp 파일을 정해진 옵션으로 열어준다
5. idCheckForm
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idCheckForm.jsp</title>
</head>
<body>
<div style="text-align: center;">
<h3>* 아이디 중복확인 *</h3>
<form method="post"
action=" idCheckProc.jsp"
onsubmit="return blankCheck(this)">
아이디: <input type="text" name="id" maxlength="10" autofocus>
<input type="submit" value="중복확인">
</form>
</div>
</body>
</html>
▲ 아이디를 입력한 후 , 중복확인을 눌러 form 을 제출하면 blankCheck() 함수 검사를 거쳐 idCheckProc .jsp로 넘어간다
1) blankCheck()
function blankCheck(p){
var id=p.id.value;
id=id.trim();
if(id.length<4){
alert("아이디는 4글자 이상 입력해 주세요");
return false;
}//if end
return true;
} //end
2) idCheckProc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idCheckForm.jsp</title>
</head>
<body>
<div style="text-align: center;">
<h3>* 아이디 중복확인 결과 *</h3>
<%
String id= request.getParameter("id").trim();
int cnt=dao.duplecateID(id);
out.println("입력 ID : <strong>"+id+"</strong>");
if(cnt==0){
out.println("<p>사용 가능한 아이디 입니다!!</p>");
out.println("<a href='javascript:apply(\""+id+"\")'>[적용]</a>");
}else{
out.println("<p style='color:red'>해당 아이디는 사용할 수 없습니다.</p>");
}
%>
<hr>
<a href="javascript:history.back()">[다시검색]</a>
<a href="javascript:window.close()">[창닫기]</a>
</div>
</body>
</html> ▲ 입력받은 id 값을 id 변수에 설정을 해준후, duplecateID(id) 함수로 보내 원하는 값을 불러오자
불러받은 id 값을 javascript 를 이용하여 apply메소드의 매개 변수로 보내주자
sql.append(" select count(*) as cnt ");
sql.append(" from member ");
sql.append(" where id=? ");▲ id의 개수를 불러오기 위한 SQL문
3) apply()
function apply(id){
//중복확인 id를 부모창에 적용
//부모창 opener
opener.document.regForm.id.value=id;
window.close();
}//apply() end▲ 부모창의 regForm에서 id 창에 id값을 입력해 준다
6. 우편주소
<input type="button" value="주소찾기" onclick="DaumPostcode()">▲ input 버트을 클릭하면, DaimPostcode() 함수를 찾아간다
var element_wrap = document.getElementById('wrap');
function foldDaumPostcode() {
// iframe을 넣은 element를 안보이게 한다.
element_wrap.style.display = 'none';
}
function DaumPostcode() {
// 현재 scroll 위치를 저장해놓는다.
var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
new daum.Postcode({
oncomplete: function(data) {
// 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullAddr = data.address; // 최종 주소 변수
var extraAddr = ''; // 조합형 주소 변수
// 기본 주소가 도로명 타입일때 조합한다.
if(data.addressType === 'R'){
//법정동명이 있을 경우 추가한다.
if(data.bname !== ''){
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if(data.buildingName !== ''){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('address1').value = fullAddr;
// iframe을 넣은 element를 안보이게 한다.
// (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
element_wrap.style.display = 'none';
// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
document.body.scrollTop = currentScroll;
$('#address2').focus();
},
// 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
onresize : function(size) {
element_wrap.style.height = size.height+'px';
},
width : '100%',
height : '100%'
}).embed(element_wrap);
// iframe을 넣은 element를 보이게 한다.
element_wrap.style.display = 'block';
} ▶ 다음 우편번호 API 에서 오픈소스를 가져다와 사용
http://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
▲ 오픈소스를 이용한 주소를 불러오면 Form에 있는 주소에 들어간다
회원등록
▲ 입력해준 값들은 form형식으로 제출되어 memberProc.jsp 에 보내진다
1. memberProc.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp"%>
<%@ include file="../header.jsp"%>
<!-- 본문시작 memberProc.jsp -->
<h3>* 회원가입 결과*</h3>
<%
//1)사용자가 입력 요청한 정보 가져오기
String id=request.getParameter("id").trim();
String password=request.getParameter("password").trim();
String mname=request.getParameter("mname").trim();
String tel=request.getParameter("tel").trim();
String email=request.getParameter("email").trim();
String zipcode=request.getParameter("zipcode").trim();
String address1=request.getParameter("address1").trim();
String address2=request.getParameter("address2").trim();
String job=request.getParameter("job").trim();
//2)1)의 내용을 dto 객체에 담기
dto.setId(id);
dto.setPasswd(password);
dto.setMname(mname);
dto.setTel(tel);
dto.setEmail(email);
dto.setZipcode(zipcode);
dto.setAddress1(address1);
dto.setAddress2(address2);
dto.setJob(job);
int cnt=dao.insert(dto);
if(cnt==1){
out.println("<script>");
out.println(" alert('회원가입 되었습니다!! \\n로그인 페이지로 이동합니다.')");
out.println(" location.href='loginForm.jsp'");
out.println("</script>");
}
%>
<!-- 본문 끝 -->
<%@ include file="../footer.jsp"%>▲ 1) 회원가입폼에서 입력해준 값들을 처리하기 위해 request.getParameter()로 받아와 변수에 할당해 준다
2) 변수에 들어간 값들을 dto객체에 담아주기
2. insert()
▲ memberProc.jsp 에서 매개 변수로 받아온 dto로 SQL문을 작성해 실행시켜준다.
회원 정보가 insert가 되었으면, '회원가입 되었습니다.' 라는 문구와 함께 loginForm.jsp로 이동