νμ κ°μ
νμ κ°μ
κΈ°λ₯μ ꡬνν©λλ€.
νλ©΄
μμ μμ
1.
join.jsp
2.
users.sql
4.
UserDAO.java
5.
UserService.java
6.
UserServiceImpl.java
7.
UserServlet.java
8.
script.js
a.
μμ΄λ μ€λ³΅ μ²΄ν¬ λΉλκΈ° μμ²
b.
μ ν¨μ± κ²μ¬
μ½λ
join.jsp
<%@ include file="/layout/jstl.jsp" %>
<%@ include file="/layout/common.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>projectπ» - ALOHA CLASSπ΄</title>
<jsp:include page="/layout/meta.jsp" />
<jsp:include page="/layout/link.jsp" />
</head>
<body>
<jsp:include page="/layout/header.jsp" />
<%-- [Contents] ######################################################### --%>
<main>
<div class="px-4 py-5 mt-5 text-center">
<h1 class="display-5 fw-bold text-body-emphasis">νμ κ°μ
</h1>
</div>
<!-- νμ κ°μ
μμ -->
<div class="container shop p-1 p-md-2 p-lg-4 mb-5" >
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-6">
<form action="${ root }/users/join" name="joinForm" method="post">
<input type="hidden" name="duplicaed" id="duplicaed" value="false" />
<div class="input-group mx-0 mb-3 row">
<label for="username" class="input-group-text col-md-4" id="lb_username">μμ΄λ</label>
<input type="text" class="form-control col-md-6"
name="username" id="username" placeholder="μμ΄λ" required>
<button type="button" onclick="clickIdCheck()" class="btn btn-success col-md-2">μ€λ³΅νμΈ</button>
</div>
<div class="input-group mx-0 mb-3 row">
<label for="password" class="input-group-text col-md-4" id="lb_password">λΉλ°λ²νΈ</label>
<input type="password" class="form-control col-md-8"
name="password" id="password" placeholder="λΉλ°λ²νΈ" required>
</div>
<div class="input-group mx-0 mb-3 row">
<label for="password_confirm" class="input-group-text col-md-4" id="lb_password_confirm">λΉλ°λ²νΈ νμΈ</label>
<input type="password" class="form-control col-md-8"
name="password_confirm" id="password_confirm" placeholder="λΉλ°λ²νΈ νμΈ" required>
</div>
<div class="input-group mx-0 mb-3 row">
<label for="name" class="input-group-text col-md-4" id="lb_name">μ΄λ¦</label>
<input type="text" class="form-control col-md-8"
name="name" id="name" placeholder="μ΄λ¦" required>
</div>
<div class="input-group mx-0 mb-3 row">
<label for="email" class="input-group-text col-md-4" id="lb_email">μ΄λ©μΌ</label>
<input type="text" class="form-control col-md-8"
name="email" id="email" placeholder="μ΄λ©μΌ">
</div>
<div class="d-grid gap-2 mt-5 mb-5">
<input type="button" class="btn btn-lg btn-primary" value="κ°μ
" onclick="checkUser()" />
<a href="javascript: history.back()" class="btn btn-lg btn-secondary">μ·¨μ</a>
</div>
</form>
</div>
</div>
</div>
</main>
<%-- [Contents] ######################################################### --%>
<jsp:include page="/layout/footer.jsp" />
<jsp:include page="/layout/script.jsp" />
<script>
async function clickIdCheck() {
// μμ΄λ μ ν¨μ± κ²μ¬
let username = document.getElementById("username").value
let usernameCheck = /^[a-zA-Z0-9γ±-γ
γ
-γ
£κ°-ν£]{5,20}$/
let msg = 'μμ΄λλ νκΈ, μλ¬Έμ, μ«μ 5~20 μλ‘ μ
λ ₯ν΄μ£ΌμΈμ.'
if(!usernameCheck.test(username)) {
alert(msg)
return false
}
let check = await idCheck()
if( check ) {
alert('μ€λ³΅λ μμ΄λ μ
λλ€.')
} else {
alert('μ¬μ© κ°λ₯ν μμ΄λ μ
λλ€.')
}
}
</script>
</body>
</html>
HTML
볡μ¬
users.sql
DROP TABLE IF EXISTS users;
CREATE TABLE `aloha`.`users` (
`no` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`id` VARCHAR(64) NOT NULL UNIQUE,
`username` VARCHAR(100) NOT NULL UNIQUE,
`password` VARCHAR(100) NOT NULL,
`name` VARCHAR(100) NOT NULL,
`email` VARCHAR(100) NULL,
`created_at` TIMESTAMP NOT NULL DEFAULT now(),
`updated_at` TIMESTAMP NOT NULL DEFAULT now()
) COMMENT = 'νμ';
SQL
볡μ¬
package board.DTO;
import java.util.Date;
import com.alohaclass.jdbc.annotation.Column;
import com.alohaclass.jdbc.annotation.Pk;
import com.alohaclass.jdbc.annotation.Table;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Table("users")
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Users {
@Pk
private int no;
private String id;
private String username;
private String password;
@Column(exist = false)
private String passwordConfirm;
private String name;
private String email;
private Date createdAt;
private Date updatedAt;
}
Java
볡μ¬
UserDAO.java
package board.DAO;
import com.alohaclass.jdbc.dao.BaseDAOImpl;
import board.DTO.Users;
public class UserDAO extends BaseDAOImpl<Users> {
}
Java
볡μ¬
UserService.java
package board.Service;
import board.DTO.Users;
public interface UserService {
// νμκ°μ
public int join(Users user);
// μμ΄λ μ€λ³΅ νμΈ
public boolean idCheck(String username);
}
Java
볡μ¬
UserServiceImpl.java
package board.Service;
import java.util.HashMap;
import java.util.Map;
import org.mindrot.jbcrypt.BCrypt;
import board.DAO.UserDAO;
import board.DTO.Users;
public class UserServiceImpl implements UserService {
private UserDAO userDAO = new UserDAO();
@Override
public int join(Users user) {
try {
// λΉλ°λ²νΈ μνΈν
String password = user.getPassword();
String encodedPassword = BCrypt.hashpw(password, BCrypt.gensalt());
user.setPassword(encodedPassword);
// νμ λ±λ‘
int result = userDAO.insert(user);
return result; // λ±λ‘ μ±κ³΅
} catch (Exception e) {
e.printStackTrace();
}
return 0; // λ±λ‘ μ€ν¨
}
@Override
public boolean idCheck(String username) {
Map<String, Object> map = new HashMap<>();
map.put("username", username);
Object user = null;
try {
user = userDAO.selectBy(map);
} catch (Exception e) {
e.printStackTrace();
}
// μμ΄λ μ€λ³΅X
if( user == null ) {
return false;
}
return true;
}
}
Java
볡μ¬
UserServlet.java
package board.servlet;
import java.io.IOException;
import java.util.UUID;
import board.DTO.Users;
import board.Service.UserService;
import board.Service.UserServiceImpl;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/users/*")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private UserService userService = new UserServiceImpl();
/**
* [GET]
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// url : /users/idCheck
String root = request.getContextPath();
String path = request.getPathInfo(); // /idCheck
// /idCheck - μμ΄λ μ€λ³΅ νμΈ
if( path.equals("/idCheck") ) {
System.out.println("μμ΄λ μ€λ³΅ νμΈ...");
String username = request.getParameter("username");
boolean check = userService.idCheck(username);
response.getWriter().print(check);
}
// /join - νμκ°μ
νλ©΄
if( path.equals("/join") ) {
String url = "/page/join.jsp";
request.getRequestDispatcher(url).forward(request, response);
}
}
/**
* [POST]
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String root = request.getContextPath(); // /Board
String path = request.getPathInfo(); // /join
// /join - νμκ°μ
if( path.equals("/join") ) {
System.out.println("νμκ°μ
μμ² μ²λ¦¬...");
String username = request.getParameter("username");
String password = request.getParameter("password");
String name = request.getParameter("name");
String email = request.getParameter("email");
Users user = Users.builder()
.id( UUID.randomUUID().toString() )
.username(username)
.password(password)
.name(name)
.email(email)
.build();
int result = userService.join(user);
// νμκ°μ
μ±κ³΅
if( result > 0 ) {
response.sendRedirect(root + "/");
}
// νμκ°μ
μ€ν¨
else {
response.sendRedirect(root + "/join.jsp?error=true");
}
}
}
}
Java
볡μ¬
script.js
1.
μμ΄λ μ€λ³΅ μ²΄ν¬ λΉλκΈ° μμ²
2.
μ ν¨μ± κ²μ¬
β’
μμ΄λ μ€λ³΅ μ²΄ν¬ λΉλκΈ° μμ²
// μμ΄λ μ€λ³΅ νμΈ
function idCheck() {
let username = document.getElementById('username').value
let url = `/Board/users/idCheck`
let data = {
'username' : username,
}
return new Promise((resolve, reject) => {
// jQuery λ‘ AJAX μμ²
$.ajax({
type : 'GET', // μμ² λ©μλ
url : url, // μμ² URL
data : data, // μμ² λ°μ΄ν°
contentType : 'application/json', // μμ² λ°μ΄ν° νμ
dataType : 'html', // μλ΅ λ°μ΄ν° νμ
// μμ² μ±κ³΅
success : function(response, status) {
// response : μλ΅ λ°μ΄ν°
// status : μλ΅ μν
if( response == '' ) {
alert('μλ΅ λ©μμ§κ° μμ΅λλ€')
}
resolve(response == 'true' ? true : false)
},
// μλ¬
error : function(xhr, status) {
// xhr : XMLHttpRequest κ°μ²΄
// status : μλ΅ μν
alert('μλ¬ λ°μ')
reject('error')
}
})
})
}
JavaScript
볡μ¬
β’
μ ν¨μ± κ²μ¬
/**
* νμ κ°μ
- μ ν¨μ± κ²μ¬
*/
async function checkUser() {
let form = document.joinForm
// μμ΄λ μ€λ³΅ νμΈ
let idDuplicated = await idCheck()
if( idDuplicated ) {
alert('μ€λ³΅λ μμ΄λ μ
λλ€.')
return false
}
if( validateUser() ) {
form.submit()
// μ ν¨μ± κ²μ¬ ν΅κ³Ό
return true
}
}
function validateUser() {
let form = document.joinForm
let username = form.username
let password = form.password
let password_confirm = form.password_confirm
let name = form.name
let email = form.email
let msg = ''
// μμ΄λ μ ν¨μ± κ²μ¬
let usernameCheck = /^[a-zA-Z0-9γ±-γ
γ
-γ
£κ°-ν£]{5,20}$/
msg = 'μμ΄λλ νκΈ, μλ¬Έμ, μ«μ 5~20 μλ‘ μ
λ ₯ν΄μ£ΌμΈμ.'
if (!check(usernameCheck, username, msg)) return false
// λΉλ°λ²νΈ μ ν¨μ± κ²μ¬
let passwordCheck = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
msg = 'λΉλ°λ²νΈλ μλ¬Έμ, μ«μ, νΉμλ¬Έμλ₯Ό ν¬ν¨νμ¬ 8μ μ΄μμΌλ‘ μ
λ ₯ν΄μ£ΌμΈμ.'
if (!check(passwordCheck, password, msg)) return false
// λΉλ°λ²νΈ νμΈ κ²μ¬
msg = 'λΉλ°λ²νΈμ λΉλ°λ²νΈ νμΈμ΄ λΆμΌμΉν©λλ€.'
if( password.value != password_confirm.value ) {
alert(msg)
return false
}
// μ΄λ¦ μ ν¨μ± κ²μ¬
let nameCheck = /^[a-zA-Zγ±-γ
γ
-γ
£κ°-ν£]{1,20}$/
msg = 'μ΄λ¦μ νκΈ λλ μλ¬Έ 20μ μ΄λ΄λ‘ μ
λ ₯ν΄μ£ΌμΈμ.'
if (!check(nameCheck, name, msg)) return false
// μ΄λ©μΌ μ ν¨μ± κ²μ¬
let emailCheck = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i
msg = 'μ΄λ©μΌ νμμ΄ μ¬λ°λ₯΄μ§ μμ΅λλ€.'
if (!check(emailCheck, email, msg)) return false
return true
}
// μ κ·ννμ μ ν¨μ± κ²μ¬ ν¨μ
function check(regExp, element, msg) {
if(regExp.test(element.value)) {
return true
}
alert(msg)
element.select()
element.focus()
return false
}
JavaScript
볡μ¬