[Spring] Ajax 회원가입 구현

 

 

회원가입시 필요한 데이터

[1] 프로필 사진

[2] 아이디

[3] 이름

[4] 비밀번호

[5] 전화번호

[6] 이메일

[7] 이메일확인

 

 

회원가입 INSERT 처리 전 해야할 제약사항

[1] 프로필 사진을 선택하지 않았을 경우 "프로필 사진을 선택해 주세요."

[2] 아이디가 중복된 경우 "중복된 아이디 입니다."

[3] 하나라도 빈칸이 존재할 경우 "모든 항목을 빈칸없이 작성해 주시기를 바랍니다."

[4] 전화번호 양식이 맞지 않을 경우 "전화번호 양식에 맞춰 작성해 주시기를 바랍니다."

[5] 이메일 양식이 맞지 않을 경우 "이메일 양식에 맞춰 작성해 주시기를 바랍니다."

[6] 이메일과 이메일 확인란의 내용이 다를 경우 "작성된 이메일이 다릅니다. 이메일을 다시한번 확인하여 주시기를 바랍니다."

[7] 가입 버튼을 눌렀을 경우 정말로 진행하는지에 대해 묻기 "작성한 내용으로 가입이 진행됩니다. 계속하시겠습니까?"

[8] 위의 제약사항들이 모두 정상적으로 완료 된 경우에는 Controller 로 이동한다.

 

JSP > Ajax

<script>
$(function(){
    $('#joinBtn').on("click", function(){
	     var file  = document.getElementById('up').value;
	     var id    = document.getElementById('boardWriter_r').value;
	     var pass  = document.getElementById('boardWriterPW_r').value;
	     var phone = document.getElementById('boardWriterPhone_r').value;
	     var email = document.getElementById('boardWriterEmail_r').value;
	     var emailRule = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
	     var email = document.getElementById('boardWriterEmail_r').value;
	     var emailConfirm = document.getElementById("emailConfirm_r").value;

	     $.ajax({
		 type : "POST",
		 url  : "idCheck.do",
		 data : "boardWrite="+id,
		 dataType : "text",
		 success:function(data){
		     if(file == "" || file == null){
			 	alert("프로필 사진을 선택해 주세요.");
			 	return false;
		     } else if(data == "unavailable"){
				 alert("아이디가 중복되었습니다.");
				 return false;
		     } else if (id == "" || id == null || pass == "" || pass == null || phone == "" || phone == null || email == "" || email == null) {
				 alert("모든 항목을 빈칸없이 작성해주시기 바랍니다.");
				 return false;
		     } else if (phone.length < 13) {
				 alert("전화번호 양식에 맞춰 작성해주시기 바랍니다.");
				 return false;
		     } else if(!emailRule.test($("input[id='boardWriterEmail_r']").val())) {            
			 	 alert("이메일 양식에 맞춰 작성해주시기 바랍니다.");
			 	 return false;
		     } else if(email != emailConfirm){
				 alert("작성된 이메일이 다릅니다.이메일을 다시 확인하여 주시길 바랍니다.");
			 	 return false;
		     } else if(confirm("작성한 내용으로 가입이 진행됩니다. 계속하시겠습니까?")==true){
			 	 registerForm.submit();
		     }
		 }, //success end
		 error:function(error){
		     alert("error:"+error);
		 }
	     })//ajax end
	});//onclick event end
});//jQuery end
</script>

 

 

Controller

@ResponseBody
@RequestMapping(value = "/idCheck.do")
public void idCheck(MemberDTO dto, HttpServletRequest request, 
	HttpServletResponse response) throws Exception{
		
        String id = request.getParameter("boardWrite");
		dto.setBoardWriter(id);
		
		// 중복 여부 체크 결과가 0 일경우 회원가입 가능
		int result = memberService.idDuplicateCheck(dto); 

		if(result==1) { // 아이디 사용 불가능할 시 함수 탈출 후 다시 jsp로 이동
			response.getWriter().write("unavailable");
			return;
		}
}

 

response.getWriter().write("unavailable"); 를 통해서 ajax 의 success 속성에 있는 함수의 매개인자 data로 "unavailable" 이라는 문자열을 보낸다.

 

이로써 success:function(data) 이 부분에 있는 data 는 "unavailable" 를 가지게 되고 else if 의 조건문에 의해 사용할 수 없는 아이디인 경우 alert 가 나온다.

 

JSP > Ajax

success:function(data){ 					// [1] data = "unavailable"
		     if(file == "" || file == null){
			 	alert("프로필 사진을 선택해 주세요.");
			 	return false;
		     } else if(data == "unavailable"){ 		// [2] 조건문이 true 이기 때문에 실행된다.
				 alert("아이디가 중복되었습니다.");
				 return false;
		     }

 

 

모든 제약사항이 완료된 경우 이번에는 정말로 INSERT가 진행되는 컨트롤러로 이동한다.

 

 

Controller

@ResponseBody
	@RequestMapping(value = "/registerInsert.do", method=RequestMethod.POST)
	public String registerInsert(MemberDTO dto, HttpServletRequest request, HttpServletResponse response, MultipartHttpServletRequest fileRequest) throws Exception{
		
		
		String boardWriter = request.getParameter("boardWriter_r");
		String boardWriterPW = request.getParameter("boardWriterPW_r");
		
		System.out.println("================================");
		System.out.println("id:"+boardWriter);
		System.out.println("pw:"+boardWriterPW);
		System.out.println("================================");
		
		//1] 파일 테이블에 프로필 사진 INSERT
		String path = "C:\\workSpace\\itkeyProject\\ExProject\\src\\main\\webapp\\resources\\upload";
		String img = dto.getFileOriginalName().getOriginalFilename(); //파일 이름
		dto.setOriginalName(img); // DB에 넣을 파일 이름 photo.jpg
		
		System.out.println("=========================");
		System.out.println("Original img 그림 : " + img); //photo.jpg
		System.out.println("=========================");
		
		UUID fakeName = UUID.randomUUID();
		
		String target = img.substring(img.length()-4);//.jpg 또는 .png
	    img = fakeName + target; //FileChangedName 123132.jpg
	    dto.setFileChangedName(img);//ChangedName
	    dto.setFilePath(path); //filePath
	    
		File saveFile = new File(path, img); //파일을 만든다
		
	    System.out.println("=========================");
	    System.out.println("path 경로 : "+ path); //저장할 디렉토리 경로
	    System.out.println("saveFile 파일 : " + saveFile); //저장할 파일의 오리지날 경로
	    System.out.println("img 그림 : " + saveFile); //원본이름 photo.jpg
	    System.out.println("fakeName : "+fakeName); //가짜이름
	    System.out.println("=========================");
	    
	    try{dto.getFileOriginalName().transferTo(saveFile);} catch (Exception ex){}//만든 파일을 경로에 업로드한다
	    
	    memberService.addFile(dto); //SAMPLE_FILE_TB 에 INSERT
	    
		//2] 파일 테이블에서 사진 IDX 가져오기
	    int fileIdx = memberService.getFileIdx(dto);
		dto.setFileIdx(fileIdx); // 파일 인덱스
		
		//3] FILE_IDX 와 함께 회원정보테이블에 INSERT하기
		memberService.addUser(dto);
		
		
		//4] 회원가입을 완료 했다면 main 화면으로 session 값과 함께 이동
		HttpSession session = request.getSession();
		session.setAttribute("userId", dto.getBoardWriter());
		
		return "redirect:/";
	}