ajax_실시간 아이디 중복 체크 구현

2018. 2. 16. 15:53ㆍ프로그래밍언어/JavaScript


ajax를 이용한 실시간 아이디 중복 체크 구현


1. 개발 환경



1. Spring 4.3.7

2. tomcat 8.0

3. oracle




2. 프로젝트 구조




3. UserDTO, UserDAO 구현

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package com.web.nuri.user;
 
public class UserDTO {
    private String id;
    private String pw;
    private String pwConfirm;
    private String nickName;
    private int grade;
    private int isAdmin;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getPw() {
        return pw;
    }
    public void setPw(String pw) {
        this.pw = pw;
    }
    public String getPwConfirm() {
        return pwConfirm;
    }
    public void setPwConfirm(String pwConfirm) {
        this.pwConfirm = pwConfirm;
    }
    public String getNickName() {
        return nickName;
    }
    public void setNickName(String nickName) {
        this.nickName = nickName;
    }
    public int getGrade() {
        return grade;
    }
    public void setGrade(int grade) {
        this.grade = grade;
    }
    public int getIsAdmin() {
        return isAdmin;
    }
    public void setIsAdmin(int isAdmin) {
        this.isAdmin = isAdmin;
    }
    @Override
    public String toString() {
        return "UserDTO [id=" + id + ", pw=" + pw + ", nickName=" + nickName + ", grade=" + grade + ", isAdmin="
                + isAdmin + "]";
    }
    
}
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
package com.web.nuri.userImpl;
 
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.web.nuri.user.UserDTO;
import com.web.nuri.user.UserService;
 
@Repository("UserDAO")
public class UserDAO{
    
    @Autowired
    private SqlSessionTemplate mybatis;
    
    public UserDAO() {
        // TODO Auto-generated constructor stub
        System.out.println("UserDAO 객체 생성");
    }
    public void updateUser(UserDTO udto){
        System.out.println("UserDAO.updateUser() 호출");
        mybatis.update("UserDAO.updateUser",udto);
    }
    public void deleteUser(UserDTO udto){
        System.out.println("UserDAO.deleteUser() 호출");
        mybatis.delete("UserDAO.deleteUser",udto);
    }
    public void insertUser(UserDTO udto) {
        System.out.println("UserDAO.insertUser() 호출");
        mybatis.insert("UserDAO.insertUser",udto);
    }
    public UserDTO getUser(UserDTO udto){
        System.out.println("UserDAO.getUser() 호출");
        return (UserDTO)mybatis.selectOne("UserDAO.getUser",udto);
    }
    public UserDTO getNickNameUser(UserDTO udto) {
        System.out.println("UserDAO.getNickNameUser() 호출");
        return (UserDTO)mybatis.selectOne("UserDAO.getNickNameUser",udto);
    }
    /*public int confirmUser(UserDTO udto) {
        System.out.println("UserDAO.confirmUser() 호출");
        return mybatis.selectOne("UserDAO.confirmUser",udto);
    }*/
}
 
cs




4. UserService, UserServiceImpl 구현


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.web.nuri.user;
 
public interface UserService {
 
    void updateUser(UserDTO udto);
 
    void deleteUser(UserDTO udto);
 
    void insertUser(UserDTO udto);
 
    UserDTO getUser(UserDTO udto);
    
    UserDTO getNickNameUser(UserDTO udto);
    //int confirmUser(UserDTO udto);
 
}
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package com.web.nuri.userImpl;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import com.web.nuri.user.UserDTO;
import com.web.nuri.user.UserService;
 
@Service
public class UserServiceImpl implements UserService {
    
    @Autowired
    private UserDAO udao;
    public UserServiceImpl() {
        // TODO Auto-generated constructor stub
        System.out.println("UserServiceImpl() 객체 생성");
    }
    @Override
    public void updateUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:updateUser() 호출");
        udao.updateUser(udto);
    }
 
    @Override
    public void deleteUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:deleteUser() 호출");
        udao.deleteUser(udto);
    }
 
    @Override
    public void insertUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:insertUser() 호출");
        udao.insertUser(udto);
    }
 
    @Override
    public UserDTO getUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:getUser() 호출");
        return udao.getUser(udto);
    }
    @Override
    public UserDTO getNickNameUser(UserDTO udto) {
        // TODO Auto-generated method stub
        return udao.getNickNameUser(udto);
    }
 
    /*@Override
    public int confirmUser(UserDTO udto) {
        // TODO Auto-generated method stub
        System.out.println("UserServiceImpl:confirmUser() 호출");
        return udao.confirmUser(udto);
    }*/
 
}
 
cs


UserService클래스와 그 구현 클래스인 UserServiceImpl를 구현한 이유는 컨트롤러에서 직접적으로 DAO에 접근을 하지 않고 Service 클래스를 한번 거쳐 비즈니스 로직을 수행하게 됨으로 DAO의 변경이 있더라도 컨트롤러 클래스의 코드의 변경은 최소화 되기 때문에 유지보수 능력이 향상 되기때문입니다.



