[작성일: 2023. 04. 13]
회원가입 페이지 디자인
[소스코드_join]
join 페이지는 login.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="width=device-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<!-- 네비게이션 구현(바) -->
<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"> <!-- 모바일 상태에서 오른쪽에 메뉴가 나옴. -->
<!-- 오른쪽 메뉴 바에서 선 3개 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <!-- 네비게이션 바의 메뉴 -->
<li><a href="main.jsp">메인</a></li>
<li><a href="bbs.jsp">게시판</a></li>
<!-- 메인과 게시판으로 이동 -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class=dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span></a>
<!-- 임시주소링크 #을 기재함. -->
<ul class="dropdown-menu">
<li class="active"><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</a><li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="padding-top: 20px;">
<form method="post" action="joinAction.jsp">
<h3 style="text-align: center;">회원가입 화면</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20">
</div>
<div class="form-group" style="text-align: center;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<!-- active는 기본적으로 선택이 된 것 -->
<input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자
</label>
<label class="btn btn-primary">
<input type="radio" name="userGender" autocomplete="off" value="여자" checked>여자
</label>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="아매알" name="userEmail" maxlength="20">
</div>
<input type="submit" class="btn btn-primary form-control" value="회원가입">
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
<script src="//code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
[실행화면_join]
오른쪽 메뉴에서 회원가입을 눌렀을 때 로그인 화면에서 회원가입 화면으로 문제없이 넘어가며 추가적인 입력창이 생긴 것을 확인했다.
성별은 남자가 기본으로 선택되어 있고 올바른 주소를 입력하지 않으면 경고메시지가 보인다.
회원가입 기능 구현
[소스코드_joinAction]
회원가입 기능을 구현하기 위해선 전에 만들었던 UserDAO 클래스에서 함수를 추가해주면 된다.
데이터 값을 받아올 joinAction 페이지 또한 loginAction 페이지를 복사해서 수정한다.
또한 보내진 각각의 데이터가 정확하게 들어왔는지 확인하는 기능을 if문을 사용해서 구현한다.
#UserDAO
package user;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class UserDAO {
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs; // 정보를 담을 객체
public UserDAO() {
try {
String dbURL = "jdbc:mariadb://localhost:3399/bbs";
// 내 컴퓨터에 설치된 mariadb 서버의 bbs 데이터베이스에 접속
String dbID = "root";
String dbPassword = "1234";
Class.forName("org.mariadb.jdbc.Driver"); // 매개체 라이브러리
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch(Exception e) {e.printStackTrace();}
}
public int login(String userID, String userPassword) {
String SQL = "SELECT userPassword FROM USER WHERE userID= ?";
try {
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
if(rs.next()) {
if(rs.getString(1).equals(userPassword))
return 1; // 로그인 성공을 의미함.
else
return 0; // 비밀번호가 불일치함을 의미함.
}
return -1; // 아이디가 없음을 의미함.
} catch(Exception e) {e.printStackTrace();}
return -2; // 데이터베이스 오류를 의미함.
}
public int join(User user) {
// INSERT 문장을 실행할 경우 반드시 0 이상의 숫자가 반환됨.
String SQL = "INSERT INTO USER VALUES(?, ?, ?, ?, ?)";
try {
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, user.getUserID());
pstmt.setString(2, user.getUserPassword());
pstmt.setString(3, user.getUserName());
pstmt.setString(4, user.getUserGender());
pstmt.setString(5, user.getUserEmail());
return pstmt.executeUpdate();
} catch(Exception e) {e.printStackTrace();}
return -1; // 데이터 오류시 -1 반환.
}
}
#joinAction
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %> <!-- 자바스크립트 문장을 작성하기 위함. -->
<% request.setCharacterEncoding("UTF-8"); %>
<!-- 건너오는 모든 데이터를 UTF-8로 받기 위함. -->
<jsp:useBean id="user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="userID" />
<!-- 로그인페이지에서 넘겨준 userId를 받아 한 명의 사용자 userId에 넣어줌. -->
<jsp:setProperty name="user" property="userPassword" />
<jsp:setProperty name="user" property="userName" />
<jsp:setProperty name="user" property="userGender" />
<jsp:setProperty name="user" property="userEmail" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<%
if(user.getUserID() == null || user.getUserPassword() == null || user.getUserName() == null
|| user.getUserGender() == null || user.getUserEmail() == null ){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 되지 않은 사항이 있습니다.')");
script.println("history.back()");
script.println("</script>");
} else {
UserDAO userDAO = new UserDAO();
int result = userDAO.join(user);
if(result == -1) { // 이미 존재하는 아이디일 경우
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 사용 중인 아이디입니다.')");
script.println("history.back()");
// 이전 페이지로 사용자를 돌려보냄. (로그인 페이지)
script.println("</script>");
} else {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'main.jsp'");
// 회원가입에 성공하면 메인페이지로 이동
script.println("</script>");
}
%>
</body>
</html>
[실행화면_joinAction]
새로운 유저 데이터 생성, mariadb에서 제대로 생성되었는지 확인, 중복된 아이디일 경우 등 기능을 모두 점검해 보았다.
회원가입을 시도했을 때 main 페이지로 이동해야 성공이지만 나는 ClassBody 오류가 떴다.
오늘 작성한 코드에서 괄호가 안 맞는 부분이 있는지 확인했고, joinAction 페이지에서 코드들을 복사하면서 괄호 하나가 누락된 것을 발견해 바로 수정하고 재실행 해보았다.
회원가입을 누르면 정상적으로 main.jsp 페이지로 이동한다.
이제 mariadb에서 데이터가 정상적으로 INSERT 되었는지 확인한다.
이미 가입되어 있는 아이디로 다시 회원가입을 시도할 경우 이미 사용 중인 아이디라는 경고창이 뜬다.
🐣 입문 개발자가 작성한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.