音楽素材のサイトの方でページネーションを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(
'中盤',
),
),
//以下省略
・・・
);
サイトではこれを元にPHP
でHTML
タグのファイル一覧を作成しています。
次に、ページネーション作成のコードです。
/* ページネーションの作成
* 引数 $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メソッドと呼ばれる方法でサーバーに送信されます。この場合のクエリの変数はpage
とquality
で、その値は=
以後で指定します。この例のように複数指定する場合は&
で区切ります。
エスケープ処理について、今回の実装では特に必要ないかもしれませんが、念の為に、送られてきたクエリがHTML
タグとして認識されないようにhtmlspecialchars()
によってクエリの文字列を処理しています。
追記 8/30
サイトの改装により下記の実装で、select要素をbootstrap3のドロップダウンメニューにし、音質選択をジャンル選択に変更しました。
Bootstrap3によるドロップダウンメニューをPHPで実装
URL: ringil-music.com
使用言語: PHP 7.1.19
ライブラリ: Bootstrap 3・JQuery 1.12.4