-
[PHP] 게시판 만들기 - 게시판 화면 구현 ② (+페이징)프로그래밍/PHP 2020. 2. 8. 16:06
저번 실습에 이어서 페이징 처리를 추가해 게시판 화면을 구현하겠습니다.
1. 페이징 설계
구현할 페이지의 디자인은 다음과 같습니다.
설계 1 하나의 페이지에는 최대 5개의 게시글이 보이게끔 구현합니다. 그리고 '마지막' 을 클릭하면 마지막 페이지로, '처음' 을 클릭하면 처음 페이지로 이동하게끔 만듭니다. 또한 처음 페이지에서는 '이전' 은 나오지 않고 '다음' 만 나오게끔 하고 마지막 페이지는 그와 반대로 되게끔 구현할 예정입니다.
설계 2 처음과 마지막이 아닌 페이지는 모든 이동 이벤트들이 발생할 수 있게 다음과 같이 구현합니다.
2. 페이징 구현
저번 실습에서의 코드를 다음과 같이 페이징 구현 코드를 추가해줍니다. 첫번째 코드는 맨 앞에, 두번째 코드는<body> 부분에서 찾아서 넣어줍니다.
<?php include_once "./config.php"; include_once "./db/db_con.php"; // 추가부분 if (isset($_GET["page"])) $page = $_GET["page"]; //1,2,3,4,5 else $page = 1; ?>$page는 현재 페이지 번호를 확인하기 위한 변수입니다. 위에서와 같이 이전,다음 등을 클릭했을 때 GET방식으로 페이지 번호를 받아 해당 페이지로 넘어가기 위해 필요한 코드입니다.
<div class="container"> <div id="board_area"> <h1><b>자유게시판</b></h1><br> <h4>자유롭게 글을 쓸 수 있는 게시판입니다.</h4><br> <table class="table table-striped" style="text-align: center; border: 1px solid #ddddda"> <tr> <th style="background-color: #eeeeee; text-align: center;">번호</th> <th style="background-color: #eeeeee; text-align: center;">제목</th> <th style="background-color: #eeeeee; text-align: center;">작성자</th> <th style="background-color: #eeeeee; text-align: center;">작성일</th> <th style="background-color: #eeeeee; text-align: center;">조회수</th> </tr> <!-- 추가부분 : 페이징 구현 --> <?php $sql = mq("SELECT * FROM board"); $total_record = mysqli_num_rows($sql); $list = 5; $block_cnt = 5; $block_num = ceil($page / $block_cnt); $block_start = (($block_num - 1) * $block_cnt) + 1; // 블록의 시작 번호 ex) 1,6,11 ... $block_end = $block_start + $block_cnt - 1; // 블록의 마지막 번호 ex) 5,10,15 ... $total_page = ceil($total_record / $list); if($block_end > $total_page){ $block_end = $total_page; } $total_block = ceil($total_page / $block_cnt); $page_start = ($page - 1) * $list; /* 게시글 정보 가져오기 */ $sql2 = mq("SELECT * FROM board ORDER BY idx DESC LIMIT $page_start, $list");두번째 코드는 많이 어렵진 않으나 처음 접하면 이해하기 힘들 수 있기 때문에 한줄씩 무엇을 의미하는지 알아보고 넘어 가도록 합시다.
먼저 mysqli_num_rows() 함수가 의미하는 것은 board 테이블에 있는 모든 레코드 수를 의미합니다. 즉 게시판의 총 레코드 수를 $total_record에 저장하겠다는 의미입니다.
$list는 한 페이지에 보여줄 개수를 저장, $block_cnt는 블록당 보여줄 페이지의 개수를 저장하는 변수입니다.
ceil() 함수는 인자 값을 무조건 올림 처리하는 기능을 합니다. 현재 페이지를 나타내는 $page와 블록당 보여줄 페이지 개수를 나타내는 $block_cnt 값을 나누어 올림함으로써 $block_num에 현재 페이지 블록을 저장합니다.
$block_start는 블록의 시작 번호를 나타냅니다.
만약 현재 페이지 블록이 1이라면 블록의 시작 번호는 (1-1)*5+1=1, 현재 페이지 블록이 2라면 블록의 시작 번호는 (2-1)*5+1=6, 이런식으로 1,6,11 ... 블록의 시작 번호를 나타냅니다. (변수의 값에 따라 달라질 수 있습니다.)
$block_end는 블록의 마지막 번호를 의미합니다.
예를들어 블록의 시작 번호가 1이라면 블록의 마지막 번호는 1+5-1=5, 블록의 시작 번호가 6이라면 6+5-1=10, 이런식으로 5,10,15 ... 블록의 마지막 번호를 나타냅니다.
$total_page는 페이징한 페이지 수를 의미합니다.
조건문에서, if($block_end > $total_page)는 블록의 마지막 번호가 페이지 수 보다 많다면 페이징한 페이지의 수를 마지막 번호로 설정합니다.
$total_block은 블록의 총 개수, $page_start는 페이지의 시작을 뜻합니다. $page_start 변수는 SQL문에서 LIMIT 조건을 걸때 사용할 변수입니다.
마지막으로 "SELECT * FROM board ORDER BY idx DESC LIMIT $page_start, $list" 는 board 테이블에서 idx를 내림차순으로 정렬하여 $page_start를 시작으로 $list 의 수만큼 보여주게끔 모든 정보를 가져오겠다는 의미입니다.
즉 5개씩 게시글 정보를 가져오는 것입니다.
페이징 구현이 끝났으므로 위에서 설계했던대로 처음, 이전, 다음, 마지막 페이지 이동을 조건문을 이용하여 구현합니다.
아래의 코드를 <table> 태그가 끝나곳 밑에 입력해줍니다.
<div id="page_num" style="text-align: center;"> <?php if ($page <= 1){ // 빈 값 } else { echo "<a href='list.php?page=1'>처음</a>"; } if ($page <= 1){ // 빈 값 } else { $pre = $page - 1; echo "<a href='list.php?page=$pre'>◀ 이전 </a>"; } for($i = $block_start; $i <= $block_end; $i++){ if($page == $i){ echo "<b> $i </b>"; } else { echo "<a href='list.php?page=$i'> $i </a>"; } } if($page >= $total_page){ // 빈 값 } else { $next = $page + 1; echo "<a href='list.php?page=$next'> 다음 ▶</a>"; } if($page >= $total_page){ // 빈 값 } else { echo "<a href='list.php?page=$total_page'>마지막</a>"; } ?> </div>이 코드를 통해 아까 위에서 GET으로 page를 왜 받아와야했는지 이해하셨을거라고 생각합니다. 다음 코드는 지난번 실습 했던 내용과 비슷하므로 이 정도로 넘어가도록 하겠습니다.
★ 글쓰기, 검색 FORM 구현하기
앞으로 구현할 기능에는 글쓰기, 글 검색 등의 기능이 있습니다. 나중에 차차 실습해보겠지만 미리 그럴싸한 게시판 화면을 만들기위해서 외관이라도 구현해보겠습니다.
<div id="write_btn"> <a href="write.php"><button class="btn btn-primary pull-right" >글쓰기</button></a> </div> <br><br><br> <div id="search_box" style="text-align: center;"> <form action="search_result.php" method="get"> <select name="category"> <option value="title">제목</option> <option value="name">글쓴이</option> <option value="content">내용</option> </select> <input type="text" name="search" size="40" required="required"> <button class="btn btn-primary">검색</button> </form> </div>글쓰기 버튼을 누르면 write.php 로 넘어가서 글쓰기 화면으로 이동하고, option 태그를 이용하여 제목, 글쓴이, 내용의 3가지 조건으로 글을 검색할 수 있게끔 검색창을 만들었습니다. 실제 기능은 실습을 통해 천천히 진행하도록 하겠습니다.
다음은 실습의 결과입니다.
실습 결과 비록 심플하지만 제법 구색을 갖춘 게시판 화면을 구축해봄으로써 이번 실습은 여기서 마치도록 하겠습니다. 감사합니다 :)
PHP 게시판 만들기 시리즈 👇
노력의 천재
Carpe Diem, Seize the day
transferhwang.tistory.com
'프로그래밍 > PHP' 카테고리의 다른 글
[PHP] 게시판 만들기 - 글쓰기 기능 구현 ② (8) 2020.02.13 [PHP] 게시판 만들기 - 글쓰기 기능 구현 ① (14) 2020.02.10 [PHP] 게시판 만들기 - 게시판 화면 구현 ① (0) 2020.02.04 [PHP] 게시판 만들기 - 메인화면, 로그아웃 구현 (3) 2020.01.29 [PHP] 게시판 만들기 - 회원가입 구현 (14) 2019.11.25