|
第５回 HTML_QuickFormとSmartyを使ってみよう | ご意見・ご感想 |
| 先生 | ： | さて今日はHTML_QuickFormとSmartyを使ってデザインの自由度の高いフォームを作る勉強をしてみましょう。 |
| たぬき | ： | HTML_QuickFormでもフォームは出力できてたやん、なんでわざわざSmarty使うん？ |
| 先生 | ： | 良い質問やね。今までHTML_QuickFormの勉強で使っていたフォームは、デフォルトのフォーム形式で作ってたから、ちょっとデザインを変えたいとか思ってもでけへんかったやろ。それをレンダラーとしてSmartyを使うことによって解決するってことや。まあHTML_QuickFormも独自に簡易的なレンダラーを持ってるんやけど、Smartyと組み合わせたらよりデザイン性が高いものができ上がるって事やね。 |
| たぬき | ： | レンダラーてなに？ |
| 先生 | ： | レンダリングを実行するプログラムのことで、ここではHTMLを作りあげるプログラムってところやね。 |
| たぬき | ： | ふーん。なんかわかったような、わからんような。プログラム見たらわかるやろ。 |
| 先生 | ： | よし。ではさっそくサンプルを作ってみようか。ここでもわかりやすいように第２回と同じ物を作ってみよか。ちょっとボタンの部分を全部グループでまとめるように変更したんやけど、流れは一緒です。 |
001: <?php
002: require_once "./CFrmSimple.php"; 003: require_once "Smarty.class.php"; 004: require_once "HTML/QuickForm.php"; 005: require_once "HTML/QuickForm/Renderer/ArraySmarty.php"; 006: 007: $frmIndex = new CFrmSimple('index.php'); 008: 009: // 定義、チェック関係 010: $frmIndex->setItem(); // 要素の定義 011: 012: // ===== 確認画面 (入力画面で「送信」クリック時) 焼直し前の[conf.php]部分===== 013: if ( isset($_POST["BTNG"]["SUBMIT_INDEX"]) ) { 014: 015: // 「戻る」ボタンと「送信」ボタンを表示 016: $frmIndex->setReturnSubmit('RETURN_CONF', 'SUBMIT_CONF'); 017: 018: $frmIndex->freezeForm(); // 要素を凍結 019: // smartyへのレンダリングに変更 $frmIndex->dispForm(); // 表示 020: 021: // ===== 最終画面 (確認画面で「送信」クリック時) 焼直し前の[ok.php]部分===== 022: } elseif ( isset($_POST["BTNG"]["SUBMIT_CONF"]) ) { 023: 024: // 画面表示 025: $frmIndex->freezeForm(); // 要素を凍結 026: // smartyへのレンダリングに変更 $frmIndex->dispForm(); // 表示 027: 028: // ===== 入力画面 (最初と確認画面で「戻る」クリック時) 焼直し前の[index.php]部分===== 029: } else { 030: 031: // 入力画面表示 (最初と確認画面で「戻る」クリック時) 032: $frmIndex->setSubmit("SUBMIT_INDEX"); 033: // smartyへのレンダリングに変更 $frmIndex->dispForm(); 034: } 035: 036: // Smarty 設定 037: $smarty = new Smarty; 038: $smarty->templete_dir = "./templates"; 039: $smarty->compile_dir = "./templates_c"; 040: $smarty->cache_dir = "./cache"; 041: 042: // renderer for Smarty templates の取得 043: $renderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty); 044: $frmIndex->_form->accept($renderer); 045: $smarty->assign('form', $renderer->toArray()); 046: 047: // 表示 048: $smarty->display("index.tpl"); 049: ?> |
||
| 図１．index.php | ||
001: <?php
002: // QuickForm使用サンプル 003: require_once "HTML/QuickForm.php"; 004: 005: // テクストエリアが一つだけのシンプルなフォーム 006: class CFrmSimple { 007: var $_form; 008: 009: // コンストラクタ 010: // $argAction : 「送信」ボタンのリンク先 011: function CFrmSimple($argAction) { 012: $this->_form = new HTML_QuickForm('frmSimple', 'post', $argAction); 013: } 014: 015: // フォームの項目を定義 016: function setItem() { 017: $this->_form->addElement('text', 'txtTest', 'タイトル'); 018: } 019: 020: // 「送信」ボタンを作る 021: // $argBtnName : ボタンの名前 022: function setSubmit($argBtnName) { 023: // $this->_form->addElement('submit', $argBtnName, '送信'); 024: $buttons[] = &HTML_QuickForm::createElement( 025: 'submit', $argBtnName, '送信' 026: ); 027: $this->_form->addGroup($buttons, "BTNG", null, ' '); 028: } 029: 030: // 「戻る」ボタンと「送信」ボタンを作る 031: // $argRtnName : 「戻る」ボタンの名前 032: // $argSubmitName : 「送信」ボタンの名前 033: function setReturnSubmit($argRtnName, $argSubmitName) { 034: $buttons[] = &HTML_QuickForm::createElement( 035: 'submit', $argRtnName, '戻る' 036: ); 037: $buttons[] = &HTML_QuickForm::createElement( 038: 'submit', $argSubmitName, '送信' 039: ); 040: $this->_form->addGroup($buttons, "BTNG", null, ' '); 041: } 042: 043: // 「戻る」ボタンを作る 044: // $argBtnName : ボタンの名前 045: function setReturn($argBtnName) { 046: // $this->_form->addElement('submit', $argBtnName, '戻る'); 047: $buttons[] = &HTML_QuickForm::createElement( 048: 'submit', $argRtnName, '戻る' 049: ); 050: $this->_form->addGroup($buttons, "BTNG", null, ' '); 051: } 052: 053: // 画面を表示する 054: function dispForm() { 055: $this->_form->display(); 056: } 057: 058: // 画面をフリーズする 059: function freezeForm() { 060: $this->_form->freeze(); 061: } 062: } 063: ?> |
||
| 図２．CFrmSimple.php | ||
001: <html>
002: <head> 003: <title>QuickFormを使った簡単な例</title> 004: <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> 005: </head> 006: <body> 007: 008: <form {$form.attributes}> 009: <div> 010: <table border="0"> 011: 012: <tr> 013: <td align="right" valign="top"><b>{$form.txtTest.label}</b></td> 014: <td valign="top" align="left">{$form.txtTest.html}</td> 015: </tr> 016: <tr> 017: <td align="right" valign="top"><b></b></td> 018: <td valign="top" align="left">{$form.BTNG.html}</td> 019: </tr> 020: </table> 021: </div> 022: </form> 023: </body> 024: </html> |
||
| 図３．テンプレートindex.tpl | ||
| 先生 | ： |
わかるかなー。２回目と大きく変わっているところだけ説明しよか。 index.php 36〜 48行目：ここでレンダラーとしてSmartyを使うことを定義して値をセットしてます。ポイントは43,44,45行目のところで、HTML_QuickFormが生成した変数を、Smartyへ[form]として変数をセットしているところかな。 index.tpl 8行目：ここではformの属性を出力しています。QuickFormで設定したform属性を変数にセットしてassignしているんです。formの変数はこちら(PERAのページへGO!! ) 13行目：ここではテキストエリアのラベルを出力しています。PHPの変数では３次元の配列になっているんやけど、Smartyの書き方で.でつなげているんやね。formはindex.phpのassignしたときの変数名で、txtTestは項目名称で、labelはHTML_QuickFormが定義している変数名ですね。 14行目：ここではテキストエリアのinputタグを出力しています。 18行目：ここではボタンを出力しています。 |
| 先生 | ： | 出来上がりはこんな感じです。見た目は第２回目と全く一緒です。 |
| たぬき | ： | なんとなく、わかったような気がする。 |
| 先生 | ： | まあちょっと難しくなってきたけど、丁寧にみていったらわかるかなー。こんな感じで書いて行けば、HTML_QuickFormとSmartyの組み合わせで、簡単に分業しながら開発を進められるでしょう。それじゃ今回はこんなところで、次回はSmartyとHTML_QuickFormの連携で、もう少し複雑なフォームについてやってみましょう。 |
| たぬき | ： | わかりました。これを復習して今後にそなえます。 |
| 先生 | ： | いい心掛けやねー。より早く、より良いものをつくるには、こんなんを使うのが手っ取り早くていいですね。頑張りましょう。 |
| たぬき | ： | 頑張ります。 |
| 先生 | ： | それじゃー今日はここまで。お疲れさんでしたー |
| たぬき | ： | お疲れさんでしたー |