Servlet&JSP
Step04_Final (users, 회원가입, 로그인처리)
bono.html
2022. 8. 22. 12:13
| 회원가입 폼 | signup_form.jsp |
| 가입 | signup.jsp |
| 로그인 폼 | login_form.jsp |
| 로그인 | login.jsp |
| 로그아웃 | logout.jsp |
index.jsp 에서 회원가입, 로그인, 로그아웃을 처리하기 위한 jsp들을 학습해보자.
UsersDto.java
UsersDao.java
package test.users.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import test.users.dto.UsersDto;
import test.util.DbcpBean;
public class UsersDao {
private static UsersDao dao;
//외부에서 객체 생성할수 없도록
private UsersDao() {}
//참조값을 리턴해주는 static 메소드
public static UsersDao getInstance() {
if(dao==null) {
dao=new UsersDao();
}
return dao;
}
//비밀 번호를 수정 반영하는 메소드
public boolean updatePwd(UsersDto dto) {
Connection conn = null;
PreparedStatement pstmt = null;
int flag = 0;
try {
conn = new DbcpBean().getConn();
//실행할 sql 문
String sql = "UPDATE users"
+ " SET pwd=?"
+ " WHERE id=? AND pwd=?";
pstmt = conn.prepareStatement(sql);
//? 에 값 바인딩하기
pstmt.setString(1, dto.getNewPwd());
pstmt.setString(2, dto.getId());
pstmt.setString(3, dto.getPwd());
flag = pstmt.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
if (flag > 0) {
return true;
} else {
return false;
}
}
//인자로 전달된 아이디에 해당하는 가입정보를 삭제하는 메소드
public boolean delete(String id) {
Connection conn = null;
PreparedStatement pstmt = null;
int flag = 0;
try {
conn = new DbcpBean().getConn();
//실행할 insert, update, delete 문 구성
String sql = "DELETE FROM users"
+ " WHERE id=?";
pstmt = conn.prepareStatement(sql);
//? 에 바인딩할 내용이 있으면 바인딩한다.
pstmt.setString(1, id);
flag = pstmt.executeUpdate(); //sql 문 실행하고 변화된 row 갯수 리턴 받기
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
if (flag > 0) {
return true;
} else {
return false;
}
}
//회원 가입 정보를 수정반영하는 메소드
public boolean update(UsersDto dto) {
Connection conn = null;
PreparedStatement pstmt = null;
int flag = 0;
try {
conn = new DbcpBean().getConn();
//실행할 insert, update, delete 문 구성
String sql = "UPDATE users"
+ " SET email=?, profile=?"
+ " WHERE id=?";
pstmt = conn.prepareStatement(sql);
//? 에 바인딩할 내용이 있으면 바인딩한다.
pstmt.setString(1, dto.getEmail());
pstmt.setString(2, dto.getProfile());
pstmt.setString(3, dto.getId());
flag = pstmt.executeUpdate(); //sql 문 실행하고 변화된 row 갯수 리턴 받기
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
if (flag > 0) {
return true;
} else {
return false;
}
}
//인자로 전달된 아이디에 해당하는 가입정보를 리턴해주는 메소드
public UsersDto getData(String id) {
//회원 정보를 담을 UsersDto
UsersDto dto=null;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = new DbcpBean().getConn();
//select 문 작성
String sql = "SELECT pwd,email,profile,regdate"
+ " FROM users"
+ " WHERE id=?";
pstmt = conn.prepareStatement(sql);
// ? 에 바인딩 할게 있으면 여기서 바인딩한다.
pstmt.setString(1, id);
//select 문 수행하고 ResultSet 받아오기
rs = pstmt.executeQuery();
//while문 혹은 if문에서 ResultSet 으로 부터 data 추출
if (rs.next()) {
dto=new UsersDto();
dto.setId(id);
dto.setPwd(rs.getString("pwd"));
dto.setEmail(rs.getString("email"));
dto.setProfile(rs.getString("profile"));
dto.setRegdate(rs.getString("regdate"));
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (rs != null)
rs.close();
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
return dto;
}
//인자로 전달되는 dto 에 있는 id, pwd 가 유효한 정보인지 여부를 리턴해 주는 메소드
public boolean isValid(UsersDto dto) {
//맞는 정보인지 여부를 담을 지역 변수를 선언하고 초기값 false 넣어주기
boolean isValid=false;
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
//Connection 객체의 참조값 얻어오기
conn = new DbcpBean().getConn();
//실행할 sql 문 준비
String sql = "SELECT *"
+ " FROM users"
+ " WHERE id=? AND pwd=?";
pstmt = conn.prepareStatement(sql);
//? 에 값 바인딩하기
pstmt.setString(1, dto.getId());
pstmt.setString(2, dto.getPwd());
//query 문 수행하고 결과 받아오기
rs = pstmt.executeQuery();
if (rs.next()) { //만일 select 된 row 가 있으면
isValid=true;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (rs != null)
rs.close();
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
return isValid;
}
//회원 정보를 저장하는 메소드
public boolean insert(UsersDto dto) {
Connection conn = null;
PreparedStatement pstmt = null;
int flag = 0;
try {
conn = new DbcpBean().getConn();
//실행할 insert, update, delete 문 구성
String sql = "INSERT INTO users"
+ " (id, pwd, email, regdate)"
+ " VALUES(?, ?, ?, SYSDATE)";
pstmt = conn.prepareStatement(sql);
//? 에 바인딩할 내용이 있으면 바인딩한다.
pstmt.setString(1, dto.getId());
pstmt.setString(2, dto.getPwd());
pstmt.setString(3, dto.getEmail());
flag = pstmt.executeUpdate(); //sql 문 실행하고 변화된 row 갯수 리턴 받기
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (pstmt != null)
pstmt.close();
if (conn != null)
conn.close();
} catch (Exception e) {
}
}
if (flag > 0) {
return true;
} else {
return false;
}
}
}
signup_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>signup_form.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>회원 가입 폼 입니다.</h1>
<form action="signup.jsp" method="post" id="signupForm">
<div class="mb-3">
<label class="control-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id"/>
<small class="form-text text-muted">영문자 소문자로 시작하고 5글자~10글자 이내로 입력하세요</small>
<div class="invalid-feedback">사용할 수 없는 아이디 입니다.</div>
</div>
<div class="mb-3">
<label class="control-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text text-muted">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-3">
<label class="control-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" name="pwd2" id="pwd2"/>
</div>
<div class="mb-3">
<label class="control-label" for="email">이메일</label>
<input class="form-control" type="text" name="email" id="email"/>
<div class="invalid-feedback">이메일 형식에 맞게 입력하세요.</div>
</div>
<button class="btn btn-outline-primary" type="submit">가입</button>
</form>
</div>
<script>
//유효성 여부를 저장할 변수를 만들고 초기값 대입
let isIdValid=false;
let isPwdValid=false;
let isEmailValid=false;
// id 를 입력 할때 마다 호출되는 함수 등록
document.querySelector("#id").addEventListener("input", function(){
//input 요소의 참조값을 self 에 미리 담아 놓기
const self=this;
//일단 2개의 클래스를 모두 제거 한다음
self.classList.remove("is-valid");
self.classList.remove("is-invalid");
//1. 현재 입력한 아이디를 읽어와서
const inputId=this.value;
//아이디를 검증할 정규표현식 객체
const reg=/^[a-z].{4,9}$/;
//만일 입력한 아이디가 정규표현식을 통과 하지 못한다면 빨간색으로 표시하고 함수를 여기서 바로 종료 시키기
if(!reg.test(inputId)){
self.classList.add("is-invalid");
isIdValid=false;
return;
}
//2. 서버에 보내서(페이지 전환 없이)
//3. 사용 가능 여부를(이미 존재하는지 여부) 함수로 응답 받는다.
fetch("${pageContext.request.contextPath }/users/checkid.jsp?inputId="+inputId)
.then(function(response){
//서버에서 응답하는 문자열의 형식이 json 형식이면 response.json();
//그 이외의 형식이면 response.text(); 를 호출해서 리턴해 준다.
return response.json();
})
.then(function(data){
//서버에서 출력한 json 문자열이 object 로 변환되어서 함수에 전달된다.
console.log(data);
//data 는 {isExist:true} or {isExist:false} 형식의 object 이다.
if(data.isExist){//이미 존재하면 사용할수 없는 아이디
self.classList.add("is-invalid");
isIdValid=false;
}else{
self.classList.add("is-valid");
isIdValid=true;
}
});
});
//비밀번호를 확인 하는 함수
function checkPwd(){
document.querySelector("#pwd").classList.remove("is-valid");
document.querySelector("#pwd").classList.remove("is-invalid");
const pwd=document.querySelector("#pwd").value;
const pwd2=document.querySelector("#pwd2").value;
//비밀번호를 검증할 정규 표현식
let reg=/[\W]/;
//만일 비밀번호가 정규 표현식을 통과 하지 못한다면
if(!reg.test(pwd)){
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
return; //함수를 여기서 끝내라
}
if(pwd != pwd2){//만일 비밀번호 입력란과 확인란이 다르다면
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
}else{
document.querySelector("#pwd").classList.add("is-valid");
isPwdValid=true;
}
}
document.querySelector("#pwd").addEventListener("input", function(){
//비밀번호를 검증하는 함수 호출
checkPwd();
});
document.querySelector("#pwd2").addEventListener("input", function(){
checkPwd();
});
document.querySelector("#email").addEventListener("input", function(){
this.classList.remove("is-valid");
this.classList.remove("is-invalid");
//입력한 이메일
const inputEmail=this.value;
//이메일을 검증할 정규 표현식
const reg=/@/;
if(!reg.test(inputEmail)){
this.classList.add("is-invalid");
isEmailValid=false;
}else{
this.classList.add("is-valid");
isEmailValid=true;
}
});
//폼에 submit 이벤트가 일어 났을때 실행할 함수 등록
document.querySelector("#signupForm").addEventListener("submit", function(event){
//폼 전체의 유효성 여부
let isFormValid = isIdValid && isPwdValid && isEmailValid;
if(!isFormValid){
//폼 제출 막기
event.preventDefault();
}
});
</script>
</body>
</html>
signup.jsp
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 폼 전송되는 아이디, 비밀번호, 이메일 추출
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
String email=request.getParameter("email");
//2. DB 에 저장
UsersDto dto=new UsersDto();
dto.setId(id);
dto.setPwd(pwd);
dto.setEmail(email);
boolean isSuccess=UsersDao.getInstance().insert(dto);
//3. 결과 응답하기
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/signup.jsp</title>
</head>
<body>
<h1>알림</h1>
<%if(isSuccess){ %>
<p>
<strong><%=id %></strong>님 가입 되었습니다.
<a href="loginform.jsp">로그인 하러 가기</a>
</p>
<%}else{ %>
<p>
가입이 실패 했습니다.
<a href="signup_form.jsp">다시 가입하러 가기</a>
</p>
<%} %>
</body>
</html>
login_form.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//GET 방식 파라미터 url 이라는 이름으로 전달되는 값이 있는지 읽어와 본다
String url=request.getParameter("url");
//만일 넘어오는 값이 없다면
if(url==null){
//로그인 후에 인덱스 페이지로 갈수 있도록 한다.
String cPath=request.getContextPath();
url=cPath+"/index.jsp";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/loginform.jsp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>로그인 폼</h1>
<form action="login.jsp" method="post">
<!-- 로그인 성공후 어디로 갈지에 대한 정보를 url 이라는 파라미터 명으로 같이 전송되도록 한다. -->
<input type="hidden" name="url" value="<%=url%>"/>
<div>
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id"/>
</div>
<div>
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
</div>
<button class="btn btn-primary" type="submit">로그인</button>
</form>
</div>
</body>
</html>
<!-- 로그인 성공후 어디로 갈지에 대한 정보를 url 이라는 파라미터 명으로 같이 전송되도록 한다. -->
<input type="hidden" name="url" value="<%=url%>"/>이동할 경로 정보를 같이 전송해야 로그인 성공 후 원하는 곳으로 이동하는 코드를 작성하기에 편리하다.
login.jsp
<%@page import="java.net.URLEncoder"%>
<%@page import="test.users.dao.UsersDao"%>
<%@page import="test.users.dto.UsersDto"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//로그인후 가야할 목적지 정보
String url=request.getParameter("url");
//로그인 실패를 대비해서 목적지 정보를 인코딩한 결과도 준비한다.
String encodedUrl=URLEncoder.encode(url);
//1. 폼 전송되는 아이디, 비밀번호 읽어오기
String id=request.getParameter("id");
String pwd=request.getParameter("pwd");
//2. DB 에 실제로 존재하는 맞는 정보인지 확인 한다.
UsersDto dto=new UsersDto();
dto.setId(id);
dto.setPwd(pwd);
boolean isValid=UsersDao.getInstance().isValid(dto);
if(isValid){//만일 아이디 비밀번호가 유효한 정보이면
//로그인 처리를 한다.
session.setAttribute("id", id);
}
//3. 응답
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/login.jsp</title>
</head>
<body>
<div class="container">
<h1>알림</h1>
<%if(isValid){ %>
<p>
<strong><%=id %></strong> 님 로그인 되었습니다.
<a href="<%=url%>">확인</a>
</p>
<%}else{ %>
<p>
아이디 혹은 비밀번호가 틀려요
<a href="${pageContext.request.contextPath }/users/loginform.jsp?url=<%=encodedUrl%>">다시시도</a>
</p>
<%} %>
</div>
</body>
</html>
logout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//session scope 에 "id" 라는 키값으로 저장된 값 삭제하기
session.removeAttribute("id");
//session.invalidate(); //세션 초기화
//응답하기
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/logout.jsp</title>
</head>
<body>
<script>
alert("로그 아웃 되었습니다.");
location.href="${pageContext.request.contextPath }/index.jsp";
</script>
</body>
</html>