掲示板にページャーを導入してみた

安藤(プログラマー)
演劇もやっていまする。

どうも、安藤です。
今日もせっせと掲示板を作っています!(もちろん通常業務もやってます)

掲示板といえば何百件と投稿されるものなので、1ページの表示件数と表示ページ数を設定しないといずれ大変なことに。。
ということで、ページャーを組み込むことにしました。

四苦八苦したのですが、とりあえず書くとこんな感じ。

index.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
・・・
//変数を初期化
$posted_data = array();
$total_page = null;
$next_page = null;
$previous_page = null;

//ページ情報の取得
$page = isset($_GET['page'])? htmlspecialchars($_GET['page']): 1;
//表示件数の設定
$per_page = 5;
//表示ページ数の設定
$show_page= 5;
//OFFSET値の算出
$offset = ($page-1) * $per_page;

//全投稿件数の取得
$sql = "SELECT COUNT(*) AS COUNT FROM posting";
$result = mysqli_query($com,$sql);
//結果を連想配列で取得
$row = mysqli_fetch_assoc($result);
//総ページ数
$total_page = ceil(intval($row['COUNT']) / $per_page);

//ページの始点
$start_page = 1;
//ページの終点
$end_page = $total_page;
//前後ページの取得
if($page < $end_page)
{
    $next_page = $page + 1;
}
if($page > $start_page)
{
    $previous_page = $page - 1;
}

//表示ページ数の再設定
if($total_page < $show_page)
{
    $show_page = $total_page;
}
//ページループの中心点を設定
$show_page_half = floor($show_page / 2);
$loop_start = $page - $show_page_half;
$loop_end = $page + $show_page_half;
//表示するページ番号の算出
if ($loop_start <= 0)
{
    $loop_start  = 1;
    $loop_end = $show_page;
}
if ($loop_end > $total_page)
{
    $loop_start  = $total_page - $show_page + 1;
    $loop_end =  $total_page;
}

//投稿一覧データの取得
$sql = "SELECT * FROM posting ORDER BY id DESC LIMIT $per_page OFFSET $offset";
$result = mysqli_query($com,$sql);
if($result !== false)
{
    while($row = mysqli_fetch_assoc($result))
    {
        //結果を表示用の配列に追加
        array_push($posted_data,$row);
    }
}

//twigを使用
require_once '../vendor/autoload.php';
//twigの設定
$loader = new Twig_Loader_Filesystem('./');
$twig = new Twig_Environment($loader);
//テンプレートを使用
$template = $twig->loadTemplate('index.html.twig');
//レンダリング
echo $template->render(
    array(
        'page' => $page,
        'start_page' => $start_page,
        'end_page' => $end_page,
        'next_page' => $next_page,
        'previous_page' => $previous_page,
        'loop_start' => $loop_start,
        'loop_end' => $loop_end,
        'posted_data' => $posted_data,
    )
);
・・・

するとこんなページャーが、、、!

1

デザインは手をつけていないので質素ですが、現状の機能としては問題ないかと。
ちなみにTwig側はこんな具合になります!

index.html.twig

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
・・・
<div style="font-size:x-large; color:#ff8200;">
    &nbsp;今までの投稿一覧&nbsp;
</div>

<span style="color:#535353;">
    {% if page > start_page %}
        <a href="/index.php?page=">&laquo;first</a>&nbsp;&nbsp;
    {% else %}
        &laquo;first&nbsp;&nbsp;
    {% endif %}

    {% if previous_page %}
        <a href="/index.php?page=">&lt;</a>&nbsp;
    {% else %}
        &lt;&nbsp;
    {% endif %}

    {% for count in loop_start..loop_end %}
        {% if count == page %}
            &nbsp;
        {% else if end_page >= 1 %}
            <a href="/index.php?page="></a>&nbsp;
        {% endif %}
    {% endfor %}

    {% if next_page %}
        &nbsp;<a href="/index.php?page=">&gt;</a>
    {% else %}
        &nbsp;&gt;
    {% endif %}

    {% if page < end_page %}
        &nbsp;&nbsp;<a href="/index.php?page=">last&raquo;</a>
    {% else %}
        &nbsp;&nbsp;last&raquo;
    {% endif %}
</span>
・・・

これで、1ページに投稿は5件まで表示、ページは5ページ分までで、ページの中心数から前後2ページ分を表示できるようになりました!!
つまりはこう!!

2

うんうん、なかなか快適なBBSになってきました。まだまだだけど・・。

次は投稿した記事の編集・削除機能を組み込もうと思います。 よし・・・

頑張ろう。