2015年05月09日

PHP に URL から値を渡して、その値を元にしてコンボボックスの OPTION 要素を選択する3つの方法

こんな感じのコンボボックスでは、PHP や JavaScript で何もしないと、表示された時に選択されるのは、一行目のオプション内容です。これを $_GET["php_file"] の内容によって、表示した時の対象オプションを変更する事ができます
<select id="action_file"
	name="php_file">
	<option value="log_02a.php">連結演算子で文字列の連結</option>
	<option value="log_02b.php">文字列内に変数を埋め込んで連結</option>
</select>

方法その1

以下のようなリンクから表示すると、コンボボックスは2行目のオプションを選択して表示されます

http://winofsql.jp/php/basic/log_03.php?php_file=log_02b.php

▼ 三項演算子を使ったとても解りやすいコード
<select id="action_file"
	name="php_file">
	<option value="log_02b.php"
		<?= $_GET["php_file"] == "log_02a.php" ? "selected" : "" ?> >連結演算子で文字列の連結
	</option>
	<option value="log_02b.php"
		<?= $_GET["php_file"] == "log_02b.php" ? "selected" : "" ?> >文字列内に変数を埋め込んで連結
	</option>
</select>

これは、HTML の中に直に埋め込む上に、条件の判断を OPTION 要素の中の一行一行で完結してしまう方法です。具体的には、php_file=log_02b.php で渡された内容に基づいて、log_02b.php の OPTION 要素のみ selected を記述してブラウザに選択させます

方法その2

jQuery に選択させる方法です。選択の条件の元となる文字列のみ PHP で埋め込んでおいて、その文字列を使って jQuery で処理します。これは、PHP と JavaScript の連携プレイなので、それぞれの扱いを良く知った上で利用する必要があります。

