ひと言掲示板を作る

シンプルな掲示板を作る

ユーザーが簡単なメッセージを残すことのできる、シンプルな「ひと言掲示板」を作っていきます。
デモはこちら

機能は非常にシンプルですが、掲示板の作成はPHPプログラミングの基礎的なテクニックを幅広く活用することができます。
完成したときには次のような操作をプログラミングできるようになります。

• POST通信によるデータ送信
• ユーザーに入力されたデータのバリデーション＆サニタイズ
• ファイルの読み込み／書き込み
• データベースの基本的な操作
• セッションの管理
• データのCSVファイル出力

今回は、これから作っていく掲示板の仕様や開発環境を紹介していきます。

ひと言掲示板の仕様と開発環境

これから作る「ひと言掲示板」には次のような機能を実装します。

• 「表示名」と「ひと言メッセージ」を入力して自由に書き込む
• 誰かが書いたひと言メッセージを読む
• セッションを使って表示名の入力を省略する
• 掲示板を管理するページから投稿を編集・削除する
• 投稿データをCSV形式でダウンロードする

今回は匿名による投稿のみ受け付ける形にし、誰かの投稿に返信する機能もややシステムが複雑になってしまうためつけません。

開発環境

掲示板は次の環境で構築・動作確認を行っております。

• Apache v2.4.6
• PHP v7.3.3
• MariaDB v10.4.3

掲示板のシステム自体はPHPやMariaDBの最新バージョンにある機能をガシガシ使うというよりも、基礎的な機能を活用して構築していきます。
そのため、多少バージョンが古い環境でも動作します。

ただし、実際の開発でも公式サポートが終了したバージョンは使用を避けることが多く、特にバージョンの更新が活発なPHPなどは注意が必要です。
執筆時点ではセキュリティサポートが終了していないのはバージョン7.1以上になるため、もし開発環境を選べるのであればこのバージョン以上での開発を推奨します。

作成の流れ

これから何回かに分けて「ひと言掲示板」を作っていきますが、まずは全体の流れを紹介します。

1. ひと言掲示板を作る 概要

本ページ。
最初にこれから作っていく「ひとこと掲示板」がどういうものか、システム要件を含めて解説します。

1. シンプルな掲示板を作る
2. ひと言掲示板の仕様と開発環境
3. 作成の流れ

2. メッセージの入力フォームを作る

まずは掲示板に書き込むためのメッセージを入力するフォームから作成していきます。
ここではフォームの基本的なパーツとなるHTMLを作成します。

1. メッセージの入力フォームを作る
2. フォームのHTMLを作る

3. メッセージのデータを受け取る

HTMLで作成したフォームに、入力したメッセージをデータとして送信して、PHPでデータを受信できるようにします。
データの受け渡しの基礎を実装します。

1. 入力されたメッセージを受け取る
2. 入力したデータの受け渡し
3. 受け取ったデータを表示してみる

4. ファイルにデータを保存する

受信したメッセージのデータを、テキストファイルに書き込んで投稿データとして保存します。

1. メッセージをファイルに保存する
2. 受け取ったデータをファイルに保存する
3. PHPでファイルにアクセスする
4. 開いたファイルにデータを書き込む

5. ファイルからデータを読み込む

テキストファイルに保存したデータを読み込み、掲示板に今まで投稿されたメッセージとして表示します。

1. メッセージのデータをファイルから取得する
2. ファイルを読み込む
3. ファイルからデータを1行ずつ取得する
4. 読み込んだデータを配列に格納する
5. HTMLにメッセージを出力する

6. 投稿完了メッセージを表示する

メッセージの投稿が完了したら、ユーザーに投稿ができたことを知らせるためのメッセージを表示します。

1. メッセージが無事に投稿できたことを知らせる
2. 投稿完了メッセージを用意する
3. HTMLにメッセージ出力を設定する

7. 投稿の未入力バリデーションをつける

メッセージを投稿したときに、必要な情報がすべて入力されているかを自動的に確認する機能を実装します。

1. メッセージがちゃんと入力されているか確認する
2. エラーメッセージを用意する
3. メッセージを表示する
4. 未入力項目があると書き込みしないようにする

8. 投稿されたデータをサニタイズする

データのサニタイズ（コードの無効化）を実装します。
投稿されたメッセージに悪意のあるコードが紛れていたときなどのための対策になります。

1. 不正なメッセージの投稿からシステムを守る
2. サニタイズ機能を作る
3. サニタイズの効果を確認する

9. 投稿データの保存にデータベースを使う

ここまではデータの保存にテキストファイルを使用してきましたが、効率良く管理できるようにデータベースの使用に切り替えていきます。
データベースの管理には「phpMyAdmin」というツールを使いますが、こちらではインストール方法から解説していきます。

