Programming/[2022.09.~] 쇼핑몰 웹 제작
JSP/Oracle 프로젝트 일지 - 3일차(22.09.19.)
슈도걸
2022. 9. 20. 00:13
[작성한 파일]-UserDAO.java-UserDTO.java -UserRegisterCheckServlet.java -UserRegisterServlet.java -join.jsp (회원가입 폼) -index.jsp //server.xml 수정 및 jdbc 드라이버 추가 |
 |
1. 기본적인 폼 작성 및 DB 연동 테스트
기존에 만들었던 폼을 싹 갈아엎고,
중복체크를 팝업창으로 띄워 해결하기위해
폼 안에 중복체크 버튼도 삽입했습니다.
스트랩부트 이용한 폼 작성과 중복체크 기능은
동빈나님의 영상을 많이 참고했습니다.
이정도만 만들어놓고 DB 연동 테스트 해보니까
INSERT 잘 되는걸 확인했습니다.
(동빈나님은 mysql로 db연동을 한 강의였고
유튜브에도 거의 회원가입 강의들은 mysql 연동이 대부분이어서
oracle db 연동은 혼자서 시도해본 연동인데
잘 성공해서 기분이 좋았습니닿ㅎㅎ)
2. 프론트 보완 + 칼럼 추가 및
주소찾기 API를 추가하여 아래처럼 폼 완성.
확실히 보기가 좋으니
뭔가 더 잘한 느낌이 나구나...
라고 한번 생각하게 됩니다 -ㅅ-
3. 구현영상
다음으로는 마이페이지를 구현해야 하는데
로그인을 했을 경우
회원정보 조회/수정이 가능한 페이지로
윤곽을 잡아놓고 있습니다.
join.jsp (회원가입 폼)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom.css">
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- <script src="js/bootstrap.js"></script> -->
<script type="text/javascript">
function registerCheckFunction() {
var u_id = $('#u_id').val();
$.ajax({
type: 'POST',
url: './UserRegisterCheckServelet',
data :{ u_id : u_id },
success : function(result){
if(result ==1) {
$('#checkMessage').html('사용할 수 있는 아이디입니다.');
$('#checkType').attr('class','modal-content panel-success');
}
else {
$('#checkMessage').html('사용할 수 없는 아이디입니다.');
$('#checkType').attr('class','modal-content panel-warning');
}
$('#checkModal').modal("show");
}
})
}
function passwordCheckFunction() {
var u_pwd1 = $('#u_pwd1').val();
var u_pwd2 = $('#u_pwd2').val();
if(u_pwd1 != u_pwd2){
$('#passwordCheckMessage').html('비밀번호가 서로 일치하지 않습니다.');
}else{
$('#passwordCheckMessage').html('');
}
}
</script>
<title> JSP AJAX 회원가입 </title>
</head>
<body>
<div class="container">
<form method="post" action="./userRegister" id="join">
<table class="table table-bordered table-hover" id="jointab" style="text-align: center;">
<thead>
<tr>
<th colspan="3"><h4>회원 등록 양식</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:110px;"><h5>아이디</h5></td>
<td colspan="2"><input class="form-control bor10" type="text" style="float:left; width:60%; display:inline-block;" id="u_id" name="u_id" maxLength="20" required>
<button class="btn btn-primary" style="float:left; margin-left:10px;" onclick="registerCheckFunction()" type="button">중복체크</button></td>
</tr>
<tr>
<td style="width:110px;"><h5>비밀번호</h5></td>
<td colspan="2"><input class="form-control bor10" type="password" id="u_pwd1" name="u_pwd1" maxLength="20" placeholder="비밀번호" required></td>
</tr>
<tr>
<td style="width:110px;"><h5>비밀번호 확인</h5></td>
<td colspan="2"><input class="form-control bor10" type="password" id="u_pwd2" onkeyup="passwordCheckFunction()" name="u_pwd2" maxLength="20" placeholder="비밀번호 확인" required></td>
</tr>
<tr>
<td style="width:110px;"><h5>닉네임</h5></td>
<td colspan="2"><input class="form-control bor10"type="text" id="u_nickname" name="u_nickname" maxLength="20" required></td>
</tr>
<tr>
<td style="width:110px;"><h5>이름</h5></td>
<td colspan="2"><input class="form-control bor10" type="text" id="u_name" name="u_name" maxLength="20" required></td>
</tr>
<tr>
<td style="width:110px;"><h5>나이</h5></td>
<td colspan="2"><input class="form-control bor10" type="text" id="u_age" name="u_age" maxLength="20" required></td>
</tr>
<tr>
<td style="width: 110px;"><h5>성별</h5></td>
<td>
<div class="form-group" style="text-align: center; margin: 0 auto;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="u_gender" autocomplete="off" value="남자" checked>남자
</label>
<label class="btn btn-primary">
<input type="radio" name="u_gender" autocomplete="off" value="여자">여자
</label>
</div>
</div>
</td>
<td id="numbox">
<h5 style="width:110px">핸드폰 번호</h5>
<div class="nums">
<select name="u_phone1" class="form-control bor10" style="width:100px;">
<option value="010" selected> 010 </option>
<option value="011"> 011 </option>
<option value="016"> 016 </option>
<option value="017"> 017 </option>
<option value="018"> 018 </option>
<option value="019"> 019 </option>
</select>
- <input class="form-control bor10" type="text" style="max-width:100px;" name="u_phone2" id="u_phone2" size="10" maxlength="4" required>
- <input class="form-control bor10" type="text" style="max-width:100px;" name="u_phone3" id="u_phone3" size="10" maxlength="4" required>
</div>
</td>
</tr>
<tr>
<td style="width:110px;"><h5>이메일</h5></td>
<td colspan="2"><input class="form-control bor10" type="text" id="u_email" name="u_email" maxLength="40"></td>
</tr>
<tr>
<td style="width:110px;"><h5>주소</h5></td>
<td colspan="2">
<input class="form-control bor10" type="text" style="width:20%; display:inline-block; float:left;" id="zipcode" name="u_postcode" maxLength="8" placeholder="우편번호" readonly="readonly">
<input class="form-control bor10" type="text" style="width:60%; display:inline-block; float:left; margin-left:10px;" id="addr1" name="u_addr1" maxLength="40" placeholder="주소찾기를 클릭해서 작성해 주세요." readonly="readonly">
<button class="btn btn-primary" id="postSearch" type="button">주소찾기</button></td>
</tr>
<tr>
<td>
<h5> 상세주소 </h5>
</td>
<td colspan="2">
<input class="form-control bor10" style="width:75%; display:inline-block; float:left;" type="text" id="addr2" name="u_addr2" maxLength="40" placeholder="건물이름, 동, 호수를 입력해주세요" required>
</td>
</tr>
<tr>
<td style="text-align:left" colspan="2"><h5 style="color:red; border-left:none;" id="passwordCheckMessage"></h5></td>
<td><input class="btn btn-primary pull-right" type="submit" value="회원가입"></td>
</tr>
</tbody>
</table>
</form>
</div>
<!-- 주소찾기 API -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
$("#postSearch").click(function() {
new daum.Postcode({
oncomplete: function(data) {
join.zipcode.value=data.zonecode;
join.addr1.value=data.roadAddress;
}
}).open();
});
</script>
<!-- 주소찾기 API 끝 -->
<!-- 회원가입 클릭시 모달 -->
<%
String messageContent = null;
if(session.getAttribute("messageContent")!=null) {
messageContent = (String) session.getAttribute("messageContent");
}
String messageType = null;
if(session.getAttribute("messageType") != null){
messageType = (String) session.getAttribute("messageType");
}
if(messageContent != null){
%>
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content <%if(messageType.equals("오류 메시지")) out.println("panel-warning"); else out.println("panel-success");%>">
<!-- if문 결과에 따라 -->
<!-- <div class="modal-content panel-warning" > -->
<!-- 또는 -->
<!-- <div class="modal-content panel-success" > -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">
<%= messageType %>
</h4>
</div>
<div class="modal-body">
<%= messageContent %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">확인</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('#messageModal').modal('show');
</script>
<%
session.removeAttribute("messageContent");
session.removeAttribute("messageType");
}
%>
<!-- 중복확인 모달 -->
<div class="modal fade" id="checkModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div id="checkType" class="modal-content panel-info">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">
확인 메세지
</h4>
</div>
<div>
<h5 class="modal-body" id="checkMessage"></h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">확인</button>
</div>
</div>
</div>
</div>
</div>
UserDAO.java
package user;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Timestamp;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
public class UserDAO {
UserDAO() {
}
private static UserDAO instance = new UserDAO();
public static UserDAO getInstance(){
return instance;
}
// public Connection getConnection() throws Exception {
// Connection conn = null;
// Context ctx = new InitialContext();
// DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/oracle");
// conn = ds.getConnection();
// return conn;
// }
//
public Connection getConnection() throws Exception {
Context ctx = new InitialContext();
DataSource ds = (DataSource) ctx.lookup("java:comp/env/jdbc/oracle");
return ds.getConnection();
}
public int registerCheck(String u_id) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String SQL = "SELECT * FROM userT WHERE u_id = ?";
try {
conn = getConnection();
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, u_id);
rs = pstmt.executeQuery();
if(rs.next() || u_id.equals("")) {
return 0; //이미 존재하는 회원 ID 또는 아무것도 입력하지 않았을 경우
}else {
return 1; //가입 가능한 회원 ID
}
}catch (Exception e) {
e.printStackTrace();
}finally {
try {
if(rs!=null) rs.close();
if(pstmt !=null) pstmt.close();
}catch (Exception e){
e.printStackTrace();
}
}
return -1; // 데이터 베이스 오류
}
public int register(String u_id, String u_pwd, String u_nickname, String u_name, String u_age,
String u_gender, String u_phone1, String u_phone2, String u_phone3, String u_email,
String u_postcode, String u_addr1, String u_addr2) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String SQL = "INSERT INTO userT VALUES (?, ?, ?, ?, ?, "
+ "?, ?, ?, ?, ?,"
+ "?, ?, ?, sysdate)";
try {
conn = getConnection();
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, u_id);
pstmt.setString(2, u_pwd);
pstmt.setString(3, u_nickname);
pstmt.setString(4, u_name);
pstmt.setInt(5, Integer.parseInt(u_age));
pstmt.setString(6, u_gender);
pstmt.setString(7, u_phone1);
pstmt.setString(8, u_phone2);
pstmt.setString(9, u_phone3);
pstmt.setString(10, u_email);
pstmt.setString(11, u_postcode);
pstmt.setString(12, u_addr1);
pstmt.setString(13, u_addr2);
//pstmt.setTimestamp(14, u_date);
;
//결과를 추출하는 게 아니라 실행시키는 것이기 때문에
//executeQuery()가 아닌 executeUpdate()사용
return pstmt.executeUpdate(); //성공적으로 등록되면 값은 1(한명의 회원정보가 추가되므로)
}catch (Exception e) {
e.printStackTrace();
}finally {
try {
if(rs!=null) rs.close();
if(pstmt !=null) pstmt.close();
}catch (Exception e){
e.printStackTrace();
}
}
return -1; // 데이터 베이스 오류
}
}