JSP 회원가입

hj_kwon.log·2022년 10월 19일
jsp
0

JSP

목록 보기
12/14
post-thumbnail

⛳ JSP 회원가입

🔴 JSP 회원가입 창

오늘 jsp 회원가입과 로그인하는 법을 배웠다. 다시 한번 작성해보자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="join_db.jsp" name="joinForm" method="post" id="joinForm">
		<p id ="text">사용할 수 있는 아이디입니다.</p>
		<p>
			<label>아이디<input type="text" name="userid" id="userid"></label>
			<input type="button" value="중복확인" onclick="">
		</p>
		<p>
			<label>비밀번호 <input type = "password" name="userpw" id="userpw"></label>
		</p>
		<p>
			<label>비밀번호 확인 <input type = "password" name="userpw_re" id="userpw_re"></label>
		</p>
		<p>
         <label>이름 <input type="text" name="username" id="username"></label>
      	</p>
		<p>
			성별<br>
			<label>남자 <input type = "radio" name="usergender" id="usergender" value="M" checked></label>
			<label>여자 <input type = "radio" name="usergender" id="usergender" value="W" checked></label>
		</p>
		<p>
			<label>핸드폰 번호 <input type="text" name="userphone" id="userphone"></label>
		</p>
		<p>
			우편번호
		</p>
		<p>
			주소
		</p>
		<p>
			상세주소
		</p>
		<p>
			<input type="button" value="가입완료" onclick="sendit()">
		</p>
	</form>
</body>
<script src ="user.js"></script>
</html>

회원가입 폼

🔴 회원가입 유효성 검사

function sendit() {
    let frm = document.getElementById("joinForm");
    let idTag = document.getElementById("userid");
    let pwTag = document.getElementById("userpw");
    let cpTag = document.getElementById("userpw_re");
    let nameTag = document.getElementById("username");
    let phoneTag = document.getElementById("userphone");

    let idck = /^[a-zA-Z0-9]*$/;
    let nameck = /^[ㄱ-ㅎ가-힣0-9]*$/;
    let phoneck = /^[0-9]*$/;

    // 아이디
    if(idTag.value==""){
   	 alert("아이디를 입력해주세요");
   	 idTag.focus();
   	 return false;
    }
    if(!(5 <= idTag.value.length && idTag.value.length<=16)){
   	 alert("아이디는 6자 이상 16자리 이하로 만들어주세요");
   	 idTag.focus();
   	 return false;
    }
    
    if(!idck.test(idTag.value)){
   	 alert("아이디는 숫자와 영어로만 이루어져야합니다.")
        idTag.focus();
   		return false;
    }
    // 비밀번호
    if(pwTag.value==""){
   	 alert("비밀번호를 입력해주세요");
   	 pwTag.focus();
   	 return false;
    }
    if(!(8 <= pwTag.value.length)){
   	 alert("비밀번호는 8자이상으로 만들어주세요");
   	 pwTag.focus();
   	 return false;
    }
   // 비밀번호 확인
    if(cpTag.value==""){
      	 alert("비밀번호를 확인해주세요");
      	cpTag.focus();
      	 return false;
       } 
   if(pwTag.value!=cpTag.value){
   	 alert("비밀번호 동일하지 않습니다.");
   	 cpTag.focus();
   	 return false;
    }
    // 이름 확인
    if(nameTag.value==""){
   	 alert("이름을 입력해주세요");
   	 nameTag.focus();
   	 return false;
    }
    if(!nameck.test(nameTag.value)){
       alert("이름은 한글로만 입력해주세요");
       nameTag.focus();
   	 return false;
    }
    // 핸드폰 번호 확인
    if(phoneTag.value==""){
   	 alert("핸드폰 번호를 입력해주세요");
   	 phoneTag.focus();
   	 return false;
    }
    if(!phoneck.test(phoneTag.value)){
   	 alert("숫자만 입력해주세요");
   	 phoneTag.focus();
   	 return false;
    }
    frm.submit();
  	}

회원가입 유효성 검사 실시.

🔴 DB테이블 생성

DB테이블 생성

🔴 DTO 생성

package com.koreait.web.beans;