5. UserController 구현


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package com.web.nuri.controller;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
 
import com.web.nuri.user.UserDTO;
import com.web.nuri.user.UserService;
 
@Controller
public class UserController {
    
    @Autowired
    private UserService userService;
    
    @RequestMapping(value="/login.do",method=RequestMethod.GET)
    public ModelAndView loginView(ModelAndView mav) {
        System.out.println("Controller.loginView() 호출");
        mav.setViewName("login");
        return mav;
    }
    @RequestMapping(value="/insertUser.do",method=RequestMethod.GET)
    public ModelAndView insertUserView(ModelAndView mav) {
        System.out.println("Controller.insertUserView() 호출");
        mav.setViewName("insertUser");
        return mav;
    }
    @ResponseBody
    @RequestMapping(value="/checkId.do")
    public int idCheck(UserDTO udto,ModelAndView mav) {
        System.out.println("Controller.idCheck() 호출");
        int result=0;
        UserDTO user=userService.getUser(udto);
        if(user!=null) result=1;
        else System.out.println("아이디사용가능");
        return result;
    }
    @ResponseBody
    @RequestMapping(value="/checkNickName.do")
    public int nickNameCheck(UserDTO udto,ModelAndView mav) {
        System.out.println("Controller.nickNameCheck() 호출");
        int result=0;
        UserDTO user=userService.getNickNameUser(udto);
        if(user!=null) result=1;
        return result;
    }
    @RequestMapping(value="/insertUser.do",method=RequestMethod.POST)
    public ModelAndView insertUser(UserDTO udto,ModelAndView mav) {
        System.out.println("Controller.insertUser() 호출");
        userService.insertUser(udto);
        mav.setViewName("login");
        return mav;
    }
}
 
cs


여기서 ajax의 실시간 아이디 중복체크에 쓰이는 메소드는 "/checkId.do"(동일 아이디가 있는지 체크)와 "/checkNickName.do"(동일 닉네임이 있는지 체크) url 매핑입니다. 각 메소드에 @ResponseBody 어노테이션이 붙은 이유는 jsp파일에서 넘어온 데이터를 이용해 로직을 처리하고 다시 jsp로 가공된 데이터를 넘길때 자동으로 json객체로 데이터를 바인딩해서 보내기 위해 붙인 어노테이션입니다.




6. pom.xml


1
2
3
4
5
6
            <!-- jackson2 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.2</version>
        </dependency>
cs


Controller에서 @ResponseBody를 이용하기 위해 jackson2 라이브러리를 받아줍니다.

(기타 applicationContext.xml , presentation-layer.xml 등의 스프링 설정파일은 Spring 카테고리의 Spring으로 회원가입을 구현한 글을 참고하시면 됩니다.)



7. insertUser.jsp


55
5657
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
    <style>
    body {
        background: #f8f8f8;
        padding: 60px 0;
    }
    
    #login-form > div {
        margin: 15px 0;
    }
 
