前期第09回 - oddmutou/jugyo-2026kyototech GitHub Wiki
やること
- テキストを投げる簡単なフォームを作る
- フォームから送信されたデータをDBに保存する
フォームを作る
form要素を設置し，フォームを作ることができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/form
form要素のaction属性にはフォームの内容の送信先のURIを設定しましょう。
form要素のmethod属性にはフォーム送信時のHTTP リクエストメソッドを設定しましょう。検索したりするようなフォームではGETを，掲示板で投稿したりするようなフォーム(フォームの内容がサーバー側で保存されたりするようなもの)ではPOSTを使います。
HTTP リクエストメソッドについて詳しくは
https://developer.mozilla.org/ja/docs/Web/HTTP/Methods
フォームのなかには以下のような要素を設置することができます。 いくつか例をあげてみます。
input要素type属性に応じて テキスト入力欄，ファイルアップロード欄，日付入力欄，などを作ることができます。- https://developer.mozilla.org/ja/docs/Web/HTML/Element/input
textarea要素- 複数行のテキスト入力欄を作ることができます。
- https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea
button要素- ボタンを作ることができます。
type属性に応じて，リセットボタンや，何もしないボタン，フォームの決定・送信ボタンをつくることができます。- https://developer.mozilla.org/ja/docs/Web/HTML/Element/button
フォームで送られてきたデータは，もちろんPHPでうけとることができます。
フォームのHTTP リクエストメソッドがGETの場合は $_GET，POSTの場合は $_POST といった定数に入っています。添字付き配列(連想配列)です。キーは，それぞれの入力欄の要素の name 属性です。
以上を踏まえて，HTMLで単純なテキストを入力し送信するフォームを書き，PHPで送られてきた内容を表示するページを作ってみましょう。
vim public/formtest.php
フォームで送られたデータをDBに保存する
フォームから受け取った内容をDBに保存してみましょう。
前回の授業で作成した hogehoge テーブルを使いまわします。
vim public/formtodbtest.php
$_POST から取れた投稿内容をもとにINSERTしていますね。
mysqlクライアントを使ってDBの中身を直接覗いて，ただしくINSERTされているか確認してみましょう。
環境によってはmysqlクライアントで文字化けしてしまうかもしれません。その場合はASCII文字(アルファベットと数字と一部の記号)だけの内容を投稿すると確認しやすいとおもいます。
演習
演習1
hogehogeテーブルに過去に記入された内容を一覧にして表示しましょう。
created_atカラムの降順(新しいものが上にでてくる)で並び替えて表示してください。
XSSの脆弱性がないように作りましょう。
動作例: http://52.205.0.35/enshu1.php
実装例: https://github.com/oddmutou/jugyo-2026kyototech/commit/d473212d30922b75eb6aadf20d21c177ba040a4e
演習2
投稿内容を10件毎にページングして表示してみましょう。(第08回授業の演習3と同様)
動作例: http://52.205.0.35/enshu2.php
実装例: https://github.com/oddmutou/jugyo-2026kyototech/commit/74f59602e80fb056e12883b9bc013eea53b9fc8d
演習3
投稿時に投稿者の名前を記入できるように、また投稿者の名前を表示できるようにしましょう。名前欄に入れた内容は、クッキー(HTTP cookie)に保存し、次回以降自動で名前欄に入力されているようにしましょう。
hogehogeテーブルに、名前欄に入れた内容を保存するカラムを追加して、実装してください。
動作例: http://52.205.0.35/enshu3.php
実装例: https://github.com/oddmutou/jugyo-2026kyototech/commit/b5a0edbf9d804d2ece0b32d88c24642617fb394f