PHPでデータベースから情報を取得し、javascriptでページネーションを実装 #1 PHPの書き方

投稿日 : 2023年01月28日更新日 :

やりたいこと
ファイル構成
データベースに接続
1. dbc.php
2. env.php
ページネーションのための変数を設定
HTMLでPHPの変数を受け取る
まとめ

やりたいこと

以下のように、PHPでデータベースから取得した情報を10件ずつ, javascriptでページネーションする方法を紹介します。

参考

ファイル構成

フォルダの中には以下のファイルが存在します。

データベースに接続

dbc.php

データベースに接続できたら何も現れません。失敗したら、エラー（接続失敗です）が表示されます。

require_once 'env.php';

        function dbconnect(){
    $host = DB_HOST; // 個人情報はenv.phpに記載
    $db = DB_NAME; // 個人情報はenv.phpに記載
    $user = DB_USER; // 個人情報はenv.phpに記載
    $pass = DB_PASS; // 個人情報はenv.phpに記載

    $dsn = "mysql:host=$host;dbname=$db;charset=utf8mb4";

    try{
        $pdo = new PDO($dsn, $user, $pass, [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
        ]);
        return $pdo;
    } catch(PDOException $e) {
        echo '接続失敗です'. $e->getMessage();
        exit();
    }
}

env.php

個人情報は別ファイルに記載しておくのが安全です。

define('DB_HOST', 'localhost'); // xamppのローカルならlocalhost
define('DB_NAME', 'xxxxxx'); // データベース名
define('DB_USER', 'root'); // ユーザー名
define('DB_PASS', '*******');  // パスワード

ページネーションのための変数を設定

function.php

ページネーションするには、3つの値が必要です。

1 ページネーションの数 ($totalPages)

2 現在ページ ($page)
現在、開いているページ

3 スタートページ ($start)
何件目からスタートするか。1ページ10件表示するなら、 2ページ目はテーブルの11件目、3ページ目は21件目からスタート。

1 ページネーションの数 ($totalPages)

データベースのテーブル内の総数を1ページの表示件数で割り、 ceilで整数にしたものがページネーションの数です。

例）100件 / 1ページ10件表示 = 10

require_once 'dbc.php'; // dbc.phpを読み込む

function totalPages(){
    // データベースに接続
    $dbh = dbconnect();
    // pc(テーブル名)からidの件数を取得
    $id_num = $dbh->prepare("
    SELECT COUNT(*) id
    FROM pc  
    ");
    $id_num->execute();
    $id_num = $id_num->fetchColumn();
    
    // ページネーションの数を取得する 1ページに10件表示
    $totalPages = ceil($id_num / 10);
    
    return $totalPages;
}

2 現在ページ ($page) と 3 スタートページ ($start)

4-9行目 : $pageの設定

13-18行目 : $startの設定

function page(){
    // $pageの設定
    // pageがGET送信されていた場合
    if (isset($_GET['page'])) {
        $page = (int)$_GET['page'];
      // pageがGET送信されていない場合、pageは1
      } else {
        $page = 1;
    }
    
    // $startの設定
    // 例：２ページ目の場合は、『(2 * 10) - 10 = 10』
    if ($page > 1) {
        $start = ($page * 10) - 10;
      } else {
        // 1ページ目は0件目からスタート
        $start = 0;
    }
    // $page と $start を返す
    return [$page, $start];
}

データベースから情報を取得

テーブルpcから、10件のデータを取得します。

function Get10Data(){
    // データベースに接続
    $dbh = dbconnect();
    // 関数page()から$page, $startを取得
    list($page, $start) = page();
    
    // $startの位置から10件取り出す
    $pc = $dbh->prepare("
        SELECT id, title  
        FROM pc ORDER BY id asc
        LIMIT {$start}, 10
    ");
    $pc->execute();
    $pc = $pc->fetchAll(PDO::FETCH_ASSOC); 
    // $pc, $start, $page を返す
    return [$pc, $start, $page];
    $dbh = null;
}

以上で、3つの値 $totalPages, $start, $page を設定することができました。

HTMLでPHPの変数を受け取る

以下のようにHTMLファイルの先頭に、PHPを記述し、変数をHTMLで受け取り、表示します。

<?php
require('./function.php');

list($pc) = Get10Data();
list($page) = page();

$totalPages = totalPages();

function h($s){
  return htmlspecialchars($s, ENT_QUOTES, "UTF-8");
}

?>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
      ・
      ・
      ・
  </body>
</html>

以上で、PHP側の準備が終わりました。次回、javascriptでページネーションを実装したいと思います。

まとめ

env.phpに個人情報を記載
dbc.PHPでデータベースに接続
function.phpに関数を記述
1. ページネーションの数 ($totalPages)
2. 現在、開いているページ($page)
3. スタートページ ($start)
HTMLでPHPの変数を受け取る

PHPでデータベースから情報を取得し、javascriptでページネーションを実装 #1 PHPの書き方

やりたいこと

参考

ファイル構成

データベースに接続

dbc.php

env.php

ページネーションのための変数を設定

function.php

1 ページネーションの数 ($totalPages)

2 現在ページ ($page) と 3 スタートページ ($start)

データベースから情報を取得

HTMLでPHPの変数を受け取る

まとめ

こんな記事も読まれています。

【HTML】【CSS】【javascript】電卓の作り方

【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方

波紋エフェクトを表現するjqueryのripples-min.jsの使い方

【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。

要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？

Javascriptを使ったページネーションの実装

【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する

【javascript】連想配列をテーブルできれいに表示する方法

profile

パソコン好きなガオ

パソコン

javascript

カメラ

ブログ