도서 정보 제공 웹 서비스 - 회원가입 구현

이전에는 간단하게 로그인, 회원가입, 아이디 비밀번호 찾기 등등 기본적인 웹페이지 화면을 구성하였다.

아무래도 HTML, CSS, JavsScript, JQuery 등등을 사용하면서 좀 완성도 있게 구현해보자 노력했더니

웹 디자인 및 퍼블리싱에도 시간이 상당히 오래 걸렸다.

 

 

 

정확히 말하면 구현하는 데에 많은 시간이 소요된 것이 아니라, 어떤 식으로 꾸밀까... 에 너무 집중한 나머지

여러 웹페이지들의 레이아웃을 참고하면서 나름대로 그림도 그려보고 하다 보니 시간이 오래 걸렸다.

그렇게 해서 어느 정도 웹페이지의 콘셉트를 잡고 난 이후에 본격적으로 웹페이지 구조를 구성하기 시작했다.

 

 

 

 

 

전체적인 웹 서비스의 메인, 로그인, 회원가입, 아이디/비밀번호 찾기 화면의 모습이다.

 

나름대로 웹페이지 레이아웃과 CSS을 심혈을 기울여 구성했지만, 그렇게 좋지 못한 것 같다.

아무래도, 디자인 관련해서는 상당히 센스가 없는 것 같다...

 

 

 

 

 

 

 

여하튼, 영상과 같이 화면을 구성하면서 저번 포스팅 때의 모습과는 사뭇 다른 점이 존재하는데

바로 사이드 메뉴를 펼쳤을 때, 메인 화면이 살짝 어두워지면서 메인화면의 내용은 클릭이 불가능하게 만들었다.

이렇게 함으로써 사용자는 좀 더 사이드 메뉴에 시선이 향할 것이고, 또한 사이드 메뉴를 클릭하려다 실수로

메인화면을 클릭하는 문제를 방지할 수 있을 것이다.

 

 

 

 

 

 

 

회원가입 화면의 모습

 

 

 

 

 

 

 

기본적인 화면들을 구성했으니 이제는 이 화면들을 사용하여 실제로 서비스를 구성할 차례다.

먼저 회원가입과 관련된 내용을 살펴보도록 하자.

 

 

 

 

신규 회원가입을 진행하기전 사용자들의 회원가입 정보를 저장하는 CUSTOMER 릴레이션의 스냅샷

회원가입이 정상적으로 진행되는지 확인하기 위해서 우선 먼저 릴레이션의 초기 상태를 확인하면

총 6명의 사용자가 회원 가입하였으며, 각자 아이디, 비밀번호, 주소 등등의 정보를 가지고 있다.

여기서 주의해야 할 점은 바로 ID는 기본키로써 중복되지 않고, 휴대폰 번호와 이메일의 경우는

기본키는 아니지만, UNIQUE 한 값을 가지기에 후보 키로 사용될 수 있다는 것이다.

 

 

 

 

 

 

 

최민성이라는 이름의 사용자가 회원가입을 시도한다.

영상과 같이 회원가입을 시도하면.....

 

 

 

 

 

최민성 사용자에 대한 정보가 데이터베이스에 등록되었다.

 

 

 

최민성 사용자의 0번 질문에 대한 답은 바보의 엔드 크레디트다.

 

 

 

비밀번호 분실시에 비밀번호를 찾기 위한 질문과 그에 대한 답을 질의한 결과다.

 

 

 

 

 

 

 

회원가입을 시도할 때 당연히 회원가입 창이 필요하지만, 이런 회원가입 창에서 어떤 식으로 회원가입이 이루어지는지

어떠한 절차를 거쳐서 DB에 저장되는지는 다음과 같다.

 

 

1 - 우선 회원가입 버튼을 클릭하면 join.js에 등록해두었던 클릭이벤트가 발생한다.

