PDO を使用して、SQL から取得したデータはそのままだと、「ただの文字列。」って感じで読みやすくないですよね。

そこで取得したデータを表にして色付けとかするやり方を解説します。

内容としてはめっちゃ簡単。
しかし僕は 2 時間くらい無駄に彷徨ってたので初心者としてはあるあるな悩みかと思います！

今回は簡易的な本のブックマークアプリを作りました。 SQL からのデータの取得はもちろん SELECT を使用しています。
#Before それではまずは元のコードを見てみます ↓


<?php
// 1. DB接続（エラー処理追加）
// 下記がDB使う時のデフォルト的な書き方。とりあえずここの try｛｝の部分はコピペでいい。
try{ // try とcatch はセット try{}の中にエラーがあった場合、catch でエラー $e を受け取り、exit で $e を表示する
    $pdo = new PDO('mysql:dbname=gs_db;charset=utf8;host=localhost','root','root'); // PDO を使えるようにするコマンド。mysql と書いているのはこれを呼び出している、他のを使う場合はそれに書き換え。
}catch(PDOException $e){
    exit('DbConnectError:'.$e->getMessage());
}


// 2. データ登録 SQL 作成
$stmt = $pdo->prepare("SELECT * FROM gs_bm_table"); // MySQL の SELECT 文で全てのデータを取得。INSERT の時のように変数渡したり、登録も何もしていないので、ケースにもよるが基本は bindValue も必要ない。
$status = $stmt->execute(); // 実行


// 3. データを表示
$view = ""; // 事前にこれをグローバル変数で定義
if($status==false){ // 文面
    $error = $stmt->errorInfo();   //$stmt の中から errorInfo() にてエラー内容を取得
    exit("QueryError:".$error[2]); //errorInfo() の中で文字列として人間が読める文面が[2]番に入っているためこれを取得。
}else{ // エラーじゃない場合。登録の時は header() で元のページにリダイレクトさせるけど、表示の場合は現状 $stmt にデータが入っているからそれを表示させるだけ。
    while($result = $stmt->fetch(PDO::FETCH_ASSOC)){ //fetch() 関数はレコードを 1 行ずつ取り出すという意味。100 件データ（レコード）があったら自動で 100 件回る。そして $result に配列（FETCH_ASSOC は配列で返してくれる）で入れてくれる。
        $view .= '<p>';                              // $view は上にグローバル変数にて定義済みなので、「.=」で追加してる。<p> をつけると改行される。
        $view .= $result["indate"]."：";  //.= がないと最後のレコードしか表示されない。
        $view .= $result["b_name"]."：";
        $view .= $result["b_url"];
        $view .= '</p>';
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本のブックマークアプリ</title>
</head>
<body>

<!-- -------------ここで $view を表示してる ↓ ------------- -->
<div>
    <div><?= $view ?></div>  
</div>
<!-- -------------ここで $view を表示してる ↑ ------------- -->

</body>
</html>

（自分のためでもあるので、やたらコメント多いのはご了承ください）

上記の場合の出力結果は以下の通りです。
「日時：書籍名：書籍URL」の順に表示されています ↓

一応 p タグで改行してはいるものの、なんだか寂しい。。

それでは次は表にしてみたり色を付けてみて見やすくしてみたいと思います ↓

#After

下記が After のコードです ↓

<?php
// 1. DB接続（エラー処理追加）
// 下記がDB使う時のデフォルト的な書き方。とりあえずここの try｛｝はコピペでいい。
try{ // try とcatch はセット try{}の中にエラーがあった場合、catch でエラー $e を受け取り、exit で $e を表示する
    $pdo = new PDO('mysql:dbname=gs_db;charset=utf8;host=localhost','root','root'); // PDO を使えるようにするコマンド。mysql と書いているのはこれを呼び出している、他のを使う場合はそれに書き換え。
}catch(PDOException $e){
    exit('DbConnectError:'.$e->getMessage());
}


// 2. データ登録 SQL 作成
$stmt = $pdo->prepare("SELECT * FROM gs_bm_table"); // MySQL の SELECT 文で全てのデータを取得。INSERT の時のように変数渡したり、登録も何もしていないので、ケースにもよるが基本は bindValue も必要ない。
$status = $stmt->execute(); // 実行


// 3. データを表示
$view = ""; // 事前にこれをグローバル変数で定義
if($status==false){ // 文面
    $error = $stmt->errorInfo();   //$stmt の中から errorInfo() にてエラー内容を取得
    exit("QueryError:".$error[2]); //errorInfo() の中で文字列として人間が読める文面が[2]番に入っているためこれを取得。

}else{ // エラーじゃない場合。登録の時は header() で元のページにリダイレクトさせるけど、表示の場合は現状 $stmt にデータが入っているからそれを表示させるだけ。

    $view .= '<table>'; 

    $view .= '<tr>';                     
    $view .= '<th>'."登録日時".'</th>'; 
    $view .= '<th>'."書籍名".'</th>'; 
    $view .= '<th>'."書籍 URL".'</th>'; 
    $view .= '</tr>';  

    while($result = $stmt->fetch(PDO::FETCH_ASSOC)){ //fetch() 関数はレコードを 1 行ずつ取り出すという意味。100 件データ（レコード）があったら自動で 100 件回る。そして $result に配列（FETCH_ASSOC で配列で返してくれる）で入れてくれる。

        $view .= '<tr>';    
        $view .= '<td>'.$result["indate"]."：".'</td>'; 
        $view .= '<td>'.$result["b_name"]."：".'</td>'; 
        $view .= '<td>'.$result["b_url"].'</td>'; 
        $view .= '</tr>';  
  
    }
    $view .= '</table>';
}
?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本のブックマークアプリ</title>
</head>
<body>

<!-- -------------ここで $view を表示してる ↓ ------------- -->
<div>
    <div><?= $view ?></div>  
</div>
<!-- -------------ここで $view を表示してる ↑ ------------- -->

<!-- -------------ここで見た目の整え ↓ ------------- -->
<style> 
table{
    border-collapse: collapse;
}

table th{
    border: 2px solid rgb(163, 163, 163);
    background-color:rgba(253, 196, 89, 0.13);
    color:orange;
}

table td{
    border: 1px solid rgb(163, 163, 163);
}
</style>
<!-- -------------ここで見た目の整え ↑ ------------- -->


</body>
</html>

After の出力結果がこちら ↓

うん、雰囲気変わりましたね。

色付けは簡単にできるので、お試しあれ～！
では！