[Ajax] 회원가입 사이트 개발-JSP

JSP에서 AJAX를 이용하여 회원등록 페이지를 만들어보겠습니다.

 

1. 프로젝트 구성

 

프로젝트 구성은 이렇게 됩니다.

index라는 jsp파일 하나와 java 서블릿클래스 2개, db연동을 위한 DAO클래스 1개,  User라는 자바클래스 하나로 이루어져있습니다. 

부트스트랩을 다운받아서 webContent밑에 css, fonts, js파일을 넣어주었습니다.

 

2.프로젝트 실행화면 및 동작

프로젝트를 완성하면 이런 웹페이지가 뜹니다.

페이지에는 회원의 이름, 나이, 성별, 이메일이 나와있습니다.

그리고 그 아래에는 회원 등록 양식이 있고 그 부분을 작성해서 등록버튼을 누르면 바로 위에 회원 목록에 추가되는것을 볼 수 있습니다.

Ajax를 이용하여 화면이 새로고침되지 않아도 바로 바뀌는 것을 확인할 수 있습니다. 

 

3. User.java

package user;
 
public class User {
    String userName;   
    int userAge;
    String userGender;
    String userEmail;
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public int getUserAge() {
        return userAge;
    }
    public void setUserAge(int userAge) {
        this.userAge = userAge;
    }
    public String getUserGender() {
        return userGender;
    }
    public void setUserGender(String userGender) {
        this.userGender = userGender;
    }
    public String getUserEmail() {
        return userEmail;
    }
    public void setUserEmail(String userEmail) {
        this.userEmail = userEmail;
    }
}
 

우선 ajax라는 이름의 데이터베이스를 생성하고 user라는 테이블을 만듭니다.

그리고 userName, userAge, userGender, userEmail 이라는 필드를 만들고 user.java라는 클래스안에도 데이터베이스의 필드들과 같은 필드 4개와 getter,setter 함수를 만들어줍니다.

 

4. userDAO.java

DAO는 Data Access Object의 약자로 db와 연동하는 클래스를 말합니다.

package user;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
 
public class UserDAO {
    private Connection conn;
    private PreparedStatement pstmt;
    private ResultSet rs;
    
    public UserDAO() {
    try {
        String dbURL="jdbc:mysql://localhost:3306/ajax?serverTimezone=UTC";    //database URL
        String dbID="db아이디";        //자신의 db아이디
        String dbPassword="비밀번호";        //db비밀번호
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn=DriverManager.getConnection(dbURL,dbID,dbPassword);
    }
    catch(Exception e) {
        e.printStackTrace();    
    }
    }
    
    public ArrayList<User> search(String userName){
        String SQL= "SELECT * FROM USER WHERE userName LIKE ?";    //LIKE는 username이랑 데이터랑 정확히 일치하지 않아도 검색어가 데이터에 포함된다면 그 데이터를 불러옴
        ArrayList<User> userList = new ArrayList<User>();
        try {
            pstmt = conn.prepareStatement(SQL);
            pstmt.setString(1,"%"+userName+"%");
            rs=pstmt.executeQuery();
            while(rs.next()) {
                User user= new User();    //User 인스턴스를 생성해서
                user.setUserName(rs.getString(1));    //정보를 하나씩 가져옴
                user.setUserAge(rs.getInt(2));
                user.setUserGender(rs.getString(3));
                user.setUserEmail(rs.getString(4));
                userList.add(user);
            }
        }
        catch(Exception e){
            e.printStackTrace();
        }
        return userList;
    }
    
    public int register(User user) {
        String SQL="INSERT INTO USER VALUES(?, ?, ?, ?)";    //입력받은 user 정보를 db에 저장함
        try {
            pstmt= conn.prepareStatement(SQL);
            pstmt.setString(1, user.getUserName());
            pstmt.setInt(2, user.getUserAge());
            pstmt.setString(3, user.getUserGender());
            pstmt.setString(4, user.getUserEmail());
            return pstmt.executeUpdate();
        }catch(Exception e) {
            e.printStackTrace();
        }
        return -1;        //데이터베이스 오류
    }
 
}
 

제일 먼저 데이터베이스와 연동을 시켜줍니다.

search 메소드는 검색창에 검색어를 입력하면 그 검색어를 userName으로 받아와서 userName을 포함하는 이름을 가진 user정보를 가져와서 userList에 넣고 리턴합니다.

