PEAR::HTML_QuickForm与Smarty 的结合应用

系统 1548 0
PEAR::HTML_QuickForm Smarty 的结合应用
Haohappy 2005-12-28
http://blog.csdn.net/Haohappy2004

Haohappy 在《 PHP & More 》第三期的 PEAR::HTML_QuickForm 入门 一文中 说过要写 QuickForm Smarty 的结合应用,一直没写,今天看到 PHPE 论坛上有朋友在询问,为自己的懒惰而惭愧。现在补上,希望对大家有点帮助。 在我看来, PEAR::HTML_QuickForm 是个非常优秀的表单类库,大大加快了开发速度,我现在的大多数项目都会用到。 如果对 PEAR::HTML_QuickForm 不了解的朋友,建议先看这篇文章。

本文针对的读者为有较丰富开发经验的 PHP 程序员,要求读者

<!--[if !supportLists]--> 1. <!--[endif]--> 熟悉 PEAR 及其安装和使用;

<!--[if !supportLists]--> 2. <!--[endif]--> 熟悉 HTML_QuickForm

<!--[if !supportLists]--> 3. <!--[endif]--> 理解模板的概念,熟悉 Smarty 模板引擎的使用。

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

其实

QuickForm 可以和多种模板引擎相结合,如 ITX, Sigma, Flexy, Smarty 等, 每种模板都有其优点和缺点,目前Smarty是最通用的模板引擎,所以我们把QuickForm和Smarty的结合作为重点来研究。

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

这个例子非常简单,只有一个 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 );

//buildtheHTMLfortheform 生成表单的 HTML 代码
$form -> accept ( $renderer );

//assignarraywithformdata 分配表单数据到数组中
$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>

<<place w:st="on">META</place> NAME="Generator" CONTENT="EditPlus">

<<place w:st="on">META</place> NAME="Author" CONTENT="Haohappy">

<<place w:st="on">META</place> NAME="Keywords" CONTENT="">

<<place w:st="on">META</place> 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 !supportLineBreakNewLine]-->
<!--[endif]-->

改装成

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;

}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

然后把 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框架,觉得很顺手,显示部份就是

PEAR::HTML_QuickForm与Smarty 的结合应用


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论