プラグインの詳細設定画面を追加するで設けた詳細設定画面で設定用のフォームを設置してみます。

今回は上のキャプチャのように数字を登録できるフォームを設けてみます。

plugin_config
├── config
│	├── PluginConfigSamplePage.class.php
│	└── PluginConfigSamplePage.html
└── plugin_config.php

の記事のconfigディレクトリにあるファイルを編集します。

始めにPluginConfigSamplePage.class.phpの方から見ていきます。

<?php

class PluginConfigSamplePage extends WebPage {

	private $pluginObj;

	function __construct(){

	}

	function doPost(){
		if(soy2_check_token()){
			// 設定に関する処理を追加
		}

		// 同じページにリダイレクト
		CMSPlugin::redirectConfigPage();
	}

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

		$this->createAdd("form", "HTMLForm");

		$this->createAdd("number", "HTMLInput", array(
			"name" => "n",
			"value" => 0
		));
	}

	function setPluginObj($pluginObj){
		$this->pluginObj = $pluginObj;
	}
}

先にexecuteの方から見ていくと、２つのcreateAddの呼び出しを加えています。

１つ目はHTMLFormで２つ目がHTMLInputになります。

１つ目のHTMLFormの方では、<form soy:id="form">が使用可能になり、クロスサイトリクエストフォージェリ(CSRF)に対応したフォームタグが出力されます。

HTMLFormを利用する場合は、doPostの方でsoy_check_token()でHTMLFormが生成するトークンのチェックを必ず行ってください。

https://github.com/inunosinsi/SOY2/blob/master/SOY2HTML/SOY2HTMLComponents/HTMLForm.class.php

https://github.com/inunosinsi/SOY2/blob/master/function/function.soy2_token.php

HTMLFormをcreateAddする時、三番目の値を指定しない場合はmethodがPOSTになります。

GETを利用したい場合は

$this->createAdd("form", "HTMLForm", array(
	"method" => "GET"
));

のようにmethodを明記する必要があります。

クロスサイトリクエストフォージェリに関しては下記の記事で詳細を記載しました。

クロスサイトリクエストフォージェリを回避する方法を探る - saitodev.co

続いて、２つ目のHTMLInputですが、

$this->createAdd("number", "HTMLInput", array(
	"name" => "n",
	"value" => 0
));

のコードで、

<input type="number" soy:id="number">

が使用できるようになり、ブラウザで画面を表示すると、

<input type="number" name="n" value="0">

のタグが出力されます。

---

続いて、PluginConfigSamplePage.htmlの方の編集します。

<form soy:id="form">
	<input type="number" soy:id="number" required="required">
	<input type="submit">
</form>

これで準備は終了です。

ブラウザで作成したプラグインの詳細画面を開いてみると、

<form action="/CMSインストールディレクトリ/soycms/index.php/Plugin/ConfigPage?plugin_config_sample" method="post">
	<input type="hidden" name="soy2_token" value="053186fbeb4e2622c9e55d9e453342b9" />
	<input name="n" value="0" type="number" required="required">
	<input type="submit">
</form>

のような出力になりました。

今回のコードは下記のURLで詳細の確認をできるようにしています。

https://github.com/inunosinsi/soycms/tree/master/cms/common/site_include/plugin/plugin_config_sample