コメント登録画面、コメント一覧表示

さて、それでは各記事にコメントをつけていきましょう。

  1. コメントの作成
  2. 記事詳細でコメント一覧の表示

この順番で行きます。
その前に、実はSQL課題〜ブログ用のデータベースを作成しよう!で前準備をしておりました。
そのことに関する解説をします。

コメントがどの記事に対するものか管理する外部キー


SQL課題〜ブログ用のデータベースを作成しよう!では3つのテーブルを作成しました。
そのうち2つはすでに使用しました。

最後の1つ、commentsテーブルは、記事に対するコメントです。
ただし、あるコメントがどの記事に対するものか管理する必要があります。

MySQLでcommentsテーブルを見てみましょう。

DESC comments;

ちなみにDESCはMySQLコマンドの1つで、テーブルの構造を確認するために使用します。

post_idというカラムがあります。
これはpostsテーブルのどのidのものか管理しています。

例えば、postsテーブルのid = 1の記事に対するコメントであれば、commentsテーブルのpost_idには1が入ります。
これで、どの記事に対するコメントなのか管理できるようにします。

このようなカラムのことを 外部キー(foreign keyまたはFK) と言います。
またpostsテーブルとcommentsテーブルのように、テーブル同士で関係があることを リレーション と言います。

コメント作成ページ


コメント作成ページも記事の一覧、登録画面と同様なかたちでうまく行きます。
ただし、注意する点があります。

GETで渡ってきたpost_idをキャッチする


前ページからpost_idが渡ってきます。
このpost_idをキャッチすることで、どの記事に対するコメントか判断します。

$post_id = $_GET['post_id'];

フォームからPOST送信する際に、hidden属性でpost_idも送る


どの記事に対するコメントなのか、post_idも送信します。
この値は入力欄に表示させる必要もないため、hidden属性としておきます。

<input type="hidden" name="post_id" value="<?php echo $post_id; ?>">

登録完了したら、記事詳細ページに戻す


コメント登録が完了したら、記事の詳細ページに戻すのが自然なので、header関数で戻します。
このとき、?id=をつけることを忘れないでください。

// 対象のpost_idのdetail_post.phpにリダイレクト
header("Location: detail_post.php?id=".$post_id);

サンプルソース


create_comment.php

ちゃんとcommentsテーブルに登録できていれば、問題ありません。
今回はid=2の記事に対してコメントを残しました。

記事詳細ページ改修(コメント一覧表示)


さて、それでは記事詳細ページにて、その記事に対するコメントを一覧で表示しましょう。
画面イメージは下図の通りです。

commentsテーブルから対象のpost_idのコメントを取得


すでにpostsテーブルから記事レコードは取得していますが、その記事に対するコメントをcommentsテーブルから取得する必要があります。
基本的にはpostsテーブルで取得する方法と同様です。
ただし、条件文が違います。

SELECT * FROM comments WHERE post_id = :post_id"

post_idに騙されますが、要はGETで渡ってきたidのことです。
こちらはサンプルソースを見ていただくと分かるかと思います。

ループ文を使用してコメント一覧を表示


1つの記事に対してコメントは2つ、3つとたくさんつくことが想定されます。
そのため、ループ文を利用して表示してあげます。

<?php
// 結果が1行取得できたら
while ($row = $stmt_comments->fetch(PDO::FETCH_ASSOC)) {
    echo '<hr>';
    echo $row['name'];
    echo '<br />';
    echo $row['content'];
}
?>

ちなみに<hr>はHTMLの水平線タグで、一直線を引くときに使用します。
HTMLタグリファレンス

本当はもう少しカッコ良い方法もあるのですが、簡易的に実装するためにこちらを使用します。

サンプルソース


detail_post.php(コメント一覧表示)

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami