회원가입

function checkNull(value) { return (value === null || value.trim() === ''); }

<button type="button" onclick="clickIdCheck()" class="btn btn-success col-md-2">중복확인</button>

// 아이디 중복 확인 function idCheck() { let username = document.getElementById('username').value let url = `${root}/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') } }) }) }

// 비밀번호 유효성 검사 let passwordCheck = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/ msg = '비밀번호는 영문자, 숫자, 특수문자를 포함하여 8자 이상으로 입력해주세요.' if (!check(passwordCheck, password, 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

<form action="join_pro.jsp" name="joinForm" method="post"> <input type="hidden" name="duplicaed" id="duplicaed" value="false" /> <div class="input-group 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 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 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 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 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 d-md-flex justify-content-md-between"> <a href="javascript: history.back()" class="btn btn-lg btn-secondary">취소</a> <input type="button" class="btn btn-lg btn-primary" value="가입" onclick="checkUser()" /> </div> </form>

<%-- 회원 가입 처리 --%> <%@page import="users.service.UserService"%> <%@page import="users.service.UserServiceImpl"%> <%@page import="users.model.Users"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% Users user = new Users(); String username = request.getParameter("username"); String password = request.getParameter("password"); String name = request.getParameter("name"); String email = request.getParameter("email"); user.setUsername(username); user.setPassword(password); user.setName(name); user.setEmail(email); // 회원 정보 등록 요청 UserService userService = new UserServiceImpl(); int result = userService.join(user); String root = request.getContextPath(); if( result > 0 ) { // 로그인 화면으로 이동 response.sendRedirect(root + "/users/login.jsp"); } else { // 회원가입 페이지로 이동 response.sendRedirect(root + "/users/join.jsp?error"); } %>

package users.model; import java.util.Date; import lombok.Data; @Data public class Users { private String id; private String username; private String password; private String name; private String email; private Date regDate; private Date updDate; }

