201105 JSP 14 - JSP 미니 프로젝트 (회원가입)

[회원가입]

memberForm.jsp

→ myscript.js 유효성 검사한 후, memberCheck()

→ memberProc.jsp 회원가입 성공한 후, loginForm.jsp로 이동

 

 

---

1. 회원가입 구현

 

1) 서버단 설계하기

DAO, DTO

 

1) memberDAO

package net.member;

import java.sql.Connection;
import java.sql.PreparedStatement;

import net.bbs.BbsDTO;
import net.utility.DBClose;
import net.utility.DBOpen;

public class MemberDAO {

	private DBOpen dbopen=null;
	private Connection con=null;
	private PreparedStatement pstmt=null;
	private StringBuilder sql=null;
	
	public MemberDAO() {
		dbopen=new DBOpen();
	}
	

	public int insert(MemberDTO dto) {
		int cnt=0;
		try {
			//1) DB연결
			con=dbopen.getConnection();
			sql=new StringBuilder();
            
			//2) INSERT SQL문 작성
			sql.append(" INSERT INTO member(id, passwd, mname, email, tel, zipcode, address1, address2, job, mlevel, mdate) ");
			sql.append(" VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, 'D1', sysdate) ");
            
			//3) SQL문 변환
			pstmt = con.prepareStatement(sql.toString());
			pstmt.setString(1, dto.getId());
			pstmt.setString(2, dto.getPasswd());
			pstmt.setString(3, dto.getMname());
			pstmt.setString(4, dto.getEmail());
			pstmt.setString(5, dto.getTel());
			pstmt.setString(6, dto.getZipcode());
			pstmt.setString(7, dto.getAddress1());
			pstmt.setString(8, dto.getAddress2());
			pstmt.setString(9, dto.getJob());
            
			//4) pstmt의 결과를 변수 cnt에 저장
			cnt=pstmt.executeUpdate();
			
		} catch (Exception e) {
			System.out.println("회원 가입 실패:" + e);
		}finally {
			DBClose.close(con, pstmt);
		}//end
		
		return cnt;
		
	}//insert() end
	
}//class end

 

 

2) memberDTO

package net.member;

public class MemberDTO {
	private String id;
	private String passwd;
	private String mname;
	private String tel;
	private String email;
	private String zipcode;
	private String address1;
	private String address2;
	private String job;
	private String mlevel;
	private String mdate;
	
	
	public MemberDTO() {}

	
	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPasswd() {
		return passwd;
	}

	public void setPasswd(String passwd) {
		this.passwd = passwd;
	}

	public String getMname() {
		return mname;
	}

	public void setMname(String mname) {
		this.mname = mname;
	}

	public String getTel() {
		return tel;
	}

	public void setTel(String tel) {
		this.tel = tel;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getZipcode() {
		return zipcode;
	}

	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}

	public String getAddress1() {
		return address1;
	}

	public void setAddress1(String address1) {
		this.address1 = address1;
	}

	public String getAddress2() {
		return address2;
	}

	public void setAddress2(String address2) {
		this.address2 = address2;
	}

	public String getJob() {
		return job;
	}

	public void setJob(String job) {
		this.job = job;
	}

	public String getMlevel() {
		return mlevel;
	}

	public void setMlevel(String mlevel) {
		this.mlevel = mlevel;
	}

	public String getMdate() {
		return mdate;
	}

	public void setMdate(String mdate) {
		this.mdate = mdate;
	}

	
	@Override
	public String toString() {
		return "MemberDTO [id=" + id + ", passwd=" + passwd + ", mname=" + mname + ", tel=" + tel + ", email=" + email
				+ ", zipcode=" + zipcode + ", address1=" + address1 + ", address2=" + address2 + ", job=" + job
				+ ", mlevel=" + mlevel + ", mdate=" + mdate + "]";
	}
	
}//class end

 

 

2. 회원가입 폼 작성하기

 

1) memberForm.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="../header.jsp"%>

