본문 바로가기
공부/WEB개발 과제

[7주차-1] 게시글 페이징 기능 만들기

by TILDA_16 2023. 5. 15.

게시판도 만들었으니 이제 게시글 페이징 기능도 만들어볼 것이다.

 

페이징 기능이 없게 된다면 게시글이 많아졌을 때 스크롤해서 내려야 한다.

 

그래서 한 페이지에 10개씩 넣어서 페이징을 할 것이다.

 

먼저 게시글을 10개씩 묶어서 출력해 주는 작업이다.

수정된 board.php

기존에 있던 board.php를 수정했고 limit를 이용해서 10개씩 출력되게 변경하였다.

 

GET을 이용하여 page값을 받아올 것이고(값이 없으면 1로 할당, 값이 있으면 그 값을 가져온다.)

 

한 페이지에 들어갈 게시글의 개수를 10개로 정해줬고

 

$start_topic_num으로 페이지마다 처음 나오는 게시글을 정해준다.

 

$page값이 0,1,2... 이런 식으로 증가하면 1번, 11번, 21번... 이런 식으로 게시글 번호가 지정된다

 

limit는 1이 아닌 0부터 시작하니까 -1을 해서 시작값을 조정해 준다.

 

그러고 나서 내림차순으로 게시글을 정렬해 준다.(최신글을 먼저 보기 위함)

 

페이징 기능 구현

CSS는 부트스트랩을 이용하였고 그 위에 필요한 기능을 입혔다.

 

ceil함수를 이용하여 페이지 개수를 계산했다.

 

만약 게시글이 31개면 페이지는 4개가 되어야 하니까 나머지를 올림 할 수 있는 ceil함수를 사용했다.

 

첫 번째 페이지가 아니면 Previous기능을 만들었고

 

while문을 이용하여 페이지 번호를 출력시켰다.

 

현재 페이지면 파란색으로 누르지 못하고 그렇지 않으면 흰색으로 누를 수 있게 출력된다.

 

마지막 페이지가 아니면 Next기능을 만들었다.

 

페이징 기능 구현

페이징 기능이 잘 구현됐다.

 

페이징 기능을 확인하려고 게시글을 좀 더 만들었다.

 

검색 기능에도 페이징 기능을 추가한다.

 

1페이지는 구현이 됐지만 2페이지부터는 구현이 안됐는데

 

검색어 기능이 있는 경우라면, 페이지 번호 링크에는 클릭한 페이지 번호, 검색어, 검색 조건까지 같이 넘어가야 해서

 

POST로 넘기던 데이터를 GET으로 변경하였다.

 

SQL문을 검색 옵션에 맞게 종류별로 만들었고 

 

SQL문 수정1
SQL문 수정2

 

마찬가지로 페이징 기능을 추가했다.

 

게시판과 다른 점은 검색어와 검색옵션을 다시 받아오게 만들어서 정상적으로 출력되게 만들었다.

검색 페이징 기능 추가
검색 페이징 기능 구현

게시판 페이징 및 검색 페이징이 구현되었다.