ページネーション | リンギルミュージック

ページネーション
音楽素材のサイトの方でページネーションをBootstrapで作成しました。PHPで実装しておりデータベースは使用していません。以下はそのコードです。

PHP側の実装

例としてBGMのデータですが、PHPで配列として下記のように必要な情報をまとめています。

$BGM_ARRAY = array(
    array(
        'duration' => '1:36',
        'title' => 'ダンジョン 2',
        'name' => 'dungeon2_good',
        'date' => '2018-07-19',
        'good' => true,
        'update' => true,
        'use' => array(
            '中盤',
        ),
    ),

    //以下省略
    ・・・
);

サイトではこれを元にPHPHTMLタグのファイル一覧を作成しています。

次に、ページネーション作成のコードです。

/* ページネーションの作成
 *  引数 $ary 音声データの配列
 *  引数 $type 音声データの種類
 *  引数 $audioMaxNum ページに表示する音声ファイルの上限
 */
function getPagination($ary, $type, $audioMaxNum) {

    //戻り値用の配列
    $aryReturn = array();

    //BGMの音質の種類
    $quality = '';
    if ($type === 'bgm') {

        //GETメソッドで送信された値を抽出
        $quality = filter_input(INPUT_GET, 'quality');
        if ($quality === 'good' || $quality === 'midi') {

            //一時保持用の配列
            $aryTmp = array();

            //$valは配列の値
            foreach ($ary as $val) {

                //音質の種類により該当する値を抽出
                if ($quality === 'good' && array_key_exists('good', $val) ||
                $quality === 'midi' && array_key_exists('midi', $val)) {

                    //値を配列に追加
                    array_push($aryTmp, $val);
                }
            }

            //配列の変更
            $ary = $aryTmp;
        } else {

            //上記以外の文字列であればすべての音質を選択
            $quality = 'all';
        }

        //戻り値用の配列に値を追加
        $aryReturn['quality'] = $quality;

        //クエリの文字列を設定
        $quality = '&quality='.$quality;
    }

    //配列の数を取得
    $audioNum = count($ary);

    //最大ページ数を取得
    $pageMax = ceil($audioNum / $audioMaxNum);

    //遷移するページの番号を取得
    $page = filter_input(INPUT_GET, 'page');

    //変数が空か数値でないか0以下の数の場合
    if(empty($page) || !ctype_digit($page) || $page <= 0) {
        page = 1;

    //ページ番号が最大値を超えた場合
    } else if ($page > $pageMax) {
        $page = $pageMax;

    //それ以外はエスケープ処理をして取得
    } else {
        $page = h($page);
    }

    //取得する配列の最初の添字
    $index = ($page - 1) * $audioMaxNum;

    //配列を必要数切り取って取得
    $aryReturn['audioAry'] = array_slice($ary, $index, $audioMaxNum);

    //URLを取得しクエリを削除
    $url = strtok($_SERVER['REQUEST_URI'], '?');

    //ページネーションのhtmlタグ
    $tags = '';

    //'前へ'の要素を作成
    if ($page == 1) {

        //遷移するページが先頭の場合はspan要素で作成
        $tags .= '
            <li class="page-item disabled">
                <span class="page-link">前へ</span>
            </li>';
    } else {

        //それ以外はa要素でリンクにクエリを設定
        $tags .= '
            <li class="page-item">
                <a class="page-link" href="'.$url.'?page='.($page - 1).$quality.'">前へ</a>
            </li>';
    }

    //ページ番号の列を作成
    for ($i = 1; $i <= $pageMax; $i++) {
        if ($i == $page) {

            //遷移するページと一致する番号はspan要素で作成
            $tags .= '
                <li class="page-item active">
                    <span class="page-link">'.$i.'</span>
                </li>';
        } else {

            //それ以外はa要素でリンクにクエリを設定
            $tags .= '
                <li class="page-item">
                    <a class="page-link" href="'.$url.'?page='.$i.$quality.'">'.$i.'</a>
                </li>';
        }
    }

    //'次へ'の要素を作成
    if ($page == $pageMax) {

        //遷移するページが末尾であればspan要素で作成
        $tags .= '
            <li class="page-item disabled">
                <span class="page-link">次へ</span>
            </li>';
    } else {

        //それ以外はa要素でリンクにクエリを設定
        $tags .= '
            <li class="page-item">
                <a class="page-link" href="'.$url.'?page='.($page + 1).$quality.'">次へ</a>
            </li>';
    }

    $aryReturn['pagination'] = $tags;
    return $aryReturn;
}

//文字列のエスケープ処理
function h($str) {
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

GETとクエリについて、例として下記のようなa要素の場合、

<a href="/bgm.php?page=1&quality=all">1</a>

URL(この例では/bgm.php)の末尾に?から始まる文字列を追加する事で、クエリと呼ばれる変数がGETメソッドと呼ばれる方法でサーバーに送信されます。この場合のクエリの変数はpagequalityで、その値は=以後で指定します。この例のように複数指定する場合は&で区切ります。
エスケープ処理について、今回の実装では特に必要ないかもしれませんが、念の為に、送られてきたクエリがHTMLタグとして認識されないようにhtmlspecialchars()によってクエリの文字列を処理しています。

追記 8/30

サイトの改装により下記の実装で、select要素をbootstrap3のドロップダウンメニューにし、音質選択をジャンル選択に変更しました。

Bootstrap3によるドロップダウンメニューをPHPで実装

URL: ringil-music.com
使用言語: PHP 7.1.19
ライブラリ: Bootstrap 3・JQuery 1.12.4

コメントを残す

メールアドレスが公開されることはありません。