Smarty + HTML_QuickForm でフォーム作成

概要

それではいよいよ Smarty と HTML_QuickForm を連動させてみます。
必要なファイルは以下の4つです

ThirdStepQuickForm.php（クラスファイル）

Smarty と連携させるため「HTML/QuickForm/Renderer/ArraySmarty.php」ファイルを読み込んでいます。

あとは、テンプレートファイルで送信ボタンを「{$form.SUBMIT_BOTTONS.html}」と呼び出せるように『SUBMIT_BOTTONS』という名前でグループ化しています。
こうすることでテンプレートファイルでの入力画面、確認画面の送信ボタンの切り替えが不要になります。

<?php  // /var/www/html/ThirdStepQuickForm.php

  require_once "HTML/QuickForm.php";
  require_once "HTML/QuickForm/Renderer/ArraySmarty.php"; 

class ThirdStepQuickForm {
  var $_form;

  // コンストラクタ
  // $argAction :「送信」ボタンのリンク先
  // HTML_QuickForm オブジェクトを生成
  function ThirdStepQuickForm($argAction) {
    $this->_form = new HTML_QuickForm('thirdForm', 'post', $argAction);
    $this->_form->_requiredNote = '<span style="color:#ff0000;">*</span> 必須入力';
  }

  // フォームに要素を追加
  function setItem() {
    $this->_form->addElement('text', 'name', 'お名前:', array('size' => 50, 'maxlength' => 30));
  }

  // フォーム要素に検証ルールを追加
  function setRule() {
    $this->_form->applyFilter('name', 'trim');
    $this->_form->addRule('name', '名前を入力してください', 'required', null, 'client');
  }

  // 「確認」ボタン（入力画面）
  // $argBtnName : ボタンの名前
  function setSubmit($argBtnName) {
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argBtnName, '確認'
    ); 
    $this->_form->addGroup($buttons, "SUBMIT_BOTTONS", null, ' ');
  }

  // 「戻る」、「送信」ボタン（確認画面）
  // $argRtnName    : 「戻る」ボタンの名前
  // $argSubmitName : 「送信」ボタンの名前
  function setReturnSubmit($argRtnName, $argSubmitName) {
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argRtnName, '戻る'
    );
    $buttons[] = &HTML_QuickForm::createElement(
      'submit', $argSubmitName, '送信'
    );
    $this->_form->addGroup($buttons, "SUBMIT_BOTTONS", null, ' ');
  }

  // 入力値を検証する
  function checkValidate() {
    return $this->_form->validate();
  }

  // 入力値を取得する
  // 戻り値：要素名と入力された値の連想配列
  function getVals() {
    return $this->_form->exportValues();
  } 

  // 画面を表示する
  function dispForm() {
    $this->_form->display();
  }

  // 画面をフリーズする（確認画面、完了画面）
  function freezeForm() {
    $this->_form->freeze();
  }
}
?>

thirdstep.php（実行ファイル）

Smartyファイルを読み込んで「$form->_form->accept($renderer);」します。

完了画面のときは submit.tpl を、その他のときは index.tpl を表示させます。

<?php  // /var/www/html/thirdstep.php

  require_once "./ThirdStepQuickForm.php";
  require_once "Smarty.class.php";

  $form = new ThirdStepQuickForm('thirdstep.php');

  $form->setItem();   // 要素を追加
  $form->setRule();    // 検証ルール設定

  if ( isset($_POST['SUBMIT_BOTTONS']['SUBMIT_INDEX']) ) {
    // 確認画面表示
    // 検証実行
    if ($form->checkValidate()) {
      // 検証クリア時は「戻る」、「送信」ボタンを表示
      $form->setReturnSubmit('RETURN_CONF', 'SUBMIT_CONF');
      $form->freezeForm();    // 要素を凍結
    } else {
      $form->setSubmit('SUBMIT_INDEX');
    }
  } else {
    // 入力画面表示
    $form->setSubmit('SUBMIT_INDEX');
  }

  $smarty = new Smarty();

  $smarty->template_dir = '/var/www/private/Smarty_tpl/ThirdStepQuickForm_tpl/templates/';
  $smarty->compile_dir  = '/var/www/private/Smarty_tpl/ThirdStepQuickForm_tpl/templates_c/';
  $smarty->config_dir   = '/var/www/private/Smarty_tpl/ThirdStepQuickForm_tpl/configs/';
  $smarty->cache_dir    = '/var/www/private/Smarty_tpl/ThirdStepQuickForm_tpl/cache/';

  // renderer for Smarty templates の取得
  $renderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty);
  $form->_form->accept($renderer);

  // 表示
  if ( isset($_POST['SUBMIT_BOTTONS']['SUBMIT_CONF']) ) {
    // 完了画面表示
    if ($form->checkValidate()) {
      $smarty->assign('value', $form->getVals());
      $smarty->display("submit.tpl");
    }
  } else {
    $smarty->assign('form', $renderer->toArray());
    $smarty->display("index.tpl");
  }
