CONTENTS
  1. HOME
  2. PHP
  3. PHPとデータベース掲示板にログイン後の削除ボタン

PHPとデータベース掲示板にログイン後の削除ボタン

フォルダとファイル名

php-db10のフォルダに下記を構成。前回作成したデータベース掲示板をコピーしてファイル名をindex.phpに変更。

php-db10/
├── common.php   # セッション開始、管理者ログイン情報、DB接続情報、共通関数
├── login.php    # 管理者ログイン画面
├── auth.php     # 認証処理（ログイン判定、セッション保存）
├── index.php    # 掲示板ページ（投稿一覧・投稿フォーム・削除ボタン）
├── delete.php   # 投稿削除処理（ログイン必須）
└── logout.php   # ログアウト処理（セッション破棄）

完成イメージ

1.common.php（定数と共通処理）

<?php
session_start();

// 管理者ログイン情報
define('ADMIN_USER', 'admin');
define('ADMIN_PASS', 'password123');

// DB接続情報（共通化）
$dsn = 'mysql:host=localhost;dbname=testdb;charset=utf8mb4';
$user = 'root';
$password = '';

// エスケープ関数
function h($str)
{
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

データベースに接続する情報も追加しておきます。

2.login.php（ログインフォーム）

index.phpから管理者ログインをクリックすると表示するログインページ

<?php
require 'common.php';
// セッションにエラーメッセージがあれば取り出す
$errors = $_SESSION['errors'] ?? [];
unset($_SESSION['errors']); // 一度表示したら削除
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ログイン</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 style="text-align:center;">管理者ログイン</h1>
    <?php if (count($errors) > 0): ?> <!-- ← count() で判定 -->
        <div class="error">
            <?php foreach ($errors as $error): ?>
                <p><?= h($error) ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
    <form action="auth.php" method="post" class="login">
        <p>
            <label>ユーザー名：<br>
                <input type="text" name="username">
            </label>
        </p>
        <p>
            <label>パスワード：<br>
                <input type="password" name="password">
            </label>
        </p>
        <button type="submit">ログイン</button>
    </form>
</body>
</html>

3.auth.php（認証処理）

ログインページから認証ページへ（エラーチェックのバリデーションなど）

<?php
require 'common.php';
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
$errors = [];

// 1. バリデーション（空欄チェック）
if ($username === '') {
    $errors[] = 'ユーザー名を入力してください。';
}
if ($password === '') {
    $errors[] = 'パスワードを入力してください。';
}

// エラーがあれば login.php に戻す
if (count($errors) > 0) {  // ← count() に変更
    $_SESSION['errors'] = $errors;
    header('Location: login.php');
    exit;
}

// 2. 認証チェック
if ($username === ADMIN_USER && $password === ADMIN_PASS) {
    $_SESSION['logged_in'] = true;
    $_SESSION['flash_msg'] = 'ログインしました。';
    header('Location: index.php');
    exit;
} else {
    $_SESSION['errors'] = ['ユーザー名またはパスワードが違います。'];
    header('Location: login.php');
    exit;
}

4.index.php（ログイン後のページ）

ログインしない時とログインした後では、投稿削除ボタンのあるなしが有り

<?php
require 'common.php';

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 (count($errors) === 0) {
    $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">

<head>
    <meta charset="UTF-8">
    <title>データベース版掲示板</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="header">
        <h1>Mini掲示板</h1>
        <?php if (!empty($_SESSION['logged_in'])): ?>
            <p class="login-status">現在ログイン中：<strong>管理者</strong>　
                <a href="logout.php">ログアウト</a>
            </p>
        <?php else: ?>
            <p><a href="login.php">管理者ログイン</a></p>
        <?php endif; ?>
    </header>

    <main class="content">
        <!-- フラッシュメッセージ -->
        <?php if (!empty($_SESSION['flash_msg'])): ?>
            <p class="message"><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" value="<?= h($name ?? '') ?>">
                </p>
                <p>
                    <label for="come">コメント（最大<?= h($maxComment) ?>文字）</label>
                    <textarea name="comment" id="come" maxlength="<?= h($maxComment) ?>">
                        <?= h($comment ?? '') ?>
                    </textarea>
                </p>
                <button type="submit">投稿する</button>
            </form>
        </section>

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


        <!-- 投稿一覧 -->
        <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>

                        <!-- ログインしている場合のみ削除ボタンを表示 -->
                        <?php if (!empty($_SESSION['logged_in'])): ?>
                            <form action="delete.php" method="post" class="delete-form">
                                <input type="hidden" name="id" value="<?= h($row['id']) ?>">
                                <button type="submit" onclick="return confirm('本当に削除しますか？');">
                                    投稿を削除
                                </button>
                            </form>
                        <?php endif; ?>
                    </article>
                <?php endforeach; ?>
            <?php endif; ?>
        </section>
    </main>
</body>

</html>

5.削除処理（ログイン後）

<?php
require 'common.php';

// 1. ログインしていない場合はログインページにリダイレクト
if (empty($_SESSION['logged_in'])) {
    header('Location: login.php');
    exit;
}

try {
    // 2. DB接続
    $pdo = new PDO($dsn, $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 3. POSTデータから削除対象のIDを取得
    $id = (int)($_POST['id'] ?? 0);

    if ($id > 0) {
        $stmt = $pdo->prepare("DELETE FROM bbs WHERE id = ?");
        $stmt->execute([$id]);
        $_SESSION['flash_msg'] = "投稿を削除しました。";
    } else {
        $_SESSION['flash_msg'] = "削除対象が不明です。";
    }

    // 4. 掲示板ページにリダイレクト
    header("Location: index.php");
    exit;
} catch (PDOException $e) {
    echo "DBエラー：" . $e->getMessage();
    exit;
}

6.logout.php（ログアウト処理）

<?php
require 'common.php';

// ---------------------------
// セッションの中身を空にする
// ---------------------------
$_SESSION = [];

// ---------------------------
// セッション自体を破棄（IDも無効化）
// ---------------------------
session_destroy();

// ---------------------------
// ログインページにリダイレクト
// ---------------------------
header('Location: index.php');
exit;
参考：style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: sans-serif;
}


form.login {
max-width: 300px;
border: 1px solid #ddd;
padding: 1rem;
margin: auto;
}
.login input[type="text"],
.login input[type="password"]{
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}
.login button{
background: #02566b;
color: white;
border: none;
padding: .6rem 3rem;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
}


.header {
    text-align: center;
    margin-bottom: 1rem;
    }

.content {
    max-width: 800px;
    margin: auto;
}

.new-post {
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 2rem;
}
.new-post label{
display: block;
}
.new-post input[type="text"],
.new-post textarea{
    width: 100%;
    padding: .5rem 1rem;
    box-sizing: border-box;
}
textarea{
    height: 8rem;
}
.new-post button{
    background: #16acd2;
color: white;
border: none;
padding: .6rem 3rem;
border-radius: 4px;
cursor: pointer;
}

.message{
    background-color: rgb(186, 255, 255);
    text-align: center;
    border-radius: 5px;
    margin-bottom: 1rem;
    padding: 1rem 0;
}
.error {
background-color: #fdc2c2;
color: #c20303;
padding: 1rem;
padding-left: 3rem;
border-radius: 5px;
margin-bottom: 2rem;
}

.post {
border-bottom: 1px solid #ddd;
padding: 1rem 0;
}

.delete-form {
margin-top: .5rem;
}

.delete-form button {
background: #c20303;
color: white;
border: none;
padding: .3rem .8rem;
border-radius: 4px;
cursor: pointer;
}

.delete-form button:hover {
opacity: 0.8;
}

.login-status {
    text-align: center;
    margin-bottom: 1rem;
    color: #02566b;
}
.login-status a {
    color: #c20303;
    margin-left: 1rem;
    text-decoration: none;
}
.login-status a:hover {
    text-decoration: underline;
}