記事編集画面、削除機能

さて、それでは記事を編集、削除できるようにしましょう。
そのために、main.phpで編集、削除へのリンクを作成しておく必要があります。

メインページの改修


さて、まずはメインページを改修します。
とはいっても、リンクを2つ増やすだけです。

main.phpに下記の、左に+マークがついた行を追記しましょう。
+マークは実際にソースコード中に書かないでください。)

<table>
    <tr>
        <td>記事ID</td>
        <td>タイトル</td>
        <td>本文</td>
        <td>投稿日</td>
+       <td></td>
+       <td></td>
    </tr>
    <?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { ?>
        <tr>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['title']; ?></td>
            <td><?php echo $row['content']; ?></td>
            <td><?php echo $row['time']; ?></td>
+           <td><a href="edit_post.php?id=<?php echo $row['id']; ?>">編集</a></td>
+           <td><a href="delete_post.php?id=<?php echo $row['id']; ?>">削除</a></td>
        </tr>
    <?php } ?>
</table>


さて、下記2つはedit_post.phpdelete_post.phpへのリンクになります。

<td><a href="edit_post.php?id=<?php echo $row['id']; ?>">編集</a></td>
<td><a href="delete_post.php?id=<?php echo $row['id']; ?>">削除</a></td>

ただ、何か余計なものがついています。
?以降は、次のページに渡したいデータになります。

もう少し正確に言えば、GETでidという名前がついた値を渡しています。
上記のような書き方だと分かりづらいですが、下記ではどうでしょう?

<a href="edit_post.php?id=1; ?>">編集</a>

id = 1edit_post.phpに渡しています。
このidを渡すことで、edit_post.phpではそのidの記事を表示させることができます。
(もちろん、その処理を書きます。)

渡すidを動的にするために、PHPにて埋め込んでいます。

<td><a href="edit_post.php?id=<?php echo $row['id']; ?>">編集</a></td>

削除も同じですね。
下記の場合は、削除を担当するdelete_post.phpid = 1を渡すことで、対象IDの削除処理を実施します。

<a href="delete_post.php?id=1">削除</a>

id部分を動的にするために、下記のようにPHPを埋め込んでいます。

<a href="delete_post.php?id=<?php echo $row['id']; ?>">削除</a>

 

編集画面、編集完了画面


今回、編集画面は少し複雑なので、サンプルソースを先に写してもらい、それをもとに解説をしたいと思います。
編集画面と、実際に編集処理を行うファイルは分けたいとおもいます。

サンプル

記事編集画面

記事編集完了画面

記事編集画面

さて、まずは編集画面です。
サンプルソースを写してもらうと、下図のような画面かと思います。

記事を編集するためには、 まず編集したい記事の情報を取得する 必要があります。

先ほど、「編集」へのリンクを作成した際に、?id=<?php echo $row['id']; ?>でこのedit_post.phpidを渡しています。
まずはそれを受け取りましょう。

// URLの?以降で渡されるIDをキャッチ
$id = $_GET['id'];

この受け取ったidが編集したい記事のものなので、この$idを使用してpostsテーブルを検索します。
ただし、もし$idempty(空)だったら、検索しても意味ないのでmain.phpにリダイレクトさせます。

// もし、$idが空であったらmain.phpにリダイレクト
// 不正なアクセス対策
if (empty($id)) {
    header("Location: main.php");
    exit;
}

これ以降の処理は今までやったものと近いので、割愛します。
最後に、DBから取得した各値を変数に格納しておきます。

// 結果が1行取得できたら
if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $id = $row['id'];
    $title = $row['title'];
    $content = $row['content'];
} else {
    // 対象のidでレコードがない => 不正な画面遷移
    echo "対象のデータがありません。";
}

さあ、これで準備はできました。
編集画面というと、編集する前のデータが表示されている必要があります。

inputタグvalue属性に値を入れておくと、あらかじめテキストボックスの中に入れておく値を設定できます。
(これはHTMLの文法です。)
そこに埋め込みPHPで、先ほどの変数を設定してあげます。

<input type="hidden" name="id" value="<?php echo $id; ?>" >
title:<br>
<input type="text" name="title" id="title" style="width:200px;height:50px;" value=<?php echo $title; ?>><br>
content:<br>
<input type="text" name="content" id="content" style="width:200px;height:100px;" value=<?php echo $content; ?>><br>


formタグで囲っているので、ここで編集した値をedit_done_post.phpに渡します。
hidden属性でidも渡していることに留意しておいてください。

編集完了画面、処理


編集完了画面を見る前に、実際に編集してみましょう。
うまくいったのであれば、下図のようにページが表示されるはずです。

DBも確認してみましょう。
書き換わっていることが分かります。
(今回はid=3に追記しました。)

さて、実はedit_done_post.phpでやっている処理の流れは今までやってきたことと大差ありません。
ただ、上記の編集画面の処理と一緒にしてしまうと、ごちゃごちゃしてしまうので分けています。

今回は、編集画面からPOSTで送られたidtitlecontentを受け取り、その値をもとにDBをUPDATEします。

$id = $_POST["id"];
$title = $_POST["title"];
$content = $_POST["content"];

あるidの値を書き換えたい場合は下記のようなUPDATE文 でしたね。
MySQL

このUPDATE文をPDOで実行しているだけです。

削除処理


削除にかんしては、ただDBからレコードを消すだけなので、専用のページは作りません。
以下の処理で考えます。

  • メインページで削除ボタンを押す。
  • delete_post.phpに移動する。
  • 対象の記事を削除する。
  • 削除が完了したらmain.phpにリダイレクトする。

さて、この処理は今までの知識の範囲内です。
ヒントのサンプルコードは下記に示しますので、頑張って埋めましょう。

postsテーブルのid = 1のレコードを削除する場合は、下記のようになります。

DELETE FROM posts WHERE id = 1;


実際に削除できていれば、DBからレコードが消えています。

サンプル

delete_post.php

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami