2015年05月07日

ページで機能分解。最初は POST メソッドで、FORM から他のページを呼び出すべし

PHP を使う根本的な目的は、ブラウザで入力されたデータをサーバ側で処理する事です。まず、最初にそれを頭に置いて最初のページの役目は FORM に限定します。

WEBページ上のデモ

FORM の主な仕様

1) METHOD は POST
2) サーバへの送り先は log_02a.php?param=init

PHP がまだ書かれていない FORM ページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=600,initial-scale=1.0">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){

	// コンボボックスの選択されたテキストをテキストエリアにセットする
	$("#set_text").click(function(){
		$("#text").val( $("#action_file option:selected").text() );

	});

});
</script>
</head>

<body>
<!-- ここにコンテンツを作成する -->
<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>

<form method="POST"
	id="my_form"
	action="log_02a.php?param=init">件名 
	<input type="text"
		name="subject"
		id="subject">
	<input type="button"
		id="set_text"
		value="コンボボックスのテキストをセット">
	<br>
	<span style='vertical-align:top'>内容</span>
	<textarea name="text"
		id="text"
		style="width:400px;height:100px;"></textarea>
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>

</body>
</html>

コンボボックスを使った jQuery の処理

jQuery の記述で、コンボボックスで選択している文字列を、テキストエリアにセットする処理を、送信前の画面の補助処理として実装しています。
$("#set_text").click(function(){
	$("#text").val( $("#action_file option:selected").text() );

});
name 属性と id属性 ここでは、このコンボボックスのデータはサーバへは送らないので、FORM の中には記述していません。 ですが、画面上のコンテンツの特性として、いつでも FORM の中で動作可能なように、name 属性で名前を指定しています。これとは別の名前で、id 属性を指定していますが、これは jQuery での指定を明確で簡潔にする為に指定しています。name 属性と id 属性は同じ内容にしても良いですが、ここでは検証の為にわざと違うものを使用しています。 jQuery は、name 属性の処理が得意では無いが超優秀 name 属性しか指定されていない場合、それからもコンテンツを特定する事は可能ですが、解りにくく面倒なので id 属性を指定したほうが見通しが良くなります。 また、jQuery では、『セレクタ』を使用していろいろなコンテンツの特定方法があり、ここでも使用している『選択されたコンボボックスのテキスト』は少し複雑で高度である事が解ります。
$("#action_file option:selected").text()
ですが、このような処理も必要になるので、jQuery への理解はかなり深めたほうが良いでしょう。 送り先の主な仕様 1) キャラクタセットは、UTF-8 2) GET メソッドと POST メソッドで送られたデータの一覧を表示する 3) 連結演算子による文字列連結のサンプル 4) 『戻る』 リンクで元のページへ戻る FORM から呼び出される最低限のPHP コード
<?php
header( "Content-Type: text/html; Charset=utf-8" );

print "<pre>";
print_r($_GET);
print_r($_POST);
print "</pre>";

print "【連結演算子で文字列の連結】<hr>";

print $_POST["subject"] . $_POST["text"];

print "<hr>";
?>
<a href="log_02.php?php_file=log_02a.php">戻る</a>

PHP 毎の処理を学ぶ為に後からページを増やす事を想定しています。その場合、コンボボックスのデータを増やす事になりますが、今はまだ先頭のこの処理のみが呼び出されるように固定になっています。

FORM が POST メソッドの場合は、GET メソッドも追加できます
log_02a.php?param=init
この記述は、GET メソッドにデータを追加して、$_GET["param"] = "init" を発生させる記述方法です。FORM 内のコンテンツは $_POST スーパーグローバル変数にセットされます。 アンカーによるリンクは、GET メソッドでサーバに送られます
log_02.php?php_file=log_02a.php
このリンクは、単純に log_02.php に戻るのでは無く、log_02.php の中で、$_GET["php_file"] が使えて、その中には "log_02a.php" がセットされている事を意味します。つまり、log_02.php は、どのページから戻って来たかを知る事ができると言う事です。 補足情報 FORM 要素はブロック要素です。改行が入るので注意して下さい( 画面作成時に結構重要です )
タグ:PHP
posted by at 2015-05-07 20:59 | 処理 | このブログの読者になる | 更新情報をチェックする