http://winofsql.jp/php/basic/log_04.php?php_file=log_02b.php
<!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(){

	// 初期処理
	if ( "<?= $_GET["php_file"] ?>" != "" ) {
		$("#action_file").val("<?= $_GET["php_file"] ?>");
	}

	// コンボボックスの選択されたテキストをテキストエリアにセットする
	$("#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>


方法その3

PHP コードを埋め込んで、配列を作ってループ処理で行う方法ですが、HTMLの中を虫食いのように PHP の実行処理を埋め込むのは、いろいろな意味でおすすめできません。見ただけでも見にくいし解り難くなっているのが解ります。

http://winofsql.jp/php/basic/log_05.php?php_file=log_02b.php

この方法の延長上である開発として納得の行く方法はありますが、PHP に慣れていないうちはまだまだ考える必要はありません。
<?php
	// 配列変数に、OPTION 要素用の値の一覧を作成しておく
	$options = array(
		"log_02a.php" => "連結演算子で文字列の連結",
		"log_02b.php" => "文字列内に変数を埋め込んで連結"
	);
?>
<select id="action_file"
	name="php_file">
<?php
	foreach( $options as $k => $v ) {
		print "<option value=\"";
		print $k;
		print "\"";
		if ( $_GET["php_file"] == $k ) {
			print " selected";
		}
		print ">";
		print $v;
		print "</option>\n";
	}
?>
</select>


最も容易なのは『方法その1』です

もちろん、この方法がベストというわけではありませんが、WEB アプリケーションを知る為にはできる限り簡潔にソースコードが記述されるほうが望ましいです。テクニックに走りすぎると、その時はいいかもしれませんがしばらく時間が空くと、自分で書いたのに良く解らない事がプロでもあります。知らない事が多い時点では、見える範囲はできるだけ狭くしましょう。




タグ:PHPの基本
posted by at 2015-05-09 17:52 | 処理 | このブログの読者になる | 更新情報をチェックする

2015年05月08日

PHP にデータを渡す為の HTML としての FORM

この記事の前提となる内容『ページで機能分解。最初は POST メソッドで、FORM から他のページを呼び出すべし』

FORM の記述は WEB アプリケーションの基礎部分では『顔』です。とても重要なので、HTML 要素は全てしっかり意味を知っておく必要があります。HTML としての属性も、最低限のものは完璧にする必要があります。さらには、HTML5 で増えたとても便利な多くの要素は、いつでも何かのドキュメントを参照できるようにしておきましょう。

<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>
FORM で最も重要な属性は ACTION

もちろん他も全て重要ですが、WEBアプリケーションとしての振る舞いや作り方に大きな影響を及ぼすのが ACTION 属性です。

ACTION 属性は省略できます。何も書かなければ、自分自身にデータを送る事になるので、初心者向けではありません。記述すべき内容も格段に増える上に、どこで何をしているのかがとても解り難くなります。ここでは、送り先を別の PHP にして、画面を全く別の画面に遷移するという方法を取って、処理の流れを解りやすくしています。

WEBページ上のデモ

FORM の id は jQuery の処理用です

ここではまだ実装していませんが、いずれ利用するので id を設定しています。name 属性も指定できます。指定すると、JavaScript(DOM)では参照しやすくなりますが、WEB アプリケーションを作る上においては、あまり重要度は高く無いのでこのようになっています。(記述していません)

type="button" の要素はボタンです。サーバーへは送られません

件名の行の最後にあるボタンですが、id 属性が設定されており、jQuery で使用されます。サーバとは関係無いので name 属性はありません。JavaScript 用のボタンは他の要素でも可能ですし、jQuery であれば何でも使えますが、ここでは基本となる INPUT 要素を使用しています。

サーバーへ送るには name 属性が必要です

ここでは、件名の INPUT 要素と、内容の TEXTAREA 要素と、送信ボタンの3つです。

送信ボタンは、FORM からサーバへデータを送る為に HTML だけで処理する場合には必須で重要なコントロールです。INPUT 要素の TYPE 属性を "submit" に指定する事によってその機能が使えます。JavaScript を使用すれば、他のコントロールからサーバーへ送るようにする事もできますが、その方法を使って PHP の検証をするのはあまり意味がありません。

style="" で書かれる『インラインスタイル』

WEB アプリケーションとしての完成品を考えるのならば、スタイルシートを書いてクラスを HTML 要素に記述すべきですが、目的は PHP の検証なので、作成者が情報を見やすくする為に最速で直感的に設定可能なインラインスタイルを使用しています。

要素内の属性毎の改行

これは、ブセウザの表示とは全く関係の無い、人間が読む時に少しでも理解しやすいようにする為の工夫です。必須ではありませんが、他人に説明したい場合はこうしたほうがより理解を得やすいと思います。

ただ、手作業では時間がかかりやすいので、オンライのツールでさっと作ってしまえばいいです。



タグ:PHP HTML FORM
posted by at 2015-05-08 00:11 | HTML | このブログの読者になる | 更新情報をチェックする

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 | 処理 | このブログの読者になる | 更新情報をチェックする

PHP 書く前の 『何も表示されないが、意味のあるページ』/ HTML と JavaScript の基本テンプレート

初心者にとって、WEB アプリが解りづらいのは、PHP 以外でも目に見える結果を大きく変える事が予想される、HTML・CSS・JavaScript の効果を理解するのに多くの知識を必要とするからですが、とにかく最初は画面の構成から少しづつ自分の中でルールを作って行く必要があります。

WEBページ上のデモ( 何も表示されません )

上のリンク先のページのソースコードは以下のようにとても短いものですが、これはこれで多くの意味を含んでいるのできっちり理解しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
	// ここに JavaScript のページの初期処理を記述
});
</script>
</head>

<body>
<!-- ここにコンテンツを作成する -->

</body>
</html>


1) PHP のソースに PHPコードを書かなくても良い

もちろん、ちゃんとしたアプリケーションを作っていけばそういう事はほぼ無くなりますが、通常存在する HTML ソースコードの拡張子を .php に変更してもそのまま表示されるという事です。

