[Mybatis + Ajax] 회원가입 구현해보기

 

 

** 아이디와 비밀번호를 구현해보니 다른 항목은 응용이라 쉽게 구현하였다.

 

** 최종 가입버튼을 눌렀을 때 모든 항목이 이상이 없어하는데 그럼 마지막에 항목마다 중복확인이나 정규표현식을 다시 해야하나? 에 대해 고민을 조금 했었다. 구현은 되겠지만 너무 비효율적인 코드일 것 같아서다.

 

** 고민 끝에 boolean형의 Flag라는 것을 만들어 항목마다 오케이가 되었을 때 True값을 넣고 마지막 최종 가입버튼에서 모든 항목의 Flag가 true임을 확인한 후에야 ajax로 넘기는 식으로 구현해보았다.

 

 

[Mybatis + Ajax] 아이디 중복 확인 구현해보기

[Javascript] 정규표현식 유효성 검사 + 비밀번호 재확인 구현해보기

---

 

 

   0. 간단 프로세스   

 

1 ) JSP -> 모든 항목의 Flag가 True임을 확인하고 항목의 값들을 ajax 통신으로 컨트롤러에 넘겨준다.

2 ) ServletController -> 받은 값들을 토대로 VO객체를 만들어서 DAO의 join메서드의 인자로 넣고 메서드를 호출함.

3 ) DAO -> 받은 VO객체에서 변수들의 값들을 각각 Map에 넣어주고 Mybatis의 insert메서드로 mapper에 넘김.

4 ) Mapper - > 받은 값들로 insert문 실행, 호출한 곳에 결과값 int형 반환. (성공시 1, 실패시 0)

5 ) DAO -> 반환받은 결과값에 따라 컨트롤러에 boolean형 반환. (성공시 true, 실패시 false)

6 ) ServletController -> 반환받은 boolean형에 따라 map에 키값 chk를 jsp로 반환.

7 ) JSP -> 반환받은 chk 값에 따라 적절할 이동과 알림.

 

---

 

   1. join.jsp   

<!-- 회원가입 컨테이너 -->
	<div class="container">
		<div class="col-lg-4">
			<!-- 점보트론 -->
			<div class="jumbotron" style="padding-top:20px;">
				<form>
					<h3 style="text-align: center;">회원가입 화면</h3><br/>
					<!-- 아이디 -->
					<label class="control-label" for="id">아이디</label>
					<div class="form-group has-feedback">
						<input type="text" id="userID" class="form-control"  name="userID" maxlength="20">
						<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
						<span id="idErr" style="display :none; color:red;" class="help-block" > 이미 존재하는 아이디입니다. </span>     			       
						<span id="idRule" style="display :none; color:red;" class="help-block" > 아이디는 3~10자의 영문자와 숫자를 조합을 입력해주세요. </span>     			       
					</div>
					<!-- 비밀번호 -->
					<label class="control-label" for="pw">비밀번호</label>
					<div class="form-group has-feedback" >
						<input type="password" id="userPW" class="form-control"  name="userPassword" maxlength="20">
						<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
						<span id="pwRule" style="display :none; color:red;" class="help-block" > 대소문자, 숫자, 특수문자 중 세가지 조합 이상 8자리~16자리까지</span>     			       
					</div>
					<!-- 비밀번호 재입력 -->
					<label class="control-label" for="id">비밀번호 확인</label>
					<div class="form-group has-feedback">
						<input type="password" id="r_userPW" class="form-control"  name="userPassword" maxlength="20">
						<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
						 <span id="r_pwRule" class="help-block" style="display :none; color:red;"> 비밀번호와 일치하지 않습니다. 다시 입력해 주세요.</span>
					</div>
					<!-- 이름 -->
					<label class="control-label" for="id">이름</label>
					<div  class="form-group has-feedback">
						<input type="text" class="form-control"  id="userName" name="userName" maxlength="20">
						<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
						<span id="nameRule" class="help-block" style="display :none; color:red;"> 올바른 한글 이름이 아닙니다.</span>
					</div>
					<!-- 성별 -->
					<label class="control-label" for="gender">성별 (선택사항)</label>
					<div  class="form-group">
						<select class="form-control" id="userGender">
						  <option value="no" selected>성별</option>
						  <option value="남자">남자</option>
						  <option value="여자">여자</option>
						</select>
					</div>
					<!-- 이메일 -->
					<label class="control-label" for="email">이메일</label>
					<div  class="form-group has-feedback">
						<input type="email"id="userEmail"  class="form-control" name="userEmail" maxlength="20">
						<span class="glyphicon glyphicon-ok form-control-feedback" style="display :none"></span>
						<span id="emailRule" style="display :none; color:red;" class="help-block" > 올바른 이메일 형식이 아닙니다. </span>
					</div>
					<input type="button" id="join" class="btn btn-primary form-control" value="회원가입">
				</form>
			</div>
		</div>
	</div>

 

