🦩
【新人向け】PHP で簡単な Web システムを作ってみよう②
こんにちは。地図パズル製作所の都島です！前回の記事から PHP で簡単な Web システムを作ってみる方法について解説しています。今回の記事では前回紹介した、新人歓迎会参加アンケートシステムを実際に作っていきたいと思います！新人歓迎会参加アンケートシステムの仕様については、下の記事から確認してみてください。
事前準備と環境構築
今回の新人歓迎会参加システムを 0 から作るのは初心者の方には難しいと思うので、スターターキットを準備しました。こちらのリポジトリです。
ということで、こちらのリポジトリをフォークして、そこでソースコードを修正して、実装を進めていきます。なお、今回の記事では全体的にざっくりとした解説にとどめたいと思います。プログラマの仕事のほとんどは調査です。なので、今回の課題でも調査する大切さも学んでいただければと思っています。
- Docker Desktop をインストールしていない場合は、インストールしてください。
- スターターキットのリポジトリをフォークしてください。リポジトリは private でも public でも構いません。
- フォークしたリポジトリをローカルにクローンして、VSCode で開きます。
- VSCode に Dev Containers エクステンションを入れていない場合は、入れてください。
- VSCode の左下の「><」マークから「Reopen Container」を押します。何分か待っているとコンテナ内に入ることができます。
- これで環境構築は完了ですが、環境構築が完了していた場合は、https://localhost:[port]/add.php で下のような画面が見えるはずです。[port] にどのような値が入るかは、docker-compose.yml に書かれています。
実装手順
以下の手順で実装して行ってください。
- DBスキーマ作成。事前準備した DB スキーマに基づいて、テーブルを作成してください。DB のデータベース名、パスワードなどは docker-compose.yml に書かれています。DB に関わる値は仮のものを利用しておりますので、add.php ファイルをご自身が考えたものに合わせて修正する必要があります。うまく動いている場合は、送信ボタンの押下がエラーなく完了し、作成したテーブルにデータが追加されます。
- Bootstrap でのスタイル付け。このままでは、UI に可愛げがないので、Bootstrap でスタイル付けをしましょう。Bootstrap についても調べてみましょう。
- 一覧画面の実装。一覧画面を仕様に基づいて実装しましょう。index.php ファイルにソースコードを書いていってください。
- 編集画面の実装。編集画面を仕様に基づいて実装しましょう。edit.php ファイルにソースコードを書いていってください。
- 削除機能の実装。削除機能を実装しましょう。delete.php ファイルにソースコードを書いていってください。
- セキュリティ対策の実施。SQL インジェクション、CSRF についても調べてみましょう。なんとなく理解できたら、SQL インジェクション対策、CSRF 対策を実装してください。
- サーバーサイドバリデーションの実装。バリデーションとは何なのか調べてみましょう。おおよそ理解できたら、サーバーサイドバリデーションを実装してみましょう。なお、各入力欄の文字数は仕様に書かれています。
応用課題
早く終わった方のために、応用課題を書いておきます。
- クライアントサイドバリデーションを実装してみましょう。サーバーサイドで実施しているバリデーションをクライアントサイドで実施します。
- .htaccess ファイルが何をしているのか、勉強して見ましょう。※ヒント：これは Apache の設定ファイルです。
- Dockerfile、docker-compose.yml が何をしているのか、勉強してみましょう。自分なりに Dockerfile、docker-compose.yml を書いてみて、動かしてみるのもいいですね。
- 作成したウェブサイトを公開してみましょう。ただし、今のままでインターネットに公開するのは危険がありますので、社内サーバーを借りるなどして公開してみましょう。これはかなり難しいです。
完成版のサンプル
完成版のサンプルはこちらのリポジトリに置いてあります。ご自身のが完成するまで、見ないでくださいね！
最後に
最後に宣伝ですが、地図パズル製作所ではブラウザで遊べる楽しい地図パズルを公開しています。ぜひ遊んでみてください！！
Discussion