?>

index.tpl（フォーム表示テンプレート）

{$form.SUBMIT_BOTTONS.html} で入力画面用ボタン（確認ボタン）、確認画面用ボタン（戻る・送信ボタン）どちらも表示できます。

{* /var/www/private/Smarty_tpl/ThirdStepQuickForm_tpl/templates/index.tpl *}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Smarty + HTML_QuickForm サンプルフォーム</title>

<style type="text/css">
{literal}
body{ text-align:center;}
.content{ margin: 10px auto; width:400px;}
h1{ font-size: 1.2em; color:#336666;}
form{ text-align:left; border:1px dashed #999999; padding:20px;}
.reqnote{ font-size:0.8em; text-align:right;}
.bottoms{ text-align:right;}
.message{ color:#ff0000;}
{/literal}
</style>

{$form.javascript} 
</head>
<body>
<div class="content">

<h1>サンプルフォーム3</h1>
<form {$form.attributes}>
<p class="reqnote">{$form.requirednote}</p>

<p><span class='message'>*</span>{$form.name.label} {$form.name.html}<br />
  <span class='message'>{$form.name.error}</span>
</p>

<p class="bottoms">{$form.SUBMIT_BOTTONS.html}</p>
</form>
</div>
</body>
</html>

Smarty のテンプレートファイル内でcssやjavascriptを記述するときは『{literal}』で囲うか、デリミタ自体を変更します。

Smarty_Setup extends Smarty {
  function Smarty_Setup() {
    $this->Smarty();
    $this->left_delimiter = '<!--{';
    $this->right_delimiter = '}-->';
  }
}

submit.tpl（送信完了表示テンプレート）

{* /var/www/private/Smarty_tpl/ThirdStepQuickForm_tpl/templates/submit.tpl *}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Smarty + HTML_QuickForm サンプルフォーム</title>

<style type="text/css">
{literal}
body{ text-align:center;}
.content{ margin: 10px auto; width:400px;}
h1{ font-size: 1.2em; color:#336666;}
.welcome{ text-align:left; border:1px dashed #999999; padding:20px;}
.reqnote{ font-size:0.8em; text-align:right;}
.bottoms{ text-align:right;}
.message{ color:#ff0000;}
{/literal}
</style>

</head>
<body>
<div class="content">
<h1>サンプルフォーム3 送信完了</h1>
<div class="welcome">
<p>こんにちは、{$value.name}さん。<br />ようこそ QuickForm の世界へ!</p>
</div>
</div>
</body>
</html>

まとめ

表示結果

htmlソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Smarty + HTML_QuickForm サンプルフォーム</title>

<style type="text/css">
body{ text-align:center;}
.content{ margin: 10px auto; width:400px;}
h1{ font-size: 1.2em; color:#336666;}
form{ text-align:left; border:1px dashed #999999; padding:20px;}
.reqnote{ font-size:0.8em; text-align:right;}
.bottoms{ text-align:right;}
.message{ color:#ff0000;}
</style>

<script type="text/javascript">
//<![CDATA[
function validate_thirdForm(frm) {
  var value = '';
  var errFlag = new Array();
  var _qfGroups = {};
  _qfMsg = '';

  value = frm.elements['name'].value;
  if (value == '' && !errFlag['name']) {
    errFlag['name'] = true;
    _qfMsg = _qfMsg + '\n - 名前を入力してください';
  }

  if (_qfMsg != '') {
    _qfMsg = 'Invalid information entered.' + _qfMsg;
    _qfMsg = _qfMsg + '\nPlease correct these fields.';
    alert(_qfMsg);
    return false;
  }
  return true;
}
//]]>
</script> 
</head>
<body>
<div class="content">

<h1>サンプルフォーム3</h1>
<form  action="thirdstep.php" method="post" name="thirdForm" id="thirdForm" onsubmit="try { var myValidator = validate_thirdForm; } catch(e) { return true; } return myValidator(this);">
<p class="reqnote"><span style="color:#ff0000;">*</span> 必須入力</p>

<p><span class='message'>*</span>お名前: <input size="50" maxlength="30" name="name" type="text" /><br />
  <span class='message'></span>
</p>

<p class="bottoms"><input name="SUBMIT_BOTTONS[SUBMIT_INDEX]" value="確認" type="submit" /></p>

</form>
</div>
</body>
</html>

入力画面
エラー表示画面
確認画面
送信完了画面

投稿日：2008年12月31日

概要

目次

ThirdStepQuickForm.php（クラスファイル）

thirdstep.php（実行ファイル）

index.tpl（フォーム表示テンプレート）

submit.tpl（送信完了表示テンプレート）

まとめ