The DoYouHaoBaby PHP Framework中文开发文档手册
Copyright(c) DoYouHaoBaby.NET All Rights Reserved.
[ 实现用户注册(用户界面) ]

根据我们最开始的分析,WeDoIt 应用应该允许用户注册、登录,然后创建自己的任务列表。用户注册这个功能流程很简单,用流程图表示如下:

如图:



这个功能我们使用 user 控制器的 register 动作来完成,所以首先通过 拷贝一份index的演示控制器(你可以可以使用本程序提供的图形化界面工具来做这个事),修改为 为user 控制器。并在 users 控制器中添加如下代码:

  1. function register(){   
  2.   
  3. }  

如图:



如图:


我们现在增加了类了,我们首先要删除项目中 ”类注册表“,系统会再次生成,以便于更新注册表。使用注册表的好处是,以便于系统使用PHP __autoload来自动载入类,避免繁琐的路径导入。

如图:


现在通过浏览器访问 http://localhost/doyouhaobaby/WeDoIt/index.php/user/register 还只能看到一片空白,因为我们还没有为 register 动作方法提供对应的视图文件。

如图:


创建视图

在 DoYouHaoBaby 应用程序中,视图的功能就如其名称暗示的一样,是用来显示给用户看的。大多数情况下,视图都是一些HTML文件。我们可以在视图中输出变量内容,以便将操作结果展示给用户。

register 动作的操作结果就是显示一个“用户注册”表单。因此我们在模板主题下D:\phpcondition\htdocs\doyouhaobaby\WeDoIt\Tpl\Default 创建 user_register.html 文件(注意:编码为utf-8),内容如下:

  1. <form name="form_user" id="form_user" action="{:G::U('user/register')}" method="post">   
  2.     
  3.   <fieldset>   
  4.     <p>   
  5.       <label for="user_name">用户名</label>   
  6.       <input type="text" name="user_name" id="user_name" />   
  7.     </p>   
  8.     
  9.     <p>   
  10.       <label for="user_password">密码</label>   
  11.       <input type="user_password" name="user_password" id="user_password" />   
  12.     </p>   
  13.     
  14.     <p>   
  15.       <input type="submit" name="Submit" value="提交" />   
  16.     </p>   
  17.     
  18.   </fieldset>   
  19.     
  20. </form>  


如图:




删除模板缓存文件 TplFileIndex.inc.php,以便生成新的缓存。(模板缓存文件由系统自动生成,新增模板后,请删除它们一遍,以便于更新缓存。)


修改刚才的方法,如下:
  1. function register(){   
  2.   
  3.     $this->display();   
  4. }  

现在刷新浏览器,就可以看到注册表单了。

如图:



G::U() 函数

在视图中,我们使用了 G::U() 函数。这个函数在 DoYouHaoBaby 框架中承担着非常重要的职责:生成有效的 URL 地址。

在 Web 应用程序中,URL 地址的重要性无论如何强调都不过分。而在 DoYouHaoBaby 中,URL 中特定参数将被 MVC 模式用于访问特定控制器和动作。为了能够生成有效的 URL 地址,DoYouHaoBaby 框架提供了 G::U() 函数。


G::U()是系统提供的一个静态方法,位于D:\phpcondition\htdocs\doyouhaobaby\DoYouHaoBaby\LibPHP\App\Lib 下面的 G.class.php中,这个类放置了系统常用的方法,这些方法都是静态方法,可以直接使用

G::U() 函数有多种用法,参数如下:

参数 用途
$sUrl 指定 URL 地址对应的 UDI
$arrParams 要在 URL 中传递的附加参数
$bRedirect 是否重定向,直接调转
$bSuffix 是否带上伪静态后缀


这里提到的 UDI 是统一目的地标识符(Uniform Destination Identifier)的缩写。UDI 由控制器、动作、组以及路由组成,采用如下的格式(方括号内参数根据实际应用决定):

  1. G::U('[项目://][路由@][分组名-模块/]操作? 参数1=值1[&参数N=值N]')  


或者用数组的方式传入参数

  1. G::U('[项目://][路由@][分组名-模块/]操作',array('参数1'=>'值1' [,'参数N'=>'值N']))  


如果不定义项目和模块的话 就表示当前项目和模块名称,下面是一些简单的例子:

  1. G::U('Myapp://User/add') // 生成Myapp项目的User模块的add操作的URL地址   
  2.   
  3. G::U('Blog/read?id=1') // 生成Blog模块的read操作 并且id为1的URL地址   
  4.   
  5. G::U('Admin-User/select') // 生成Admin分组的User模块的select操作的URL地址  


