「予約フォームを作ってほしい」と頼まれたとき、何から手をつけたらいいか迷ったことはありませんか?
特にPHP初心者の方や、副業・案件でWeb制作を受けている方にとって
「メール通知はどう組み込む?」「予約の重複は防げる?」といった不安はつきものです。
今回ご紹介するのは、PHPとMySQLだけで動くシンプルな予約システムの構築法です。
フォームの作成からデータ保存、管理画面、CSV出力、メール通知まで
実務で“そのまま使えるレベル”で丁寧に解説しています。
本記事で学べること
- 日時選択つきの予約フォームをHTML+PHPで作成する方法
- データベースに予約内容を保存し、管理画面で一覧表示
- CSVエクスポート機能の追加方法
- 予約者&管理者へのメール通知(PHPMailer対応)
- 同一時間帯の重複予約を防ぐロジックの実装方法
- ChatGPTを使った改造・拡張のプロンプト集
完成イメージ
今回作る予約システムの完成像は以下の通りです。
- ユーザーが名前・メール・希望日時を入力して予約
- 管理者が予約一覧を管理画面で確認
- CSVとしてエクスポートも可能
- 予約確認メール(自動送信)対応
- PHP+MySQL+HTMLのみで動作!
ファイル構成
reservation-system/
├── index.php ← 予約フォーム画面
├── reserve.php ← POSTされた予約データの処理
├── admin/
│ ├── login.php ← 管理者ログイン画面
│ ├── dashboard.php ← 管理画面(予約一覧・CSV出力)
│ └── export.php ← CSVエクスポート処理
├── mail/
│ └── send_mail.php ← 予約確認メール送信(PHPMailer)
├── includes/
│ ├── db.php ← DB接続設定
│ └── auth_check.php ← ログイン認証処理
├── css/ ← スタイル用フォルダ
├── js/ ← クライアントJS
└── db.sql ← 初期テーブル定義ファイル
ディレクトリは機能ごとに分かれており、保守・再利用しやすい構成になっています。
STEP1|予約フォームを作成しよう(日時・名前・連絡先など)
まずは、ユーザーが予約するための「入力フォーム」から作っていきましょう。
今回の予約フォームでは、以下のような項目を入力してもらう想定です。
- 名前(必須)
- メールアドレス(必須)
- 希望日時(カレンダーから選択)
- 備考(任意)
フォームのデザインはシンプルにしつつ、必須チェックや日時選択の制御も行います。
ここでは、ユーザーが予約時に入力する画面(index.php)を作成します。
予約内容として、名前・メールアドレス・希望日時・備考を送信できるように設計します。
HTMLフォームの基本構造とrequired
属性を使った必須チェックを組み合わせて、フロントのUIを整えていきましょう。
✅ 完成イメージ
<form action="reserve.php" method="post">
<!-- 名前の入力欄 -->
<label>お名前(必須)<br>
<input type="text" name="name" required>
</label><br><br>
<!-- メールアドレスの入力欄 -->
<label>メールアドレス(必須)<br>
<input type="email" name="email" required>
</label><br><br>
<!-- 希望日時の入力欄 -->
<label>希望日時(必須)<br>
<input type="datetime-local" name="reserved_at" required>
</label><br><br>
<!-- 備考欄(任意) -->
<label>備考(任意)<br>
<textarea name="note" rows="4"></textarea>
</label><br><br>
<!-- 送信ボタン -->
<button type="submit">予約する</button>
</form>
💡補足解説
このフォームでは、HTMLの標準機能を活かして最低限のバリデーション(必須入力など)を行っています。
また、datetime-local
を使うことで、日時入力を視覚的に分かりやすくしています。
フォーム送信後は、reserve.php
にPOSTで送られたデータを保存処理していきます(次のSTEPで実装します)。
✅ 要点まとめ(箇条書き)
- HTMLフォームで必要な予約情報(名前・メール・日時・備考)を取得
required
属性で最低限の入力チェックをブラウザ側で実装datetime-local
で日時入力をサポート(ブラウザ依存)- 入力内容は
reserve.php
にPOST送信(次STEPで処理)
STEP2|予約データをDBに保存しよう(reserve.php)
STEP1で作成したフォームから送信されたデータは、reserve.php
にPOSTで送られてきます。
このSTEPでは、送信された予約情報をデータベース(MySQL)に保存する処理を作成していきます。
まず、予約データを保存するためのテーブル構造は以下のように設計します。
✅ テーブル構成(例:reservation テーブル)
CREATE TABLE reservation (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(255) NOT NULL,
reserved_at DATETIME NOT NULL,
note TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
✅ データ保存処理(reserve.php)
<?php
require_once 'includes/db.php';
// 入力値の取得と簡単なサニタイズ
$name = htmlspecialchars($_POST['name'], ENT_QUOTES, 'UTF-8');
$email = htmlspecialchars($_POST['email'], ENT_QUOTES, 'UTF-8');
$reserved_at = $_POST['reserved_at'];
$note = htmlspecialchars($_POST['note'], ENT_QUOTES, 'UTF-8');
// SQLによりDBへ登録
$stmt = $pdo->prepare("INSERT INTO reservation (name, email, reserved_at, note) VALUES (?, ?, ?, ?)");
$stmt->execute([$name, $email, $reserved_at, $note]);
// 確認画面やサンクスページへリダイレクト(ここでは仮にthanks.phpへ)
header("Location: thanks.php");
exit;
?>
💡補足解説
送信された各入力値は、htmlspecialchars()
を用いてサニタイズ処理を行うことで、HTMLタグによる不正な表示、いわゆるXSS(クロスサイトスクリプティング)を防いでいます。さらに、SQL文の実行時にはprepare()
とexecute()
を使い、プレースホルダーを活用することでSQLインジェクションへの対策も万全です。
フォームから送られてくる「予約日時」は、datetime-local
形式で送信されるため、MySQLのDATETIME
型として無理なく扱うことができます。また、処理が完了した後はthanks.php
へリダイレクトすることで、ページの再読み込みによる重複送信を防ぎ、ユーザー体験の向上にもつながっています。
✅ 要点まとめ(箇条書き)
reserve.php
で POSTデータを受け取り、DBに保存htmlspecialchars()
で最低限のXSS対策を実施PDO::prepare()
を使って安全にSQLを実行- 成功後は
thanks.php
などへリダイレクトする
フロントから予約データを受け取り、データベースに保存できるようになったら、次に必要なのが「予約内容の確認画面」です。
管理者がすぐに内容を把握できるよう、テーブル形式で一覧表示するシンプルな管理画面を作成します。
STEP3|予約一覧を管理画面で表示しよう(admin/dashboard.php)
ここでは、予約された内容を管理者が一覧で確認できる「管理画面」を作成します。
一覧画面では、予約者の名前・メール・予約日時・備考などをテーブル形式で表示します。
なお、管理画面にはログイン機能が必要ですが、今回はログイン処理の詳細は省略し、すでにログイン済みという前提で進めます。
完全ガイドはnoteにて公開中!
今回のガイドは、サンプルコード付き/実装ステップ解説つき/コピペOKでnoteにて公開中です👇
このスキルを身につけるとどうなる?
このスキルが身につけば、次のような活用が可能になります。
- 顧客とのやり取りを自動化したい店舗・個人サービスでの導入
- 案件対応時の「再利用できるテンプレート」として活用
- 小規模業務用の予約管理ツールを自作&販売することも可能に!
つまり、あなたのPHPスキルが“案件化”できる形になるということです。
定期購読でさらに深く学べます!
noteのメンバーシップでは、以下の特典をご用意しています。
- あなたのコードを添削&アドバイス(HTML/CSS/JS/PHP対応)
- Zoom相談(月1回)で実装の悩みを解決
- 実務向けテンプレートの先行配布
- ChatGPT活用ノウハウ&プロンプト共有
「もう一歩踏み込みたい」
「実務でも通用するスキルにしたい」
そんな方は、ぜひご参加ください!