当前位置:首页> PHP教程> 经典文章
关键字
文章内容
PEAR::HTML_QuickForm与Smarty 的结合应用
 
 
修改时间:[2011/04/01 18:46]    阅读次数:[899]    发表者:[起缘]
 
Haohappy在《PHP & More》第三期的《PEAR::HTML_QuickForm入门》一文中说过要写QuickForm和Smarty的结合应用,一直没写,今天看到PHPE论坛上有朋友在询问,为自己的懒惰而惭愧。现在补上,希望对大家有点帮助。 在我看来,PEAR::HTML_QuickForm是个非常优秀的表单类库,大大加快了开发速度,我现在的大多数项目都会用到。如果对PEAR::HTML_QuickForm不了解的朋友,建议先看这篇文章。


本文针对的读者为有较丰富开发经验的PHP程序员,要求读者
1.熟悉PEAR及其安装和使用;
2.熟悉HTML_QuickForm;
3.理解模板的概念,熟悉Smarty模板引擎的使用。


在《PEAR::HTML_QuickForm入门》的表单的美化输出一节中,提到了用QuickForm自带的Form修饰方法来美化输出。很明显,这种方法显得有点麻烦,而且让程序员来美化网页,有点难为我们了。 现在程序员和设计师的合作最常见的就是通过模板,所以如何把QuickForm和模板引擎相结合,这就是我们需要解决的问题。其实QuickForm可以和多种模板引擎相结合,如ITX, Sigma, Flexy, Smarty等,每种模板都有其优点和缺点,目前Smarty是最通用的模板引擎,所以我们把QuickForm和Smarty的结合作为重点来研究。

首先,给大家看看我们的最后效果:
Click to fullsize


这个例子非常简单,只有一个Form,4个Input,只是用来讲解QuickForm的使用。在实际开发中,我们经常遇到几十个Input的情况。实际上,表单越复杂,就越显出我们传统的处理方式的低效,就越显出QuickForm的强大。这一点,也许大家以后会体会到。


好,开始我们的QuickForm+Smarty之旅。

changPwd.php
<?
require_once("includes/config.inc.php");
//构建Smarty对象
$smarty = new Smarty_App;
$smarty->assign('CSSDIR','./templates/admin');
$smarty->assign('title',':: Haohappy Test网站管理系统 ::');

//构建登录表单
$form = new HTML_QuickForm('frmChgPwd', 'post');

//增加表单元素
$form->addElement('password', 'adminPwd', '','class = NameAndPwd');
$form->addElement('password', 'newPwd', '','class = NameAndPwd');
$form->addElement('password', 'newPwd2', '','class = NameAndPwd');
$form->addElement('submit', 'btnSubmit', '修改密码','class = btnSubmit');

//增加验证规则 会自动生成javascript变量,存入javascript验证函数
$form->addRule('adminPwd','密码不能为空!', 'required','','client'); 
$form->addRule('newPwd','新密码不能为空!', 'required','','client'); 
$form->addRule('newPwd2','新密码不能为空!', 'required','','client'); 
$form->addRule(array('newPwd','newPwd2'),"两次输入的密码不同!!",'compare','','client');


if ($form->validate()) {
        //如果表单数据正确,修改密码
        $form->process('changePwd');
}
else{

  //否则显示表单

 // 建立renderer对象
 $renderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty );    
 
 // build the HTML for the form 生成表单的HTML代码
 $form->accept($renderer);

 //assign array with form data 分配表单数据到数组中
 $smarty->assign('form_data', $renderer->toArray());
 $smarty->catching = false;

 // 调试
 //echo "<pre>";var_dump($renderer->toArray());echo "</pre>";
 $smarty->display("changePwd.tpl");

}

//修改密码
function changePwd(){}     
?>


在代码中,我们用$form->addElement()增添了4个表单元素,用$form->addRule()增加了4条验证规则。怎么样,是不是很快捷方便? 以验证两个密码是否相同的验证规则为例,如果我们自己写验证规则,虽然快,但是代码就会显得臃肿和凌乱,由QuickForm来负责数据验证,开发速度大大提高,而且代码显得很简洁漂亮。仅用了一行代码:
$form->addRule(array('newPwd','newPwd2'),"两次输入的密码不同!!",'compare','','client');

