[HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #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줄로 보기'처럼 몇 줄씩 나오게 할지 선택할 수 있는 기능이 있습니다.

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

 

---

 

결론

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

다음에는 진작에 넣어줬어야 할 기능인 글쓰기 기능과, 삭제 기능을 넣어 보겠습니다.