[AJAX] AJAX로 회원가입 페이지 만들기

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
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

Archives

Today

Total

관리 메뉴

MY MEMO

[AJAX] AJAX로 회원가입 페이지 만들기 본문

STUDYING/WEB

[AJAX] AJAX로 회원가입 페이지 만들기

l_j_yeon 2017. 6. 13. 17:41

출처 : https://www.youtube.com/watch?v=XxeLEMC5jzA&list=PLRx0vPvlEmdCJ1TvP12_ACTV_9SvKw9TI

eclipse를 tool로 jsp와 ajax를 사용하여 실습을 해 보았다.

또한 bootstrap의 css js를 이용하였다

일단 회원가입 페이지를 만들기 위해서 web index를 구현해야한다

그러기위해서는 설정을 몇가지 해줘야하는데

apache와 mysql을 해줘야한다.

자세한 설명은 http://dlwodus.tistory.com/131 여기에 가면 있다 (설정하는 것만)

index.jsp (회원가입 페이지와 ajax코드가 있는 부분)

+) html파일을 어떻게 넣으면 좋을 지 몰라서 주석처리해서 넣었다

실제로 실행할 때는 주석을 빼서 실행하면 될듯하다

+) eclipse 주석처리 단축기 ctrl+shift+/

<%-- <%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<script type="text/javascript">

//registerCheckFunction->button ID CHECK를 누르면 실행되는 함수 
function registerCheckFunction() {
	//id가 userID인 variable을 저장
	var userID = $('#userID').val();
		//ajax : jquery안에 포함되어있는 것
		$.ajax({
			type : 'POST', 
			url : './UserRegisterCheckServlet', //여기로 가서 function을 실행할꺼에요
			data : {
				userID : userID
			},
			success : function(result) { //result를 받아올꺼죠
				if (result == 1) { 
					$('#checkMessage').html("you can use this ID"); //이 id 값에다가 저장해주세요
					$('#checkType')
							.attr('class', 'modal-content panel-success');
				} else {
					$('#checkMessage').html("you can not use this ID");
					$('#checkType')
							.attr('class', 'modal-content panel-warning'); //chekType의 class를 지정해줍니다.(attr = Attribute)
				}
				$('#checkModal').modal("show"); //checkModal을 보여주세요 -> modal은 popup창 같은 겁니당ㄴ
			}
		})
	}
	//passwordCheckFunction -> PasswordCheck를 하여 실시간으로 뿌려주는 것입니다.
	function passwordCheckFunction(){
		var userPassword1 = $('#userPassword1').val();
		var userPassword2 = $('#userPassword2').val();
		
		if(userPassword1!=userPassword2){
			$('#passwordCheckMessage').html("비밀번호가 일치하지 않습니다");
		}
		else{
			$('#passwordCheckMessage').html("");
		}
	}
</script>
</head>