• 이전 게시글인 아이디와 비밀번호 때처럼 모든 항목에는 태그내 글리피콘과 Rule을 알려주는 span태그가 있다.
• Rule span태그는 보이지 않다가 정규표현식 등에 부합하지 않는 경우 뜨도록 javascript에서 코드를 짰다.
• 요즘은 성별은 필수 입력사항이 아닌 곳들이 많아 선택사항으로 바꾸었다.
•  

---

<script type="text/javascript">

	var id;
	var pw;
	var r_pw;
	var name;
	var gender;
	var email;
	
	var idFlag = false;
	var pwFlag = false;
	var pwEqFlag = false;
	var nameFlag = false;
	var genFlag = false;
	var emailFlag = false;


	//성공 상태로 바꾸는 메서드
	function changeSuccess(sel){
		$(sel)
		.parent()
		.removeClass("has-error")
		.addClass("has-success")
		 .find(".glyphicon")
		 .removeClass("glyphicon-remove")
	     .addClass("glyphicon-ok")
	     .css("color", "#3CA03C")
	     .show();
	};
	
	//에러 상태로 바꾸는 메서드
	function changeError(sel){
		$(sel)
		.parent()
		.removeClass("has-success")
		.addClass("has-error")
		 .find(".glyphicon")
		 .removeClass("glyphicon-ok")
	     .addClass("glyphicon-remove")
	     .css("color", "#FF607F")
	     .show();
	};

	////////////////////////////////////////////////////////////////////////////////////
    <!-- 이름 -->
    $("#userName").blur(function() {
		 namecheck();
	});
	
    var namecheck = function() {
		name = $("#userName").val();
		
		//한글만 가능. 모음 x
		var nameReg = /^[가-힣]+$/;
		if(nameReg.test(name) == false){
			$("#nameRule").show();
			$("#userName").focus();
			changeError("#userName");
			nameFlag = false;
		}else{
			changeSuccess("#userName");
			$("#nameRule").hide();
			nameFlag = true;
		}
    }
	////////////////////////////////////////////////////////////////////////////////////
	<!-- 이메일 -->
	$("#userEmail").blur(function() {
		 emailcheck();
	});
	
	var emailcheck = function() {
		email = $("#userEmail").val();
		
		var emailReg = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
		
		if(emailReg.test(email) == false){
			$("#emailRule").show();
			$("#userEmail").focus();
			changeError("#userEmail");
			emailFlag = false;
		}else{
			changeSuccess("#userEmail");
			$("#emailRule").hide();
			emailFlag = true;
		}
   }
</script>

 

• 아이디와 패스워드는 이전 게시물에서 다뤘으니 전부 뺐고 크게 설명하지 않겠다. 남은 항목들도 거의 비슷하다.
• 칸에서 blur되었을 때 이벤트가 작동하며 정규표현식에 부합해야만 부트스트랩에 성공불이 들어오며 Flag에 true가 떨어진다. 부합하지 못하면 실패불이 들어오며 Flag가 false상태이므로 이후 가입 진행이 되지 않는다.

이메일 검증

 

이름 검증

---

