2019/09/16 myWeb 회원가입과 아이디 중복확인

2019년 09월 16일

조별하
작성자
2019.09.16.: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>
	&nbsp;&nbsp;
	<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로 이동

'JAVA 교육 > myWeb' 카테고리의 다른 글

2019/10/01 EL과 JSTL (0)	2019.10.01
2019/09/20 메일보내기 (0)	2019.09.20
2019/09/19 myWeb 포토 갤러리 (0)	2019.09.19
2019/09/18 [파일 첨부] (0)	2019.09.18
2019/09/17 myweb 쿠키(아이디 저장) (0)	2019.09.17

다음 글이 없습니다.

이전 글이 없습니다.