day07
기본 회원가입 폼 만들기
joinview.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="" name="joinForm" method="post">
<p id="text">사용할 수 있는 아이디입니다.</p>
<p>
<label>아이디
<input type="text" name="userid">
<input type="button" value="중복확인" onclick="">
</label>
</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>
<label>휴대폰번호
<input type="text" name="userphone">
</label>
</p>
<p>
<label>우편번호
<input type="text" name="userphone">
</label>
</p>
<p>
<label>주소
<input type="text" name="userphone">
</label>
</p>
<p>
<label>상세주소
<input type="text" name="userphone">
</label>
</p>
<p>
<label>참고 항목
<input type="text" name="userphone">
</label>
</p>
<p>
<input type="button" value="가입완료" onclick="">
</p>
</form>
</body>
<script src="user.js"></script>
</html>user.js
/**
* 회원가입 폼 validation check
* 개발자 : lkh
* 개발일 : 2023-03-22
* ----------------------
*
*/
function sendit(){
// 아이디 : "" , 5자 이상 , 16자미만
// 비밀번호 : "" , 8자 이상 , 비밀번호 = 비밀번호 확인
// 이름 : ""
// 휴대폰번호 : ""
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;
}
if(userid.value.length <= 4 || userid.value.length >= 16) {
alert("아이디는 5자 이상, 16자 미만으로 입력하세요!");
userid.focus();
return false;
}
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.focus();
return false;
}
if (username.value == "") {
alert("이름을 입력하세요!");
username.focus();
return false;
}
if (userphone.value == "") {
alert("휴대폰번호를 입력하세요!");
userphone.focus();
return false;
}
frm.submit();
}결과값
DB 연동을 통한 회원가입 폼
join_view.jsp > join_db.jsp > MemberDao.java > DBConnection.java
-> DB와 통신
기본 DB 데이터
joinview.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">
<p id="text">사용할 수 있는 아이디입니다.</p>
<p>
<label>아이디
<input type="text" name="userid">
<input type="button" value="중복확인" onclick="">
</label>
</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>
<label>휴대폰번호
<input type="text" name="userphone">
</label>
</p>
<p>
<label>우편번호
</label>
</p>
<p>
<label>주소
</label>
</p>
<p>
<label>상세주소
</label>
</p>
<p>
<label>참고 항목
</label>
</p>
<p>
<input type="button" value="가입완료" onclick="sendit()">
</p>
</form>
</body>
<script src="user.js"></script>
</html>DB에서 tbl_member 테이블 만들기
CREATE TABLE tbl_member(
userid varchar2(200) PRIMARY KEY,
userpw varchar2(200),
username varchar2(200),
userphone varchar2(100)
)MemberBean.java
package com.codingbox.vo;
public class MemberBean {
private String userid;
private String userpw;
private String username;
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 getUserphone() {
return userphone;
}
public void setUserphone(String userphone) {
this.userphone = userphone;
}
}MemberDao.java
package com.codingbox.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.codingbox.vo.MemberBean;
public class MemberDao {
Connection conn;
PreparedStatement pstm;
ResultSet rs;
public boolean join(MemberBean member) {
String sql = "INSERT INTO TBL_MEMBER VALUES (?, ?, ?, ?)";
int result = 0;
try {
conn = DBconnection.getConnection();
pstm = conn.prepareStatement(sql);
pstm.setString(1, member.getUserid());
pstm.setString(2, member.getUserpw());
pstm.setString(3, member.getUsername());
pstm.setString(4, member.getUserphone());
result = pstm.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
if (result != 0) {
return true;
} else {
return false;
}
}
}이전에 했던 DBConnection.java 복사
package com.codingbox.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";
// 목적지(Oracle DB)
String url = "jdbc:oracle:thin:@localhost:1521:xe";
// dbms 계정명
String user = "jsp";
// dbms 비밀번호
String password = "jsp";
Class.forName(driver);
conn = DriverManager.getConnection(url, user, password);
} catch (SQLException e) {
System.out.println("드라이버 로딩 오류");
e.printStackTrace();
} catch (ClassNotFoundException e) {
System.out.println("DB 접속 오류");
e.printStackTrace();
} catch (Exception e) {
System.out.println("알 수 없는 에러");
e.printStackTrace();
}
return conn;
}
}join_db.jsp
성공시 login_view.jsp 이동
실패시 join_view.jsp 이동
<%@page import="com.codingbox.dao.MemberDao"%>
<%@ 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>
<!-- MemberBean member = new MemberBean(); -->
<jsp:useBean id="member" class="com.codingbox.vo.MemberBean"></jsp:useBean>
<%-- <jsp:setProperty property="userid" name="member"/> --%>
<%-- <jsp:setProperty property="userid" name="member"/> --%>
<%-- <jsp:setProperty property="userid" name="member"/> --%>
<%-- <jsp:setProperty property="userid" name="member"/> --%>
<jsp:setProperty property="*" name="member"/>
<!-- 외부에서 전달된 name 속성과 필드의 이름이 같으면 value이 자동으로 세팅 -->
<%
MemberDao mdao = new MemberDao();
if (mdao.join(member)){
// 회원가입 성공
%>
<script>
alert("회원가입 성공");
location.href = "login_view.jsp";
</script>
<%} else{ // 회원가입 실패%>
<script>
alert("회원가입 실패");
location.href = "join_view.jsp";
</script>
<%} %>
</body>
</html>결과값
로그인시
회원가입 성공
admin2(ID) 님 안녕하세요 출력
실패시
joinview.jsp 창 출력
login_view.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="login_db.jsp" method="post" name="frm">
<p>
<label>
아이디 <input type="text" name="userid"/>
</label>
</p>
<p>
<label>
패스워드 <input type="password" name="userpw"/>
</label>
</p>
<input type="button" value="로그인" onclick="sendit();">
</form>
<script>
function sendit() {
let frm = document.frm;
// validation check
// ...
frm.submit();
}
</script>
</body>
</html>결과값
아이디 admin2
패스워드 test1234 로그인
login_db.jsp
<%@page import="com.codingbox.dao.MemberDao"%>
<%@ 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>
<%
MemberDao mdao = new MemberDao();
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
if(mdao.login(userid, userpw)){
// 로그인 성공
session.setAttribute("session_id", userid);
%>
<script>
location.href = "main_view.jsp";
</script>
<% } else { // 로그인 실패 %>
<script>
alert("아이디 또는 패스워드를 확인해 주세요")
location.href = "login_view.jsp";
</script>
<% } %>
</body>
</html>결과값
main_view.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>
<%
String userid = (String)session.getAttribute("session_id"); // 오브젝트라 객체 형변환 (String)
if(userid != null){
%>
<script>
alert("<%= userid%>님 안녕하세요"); // userid님 안녕하세요
</script>
<p>
<%= userid%>님 <input type = "button" value="로그아웃"
onclick="location.href='logout_db.jsp'">
</p>
<%} else { %>
<script>
alert("로그인 후 이용하세요!");
location.href = "login_view.jsp";
</script>
<%} %>
</body>
</html>결과값
logout_db.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>
<%
session.removeAttribute("session_id");
// session.invalidate();
response.sendRedirect("login_view.jsp");
%>
</body>
</html>ID를 이름으로 출력하기
MemberDao.java
package com.codingbox.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.codingbox.vo.MemberBean;
public class MemberDao {
Connection conn;
PreparedStatement pstm;
ResultSet rs;
public boolean join(MemberBean member) {
String sql = "INSERT INTO TBL_MEMBER VALUES (?, ?, ?, ?)";
int result = 0;
try {
conn = DBconnection.getConnection();
pstm = conn.prepareStatement(sql);
pstm.setString(1, member.getUserid());
pstm.setString(2, member.getUserpw());
pstm.setString(3, member.getUsername());
pstm.setString(4, member.getUserphone());
result = pstm.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
if( result != 0 ) {
return true;
} else {
return false;
}
}
public MemberBean login(String userid, String userpw) {
String sql = "SELECT * FROM TBL_MEMBER tm "
+ "WHERE USERID = ? "
+ "AND USERPW = ? ";
MemberBean member = null;
try {
conn = DBconnection.getConnection();
pstm = conn.prepareStatement(sql);
pstm.setString(1, userid);
pstm.setString(2, userpw);
rs = pstm.executeQuery();
if( rs.next() ) {
member = new MemberBean();
member.setUserid(rs.getString(1));
member.setUserpw(rs.getString(2));
member.setUsername(rs.getString(3));
member.setUserphone(rs.getString(4));
}
} catch (Exception e) {
e.printStackTrace();
}
return member;
}
}login_view.jsp
<%@page import="com.codingbox.vo.MemberBean"%>
<%@page import="com.codingbox.dao.MemberDao"%>
<%@ 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>
<%
MemberDao mdao = new MemberDao();
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
MemberBean member = mdao.login(userid, userpw);
if(member != null){
// 로그인 성공
session.setAttribute("session_id", member);
%>
<script>
location.href ="main_view.jsp";
</script>
<%} else { // 로그인 실패 %>
<script>
alert("아이디 또는 패스워드를 확인해 주세요");
location.href ="login_view.jsp";
</script>
<%} %>
</body>
</html>결과값
아이디 : admin
패스워드 : admin123
login_db.jsp
<%@page import="com.codingbox.vo.MemberBean"%>
<%@page import="com.codingbox.dao.MemberDao"%>
<%@ 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>
<%
MemberDao mdao = new MemberDao();
String userid = request.getParameter("userid");
String userpw = request.getParameter("userpw");
MemberBean member = mdao.login(userid, userpw);
if(member != null){
// 로그인 성공
session.setAttribute("session_id", member);
%>
<script>
location.href ="main_view.jsp";
</script>
<%} else { // 로그인 실패 %>
<script>
alert("아이디 또는 패스워드를 확인해 주세요");
location.href ="login_view.jsp";
</script>
<%} %>
</body>
</html>결과값
성공시 main_view.jsp 이동
실패시 아이디 또는 패스워드를 확인해 주세요 창 띄운후
login_view.jsp 페이지로 이동
main_view.jsp
<%@page import="com.codingbox.vo.MemberBean"%>
<%@ 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>
<%
// String userid = (String)session.getAttribute("session_id");
MemberBean member
= (MemberBean)session.getAttribute("session_id");
if( member != null ){
%>
<script>
alert("<%= member.getUsername()%>님 안녕하세요"); // userid님 안녕하세요
</script>
<p>
<%= member.getUsername()%>님
<input type="button" value="로그아웃"
onclick="location.href='logout_db.jsp'">
</p>
<%} else { %>
<script>
alert("로그인 후 이용하세요!");
location.href = "login_view.jsp";
</script>
<%} %>
</body>
</html>결과값
이름으로 출력
⭐️내가만든쿠키⭐️