<div class="container">
	
		<form method="post" action="./userRegister">
			<table class="table table-bordered table-hover"
				style="text-align: center; border: 1px solid #dddddd;">
				<thead>
					<tr>
						<th colspan="3"><h4>회원 등록</h4></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td style="width: 110px;"><h5>ID</h5></td>
						<td><input class="form-control" type="text" id="userID"
							name="userID" maxlength="20"></td>
							
						<td style="width: 110px;"><button class="btn btn-primary"
								onClick="registerCheckFunction();" type="button">ID
								CHECK</button></td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>Password</h5></td>
						
						<td colspan="2"><input class="form-control" type="password"
							onkeyup="passwordCheckFunction();" id="userPassword1"
							name="userPassword1" maxlength="20"></td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>Password Check</h5></td>
						
						<td colspan="2"><input class="form-control" type="password"
							onkeyup="passwordCheckFunction();" id="userPassword2"
							name="userPassword2" maxlength="20"></td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>Name</h5></td>
						<td colspan="2"><input class="form-control" type="text"
							id="userName" name="userName" maxlength="20"></td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>Age</h5></td>
						<td colspan="2"><input class="form-control" type="text"
							id="userAge" name="userAge" maxlength="20"></td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>Gender</h5></td>
						<td colspan="2">
							<div class="form-group"
								style="text-align: center; margin: 0 auto;">
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-primary"> <input type="radio"
										name="userGender" id="userGender" value="남자">남자
									</label> <label class="btn btn-primary active"> <input
										type="radio" name="userGender" id="userGender" value="여자">여자
									</label>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<td style="width: 110px;"><h5>Email</h5></td>
						<td colspan="2"><input class="form-control" type="email"
							id="userEmail" name="userEmail" maxlength="20"></td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: left"><input
							class="btn btn-primary pull-right" type="submit" value="회원가입">
							
							<h5 style="color: red;" id="passwordCheckMessage"></h5></td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<%
	//messageContent라는 String이 있습니다
	//session에서 messageContent를 가져온 이후 그것이 null이 아니라면
	//session에서 가져온 messageContent를 현재 변수에 저장해줍니다
	//messageType도 똑같습니다
		String messageContent = null;
		if (session.getAttribute("messageContent") != null) {
			messageContent = (String) session.getAttribute("messageContent");
		}
		String messageType = null;
		if (session.getAttribute("messageType") != null) {
			messageType = (String) session.getAttribute("messageType");
		}
		if (messageContent != null) {
			//가져온 messageContent가 있다면 modal로 popup창을 만들어줘야합니다.
	%>
	<div class="modal fade" id="messageModal" tableindex="-1" role="dialog"
		aria-hidden="true">
		<dv class="vertical-alignment-helper">
		<div class="modal-dialog vertical-align-center">
			<div
				class="modal-content
				
				<%if (messageType.equals("오류 메시지"))
					out.println("panel-warning");
				else
					out.println("panel-success");%>">
				<div class="modal-header panel-heading">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">
						<%=messageType%>
					</h4>
				</div>
				<div class="modal-body">
					<%=messageContent%>
				</div>
			</div>
		</div>
		</dv>
	</div>
	<script>
	//div class안의 messageModal
		$('#messageModal').modal("show");
	</script>
	<%
	//다 끝나면 Attribute를 삭제해줘야함
		session.removeAttribute("messageContent");
			session.removeAttribute("messageType");
		}
	%>
	<div class="modal fade" id="checkModal" tableindex="-1" role="dialog"
		aria-hidden="true">
		<dv class="vertical-alignment-helper">
		<div class="modal-dialog vertical-align-center">
			<div id="checkType" class="modal-content panel-info">
				<div class="modal-header panel-heading">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">Check Message</h4>
				</div>
				
				
				<div class="modal-body" id="checkMessage"></div>
			</div>
		</div>
		</dv>
	</div>

--%>

web.xml

+) 이 페이지는 프로젝트를 만들때 바로 Finish를 누르지 말고! Next를 두번 누른 후 web.xml도 만들것인가? 라는 체크박스에 체크를 해준다

custom.css (디자인을 좀 더 개발자가 원하는 방향으로 바꾸기 위하여)

