PHPとデータベースを使った掲示板

完成イメージ

この章では、php-basic10 で作成した「テキストファイルに保存するミニ掲示板」を、MySQLのデータベースに保存する構成へとリファクタリングします。これにより以下のようなメリットがあります

本格的なWebサービスに近い設計へステップアップできる
投稿データを検索・並び替え・集計しやすくなる
データの管理が安全かつ柔軟になる

https://webtraining.jp/php-basic/php-basic10

まずはSQLでデータベースとテーブルを作成します

testdbのデータベース内にbbsテーブルを作成します。

-- bbsテーブルの作成
CREATE TABLE bbs (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    comment VARCHAR(330) NOT NULL,
    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

--Tableに１行だけ追加
INSERT INTO bbs (name, comment)
VALUES ('テスト太郎', 'これはテスト投稿です');

`DEFAULT CURRENT_TIMESTAMP` の意味

created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP

DATETIME → 日付と時刻を「YYYY-MM-DD HH:MM:SS」形式で保存する型
NOT NULL → 必ず値を入れる（空にできない）
DEFAULT CURRENT_TIMESTAMP → 新しい行を追加したときに、自動的に「現在の日時」を入れる

`updated_at` とは？

投稿が更新（編集）されたときの日時を記録するカラムです。（のちのちのため）
編集機能を作ったときに「いつ編集されたか」を表示できます。

作成手順

ファイル名：php-db-bbs.phpを作成
データベースの準備（上記SQLを使用）
フォームの作成
- HTML で「名前」「コメント」入力欄と送信ボタンを作成
- style.cssを作成し、見た目を整える
投稿一覧の表示確認
- PHP でデータベースに接続
- SELECT * FROM bbs ORDER BY created_at DESC を実行して、投稿が表示できるか確認
- 投稿記事は、最新のものが上に表示されるようにする
投稿の追加機能
- PHPで INSERT INTO bbs (name, comment, created_at) VALUES (...) を実装
- フォームから送信 → データベースに保存 → 再読み込みで一覧に表示される流れを確認
バリデーション（入力チェック）
名前が空白だったら「名前を入力してください」
コメントが空白だったら「コメントが未入力です」
コメントが１００文字を超えていたら、コメントが制限を超えています。

完成コードの確認

<?php
session_start();

// DB接続
$dsn = 'mysql:host=localhost;dbname=testdb;charset=utf8mb4';
$user = 'root';
$password = '';

function h($str)
{
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

try {
    $pdo = new PDO($dsn, $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $errors = [];
    $rows = [];
    $maxComment = 100; // 最大文字数を定数的に定義

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $name = trim($_POST['name'] ?? '');
        $comment = trim($_POST['comment'] ?? '');

        // バリデーションチェック
        if ($name === '') {
            $errors[] = '名前を入力してください。';
        }
        if ($comment === '') {
            $errors[] = 'コメントを入力してください。';
        } elseif (mb_strlen($comment) > $maxComment) {
            $errors[] = "コメントは {$maxComment} 文字以内で入力してください。";
        }

        // バリデーションを通過した場合のみ登録
        if (empty($errors)) {
            $stmt = $pdo->prepare(
                "INSERT INTO bbs (name, comment) VALUES (?, ?)"
            );
            $stmt->execute([$name, $comment]);
            $_SESSION['flash_msg'] = "投稿しました！";
            header("Location: " . $_SERVER['PHP_SELF']);
            exit;
        }
    }
    // 一覧表示
    $stmt = $pdo->query("SELECT * FROM bbs ORDER BY id DESC");
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    echo "DBエラー：" . $e->getMessage();
    exit;
}
?>
<!DOCTYPE html>
<html lang="ja">
<style>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
font-family: sans-serif;
}
.red {
color: red;
}

input[type=text]{
    width: 100%;
    padding: .5rem 1rem;
}
textarea {
width: 100%;
height: 8em;
padding: 1rem;
}
.header {
    text-align: center;
}
.content{
    max-width: 800px;
    margin: auto;
}

.new-post{
    border: 1px solid #ddd;
    padding: 1rem;
    margin-bottom: 2rem;
}
.error{
    border: 1px solid #ddd;
    padding: 1rem 2rem;
    background-color: #fdc2c2;
    color: #c20303;
    border-radius: 5px;
    margin-bottom: 2rem;
}
.post{
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}
.post p{
    line-height: 1.5;
    margin: 0rem;
}
</style>
<head>
    <meta charset="UTF-8">
    <title>データベース版掲示板</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="header">
        <h1>掲示板（DB版）</h1>
    </header>
    <main class="content">
        <!-- メッセージ -->
        <?php if (!empty($_SESSION['flash_msg'])): ?>
            <p><strong><?= h($_SESSION['flash_msg']) ?></strong></p>
            <?php unset($_SESSION['flash_msg']); ?>
        <?php endif; ?>

        <!-- 入力フォーム -->
        <section class="new-post">
            <h2>新規投稿</h2>
            <form method="post">
                <p><label for="name">名前</label>
                    <input type="text" name="name" id="name" required>
                </p>
                <p>
                    <label for="come">コメント（最大<?= h($maxComment) ?>文字）</label>
                    <textarea name="comment" id="come" required maxlength="<?= h($maxComment) ?>"></textarea>
                </p>
                <button type="submit">投稿する</button>
            </form>
        </section>


        <!-- エラーメッセージ -->
        <section>
            <?php if (!empty($errors)): ?>
                <ul class="error">
                    <?php foreach ($errors as $e): ?>
                        <li><?= h($e) ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>
        </section>

        <section>
            <h2>投稿一覧（新しい順）</h2>
            <?php if (empty($rows)): ?>
                <p>まだ投稿はありません。</p>
            <?php else: ?>
                <?php foreach ($rows as $row): ?>
                    <article class=" post">
                        <header>
                            <strong><?= h($row['name']) ?></strong>
                            <time datetime="<?= h($row['created_at']) ?>">
                                （<?= h($row['created_at']) ?>）
                            </time>
                        </header>
                        <p><?= nl2br(h($row['comment'])) ?></p>
                    </article>
                <?php endforeach; ?>
            <?php endif; ?>
        </section>

    </main>
</body>

</html>

PHPとデータベースを使った掲示板

完成イメージ

まずはSQLでデータベースとテーブルを作成します

DEFAULT CURRENT_TIMESTAMP の意味

updated_at とは？

作成手順

`DEFAULT CURRENT_TIMESTAMP` の意味

`updated_at` とは？