반응형
저번 포스팅 다음 글입니다!!
2022.04.27 - [Practice] - JSP로 반응형 게시판 만들기!!! [1]
JSP로 반응형 게시판 만들기!!! [1]
안녕하세요 준입니다!! 어제 JSP와 JQUERY로 게시판을 만들어봤는데요 2022.04.26 - [Practice] - JSP와 Jquery로 게시판 만들어 보기 만들면서 많이 부족하다는 생각이 들더라구요!! 그래서 오늘은 조금 더
puenti.tistory.com
저번 글에 이은 이번에는 회원가입 양식을 만들어볼께요!!
<%@ 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="css/bootstrap.css"> <!-- 디자인을 담당하는 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 data-toggle="collapse" id = "bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li><a href="main.sjp">메인</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> <!-- active는 현재 선택이 되었음 -->
<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"> <!-- post 정보를 숨기는 메서드 -->
<h3 syle = "text-align :center;">회원가입 화면</h3> <!-- joinAction 페이지로 로그인 정보를 보내주겠다 -->
<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">
<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="회원가입">
<!-- 로그인을 누르면 loginAction 페이지로 이동 -->
</div>
</div>
<div class="col-lg-4"></div>
</div>
<!-- 네비게이션 구동, 하나의 웹사이트에서 전반적인 구성을 보여주는 역할 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 제이쿼리를 가져오기 -->
<script src="js/bootstrap.js"></script>
<!-- 부트스트랩에서 기본적으로 참조 -->
</body>
</html>
이렇게 구현 해볼 수 있어요!
화면을 구현했으니 이제 기능을 구현해봐야겠죠??
전에 만들어줬던 UserDAO에서 기능을 추가해볼께요!!
UserDAO 클래스는 실제로 데이터베이스에 접근해서
어떠한 데이터를 가져오거나 어떠한 데이터를 넣어주는 데이터 접근 객체입니다!!
package user;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
// CMD shift O 를 눌러서 외부라이브러리 추가해주기!!
public class UserDAO {
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
// 생성자 생성
public UserDAO() {
try {
String dbURL = "jdbc:mysql://localhost:3306/BBS";
String dbID = "root";
String dbPassword = "12qwaszx";
Class.forName("com.mysql.jdbc.Driver"); // mysql에 접속할 수 있게 해주는 매개체 역할을 해준다
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
// conn 객체 안에 접속된 정보가 담긴다
} catch(Exception e) {
e.printStackTrace();
}
} // 이 부분까지 mysql에 접속하게 해주는 단계
// 로그인 기능에 대한 구현
public int login(String userID, String userPassword) {
// SQL에 넣을 명령어 적어주기
String SQL = "SELECT userPassword FROM USER WHERE userID = ?"; // ? 안에는 입력받은 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) {
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();
//INSERT 문장을 실행한 경우는 반드시 0이상의 숫자가 발현된다!!
// 따라서 -1 의 값이 나오지 않으면 성공적으로 값이 들어간 것!!
} catch(Exception e) {
e.printStackTrace();
}
return -1; // 데이터베이스 오류
}
}이렇게 만들어볼 수 있어요!!
이제 그러면 이 기능을 연결해줄 joinAction 페이지를 구현해볼께요!!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "user.UserDAO" %> <!--우리가 만든 클래스를 사용해주기 위해-->
<%@ page import = "java.io.PrintWriter" %> <!-- JS 문장을 작성하기 위해 -->
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id = "user" class="user.User" scope="page" />
<jsp:setProperty name="user" property="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" />
<!-- 보내준 5가지 데이터 값을 받아야한다 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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>이렇게 구현해볼 수 있어요! 이 값들이 제대로 들어가는지 확인도 해볼께요!!
값들도 데이터베이스 안에 잘 들어갈 수 있는걸 확인할 수 있어요ㅎㅎ
반응형
'Practice' 카테고리의 다른 글
| JSP로 반응형 게시판 만들기[6/9], 게시판 보기, 목록 기능 구현하기 (0) | 2022.04.28 |
|---|---|
| JSP로 반응형 게시판 만들기[5/9], 글 쓰기 기능 구현 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [4/9], DB 구축, 게시판 기능 구현 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [3/9], 로그인 회원가입 페이지 만들기, 세션 설정 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기!!! [1/9] 로그인 페이지, 회원 DB 구축 (0) | 2022.04.27 |