아래의 소스코드는 join.js의 일부분이다.

    $(document).on("click","#JOIN_BUTTON",function(){
    	var CUSTOMER_ID = $("#CUSTOMER_ID").val();
    	var CUSTOMER_PW = $("#CUSTOMER_PW").val();
    	var CUSTOMER_PW_CHECK = $("#CUSTOMER_PW_CHECK").val();
    	var CUSTOMER_NAME = $("#CUSTOMER_NAME").val();
    	var CUSTOMER_PHONE = $("#CUSTOMER_PHONE").val();
    	var CUSTOMER_EMAIL = $("#CUSTOMER_EMAIL").val();
    	var CUSTOMER_ADDRESS = $("#CUSTOMER_ADDRESS").val();
    	var CUSTOMER_BDATE = $("#CUSTOMER_BDATE").val();
    	var KIND_NUMBER = $("#KIND_NUMBER").val();
		var PASSWORD_QUESTION_LIST_ID = $("#PASSWORD_QUESTION_LIST_ID").val();
		var PASSWORD_HINT_ANSWER = $("#PASSWORD_HINT_ANSWER").val();
    
		if(!check(CUSTOMER_ID)){
			alert("아이디는 알파벳과 숫자로 8자리이상 16자리이하로 구성해야 합니다.");
		}else if(!check(CUSTOMER_PW)){
    		alert("비밀번호는 알파벳과 숫자로 8자리이상 16자리이하로 구성해야 합니다.");
    	}else if(CUSTOMER_PW != CUSTOMER_PW_CHECK){
			alert("비밀번호가 서로 일치하지 않습니다.");
    	}else if(PASSWORD_HINT_ANSWER.length == 0){
    		alert("비밀번호 찾기 질문에 대한 답은 공백일 수 없습니다.");
    	}else if(CUSTOMER_NAME.length == 0){
    		alert("이름은 공백일 수 없습니다.");
    	}else if(!checkPhone(CUSTOMER_PHONE)){
    		alert("전화번호 형식이 잘못되었습니다.");
    	}else if(!checkEmail(CUSTOMER_EMAIL)){
    		alert("이메일 형식이 잘못되었습니다.");
    	}else if(CUSTOMER_ADDRESS.length == 0){
    		alert("주소는 공백일 수 없습니다.");
    	}
    	else{
    		$.ajax({
    			"type":"POST",
    			"url":"/LibraryService/JoinServlet",
    			"dataType":"JSON",
    			"data":{
    				"CUSTOMER_ID":CUSTOMER_ID,
    				"CUSTOMER_PW":CUSTOMER_PW,
    				"CUSTOMER_NAME":CUSTOMER_NAME,
    				"CUSTOMER_PHONE":CUSTOMER_PHONE,
    				"CUSTOMER_EMAIL":CUSTOMER_EMAIL,
    				"CUSTOMER_ADDRESS":CUSTOMER_ADDRESS,
    				"CUSTOMER_BDATE":CUSTOMER_BDATE,
    				"KIND_NUMBER":"1",
    				"PASSWORD_QUESTION_LIST_ID":PASSWORD_QUESTION_LIST_ID,
    				"PASSWORD_HINT_ANSWER":PASSWORD_HINT_ANSWER
    			},
    			"success":function(data){
    				var result = data.result;
    				var info = data.info;
    				alert(info);
    				if(result == "true"){
    					location.href = "/LibraryService/resource/jsp/main.jsp";
    				}
    			},
    			"error":function(){
    				alert("에러");
    			}
    		});
    	}
    });

 

 

 

 

 

 

2 - 그에 따라 비동기식 ajax 메서드를 이용하여 JoinServlet 서블릿에 비동기식으로 요청한다.

서블릿은 DAO클래스의 메소드를 호출하여 DB에 접근한다.

아래의 소스코드는 JoinServlet.java의 일부분이다.

	public void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		String PASSWORD_QUESTION_LIST_ID = request.getParameter("PASSWORD_QUESTION_LIST_ID");
		String PASSWORD_HINT_ANSWER = request.getParameter("PASSWORD_HINT_ANSWER");

		PrintWriter out = response.getWriter();
		CustomerVO customer = new CustomerVO(
				request.getParameter("CUSTOMER_ID"),
				request.getParameter("CUSTOMER_PW"),
				request.getParameter("CUSTOMER_NAME"),
				request.getParameter("CUSTOMER_PHONE"),
				request.getParameter("CUSTOMER_EMAIL"),
				request.getParameter("CUSTOMER_ADDRESS"),
				request.getParameter("CUSTOMER_BDATE"),
				"1"
		);
		
		boolean result = dao.join(customer, PASSWORD_QUESTION_LIST_ID, PASSWORD_HINT_ANSWER);
		JSONObject json = new JSONObject();
		
		if(result) {
			json.put("result", "true");
			json.put("info", "회원가입에 성공했습니다.");
			response.setContentType("application/json;charset=utf-8");
			out.print(json);
			out.flush();
			out.close();
		}else {
			json.put("result", "false");
			json.put("info", "입력하신 아이디나 전화번호 또는 이메일은 이미 다른 사람이 사용중입니다.");
			response.setContentType("application/json;charset=utf-8");
			out.print(json);
			out.flush();
			out.close();
		}
	}

 

 

 

 

 

 

3 - 해당 서블릿에는 JoinDAO클래스의 객체가 존재하고 이 객체를 통해 실제 DB에 접근할 수 있게 된다.

아래는 JoinDAO.java의 소스코드 일부분이다.

	public boolean join(CustomerVO customer, String PASSWORD_QUESTION_LIST_ID, String PASSWORD_HINT_ANSWER){
		
		try {
			Connection connection = dataSource.getConnection();
			PreparedStatement pstmt;

			String query="";
			query="";
			query += "SELECT COUNT(*) ";
			query += "FROM CUSTOMER ";
			query += "WHERE CUSTOMER_ID = '"+customer.getCUSTOMER_ID() + "' OR CUSTOMER_PHONE = '"+customer.getCUSTOMER_PHONE()+"' OR CUSTOMER_EMAIL = '"+customer.getCUSTOMER_EMAIL()+"'";
			pstmt = connection.prepareStatement(query);
			ResultSet rs = pstmt.executeQuery();
			rs.next();
			long cnt = Long.parseLong(rs.getString("COUNT(*)"));
			rs.close();
			pstmt.close();
			
			if(cnt!=0) {
				connection.close();
				return false;
			}
			
			
			query="";
			query += "INSERT INTO CUSTOMER ";
			query += "VALUES(?,?,?,?,?,?,?,?)";
			pstmt = connection.prepareStatement(query);
			
			pstmt.setString(1, customer.getCUSTOMER_ID());
			pstmt.setString(2, customer.getCUSTOMER_PW());
			pstmt.setString(3, customer.getCUSTOMER_NAME());
			pstmt.setString(4, customer.getCUSTOMER_PHONE());
			pstmt.setString(5, customer.getCUSTOMER_EMAIL());
			pstmt.setString(6, customer.getCUSTOMER_ADDRESS());
			pstmt.setString(7, customer.getCUSTOMER_BDATE());
			pstmt.setString(8, customer.getKIND_NUMBER());
			int row = pstmt.executeUpdate();
			pstmt.close();
			
			query="";
			query += "INSERT INTO PASSWORD_HINT ";
			query += "VALUES(?,?,?)"; 
			pstmt = connection.prepareStatement(query);
			
			pstmt.setString(1, customer.getCUSTOMER_ID());
			pstmt.setString(2, PASSWORD_QUESTION_LIST_ID);
			pstmt.setString(3, PASSWORD_HINT_ANSWER);
			row = pstmt.executeUpdate();
			pstmt.close();
			connection.close();
			return true;
		}catch(Exception e) {
			System.out.println("가입에러");
			e.printStackTrace();
			return false;
		}