🛡️ はじめに：ついにWebアプリ開発へ
こんにちは、「ぷろぐらの森」です🌲
これまで、HTMLで画面を作り、PHPで計算し、MySQLでデータを保存する方法を学んできました。
今回は、それら全ての知識を合体させて、「実際に動くWebアプリ」を作ります！
作るのは「冒険者の酒場掲示板」。
誰でも自由にメッセージを書き込めて、それが保存され、画面に表示される……
いわゆる「ひとこと掲示板（BBS）」です。
これが作れれば、TwitterのようなSNSも、LINEのようなチャットツールも、仕組みの基本はまったく同じ。
さあ、エンジニアとしての大きな一歩を踏み出しましょう！
1. 設計図：どんなアプリを作る？
まずは、アプリの仕組みを整理します。 必要な機能はシンプルに3つです。
- 入力フォーム: 名前とメッセージを入力して「送信」する。
- 保存（INSERT）: 送信されたデータをデータベースに入れる。
- 表示（SELECT）: データベースからデータを取り出して画面に出す。
データベースの準備
phpMyAdminなどを開き、以下のSQLを実行して「掲示板用のテーブル」を作ってください。
＊仮想環境(Docker)の構築手順書は今後の記事で解説予定です🙇♂️
＃＃SQL＃＃
CREATE TABLE board (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
comment VARCHAR(255),
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
name: 投稿者の名前（勇者名）comment: メッセージ本文created_at: 投稿日時（自動で今の時間が入ります）
2. 実装！ソースコード完全版
今回は分かりやすく、たった1つのファイル（board.php）ですべての処理を行います。
以下のコードをコピーして、board.php という名前で保存してください。
＃＃PHP＃＃
<?php
// 1. データベース接続（前回の記事で学んだPDO！）
try {
$dsn = 'mysql:dbname=my_game_db;host=localhost;charset=utf8';
$user = 'root';
$pass = 'password'; // 自分の環境に合わせてね
$pdo = new PDO($dsn, $user, $pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "接続エラー: " . $e->getMessage();
exit();
}
// 2. 「送信」ボタンが押された時の処理（INSERT）
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'];
$comment = $_POST['comment'];
// 名前とコメントが空じゃなければ保存
if (!empty($name) && !empty($comment)) {
// SQLインジェクション対策（プリペアドステートメント）
$sql = "INSERT INTO board (name, comment) VALUES (:name, :comment)";
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':name', $name, PDO::PARAM_STR);
$stmt->bindValue(':comment', $comment, PDO::PARAM_STR);
$stmt->execute();
}
}
// 3. データの取得（SELECT）
// 新しい順（DESC）に取得する
$sql = "SELECT * FROM board ORDER BY created_at DESC";
$stmt = $pdo->query($sql);
$messages = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>冒険者の酒場掲示板</title>
<style>
body { font-family: sans-serif; background-color: #f4f4f4; padding: 20px; }
.post { background: white; padding: 15px; margin-bottom: 10px; border-radius: 5px; border-left: 5px solid #2ecc71; }
.info { color: #888; font-size: 0.8em; }
</style>
</head>
<body>
<h1>🍺 冒険者の酒場掲示板</h1>
<form action="" method="post" style="margin-bottom: 30px;">
名前：<input type="text" name="name" required><br>
一言：<input type="text" name="comment" required>
<button type="submit">書き込む</button>
</form>
<hr>
<?php foreach ($messages as $msg): ?>
<div class="post">
<strong><?php echo htmlspecialchars($msg['name'], ENT_QUOTES, 'UTF-8'); ?></strong>
<span class="info"><?php echo $msg['created_at']; ?></span>
<p><?php echo htmlspecialchars($msg['comment'], ENT_QUOTES, 'UTF-8'); ?></p>
</div>
<?php endforeach; ?>
</body>
</html>
3. 解説：プログラムの裏側で何が起きている？
コードが少し長いですが、やっていることはこれまで学んだことの組み合わせです。
① POST送信を受け取る（if文）
＃＃PHP＃＃
if ($_SERVER['REQUEST_METHOD'] === 'POST') { ... }これは「もし、フォームの送信ボタンが押されたら」という判定です。 これがないと、画面を開いた瞬間に空のデータを保存しようとしてエラーになってしまいます。
② データを保存する（PDO & INSERT）
前回の記事でやった prepare と bindValue を使って、安全にデータを保存しています。
ユーザーが入力したデータを扱う時は、必ずこの手順を踏むのが鉄則でしたね！
③ データを表示する（foreach）
取得した $messages（配列）を、foreach ループで回してHTMLの中に埋め込んでいます。
これで、投稿が100件あっても自動的にすべての投稿が表示されます。
4. ⚠️ セキュリティの必須知識「XSS対策」
コードの中に、少し見慣れない呪文がありましたね。
＃＃PHP＃＃
htmlspecialchars($msg['comment'], ENT_QUOTES, 'UTF-8');これは「XSS（クロスサイト・スクリプティング）」という攻撃を防ぐためのバリアです。
もし、悪い勇者がメッセージ欄に <script>ウイルスのプログラム</script> と入力して投稿したらどうなるでしょう？ そのまま表示すると、掲示板を見た人全員のブラウザでウイルスが実行されてしまいます。
htmlspecialchars は、< や > といった記号を「ただの文字」に変換して、プログラムとして動かないように無害化してくれる関数です。
「画面に文字を表示する時は、必ず htmlspecialchars で囲む！」
これはWebエンジニアの義務として覚えておきましょう。
5. まとめ：Webアプリ開発の扉は開かれた！
お疲れ様でした！これで、あなただけの掲示板が完成しました🎉
- HTMLフォームでデータを送る。
- PHPでデータを受け取り、MySQLに保存する。
- 保存したデータを一覧表示する。
この「入力・保存・表示」のサイクルこそが、Webアプリケーションの基本中の基本です。 ここから「編集機能」や「削除機能」をつけたり、「ログイン機能」を追加したりすれば、どんどん本格的なアプリに進化していきます。
ここまでの知識があれば、もう「初心者」は卒業です。
自信を持って、自分の作りたいゲームやサービス開発に挑戦してくださいね！
コメント