【新人向け】PHP で簡単な Web システムを作ってみよう①

こんにちは。地図パズル製作所の都島です。もう四月も終わりますね。新人の皆様は社会人としての生活はいかがでしょうか？

新人歓迎会参加アンケートシステム

ということで、今回は新人教育の一環として簡単な Web システムを作っていきたいと思います。作るシステムは「新人歓迎会参加アンケートシステム」です。その名の通り、新人歓迎会への参加可否を登録するシステムです！今回の記事ではその仕様について解説します。プログラミングに自信のある方は、仕様だけ見て作ってみてください！

使う Web サーバーは Apache、プログラミング言語は PHP、データベースは MySQL です。それと、CSS フレームワークとして Bootstrap を使います！

画面仕様・処理機能

一覧画面

画面説明

項目	説明
A	ページタイトルを表示
B	一覧を表示。表示項目は「ID」「氏名」「参加するかどうか」「コメント」「編集」「削除」。「編集」「削除」はリンク表示。
E	「アンケートに回答する」ボタン

機能説明

画面ロード時

項目	説明
B	"questionnaire" テーブルの項目を取得して一覧表示する

編集リンク押下

項目	説明
C	該当する行に関する編集画面を表示する

削除リンク押下

項目	説明
D	該当する行のデータを "questionnaire" テーブルから削除する

アンケートに回答するボタン押下

項目	説明
E	追加画面を表示する

追加画面

画面説明

項目	説明
A	ページタイトルを表示
B	氏名入力欄。最大入力文字数 20 文字。20 文字以上入力して送信された場合はエラー表示
C	新人歓迎会の参加可否入力欄。バリデーションは不要。ドロップダウンで「参加！」「不参加で。。。」から選択
D	コメント入力欄。最大入力文字数 100 文字。100 文字以上入力して送信された場合はエラー表示
E	戻るボタン。ボタン押下で一覧画面に遷移
F	送信ボタン。ボタン押下で入力内容を送信する

機能説明

画面ロード時

項目	説明
B	空表示する
C	「参加！」が選択された状態で表示する
D	空表示する

戻るボタン押下時

項目	説明
E	一覧画面に遷移する

送信ボタン押下時

項目	説明
F	データを送信し、バリデーションを行う。バリデーション OK だった場合はデータを保存し、一覧画面に遷移する。バリデーション NG だった場合は、NG だった項目にエラー表示する。

編集画面

画面説明

項目	説明
A	ページタイトルを表示
B	氏名入力欄。最大入力文字数 20 文字。20 文字以上入力して送信された場合はエラー表示
C	新人歓迎会の参加可否入力欄。バリデーションは不要。ドロップダウンで「参加！」「不参加で。。。」から選択
D	コメント入力欄。最大入力文字数 100 文字。100 文字以上入力して送信された場合はエラー表示
E	戻るボタン。ボタン押下で一覧画面に遷移
F	送信ボタン。ボタン押下で入力内容を送信する

機能説明

画面ロード時

項目	説明
B	該当するレコードの氏名を表示
C	該当するレコードの参加状況を表示
D	該当するレコードのコメントを表示

戻るボタン押下時

項目	説明
E	一覧画面に遷移する

送信ボタン押下時

項目	説明
F	データを送信し、バリデーションを行う。バリデーション OK だった場合はデータを保存し、一覧画面に遷移する。バリデーション NG だった場合は、NG だった項目にエラー表示する。

課題1: DB 設計

画面設計に基づいて、DB 設計をしてみましょう。

最後に

今日は新人教育の一環として作成する「新人歓迎会参加アンケートシステム」の仕様を説明しました。次の記事では、このシステムを実際に作っていきたいと思います！

第二弾はこちらです！

https://zenn.dev/chizu_puzzle/articles/a629152ebeef4e

最後に、地図パズル製作所の宣伝をします！地図パズル製作所は大人も子供も楽しめる、地図パズルで遊べるシステムです。ぜひ試してみてください！

https://chizu-puzzle.com