フォーム上にある、select checkbox etc..作るのが面倒です。Smartyにはこれらを簡単に作るためのカスタム関数が用意されています。
これらを使用して、入力フォームで入力したデータを表示するだけの処理を作成してみます。
入力する項目として、下記の項目を作成します。
プログラム側では、最初にフォームを表示するクラスを作成します。
/** * 入力フォーム表示クラス * * @see MySmarty */ class Form1{ // なんかの処理 }
そして、ドロップダウンやチェックボックスなど、各項目の作成に使用するデータをクラス内に定義します。
class Form1{
/** ドロップダウン等の表示データ */
var $_params = array(
'gender' => array(1=>'男性', 2=>'女性'),
'conjugality' => array(
"選択してください",
'独身',
'既婚',
),
'blood' => array(
'A' => 'A型',
'B' => 'B型',
'AB' => 'AB型',
'O' => 'O型',
),
'carrier' => array(
'DoCoMo',
'au',
'SoftBank',
'その他',
),
);
}
次に、このクラスのコンストラクタを作成します。ここでの処理は、Smartyのオブジェクトを生成するだけです。
/**
* 入力フォーム表示クラス コンストラクタ
*
* @param void
* @return void
*/
function Form1(){
$this->_smarty = new MySmarty();
}
そして、フォームを表示する
メソッドと入力データを表示する
メソッドを追加します。
/**
* 入力フォームの表示
*
* @param void
* @return void
*/
function viewForm(){
$this->_smarty->assign('title',"入力フォーム サンプル");
$this->_smarty->assign('params',$this->_params);
$this->_smarty->display('form1.tpl');
}
/**
* 入力データの表示
*
* @param void
* @return void
*/
function doneForm(){
$this->_smarty->assign('title',"入力フォーム サンプル 結果表示");
$this->_smarty->assign('params',$this->_params);
$this->_smarty->display('form1_done.tpl');
}
これで、クラスの作成は完了です。
次に、このクラスを生成して制御するメイン関数を作成します。メイン関数では、フォームから渡されるPHASE
の値によって処理を変えるようにしています。
/** * 入力フォーム処理メイン関数 * * @see Form1 * * @param void * @return void */ function main(){ $form1 = new Form1(); switch($_POST['PHASE']){ // 完了処理 case "DONE": $form1->doneForm(); break; // フォーム表示処理 default: $form1->viewForm(); break; } }
入力フォームテンプレートのデザインは、pFormと言うフォームジェネレータを使用して作ってみました。
pFormからフォームを作ると、view.jsと言うjavascriptファイルが付いてきます。このjavascriptは入力項目を選択すると背景色が変化するような処理をしているのですが、Smartyとは相性が悪く、Smartyが出力したチェックボックス等では動かなくなってしまいます。
仕方がないので、同じような動作をするjavascript関数をform.jsファイルに作成して、これを読込ませています。(それからスタイルシートも少し変えている)
名前などの入力欄は普通に記述します。
ラジオボタンは{html_radios}を使用して下記のように記述します。
{html_radios name=gender options=$params.gender class="element radio"}
生年月日のドロップダウン、{html_select_date}を使用して記述します。
{html_select_date prefix="" start_year='1900' month_format="%m" field_order="YMD"}
月の形式はデフォルトでは英語表記の短縮形で表示されてしまうので、month_format="%m"として数字に変更しています。
年月日の並びも英語表記なので field_order="YMD"として並びを変えています。
通常のドロップダウンは{html_options}を使用して記述します。
{html_options}では次のようにname属性を指定するとselectタグを含めた形で作成してくれます。
{html_options name=conjugality options=$params.conjugality class="element select medium"}
name属性を省略した場合は下記のように記述する必要があります。
<select class="element select medium" name="blood">
<option value="">選択してください</option>
{html_options options=$params.blood}
</select>
チェックボックスは{html_checkboxes}を使用して下記のように記述します。
{html_checkboxes name=carrier options=$params.carrier class="element checkbox"}
入力結果表示では、postで渡されたデータを表示するだけです。
postで渡されたデータは、Smarty変数の$smarty.postに入っているので、下記のように記述すればよいでしょう。
{$smarty.post.name|escape|default:"入力されていません。"}
ユーザが入力したデータには、不正なコード実行する悪意ある文字列が含まれているかもしれません。ですので、このような変数を扱うときにはescape修飾子を使い、不正な文字列をエスケープしておきましょう。
また、データが何も無い場合、入力されていません。
と表示させるために、default修飾子を設定しています。
チェックボックスの値は、数字で返ってくるので、プログラム側でアサインした配列を使用して、可読可能な形に変換しています。
{$params.gender[$smarty.post.gender]|escape|default:"選択されていません。"}