아이디 중복검사 기능

이번장에서는 회원가입을 할때 아이디 중복 체크하는 기능을 만들어보겠습니다.

 

 

1. userMapper.xml 

 

<select id="idOverlap" resultType="int">
   	select count(identification)
   	from user
   	where identification = #{identification}
</select>

 

해당 쿼리는 아이디를 조건으로 user 테이블에서 카운트를하는데 보시다시피 조회결과 타입을

resultType="int"으로 설정해주어 Dao, Service, Controller에서 쓰일 예정입니다.

 

2. UserDAO 작성

 

package kr.co.web.persistence;

import kr.co.web.domain.UserVO;

public interface UserDAO {

	public void register(UserVO vo) throws Exception;
	public UserVO login(UserVO vo) throws Exception;
	public void modify(UserVO vo) throws Exception;
	public void remove(UserVO vo) throws Exception;
    
   	// 아이디 중복체크
	public int idOverlap(UserVO vo) throws Exception;
} 

 

package kr.co.web.persistence;

import javax.inject.Inject;

import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

import kr.co.web.domain.UserVO;

@Repository
public class UserDAOImpl implements UserDAO{
	
	@Inject
	private SqlSession session;
	
	private static final String NS = "userMapper";
	private static final String REGISTER = NS + ".register";
	private static final String LOGIN = NS + ".login";
	private static final String LOGINBCRYPT = NS + ".loginBcrypt";
	private static final String MODIFY = NS + ".modify";
	private static final String REMOVE = NS + ".remove";
    
     	 //아이디 중복체크
	private static final String IDOVERLAP = NS + ".idOverlap";
	
	@Override
	public void register(UserVO vo) throws Exception {
		session.insert(REGISTER, vo);
	}
	
	@Override
	public UserVO login(UserVO vo) throws Exception {
		return session.selectOne(LOGINBCRYPT, vo);
	}
	
	@Override
	public void modify(UserVO vo) throws Exception {
		session.update(MODIFY, vo);
	}
	
	@Override
	public void remove(UserVO vo) throws Exception {
		session.delete(REMOVE, vo);
	}
	
    
     	 //아이디 중복체크
	@Override
	public int idOverlap(UserVO vo) throws Exception {
		int result = session.selectOne(IDOVERLAP, vo);
		return result;
	}
	
}

 

Service에서 보내주는 파라미터들을 DAO에서 받아주고

받은 파라미터는 userMapper.xml에 id가 idOverlap인 곳으로 보내준 후 

쿼리를 조회한 결과는 result로 return합니다.

 

3. UserService 작성

 

package kr.co.web.service;

import kr.co.web.domain.UserVO;

public interface UserService {

	public void register(UserVO vo) throws Exception;
	public UserVO login(UserVO vo) throws Exception;
	public void modify(UserVO vo) throws Exception;
	public void remove(UserVO vo) throws Exception;
    
    	// 아이디 중복체크
	public int idOverlap(UserVO vo) throws Exception;
}

 

package kr.co.web.service;

import javax.inject.Inject;

import org.springframework.stereotype.Service;

import kr.co.web.domain.UserVO;
import kr.co.web.persistence.UserDAO;

@Service
public class UserServiceImpl implements UserService {
	
	@Inject
	private UserDAO user;
	
	@Override
	public void register(UserVO vo) throws Exception {
		user.register(vo);
	}
	
	@Override
	public UserVO login(UserVO vo) throws Exception {
		return user.login(vo);
	}
	
	@Override
	public void modify(UserVO vo) throws Exception {
		user.modify(vo);
	}
	
	@Override
	public void remove(UserVO vo) throws Exception {
		user.remove(vo);
	}
	
    
   	 // 아이디 중복체크
	@Override
	public int idOverlap(UserVO vo) throws Exception {
		int result = user.idOverlap(vo);
		return result;
	}
}

 

4. UserController 작성

 

@ResponseBody
@RequestMapping(value="/idOverlap", method = RequestMethod.POST)
public int idOverlap(UserVO vo) throws Exception {
	int result = service.idOverlap(vo);
	return result;
}

 

UserController에 idOverlap요청이 들어오면 파라미터를 UserService로 보내주고 조회한 결과를 

result로 넣어 반환해줍니다.

이렇게 하게되면 결과가 있는 경우에는 1이 들어가고 없으면 0이 들어가게 됩니다.

 

