728x90
게시판을 간단하게 만들었다. jsp를 사용했고 css와 bootstrap을 써서 나름 꾸몄다
currentPage를 1로 설정해 처음 실행해서 null이 오면 페이지가 1이 되도록 했다.
페이징을 하기위해서 쿼리문을 사용해 모든 게시글(row)수를 구했다
게시물의 개수(전체 row수)와 페이지당 게시글 수(rowPerPage)를 이용해 마지막 페이지 수(lastPage)를 구했다.
테이블에서 글이 삭제되면 id는 만들어져있는 상태이고, id가 빵꾸?가 나기때문에 따로 postNumber로 게시글의 순서를 구했다.
이후 html부분은 bootstrap과 css를 사용해 꾸며보았다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%
int currentPage = 1; // 처음 페이지
// currentPage가 null이 아닐경우 int 변환 , null 이면 currentPage = 1 그대로
if(request.getParameter("currentPage") != null) {
currentPage = Integer.parseInt(request.getParameter("currentPage"));
}
System.out.println("boardList - currentPage = " + currentPage); // currentPage 값 체크
/*
SQL 쿼리문 (totalRow 개수 구하기)
SELECT COUNT(*) FROM board;
*/
String sql1 = "SELECT COUNT(*) FROM board";
Class.forName("org.mariadb.jdbc.Driver");
// DB자원 초기화
Connection conn = null;
PreparedStatement stmt1 = null;
ResultSet rs1 = null;
conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3307/board","root","****");
stmt1 = conn.prepareStatement(sql1);
rs1 = stmt1.executeQuery();
// totalRow 구하기
int totalRow = 0;
if(rs1.next()) {
totalRow = rs1.getInt("count(*)");
}
System.out.println("boardList - totalRow = " + totalRow); // totalRow 값 체크
// lastPage 구하기
int rowPerPage = 10; // page당 보여줄 글 개수
int lastPage = totalRow / rowPerPage;
if(totalRow % rowPerPage != 0) {
lastPage = lastPage + 1;
}
System.out.println("boardList - lastPage = " + lastPage); // lastPage 값 체크
// boardList 출력
String sql2 = "SELECT no, title FROM board ORDER BY no DESC LIMIT ?,?";
PreparedStatement stmt2 = null;
ResultSet rs2 = null;
stmt2 = conn.prepareStatement(sql2);
stmt2.setInt(1, (currentPage - 1) * rowPerPage);
stmt2.setInt(2, rowPerPage);
rs2 = stmt2.executeQuery();
System.out.println("boardList - stmt2 = " + stmt2); // stmt2 ?값 교체 체크
int postNumber = (currentPage - 1) * rowPerPage + 1; // 게시글 번호
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>boardList</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbit&display=swap" rel="stylesheet">
<style>
a {
display: block; text-decoration: none;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
color: #3162C7;
text-decoration: none;
}
a:active {
text-decoration: none;
}
body {
font-family: "Orbit", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body style="background-size : cover; background-image: url('./img/bg.jpg'); height: 100vh; width: 100vw;">
<div class="container" style="opacity: 0.9;">
<div class="row">
<div class="col"></div>
<div class="mt-5 col-9 border border-light-subtle shadow p-5 mb-5 bg-body-tertiary rounded">
<!-- start main-->
<div class="row">
<div class="col">
<h1>boardList</h1>
</div>
<div class="col-6"></div>
<div class="col" style="text-align: center; margin: auto 0;">
<form action="./insertBoardForm.jsp" style="text-align: center;">
<button type="submit" class="btn btn-light shadow-sm bg-body-#117C74 rounded" style="border:1px solid #117C74; color: white; background-color: #0C7971;">
글쓰기
</button>
</form>
</div>
</div>
<div class="badge text-bg-light" style="font-size: medium;"><%=currentPage%>페이지</div>
<table class="table table-hover table-light text-center">
<thead class="table-secondary">
<tr>
<th>게시글 순서</th>
<th>no</th>
<th>title</th>
</tr>
</thead>
<tbody>
<%
while(rs2.next()) {
%>
<tr>
<td><%=postNumber%></td>
<td><%=rs2.getString("no")%> </td>
<td><a href="./boardOne.jsp"><%=rs2.getString("title")%></a></td>
</tr>
<%
postNumber++;
}
%>
</tbody>
</table>
<!-- 페이징 버튼 -->
<nav aria-label="Page navigation example" style="margin-left: 230px;">
<ul class="pagination">
<%
if(currentPage > 1) {
%>
<li class="page-item">
<a class ="page-link" href="./boardList.jsp?currentPage=1" style="color: #003F4B;">처음페이지</a>
</li>
<li class="page-item">
<a class ="page-link" href="./boardList.jsp?currentPage=<%=currentPage-1%>" style="color: #003F4B;">이전페이지</a>
</li>
<%
} else {
%>
<li class="page-item disabled">
<a class ="page-link" href="./boardList.jsp?currentPage=1">처음페이지</a>
</li>
<li class="page-item disabled">
<a class ="page-link" href="./boardList.jsp?currentPage=<%=currentPage-1%>">이전페이지</a>
</li>
<%
}
if(currentPage < lastPage) {
%>
<li class="page-item">
<a class ="page-link" href="./boardList.jsp?currentPage=<%=currentPage+1%>" style="color: #003F4B;">다음페이지</a>
</li>
<li class="page-item">
<a class ="page-link" href="./boardList.jsp?currentPage=<%=lastPage%>" style="color: #003F4B;">마지막페이지</a>
</li>
<%
} else {
%>
<li class="page-item disabled">
<a class ="page-link" href="./boardList.jsp?currentPage=<%=currentPage+1%>" style="color: #003F4B;">다음페이지</a>
</li>
<li class="page-item disabled">
<a class ="page-link" href="./boardList.jsp?currentPage=<%=lastPage%>" style="color: #003F4B;">마지막페이지</a>
</li>
<%
}
%>
</ul>
</nav>
<!-- end -->
</div>
<div class="col"></div>
</div>
</div>
</body>
</html>
728x90
'웹 개발' 카테고리의 다른 글
| css,bootstrap사용해서 게시판만들기(3) (0) | 2024.03.22 |
|---|---|
| css,bootstrap사용해서 게시판만들기(2) (0) | 2024.03.21 |
| JSP와 MariaDB 연동하기(7) (0) | 2024.03.18 |
| JSP와 MariaDB 연동하기(6) (0) | 2024.03.18 |
| JSP와 MariaDB 연동하기(5) (0) | 2024.03.15 |
