JSP day8

2022-03-21 3 분 소요

회원가입 로직 만들기

JSP로 회원가입 로직을 만들어보자. 이전 게시글이었던 로그인 페이지(login.jsp)와 연결되어 로그인 페이지에서 회원가입 버튼을 누르면 회원가입 페이지(member.jsp)가 열리게된다.

****

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 생략 -->
</head>
<body>
    <h2>회원가입</h2>
    <form action="./member_ok.jsp" method="post" name="regform" id="regform" onsubmit="return sendit()">
        <input type="hidden" name="isidcheck" id="isidcheck" value="n">
        <input type="hidden" name="isssn" id="isssn" value="n">
        <p>아이디 : <input type="text" name="userid" id="userid" maxlength="20"> 
        <input type="button" id="btnIdCheck" value="아이디 중복제거"></p>
        <p id="idcheckmsg"></p>
        <p>비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"></p>
        <p>비밀번호 확인 : <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></p>
        <p>이름 : <input type="text" name="name" id="name"></p>
        <p>휴대폰 번호 : <input type="text" name="hp" id="hp"></p>
        <p>이메일 : <input type="text" name="email" id="email"></p>
        <p>취미 : 
        	<label>드라이브<input type="checkbox" name="hobby" value="드라이브"></label>
            <label>영화감상<input type="checkbox" name="hobby" value="영화감상"></label>
            <label>쇼핑<input type="checkbox" name="hobby" value="쇼핑"></label>
            <label>게임<input type="checkbox" name="hobby" value="게임"></label>
            <label>운동<input type="checkbox" name="hobby" value="운동"></label>
        </p>
        <p>주민등록번호 : <input type="text" name="ssn1" id="ssn1" maxlength="6" onkeyup="moveFocus()" onkeydown="ssnChange()"> - <input type="text" name="ssn2" id="ssn2" maxlength="7" onkeydown="ssnChange()"> <input type="button" value="주민등록번호 검증" onclick="ssnCheck()"></p>
        <p>우편번호 : <input type="text" name="zipcode" id="sample6_postcode"> <input type="button" value="우편번호 검색" onclick="sample6_execDaumPostcode()"></p>
        <p>주소 : <input type="text" name="address1" id="sample6_address"></p>
        <p>상세주소 : <input type="text" name="address2" id="sample6_detailAddress"></p>
        <p>참고항목 : <input type="text" name="address3" id="sample6_extraAddress"></p>
        <p><input type="submit" value="가입완료"> 
           <input type="reset" value="다시작성"> 
           <input type="button" value="로그인" onclick="location.href='./login.jsp'"></p>
    </form>
</body>
</html>

위와 같이 form 태그를 통해 작성된 정보들이 post 방식으로 member_ok.jsp으로 전달되게 된다.

아이디 중복 검사는 js에서 id=”btnIdCheck”이 클릭 될 경우 userid의 값이 ajax를 통해 get방식으로 idcheck.jsp로 보내지게 된다.

$(function(){
	$('#btnIdCheck').on('click', function(){
		if($('#userid').val() == ''){
			alert('아이디를 입력하세요');
			$('#userid').focus();
			return false;
		}
		
		const xhr = new XMLHttpRequest();
		const userid = $('#userid').val();
		xhr.open('GET', 'idcheck.jsp?userid='+userid, true);
		xhr.send();
		
		xhr.onreadystatechange = function(){
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
				const result = xhr.responseText;
				if(result.trim() == "ok"){
					$('#idcheckmsg').html("<b style='color:blue'>사용 할 수 있는 아이디입니다.</b>");
					$('#isidcheck').val('y');
				}else{
					$('#idcheckmsg').html("<b style='color:red'>사용 할 수 없는 아이디입니다.</b>");
				}
			}
		}
	});
});

<id_check.jsp>

