3/2(Tue)
第1回:2015年9月1日公開
60min
フロントエンジニアや、デザイナーの方から、HTMLでWebフォームの入力ボックスを作ったことはあるが、その先のプログラムでどのように動作しているのか分からない。Webフォーム苦手という声をよく耳にします。
今やWebフォームは様々なサイトで目にするようになりました。
今回はフロントエンジニア、デザイナー、ディレクター、PHPプログラミング初心者の方向けに分かりやすくWebフォームの仕組みをお伝えします。
今回の授業では実際に手を動かしながら一緒に学んでいただければと思います。受講前に下記環境をご用意下さい。
・Webブラウザ
・PHPを入力するテキストエディタ
・PHPが動作する環境 (XAMPP, MAMP, Webサービスなど)
PHPの動作環境をお持ちでない方は、下記授業を参考にご用意下さい。
https://schoo.jp/course/116
※ 上記環境が無い方で、聞くだけの参加も大歓迎です。
スクー放送部
全2回の授業で作成するWebフォームのサンプルファイルです。readme.txt とかかれたファイルに授業中取りあげきれなかった補足情報も記述されています。参考資料として御覧ください。
※授業以外での利用は禁止します。
2015年9月1日公開
60min.
フロントエンジニアや、デザイナーの方から、HTMLでWebフォームの入力ボックスを作ったことはあるが、その先のプログラムでどのように動作しているのか分からない。Webフォーム苦手という声をよく耳にします。
今やWebフォームは様々なサイトで目にするようになりました。
今回はフロントエンジニア、デザイナー、ディレクター、PHPプログラミング初心者の方向けに分かりやすくWebフォームの仕組みをお伝えします。
1限目では、Webフォームの基礎動作を学び、2限目では入力チェック、セキュリティー対策などWebフォームを実践で使うためのノウハウを学びます。
1限目の今回は、主にWebフォームの基本動作について学びます。
今回の授業では実際に手を動かしながら一緒に学んでいただければと思います。受講前に下記環境をご用意下さい。
・Webブラウザ
・PHPを入力するテキストエディタ
・PHPが動作する環境 (XAMPP, MAMP, Webサービスなど)
PHPの動作環境をお持ちでない方は、下記授業を参考にご用意下さい。
https://schoo.jp/course/116
※ 上記環境が無い方で、聞くだけの参加も大歓迎です。
1. 入力用フォームパーツの作成(HTML)
- HTML5で追加になった入力タイプなど
2. 入力データしたデータを送信(HTML)
- 送信方法、オートコンプリートなどの属性指定
3. データの受け取り(PHP)
4. 受け取ったデータを画面に表示(PHP)
- 入力文字エスケープ
- 画面出力
スライド資料
2015年9月1日公開
60min.
フロントエンジニアや、デザイナーの方から、HTMLでWebフォームの入力ボックスを作ったことはあるが、その先のプログラムでどのように動作しているのか分からない。Webフォーム苦手という声をよく耳にします。
今やWebフォームは様々なサイトで目にするようになりました。
今回はフロントエンジニア、デザイナー、ディレクター、PHPプログラミング初心者の方向けに分かりやすくWebフォームの仕組みをお伝えします。
1限目では、Webフォームの基礎動作を学び、2限目では入力チェック、セキュリティー対策などWebフォームを実践で使うためのノウハウを学びます。
2限目の今回は、セキュリティ対策など、1限目よりもより実践的なプログラミングの方法について学びます。
今回の授業では実際に手を動かしながら一緒に学んでいただければと思います。受講前に下記環境をご用意下さい。
・Webブラウザ
・PHPを入力するテキストエディタ
・PHPが動作する環境 (XAMPP, MAMP, Webサービスなど)
PHPの動作環境をお持ちでない方は、下記授業を参考にご用意下さい。
https://schoo.jp/course/116
※ 上記環境が無い方で、聞くだけの参加も大歓迎です。
1. Webフォームプログラミングの基礎知識
- データ入力チェックの必要性
- セキュリティー対策の必要性
2. データ入力チェック
- 必要要素、入力文字数、数値などのチェック
- 正規表現を使い(メールアドレス、郵便番号等)をチェック
3. データ受け取り後ページ遷移
- サンクスページか、エラーページに振り分け
4. より安全なWebフォーム対策
- トークンを利用したWebフォーム
スライド資料