1. データベースでデータを管理する
2. MariaDBを使う
3. phpMyAdminをインストールする

10. 掲示板のデータベースとテーブルを作成する

phpMyAdminを使って、MariaDBに掲示板のデータを保存するためのデータベースとテーブルを新しく作成します。

1. phpMyAdminでデータベースを作成する
2. データベースを作成する
3. テーブルを作成する

11. 投稿データをデータベースに登録する

PHPからデータベースに接続し、投稿データをテーブルに登録する仕組みを構築します。

1. データベースにデータを登録する
2. データベースに接続する
3. データを登録してみる

12. データベースからデータを取得する

上記でテーブルに登録したデータを、今度は読み込んで掲示板に表示するようにしていきます。

1. データベースから投稿データを取得する
2. データベースからデータを取得する流れ
3. SELECT文でデータを取得する

13. コードを整理する

書いてきたPHPのコードをここで一旦整理して綺麗にします。

1. メンテナンスしやすいようにコードを綺麗にする
2. ファイル関連の処理を削除する
3. データベースの接続情報を定数にする

14. セッションで表示名の入力を省略する

セッションを使って、掲示板を利用するユーザーにちょっとだけ便利な機能を追加します。

1. セッションを導入する
2. セッションについて
3. 表示名をセッションに保存する

15. 管理ページを作成する

ここからは、今まで掲示板に書き込まれたデータを管理するページを新しく作っていきます。

1. 投稿を管理するためのページ
2. 管理ページのファイル構成
3. 管理ページのベースを作成

16. ログインページを作る

管理ページの入り口になるログインページを作成します。
ログイン情報が正しいかを判定する機能もここで実装します。

1. 管理ページの入り口を作る
2. ログインフォームを表示する
3. ログインパスワードを設定
4. ログイン判定

17. 投稿データをCSV形式でダウンロードする

今までに書き込まれたデータを一括でCSV形式のデータとしてダウンロードする機能を実装します。

1. 投稿データをCSV形式でダウンロードする
2. 管理ページにダウンロードボタンを設置する
3. download.phpを作成する
4. CSV形式のファイルを作成する
5. ファイルを出力する

18. 投稿データをダウンロードする件数を指定する

上記で作成したダウンロード機能に、ダウンロードするデータの件数を指定する機能を追加します。

1. ダウンロードする件数を指定する
2. ダウンロード件数を指定するフォームを設置する
3. パラメータからデータの取得件数を変更する

19. 投稿メッセージの編集ページを作る

掲示板に書き込まれたデータを編集する機能を実装していきます。
ここではベースとなる編集ページを作成します。

1. 投稿されたメッセージを編集する
2. 編集ページを作成する
3. ログインセッションを確認する
4. 編集ページのHTMLを作る
5. 管理ページと編集ページを繋げる

20. メッセージを編集する機能を実装する

上記で作成した編集ページに、実際に書き込んだデータの内容を編集する機能を実装します。

1. 投稿されたメッセージを編集する
2. POSTパラメータで「表示」と「更新」を切り替える
3. 編集したデータを保存する
4. メッセージの表示を修正する

21. 投稿メッセージの削除ページを作る

編集機能に続いて、特定の書き込みを削除する機能を実装します。

1. 投稿されたメッセージを削除する
2. 編集ページを複製して削除ページを作る
3. 投稿を削除する処理を記述する

22. 管理ページにログアウトを実装する

管理ページからログアウトする機能を実装します。

1. ログアウトするボタンを設置する
2. ログアウトする仕組み
3. ログアウトボタンを追記する
4. ログインセッションを削除する

23. リロードによる多重投稿を防止する

掲示板への投稿完了後に、再読み込み（リロード）したら同じ投稿が重複送信されてしまうことを予防するための機能を実装します。

1. リロードするとPOSTデータが再送信される
2. 再読み込みで同じ投稿がされる原因
3. 自動リダイレクトを実装

24. 投稿に文字数制限を設定する

掲示板に投稿できるひと言メッセージに最大文字数を設定します。

1. 投稿の文字数を設定する
2. 投稿されたメッセージの文字数をカウントする
3. 最大文字数のバリデーションを実装
4. 編集ページも最大文字数のバリデーションを実装

以上が全体の構成になります。
機能を1つずつ実装していくためページ数は多いですが、一歩ずつ着実に掲示板ができていくようになっています。

もし作っていて分からないことがあったり、お気付きの点がありましたら、各ページの下部にある「Good」「Bad」ボタンからメッセージを送っていただくか、お問い合せページよりお気軽にご連絡ください。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。