<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// localhost:8080/Day3/1_Ajax_ok.jsp?userid=apple
	String userid = request.getParameter("userid");	// apple

	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;

	String sql = "";
	String url = "jdbc:mysql://localhost:3306/aiclass";
	String uid = "root";
	String upw = "1234";

	try {
		Class.forName("com.mysql.cj.jdbc.Driver");
		conn = DriverManager.getConnection(url, uid, upw);
		if (conn != null) {
			sql = "select mem_userid from tb_member where mem_userid=?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);
			rs = pstmt.executeQuery();
			
			if(rs.next()){
				out.println("no"); // 중복 아이디가 있는 경우
			}else{
				out.println("ok"); // 중복 아이디가 없는 경우
			}
		}
		} catch (Exception e) {
		e.printStackTrace();
	}
%>

ajax로 받은 userid의 데이터를 파라미터로 받아 DB에서 받아온 userid가 DB 내 데이터로 있는지 여부를 확인한다.

그 결과는 실시간으로 html에 출력된다.

xhr.onreadystatechange = function(){
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
        const result = xhr.responseText;
        if(result.trim() == "ok"){
            $('#idcheckmsg').html("<b style='color:blue'>사용 할 수 있는 아이디입니다.</b>");
            $('#isidcheck').val('y');
        }else{
            $('#idcheckmsg').html("<b style='color:red'>사용 할 수 없는 아이디입니다.</b>");
        }
    }
}

만약 ok일 경우,
jsp8_1

만약 no일 경우,
jsp8_2

<member_ok.jsp>

<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String userid = request.getParameter("userid");
	String userpw = request.getParameter("userpw");
	String name = request.getParameter("name");
	String hp = request.getParameter("hp");
	String email = request.getParameter("email");
	// String hobby = request.getParameter("hobby");  중복 선택을 허용한 경우, 배열로 받아야함
	String hobby[] = request.getParameterValues("hobby");
	String hobbystr = "";
	for(int i = 0 ; i < hobby.length; i++){
		hobbystr = hobbystr + hobby[i] + " ";
	}
	String ssn1 = request.getParameter("ssn1");
	String ssn2 = request.getParameter("ssn2");
	String zipcode = request.getParameter("zipcode");
	String address1 = request.getParameter("address1");
	String address2 = request.getParameter("address2");
	String address3 = request.getParameter("address3");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	
	String sql = "";
	String url = "jdbc:mysql://localhost:3306/aiclass";
	String uid = "root";
	String upw = "1234";

	try {
		Class.forName("com.mysql.cj.jdbc.Driver");
		conn = DriverManager.getConnection(url, uid, upw);
		if (conn != null) {
			sql = "insert into tb_member (mem_userid, mem_userpw, mem_name, mem_hp, mem_email, mem_hobby, mem_ssn1, mem_ssn2, mem_zipcode, mem_address1, mem_address2, mem_address3) values (?, ?, ?, ?, ? ,? ,? ,? ,? ,? ,? ,?);";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);
			pstmt.setString(2, userpw);
			pstmt.setString(3, name);
			pstmt.setString(4, hp);
			pstmt.setString(5, email);
			pstmt.setString(6, hobbystr);
			pstmt.setString(7, ssn1);
			pstmt.setString(8, ssn2);
			pstmt.setString(9, zipcode);
			pstmt.setString(10, address1);
			pstmt.setString(11, address2);
			pstmt.setString(12, address3);
			pstmt.executeUpdate();
		}
	
		} catch (Exception e) {
		e.printStackTrace();
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 완료</title>
</head>
<body>
	<h2>회원가입 완료</h2>
	<p>아이디 :<%=userid%></p>
	<p>이름 :<%=name%></p>
	<p>휴대폰 번호 :<%=hp%></p>
	<p>이메일 :<%=email%></p>
	<p>취미 :<%=hobbystr%></p>
	<p>주민등록번호 :<%=ssn1%>-<%=ssn2%></p>
	<p>우편번호 :<%=zipcode%></p>
	<p>주소 :<%=address1%></p>
	<p>상세주소 :<%=address2%></p>
	<p>참고항목 :<%=address3%></p>
	<p><a href="./login.jsp">로그인하러 가기</a></p>
</body>
</html>

member.jsp에서 post방식으로 받은 데이터는 request.getParameter를 통해 전부 받고 DB에 INSERT 해주게된다.

jsp8_3

Twitter Facebook LinkedIn

CHANYEONG

JSP day8

공유하기

참고

java day17

java day16

JSP day22

JSP day21