<!-- 본문 시작 memberForm.jsp-->
* 회/원/가/입 *<br><br>
<form name="memfrm" id="memfrm" 
      method="post"
      action="memberProc.jsp" 
      onsubmit="return memberCheck()"><!-- myscript.js -->
<span style="color:red; font-weight: bold">* 필수입력</span>
<br>
<table class="table">
<tr>
	<th>*아이디</th>
	<td>
      <input type="text" name="id" id="id" size="15" readonly>
      <input type="button" value="ID중복확인" onclick="idCheck()">	
	</td>
</tr>
<tr>
	<th>*비밀번호</th>
	<td><input type="password" name="passwd" id="passwd" size="15" required></td>
</tr>
<tr>
	<th>*비밀번호 확인</th>
	<td><input type="password" name="repasswd" id="repasswd" size="15" required></td>
</tr>
<tr>
	<th>*이름</th>
	<td><input type="text" name="mname" id="mname" size="15" required></td>
</tr>
<tr>
	<th>*이메일</th>
	<td>
      <input type="email" name="email" id="email" size="30" readonly>
      <input type="button" value="Email중복확인" onclick="emailCheck()">	
	</td>
</tr>
<tr>
	<th>전화번호</th>
	<td><input type="text" name="tel" id="tel" size="15"></td>
</tr>
<tr>
	<th>우편번호</th>
	<td>
      <input type="text" name="zipcode" id="zipcode" size="7"  readonly>
      <input type="button" value="주소찾기"  onclick="DaumPostcode()">	
	</td>
</tr>
<tr>  
  <th>주소</th>
  <td><input type="text" name="address1" id="address1" size="45" readonly></td>
</tr>
<tr>  
  <th>나머지주소</th>
  <td><input type="text" name="address2" id="address2" size="45"></td>
</tr>
<tr>  
  <th>직업</th>
  <td><select name="job"  id="job">
          <option value="0">선택하세요.</option>
          <option value="A01">회사원</option>
          <option value="A02" selected>전산관련직</option>
          <option value="A03">학생</option>
          <option value="A04">주부</option>
          <option value="A05">기타</option>
        </select>
  </td>
</tr>
<tr>
	<td colspan="2">
		<input type="submit" value="회원가입"  class="btn btn-primary"/>
		<input type="reset"  value="취소"  class="btn btn-primary"/>
	</td>
</tr>
</table>

<!-- ----- DAUM 우편번호 API 시작 ----- -->
<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 110px;position:relative">
  <img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
</div>

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
    // 우편번호 찾기 화면을 넣을 element
    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';
    }
</script>
<!-- ----- DAUM 우편번호 API 종료----- -->

</form>

<!-- 본문 끝 -->			
<%@ include file="../footer.jsp"%>

 

 

2) memberProc.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="ssi.jsp" %>
<%@ include file="../header.jsp" %>

<!-- 본문 시작 memberProc.jsp -->
* 회/원/가/입/완/료 *<br><br>
<%
	String id=request.getParameter("id").trim();
	String passwd=request.getParameter("passwd").trim();
	String mname=request.getParameter("mname").trim();
	String email=request.getParameter("email").trim();
	String tel=request.getParameter("tel").trim();
	String address1=request.getParameter("address1").trim();
	String address2=request.getParameter("address2").trim();
	String job=request.getParameter("job").trim();
	
	dto.setId(id);
	dto.setPasswd(passwd);
	dto.setMname(mname);
	dto.setEmail(email);
	dto.setTel(tel);
	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>");
	}else{
		out.println("<p>회원가입 실패했습니다</p>");
		out.println("<p><a href='javascript:history.back()'>[다시시도]</a></p>");
	}//if end  
%>	
<!--  본문 끝 -->
<%@ include file="../footer.jsp" %>

 

 

---

[자바스크립트가 새로고침이 되지 않는 경우]

 

1) eclipse

Refresh

Validate

Project → Clean

 

Server 재시작

 

2) 인터넷

브라우저에서 쿠키 삭제

페이지 소스 보기에서 myscript.js 불러와서 function이 있는지 확인

 

 

---

[이메일 중복확인]

아이디 중복확인 참조