Pagination (페이지 매기기)
Pagination이란?
콘텐츠를 여러 페이지로 나누는 기술입니다. 웹 페이지에서 일반적으로 볼 수 있는 이전, 다음 버튼이나 숫자로 된 페이지 번호를 클릭하여 다른 페이지로 이동할 수 있는 기능을 의미합니다.
Pagination 생각해 보기
코드를 생성하기 전에 어떤 것이 필요할지에 대한 생각을 먼저 하면 좋을 것 같습니다.
1. 현재 페이지 번호
2. 한 페이지당 게시물의 개수
3. 한 페이지 그룹당 페이지 수
-> 페이지 그룹당 페이지 수가 4개고 페이지 수가 10개면 페이지 그룹은 3개가 생깁니다.
1,2,3,4 / 5,6,7,8 / 9,10
4. 총 게시물 수
5. 현재 페이지의 게시물 시작 번호
6. 현재 페이지의 게시물 끝 번호
7. 총 페이지 수
8. 총 페이지 그룹 수
9. 현재 페이지 그룹 번호
10. 현재 페이지가 속한 그룹의 시작 페이지 번호
11. 현재 페이지가 속한 그룹의 마지막 페이지 번호
12. 이전 페이지 그룹이 존재하는지 여부
13. 다음 페이지 그룹이 존재하는 지 여부
굉장히 많은 값들이 요구되는 작업입니다. 처음부터 다 제작하려고 했다면 엄청난 노력이 필요했겠죠... ㅠ 하지만 선조들과 선생님의 힘이 있다면 저희는 임팩트 있게 배울 수 있답니다.
Pagination 제작
public class PaginationDemo {
// 현재 페이지
private int nowPage=1;
// 페이지당 게시물수
private int postCountPerPage=5;
// 페이지 그룹당 페이지수
private int pageCountPerPageGroup=4;
//총게시물수 ( 데이터베이스에 저장되어 있는 )
private int totalPostCount;
public PaginationDemo(int totalPostCount) {
this.totalPostCount=totalPostCount;
}
public PaginationDemo(int totalPostCount,int nowPage) {
this.totalPostCount=totalPostCount;
this.nowPage=nowPage;
}
public int getNowPage() {
return nowPage;
}
}1~4 까지는 변수로 선언하고 생성자로
총 게시물 수와 현재 페이지를 가져옵니다.
5. 현재 페이지 게시글 시작 번호
현재 페이지 보다 하나 먼저 있는 페이지의 마지막 번호 +1을 하면 현재 페이지의 첫 번째 게시물의 번호입니다.
이런 식으로 설명이 가능합니다.
public int getStartRowNumber() {
return (this.nowPage-1)*this.postCountPerPage+1;
}현재 페이지에서 1을 빼고 페이지 당 게시물 개수를 곱한 후 1을 더하면 됩니다.
이번 것은 페이지당 5개의 게시물을 넣기 때문에
(2 - 1) * 5 +1 이렇게 됩니다.
6. 현재 페이지 게시글 끝 번호
끝 번호는 당연히 현재 페이지 곱하기 페이지 당 게시물 개수를 곱하면 되는 줄 알았다면 오산입니다.
왜냐면 총게시물이 마지막 번호보다 작을 경우가 있습니다.
public int getEndRowNumber() {
int endRowNumber=this.nowPage*this.postCountPerPage;
if(this.totalPostCount<endRowNumber)
endRowNumber=totalPostCount;
return endRowNumber;
}그래서 이런 식으로 확인하고 return 해야 합니다.
7. 총 페이지 수
총 페이지 수는 전체 게시글 나누기 페이지당 게시글 개수입니다.
하지만 나머지가 생기면 페이지를 하나 더 더해야 합니다.
public int getTotalPage() {
int totalPage=totalPostCount / postCountPerPage;
if(totalPostCount%postCountPerPage!=0)
totalPage=totalPage+1;
return totalPage;
}48개의 게시글이 있고 페이지 당 5개를 넣는다고 하면
48/5 = 9에 나머지 3 이기 때문에
10페이지가 생성됩니다.
8. 총 페이지 그룹 수
총 10페이지가 나오는데 이 페이지를 묶는 그룹을 한 그룹에 4페이지를 넣습니다.
10/4 = 2에 나머지 2
총 3그룹이 나오게 됩니다.
public int getTotalPageGroup() {
int totalPageGroup=getTotalPage()/pageCountPerPageGroup;
if(getTotalPage()%pageCountPerPageGroup!=0)
totalPageGroup+=1;
return totalPageGroup;
}
9. 현재 페이지 그룹 번호
현재 페이지 그룹은 현재 페이지에서 그룹당 페이지 수를 나누면 되는데 이것 또한 나머지가 있으면 몫에 +1을 합니다.
현재 페이지가 6이면 6/4 = 1에 나머지 2 이니까 2 그룹에 위치하는 것을 알 수 있습니다.
public int getNowPageGroup() {
int nowPageGroup=nowPage/pageCountPerPageGroup;
if(nowPage%pageCountPerPageGroup!=0)
nowPageGroup+=1;
return nowPageGroup;
}10. 현재 페이지가 속한 그룹의 시작 페이지 번호
아까 5번에서 설명한 이론과 같습니다.
현재 페이지가 속한 그룹의 전 번호의 마지막 +1 이 그룹의 시작 번호입니다.
public int getStartPageOfPageGroup() {
return (this.getNowPageGroup()-1)*pageCountPerPageGroup+1;
}11. 현재 페이지가 속한 그룹의 마지막 페이지 번호
public int getEndPageOfPageGroup() {
int endPage=getNowPageGroup() * pageCountPerPageGroup;
if(endPage>getTotalPage())
endPage=getTotalPage();
return endPage;
}페이지 그룹에 그룹당 페이지 개수를 곱하면 되는데,
만일 마지막 그룹에서 4개보다 작은 페이지가 있으면 그것이 마지막 페이지가 되는 것입니다. (7이 마지막이라면 아래와 같이 나옵니다.)
12. 이전 페이지 그룹이 존재하는지 여부
public boolean isPreviousPageGroup() {
boolean flag=false;
if(getNowPageGroup()>1)
flag=true;
return flag;
}현재 페이지 그룹이 1보다 크면 이전 버튼이나 previous 버튼이 생성되겠죠?
13. 다음 페이지 그룹이 존재하는 지 여부
public boolean isNextPageGroup() {
boolean flag=false;
if(getTotalPageGroup()>getNowPageGroup())
flag=true;
return flag;
}다음 페이지 그룹이 총 페이지 그룹보다 작으면 next나 다음이 생성되어야 합니다.
이렇게 생성하고 jsp 파일에서 자신에 입맛에 맞게 설정해서 pagination을 불러오면 됩니다.
...라고 말하면 너무 무책임한 내용이 되는 것 같아서 jsp 파일을 잠깐 맛보려고 합니다.
pagination 관련해서는 bootstrap4에서 가져왔습니다.
JSP
<ul class="pagination justify-content-center" style="margin:20px 0">
<c:if test="${pagination.previousPageGroup}">
<li class="page-item"><a class="page-link" href="FindPostList.do?pageNo=${pagination.startPageOfPageGroup-1}">Previous</a></li>
</c:if>
<c:forEach begin="${pagination.startPageOfPageGroup}"
end="${pagination.endPageOfPageGroup}" var="page">
<c:choose>
<c:when test="${pagination.nowPage==page}">
<li class="page-item active"><a class="page-link" href="FindPostList.do?pageNo=${page}">${page}</a></li>
</c:when>
<c:otherwise>
<li class="page-item"><a class="page-link" href="FindPostList.do?pageNo=${page}">${page}</a></li>
</c:otherwise>
</c:choose>
</c:forEach>
<c:if test="${pagination.nextPageGroup}">
<li class="page-item"><a class="page-link" href="FindPostList.do?pageNo=${pagination.endPageOfPageGroup+1}">Next</a></li>
</c:if>
</ul>1. 이전 페이지 그룹이 있으면 Previous가 나오게 합니다.
<c:if test="${pagination.previousPageGroup}">
2. forEach 문을 사용하여 그룹의 시작페이지 ~ 그룹의 마지막 페이지를 생성합니다.
3. 다음 페이지 그룹이 있으면 next 가 나오게 합니다.
<c:if test="${pagination.nextPageGroup}">
물론 controller 도 손을 봐야 하지만 여러분의 힘으로 잘 해결할 것이라고 믿습니다.
...라고 말하면 뭔가 닦지 않은 기분이 들 수 있으니 controller도 알아볼까요?
FindPostListController
public class FindPostListController implements Controller {
@Override
public String handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {
String pageNo=request.getParameter("pageNo");
Pagination pagination=null;
long totalPostCount=BoardDAO.getInstance().findTotalPostCount();
if(pageNo==null) {
pagination=new Pagination(totalPostCount);
}else {
pagination=new Pagination(totalPostCount,Long.parseLong(pageNo));
}
request.setAttribute("pagination", pagination);
request.setAttribute("list", BoardDAO.getInstance().findPostList(pagination));
request.setAttribute("url", "board/list.jsp");
return "layout.jsp";
}
}1. pageNo를 요청에서 받아와서
2. 게시물의 총개수를 받아오고
3. 요청에 pagination 객체를 넣어 보내주면 완성입니다!
소감
글이 길지만 정말 임팩트 있게 작성한 것이기 때문에 재밌게 봐주셨으면 좋겠습니다.
요새 부동산 읽어주는 남자 유튜브에 결혼 관련 내용이 업로드되더라고요.
이러한 주제의 글을 몇 개 읽어봤는데, 가장 기억에 남는 글은 요새 사람들은 결혼을 하기 전에 완벽한 상태로 결혼을 하려고 한다는 것입니다. 하지만 결혼이란 자고로 같이 완벽한 상태로 가기 위한 하나의 step이라고 생각한다고 하더라고요.
저의 생각 또한 마찬가지라고 생각합니다. 완벽하다의 기준도 다를뿐더러 제 기준에 완벽하려면 적어도 40~50대는 돼야 할 텐데 그때가 되면 독거노인이 될 확률이 90%라고 생각합니다.
같이 성장해 나가는 과정은 힘들겠지만 재밌을 것이라고 생각됩니다. 모두 파이팅 합시다!