페이지를 글 목록 수에 따라서 나누려고 한다.
DB에서 글을 임의로 늘렸고 페이지당 항목 수도 10 15 20 30으로 정할 수 있게 만들었다.
package com.KoreaIT.java.jsp_AM.servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.KoreaIT.java.jsp_AM.util.DBUtil;
import com.KoreaIT.java.jsp_AM.util.SecSql;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
@WebServlet("/article/list")
public class ArticleListServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
// 페이지 번호와 페이지당 항목 수 파라미터
int page = 1;
int pageSize = 20; // 기본값
String pageParam = request.getParameter("page");
if (pageParam != null && !pageParam.isEmpty()) {
try {
page = Integer.parseInt(pageParam);
} catch (NumberFormatException e) {
page = 1; // 기본값
}
}
String pageSizeParam = request.getParameter("pageSize");
if (pageSizeParam != null && !pageSizeParam.isEmpty()) {
try {
pageSize = Integer.parseInt(pageSizeParam);
} catch (NumberFormatException e) {
pageSize = 20; // 기본값
}
}
// DB 연결
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
System.out.println("클래스 x");
e.printStackTrace();
}
response.getWriter().append("123");
String url = "jdbc:mysql://127.0.0.1:3306/AM_JDBC_2024_07?useUnicode=true&characterEncoding=utf8&autoReconnect=true&serverTimezone=Asia/Seoul";
String user = "root";
String password = "1234";
Connection conn = null;
try {
conn = DriverManager.getConnection(url, user, password);
response.getWriter().append("연결 성공!");
// 페이징 쿼리
int offset = (page - 1) * pageSize;
SecSql sql = SecSql.from("SELECT *");
sql.append("FROM article");
sql.append("ORDER BY id DESC");
sql.append("LIMIT ?", pageSize);
sql.append("OFFSET ?", offset);
List<Map<String, Object>> articleRows = DBUtil.selectRows(conn, sql);
// 전체 게시물 수를 구하는 쿼리
SecSql countSql = SecSql.from("SELECT COUNT(*) AS total FROM article");
int totalCount = DBUtil.selectRowIntValue(conn, countSql);
// 총 페이지 수
int totalPages = (int) Math.ceil(totalCount / (double) pageSize);
request.setAttribute("articleRows", articleRows);
request.setAttribute("currentPage", page);
request.setAttribute("totalPages", totalPages);
request.setAttribute("currentPageSize", pageSize);
request.setAttribute("pageSizes", new int[]{10, 15, 20, 30});
request.getRequestDispatcher("/jsp/article/list.jsp").forward(request, response);
} catch (SQLException e) {
System.out.println("에러 1 : " + e);
} finally {
try {
if (conn != null && !conn.isClosed()) {
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}서블릿은 이렇게 수정했고 JSP는
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
List<Map<String, Object>> articleRows = (List<Map<String, Object>>) request.getAttribute("articleRows");
int currentPage = (Integer) request.getAttribute("currentPage");
int totalPages = (Integer) request.getAttribute("totalPages");
int currentPageSize = (Integer) request.getAttribute("currentPageSize");
int[] pageSizes = (int[]) request.getAttribute("pageSizes");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시물 목록</title>
</head>
<body>
<h2>게시물 목록</h2>
<a href="../home/main">메인 페이지로 </a>
<!-- 페이지개수 정하기 -->
<form method="get" action="">
<label for="pageSize">페이지당 항목 수:</label>
<select id="pageSize" name="pageSize" onchange="this.form.submit()">
<% for (int size : pageSizes) { %>
<option value="<%= size %>" <%= (size == currentPageSize) ? "selected" : "" %>><%= size %></option>
<% } %>
</select>
</form>
<table style="border-collapse: collapse; border-color: green;"
border="1px">
<thead>
<tr>
<th>번호</th>
<th>날짜</th>
<th>제목</th>
<th>내용</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<%
for (Map<String, Object> articleRow : articleRows) {
%>
<tr style="text-align: center;">
<td><%=articleRow.get("id")%></td>
<td><%=articleRow.get("regDate")%></td>
<td><%=articleRow.get("title")%></td>
<td><%=articleRow.get("body")%></td>
<td><a href="doDelete?id=<%=articleRow.get("id")%>">del</a></td>
</tr>
<%
}
%>
</tbody>
</table>
<div>
<% if (currentPage > 1) { %>
<a href="?page=<%=currentPage - 1%>&pageSize=<%=currentPageSize%>">이전</a>
<% } %>
<span>Page <%=currentPage%> of <%=totalPages%></span>
<% if (currentPage < totalPages) { %>
<a href="?page=<%=currentPage + 1%>&pageSize=<%=currentPageSize%>">다음</a>
<% } %>
</div>
<!-- <ul> -->
<%-- <% --%>
<%--// for (Map<String, Object> articleRow : articleRows) {--%>
<%-- %> --%>
<%-- <li><a href="detail?id=<%=articleRow.get("id")%>"><%=articleRow.get("id")%>번, --%>
<%-- <%=articleRow.get("regDate")%>,<%=articleRow.get("title")%>,<%=articleRow.get("body")%></a></li> --%>
<%-- <% --%>
<%--// }--%>
<%-- %> --%>
<!-- </ul> -->
</body>
</html>이렇게 수정했다.
보는 바와 같이 잘 구현되었다 다음과 이전으로도 잘 간다. 20개를 보고 싶으면 20을 클릭하면 이렇게 스무개를 보여준다.
그럼 아래의 Page의 개수도 창 개수에 맞게 줄어든다.
그런데 글이 많아질 경우 페이지도 많아질텐데 계속 다음과 이전만 누를 수는 없을 것 같다는 생각이 들어서 숫자로 클릭할 수 있게 변경하고 싶어졌다.
<div>
<% if (startPage > 1) { %>
<a href="?page=1&pageSize=<%=currentPageSize%>">1</a>
<% if (startPage > 2) { %>
<span>...</span>
<% } %>
<% } %>
<% for (int i = startPage; i <= endPage; i++) { %>
<% if (i == currentPage) { %>
<span><%=i%></span>
<% } else { %>
<a href="?page=<%=i%>&pageSize=<%=currentPageSize%>"><%=i%></a>
<% } %>
<% } %>
<% if (endPage < totalPages) { %>
<% if (endPage < totalPages - 1) { %>
<span>...</span>
<% } %>
<a href="?page=<%=totalPages%>&pageSize=<%=currentPageSize%>"><%=totalPages%></a>
<% } %>
</div>
<form method="get" action="">
<label for="gotoPage">페이지로 이동:</label>
<input type="number" id="gotoPage" name="page" min="1" max="<%=totalPages%>" value="<%=currentPage%>">
<input type="hidden" name="pageSize" value="<%=currentPageSize%>">
<button type="submit">이동</button>
</form>html구조를 이렇게 바꾸었고 웹상에서는 이렇게 보인다.
페이지로 이동 텝에서 숫자를 입력하면 해당 페이지로 넘어간다.
다음시간부터는 write, modify를 할 것 같다.
한영신의 벨로그입니다.