前期第09回 - oddmutou/jugyo-2025kyototech 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://3.84.186.45/enshu1.php
実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/7b4dbd6397cec8b00a53935cf999ec831f5aad26
演習2
投稿内容を10件毎にページングして表示してみましょう。(第08回授業の演習3と同様)
動作例: http://3.84.186.45/enshu2.php
実装例: https://github.com/oddmutou/jugyo-2025kyototech/commit/437c2d7820000f6118b5eae0a771ded394e0616f