参数请确保使用 ?id=1&name=tp或者数组的方式来定义,虽然有些情况下

  1. G::U('Blog/read/id/1')和U('Blog/read?id=1')的效果一样,但是在不同的URL设置情况下,会导致解析的错误。  


根据项目的不同URL设置,同样的U方法调用可以智能地对应产生不同的URL地址效果,例如针对

  1. G::U('Blog/read?id=1')这个定义为例。  


如果当前URL设置为普通模式的话,最后生成的URL地址是:

http://<serverName>/index.php?m=Blog&a=read&id=1

如果当前URL设置为PATHINFO模式的话,同样的方法最后生成的URL地址是:

http://<serverName>/index.php/Blog/read/id/1

如果当前URL设置为REWRITE模式的话,同样的方法最后生成的URL地址是:

http://<serverName>/Blog/read/id/1

如果当前URL设置为REWRITE模式,并且设置了伪静态后缀为.html的话,同样的方法最后生成的URL地址是:

http://<serverName>/Blog/read/id/1.html

G::U方法还可以支持路由,如果我们定义了一个名称为View的路由,指向Blog模块的read操作,参数是id,那么G::U('View@?id=1')生成的URL地址是:

http://<serverName>/index.php/View/id/1



视图分块

一张Web页面,我们发现很多地方是一样的,比如头部,底部,侧边栏,这个时候,为了重用我们需要将页面分割成多个子模板。

参考下面的示意图,可以看到一个页面中,除了中间的内容部分外,页头、侧边栏、页脚在其他页面中都是可以重复使用。因此,我们可以这个公用的地方,分离出来加载。

如图:


完成视图

虽然没有特别要求,但惯例上将包含页面整体结构的视图称为“布局视图”。在 WeDoIt 应用中,为了简单起见,我们就不制作新的布局视图了,直接沿用生成应用时自动创建的演示布局视图。

修改 index_register.html 文件,修改后的代码为,我们这里直接套用我们演示中index_demo.html( http://localhost/doyouhaobaby/WeDoIt/index.php/index/demo )中布局。

  1. <include file="public_header">   
  2.   
  3.     <div id="content_wrapper">   
  4.       <div id="content">   
  5.          <form name="form_user" id="form_user" action="{:G::U('user/register')}" method="post">   
  6.     
  7.   <fieldset>   
  8.     <p>   
  9.       <label for="user_name">用户名</label>   
  10.       <input type="text" name="user_name" id="user_name" />   
  11.     </p>   
  12.     
  13.     <p>   
  14.       <label for="user_password">密码</label>   
  15.       <input type="user_password" name="user_password" id="user_password" />   
  16.     </p>   
  17.     
  18.     <p>   
  19.       <input type="submit" name="Submit" value="提交" />   
  20.     </p>   
  21.     
  22.   </fieldset>   
  23.     
  24. </form>   
  25.       </div>   
  26.       <include file="public_sidebar">   
  27.   
  28. <include file="public_footer">  


如图:



因为我们的演示页面中使用了很多变量赋值,这里我们如果要运行的话,我们需要从Index控制器的demo方法( D:\phpcondition\htdocs\doyouhaobaby\WeDoIt\Lib\Action\IndexController.class.php )拷贝到User控制器的register方法( D:\phpcondition\htdocs\doyouhaobaby\WeDoIt\Lib\Action\UserController.class.php )。即拷贝那些:

  1. // 网站头部   
  2. $this->assign('sWebTitle','欢迎使用DoYouHaoBaby Framework | This is a demo page for you !');   
  3.  $this->assign('sProgramName','DoYouHaoBaby');   
  4. $this->assign('sProgramIdea','代码行云流水,开发如此简单');   
  5. $this->assign('sProgramSite','http://doyouhaobaby.net');   
  6. ......  

变量赋值代码,保存变量正常。


也许你在这里有疑问了,这么麻烦啦,那我是不是每次都要这样拷贝,每个控制器都要这样?当然,你不用这样子做,在实际应用中,我们提供三种方法来解决这个问题。

  1. 使用widget,使用widget可以很好地将公用部分表现出来
  2. 使用控件也可以很好地将公用部分表现出来
  3. 定义总控制器(父控制器),其它的控制器继承它,在总控制器进行公用变量赋值,可以很好地解决。
  4. 更多方法( 测试中 )...


我们这里仅仅演示,这里就不用这么麻烦了。

拷贝完了后,那么你再次刷新浏览器,就会看到一个完整的界面了,如图所示:



公用模板布局

关于模板布局,DoYouHaoBaby 支持多种布局,你可以参考模板指南部分的相关文章。

这里,我们就不用多说啊了,先看着吧。


关于视图部分,我们这里就不用说了哈,我们下一部分再说。