Webアプリ開発入門 PHP+MySQL編1:投稿の削除機能を作ろう

<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <!-- ### ここに削除ボタンを追加 -->
        </tr>
    <?php } ?>
</table>

</body>
</html>

<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <!-- ### ここに削除ボタンを追加 -->
        </tr>
    <?php } ?>
</table>

</body>
</html>

<html>
<body>

<?php
// フォームで送信したデータを受け取ることができるか確認
if (isset($_POST["delete_id"])) {
    echo("delete_id: " . $_POST["delete_id"]);
}

// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit">削除</button>
                    <input type="hidden" name="delete_id" value=813 />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

<html>
<body>

<?php
// フォームで送信したデータを受け取ることができるか確認
if (isset($_POST["delete_id"])) {
    echo("delete_id: " . $_POST["delete_id"]);
}

// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit">削除</button>
                    <input type="hidden" name="delete_id" value=813 />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの削除
if (isset($_POST["delete_id"])) {
    $delete_id = $_POST["delete_id"];
    echo("delete_id: " . $delete_id);
    $sql = "### ここを修正 ###";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":delete_id", $delete_id, PDO::PARAM_INT);
    $stmt -> execute();
}

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

<html>
<body>

<?php
// データベースへの接続設定
$pdo  = new PDO("mysql:host=127.0.0.1;dbname=lesson;charset=utf8", "root", "");

// 受け取ったレコードの削除
if (isset($_POST["delete_id"])) {
    $delete_id = $_POST["delete_id"];
    echo("delete_id: " . $delete_id);
    $sql = "### ここを修正 ###";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindValue(":delete_id", $delete_id, PDO::PARAM_INT);
    $stmt -> execute();
}

// 全てのレコードを取得
$sql  = "SELECT * FROM bbs ORDER BY updated_at";
$stmt = $pdo->prepare($sql);
$stmt -> execute();
?>

<!-- 全てのレコードをHTMLテーブルで表示 -->
<table border=1>
    <!-- HTMLテーブルの1行目の表示 -->
    <tr>
        <th>id</th>
        <th>日時</th>
        <th>投稿内容</th>
        <th>削除ボタン</th>
    </tr>

    <!-- HTMLテーブルの2行目移行で全てのレコードを表示 -->
    <?php while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?= $row["id"] ?></td>
            <td><?= $row["updated_at"] ?></td>
            <td><?= $row["content"] ?></td>
            <td>
                <form action="bbs.php" method="post">
                    <button type="submit">削除</button>
                    <input type="hidden" name="delete_id" value=<?= $row["id"] ?> />
                </form>
            </td>
        </tr>
    <?php } ?>
</table>

</body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

問題ログインすると模範解答や入力を見ることができます

演習課題「削除ボタンを追加」

右側のbbs.phpでは、bbsテーブルのすべてのレコードをHTMLのテーブルで表示しています。

このテーブルの4列目に、削除ボタンを追加してください。
削除ボタンには、「button」タグを使い、テキストに「削除」と表示します。

この演習問題では、削除ボタンが実際に動作する必要はありません。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

問題ログインすると模範解答や入力を見ることができます

演習課題「813の謎」

右側のbbs.phpでは、HTMLテーブルの各行に削除ボタンがあります。
このボタンを押すと、常にformで「813」が送信されてしまいます。

ボタンを押したときに、対応するレコードのidを送信するようにコードを修正してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

問題ログインすると模範解答や入力を見ることができます

演習課題「POSTされたidを受け取ってレコードを削除」

右のbbs.phpでは、テーブルの各行にある削除ボタンを押すと、対応するidを送信します。

送信されたidを受け取って、対応するレコードを削除するようにコードを修正してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃08:投稿の削除機能を作ろう

ここからは応用編として、1行掲示板に機能を追加したり、見た目を整えたりと、さらにパワーアップさせてみます。このチャプターでは、投稿の削除機能を追加しましょう。

作成コード

このチャプターで作成した、bbs.phpのコードです。
https://paiza-webapp.s3.amazonaws.com/files/learning/webapp_php_sql/bbs_chap08.php

参考になるWebページ

ウェブアプリケーション - Wikipedia
https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3

LAMP (ソフトウェアバンドル) - Wikipedia
https://ja.wikipedia.org/wiki/LAMP_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%90%E3%83%B3%E3%83%89%E3%83%AB)

HTML/CSS入門 - paiza動画ラーニング
https://paiza.jp/works/html/primer

DB/SQL入門 - paiza動画ラーニング
https://paiza.jp/works/sql/primer

プログラミング学習 > Webアプリ開発入門 PHP+MySQL編 > Webアプリ開発入門 PHP+MySQL編1: 掲示板を作ろう > 投稿の削除機能を作ろう