register 메소드는 회원등록 버튼을 누르면 user 정보를 가져와서 차례대로 정보를 저장하는 메소드입니다.

 

5. UserSearchServlet.java

 UserSearchServlet클래스는 검색기능을 실행해주는 컨트롤러라고 할 수 있습니다.

package user;
 
import java.io.IOException;
import java.util.ArrayList;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class UserSearchServlet
 */
@WebServlet("/UserSearchServlet")
public class UserSearchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String userName = request.getParameter("userName");
        response.getWriter().write(getJSON(userName));
    }
    
    public String getJSON(String userName) {
        if(userName == null) userName="";
        StringBuffer result = new StringBuffer("");    //result라는 변수 생성
        result.append("{\"result\":[");        //result에 문자열을 담음
        UserDAO userDAO=new UserDAO();
        ArrayList<User> userList = userDAO.search(userName);    //검색할 userName을 search 메소드에 넣고 리턴값을 저장함
        for(int i=0; i<userList.size(); i++) {    //검색에 해당되는 userList의 길이만큼
            result.append("[{\"value\": \""+userList.get(i).getUserName()+"\"},");    //해당 user들의 정보를 result에 넣음
            result.append("{\"value\": \""+userList.get(i).getUserAge()+"\"},");
            result.append("{\"value\": \""+userList.get(i).getUserGender()+"\"},");
            result.append("{\"value\": \""+userList.get(i).getUserEmail()+"\"}],");
        }
        result.append("]}");
        return result.toString();
    }
 
}
 

검색어를 입력하면 getJSON이라는 메소드가 검색어에 해당하는 user의 정보를 result에 추가하고 해당하는 user들의 정보를 다 넣었으면 문자열을 닫아준 뒤 문자열을 리턴해줍니다.

 

6. UserRegisterServlet.java

UserRegisterServlet클래스는 회원등록기능을 실행해주는 컨트롤러 클래스입니다.

package user;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/UserRegisterServlet")
public class UserRegisterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String userName = request.getParameter("userName");
        String userAge = request.getParameter("userAge");
        String userGender = request.getParameter("userGender");
        String userEmail = request.getParameter("userEmail");
        response.getWriter().write(register(userName,userAge,userGender,userEmail)+"");    //문자열로 바꿔주기 위해 ""를 붙여줌
    }
    public int register(String userName,String userAge, String userGender,String userEmail) {
        User user = new User();    //User 인스턴스 생성
        try {
            user.setUserName(userName);
            user.setUserAge(Integer.parseInt(userAge));
            user.setUserGender(userGender);
            user.setUserEmail(userEmail);
        }
        catch(Exception e) {
            return 0;
        }
        return new UserDAO().register(user);
    }
 
}
 

register라는 메소드가 정보들을 파라미터로 받아서 user를 생성하고 정보를 넣어서 UserDAO클래스의 register메소드의 인자로 넘겨줍니다.

 

7. index.jsp

index 파일은 페이지의 화면을 구성하는 html과 script가 들어가는 jsp파일입니다.

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP AJAX</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
    var searchRequest= new XMLHttpRequest(); //ajax를 쓰기 위해 인스턴스 생성
    var registerRequest= new XMLHttpRequest();
    function searchFunction(){
        searchRequest.open("Post","./UserSearchServlet?userName="+ encodeURIComponent(document.getElementById("userName").value),true); //이름을 입력받으면 userName에서 그 값을 검색하기 위해 넘겨줌
        searchRequest.onreadystatechange =searchProcess; //어떠한 이벤트(변화)가 나타났을 때 바로  알려줌
        searchRequest.send(null);
    }
    function searchProcess(){
        var table = document.getElementById("ajaxTable"); //html에 ajaxTable이라는 아이디를 갖는 tbody를 가져옴
        table.innerHTML =""; //빈공간으로 초기화
        if(searchRequest.readyState == 4 && searchRequest.status == 200){    //성공적으로 통신이 된다면 
            var object = eval('('+searchRequest.responseText+')');
            var result = object.result;        //servlet에서 배열을 담는 result를 받아옴 
            for(var i=0; i<result.length; i++){        //넘어온 result의 길이까지 반복
                var row = table.insertRow(0);         //테이블에 행을 추가
                for(var j=0; j<result[i].length; j++){    //result 배열에는 userNamae,userAge,userGender... 가 들어있으므로 하나씩 접근
                    var cell = row.insertCell(j);    //위에서 만들어진 행에 하나의 셀을 추가
                    cell.innerHTML=result[i][j].value;    //innerHTML에 값을 표시
                }
            }
        }
    }
    function registerFunction(){
        registerRequest.open("Post","./UserRegisterServlet?userName="+ encodeURIComponent(document.getElementById("registerName").value) +
                            "&userAge="+encodeURIComponent(document.getElementById("registerAge").value)+
                            "&userGender="+encodeURIComponent($('input[name=registerGender]:checked').val())+    //userGender는 name값으로 받았기때문에 JQuery를 사용해서 받아옴
                            "&userEmail="+encodeURIComponent(document.getElementById("registerEmail").value),true); //회원등록을 위해 입력받은 모든 값을 넘겨줌
        registerRequest.onreadystatechange =registerProcess; 
        registerRequest.send(null);
    }
    function registerProcess(){
        if(registerRequest.readyState == 4 && registerRequest.status == 200){    //성공적으로 통신이 된다면
            var result = registerRequest.responseText;
            if(result!=1){    //잘못되었다면
                alert('등록에 실패했습니다.');
            }
            else{
                var userName=document.getElementById("userName");
                var registerName=document.getElementById("registerName");
                var registerAge=document.getElementById("registerAge");
                var registerEmail=document.getElementById("registerEmail");
                userName.value ="";        //정보가 성공적으로 회원등록이 되었다면 모든 값을 초기화해줘서 input에 입력한 값을 비워줌
                registerName.value ="";
                registerAge.value ="";
                registerEmail.value ="";
                searchFunction();
            }
        }
        
    }
    window.onload =function(){
        searchFunction();
    }
</script>
</head>
<body>
    <br>
        <div class="container">
            <div class="form-gorup row pull-right">
                <div class="col-xs-8">
                    <input class="form-control" id="userName" onkeyup="searchFunction()" type="text" size="20">
                </div>
                <div class="col-xs-2">
                    <button class="btn btn-primary" onclick="searchFunction();" type="button">검색</button><br>
                </div>
            </div>
            <table class="table" style="text-align:center; border: 1px solid #dddddd">
            <thred>
                <tr>
                    <th style="background-color: #fafafa; text-align:center;">이름</th>
                    <th style="background-color: #fafafa; text-align:center;">나이</th>
                    <th style="background-color: #fafafa; text-align:center;">성별</th>
                    <th style="background-color: #fafafa; text-align:center;">이메일</th>
                </tr>
            </thred>
            <tbody id="ajaxTable">
                <tr>
                    
                </tr>
            </tbody>
        </div>
        <div class="container">
            <table class="table" style="text-align:center; border: 1px solid #dddddd">
                <thred>
                    <tr>
                        <th colspan="2" style="background-color: #fafafa; text-align:center;">회원 등록 양식</th>
                    </tr>
                </thred>
                <tbody>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>이름</h5></td>
                        <td><input class="form-control" type="text" id="registerName" size="20"></td>
                    </tr>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>나이</h5></td>
                        <td><input class="form-control" type="text" id="registerAge" size="20"></td>
                    </tr>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>성별</h5></td>
                        <td>
                            <div class="form-group" style="text-align:center; margin:0 auto;">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary active">
                                    <input type="radio" name="registerGender" autocomplete="off" value="남자" checked>남자
                                    </label>
                                    <label class="btn btn-primary">
                                    <input type="radio" name="registerGender" autocomplete="off" value="여자">여자
                                    </label>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>이메일</h5></td>
                        <td><input class="form-control" type="text" id="registerEmail" size="20"></td>
                    </tr>
                    <tr>
                        <td colspan="2"><button class="btn btn-primary pull-right" onclick="registerFunction();" type="button">등록</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
</body>
</html>

페이지를 구성하는 html이 있고 Ajax를 사용하기 위해 XMLHttpRequest인스턴스를 생성하였습니다.

코드에 대한 설명은 주석으로 나와있습니다.

이렇게 모든파일을 만들면 처음에 본것같은 웹페이지가 나오고 검색하면 새로고침하지 않아도 검색어를 포함하는 user의 정보가 뜰 것입니다.

그리고 회원등록버튼을 누르면 바로 위에 회원목록에 추가되는 것을 확인할 수 있습니다.

이렇게 Ajax를 이용한 동적인 웹 개발에 대해서 알아보았습니다.