[HTML/PHP] 간단한 게시판 만들기 #2 (페이징)

 

 

 

간단한 게시판 만들기 2번째 글입니다.

 

이전에는 DB의 데이터를 불러와 게시판의 형식으로 꾸며주었습니다.

이번에는 게시글이 많다면 한 줄로 쭉 늘어서 한번에 표시하면 보기도 힘들고,

글의 숫자가 몇천, 몇만 개가 된다면 불러올 때 속도도 느려지기 때문에,

페이징을 통해서 한 페이지에 보이는 게시글의 숫자를 제한하는 페이징 기능을 추가해 보겠습니다.

 

반응형

 

---

 

DB에 데이터 추가

 

 

페이지로 나눠서 보여주기 위해 DB에 데이터를 조금 더 추가해 줍니다.

 

 

db 리스트

 

 

위와 같이 저는 7개로 추가하여 한 페이지에 보이는 글의 개수를 2개 혹은 3개씩 제한해 여러 페이지로 나눠보겠습니다.

 

 

728x90

 

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함수의 코드를 지워주면 됩니다.

 

css 수정 후 페이지

 

 

이렇게 하면 위와 같이 동글동글한 페이징 처리를 구현할 수 있습니다.

전 심플하게 블랙&화이트로 했습니다.

 

네이버 블로그 하단 페이징 참조 이미지

 

 

네이버 블로그는 위의 이미지와 같이 '5줄로 보기'처럼 몇 줄씩 나오게 할지 선택할 수 있는 기능이 있습니다.

글쓰기와 삭제 기능을 추가하고 나면 이 기능과 그리고 검색기능을 한번 넣어보도록 하겠습니다.

 

---

 

결론

 

이렇게 페이징 기능도 마무리를 해보았습니다.

페이지별로 글을 나누어 이전 글들을 한눈에 보기 편하게 배치가 되었습니다.

페이징 함수를 직접 작성하는 것도 난이도가 쉬운 편이 아니라서,

천천히 작성하며 코드를 충분히 이해하고 넘어가는 것이 좋습니다.