JSP 게시판 만들기 4 - 게시판 DB구축 및 글쓰기 기능 구현
2021. 2. 1. 19:47ㆍWeb/JSP
이제 로그인 ,회원가입 세션관리 까지 마쳤다. 이번에 할것은 게시판 페이지를 구성 하려고 한다.
먼저 bbs.jsp를 작성하자.
(bbs.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter" %>
<%@ page import="bbs.BbsDAO" %>
<%@ page import="bbs.Bbs" %>
<%@ page import="java.util.ArrayList" %>
<!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"> <!-- 참조 -->
<link rel="stylesheet" href="css/custom.css">
<title>JSP 게시판 웹 사이트</title>
<style type = "text/css">
</style>
</head>
<body>
<%
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-expand="false">
<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 class="active"><a href="bbs.jsp">게시판</a></li>
</ul>
<%
// 접속하기는 로그인이 되어있지 않은 경우만 나오게한다
if(userID == null)
{
%>
<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><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ul>
<%
// 로그인이 되어있는 사람만 볼수 있는 화면
} 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-expanded="false">회원관리<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="loginAction.jsp">로그아웃</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
</nav>
<!-- 특정한 내용들을 담을 공간을 확보 해준다.-->
<div class="container">
<!-- 테이블이 들어갈 수 있는 공간 구현 -->
<div class="row">
<!-- striped는 게시판 글목록을 홀수와 짝수로 번갈아가며 색이 변하게 해주는 하나의 요소 -->
<table class="table table-striped" style="text-align:center; border:1px solid #dddddd">
<!-- thead는 테이블의 제목부분에 해당함 -->
<thead>
<!-- 테이블의 하나의 행을 말함(한 줄)-->
<tr>
<!-- 게시판의 속성을 하나씩 명시 해준다. -->
<th style="background-color:#eeeeee; text-align:center;">번호</th>
<th style="background-color:#eeeeee; text-align:center;">제목</th>
<th style="background-color:#eeeeee; text-align:center;">작성자</th>
<th style="background-color:#eeeeee; text-align:center;">작성일</th>
</tr>
</thead>
<!-- tbody 같은 경우는 위에 지정해준 속성 아래에 하나씩 출력해주는 역할 -->
<tbody>
<!--임시 데이터 삽입 -->
<tr>
<td>1</td>
<td>안녕하세요</td>
<td>홍길동</td>
<td>2021-02-01</td>
</tr>
</tbody>
</table>
<!-- 테이블 자체는 글의 목록을 보여주는 역할밖에 하지않는다. 글을 쓸수있는 화면으로 넘어갈 수 있는 태그 설정-->
<a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>bbs.jsp는 게시판 메인 화면에 해당하는 jsp이다, 이렇게 임시데이터를 넣고 실행 시켜보면 게시판의 구성이 어떻게 되어있는지 확인 할 수 있다. 이제 게시판에서 Action부분을 만들기 전에 게시판에 사용될 DB를 구축해 보자.
mysql cmd를 실행 시켜서 bbs db내부에 BBS테이블을 위와 같이 생성해준다.
게시글의 번호를 부여해주는 bbsID, bbsTitle 하나의 게시물의 제목, userID 작성자, bbsDate 작성일, bbsContent 내용,
bbsAvailable 는 현재의 글이 삭제 되었는지, 안되었는지를 알 수있게 해준다. 삭제된글도 db에 저장하기 위해서 넣어준다. 게시판 db구축 후 데이터 베이스에 접근 할 수 있는 자바 빈즈를 생성해 주자.
src폴더에서 bbs패키지 생성 후 Bbs.java를 생성 해 주자.
(Bbs.java)
//게시판 디비의 정보를 관리하는 자바빈즈 구현
package bbs;
public class Bbs {
private int bbsID;
private String bbsTitle;
private String userID;
private String bbsDate;
private String bbsContent;
private int bbsAvailable;
//각각의 변수에 대한 getter and setter 구현
public int getBbsID() {
return bbsID;
}
public void setBbsID(int bbsID) {
this.bbsID = bbsID;
}
public String getBbsTitle() {
return bbsTitle;
}
public void setBbsTitle(String bbsTitle) {
this.bbsTitle = bbsTitle;
}
public String getUserID() {
return userID;
}
public void setUserID(String userID) {
this.userID = userID;
}
public String getBbsDate() {
return bbsDate;
}
public void setBbsDate(String bbsDate) {
this.bbsDate = bbsDate;
}
public String getBbsContent() {
return bbsContent;
}
public void setBbsContent(String bbsContent) {
this.bbsContent = bbsContent;
}
public int getBbsAvailable() {
return bbsAvailable;
}
public void setBbsAvailable(int bbsAvailable) {
this.bbsAvailable = bbsAvailable;
}
}이제 게시판 데이터베이스 구현에 성공했다, 실제로 글쓰기의 화면을 구현하는 write.jsp파일을 생성 한다.
(write.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.io.PrintWriter"%>
<!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">
<link rel="stylesheet" href="css/custom.css">
<title>JSP Web Site</title>
</head>
<body>
<%
//세션 유지
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-expand="false">
<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 class="active"><a href="bbs.jsp">게시판</a></li>
</ul>
<%
if (userID == null) {
%>
<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><a href="login.jsp">로그인</a></li>
<li><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ul>
<%
} 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-expanded="false">회원관리<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="logoutAction.jsp">로그아웃</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
<!-- 화면 공통메뉴 끝 -->
</nav>
<!-- 게시판 글쓰기 화면 구현-->
<div class="container">
<!-- bbs에서 만든 양식 참조 사용 -->
<div class = "row">
<!-- form -->
<form method="post" action="writeAction.jsp">
<table class="table table-striped" style="text-align:center; border:1px solid #dddddd">
<thead>
<tr>
<!-- colspan="2" 현재의 속성이 2개의 열을 차지하게 해준다. -->
<th colspan="2" style="background-color: #eeeeee; text-align: center;">게시판 글쓰기 양식</th>
</tr>
</thead>
<tbody>
<!-- 글 제목과 글 작성이 각각 한줄로 들어갈 수 있도록 tr로 각각 묶어준다. -->
<tr>
<!-- 글 제목을 작성할 수있는 input을 삽입 해준다. -->
<td><input type="text" class="form-control" placeholder="글 제목" name="bbsTitle" maxlength="50"></td>
</tr>
<tr>
<!-- 장문의 글을 작성 할 수있는 textarea태그를 이용해서 Content를 입력하도록 삽입한다. -->
<td><textarea class="form-control" placeholder="글 내용" name="bbsContent" maxlength="2048" style="height: 350px;"></textarea></td>
</tr>
</tbody>
</table>
<!-- 사용자에게 보여지는 글쓰기 버튼을 구현 -->
<input type="submit" class="btn btn-primary pull-right" value="글쓰기"/>
</form>
</div>
<!-- 글쓰기 화면 구현 끝 -->
</div>
<!-- 애니매이션 담당 JQUERY -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 부트스트랩 JS -->
<script src="js/bootstrap.js"></script>
</body>
</html>이제 글쓰기 페이지의 화면부분은 완성이 되었다.
실제로 데이터 베이스에 접근을 하는 접근 객체인 BbsDAO를 만들어 준다.
(BbsDAO.java)
package bbs;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
//DAO클래스는 실제로 데이터베이스에 접근을 해서 어떤 데이터를 빼오는 역할을 하는 클래스
public class BbsDAO {
// connection:db에접근하게 해주는 소스를 넣을 부분
private Connection conn;
//private PreparedStatement pstmt; bbsDAO에서는 여러개의 함수를 사용하기때문에 마찰이 없게 함수내부에서 선언을 해준다.
private ResultSet rs;
// mysql 연결 부분은 user 에서 사용한것과 동일하기 때문에 그대로 들고와준다.
public BbsDAO() {
// 생성자를 만들어준다.
try {
//Web hosting 시에 호스팅서비스 해주는 회사에게 받은 url및 id pw,
String dbURL = "jdbc:mysql://localhost:3306/BBS?serverTimezone=UTC";
String dbID = "root";
String dbPassword = "root";
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
e.printStackTrace();
}
}
//게시판 글쓰기를 위해서는 총 3개의 함수가 필요하다.(ex. 현재의 시간을 가져오는 함수
public String getDate() {
//이건 mysql에서 현재의 시간을 가져오는 하나의 문장
String SQL = "SELECT NOW()";
try {
//각각 함수끼리 데이터 접근에 있어서 마찰방지용으로 내부 pstmt선언 (현재 연결된 객체를 이용해서 SQL문장을 실행 준비단계로 만들어준다.)
PreparedStatement pstmt = conn.prepareStatement(SQL);
//rs내부에 실제로 실행했을때 나오는 결과를 가져온다
rs = pstmt.executeQuery();
//결과가 있는경우는 다음과 같이 getString 1을 해서 현재의 그 날짜를 반환할 수 있게 해준다.
if(rs.next()) {
return rs.getString(1);
}
} catch (Exception e) {
//오류 발생 내용을 콘솔에 띄움
e.printStackTrace();
}
//데이터베이스 오류인데 웬만해선 디비오류가 날 이유가없기때문에 빈문장으로 넣어준다.
return "";
}
//bbsID 게시글 번호 가져오는 함수
public int getNext() {
//들어가는 SQL문장은 bbsID를 가져오는데 게시글 번호같은 경우는 1번부터 하나씩 늘어나야 하기때문에
//마지막에 쓰인 글을 가져와서 그 글번호에다가 1을 더한 값이 그 다음번호가 되기때문에 내림차순으로 들고와서 +1해 주는 방식을 사용한다.
String SQL = "SELECT bbsID FROM BBS ORDER BY bbsID DESC";
try {
//나머진 그대로 가고 리턴값만 수정
PreparedStatement pstmt = conn.prepareStatement(SQL);
rs = pstmt.executeQuery();
if(rs.next()) {
//나온 결과물에 1을 더해서 다음 게시글~
return rs.getInt(1) + 1;
}
//현재 쓰이는 게시글이 하나도 없는 경우에는 결과가 안나오기 때문에 1을 리턴해준다.
return 1;
} catch (Exception e) {
e.printStackTrace();
}
//데이터베이스 오류가 발생했을때 -1이 반환하면서 프로그래머에게 오류를 알려준다.
return -1;
}
//실제로 글을 작성하는 write함수 작성 Title,ID,Content를 외부에서 받아서 함수를 실행 시킨다.
public int write(String bbsTitle, String userID, String bbsContent) {
//BBS 테이블에 들어갈 인자 6개를 ?로 선언 해준다.
String SQL = "INSERT INTO BBS VALUES(?, ?, ?, ?, ?, ?)";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, getNext());
pstmt.setString(2, bbsTitle);
pstmt.setString(3, userID);
pstmt.setString(4, getDate());
pstmt.setString(5, bbsContent);
//이 인자는 bbsAvailable이기 때문에 처음에 글이 작성되었을때는 글이 보여지는 형태가
//되어야하고 삭제가 안된상태니까 1을 넣어준다.
pstmt.setInt(6,1);
//INSERT같은 경우에는 성공했을때 0이상의 값을 반환하기 때문에 return을 이렇게 작성해준다.
return pstmt.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
//데이터베이스 오류
return -1;
//이렇게 만들어 줌으로서 성공적으로 글이 들어갔는지 확인이 가능하다.
}
}게시글 작성에 필요한 DAO를 완성한 후 DAO에 함수를 사용해서 사용자에게 입력받아서 Action을 취하는 writeAction부분을 만들어 준다.
(writeAction.jsp)
<!-- 실제로 글쓰기를 눌러서 글을 작성해 주는 페이지 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 게시글을 작성할 수 있는 데이터베이스는 BbsDAO객체를 이용해서 다룰수 있기때문에 참조 -->
<%@ page import="bbs.BbsDAO"%>
<!-- bbsdao의 클래스 가져옴 -->
<%@ page import="java.io.PrintWriter"%>
<!-- 자바 클래스 사용 -->
<%
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
%>
<!-- 하나의 게시글 정보를 담을 수 있게 Bbs자바빈즈를 사용-->
<jsp:useBean id="bbs" class="bbs.Bbs" scope="page" />
<!-- 하나의 게시글 인스턴스 구현 -->
<jsp:setProperty name="bbs" property="bbsTitle" />
<jsp:setProperty name="bbs" property="bbsContent" />
<%
System.out.println(bbs);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsp 게시판 웹사이트</title>
</head>
<body>
<%
String userID = null;
if (session.getAttribute("userID") != null) {//유저아이디이름으로 세션이 존재하는 회원들은
userID = (String) session.getAttribute("userID");//유저아이디에 해당 세션값을 넣어준다.
}
//글쓰기 같은 경우에는 로그인이 된사람만 가능해야 하기때문에 조건을 걸어준다.
if (userID == null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('로그인을 하세요.')");
//로그인 안된 사람들은 로그인 페이지로 이동하게 만들어주면 된다.
script.println("location.href = 'login.jsp'");
script.println("</script>");
//로그인이 된 사람들은 이쪽으로 넘어가게 해준다.
} else {
//사용자가 만약에 제목이나, 내용을 입력하지 않았을 경우에 발생 할 상황
if (bbs.getBbsTitle() == null || bbs.getBbsContent() == null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('입력이 안된 사항이 있습니다')");
script.println("history.back()");
script.println("</script>");
//모든 조건이 다 만족 되었을때
} else {
//실제로 데이터 베이스에 등록을 해준다 BbsDAO 인스턴스를 만들고,
BbsDAO BbsDAO = new BbsDAO();
//write함수를 실행해서 실제로 게시글을 작성 할 수 있게한다. 함수(차례대로 매개변수를 넣어준다.) 이러면 아주 간단하게 작동한다.
int result = BbsDAO.write(bbs.getBbsTitle(), userID, bbs.getBbsContent());
//만약에 함수에 반환된 값이 -1라면 디비오류 발생이니까
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='bbs.jsp'");
//script.println("history.back()");
script.println("</script>");
}
}
}
%>
</body>
</html>이제 실행해서 글을 작성해서 MySQL cmd를 띄워서 테이블을 확인 해 보면 제대로 들어간 것을 볼 수 있다.
아직 글목록 보기 기능을 안만들어 줘서 웹상에서는 확인이 불가능하다.
'Web > JSP' 카테고리의 다른 글
| JSP 게시판 만들기 6 - 글 수정 및 삭제 기능구현, 웹사이트 메인 페이지 디자인 (0) | 2021.02.02 |
|---|---|
| JSP 게시판 만들기 5 - 게시판 목록, 글 보기 ,페이징 처리 (2) | 2021.02.02 |
| JSP 게시판 만들기 3 - 회원가입 구현 및 세션관리 (0) | 2021.02.01 |
| JSP 게시판 만들기 2 - 회원DB구현 및 로그인 구현 (0) | 2021.01.28 |
| JSP 게시판 만들기 (환경 설정) JDK, tomcat, Eclipse 설치 (1) | 2021.01.27 |