</style>
<title>회원가입</title>
</head>
<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <div class="panel-title">환영합니다!</div>
                </div>
                <div class="panel-body">
                    <form action="insertUser.do" id="login-form" method="post">
                        <div>
                            <input type="email" class="form-control id" name="id" placeholder="Email" oninput="checkId()" id="checkaa" autofocus>
                        </div>
                        <div>
                            <input type="password" class="form-control pass" name="pw" placeholder="Password" oninput="checkPwd()">
                        </div>
                        <div>
                            <input type="password" class="form-control pass" name="pwConfirm" placeholder="Confirm Password" id="repwd" oninput="checkPwd()">
                        </div>
                        <div>
                            <input type="text" class="form-control nickname" name="nickName" id="nickname" placeholder="Your Nickname" oninput="checkNick()" autofocus>
                        </div>
                        <div>
                            <button type="submit" class="form-control btn btn-primary signupbtn" disabled="disabled">회원가입</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
 
    //아이디와 비밀번호가 맞지 않을 경우 가입버튼 비활성화를 위한 변수설정
    var idCheck = 0;
    var nickCheck = 0;
    var pwdCheck = 0;
    //아이디 체크하여 가입버튼 비활성화, 중복확인.
    function checkId() {
        var inputed = $('.id').val();
        console.log(inputed);
        $.ajax({
            data : {
                id : inputed
            },
            url : "checkId.do",
            success : function(data) {
                if(inputed=="" && data=='0') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#checkaa").css("background-color", "#FFCECE");
                    idCheck = 0;
                } else if (data == '0') {
                    $("#checkaa").css("background-color", "#B0F6AC");
                    idCheck = 1;
                    if(idCheck==1 && pwdCheck == 1) {
                        $(".signupbtn").prop("disabled", false);
                        $(".signupbtn").css("background-color", "#4CAF50");
                    } 
                } else if (data == '1') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#checkaa").css("background-color", "#FFCECE");
                    idCheck = 0;
                } 
            }
        });
    }
  //재입력 비밀번호 체크하여 가입버튼 비활성화 또는 맞지않음을 알림.
    function checkPwd() {
        var inputed = $('.pass').val();
        var reinputed = $('#repwd').val();
        console.log(inputed);
        console.log(reinputed);
        if(reinputed=="" && (inputed != reinputed || inputed == reinputed)){
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
            $("#repwd").css("background-color", "#FFCECE");
        }
        else if (inputed == reinputed) {
            $("#repwd").css("background-color", "#B0F6AC");
            pwdCheck = 1;
            if(idCheck==1 && pwdCheck == 1) {
                $(".signupbtn").prop("disabled", false);
                $(".signupbtn").css("background-color", "#4CAF50");
            }
        } else if (inputed != reinputed) {
            pwdCheck = 0;
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
            $("#repwd").css("background-color", "#FFCECE");
            
        }
    }
    //닉네임과 이메일 입력하지 않았을 경우 가입버튼 비활성화
    function checkNick() {
        var nickname = $("#nickname").val();
        console.log(nickname);
        $.ajax({
            data : {
                nickName : nickname
            },
            url : "checkNickName.do",
            success : function(data) {
                if(nickname=="" && data=='0') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#nickname").css("background-color", "#FFCECE");
                    nickCheck = 0;
                } else if (data == '0') {
                    $("#nickname").css("background-color", "#B0F6AC");
                    nickCheck = 1;
                    if(nickCheck ==1 && pwdCheck == 1) {
                        $(".signupbtn").prop("disabled", false);
                        $(".signupbtn").css("background-color", "#4CAF50");
                    } 
                } else if (data == '1') {
                    $(".signupbtn").prop("disabled", true);
                    $(".signupbtn").css("background-color", "#aaaaaa");
                    $("#nickname").css("background-color", "#FFCECE");
                    nickCheck = 0;
                } 
            }
        });
    }
    /*캔슬버튼 눌렀을 눌렀을시 인풋박스 클리어
    $(".cancelbtn").click(function(){
            $(".id").val(null);
            $(".pass").val('');
            $(".signupbtn").prop("disabled", true);
            $(".signupbtn").css("background-color", "#aaaaaa");
    });*/
    
   </script>
</body>
</html>
 
cs


여기서 밑에 보이는 function checkId() 함수가 실시간 아이디 중복체크를 위한 함수입니다. var inputed에 입력된 id 값을 받습니다. 그리고 ajax 코드안에 json형태의 데이터(id:inputed)로 /checkId.do url에 실시간으로 아이디값을 보내게 됩니다. 그러면 controller 안에 idCheck 메소드가 실행되게 됩니다. 그래서 만약 입력한 아이디가 존재한다면 리턴 값으로 1 값을 리턴하게 됩니다. 그러면 리턴된 데이터가  success : function(data){..} 함수의 data라는 매개변수로 값이 들어가게 됩니다. 그리고 그 매개변수로 조건문을 실행하게 되어 각 조건에 맞는 분기를 하게 됩니다. 그래서 아이디가 존재한다면 input 태그의 backgroud 색이 빨간색, 사용 할 수 있는 id인 경우 초록색으로 css를 변경하게 됩니다. 비밀번호의 경우는 jsp 파일 내에서 모두 체크를 하게 됩니다. 그래서 두번의 비밀번호의 입력이 같은 경우 input태크의 background 색이 초록색으로 변하게 됩니다. 마지막으로 닉네임 체크 같은 경우는 아이디 중복 체크와 모든 로직이 동일함으로 실시간 아이디 체크와 동일하게 코드 해석이 가능합니다.



8. 실행화면



이미 아이디가 존재하고 패스워드 두개가 다른 값을 가지며 또한, 이미 사용중인 닉네임인 경우 모든 input태그의 background 색이 빨간색으로 변함과 동시에 회원가입 버튼이 disabled가 된 것을 볼 수 있습니다.





사용가능한 아이디이며, 두개의 패스워드가 같고 또한 사용가능한 닉네임인 경우 모두 input 태그가 초록색으로 변하고 회원가입 버튼 또한 사용할 수 있게 disabled가 false로 변하게 됩니다.


9. 마치며


혹시 잘못된 점이 있으면 많은 지적부탁드립니다... 혹시 코드가 전체 필요하신 분은 댓글로 남겨주시면 확인하는 즉시 바로 보내드리겠습니다~!



저작자표시

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

Javascript - Uncaught Error: Bootstrap's JavaScript requires jQuery at...에러  (0) 2019.05.14
Javascript 타이머함수( setInterval(),setTimeOut(),clearInterval() )  (0) 2018.06.02
JSON객체의 배열로 넘어온 데이터 출력하기  (0) 2018.04.28

관련글

티스토리툴바