package users.service; import users.model.Users; public interface UserService { // 회원가입 public int join(Users user); // 아이디 중복 확인 public boolean idCheck(String username); }

package users.service; import users.data.UserDAO; import users.model.Users; public class UserServiceImpl implements UserService { private UserDAO userDAO = new UserDAO(); /** * 회원가입 */ @Override public int join(Users user) { int result = userDAO.join(user); if( result > 0 ) { System.out.println("회원 가입 처리 성공!"); } else { System.out.println("회원 가입 실패!"); } // 기본 회원 권한을 추가... return result; } /** * 아이디 중복 확인 */ @Override public boolean idCheck(String username) { boolean result = userDAO.idCheck(username); return result; } }

package users.data; import java.sql.SQLException; import java.util.UUID; import common.jdbc.JDBConnection; import users.model.PersistentLogins; import users.model.Users; public class UserDAO extends JDBConnection { /** * 회원 가입 * @param user 등록할 회원 정보 * @return 등록된 데이터 개수 */ public int join(Users user) { int result = 0; String sql = "INSERT INTO users (id, username, password, name, email, reg_date, upd_date) " + "VALUES (RAWTOHEX(SYS_GUID()), ?, ?, ?, ?, sysdate, sysdate)"; try { psmt = con.prepareStatement(sql); psmt.setString(1, user.getUsername()); psmt.setString(2, user.getPassword()); psmt.setString(3, user.getName()); psmt.setString(4, user.getEmail()); result = psmt.executeUpdate(); } catch (SQLException e) { System.err.println("회원 가입 중 오류 발생"); e.printStackTrace(); } return result; } /** * 아이디 중복 확인 * @param username * @return */ public boolean idCheck(String username) { // SQL 작성 String sql = " SELECT * " + " FROM users " + " WHERE username = ? "; try { psmt = con.prepareStatement(sql); psmt.setString( 1, username ); rs = psmt.executeQuery(); if( rs.next() ) { return true; // 아이디 중복됨 } return false; } catch(SQLException e) { System.err.println("아이디 중복 확인 시, 예외 발생"); e.printStackTrace(); } return false; } }

CREATE TABLE users ( id VARCHAR2(255) NOT NULL PRIMARY KEY, username VARCHAR2(100) NULL, password VARCHAR2(100) NULL, name VARCHAR2(50) NULL, email VARCHAR2(200) NULL, reg_date DATE DEFAULT sysdate NULL, upd_date DATE DEFAULT sysdate NULL );

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String root = request.getContextPath(); %> <c:set var="root" value="<%= root %>" />

<%= request.getContextPath() %>

<jsp:include page="${ root }/layout/import/link.jsp" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 공통 적용 --> <jsp:include page="/layout/main/import/common.jsp" /> <jsp:include page="/layout/main/import/meta.jsp" /> <jsp:include page="/layout/main/import/link.jsp" /> </head> <body> <jsp:include page="/layout/main/UI/header.jsp" /> <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-5 mb-5" > <form action="join_pro.jsp" name="joinForm" method="post"> <input type="hidden" name="duplicaed" id="duplicaed" value="false" /> <div class="input-group 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 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 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 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 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 d-md-flex justify-content-md-between"> <a href="javascript: history.back()" class="btn btn-lg btn-secondary">취소</a> <input type="button" class="btn btn-lg btn-primary" value="가입" onclick="checkUser()" /> </div> </form> </div> <jsp:include page="/layout/main/UI/footer.jsp" /> <!-- script --> <jsp:include page="/layout/main/import/script.jsp" /> <script> async function clickIdCheck() { let check = await idCheck() if( check ) { alert('중복된 아이디 입니다.') } else { alert('사용 가능한 아이디 입니다.') } } </script> </body> </html>

/** * javascript - script.js */ /** * 회원 가입 - 유효성 검사 */ 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 } // 아이디 중복 확인 function idCheck() { let username = document.getElementById('username').value let url = `${root}/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') } }) }) }

package common.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.Statement; public class JDBConnection { public Connection con; // 연결된 드라이버에 SQL을 요청할 객체를 생성하는 클래스 public Statement stmt; // SQL 실행 요청을 하는 클래스 public PreparedStatement psmt; // Statement 에서 ? 파라미터 확장기능을 추가로 제공하는 클래스 public ResultSet rs; // SQL 실행 결과를 받아오는 클래스 // 기본 생성자 public JDBConnection() { // JDBC 드라이버 로드 // Oracle try { // ojdbc8.jar 드라이버의 클래스를 로드한다. Class.forName("oracle.jdbc.OracleDriver"); // DB에 연결 // jdbc:oracle:thin - JDBC 드라이버 타입 (thin 타입) // localhost - 호스트 주소 (IP 주소), localhost 또는 127.0.0.1 은 현재 PC의 IP 를 가리킨다. // :1521 - 포트번호 (1521은 오라클 DB서버의 기본 포트 번호이다.) // :xe 또는 :orcl - SID (서비스 ID) //String url ="jdbc:oracle:thin:@localhost:1521:xe"; // 11g // String url ="jdbc:oracle:thin:@localhost:1521:orcl"; // 12c이상 String url = "jdbc:oracle:thin:@localhost:1521:orcl"; String id = "aloha"; String pw = "123456"; // 자바 프로그램에서 JDBC 드라이버를 연결시켜주는 클래스 // getConnection() 메소드로 DB에 연결 요청하고 생성된 Connection 객체를 반환받는다. con = DriverManager.getConnection(url, id, pw); // System.out.println("DB 연결 성공"); } catch (Exception e) { System.err.println("DB 연결 실패"); e.printStackTrace(); } } }

package users.data; import java.sql.SQLException; import java.util.UUID; import common.jdbc.JDBConnection; import users.model.PersistentLogins; import users.model.Users; public class UserDAO extends JDBConnection { /** * 회원 가입 * @param user 등록할 회원 정보 * @return 등록된 데이터 개수 */ public int join(Users user) { int result = 0; String sql = "INSERT INTO users (id, username, password, name, email, reg_date, upd_date) " + "VALUES (RAWTOHEX(SYS_GUID()), ?, ?, ?, ?, sysdate, sysdate)"; try { psmt = con.prepareStatement(sql); psmt.setString(1, user.getUsername()); psmt.setString(2, user.getPassword()); psmt.setString(3, user.getName()); psmt.setString(4, user.getEmail()); result = psmt.executeUpdate(); } catch (SQLException e) { System.err.println("회원 가입 중 오류 발생"); e.printStackTrace(); } return result; } }

package users.service; import users.model.Users; public interface UserService { // 회원가입 public int join(Users user); }

package users.service; import users.data.UserDAO; import users.model.PersistentLogins; import users.model.Users; public class UserServiceImpl implements UserService { private UserDAO userDAO = new UserDAO(); @Override public int join(Users user) { int result = userDAO.join(user); if( result > 0 ) { System.out.println("회원 가입 처리 성공!"); } else { System.out.println("회원 가입 실패!"); } return result; } }

<%-- 회원 가입 처리 --%> <%@page import="users.service.UserService"%> <%@page import="users.service.UserServiceImpl"%> <%@page import="users.model.Users"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% Users user = new Users(); String username = request.getParameter("username"); String password = request.getParameter("password"); String name = request.getParameter("name"); String email = request.getParameter("email"); user.setUsername(username); user.setPassword(password); user.setName(name); user.setEmail(email); // 회원 정보 등록 요청 UserService userService = new UserServiceImpl(); int result = userService.join(user); String root = request.getContextPath(); if( result > 0 ) { // 로그인 화면으로 이동 response.sendRedirect(root + "/users/login.jsp"); } else { // 회원가입 페이지로 이동 response.sendRedirect(root + "/users/join.jsp?error"); } %>