📄 JSP

[JSP] Day49 - 페이지네이션

harveydent 2023. 7. 18. 19:08
728x90

페이지네이션

페이지네이션(Pagination)은 대량의 데이터를 일부씩 나눠서 화면에 표시하거나 다루는 기술입니다. 웹 페이지나 애플리케이션에서 긴 리스트나 테이블과 같이 많은 양의 데이터를 한 번에 표시하기에는 사용자 경험이 떨어질 수 있습니다. 이런 경우 페이지네이션을 통해 데이터를 여러 페이지로 나눠 표시하면 사용자가 원하는 데이터를 더 효과적으로 검색하고 탐색할 수 있습니다.

페이지네이션 주요 개념

  1. 페이지(Page) 또는 페이지 크기(Page Size) : 페이지네이션에서 각 페이지는 특정 개수의 데이터 항목을 가지고 있습니다. 이렇게 나뉘어진 각각의 데이터 세트를 "페이지"라고 부릅니다. 페이지 크기는 각 페이지에 표시될 데이터 항목의 개수를 의미합니다.
  2. 현재 페이지(Current Page) : 사용자가 현재 보고 있는 페이지를 의미합니다. 사용자는 페이지 간에 이동할 수 있으며, 각 페이지마다 서로 다른 데이터 항목이 표시됩니다.
  3. 전체 항목 개수(Total Item Count) : 페이지네이션의 모든 페이지에 걸쳐서 총 몇 개의 데이터 항목이 있는지를 의미합니다. 이 정보는 사용자에게 페이지 수와 네비게이션을 표시할 때 중요한 역할을 합니다.
  4. 페이지 수(Page Count) : 전체 항목 개수와 페이지 크기에 따라 몇 개의 페이지로 데이터가 나눠질지 결정됩니다.

 

페이지네이션 기능

  • 이전 페이지 및 다음 페이지 링크 : 사용자가 이전 페이지나 다음 페이지로 이동할 수 있는 링크를 제공합니다.
  • 페이지 번호 링크 : 여러 페이지가 있을 때 사용자가 원하는 특정 페이지로 직접 이동할 수 있는 링크를 제공합니다.
  • 현재 페이지 표시 : 사용자가 현재 보고 있는 페이지 번호를 표시합니다.
  • 전체 페이지 수 표시 : 전체 페이지 수를 표시하여 사용자에게 현재 위치를 이해시켜 줍니다.

실습

MainAction Controller

package controller;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.BoardSet;
import model.BoardSetDAO;

public class MainAction implements Action {

	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		ActionForward forward = new ActionForward();
		forward.setPath("main.jsp");
		forward.setRedirect(false);
		
		String count=request.getParameter("count");
		if(count == null || count.isEmpty() || count.isBlank() || count.equals("")) {
			count="2";
		}
		int cnt=Integer.parseInt(count);
		
		BoardSetDAO bsDAO=new BoardSetDAO();
		ArrayList<BoardSet> datas=bsDAO.selectAll(null, cnt);
		request.setAttribute("datas", datas);
		request.setAttribute("count", cnt);
		
		return forward;
	}
}

MainAction.java

 

BoardSet DAO

package model;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

public class BoardSetDAO {
	private Connection conn;
	private PreparedStatement pstmt;
	private ResultSet rs;
	
	static final private String SQL_SELECTALL="SELECT * FROM BOARD ORDER BY BID DESC LIMIT 0,?";
	static final private String SQL_SELECTALL_REPLY="SELECT * FROM REPLY WHERE BID=? ORDER BY RID DESC";
	
	public ArrayList<BoardSet> selectAll(BoardVO bVO,int count){
		conn=JDBCUtil.connect();
		ArrayList<BoardSet> datas=new ArrayList<BoardSet>();

		try {
			pstmt=conn.prepareStatement(SQL_SELECTALL);
			pstmt.setInt(1, count);
			rs=pstmt.executeQuery();

			while(rs.next()) {
				BoardSet bs=new BoardSet();
				
				BoardVO data=new BoardVO();
				data.setBid(rs.getInt("BID"));
				data.setBcontent(rs.getString("BCONTENT"));
				data.setMid(rs.getString("MID"));
				data.setFavCnt(rs.getInt("FAVCNT"));
				
				bs.setBoard(data);
				
				//////////
				pstmt=conn.prepareStatement(SQL_SELECTALL_REPLY);
				pstmt.setInt(1, data.getBid());
				ResultSet rs2=pstmt.executeQuery();
				ArrayList<ReplyVO> rdatas=new ArrayList<ReplyVO>();
				while(rs2.next()) {
					ReplyVO rVO=new ReplyVO();
					rVO.setBid(rs2.getInt("BID"));
					rVO.setDate(rs2.getDate("DATE"));
					rVO.setMid(rs2.getString("MID"));
					rVO.setRid(rs2.getInt("RID"));
					rVO.setRcontent(rs2.getString("RCONTENT"));
					rdatas.add(rVO);
				}
				//////////
				
				bs.setRdatas(rdatas);
				
				datas.add(bs);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}

		JDBCUtil.disconnect(rs, pstmt, conn);

		return datas;
	}
}

BoardSetDAO.java

 

Main jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="kim" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 페이지</title>
</head>
<body>

<script type="text/javascript">
	function signup(){
		window.open("signup.jsp","회원가입 창","width=450,height=300");
	}
</script>

<div id="header">
	<h1>SNS 커뮤니티 실습 프로젝트</h1>
</div>

<div id="gnb">
	<ul>
		<li><a href="main.do">메인으로 가기</a></li>
		<kim:login />
	</ul>
</div>

<div id="content">
	<section>
		<kim:write type="board" />
	</section>
	<hr>
	<section>
		<c:forEach var="v" items="${datas}">
			<c:set var="board" value="${v.board}" />
			<c:set var="rdatas" value="${v.rdatas}" />
			${board.bid} ${board.bcontent} | <a href="fav.do?bid=${board.bid}">♥</a>[${board.favCnt}] <br>
			<c:forEach var="r" items="${rdatas}">
				${r.rid} ${r.rcontent} <br>
			</c:forEach>
			<kim:write type="reply" bid="${board.bid}" />
			<hr>
		</c:forEach>
		
		<a href="main.do?count=${count+2}">[더보기]</a>
		<!-- 페이지네이션 -->
	</section>
</div>

<div id="footer">
	<h3>&copy; NAVER corp. | 회사소개 | 이용약관 | 개인정보처리방침 | 고객센터</h3>
</div>

</body>
</html>

main.jsp

GitHub

https://github.com/Qkrwnsgus0522/JSP

 

GitHub - Qkrwnsgus0522/JSP

Contribute to Qkrwnsgus0522/JSP development by creating an account on GitHub.

github.com

 

728x90