@RequestMapping(value = "/register", method = RequestMethod.POST)
public String registerPOST(UserVO vo, RedirectAttributes ra) throws Exception {
	logger.info("registerPOST");
		
	int result = service.idOverlap(vo);
		
	System.out.println("중복은 1 아니면 0 = " + result );
	if(result == 1) {
		ra.addFlashAttribute("result", "registerFalse");
		return "/user/register";
	} else if(result == 0) {
		service.register(vo);
		ra.addFlashAttribute("result", "registerOK");
	}
		
	return "redirect:/";
}

 

아이디 중복체크를 마친 후 회원가입 요청이 들어오면 결과가 1이면 아이디가 중복이기 때문에

다시 register.jsp로 보내고,

결과가 0이면 중복된 아이디가 없는것이기 때문에 service.register(vo)를 실행시키고

해당 코드가 실행되면 redirect:/ 처리로 인해 로그인 페이지로 보내줍니다.

 

5. register.jsp 버튼 속성, script 추가

 

<form method="post" autocomplete="off">
 	
 	<div>
 		<label for="identification">아이디</label>
 		<input type="text" id="identification" name="identification" />
 		<button type="button" id="idOverlap" onclick="fn_idOverlap();">중복확인</button>
 	</div>
 	
 	<div>
 		<label for="password">비밀번호</label>
 		<input type="password" id="password" name="password" />
 	</div>
 	
 	<div>
 		<label for="name">이름</label>
 		<input type="text" id="name" name="name" />
 	</div>
 	
 	<div>
 		<button type="submit" id="submit" disabled="disabled">가입</button>  // disabled 추가
 	</div>
 	
</form>

 

button 태그에 disable이라는 속성을 추가해주는데요.

이는 default 값으로  비활성화를 시켜줍니다.

즉, 기본값이 disabled(비활성화)이기 때문에 회원가입 버튼이 눌러지지 않고,

아이디 중복체크를 통해 중복된 아이디가 없으면 disabled이라는 속성을 제거해 다시 활성화 시켜줍니다.

 

 <script type="text/javascript">
	
	function fn_idOverlap() {
		$.ajax({
			url : "/user/idOverlap",
			type : "post",
			dataType : "json",
			data : { "identification" : $("#identification").val()},
			success : function(data) {
				if(data == 1) {
					alert("중복된 아이디 입니다.");
					$("#submit").attr("disabled", "disabled");
				} else if(data == 0) {
					alert("사용가능한 아이디 입니다.");
					$("#submit").removeAttr("disabled");
				}
			}
		})
	}

 </script>

 

아이디의 중복처리를 하는 과정을 ajax로 작성했습니다.

 

url : 요청하는 url 설정

data : identification 이름으로 id가 identification인 값을 가져와 데이터를 url로 넘김

success : 성공하면 Controller에서 요청받은 /user/idOverlap의 반환값을 fuction(data)의 data에 값을 넣어줌

 

data가 1이면 중복되었다는 의미이기 때문에 alert을 이용해 '중복된 아이디' 라고 경고창을 띄워주고,

마찬가지로 data가 0이면 중복되지 않았기 때문에 '사용가능한 아이디' 라고 경고창을 띄워줍니다.

 

그리고 아까 버튼을 추가했죠?

 

ajax로 아이디가 중복되면 

$("#submit").attr("disabled", "disabled");

다음과 같이 비활성화 시켜주고

 

아이디가 중복되지 않았으면

$("#submit").removeAttr("disabled");

removeAttr속성을 이용하여 disabled을 삭제하여 다시 활성화 시키는 의미입니다.

 

이제 확인 해보도록 하겠습니다.

 

 

아까 버튼의 기본값을 disabled로 주었기 때문에 비활성화가 된 상태입니다.

 

중복된 아이디를 입력하면 

 

 

마찬가지로 중복되었기 때문에 버튼이 비활성화 되었죠?

 

이제 중복되지 않은 아이디를 입력하겠습니다.

 

 

ajax에서 중복된 아이디가 없을 때 disabled을 삭제하여 가입버튼이 활성화 되었습니다!

 

 

저는 이렇게 버튼을 비활성화 시켰는데요

이렇게 한 이유는 컨트롤러에서 중복되면 model값으로 실패했다는 메세지를 주고싶었는데

이상하게 메세지가 뜨지 않아서 이렇게 구현하게 되었습니다.