|
第６回 HTML_QuickFormとSmartyを使ってみよう(パート２) | ご意見・ご感想 |
| 先生 | ： | 今日は第３回に作った「奥進システムとあなたの相性チェックプログラム」を派手にしてみます！ |
| たぬき | ： | 先生どないしたん？先生は機能重視主義で見た目はどうでもええ人ちゃうん？ |
| 先生 | ： | ようわかってるなぁ…そやけど今日はとにかく派手にするねん!! |
| たぬき | ： | わかりましたぁ。派手派手にしましょう！ |
| 先生 | ： |
それではまずindex.phpを見てみましょう。 |
001: <?php
002: require_once "./CFrmTanuki.php"; 003: $frmIndex = new CFrmTanuki('index.php'); 004: $frmIndex->setItem(); 005: 006: if (isset($_POST["BTNG"]["SUBMIT_INDEX"])) { 007: // 確認画面 (入力画面で「送信」クリック時) 008: $frmIndex->setServerRule(); // 入力チェックルール設定 009: // 入力チェック実行 010: if ($frmIndex->chkValidate()) { 011: // 入力が正しい時は「戻る」ボタンと「送信」ボタンを表示 012: $frmIndex->setReturnSubmit('RETURN_CONF', 'SUBMIT_CONF'); 013: } else { 014: // 入力が不正な時は「戻る」ボタンのみを表示 015: $frmIndex->setReturn('RETURN_CONF'); 016: } 017: // 画面表示 018: $frmIndex->freezeForm(); // 要素を凍結 019: } elseif (isset($_POST["BTNG"]["SUBMIT_CONF"])) { 020: // 採点画面 (確認画面で「送信」クリック時) 021: // 入力値を受け取るためにsetItemを実行。 022: // 表示はしない。 023: $frmIndex->setServerRule(); 024: if ($frmIndex->chkValidate()) { 025: // 入力結果を$valsに格納 026: $vals = $frmIndex->getVals(); 027: // 採点処理を実行 028: require_once "./ok.php"; 029: } 030: } else { 031: // 入力画面表示 (最初と確認画面で「戻る」クリック時) 032: $frmIndex->setClientRule(); // 入力チェックルール設定 033: $frmIndex->setSubmit("SUBMIT_INDEX"); 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: if (isset($_POST["BTNG"]["SUBMIT_INDEX"])) { 048: $smarty->display("index.tpl"); 049: } elseif (isset($_POST["BTNG"]["SUBMIT_CONF"])) { 050: ; 051: } else { 052: $smarty->display("index.tpl"); 053: } 054: 055: ?> |
||
| 図１．index.php | ||
| 先生 | ： |
$frmIndex->dispForm(); を実行するのをやめるのと、Smarty用の処理を最後に追加するのは前回と同じ。 ただ、OK画面は採点結果のメッセージのみしか表示しないので、 $smarty->display("index.tpl"); は入力画面と確認画面の時のみ実行するようにしてます。 で、次はテンプレートね。 |
001: <html>
002: <head> 003: <title>相性チェックフォームにSmartyを使ってみる</title> 004: <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> 005: </head> 006: {$form.javascript} 007: <body bgcolor="#f0fff0" text="#339999"> 008: <form {$form.attributes}> 009: <div> 010: <font color="#339999" size=4 face="ＭＳ Ｐゴシック" > 011: <b>あなたの好みを教えてください</b> 012: </font> 013: <table border="0"> 014: <tr> 015: <td width="150" bgcolor="#ffc0cb" align="right" valign="top"> 016: <b>{$form.selColor.label}</b> 017: </td> 018: <td width="500" bgcolor="ccffcc" valign="top" align="left"> 019: {$form.selColor.html} 020: その他{$form.txtColor.html} 021: </td> 022: </tr> 023: <tr> 024: <td width="150" bgcolor="ccffcc" align="right" valign="top"> 025: <b>{$form.lngChkGrp.label}</b> 026: </td> 027: <td width="500" bgcolor="#ffc0cb" valign="top" align="left"> 028: {$form.lngChkGrp.html} 029: </td> 030: </tr> 031: <tr> 032: <td width="150" bgcolor="#ffc0cb" align="right" valign="top"> 033: <b>{$form.animalRdoGrp.label}</b> 034: </td> 035: <td width="500" bgcolor="ccffcc" valign="top" align="left"> 036: {$form.animalRdoGrp.html} 037: </td> 038: </tr> 039: </table> 040: <br> 041: <font color="#339999" size=4 face="ＭＳ Ｐゴシック" > 042: <b>ハンドルネームとメッセージをお願いします</b> 043: </font> 044: <table border="0"> 045: <tr> 046: <td width="150" bgcolor="ccffcc" align="right" valign="top"> 047: <b>{$form.txtName.label}</b> 048: </td> 049: <td width="500" bgcolor="#ffc0cb" valign="top" align="left"> 050: {$form.txtName.html} 051: <font color="ff6666">{$form.txtName.error} </font> 052: <font color="ff6666" size=1>※必須項目です</font> 053: </td> 054: </tr> 055: <tr> 056: <td width="150" bgcolor="#ffc0cb" align="right" valign="top"> 057: <b>{$form.txaImp.label}</b> 058: </td> 059: <td width="500" bgcolor="ccffcc" valign="top" align="left"> 060: {$form.txaImp.html} 061: </td> 062: </tr> 063: </table> 064: <table border="0"> 065: <tr> 066: <td valign="top" align="left">{$form.BTNG.html}</td> 067: </tr> 068: </table> 069: </div> 070: </form> 071: </body> 072: </html> |
||
| 図２．テンプレートindex.tpl | ||
| 先生 | ： | 前回と違うのは、6行目の{$form.javascript}です。これはクライアント側の入力チェックのためです。 |
| たぬき | ： | このテンプレートで派手派手にしてるねんね。 |
| 先生 | ： | そうそう。テンプレートを使うと、HTML_QuickFormで入力チェック等簡単に実装して、
なおかつ派手派手にできるんねん。 これで 派手派手版「奥進システムとあなたの相性チェックプログラム」作成完了！ |
| たぬき | ： | なるほど。前に比べてずいぶん派手になりましたね。 |
| 先生 | ： | それじゃー今日はここまで。お疲れさんでしたー |
| たぬき | ： | お疲れさんでしたー |