[Web Application-개발] 2023-11-22 웹 어플리케이션 제작 프로젝트 : 게시판 만들기 #9-2
2023. 11. 22. 03:40ㆍProject/Web Application-개발
프로젝트 일지
지난 작업에서는 게시판의 디스플레이를 구성하였으며 DB와 연결하여 게시글을 틀에 맞게 조회를 하였다. 이번 작업에서는 페이징 작업을 진행할 예정이다. 페이징 작업이란 등록된 게시글 수가 많아지게 되면 이를 한 번에 조회하여 나열하기보다 책 읽듯 하나의 페이지 당 일정 게시글을 조회하는 작업을 의미한다.
간단하게 예시를 들자면 게시판에 등록된 게시글 수가 총 30개가 존재하면 이를 한 페이지에 나타내기 보다 한 페이지에 10개의 게시글을 보여주어 총 세 페이지로 나누어 게시판을 구성한다고 생각하면 된다.
페이징
1) paging.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<?php
function paging($view_page, $cur_page, $total_content, $url) {
// 페이지 담을 변수 선언
$page_line="";
// 총 페이지 수 계산
$total_page = ceil($total_content / $view_page);
// 현재 페이지에 따른 시작 페이지, 끝 페이지 계산
// 현재 페이지가 $view_page의 배수인 경우
if($cur_page % $view_page == 0)
{
$start_page = $cur_page - 4;
$end_page = $cur_page;
}
// 현재 페이지가 $view_page의 배수가 아닌 경우
else
{
$start_page = $cur_page - ($cur_page % $view_page) + 1;
$end_page = $cur_page + $view_page - ($cur_page % $view_page);
}
// '다음' 버튼을 누른다거나 모종의 이유로 끝 페이지가 총 페이지 수를 넘는 경우 제한
if ($end_page >= $total_page) $end_page = $total_page;
// 2 페이지 이상일 때 처음, 이전 기능 출력
if($cur_page > 1)
{
$page_line.= "<a href =".$url."1> 처음 </a>";
$page_line.= "<a href =".$url.($cur_page-1)."> 이전 </a>";
}
else $page_line.="";
// 페이지 숫자 표시
for($i=$start_page; $i<=$end_page; $i++)
{
$page_line.= "<a href =".$url.$i."> $i </a>";
}
// 마지막 페이지가 아니면 다음, 끝 기능 출력
if($cur_page < $total_page)
{
$page_line.= "<a href =".$url.($cur_page+1)."> 다음 </a>";
$page_line.= "<a href =".$url.$total_page."> 끝 </a>";
}
else $page_line.="";
return $page_line;
}
?>
|
cs |
페이징 알고리즘을 입력한 페이지이며 페이징 기능이 필요한 웹 페이지에 함수 형태로 사용하면 된다. 부분별로 어떤 역할을 하는지 알아보자.
|
1
2
3
4
5
6
|
<?php
function paging($view_page, $cur_page, $total_content, $url) {
?>
|
cs |
파라미터(매개변수)
- $view_page : 한 페이지에 보이는 게시글 수
- $cur_page : 현재 몇 번째 페이지인지를 나타낸다. 해당 값을 기준으로 보여지는 페이지가 다르다.
- $total_content : 총 게시글 수. 해당 값을 가지고 총 페이지를 계산한다.
- $url : 페이지 경로
|
1
2
3
4
5
6
7
8
9
|
<?php
// 페이지 담을 변수 선언
$page_line="";
// 총 페이지 수 계산
$total_page = ceil($total_content / $view_page);
?>
|
cs |
변수
- $page_line : $cur_page 값에 따라 계산된 페이지를 담는 변수
- $total_page : $total_content 값에 따라 계산된 총 페이지를 담는 변수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?php
// 현재 페이지에 따른 시작 페이지, 끝 페이지 계산
// 현재 페이지가 $view_page의 배수인 경우
if($cur_page % $view_page == 0)
{
$start_page = $cur_page - 4;
$end_page = $cur_page;
}
// 현재 페이지가 $view_page의 배수가 아닌 경우
else
{
$start_page = $cur_page - ($cur_page % $view_page) + 1;
$end_page = $cur_page + $view_page - ($cur_page % $view_page);
}
?>
|
cs |
- $start_page : $cur_page 값에 따라 계산된 처음 페이지
- $end_page : $cur_page 값에 따라 계산된 끝 페이지
이 부분에서 $start_page와 $end_page 값을 결정한다. if문은 $view_page로 $cur_page를 나눈 나머지 값이 0인 경우(배수인 경우)를 나타내며 else문은 0이 아닌 경우(배수가 아닌 경우)를 나타낸다. 이는 현재 페이지($cur_page)가 몇 번째 페이지냐에 따라 보이는 페이지가 다르기 때문에 계산을 통해 변수를 설정해 준다. 본 계산식은 직접 값을 넣어 계산하면 쉽게 검증 가능하다.
|
1
2
3
4
5
6
|
<?php
// '다음' 버튼을 누른다거나 모종의 이유로 끝 페이지가 총 페이지 수를 넘는 경우 제한
if ($end_page >= $total_page) $end_page = $total_page;
?>
|
cs |
이 부분은 후에 나올 예외를 방지하기 위한 코드이다. $end_page가 $total_page를 넘어서게 되면 $end_page를 $total_page로 고정한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?php
// 2 페이지 이상일 때 처음, 이전 기능 출력
if($cur_page > 1)
{
$page_line.= "<a href =".$url."1> 처음 </a>";
$page_line.= "<a href =".$url.($cur_page-1)."> 이전 </a>";
}
else $page_line.="";
// 페이지 숫자 표시
for($i=$start_page; $i<=$end_page; $i++)
{
$page_line.= "<a href =".$url.$i."> $i </a>";
}
// 마지막 페이지가 아니면 다음, 끝 기능 출력
if($cur_page < $total_page)
{
$page_line.= "<a href =".$url.($cur_page+1)."> 다음 </a>";
$page_line.= "<a href =".$url.$total_page."> 끝 </a>";
}
else $page_line.="";
return $page_line;
?>
|
cs |
해당 부분의 알고리즘으로 인해 보여지는 페이지가 다르다. 위에서부터 차례대로 알아보자.
- if($cur_page > 1) : 현재 페이지가 2 페이지 이상일 경우 1 페이지로 돌아가는 '처음'과 이전 페이지로 돌아가는 '이전' 기능을 $page_line 변수에 담는다.
- for($i=$start_page; $i>=$end_page; $i++) : 위에서 설정한 $start_page를 시작으로 $end_page까지 $page_line 변수에 담는다.
- if($cur_page < $total_page) : 게시판의 마지막 페이지 이하의 페이지이면 다음 페이지로 넘어가는 '다음'과 마지막 페이지로 넘어가는 '끝' 기능을 $page_line 변수에 담는다.
- return $page_line; : 위 과정을 모두 거친 후의 $page_line 값을 반환한다.
2) board.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Board</title>
</head>
<body>
<table border="1" bordercolor="black" width ="700" height="100" align = "center" >
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>작성일</th>
<?php
require_once("db.php");
require_once("paging.php");
$conn = db_conn();
// 초기 $_GET['page']에 값이 없으면 $page = 1로 초기화 => 게시판 클릭하면 처음 1페이지가 디폴트
if (!isset ($_GET['page']) ) $page = 1;
else $page = $_GET['page'];
// 페이징 URL 작업
$url = "http://192.168.74.128:1018/php/board.php?page=";
// 총 게시글 수
$total_content = mysqli_fetch_array(mysqli_query($conn, "select count(*) from test_board"));
// 한번에 볼 수 있는 페이지 수
$view_page = 5;
// 한 페이지에 보일 게시글 표시
$limit_page = ($page-1) * $view_page;
$sql = "select * from test_board order by reg_date DESC limit $limit_page,$view_page";
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
while($row = mysqli_fetch_array($result)){ ?>
<tr align = "center">
<td><?= $row['idx']; ?></td>
<td><a href="http://192.168.74.128:1018/php/board_write.php?writer=<?= $row['user_id']; ?>"><?= $row['title']; ?></a></td>
<td><?= $row['user_id']; ?></td>
<td><?= $row['reg_date']; ?></td>
</tr>
<?php }
?>
</table>
<p style="text-align:center;"><?= paging($view_page, $page, $total_content[0], $url); ?></p>
</body>
</html>
|
cs |
페이징 함수를 사용하기 위해 코드가 추가되었다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?php
require_once("paging.php");
$conn = db_conn();
// 초기 $_GET['page']에 값이 없으면 $page = 1로 초기화 => 게시판 클릭하면 처음 1페이지가 디폴트
if (!isset ($_GET['page']) ) $page = 1;
else $page = $_GET['page'];
// 페이징 URL 작업
$url = "http://192.168.74.128:1018/php/board.php?page=";
// 총 게시글 수
$total_content = mysqli_fetch_array(mysqli_query($conn, "select count(*) from test_board"));
// 한번에 볼 수 있는 페이지 수
$view_page = 5;
?>
|
cs |
변수
- require_once("paging.php") : 페이징 함수를 쓰기위해 paging.php 파일을 불러온다.
- if(!isset($_GET['page'])) $page = 1 : GET 메소드로 현재 페이지로 전달된 $page 값이 존재하지 않는 경우(게시판에 처음 들어왔을 때 발동하는 코드) $page 값을 1로 설정한다.
- $url : 페이징 작업 시 GET 메소드는 URL형태로 데이터를 전달해 주기 때문에 해당 URL로 현재 페이지 값을 알 수 있다.
- $total_content : 총 게시글의 수
- $view_page : 한번에 볼 수 있는 페이지 수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?php
// 한 페이지에 보일 게시글 표시
$limit_page = ($page-1) * $view_page;
$sql = "select * from test_board order by reg_date DESC limit $limit_page,$view_page";
$result = mysqli_query($conn, $sql);
mysqli_close($conn);
while($row = mysqli_fetch_array($result)){ ?>
<tr align = "center">
<td><?= $row['idx']; ?></td>
<td><a href="http://192.168.74.128:1018/php/board_write.php?writer=<?= $row['user_id']; ?>"><?= $row['title']; ?></a></td>
<td><?= $row['user_id']; ?></td>
<td><?= $row['reg_date']; ?></td>
</tr>
<?php }
?>
?>
|
cs |
- $limit_page : 한 페이지에 보일 게시글의 처음을 계산하는 변수. 이는 SQL 쿼리문인 limit에 맞게 입력되었다.
- $sql : $cur_page에 따라 보이는 게시글 수를 조회하는 쿼리문이다.
- while($row = mysqli_fetch_array($result)) : 조회된 게시글을 게시판에 나열하기 위한 코드이다. <td> 태그를 사용하여 표의 제목에 맞게 게시글의 속성을 나열하도록 한다. 또한 $row['title']에 해당하는 부분은 제목 클릭 시 해당하는 게시글을 읽을 수 있는 링크를 설정하였다
|
1
2
3
|
<?php
<p style="text-align:center;"><?= paging($view_page, $page, $total_content[0], $url); ?></p>
?>
|
cs |
paging 함수를 사용하여 화면에 출력하는 코드이며 중앙 정렬 속성을 부여하였다.
작동 화면
- 현재 페이지가 1로 설정이 되어있으므로 알고리즘에 따라 '처음'과 '이전' 기능을 출력되지 않는다.
- 한 페이지에 5개의 게시글이 나열되어있으며 한 화면에는 총 5개의 페이지를 볼 수 있다.
- 마지막 페이지가 아니므로 '다음'과 '끝' 기능이 출력된다.
- 현재 페이지가 2번 이므로 '처음'과 '이전' 기능이 출력된다.
- 마찬가지로 마지막 페이지가 아니므로 '다음'과 '끝' 기능이 출력된다.
- 현재 페이지가 6번이고 이는 마지막 페이지이므로 '처음'과 '이전' 기능이 출력된다.
- 마지막 페이지이므로 '다음'과 '끝' 기능이 출력되지 않는다.
- 총 페이지 수가 6 페이지이고 한번 보여지는 페이지는 5 페이지이므로 5 페이지를 넘어가는 순간 시작 페이지는 6 페이지가 된다.