画面からの入力データを扱う


7.3 画面からの入力データを扱う

 前節では、Webブラウザから入力するための部品の種類や、データの送信方法について学習しました。本節では送信されてきたデータをPHPで扱う方法について説明していきます。


7.3.1 フォームのPOST送信データを扱う方法

 Web画面からのPOST送信データを扱うにはスーパーグローバル変数の$_POSTを利用します。
 $_POSTの実体は連想配列なので、キーにHTMLフォームの部品名を指定します。部品名は、フォーム部品のタグでname属性にした名前です。

書式:POST送信データを受け取る

凡例:POST送信データを受け取る

 送信元のフォーム部品のname属性の値を使って、送信先で値を取得するので、必ず同じ値を使う必要があります。

 上記で示した凡例はテキストボックスと「隠しフィールド」のみですが、他のフォーム部品でも送信先でname属性の値である「部品名」を利用します。
 Web画面でフォーム部品を使えば、ユーザーが入力したデータや選択したデータを送信できますが、ユーザーの入力情報だけではなく、動作状態などの別データを一緒に送信させたい場合もあります。その場合は、凡例のようにフォーム部品の隠しフィールドである「<input type=”hidden” …>(ヒドゥン)」を使います。

 では、実際に送信元からPOST送信で送られるデータを送信先で受け取るサンプルを確認していきましょう。


POST送信データを受け取って利用するプログラム

 別画面から送信された入力データと隠しフィールドのデータを受け取り、そのデータと配列に用意した画像のファイル名を使ってWebブラウザにトランプ画像を表示させます。

ソース・フォルダ:myproj_super_intro/ch07
ファイル名    :postForm.php
アクセスURL   :http://localhost/myproj_super_intro/ch07/postForm.html

➢ postForm.php

<html>
	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<title>隠しフィールドデータを送信する</title>
 	</head>
 	<body>
 		<form action="usePostData.php" method="post">
 			好きな数値入力:<input type="text" name="num1" >(※0~13の範囲)<br>
 			隠しフィールド:※画面には表示されない<br>
 			<?php
 			$num=0;
 			echo '<input type="hidden" name="num2" value="',$num,'">';
 			?>
 			<input type="submit" value="送信">
 		</form>
 	</body>
</html>

ソース・フォルダ:myproj_super_intro/ch07
ファイル名    :usePostData.php
アクセスURL   :postForm.htmlからの画面遷移でアクセスされる


➢ usePostData.php

<?php
	//array関数を使ってトランプの画像名を配列で作成
	$cards = array("Jk.png","01.png","02.png","03.png","04.png","05.png","06.png",
				   "07.png","08.png","09.png","10.png","11.png","12.png","13.png");

	//フォームのPOST送信データを各変数に代入
	$iNum = $_POST['num1'];
	$hNum = $_POST['num2'];
?>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
	■入力番号のカード 隠しフィールド番号のカード<br>
	<?php
		echo '<img src="../cards/' , $cards[$iNum] , '">    '; //全角スペースを4つ入れる(カード間の間隔を作るため
		echo '<img src="../cards/' , $cards[$hNum] , '">';
	?>
	</body>
</html>

実行結果


解説

 今回のプログラムは、データを入力する送信元のWeb画面の「postForm.php」と、その画面からのデータの受け取り先の「usePostData.php」の2つのファイルから構成されています。
 7行目はフォームのデータの送信先を「usePostData.php」、送信方法を「post」で設定しています。
 8行目は数値を入力してもらうためのテキストエリアを、部品名「num1」で設定しています。
 9~13行目は隠しフィールドを部品名「num2」、送信データを変数$numの値「0」で設定しています。
 14行目は送信の実行ボタンを表示名「送信」で設定しています。送信ボタンがないとデータを送ることができないので、<form>タグを利用する場合、送信ボタンは一緒に設置します。

図 7.3.1 POSTデータを送信


 続いて、データ受信先になる「usePostData.php」の処理について説明を行います。

 図7.3.2で示していますが、今回の実行結果ではフォームデータは「11」と「0」という情報がPOST送信で送られてきます。このPOST送信データを取得したいので、7、8行目でスーパーグローバル変数$_POST(連想配列)を利用します。隠しフィールドも入力データも受取り方は同じです。

   7: $iNum = $_POST['num1'];
   8: $hNum = $_POST['num2'];

図 7.3.2 連想配列$_POSTから入力データを取得して変数へ代入

 17、18行目ではPOST送信されてきたデータが格納されている変数$iNumと$hNumを配列変数$cardsの添字に利用し、画像のファイル名を取得させ、Web画面に対応するトランプ画像が表示されます。

   17: echo '<img src="../cards/' , $cards[$iNum] , '">'; //全角スペースを4つ入れる(カード間の間隔を作るため)
   18: echo '<img src="../cards/' , $cards[$hNum] , '">';
◉ポイント

・ POST送信で送られるフォームデータをPHP側で利用するには、$_POSTを利用して行う。
・ 各フォーム部品のデータを$_POSTから取得するには、HTMLで設定した部品名をキーに取得できる。
・ 隠しフィールドを使うと、任意の情報をユーザーの入力情報とは別に送信することができる。


NEXT>> 7.4 本章のまとめ