서론
이전에 만들어둔 게시판 글에서 이어서 진행해 보겠습니다.
이전 내용을 못 보신 분들은 이전 포스팅을 참조해 주세요.
이전에는 DB의 데이터를 불러와 게시판의 형식으로 꾸며주었습니다.
이번에는 게시글이 많다면 한줄로 쭉 늘어서 한번에 표시하면 보기도 힘들고 글의 숫자가 몇천, 몇만개가 된다면 불러올 때 속도도 느려지기 때문에 페이징을 통해서 한 페이지에 보이는 게시글의 숫자를 제한하는 페이징 기능을 추가해 보겠습니다.
본문
DB에 데이터 추가
페이지로 나눠서 보여주기 위해 DB에 데이터를 조금 더 추가해 줍니다.
위와 같이 저는 7개로 추가하여 한페이지에 보이는 글의 개수를 2개 혹은 3개씩 제한해 여러 페이지로 나눠보겠습니다.
php 페이징 함수
이제 php에서 페이징 함수를 코딩해줍니다.
//페이징 START
//한페이지에 보여질 갯수, 현재페이지, 전체페이지 수, url
function paging($write_pages, $cur_page, $total_page, $url) {
$str = "";
if ($cur_page > 1) {
$str .= "<a href='" . $url . "1' class='pre_all'>처음</a>";
$str .= "<a href='" . $url . ($cur_page-1) . "' class='pre'>이전</a>";
} else {
$str .= "";
}
$start_page = @( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;
if ($end_page >= $total_page) $end_page = $total_page;
if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if(($cur_page-2) <= $k && $k < ($cur_page+3)) {
if ($cur_page != $k) {
$str .= "<a href='$url$k' class='numBox;'>$k</a>";
} else {
$str .= "<strong>$k</strong>";
}
}
}
}
if ($cur_page < $total_page) {
$str .= "<a href='$url" . ($cur_page+1) . "' class='next'>다음</a>";
$str .= "<a href='$url$total_page' class='next_all'>맨끝</a>";
} else {
$str .= "";
}
$str .= "";
return $str;
}
paging 함수입니다.
$str 변수를 선언해 주어 $str 변수에 HTML 코드를 담아주고 함수를 사용하면, return으로 담겨 있던 HTML 코드를 출력하여 페이징 기능이 동작하도록 해줍니다.
함수 안의 변수
- $write_pages - 한 페이지에 보일 게시글 개수
- $cur_page - 현재페이지
- $total_page - 전체페이지 수
- $url - 페이지 숫자를 클릭 시 이동시켜 줄 url
현재 페이지가 1보다 크다면 처음과 이전 버튼이 보이게 하고,
1페이지보다 작다면 처음과 이전 버튼은 넣어주지 않았습니다.
이후 중간에 오는 숫자들을 $start_page와 $end_page로 나누어 계산을 해주고 $start_page부터 $end_page만큼 반복을 해주어 페이지를 표시해 주었습니다.
마지막도 처음과 마찬가지로 현재 페이지가 총페이지의 수보다 작다면 다음과 맨 끝 버튼을 표시해 주고, 그렇지 않다면 보이지 않게 해 주었습니다.
즉, 마지막 페이지 숫자는 $total_page와 같으므로 버튼은 표시되지 않습니다.
다음으로 paging 함수 밖에서의 처리도 알아보겠습니다.
//페이지가 없으면 1부터
if (!$page) {
$page = 1;
}
//한페이지에 보여질 갯수
$page_num = 3;
$limit_page = ($page - 1) * $page_num;
//페이징url
$url = $PHP_SELF."?page=";
$sql = "select * from test_list order by reg_date DESC limit $limit_page, $page_num";
$res = $db->query($sql);
$total = $db->fetch_array("SELECT count(*) FROM test_list");
//전체페이지수
$total_cnt = ceil($total[0] / $page_num);
$page 가 없다면 1페이지로 간주하고 $page값을 1로 선언해 줍니다.
$page_num은 한 페이지에 보일 게시물 숫자입니다. 저는 3개씩 보이게 설정했습니다.
보통 게시글이 많다면 10~30개 정도로 설정해 줍니다.
쿼리문 마지막에 limit를 추가하여 줍니다.
limit는 $limit_page의 데이터부터 $page_num개의 데이터를 보여주어라 라는 겁니다.
예를 들어 2페이지라면 $limit_page = (2 - 1) * 3; 이 되어, $limit_page = 3; 이 되며 쿼리문의 마지막에 limit 3, 3이 됩니다.
이후 html 코드에서 페이지 표시를 하고 싶은 위치에 아래의 코드를 적으면 됩니다.
<div style="text-align:center;">
<?=paging($page_num, $page, $total_cnt, $url)?>
</div>
css를 넣지 않으니 조금 심심해 보이는 것 같습니다.
css를 넣어서 디자인을 꾸며주도록 하겠습니다.
CSS 추가하기
일단 머릿속으로 구상을 해줍니다.
저는 처음, 이전, 다음, 맨 끝은 필요 없을 것 같아서 없애버리고 페이지 버튼도 동그랗게 만들어 볼 생각입니다.
<div class="paginate"><?=paging($page_num, $page, $total_cnt, $url)?></div>
<style>
.paginate {
text-align: center;
}
.paginate a, .paginate strong {
margin-right: 5px;
padding: 6px 10px 6px 10px;
color: #464646;
text-decoration: none;
font: bold 14px/normal Verdana;
}
.paginate strong {
color: white;
background: black;
border-radius: 15px;
}
</style>
CSS는 이런 식으로 간단하게 해 주었습니다.
처음, 이전의 버튼을 없애는 것은 paging함수의 코드를 지워주면 됩니다.
이렇게 하면 위와 같이 동글동글한 페이징 처리를 구현할 수 있습니다.
전 심플하게 블랙&화이트로 했습니다.
네이버 블로그는 위의 이미지와 같이 '5줄로 보기'처럼 몇 줄씩 나오게 할지 선택할 수 있는 기능이 있습니다.
글쓰기와 삭제 기능을 추가하고 나면 이 기능과 그리고 검색기능을 한번 넣어보도록 하겠습니다.
결론
이렇게 페이징 기능도 마무리를 해보았습니다.
다음에는 진작에 넣어줬어야 할 기능인 글쓰기 기능과, 삭제 기능을 넣어 보겠습니다.
'코딩 > php' 카테고리의 다른 글
[HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #4 (글쓰기) (34) | 2023.02.06 |
---|---|
[HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #3 (검색기능) (33) | 2023.01.31 |
[HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #1 (DB 데이터 불러오기, 게시판 형식만들기) (33) | 2023.01.17 |
[PHP] 전역변수, 완전 전역 ($GLOBALS, $_POST 등) (30) | 2023.01.06 |
[PHP] strpos() 문자열 포함 여부 및 문자열 위치 알아내기 (18) | 2023.01.04 |
댓글