💠회원가입 폼(Veiw)
회원가입 화면을 만들어준다.
<%@ 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>💠유효성 검사
유효성 검사를 해준다.
/**
* 회원 가입 폼 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 테이블 생성
💠getter & setter(DTO) / (Model)
DTO(Data Transfer Object)는 중간에서 데이터를 싣고다니는 트럭이라고 생각하면 이해하기 쉽다.
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;
}
}💠DB연동 객체
DAO를 만들때마다 DB연동 코드를 매번쓰기 힘드니 미리 객체를 만들어 두어 DAO를 만들때마다 객체를 받아오면 코드도 줄고 유지보수도 쉽다.
만들고자 하는 DAO에서 이렇게 간략한 코드로 받아올수있다.
conn = DBConnection.getConnection();
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;
}
}💠DB에 접근하는 객체(DAO) / (Model)
DB의 data에 접근하기 위한 객체이다. DB에 접근하기 위한 로직을 분리하기 위해 사용한다.
직접 DB에 접근하여 data를 삽입, 삭제, 조회 등 조작할 수 있는 기능을 수행한다.
MVC 패턴의 Model에서 이와 같은 일을 수행한다.
package com.koreait.web.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import com.koreait.web.beans.UserBean;
public class UserDAO {
Connection conn;
PreparedStatement pstm;
ResultSet rs;
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 {
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());
cnt = pstm.executeUpdate();
} catch (SQLException e) {
System.out.println("SQL 에러");
}
if (cnt != 0) {
// 성공
result = true;
} else {
// 실패
result = false;
}
return result;
}
}💠컨트롤러 생성(Controller)
자바빈즈 태그를 이용해 객체 생성과 value가 자동 세팅된다. 회원가입 성공시 로그인 페이지로 이동하고 실패시 회원가입 뷰로 넘어가게한다.
<%@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"/> --%>
<!-- 외부에서 전달된 naem 속성과 필드의 이름이 같으면 value 가 자동 세팅 -->
<jsp:setProperty property="*" name="user"/>
<%
UserDAO udao = new UserDAO();
if( udao.join(user) ){
// 가입성공
%>
<script type="text/javascript">
alert("회원가입 성공!");
location.href = "login_view.jsp";
</script>
<%
} else {
// 가입실패
%>
<script type="text/javascript">
alert("회원가입 실패!");
location.href = "join_view.jsp";
</script>
<%
}
%>
</body>
</html>
개발자 박찬의 노트