[작성일: 2023. 04. 19]
게시판 글 목록 기능 구현
게시판 글쓰기 기능을 구현했으니 글 작성 후 글 목록에 작성된 글을 출력해보는 기능을 추가해야 한다.
데이터베이스에서 글의 목록을 가져오는 소스코드를 작성하면 된다.
기능 구현을 위해 BbsDAO에서 두 개의 함수를 추가한다.
게시판 같은 경우는 일반적으로 1페이지, 2페이지 등 페이지를 넘기며 어떤 결과를 읽을 수 있도록 구현해야 한다.
[소스코드]
#BbsDAO
- ArrayList를 이용하여 Bbs를 담아낼 수 있는 함수 추가
- boolean으로 페이징 처리 함수 추가
package bbs;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
public class BbsDAO {
private Connection conn;
private ResultSet rs; // 정보를 담을 객체
public BbsDAO() {
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 String getDate() {
// 현재 시간을 가져올 함수
String SQL = "SELECT NOW()";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
rs = pstmt.executeQuery();
if(rs.next()) {
return rs.getString(1); // 현재의 날짜를 반환함.
}
}catch(Exception e) {e.printStackTrace();}
return ""; // 빈 문자열 리턴으로 데이터 베이스 오류를 알려줌.
}
public int getNext() {
String SQL = "SELECT bbsID FROM bbs ORDER BY bbsID DESC";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
rs = pstmt.executeQuery();
if(rs.next()) {
return rs.getInt(1) + 1; // 1을 더해서 다음 게시글이 보일 수 있도록 함.
}
return 1; // 현재가 첫 게시물인 경우
}catch(Exception e) {e.printStackTrace();}
return -1; // 데이터 베이스 오류를 알려줌.
}
public int write(String bbsTitle, String userID, String bbsContent) {
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);
pstmt.setInt(6, 1);
return pstmt.executeUpdate();
}catch(Exception e) {e.printStackTrace();}
return -1; // 데이터 베이스 오류를 알려줌.
}
public ArrayList<Bbs> getList(int pageNumber) { // ArrayList를 이용하여 Bbs를 담아낼 수 있도록 함.
String SQL = "SELECT * FROM bbs WHERE bbsID < ? AND bbsAvailable = 1 ORDER BY bbsID DESC LIMIT 10";
// bbsID가 특정한 숫자보다 작을 때, 삭제가 되지 않아 Available이 1인 글만 가져올 수 있도록, bbsID로 내림차순, 10개까지만 가져오기
ArrayList<Bbs> list = new ArrayList<Bbs>();
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, getNext() - (pageNumber - 1) * 10);
// 작성될 번호의 글 번호에서부터 계산
rs = pstmt.executeQuery();
while(rs.next()) {
Bbs bbs = new Bbs();
bbs.setBbsID(rs.getInt(1));
bbs.setBbsTitle(rs.getString(2));
bbs.setUserID(rs.getString(3));
bbs.setBbsDate(rs.getString(4));
bbs.setBbsContent(rs.getString(5));
bbs.setBbsAvailable(rs.getInt(6));
list.add(bbs);
}
}catch(Exception e) {e.printStackTrace();}
return list;
}
public boolean nextPage(int pageNumber) {
// 게시글이 10개라면 다음페이지라는 버튼이 없어야 함.
// 페이징 처리
String SQL = "SELECT * FROM bbs WHERE bbsID < ? AND bbsAvailable = 1";
try {
PreparedStatement pstmt = conn.prepareStatement(SQL);
pstmt.setInt(1, getNext() - (pageNumber - 1) * 10);
rs = pstmt.executeQuery();
if(rs.next()) {
return true;
}
}catch(Exception e) {e.printStackTrace();}
return false;
}
}
#bbs.jsp
- import문 4개 추가
- 기본 페이지 출력
- 게시글이 실제로 출력될 부분 수정
- 글제목 색상, 밑줄 삭제
<%@ 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 charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
<style type="text/css">
a, a:hover {
color:#000000;
text-decoration: none;
}
</style>
</head>
<body>
<%
String userID = null;
if(session.getAttribute("userID")!=null) {
userID = (String)session.getAttribute("userID");
}
int pageNumber = 1; // 기본페이지
if(request.getParameter("pageNumber") != null) {
pageNumber = Integer.parseInt(request.getParameter("pageNumber"));
}
%>
<!-- 네비게이션 구현(바) -->
<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 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">
<div class="row">
<table class="table table-striped" style="text-align: center; border: 1px solid #dddddd">
<!-- 게시판에 글 목록들이 홀수와 짝수가 번갈아가며 색상이 변경됨. -->
<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>
<%
BbsDAO bbsDAO = new BbsDAO();
ArrayList<Bbs> list = bbsDAO.getList(pageNumber);
for(int i=0; i<list.size(); i++){
%>
<tr> <!-- 게시글이 실제로 출력될 부분 -->
<td><%=list.get(i).getBbsID() %></td>
<td><a href="view.jsp?bbsID=<%=list.get(i).getBbsID() %>">
<%=list.get(i).getBbsTitle() %></a></td>
<!-- 제목을 눌렀을 때는 해당 게시글의 내용을 보여준다. -->
<td><%=list.get(i).getUserID() %></td>
<td><%=list.get(i).getBbsDate().substring(0, 11)
+ list.get(i).getBbsDate().substring(11,13) + "시"
+ list.get(i).getBbsDate().substring(14,16) + "분" %></td>
</tr>
<%
}
%>
</tbody>
</table>
<!-- 페이지 버튼 -->
<%
if(pageNumber != 1){
%>
<a href="bbs.jsp?pageNumber=<%=pageNumber -1 %>" class="btn btn-success btn-arraw-left">이전</a>
<%
} if(bbsDAO.nextPage(pageNumber + 1)){
%>
<a href="bbs.jsp?pageNumber=<%=pageNumber +1 %>" class="btn btn-success btn-arraw-left">다음</a>
<%
}
%>
<a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>
</div>
</div>
<script src="//code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
[실행화면]
새로고침을 해보면 이전에 글쓰기 버튼을 이용하여 작성했던 데이터베이스가 넘어와 글 목록에 정상적으로 출력되었다. 아직 view 페이지를 만들어주지는 않았기 때문에 글 제목을 눌러도 글 내용이 보이지는 않는다.
데이터베이스와 동일한 내용이라는 것을 확인할 수 있다.
글이 10개면 다음 페이지 버튼이 보이지 않도록 구현했기 때문에 임의로 글 10개를 작성한 후 새로고침을 해보았다.
힘들었다...
작성자도 잘 바뀌는지 확인하기 위해 만들었던 user 아이디로 다양하게 로그인하여 글 11개를 작성했다.
10개일 때는 다음 버튼이 없지만 11개가 되면 다음 페이지 버튼이 생긴다.
다음 페이지 버튼을 눌러보면 맨 처음에 작성했던 글만 보이고 이전 페이지 버튼도 정상적으로 생긴 것을 확인할 수 있다.
🐣 입문 개발자가 작성한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.
🐣 출처: https://youtu.be/Q-TzxXw2jQY