회원가입 JSP(1)

최현석·2022년 10월 20일
DAOMVC1jsp회원가입

JSP

목록 보기
3/13

🧩join_view.jsp , html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>join_view</title>
</head>
<body>
	<form name="joinForm" method="post" action="join_db.jsp">
		<p id="text">사용할 수 있는 아이디입니다.</p>
		<p>
			<label>아이디<input type="text" name="userid"></label>
			<input type="button" value="중복확인" onclick="">
		</p>
		<p>
			<label>비밀번호<input type="password" name="userpw"></label>
		</p>
		<p>
			<label>비밀번호확인<input type="password" name="userpw_re"></label>
		</p>
		<p>
			<label>이름<input type="text" name="username"></label>
		</p>
		<p>
			성별<br>
			<label>남자<input type="radio" name="usergender" value="M" checked></label>
			<label>여자<input type="radio" name="usergender" value="W" checked></label>
		</p>
		<p>
			<label>핸드폰 번호 <input type="text" name="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>

🧩user.js 유효성검사

/**
 * 회원 가입 폼 value 확인하는 자바스크립트
 */
function sendit(){
	let frm = document.joinForm;
	let userid = frm.userid;
	let userpw = frm.userpw;
	let userpw_re = frm.userpw_re;
	let username = frm.username;
	let userphone = frm.userphone;
	 
 	// 아이디를 입력하세요
 	if( userid.value == "" ){
		alert("아이디를 입력하세요");
		userid.focus();
		return false;
	}
 
 	// 아이디는 5자 이상, 16자 미만
 	if( userid.value.length <= 4 || userid.value.length >= 16 ){
		alert("아이디는 5자 이상, 16자 미만으로 입력하세요!");
		userid.focus();
		return false;
	}
 
 	// 비밀번호 입력
 	// 비밀번호는 8자 이상
 	if( userpw.value == "" ){
		alert("비밀번호를 입력하세요");
		userpw.focus();
		return false;
	} else {
		if( userpw.value.length < 8 ){
			alert("비밀번호는 8자리 이상으로 입력하세요!");
			userpw.focus();
			return false;
		}
	}
 
 	// 비밀번호 == 비밀번호확인
 	if( userpw.value != userpw_re.value ){
		alert("비밀번호 확인을 다시하세요!");
		userpw_re.focus();
		return false;
	}
 
 	// 이름
 	if( username.value == ""  ){
		alert("이름을 입력하세요!");
		username.focus();
		return false;
	}
 
 	// 휴대폰 번호
 	if( userphone.value == ""  ){
		alert("휴대폰 번호를 입력하세요!");
		userphone.focus();
		return false;
	}
 
 	// submit
 	frm.submit();
}

🧩DB테이블

CREATE TABLE tbl_USER(
	userid		varchar2(200) PRIMARY KEY,
	userpw 		varchar2(200),
	username 	varchar2(200),
	usergender 	varchar2(100),
	userphone 	varchar2(100)
);

--DROP TABLE tbl_USER;
SELECT  * FROM tbl_USER ;


INSERT INTO TBL_USER VALUES ('test','1234','user1','M','01012345678');

🧩User_Bean.java

package com.koreait.web.beans;

public class UserBean {
	private String userid;
	private String userpw;
	private String username;
	private String usergender;
	private String userphone;
	
	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;
	}
}

🧩DBConnection.java

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 = "jsp";
			String password = "jsp";

			Class.forName(driver);
			conn = DriverManager.getConnection(url, user, password);
		} 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;
	}

}

🧩User_DAO.java

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;
	
    // UserBean의 모든 항목을 받아온다
    // 사용자가 화면단에서 입력한 값을 UserBean이라는 객체에 세팅으로 넘겨준다
	public boolean join(UserBean user) {
		boolean result = false;
		
		// INSERT INTO TBL_USER VALUES ('test','1234','user1','M','01012345678')
		String sql = "INSERT INTO TBL_USER VALUES (?,?,?,?,?)";
		int cnt = 0;
		
		try {
        	// DB와의 커넥션이 맺어진 결과값인 커넥션을 리턴받아온다.
			conn=DBConnection.getConnection();
			pstm=conn.prepareStatement(sql);
			
			// param값 setting
			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());
			
            // 결과값을 리턴 받는다.
            // 조작이 일어난 행위 개수가 할당 -> 1
			cnt = pstm.executeUpdate();
			
		}catch (Exception e) {
			e.printStackTrace();
		}
		
		if(cnt != 0) {
			// 성공
			result = true;
		}else {
			// 실패
			result = false;
		}
		
		return result;
		
	}

🧩join_db.jsp

  • join_view에서 입력 받은 데이터 값이 1차적으로 join_db(controller의 역할)으로 온다.
  • join_view(request) 요청을 최초로 받는것 컨트롤러의 역할을 jsp가한다 (MVC model1)
  • join_view 에서 넘겨받은 아이디 패스워드 부분을 세팅하고 User_DAO에 있는 메서드 호출
<%@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 가 자동 세팅 -->
    <!--  id="user" == name="user" 변수 이름을 동일하게 가져가면 좋다-->
	<jsp:setProperty property="*" name="user"/>
	
   <!-- join_view 에서 넘겨받은 아이디 패스워드 부분을 세팅하고 User_DAO에 있는 메서드 호출-->

	<%
		UserDAO udao = new UserDAO();
		if(udao.join(user)){
			// 가입성공
	%>
		<script>
			alert('회원가입 성공!');
			location.href = "login_view.jsp";
		</script>
	
	<%
		} else {
			// 가입실패
	%>
		<script>
			alert('회원가입 실패!');
			location.href = "join_view.jsp";
		</script>
	<%
		}
	%>
	
</body>
</html>

  • 회원가입창


  • db로 데이터 추가

profile
최현석
이전 포스트

MVC 패턴( MVC1,MVC2 )

다음 포스트

로그인 JSP(2)

0개의 댓글