<script type="text/javascript">
    ////////////////////////////////////////////////////////////////////////////////////
    //회원가입 시도
    $("#join").click(function() {
		
    	if(idFlag == false){
    		$("#userID").focus();
    		return;
    	}
    	
    	if(pwFlag == false){
    		$("#userPW").focus();
    		return;
    	}
    	
    	if(pwEqFlag == false){
    		$("#r_userPW").focus();
    		return;
    	}
	
    	if(nameFlag == false){
    		$("#userName").focus();
    		return;
    	}
    	
    	if(emailFlag == false){
    		$("#userEmail").focus();
    		return;
    	}
	 	
    	gender = $("#userGender option:selected").val();
  
    	if(idFlag==true&&pwFlag==true&&pwEqFlag==true&&nameFlag==true&&emailFlag == true){
		
    		var data = { "userID" : id ,
                            "usrPW" : pw,
                            "userName" : name,
                            "userGender" : gender,
                            "userEmail" : email,
                           }		
    		$.ajax({
    			url : "./join2",
    			dataType: "json",
    			type: "Post",
    			data: data

    		}).done(function(data) {
				if(data.chk == "1"){
					alert("회원가입이 성공적으로 완료되었습니다!");
					location.href = "main";
				}else{
					alert("회원가입이 실패했습니다 ㅜ");				
				}
    			
			}).fail(function(err) {
				console.log(err);
			});
    	}	
	});

</script>

• 모든 항목 작성 후 최종 회원가입 버튼을 누르면 발생하는 이벤트이다.
• ajax로 보내기 전 모든 flag가 true인지 두 번 확인한다. 
• 하나라도 false이면 return시켜 더이상 가입진행이 되지 않고 false인 항목에 focus를 두어 수정하도록 유도한다.
• 모든 flag가 true였을 때 ajax로 값을 보낸다. 민감한 개인정보인만큼 Post로 보낸다. 
• 컨트롤러로부터 chk값이 실패시 0, 성공시 1이 리턴될 것이다.

  

---

 

    2. JoinControl.java - doPost()   

@WebServlet("/join2")
public class JoinControl2 extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String userID = request.getParameter("userID");
		String userPassword = request.getParameter("userPW");
		String userName = request.getParameter("userName");
		String userGender = request.getParameter("userGender");
		String userEmail = request.getParameter("userEmail");
		
		User user = new User(userID, userPassword, userName, userGender, userEmail);
		boolean bchk = UserDao2.getInstance().join(user);  
		HashMap<String, String> map = new HashMap<String, String>();
		
		if(bchk == true) 
			map.put("chk", "1" );
		else 
			map.put("chk", "0");
		
		String gson = new Gson().toJson(map);
		response.getWriter().write(gson);	
		System.out.println(gson);
			
	}
}

 

• ajax로 보낸 정보들을 이쪽에서 받는다.
• VO객체인 User에 담아 UserDao join메서드의 인자로 넣어주고 boolean값을 반환받는다.
• bchk가 true이면 성공적으로 회원가입이 되었고 false라면 실패한 경우이다. 
• HashMap의 key값으로 chk를, value값을 0혹은 1을 넣어주고 gson라이브러리를 통해 json화 시킨 후 리턴 시켜준다.

 

---

 

   3. UserDao.java - join()   

public class UserDao2 {

	private static UserDao2 bao;
	SqlSessionFactory factory;
	
	private UserDao2() {
		factory = MybatisConnector.getInstance().getFactory();
	}
	
	public static UserDao2 getInstance() {
		if(bao == null) {
			bao = new UserDao2();
		}
		return bao;
	}

	//회원가입
	public boolean join(User user) {
		
		boolean chk = false;	
		SqlSession session = factory.openSession();
		HashMap<String, String> map = new HashMap<String, String>();
		map.put("userID", user.getUserID());
		map.put("userPW", user.getUserPassword());
		map.put("userName", user.getUserName());
		map.put("userGender", user.getUserGender());
		map.put("userEmail", user.getUserEmail());
		
		int cnt = session.insert("user.join", map);
		
		if(cnt > 0) 
			chk = true;
		return chk;
	}	
}

 

• 인자로 받은 User의 정보들을 빼고 map에 담아준 후 inset 메서드를 실행할 때 인자로 넣어준다.
• insert메서드는 mapper의 insert문이 성공시 1을 반환할 것으로 cnt가 1일 때 chk값에 true를 넣어주고 리턴한다.

 

---

 

   4. userMapper.xml   

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="user">

 	<insert id="join" parameterType="java.util.Map">
 		insert into user (userID, userPassword, userName, userGender, userEmail) 
 			values( #{userID}, #{userPassword}, #{userName}, #{userGender}, #{userEmail} );
 	</insert>

</mapper>

• 인자로 Map이 넘어왔을 것이다. #{키값} 설정 해두면 value값이 알아서 꽂힌다.
• insert문이 성공시 1을 실패시 0을 호출한 곳으로 반환할 것이다.

 

---

 

   5. 결과 화면