応用課題1-1(フォーム制作) - tech-is/student-wiki GitHub Wiki
1-1.フォーム制作
- 以下の画面の通りに会員登録のフォームを作成してください。(参考:https://gray-code.com/php/make-the-form-vol1/)
- 覚えたHTMLとCSSを利用して作成してください。
- CSSの装飾は自由なので余裕のある方は装飾もやってみてください。
- 画面推移イメージとしては「入力画面→確認画面→完了画面」の3画面です。
1-1-1 入力画面制作(難易度:★★☆☆☆)
- 以下の画面の通りに入力画面のフォームを作成してください。
- フォームに関するHTMLタグについては下記URLのリファレンスを参考に実装してください。
- URL:HTMLタグリファレンス
1-1-2 確認画面制作(難易度:★★★☆☆)
- 以下の画面の通りに確認画面のフォームを作成してください。
- 前課題で製作した入力画面の登録ボタンをクリックすることで、先ほど入力した情報を確認できるようにデータ連携してください。
1-1-3 登録データの格納処理(難易度:★★★☆☆)
- 下記のようにデータベースとテーブルを作成してください。
- 確認画面の登録ボタンをクリックしたときに入力したデータを登録してください。
1-1-4 登録完了画面および登録完了メール(難易度:★★★★☆)
- 下記のような登録完了画面に遷移し、確認画面で受けたデータを基に完了メールを登録者に送付してください。
- メール送信については下記URLを参考に実装してください。
1-1-5 入力確認機能(難易度:★★★★☆)
- 先ほど制作したフォームに入力チェックをつけてみましょう。
- 入力値がエラーの場合は下記のようにエラーを表示し、先に進めないようにしてください。
- エラーでない場合は、先に進めるようにしてください。
1-1-6 生まれ年のプルダウンをPHP化(難易度:★★★☆☆)
- 学んだ関数が実際にどのような時に便利に使えるのかを学んだいきましょう。
- 生まれ年のプルダウンを関数を使ってPHP化してください。
1-1-7 セキュリティを高める(難易度:★★★★☆)
- GETやPOSTなどの外部から入ってくるデータの時に悪意のあるデータがくることもあります。
- 会員登録の際はPOSTの値を利用しているため、POSTの値をエンコード処理し、セキュリティを高めていきましょう。
1-1-8 画像を送る(難易度:★★★★☆)
- 会員登録フォームに画像を添付できる機能を追加してください。