[쇼핑몰 구현] 2. 회원가입 구현

목록

[쇼핑몰 구현] 1. UI구성

[쇼핑몰 구현] 2. 회원가입 구현

[쇼핑몰 구현] 3. 회원목록 구현

[쇼핑몰 구현] 4. 회원정보 수정 삭제

[쇼핑몰 구현] 5. 회원정보 검색

[쇼핑몰 구현] 6. Session을 이용한 로그인 로그아웃 구현

[쇼핑몰 구현] 7. MyPage (본인 정보 수정) 구현

[쇼핑몰 구현] 8. 페이징 처리 (회원 목록)

---

목차

#1 . 필수입력 사항 유효성 검사

#2 . 아이디 형식 검사

#3 . 아이디 중복 검사

#4 . 사용자 추가

 

구성

회원가입 페이지

 

회원 테이블

 

	private int idx;
	private String name;
	private String userid;
	private String pwd;
	private String hp1;
	private String hp2;
	private String hp3;
	private String zipcode;
	private String addr1;
	private String addr2;
	private java.sql.Date indate;
	private int mileage;
	private int mstate;//회원상태(일반회원:0,정지회원1,탈퇴회원:-1);

UserVO 정보

 

 

#1 . 필수입력 사항 유효성 검사

    		//이름 체크
		if(!f.name.value){
			alert('이름을 입력하세요');
			f.name.focus();
			return;
		}
		
        	//아이디 체크
		if(!f.userid.value){
			alert('아이디를 입력하세요');
			f.userid.focus();
			return;
		}
		//비밀번호 체크
		if(!f.pwd.value){
			alert('비밀번호를 입력하세요');
			f.pwd.focus();
			return;
		}
		//비밀번호와 비밀번호 확인이 동일한지 여부 체크
		if(f.pwd.value != f.pwd2.value){
			alert('비밀번호와 비밀번호 확인 값이 달라요');
			f.pwd2.select();
			return;
		}
		
		//연락처 입력 체크
		if(!f.hp1.value || !f.hp2.value || !f.hp3.value){
			alert('연락처를 모두 입력하세요');
			f.hp1.focus();
			return;
		}

필수사항 미입력 시 해당 메시지를 보여주고 해당 칸으로 커서이동

 

 

#2 . 아이디 형식 검사

아이디 형식 검사 실패 창

 

let pttrn=/^[a-zA-Z]{1}[\w_!]{3,7}$/

영문자, 숫자, !, _로 4~8자 이내인 아이디 형식 설정

	function id_check(){
		let val = $('#userid').val();
		if(!val){
			alert('아이디를 입력하세요');
			$('#userid').focus();
			return false;
		}
		let pttrn=/^[a-zA-Z]{1}[\w_!]{3,7}$/
		if(!pttrn.test(val)){
			alert('아이디 형식에 맞지 않아요(영문자,숫자,!,_로 4~8자 이내)');
			$('#userid').select();
			return false;
		}
		return true;
		
	}

아이디 중복 검사를 위한 새로운 페이지를 생성하여 값을 입력받고 자체 유효성 검사 및 아이디 형식에 어긋날 시 메시지 출력

 

 

#3 . 아이디 중복 검사

아이디 중복 검사 성공 창

 

    //--아이디 중복 검사
    public boolean idCheck(String userid) throws SQLException{
		try {
			con=DBUtil.getCon();
			
			String sql = "select idx from member where userid = ?";
			
			ps = con.prepareStatement(sql);
			ps.setString(1, userid);
			rs = ps.executeQuery();
			boolean b = rs.next();
			
			return !b;
		}finally {
			close();
		}
		
	}

    boolean isUse=dao.idCheck(userid);

primary key인 idx값을 통해 입력한 아이디가 존재하지 않을 경우 "true" 존재할 경우 "false"값을 반환

 

function setId(uid){

		opener.document.f.userid.value=uid;

		self.close();
	}

아이디가 테이블에 존재하지 않을시 입력 아이디를 부모창인 회원가입 페이지의 아이디 value값으로 전달

 

 

#4 . 사용자 추가

회원가입 성공 창

 

    //--계정 생성
    public int createUser(UserVO user) throws SQLException{
		try {
			con=DBUtil.getCon();
			
			String sql = "insert into member"
		        +" values (member_seq.nextval, ?, ?, ?, ?, ?, ?, ?, ?, ?, sysdate, 1000, 0)";
			
			ps = con.prepareStatement(sql);
			ps.setString(1, user.getName());
			ps.setString(2, user.getUserid());
			ps.setString(3, user.getPwd());
			ps.setString(4, user.getHp1());
			ps.setString(5, user.getHp2());
			ps.setString(6, user.getHp3());
			ps.setString(7, user.getZipcode());
			ps.setString(8, user.getAddr1());
			ps.setString(9, user.getAddr2());
			
			int cnt = ps.executeUpdate();
			
			return cnt;//업데이트한 값을 반환
			
		}finally {
			close();
		}
		
	}

회원가입 성공 시 1 실패 시 -1 값을 반환

 

<%
	int n = userDao.createUser(user);
	String msg=(n>0)?"회원가입 성공! 로그인 페이지로 이동합니다":"회원가입 실패";
	String loc=(n>0)?"../login/login.jsp":"javascript:history.back()";
%>

<script>
	alert('<%=msg%>');
	location.href='<%=loc%>';
</script>

회원가입 성공 여부에 따라 메시지를 출력하고 성공 시 로그인 페이지 실패 시 회원가입 페이지로 이동