フォームリクエストとは
HTMLフォームからサーバにリクエストすることをフォームリクエストいいます。ブラウザ(クライアント)のHTMLフォームから、Webサーバへのリクエストでデータがどのように送受信しているのか知っておく必要があります。
HTTP リクエスト&レスポンス
WebサーバにHTTPでアクセスすることをHTTPリクエスト、サーバが処理した結果を返すことをHTTPレスポンスといいます。HTMLフォーム(クライアント)と Apache & PHP(サーバ)の関係は以下のようなのフローになります。
- HTMLフォーム(クライアント)からデータ送信(リクエスト)
- Apache(Webサーバ)にデータ送信
- Apacheでデータ受信
- PHP にデータを受け渡して処理
- Apacheからブラウザに結果を返す(レスポンス)
「クライアント&サーバー」「リクエスト&レスポンス」 はWebでよくでてくる用語ですので覚えておきましょう。
HTTPプロトコル
HTTP通信は HTTPプロトコルという規格で決まっており 「リクエスト行」「ヘッダフィールド」「ボディ」 で構成されています。 ターミナルのcurlコマンドを使うとヘッダーフィールドの通信情報を確認することができます。
ヘッダフィールドの確認例
% curl -I https://www.google.com
HTTP/2 200
content-type: text/html; charset=ISO-8859-1
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
date: Tue, 14 Jul 2020 02:58:06 GMT
server: gws
...
HTTP メソッド
HTTP メソッドとは
HTTPプロトコルでは WebサーバへのリクエストをHTTPメソッドで定義しています。 HTTPメソッドは REST (REpresentational State Transfer)の状態管理や CRUD (Create, Read, Update, Delete)のデータ操作のインターフェイスでよくでてくる用語です。
HTTPメソッド一覧
HTTPメソッドの種類は以下のものがあります。 この中でWeb アプリ開発で最も利用されるHTTPメソッドはGETとPOSTです。
HTTPメソッド | 処理 |
---|---|
GET | リソースの取得 |
POST | リソースへのデータ追加など |
PUT | リソースの更新・作成 |
DELETE | リソースの削除 |
HEAD | リソースのヘッダの取得 |
PATCH | リソースの部分置換 |
OPTIONS | リソースがサポートしているメソッドの取得 |
TRACE | そのまま結果を取得 |
CONNECT | サーバーとの間にトンネルを確立 |
スーパーグローバル変数
グローバル変数とローカル変数
PHPの変数はグローバル変数とローカル変数に大きく分かれます。
グローバル変数
グローバル変数はどこでもアクセスできる変数です。ただ、どこでもデータにアクセスできるので取り扱いに注意が必要です。
ローカル変数
ローカル変数は関数や制御文などで、あるスコープ内のみで有効な変数です。
スーパーグローバル変数とは
PHPで送信データをサーバ側で受け取とるには、スーパーグローバル変数を利用します。PHPのスーパーグローバル変数は以下の種類があります。
スーパーグローバル変数
$GLOBALS
$_SERVER
$_GET
$_POST
$_FILES
$_COOKIE
$_SESSION
$_REQUEST
$_ENV
$_GET
$_GETは、GETリクエストのデータを受信するグローバル変数です。連想配列になっており、HTMLフォームタグの「name」プロパティをキーにデータ取得します。
$_GET["キー"]
$_POST
$_POSTは、POSTリクエストのデータを受信するグローバル変数です。連想配列になっており、HTMLフォームタグの「name」プロパティをキーにデータ取得します。
$_POST["キー"]
GETリクエスト
GETフォームリクエスト
GETリクエストは、formタグのmethodを「GET」で設定します。
<form action="" method="get">
<input type="text" name="key1">
<input type="text" name="key2">
<button>送信</button>
</form>
クエリパラメータ
クエリパラメータはHTTPリクエストで、リクエスト情報を指定するパラメータです。URL の ? 以降がパラメータとして利用し、クエリストリングともいいます。
クエリパラメーター
URL?key1=value1&key2=value2
- URLの末尾に ? をつける
- パラメータは キー=値 (key & value)の記述
- 複数のパラメータは & でつなぐ
Google検索の例
Googleの検索ではGETパラメータを利用しています。テキストボックスで「php」と検索したときのURLです。q=php の部分がクエリパラメーターです。
Google検索のURL
https://www.google.com/search?q=php
- キー:q
- 値:php
フォーム作成
Google検索にHTMLフォームからGETリクエストしてみましょう。検索キーワードのキーは「q」で設定します。
search.php
<form action="https://www.google.com/search?q=php" method="get">
<div>
<input type="text" name="q">
</div>
<button>検索</button>
</form>
送信確認
フォームを実行すると以下のURLでGETリクエストします。
https://www.google.com/search?q=php
Google検索のパラメータ
Google検索のGETパラメータは、キーが「q」、値が「php」になります。
q=php
キー(key) | 値(value) |
---|---|
q | php |
GETフォーム
フォームの作成
HTMLフォームに「emai」「password」を作成し、メソッドを「GET」にします。
login.php
<form action="" method="get">
<div>
<label for="">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="">パスワード</label>
<input type="password" name="password">
</div>
<button>ログイン</button>
</form>
$_GETでデータ取得
$_GETから、それぞれのキーでデータ取得します。送信データがないときを想定して、empty() でデータチェックします。
<?php
$email = "";
$password = "";
if (!empty($_GET)) {
$email = $_GET["email"];
$password = $_GET["password"];
}
?>
データ送受信確認
データ表示
取得したGETデータをHTMLタグで表示します。
<h2>Email</h2>
<p><?= $email ?></p>
<h2>パスワード</h2>
<p><?= $password ?></p>
データ確認
フォームからデータ送信して、データの受信確認をしてみましょう。
POSTフォーム
GETリクエストの危険性
GETリクエストでは、クエリパラメータでリクエストしているので、「email」や「password」のような重要なデータ送信はセキュリティ上で危険です。
login.php?email=test%40test.com&password=1234
POSTリクエストに変更
重要なデータを送信するときは、POSTリクエストにするのが適切です。
フォームの作成
メソッドを「POST」に変更してみましょう。
<form action="" method="post">
....
</form>
$_POSTデータ取得
取得データを $_GET から $_POST に変更してみましょう。
if (!empty($_POST)) {
$email = $_POST["email"];
$password = $_POST["password"];
}
データ送受信確認
データ確認
フォームからデータ送信して、データの受信確認をしてみましょう。
ソース
login.php
<?php
$email = "";
$password = "";
// if (!empty($_GET)) {
// $email = $_GET["email"];
// $password = $_GET["password"];
// }
if (!empty($_POST)) {
$email = $_POST["email"];
$password = $_POST["password"];
}
?>
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログイン</title>
</head>
<body>
<form action="" method="post">
<div>
<label for="">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="">パスワード</label>
<input type="password" name="password">
</div>
<button>ログイン</button>
</form>
<h2>Email</h2>
<p><?= $email ?></p>
<h2>パスワード</h2>
<p><?= $password ?></p>
</body>
</html>
演習
問題1
HTMLフォームの GET送信で商品検索して、一致したら「○○がみつかりました」のようなメッセージを表示してみましょう。
商品は以下のような配列で設定します。
$items = ['コーヒー', '紅茶', 'ほうじ茶'];