关于QuickForm的好处,请参看《PEAR::HTML_QuickForm入门》,在此不再重复。

下面这行代码就是我们将HTML_QuickForm与Smarty连接的桥梁:
$renderer =& new HTML_QuickForm_Renderer_ArraySmarty($smarty ); 


所谓renderer,就是用来负责显示的,这里我们把QuickForm的renderer指定为Smarty,我们就可以使用强大的Smarty模板引擎来格式化QuickForm的输出了。

其它:

changePwd()是这个文件的核心操作函数,用来修改密码。
$form->process('changePwd'); //这行代码用来调用changePwd()

//echo "<pre>";var_dump($renderer->toArray());echo "</pre>";
这一行用来调试,我们随时可以把$renderer中的所有变量打印出来,看看程序是否执行正确。

再看我们的模板,也很简单:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> changePwd.tpl </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="{$CSSDIR}/style.css" rel="stylesheet" type="text/css">
{if $form_data.javascript}
    {$form_data.javascript}
{/if}
</HEAD>

<BODY>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<form {$form_data.attributes} >
<table width="300"  border="0" align="center" cellpadding="3" cellspacing="3"
 bgcolor="#F6F6F6" style="font-size:9pt" class="AddTable">
<tr bgcolor="#FFFFFF">
  <td width="47%" colspan="2"><div align="center">修改管理员密码</div></tr>
  <tr>
  <tr>
    <td width="47%"><div align="center">现有管理员密码
    </div></td>
    <td width="53%">{$form_data.adminPwd.html}</td>
  </tr>
  <tr>
    <td><div align="center">新密码
    </div></td>
    <td>{$form_data.newPwd.html}</td>
  </tr>
  <tr>
    <td><div align="center">再次输入新密码
    </div></td>
    <td>{$form_data.newPwd2.html}</td>
  </tr>
  <tr>
    <td colspan="2"><div align="center">
      {$form_data.btnSubmit.html}
    </div></td>
  </tr>
</table>
</form>
</BODY>
</HTML>


这两个简单的文件,总共不到100行代码,就完成了我们在文章开头的效果。包含完整的表单数据验证,处理过程。


另:使用QuickForm,可以很方便地实现显示层和逻辑层的分离,因为处理的函数是完全独立出来的。

例如说可以把



if ($form->validate()) {
        //如果表单数据正确,修改密码
        $form->process('changePwd');
}


改装成

if ($form->validate()) {

switch ($post_vars['action']) {

           default:

           case "changPwd":

              $form->process('changePwd');

              break;       

           case "Add":

              $form->process('add');

              break;

          

           case "Update":

              $form->process('update');

              break;

          

           case "Delete":

              $form->process('delete');

              break;              

}


然后把changePwd,add,update,delete四个函数独立到某个文件当中。这样就可以根据页面提交的action来调用不同的操作。


这个想法相对比较简陋一些,如果你要用更强大的功能,还可以试试PEAR::HTML_QuickForm_Controller。HTML_QuickForm_Controller基于PageController设计模式,也就是用单个页面来处理通过GET和POST传递而来的request和 action。这是个非常有意思的想法,但是这种开发模式不适合于新手,因为相对比较复杂。其作者也说:

HTML_QuickForm_Controller is not intended for PHP newbies. If you don't understand what classes are, if you have no prior experience with QuickForm, if you are a fan of copy-paste programming then this package is not for you.

The package is indeed complex, but so are the problems it is trying to solve. Try to rewrite any of the enclosed multipage form examples without using such a package and you'll see what we mean.

这部份暂不讨论,这需要大家对MVC有一定了解,下次有机会再另写文章。我自己目前的开发框架就是个MVC框架,觉得很顺手,显示部份就是交给Smarty+QuickForm来完成。希望有更多人关注和使用QuickForm,相信使用之后大家一定不会失望的:)