728x90
페이지네이션
대량의 데이터를 여러 페이지로 나누어 표시하는 디자인 패턴
페이지네이션의 특징
- 사용자 경험 개선
- 사용자가 너무 많은 데이터를 한 번에 처리할 필요가 없어지므로 웹 페이지의 응답성과 성능을 향상시킬 수 있음
- 또한 사용자는 페이지 이동을 통해 원하는 데이터를 쉽게 찾을 수 있음
- 쉬운 탐색
- 사용자가 데이터를 페이지 단위로 탐색할 수 있음
- 이전 페이지, 다음 페이지, 특정 페이지로 이동하는 기능을 제공함
- 검색 결과 페이지
- 검색 결과를 여러 페이지로 나누어 제공하여 사용자가 검색 결과를 더 효과적으로 관리하고 탐색할 수 있음
- 정렬과 필터링
- 정렬과 필터링을 적용하여 사용자가 데이터를 원하는 방식으로 조작할 수 있음
페이지네이션 구성 요소
- 현재 페이지 번호: 사용자가 보고 있는 페이지의 번호를 나타냄
- 총 페이지 수 : 데이터를 전체 페이지로 얼마나 나누어 표시할 것인지를 나타냄
- 이전 페이지 및 다음 페이지 링크 : 이전 페이지와 다음 페이지로 이동할 수 있는 링크 또는 버튼
- 특정 페이지로 이동: 사용자가 특정 페이지로 이동할 수 있는 페이지 번호 링크 또는 입력 필드
실습
MainController.java
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;
}
}
BoardSetDAO.java
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;
}
}
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>© NAVER corp. | 회사소개 | 이용약관 | 개인정보처리방침 | 고객센터</h3>
</div>
</body>
</html>
728x90
'Web > JSP' 카테고리의 다른 글
| [JSP] Set 구조 (0) | 2023.07.05 |
|---|---|
| [JSP] FrontController (0) | 2023.07.05 |
| [JSP] Listener (0) | 2023.07.05 |
| [JSP] Filter (0) | 2023.07.04 |
| [JSP] POJO 와 NOT POJO (0) | 2023.07.04 |