.php を拡張子として持つファイルの HTML ファイルとの大きな違いは、PHP モードに移行する事によって、PHP の処理を記述できるというところです。

2) HTML5 で書いたほうが以前より簡潔になる

HTML は、画面の表示部分や、ブラウザとの約束事を書く部分です。昔はもっと多くの事を書いていましたが、今では普通に HTML5 で書いて正しく表示されるので、PHP とそれほど直接関係無い部分ですから、簡潔なほうがいいに決まっています。

特に、SCRIPT 要素では他に属性を書かなくても問題ありません。JavaScript は PHP と直接関係する事は少ないですが、WEB アプリケーションの動作を決定する重要な要素なので、書く頻度としては高いです。よってこのようなシンプルな書き方のほうが良いと思います。

3) キャラクタセットは UTF-8。但し、エディタで保存は UTF-8N

いろいろ解らない事が多いのに、解らない部分が原因で正しく動かないのは、正しい知識を効率良く知るのに弊害となります。ですから、有無を言わさずキャラクタセットは UTF-8 にします。

但し

PHP のソースコードはそれなりのエディタを使用する必要があります。決してメモ帳を使ってはいけません。理由はさておいて、『それなりのエディタ』を使った上で保存を UTF-8N と言う最後に N が付いた形式で保存して下さい。

その時注意する事は、ソースコードの中に日本語がある事を確認して下さい。日本語が一切無い場合は何も気にしないでただ保存すれば問題ありません。しかし、後から日本語を追加してその時 UTF-8N で保存するのを忘れると、トラブルに巻き込まれるので、最初からコメントでもなんでもいいので日本語を書いて、UTF-8N で保存するのが理想的です。

4) 今時は jQuery は必須。Google のホスティングを書いておく
Google Hosted Libraries(jQuery)

Google がホスティングしている jQuery を使用して、jQuery UI の Spinner のボタン部分だけを使う方法

もう、WEBページを効率良く作るには、jQuery 無しでは考えられません。そのページで使用する予定が無くても最初から記述しておいて損はありません。
<script>
$(function(){
	// ここに JavaScript のページの初期処理を記述
});
</script>
この部分は、ブラウザの画面の準備が完了した時に実行される部分です。jQuery で書くにしても、ベタなJavaScript+DOM で書くにしても必ず必要な部分です。

5) viewport は書いておいたほうがいいと思います

Googe Chrome の Device Mode & Mobile Emulation に切り替えた場合に表示を見やすくするのに役立ちます。

スマホ対応するのでは無く、デベロッパーツールも WEB アプリには重要な要素なので、どうせだからいろいろ学ぶきっかけとして役に立つ事になるでしょう。

6) と言う事で、F12 でデベロッパーツールを開く

たとえページとして何も表示されなくても、そこには HTML と CSS と JavaScript のソースがあるはずです。





posted by at 2015-05-07 17:09 | テンプレート | このブログの読者になる | 更新情報をチェックする

三項演算子を使った、コンボボックスのデータの再表示

三項演算子 : PHP オンラインマニュアル

マニュアルでは少し解りにくいところ(比較演算子)にありますが、構文自体は昔からあるオーソドックスなものです。

PHP でコンボボックスを扱う場合、送信後の画面で送信前に選択した内容を同じ状態で選択するには、PHP 側で意図的に selected を OPTION 要素の中に書き込む必要があります。その場合、以下のように記述しておくと余計なコードを他の場所に書かなくて済むのでとても使いやすいはずです。
<select id="action_file"
	name="php_file">
	<option value="log3.php"
		<?= $_GET["php_file"] == "log3.php" ? "selected" : "" ?> >連結演算子で文字列の連結
	</option>
	<option value="log4.php"
		<?= $_GET["php_file"] == "log4.php" ? "selected" : "" ?> >文字列内に変数を埋め込んで連結
	</option>
</select>



タグ:PHPの基本
posted by at 2015-05-07 11:16 | 文法 | このブログの読者になる | 更新情報をチェックする