JSP 회원가입 만들기

프로그래밍/JSP 2022. 11. 26. 21:30

728x90

JSP로 회원가입 로직을 만들어볼 것이다. 이전 게시글 (https://yunchanyeong.github.io/coding/JSP-day8/) 로그인 만들기에서 회원가입 페이지를 추가해보자.

1. 회원가입 페이지(member.jsp) 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="./js/regist.js"></script>
</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">
        <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="submit" value="가입완료"> <input type="reset" value="다시작성"> <input type="button" value="로그인" onclick="location.href='./2_login.jsp'"></p>
    </form>

</body>
</html>

회원가입 form를 제작하여 가입완료 버튼을 누를시 member_ok.jsp로 데이터를 전달한다.

2. regist.js 작성

function sendit(){
    const userid = document.getElementById('userid');
    const userpw = document.getElementById('userpw');
    const userpw_re = document.getElementById('userpw_re');
    const isidcheck = document.getElementById('isidcheck');


    if(userid.value == ''){
        alert('아이디를 입력하세요');
        userid.focus(); // id 쪽으로 포커스
        return false;
    }
    if(userid.value.length < 4 || userid.value.length > 20){
        alert('아이디는 4자 이상 20자 이하로 입력하세요');
        userid.focus(); // id 쪽으로 포커스
        return false;
    }
    
    if(isidcheck.value == 'n'){
        alert('아이디 중복확인 해주세요');
        isidcheck.focus();
        return false;
    }

    if(userpw.value == ''){
        alert('비밀번호를 입력하세요');
        userpw.focus(); // pw 쪽으로 포커스
        return false;
    }
    
    if(userpw.value.length < 4 || userpw.value.length > 20){
        alert('비밀번호는 4자 이상 20자 이하로 입력하세요');
        userpw.focus(); // pw 쪽으로 포커스
        return false;
    }

    if(userpw.value != userpw_re.value){
        alert('비밀번호와 비밀번호 확인의 값이 다릅니다');
        userpw.focus(); // pw 쪽으로 포커스
        return false;
    }

    return true;
}


$(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>");
				}
			}
		}
	});
	$('#userid').on('keyup', function(){
		$('#isidcheck').val("n");
		$('#idcheckmsg').html("");
	})
});

자바스크립트를 통해 아이디, 비밀번호, 비밀번호 확인 유효성 검사와 아이디 중복 체크를 확인한다.

3. 아이디 중복 체크 페이지(id_check.jsp) 작성

<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String userid = request.getParameter("userid");

	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 tb_userid from tb_user where tb_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();
	}
%>

중복 아이디가 존재 여부를 regist.js에서 받아 사용 여부 메세지를 출력한다.

4. 회원가입 처리 페이지(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");

	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_user (tb_userid, tb_userpw, tb_name) values (?, ?, ?);";
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userid);
			pstmt.setString(2, userpw);
			pstmt.setString(3, name);
			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><a href="./login.jsp">로그인하러 가기</a></p>
</body>
</html>

사용자 정보를 tb_user 테이블에 저장한다.

728x90

저작자표시

'프로그래밍 > JSP' 카테고리의 다른 글

Java Beans 활용하여 로그인 만들기(2) (0)	2022.11.29
Java Beans 활용하여 로그인 만들기(1) (0)	2022.11.27
JSP 로그인 만들기 (0)	2022.11.25
AJAX (0)	2022.11.22
세션(session) (0)	2022.11.21

ABOUT ME

내 이야기 꾸러미 내 이야기 꾸러미

'프로그래밍 > JSP' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JSP' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바