반응형
join.jsp 화면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css?after">
<title>JSP Ajax fxProbest</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- 자바스크립트 시작 -->
<script type="text/javascript">
function registerCheckFunction() {
var userID = $('#userID').val();
// ajax 비동기 통신
$.ajax({
type : 'POST',
//아래의 url로 보내줌
url : './UserRegisterCheckServlet',
data : {
userID : userID
},
//성공했다면 result 값을 반환받음
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");
}
});
}
// javascript 비밀번호 체크 기능
function passwordCheckFunction() {
var userPassword1 = document.getElementById("userPassword1").value;
var userPassword2 = document.getElementById("userPassword2").value;
if (userPassword1 != userPassword2) {
document.getElementById("passwordCheckMessage").innerHTML = "비밀번호가 틀립니다. 확인해주세요.";
} else {
document.getElementById("passwordCheckMessage").innerHTML = "비밀번호가 같습니다.";
}
}
</script>
</head>
<body>
<%
//userID를 초기화 해주고 session에서 userID값을 가져옵니다. 만약에 null이 아니라면 userID에 가져온 userID값을 넣어줍니다.
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
%>
<!-- 부트스트랩을 이용하여 메뉴를 만들어 주도록 하겠씁니다. -->
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.jsp">ProbestSoft members chat</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">메인</a>
</ul>
<%
// userID가 null 이면 로그인이 되지 않은 경우
if (userID == null) {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="buton" aria-haspopup="true"
aria-expand="false">접속하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="login.jsp">로그인</a>
<li><a href="join.jsp">회원가입</a>
</ul></li>
</ul>
<%
// userID가 null이 아닐 경우 로그인이 되었다는 것.
} else {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expand="false">회원관리<span class="caret"></span></a></li>
</ul>
<%
}
%>
</div>
</nav>
<div class="container">
<form method="post" action="./userRegister">
<table class="table table-bordered table-hover"
style="text-align: center; border: 1px solid #dddddd">
<thead>
<tr>
<th colspan="3"><h4>회원 등록 양식</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 110px;"><h5>아이디</h5></td>
<td><input class="form-control" type="text" id="userID" name="userID"
maxlength="20" placeholder="아이디를 입력해주세요">
<td style="width: 110px;"><button class="btn btn-primary"
onclick="registerCheckFunction();" type="button">중복체크</button>
</td>
</tr>
<tr>
<td style="width: 110px;"><h5>비밀번호</h5></td>
<td colspan="2"><input onkeyup="passwordCheckFunction();"
class="form-control" id="userPassword1" type="password"
name="userPassword1" maxlength="20" placeholder="비밀번호를 입력하세요.">
</tr>
<tr>
<td style="width: 110px;"><h5>비밀번호 확인</h5></td>
<td colspan="2"><input onkeyup="passwordCheckFunction();"
class="form-control" id="userPassword2" type="password"
name="userPassword2" maxlength="20" placeholder="비밀번호 확인을 해주세요.">
</tr>
<tr>
<td style="width: 110px;"><h5>이름</h5></td>
<td colspan="2"><input class="form-control" id="userName"
type="text" name="userName" maxlength="20"
placeholder="이름을 입력해 주세요.">
</tr>
<tr>
<td style="width: 110px;"><h5>나이</h5></td>
<td colspan="2"><input class="form-control" id="userAge"
type="number" name="userAge" maxlength="20"
placeholder="나이을 입력해 주세요.">
</tr>
<tr>
<td style="width: 110px;"><h5>성별</h5></td>
<td colspan="2">
<div class="form-group"
style="text-align: center; margin: 0 auto;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"> <input
type="radio" name="userGender" autocomplete="off" value="남자"
checked>남자
</label> <label class="btn btn-primary"> <input type="radio"
name="userGender" autocomplete="off" value="여자">여자
</label>
</div>
</div>
</td>
</tr>
<tr>
<td style="width: 110px;"><h5>이메일</h5></td>
<td colspan="2"><input class="form-control" id="userEmail"
type="email" name="userEmail" maxlength="20"
placeholder="나이을 입력해 주세요.">
</tr>
<tr>
<!-- 비밀번호를 실시간으로 확인하여 같은지 확인. -->
<td style="text-align: left;" colspan="3">
<h5 style="color: red;" id="passwordCheckMessage"></h5> <input
class="btn btn-primary pull-right" type="submit" value="등록">
</tr>
</tbody>
</table>
</form>
</div>
<%
//서버로부터 내용을 받아왔는지 확인.
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");%>">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<!-- bootstrap sr-only: 화면상에 출력하지 않음 -->
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">
<%=messageType%>
</h4>
</div>
<div class="modal-body">
<%=messageContent%>
</div>
<div class="modal-footer">
<!-- data-dissmiss="modal" 자바스크립트에의해 닫기 역할을 하는 속성 -->
<button type="button" class="btn btn-primary"
data-dissmiss="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>
<!-- bootstrap sr-only: 화면상에 출력하지 않음 -->
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">확인 메시지</h4>
</div>
<div id="checkMessage" class="modal-body"></div>
<div class="modal-footer">
<!-- data-dissmiss="modal" 자바스크립트에의해 닫기 역할을 하는 속성 -->
<button type="button" class="btn btn-primary"
data-dissmiss="modal">확인</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
UserDAO
package user;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
public class UserDAO {
DataSource dataSource;
public UserDAO() {
try {
//이건 뭐야?
InitialContext initContext = new InitialContext();
// 실질적으로 소스에 접속할 수 있도록 함
Context envContext = (Context) initContext.lookup("java:/comp/env");
// 데이터 소스 초기화
dataSource = (DataSource) envContext.lookup("jdbc/UserChat");
}catch (Exception e) {
e.printStackTrace();
}
}
//userID와 userPassword를 받아서
public int login(String userID, String userPassword) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String SQL = "SELECT * FROM USER WHERE userID = ?";
try {
conn = dataSource.getConnection();
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
if(rs.next()){
//앞 쪽 userPassword는 db에서 가져온 패스워드
if(rs.getString("userPassword").equals(userPassword)) {
return 1; // 로그인에 성공
}
return 2; //비밀번호가 틀림
}else {
return 0; // 해당 사용자가 존재하지 않음.
}
}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) {
e.printStackTrace();
}
}
return -1; // 데이터베이스 오류
}
//userID를 받아와서
public int registerCheck(String userID) {
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String SQL = "SELECT * FROM USER WHERE userID = ?";
try {
conn = dataSource.getConnection();
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
if(rs.next() || userID.equals("") ) {
return 0; //이미 존재하는 회원
}else {
return 1; //가입 가능한 회원 아이디
}
}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) {
e.printStackTrace();
}
}
return -1; // 데이터베이스 오류
}
// 회원가입하는 함수
public int register(String userID, String userPassword, String userName, String userAge, String userGender, String userEmail, String userProfile) {
Connection conn = null;
PreparedStatement pstmt = null;
String SQL = "INSERT INTO USER VALUES(?,?,?,?,?,?,?)";
try {
conn = dataSource.getConnection();
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
pstmt.setString(2, userPassword);
pstmt.setString(3, userName);
pstmt.setInt(4, Integer.parseInt(userAge));
pstmt.setString(5, userGender);
pstmt.setString(6, userEmail);
pstmt.setString(7, userProfile);
return pstmt.executeUpdate();
}catch(Exception e){
e.printStackTrace();
}finally {
try {
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
}catch(Exception e) {
e.printStackTrace();
}
}
return -1; // 데이터베이스 오류
}
}
custom.css
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
* {
font-family: 'Nanum Gothic';
}
h5 {
font-family: 'Noto Sans KR';
font-size: 15px;
}
h4{
font-family: 'Noto Sans KR';
}
h3{
font-family: 'Hanna';
}
h2{
font-family: 'Hanna';
}
h1{
font-family: 'Hanna';
}
/* 테이블 관련 디자인 처리 */
thead th{
background-color: #006DCC;
color: white;
text-align: center;
}
tr th:first-child,
tr th:first-child{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tr th:first-child,
tr th:first-child{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
/* 모달 팝업창 관련 디자인*/
.vertical-alignment-helper{
display: table;
height: 100%;
width: 100%;
pointer-events: none;
}
.vertical-align-center{
display: table-cell;
vertical-align: middle;
pointer-events: none;
}
.modal-content{
width: inherit;
height: inherit;
margin: 0 auto;
pointer-events: all;
}반응형
'2020 > JSP 기본 WEB 만들기(미완성)' 카테고리의 다른 글
| # 6 채팅 데이터베이스 구축 (0) | 2020.05.28 |
|---|---|
| #5 채팅창 디자인 구현 (0) | 2020.05.27 |
| #4 JSP 회원 가입 DB기능 구현 (0) | 2020.05.20 |
| # 2 MySQL 데이터베이스 커넥션 풀 구축 (0) | 2020.05.20 |
| #1 메인화면의 메뉴bar 만들기 (0) | 2020.05.19 |
꽃꽂이하는개발자