public class UserBean {
	private String userid;
	private String userpw;
	private String username;
	private String usergender;
	private String userphone;
	
	
	//  getter setter 만들기
	public String getUserid() {
		return userid;
	}
	public void setUserid(String userid) {
		this.userid = userid;
	}
	public String getUserpw() {
		return userpw;
	}
	public void setUserpw(String userpw) {
		this.userpw = userpw;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getUsergender() {
		return usergender;
	}
	public void setUsergender(String usergender) {
		this.usergender = usergender;
	}
	public String getUserphone() {
		return userphone;
	}
	public void setUserphone(String userphone) {
		this.userphone = userphone;
	}
	
	
	
}

변수생성과 getter setter 생성 (DTO)

🔴 DB연동 객체

❗ JDBC Connection 객체반환 메서드

package com.koreait.web.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
	public static Connection getConnection() {
		Connection conn = null;
		
		try {
		String driver = "oracle.jdbc.driver.OracleDriver";
		String url = "jdbc:oracle:thin:@localhost:1521:xe";
		// 디비 아이디 패스워드
		String user = "***";
		String password = "***";
		
		Class.forName(driver);
		System.out.println("jdbc Driver 로딩 성공!");
		
		conn = DriverManager.getConnection(url, user, password);
		System.out.println("오라클 연결 성공!!");
		}catch(ClassNotFoundException e) {
			e.printStackTrace();
			System.out.println("드라이버 로딩 실패");
		}catch (SQLException e) {
			e.printStackTrace();
			System.out.println("DB접속 오류");
		}catch(Exception e) {
			e.printStackTrace();
			System.out.println("알수 없는 에러 발생");
		}
		return conn;
	}
}

유지보수를 쉽게하고 간편하게 하기 위해 DB연동 객체를 만든다. 원래는 DAO쪽에 저 코드를 모두 작성해야하지만 편하게 객체를 받아와 연동할 수 있게 JDBC Connection 객체반환 메서드를 만든다.

❗ DAO

package com.koreait.web.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import com.koreait.web.beans.UserBean;

public class UserDAO {

	Connection conn;
	PreparedStatement pstm;
	ResultSet rs;
	
	public boolean join(UserBean user) {
		boolean result = false;
		String sql = "INSERT INTO TBL_USER VALUES(?,?,?,?,?)";
		int cnt = 0;
		
		try {
			conn=DBConnection.getConnection();
			pstm=conn.prepareStatement(sql);
			pstm.setString(1, user.getUserid());
			pstm.setString(2, user.getUserpw());
			pstm.setString(3, user.getUsername());
			pstm.setString(4, user.getUsergender());
			pstm.setString(5, user.getUserphone());
			
			cnt = pstm.executeUpdate();

		}catch(Exception e) {
			e.printStackTrace();
		}
		if(cnt!=0) {
			result = true;
		}else {
			result = false;
		}
		return result;
		
	}

boolean 타입으로 객체를 생성한다. UserBean(DTO) 안에 저장된 값을 가져온다.

🔴컨트롤러단 생성

<%@page import="com.koreait.web.dao.UserDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 	객체 생성 -->
	<jsp:useBean id="user" class="com.koreait.web.beans.UserBean"/>
	
	
<!-- 	*별 처리하면 한번에 해결가능 -->
<%-- 	<jsp:setProperty property="userid" name="user"/> --%>
<%-- 	<jsp:setProperty property="userpw" name="user"/> --%>
<%-- 	<jsp:setProperty property="username" name="user"/> --%>
	
	<!-- 	외부에서 전달된 name속성과 필드의 이름이 같으면 value가 자동세팅 -->
	<jsp:setProperty property="*" name="user"/>
	<%
// 		객체받아오기
		UserDAO udao = new UserDAO();
		if(udao.join(user)){
			//가입 성공
	%>
		<script>
			alert('회원가입 성공');
// 			회원가입 성공시 로그인 페이지로 이동
			location.href = "loginview.jsp";
		</script>
	
	<%
		}else{
		//가입 실패
	%>	
		<script>
			alert('회원 가입 실패');
// 			회원가입 실패시 다시 회원가입 뷰로 이동
			location.href = "join_view.jsp";
		</script>
		
	<%
		}
	%>
	
</body>
</html>

자바빈즈 태그를 이용해 객체 생성과 value가 자동 세팅된다. 회원가입 성공시 로그인 페이지로 이동하고 실패시 회원가입 뷰로 넘어가게한다.

🔴 회원가입 해보기

유효성 검사에 맞게 테스트할 준비.


회원가입이 성공했고 로그인 페이지로 넘어가는 것을 볼 수 있다. 이제 디비에 저장되었을지 확인해본다.

DB로 잘넘어왔다. 다음으로 로그인을 알아보겠다.

profile
hj_kwon.log
개발자가 되는 그날까지
이전 포스트

JSP Java sql package

다음 포스트

JSP 로그인

0개의 댓글