dummy_config


SOY2HTMLでセキュアなフォームを設置する - HTMLForm編でPOST送信周りを見ました。

SOY Shopの各種プラグインの設定を保存する方法で各種プラグインの設定内容の保存方法を見ました。


これらを踏まえた上で、プラグインの設定画面を設けてみます。



はじめにテキストフォームを設置します。

構築は前の記事のダミープラグインのコードに加えていきます。


テキストフォームの設置はHTMLInputクラスを利用して、

前回、HTMLFormを設置した箇所付近に下記のようなコードを追加します。

$this->createAdd("title", "HTMLInput", array(
	"name" => "Config[title]",
	"value" => "hoge"
));

いつも通り、短縮形を見ておくと、

$this->addInput("title", array(
	"name" => "Config[title]",
	"value" => "hoge"
));

これまた今回も前回同様、ダミープラグインには短縮形の方で記述します。

ついでにデータの保存の方も書いておきます。


DummyPluginConfigPage.class.php

<?php

class DummyPluginConfigPage extends WebPage {

	private $configObj;

	function __construct(){}

	function doPost(){
		if(soy2_check_token()){
			//入力内容の保存
			SOYShop_DataSets::put("dummy_plugin.config", $_POST["Config"]);
			$this->configObj->redirect("updated");
		}
		$this->configObj->redirect("failed");
	}

	function execute(){
		parent::__construct();

		$this->addForm("form", array(
			"method" => "POST"
		));

		$this->addInput("title", array(
			"name" => "Config[title]",
			"value" => "hoge"
		));
	}

	function setConfigObj($configObj){
		$this->configObj = $configObj;
	}
}

※SOYShop_DataSetsクラスは予め読み込んでいるので、includeやSOY2::importは不要です。

SOY2HTMLで処理とデザインを切り分ける


続いて、対になるHTMLファイルの方に新たに作成したsoy:id付きテキストフォームを設置します。


DummyPluginConfigPage.html

<form soy:id="form">
	<dl>
		<dt>タイトル</dt>
		<dd>
			<input type="text" soy:id="title">
		</dd>
	</dl>
	<input type="submit" value="押す">
</form>

テキストフォームのタグを追加できたら、実際に画面を確認してみて、


htmlinput


テキストフォームが追加された事を確認します。



該当箇所のソースコードを確認してみると、

<input name="Config[title]" value="hoge" type="text" />

このようにnameとvalue属性に値が追加されていました。

この値は


$this->addInput("title", array(
	"name" => "Config[title]",
	"value" => "hoge"
));

addInputの第二引数の配列内で指定した値を一致しています。

<input type="text" name="***" value="">のように事前にnameとvalue属性をHTML側に記述していた場合は表示の際に配列内で指定した値に上書きされます。


SOY2HTMLを利用することでテキストフォームでもPHPの記述の混入を防ぎつつ、HTMLファイルをそのまま表示でもデザイン崩れなく表示することができるようになりました。


今回も以前同様、HTMLInputの実際のコードを見ておきます。

/common/lib/soy2_build.phpを開きclass HTMLInputでテキスト検索して、


/**
 * @package SOY2.SOY2HTML
 */
class HTMLInput extends HTMLFormElement{
	const SOY_TYPE = SOY2HTML::SKIP_BODY;
	var $tag = "input";
	var $value;
	var $type;
	function setValue($value){
		$this->value = $value;
		$this->setAttribute("value",$this->value);
	}
	function execute(){
		parent::execute();
	}
	function getObject(){
		return $this->value;
	}
	function setType($value){
		$this->type = $value;
		$this->setAttribute("type",$this->type);
	}
	function getType(){
		return $this->type;
	}
}

HTMLInputはHTMLFormElementクラスを継承しているので、こちらも見ておくと、


/**
 * @package SOY2.SOY2HTML
 */
abstract class HTMLFormElement extends SOY2HTML{
	var $name;
	private $disabled;
	private $readonly;
	function execute(){
		parent::execute();
		$disabled = ($this->disabled) ? "disabled" : null;
		$this->setAttribute("disabled",$disabled, false);
		$readonly = ($this->readonly) ? "readonly" : null;
		$this->setAttribute("readonly",$readonly, false);
	}
	function setName($value){
		$this->name = $value;
		$this->setAttribute("name",$value);
	}
	function getDisabled() {
		return $this->disabled;
	}
	function setDisabled($disabled) {
		$this->disabled = $disabled;
	}
	function getReadonly() {
		return $this->readonly;
	}
	function setReadonly($readonly) {
		$this->readonly = $readonly;
	}
}

SOY2HTMLまで追うことは止めておきます。