後期第07回 - oddmutou/jugyo-2025kyototech GitHub Wiki

会員サービスに紐づけた掲示板サービスを作る

前期では掲示板を作りましたが、その掲示板に会員登録・ログイン機能を連結させましょう。

掲示板の各投稿データに投稿した人の会員データを紐づけてみましょう。

掲示板投稿テーブルに会員IDを保存し表示する

掲示板投稿テーブルは皆さん各々カラムを追加されているかもしれませんが、一旦作り直します。

※それを踏まえて自由に弄りたい人は自分で意図を読み取ってALTER TABLEなどで対応してもらってもかまいません。

まず既に作っている掲示板投稿テーブルを消します。

DROP TABLE bbs_entries;

次に、新しく掲示板投稿テーブルを作成します。

CREATE TABLE `bbs_entries` (
    `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `user_id` INT UNSIGNED NOT NULL,
    `body` TEXT NOT NULL,
    `image_filename` TEXT DEFAULT NULL,
    `created_at` DATETIME DEFAULT CURRENT_TIMESTAMP
);

テーブルができたので、掲示板プログラムを実装してみましょう。

ログインしていない場合は投稿できないようにしましょう。また、ログイン画面への導線も設置しましょう。

投稿の表示時には投稿者の会員IDを表示するようにしましょう。

今回は新しく public/bbs.php として作成します。

実装例 https://github.com/oddmutou/jugyo-2025kyototech/blob/e3ad6acf89407210edbc561c4e0a04e82706180c/koki_07/public/bbs.php

ログインし投稿して、テーブルにログインIDが保存されているか確認しましょう。


加えて、ログインや会員登録フォームまわりの導線を整えてあげることにより、初回訪問→ログイン画面→初めてなので会員登録画面へ→ログイン→掲示板→書き込み の流れがスムーズにできるようにしましょう。

実装例 https://github.com/oddmutou/jugyo-2025kyototech/commit/2a816dd27875b006bd3b09861500bf76682fac57

一度ログインしたあとに、未ログイン状態の動作確認をしたい場合は、ブラウザのプライベートブラウジング機能を使うと良いでしょう。また、セッション管理用のCookieを消して強制的にログアウトしてもよいです。

掲示板の投稿で会員情報も同時に表示する

投稿者の会員IDだけ表示されていると味気ないですよね。

会員ID以外の会員情報として、まずは投稿者の「名前」を会員情報テーブルから一緒に引っ張ってきて表示してみましょう。

テーブル結合(JOIN)を使い、一緒に引っ張ります。

実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/23eff084bf38adbb23c7ac26fe72e0a750d865bd

演習

演習1

会員の名前だけでなく、会員のアイコン画像のファイル名も取得し、掲示板の各投稿者名の左にアイコンを表示してみましょう。

実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/b03452c9249c481edde5edab5890bb0b5ba56254

演習2

テーブル結合(JOIN)を使って、投稿テーブル(bbs_entries)からのデータ取得と同時に会員情報テーブル(users)から投稿者の情報を取得するようにしました。これを、JOINを用いずに、サブクエリを用いた書き方に変えてみましょう。

実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/28e9f7210fdfc85556cce93cf8b87e65094de181

演習3

PHPの標準のセッション機能はデフォルトで1440秒(24分)でタイムアウトします(有効期限切れになります)。

その有効期限を長くしてみましょう。具体的には、1日にしてみましょう。

php.ini に、追記することによって、実現してください。

実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/d719e639dda0b0f34f68a57c47b05e32ce1d4e75