UserDAO.java (Databse Access Object (보통 jsp로 Database를 가져올때 통상적으로 쓰이는 이름이라고 한다)

package user;

import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import com.mysql.jdbc.Connection;

//여기서 DTO에서 저장한 데이터를 가져와서 database에 적용!
public class UserDAO {
	//connection을 시작하지
	private Connection conn;
	
	//생성자 -> 실행하자마자 일어나야할일 -> Database에 연결되는 것
	public UserDAO() {
		//연결하자!
		try {
			//주의! DATABASE이름은 upper와 lower의 구분이 있음
			String dbURL = "jdbc:mysql://localhost:3306/register";
			String dbID = "root";
			String dbPassword = "자신의 비밀번호";
			//driver가져와줍니다
			Class.forName("com.mysql.jdbc.Driver");
			conn = (Connection) DriverManager.getConnection(dbURL, dbID, dbPassword);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

//이게 registerCheck 함수
	//registerCheckServlet에서 쓰임
	public int registerCheck(String userID) {
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String SQL = "SELECT * FROM user where userID = ?";
		try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, userID);
			//executeQuery라는 건 실행해서 나온 값이 있느냐 -> select때 사용
			rs = pstmt.executeQuery();
			
			if (rs.next()||userID.equals(""))
				return 0;
			else
				return 1;
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return -1;
	}

public int register(String userID, String userPassword, String userName, String userAge, String userGender,
			String userEmail) {
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String SQL = "INSERT INTO user VALUES (?,?,?,?,?,?)";

try {
			pstmt = conn.prepareStatement(SQL);
			pstmt.setString(1, userID);
			pstmt.setString(2, userPassword);
			pstmt.setString(3, userName);
			pstmt.setInt(4, Integer.parseInt(userAge));
			pstmt.setString(5, userGender);
			pstmt.setString(6, userEmail);
			
			//insert때에는 executeUpdate를 사용해야
			//insert한 개수만큼 반환
			//1이면 한개 됬으니까 okay 0이면 한개도 안됬으니까 다시 insert해야 -> 이때는 ID가 같은 경우밖에 없음 (개발자가 잘 못 짰거나)
			return pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (rs != null)
					rs.close();
				if (pstmt != null)
					pstmt.close();
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return -1;
	}
}

UserRegisterCheckServlet.java

UserRegisterServlet.java

package user;

import java.io.IOException;
import java.io.UnsupportedEncodingException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

//userRegister이후 UserRegisterServlet으로 Parameter를 넘겨주는게 이 정의는 web.xml에 있음
public class UserRegisterServlet extends HttpServlet {
	private static final long serialVersionUID = 1L; // 1인데 long format으로 된 것

// post형식으로 들어왔을 때
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");

// parameter 받아오기 -> index.jsp로부터 거기 보면 post형식으로 /userRegister라고 되어있음
		String userID = request.getParameter("userID");
		String userPassword1 = request.getParameter("userPassword1");
		String userPassword2 = request.getParameter("userPassword2");
		String userName = request.getParameter("userName");
		String userAge = request.getParameter("userAge");
		String userGender = request.getParameter("userGender");
		String userEmail = request.getParameter("userEmail");

// 빈칸이 하나라도 있으면 안됨
		if (userID == null || userID.equals("") || userPassword1 == null || userPassword1.equals("")
				|| userPassword2 == null || userPassword2.equals("") || userName == null || userName.equals("")
				|| userAge == null || userAge.equals("") || userGender == null || userGender.equals("")
				|| userEmail == null || userEmail.equals("")) {
			// session을 가져와서 속성을 설정함 (신기)
			// 요청하는 것 -> index.jsp에서 일어날 일
			// reponse받아오는 것-> 실행후 해야할 일
			request.getSession().setAttribute("messageType", "오류 메시지");
			request.getSession().setAttribute("messageContent", "fill in the all blanks");
			response.sendRedirect("index.jsp");
			return;
		}
		if (!userPassword1.equals(userPassword2)) {
			request.getSession().setAttribute("messageType", "오류 메시지");
			request.getSession().setAttribute("messageContent", "two password are not equal");
			response.sendRedirect("index.jsp");
			return;
		}
		// register함수가 여기서 쓰임
		// UserDAO() //생성자 .register (그 class안에서register함수를 실행)
		int result = new UserDAO().register(userID, userPassword1, userName, userAge, userGender, userEmail);
		if (result == 1) {
			request.getSession().setAttribute("messageType", "성공 메시지");
			request.getSession().setAttribute("messageContent", "Successfully Signing Up");
			response.sendRedirect("index.jsp");
			return;
		} else {
			request.getSession().setAttribute("messageType", "오류 메시지");
			request.getSession().setAttribute("messageContent", "Failed to Sign Up");
			response.sendRedirect("index.jsp");
			return;
		}
	}
}

공부를 하려면 실습을 하면서 눈으로 보고 배우는 것이 가장 중요한 것같다

또한 함수가 어디서 쓰이는지 전체적인 코드의 흐름이 어떻게 가는지도 알아두면 많은 도움이 될것 같다.

에러

http404 error : 이 에러는 많이 보이는 error라고 한다

보통 경로가 잘못된 것인데 자신의 경로가 알맞은지 확인해야한다.

저작자표시 비영리 변경금지

'STUDYING > WEB' 카테고리의 다른 글

[AJAX] AJAX와 JSON으로 실시간 익명 채팅 사이트 구현하기 (0)	2017.06.14
[AJAX] AJAX와 Servlet 개념잡기 (0)	2017.06.13
[WEB HACKING] XSS, XST, Cross site request forgery,역공학 (0)	2017.06.12
[WEB HACKING] cookie와 session (0)	2017.06.12
[WEB HACKING] Web Parsing을 이용하여 네이버 실시간 검색순위 가져오기 (0)	2017.06.12

공유하기 링크

페이스북
카카오스토리
트위터

'STUDYING/WEB' Related Articles

Comments

MY MEMO

[AJAX] AJAX로 회원가입 페이지 만들기 본문

[AJAX] AJAX로 회원가입 페이지 만들기

'STUDYING > WEB' 카테고리의 다른 글

티스토리툴바