`
isiqi
  • 浏览: 16354622 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

第五天--表单与页面

阅读更多
回顾

在我们第四天的学习中,我们通过将代码段移到与其作用更为相关的文件中来对我们的程序进行重构。我们同时也学习了修改模块,这样与数据相关的通常方法可以在动作代码之外运行。

开发很简洁,但是功能的数量仍然很缺乏。现在是时候进行一些askeet站点与用户之间的交互了。而HTML交互的根本--除了起链接--就是表单了。

今天我们的目标是允许用户登陆,并在主页的问题列表中进行翻阅。这对于开发而言是很快的,但是这会让我们回忆起昨天的内容。

登陆表单

在测试数据中存在用户,但是程序却没有办法来进行验证。下面我们要在程序的每一个页面添加一个登陆表单。打开全局的布局文件askeet/apps/frontend/templates/layout.php,并且在到about的连接之前添加下面的代码行:

<li><?php echo link_to('sign in', 'user/login') ?></li>

当前的布局将这些链接放在web调试工具栏之后。要看到这些链接,点击'Sf'图标折叠起调试工具栏就可以看到了。

现在需要创建user模块。而question模块是在第二天生成的,这一次我们只是叫symfony来创建模块框架,而我们将会自己来编写这些代码。

$ symfony init-module frontend user

这个框架包含一个默认的index动作与一个indexSuccess.php模板。删除他们,因为我们并不需要他们。

创建user/login动作

在user/actions/action.class.php文件中,添加下面的登陆动作:

public function executeLogin()
{
$this->getRequest()->setAttribute('referer', $this->getRequest()->getReferer());

return sfView::SUCCESS;
}

这个动作将referer保存在请求属性中。然后这个属性可为模块所用存放在一个隐藏区域中,从而这个表单的目的动作可以在成功登陆后重定向到原始的referer。

语句return sfView::SUCCESS将动作执行结果传递到loginSuccess.php模块。这条语句是在一个不包含返回语句的动作中实现的,这也就是一个动作的默认模块被称之为actionnameSuccess.php的原因。

在动作上开始更多的工作之前,我们先来看一下模块。

创建loginSuccess.php模块

web上的许多人机交互使用表单,而Symfony通过提供一个form帮助器集合来组织表单的创建与管理。

在askeet/apps/frontend/modules/user/templates/目录下,创建下面的loginSuccess.php模块:

<?php echo form_tag('user/login') ?>

<fieldset>

<div class="form-row">
<label for="nickname">nickname:</label>
<?php echo input_tag('nickname', $sf_params->get('nickname')) ?>
</div>

<div class="form-row">
<label for="password">password:</label>
<?php echo input_password_tag('password') ?>
</div>

</fieldset>

<?php echo input_hidden_tag('referer', $sf_request->getAttribute('referer')) ?>
<?php echo submit_tag('sign in') ?>

</form>

这个模块是我们第一次使用表单帮助器。这些Symfony函数可以帮助我们自动化编写表单标签。form_tag()打开一从此标签,使用POST作为默认的动作,并且指向作为参数传递的动作。input_tag()帮助器产生一个<input>标签,并且依据所传递的第一个参数自动添加一个id属性;而默认值则是由第二个参数得到。我们可以在Symfony一书的相关章节查找到更多的关于表单帮助器与他们所产生的HTML代码的内容。

这里的实质是当表单提交时则会调用这个动作。所以我们返回来看一下这个动作。

处理表单提交

用下面的代码来替换我们刚才所编写的登陆动作:

public function executeLogin()
{
if ($this->getRequest()->getMethod() != sfRequest::POST)
{
// display the form
$this->getRequest()->setAttribute('referer', $this->getRequest()->getReferer());
}
else
{
// handle the form submission
$nickname = $this->getRequestParameter('nickname');

$c = new Criteria();
$c->add(UserPeer::NICKNAME, $nickname);
$user = UserPeer::doSelectOne($c);

// nickname exists?
if ($user)
{
// password is OK?
if (true)
{
$this->getUser()->setAuthenticated(true);
$this->getUser()->addCredential('subscriber');

$this->getUser()->setAttribute('subscriber_id', $user->getId(), 'subscriber');
$this->getUser()->setAttribute('nickname', $user->getNickname(), 'subscriber');

// redirect to last page
return $this->redirect($this->getRequestParameter('referer', '@homepage'));
}
}
}
}

登陆动作可以同时用来显示登陆表单并且进行处理。相应的,他必须知道所调用的环境。如果这个动作并没有在POST模式下调用(因为是由一个链接来请求的):而这正是我们在前面所讨论的情况。如果是在POST模式下请求的,那么则会由表单调用这个动作并进行相应的处理。

这个动作会由请求参数得到nickname域的值,并且查询User表来查看在数据库是否存在此用户。

将来一个密码控制将会为用户分配凭证。但是现在,这个动作所做的只是在一个会话属性中存储用户的id与nickname属性。最后,这个动作重定向到表单中隐藏中的原始referer域,这是作为一个请求参数传递的。如果这个域是空的,则会使用默认值。

这里我们需要注意这个例子中两种类型的属性集合之间的区别:request attributes($this->getRequest()->setAttribute())是为模板所保存的,而且只要答案发送到referer则会被忘记。session attributes($this->getUser()->setAttribute())是在整个用户会话生命期被保存的,而且在将来其他的动作也可以访问他们。如果我们希望了解更多的关于属性的内容,我们可以查看Symfony一书的参数保存器一节。

分配权限

用户可以登陆进askeet网站是一件好事,但是用户并不仅是因为好玩而登陆。发表一个新问题,对某一个问题表示兴趣,评价一个评论都需要登陆。而其他的动作将会向非登陆用户开放。

要将一个用户设置为经过验证的,我们需要调用sfUser对象的->setAuthenticated()方法。这个对象同时提供了一个证书机制(->addCredential()),来通过配置限制访问。Symfony一书的用户证书一节对此进行了详细的解释。

这就是下面两行的目的:

$this->getContext()->getUser()->setAuthenticated(true);
$this->getContext()->getUser()->addCredential('subscriber');

当nickname被识别后,不仅用户数据被存放在会话属性中,而且这个用户也会被分配网站限制部分的访问权限。在明天我们将会看到如何限制验证用户的程序访问。

添加user/logout动作

关于->setAttribute()方法还有最后一个窍门:最后一个参数(上面例子中的subscriber)定义了属性存放的名字空间。一个名字空间不仅允许一个在另一个名字空间存在的名字指定给一个属性,而且可以使用一个命令快速移除所有这些属性:

public function executeLogout()
{
$this->getUser()->setAuthenticated(false);
$this->getUser()->clearCredentials();

$this->getUser()->getAttributeHolder()->removeNamespace('subscriber');

$this->redirect('@homepage');
}

使用名字空间可以省去我们一个一个移除这些属性的麻烦:这只是一行语句。

更新布局

当前这个布局即使用户已经登陆仍然显示一个'login'链接。让我们来修正这一点。在askeet/apps/frontend/templates/layout.php文件中,修改我们在今天的指南开始时所修改的代码:

<?php if ($sf_user->isAuthenticated()): ?>
<li><?php echo link_to('sign out', 'user/logout') ?></li>
<li><?php echo link_to($sf_user->getAttribute('nickname', '', 'subscriber').' profile', 'user/profile') ?></li>
<?php else: ?>
<li><?php echo link_to('sign in/register', 'user/login') ?></li>
<?php endif ?>

现在是时候进行测试了,我们可以显示程序的任何一页,点击'login'链接,输入一个可用的昵称('anonymous'为例)并且进行验证。如果窗口顶部的'login'变为'sign out',则我们所做的一切都是正确的。最后,试着注销来查看'login'链接是否再次出现。

问题组织

随着数以千计的Symfony爱好者访问askeet网站,在主页上显示的问题就会逐渐变多。为了避免变慢的请求速度,问题列的随意翻阅就成为必须解决的问题。

Symfony为这一目的提供了一个对象:sfPropelPager。他会封装到数据的请求,从而只会查询当前页面所显示的记录。例如,如果一个页面初始化时每页只显示10个问题,则到数据的请求只会限制为10个结果,并且会设置偏移来在页面中进行匹配。

修改question/list动作

在第三天的练习中,我们看到了问题模块的显示动作:

public function executeList ()
{
$this->questions = QuestionPeer::doSelect(new Criteria());
}

我们将会修改这个动作来向模板传递一个sfPropelPager而不是传递一个数组。同时,我们会依据感兴趣的数量来对问题进行排序:

public function executeList ()
{
$pager = new sfPropelPager('Question', 2);
$c = new Criteria();
$c->addDescendingOrderByColumn(QuestionPeer::INTERESTED_USERS);
$pager->setCriteria($c);
$pager->setPage($this->getRequestParameter('page', 1));
$pager->setPeerMethod('doSelectJoinUser');
$pager->init();

$this->question_pager = $pager;
}

sfPropelPager对象的初始化指明了他包含哪个对象类,以及在一个页面中可以放置的对象的最大数目(在这个例子中为2)。->setPage()方法使用一个请求参数来设置当前页面。例如,如果这个页面参数的值为2,sfPropelPager将会返回3到5的结果。页面请求参数的值变为1,则页面默认会返回1到2的结果。我们可以在Symfony一书的页面章节中了解到关于sfPropelPager对象及其方法的更多信息。

使用一个默认参数

将常量放在我们所使用的配置文件中是一个好主意。例如,每页的结果(在这个例子为2)可以由一个在我们自定义的程序配置中的参数来代替。用下面的代码来改变上面的sfPropelPager行:

..
$pager = new sfPropelPager('Question', sfConfig::get('app_pager_homepage_max'));

这里的pager关键字是作为名字空间使用的,这也就是为什么在参数名字中出现的原因。我们可以在Symfony一书的配置一节中查看到更多的关于自定义配置与命名自定义参数规则的更多的内容。

修改listSuccess.php模板

在listSuccess.php模板中,将下面的代码行:

<?php foreach($questions as $question): ?>

替换为

<?php foreach($question_pager->getResults() as $question): ?>

从而页面显示存储在页面中的结果列表。

添加页面浏览

在这个模板中还需要做另外一件事:页面浏览。现在,模板所做的只是显示前两个问题,但是我们应添加到下一个页面的功能,以及回到前一个页面的功能。要完成添加这些功能,我们需要在模板后面添加下面的代码:

<div id="question_pager">
<?php if ($question_pager->haveToPaginate()): ?>
<?php echo link_to('&laquo;', 'question/list?page=1') ?>
<?php echo link_to('&lt;', 'question/list?page='.$question_pager->getPreviousPage()) ?>

<?php foreach ($question_pager->getLinks() as $page): ?>
<?php echo link_to_unless($page == $question_pager->getPage(), $page, 'question/list?page='.$page) ?>
<?php echo ($page != $question_pager->getCurrentMaxLink()) ? '-' : '' ?>
<?php endforeach; ?>

<?php echo link_to('&gt;', 'question/list?page='.$question_pager->getNextPage()) ?>
<?php echo link_to('&raquo;', 'question/list?page='.$question_pager->getLastPage()) ?>
<?php endif; ?>
</div>

这段代码利用了sfPropelPager对象的各种方法,以及->haveToPaginate(),这个函数只有在请求的结果数目超过了页面尺寸时才会返回真;而->getPreviousPage(),->getNextPage(),->getLastPage()都具有明显示的意义;->getLinks()函数提供了一个页面号的数组;而->getCurrentMaxLink()函数返回最后的页面号。

这个例子同时显示了一个Symfony链接帮助器:link_to_unless()会在作为第一个参数的测试为假的情况下输出一个常规link_to(),否则会输出一个非链接的文本,并使用简单的<span>包装。

我们测试这个页面了吗?我们应进行测试。直到我们用我们自己的眼睛来验证,这个修改才算结束。要进行测试,打开在第三天所创建的测试数据文件,并且为要显示的页面浏览添加一些问题。重新运行导入数据批处理文件,然后再一次请求主页。

为子页添加路由规则

默认情况下,页面规则如下:

http://askeet/frontend_dev.php/question/list/page/XX

现在我们利用路由规则使用这些页面更易于理解:

http://askeet/frontend_dev.php/index/XX

打开apps/frontend/config/routing.yml文件并且在顶部添加下面内容:

popular_questions:
url: /index/:page
param: { module: question, action: list }

并且为登陆页面添加另外的路由规则:

login:
url: /login
param: { module: user, action: login }

重构

模型

question/list动作执行与模型相关的代码,这也就是我们为什么要将这些代码移动到模块中的原因。用下面的代码来代替question/list动作:

public function executeList ()
{
$this->question_pager = QuestionPeer::getHomepagePager($this->getRequestParameter('page', 1));
}

并且在lib/model中的QuestionPeer.php类中添加下面的方法:

public static function getHomepagePager($page)
{
$pager = new sfPropelPager('Question', sfConfig::get('app_pager_homepage_max'));
$c = new Criteria();
$c->addDescendingOrderByColumn(self::INTERESTED_USERS);
$pager->setCriteria($c);
$pager->setPage($page);
$pager->setPeerMethod('doSelectJoinUser');
$pager->init();

return $pager;
}

同样的想法也适用于我们昨天编写的question/show动作:Propel对象由其剥离的标题取回问题的用法应属于这个模块。所以用下面的代码来变更question/show动作代码:

public function executeShow()
{
$this->question = QuestionPeer::getQuestionFromTitle($this->getRequestParameter('stripped_title'));

$this->forward404Unless($this->question);
}

在QuestionPeer.php文件中添加下面的代码:

public static function getQuestionFromTitle($title)
{
$c = new Criteria();
$c->add(QuestionPeer::STRIPPED_TITLE, $title);

return self::doSelectOne($c);
}

模板

在question/templates/listSuccess.php中显示的问题列表在将来的某些地方还会用到。所以我们将显示问题列表的模板代码放在一个_list.php片段中,并且用下面的简单代码来代替listSuccess.php的内容:

<h1>popular question</h1>

<?php echo include_partial('list',array('question_pager'=>$question_pager)) ?>

明天见
分享到:
评论

相关推荐

    第2部分-动态JSF表单

    在本资源包“第2部分-动态JSF表单(CSS、JavaScript和JSF联合打造 Ajax应用程序)”中,我们深入探讨了如何利用这三种技术来创建动态、交互式的Web应用程序。这一部分着重于Ajax(异步JavaScript和XML)的应用,通过...

    学成在线-第3天-讲义-CMS页面管理开发v1.21

    在“学成在线-第3天-讲义-CMS页面管理开发v1.21”中,我们探讨了如何实现CMS(内容管理系统)页面管理的查询功能,特别是涉及自定义条件查询,包括服务端的数据处理和前端与服务端的交互。 1. **自定义条件查询** ...

    泛微OA-E9流程表单前端接口API(V21).pdf

    泛微OA系统是泛微网络科技股份有限公司开发的协同办公软件,E9版本是对之前版本的优化与升级,支持企业工作流程的数字化管理。在E9版本中,流程表单前端接口API是整个系统中用于前端开发和自定义表单功能的重要组成...

    HTML5响应式客户留言信息表单页面模板.zip

    HTML5是超文本标记语言(HTML)的第五次重大修订,引入了许多新的元素和功能,以增强网页的结构化和交互性。例如,`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`等语义化标签,提高了页面内容的可读性和可访问性。此外,HTML5还...

    NCV61-自由表单技术红皮书

    ### 第五章 表单历史 本章可能涉及: 1. **表单查询**:如何追踪和检索表单的历史版本,以便审计和问题排查。 2. 数据版本控制:可能包含对多版本表单数据的管理,以及回溯到旧版本的能力。 ### 第六章 表单打印 这...

    7-1 表单处理上.zip

    7. **CSRF(跨站请求伪造)防护**:为了防止恶意第三方利用用户已登录的身份提交表单,开发者通常会添加CSRF令牌,确保表单提交源于预期的页面和用户。 8. **Ajax异步提交**:通过JavaScript的Ajax技术,可以实现...

    jQuery动画特效---精通JavaScript+jQuery

    第5课 - DOM模型 - [精通JavaScript+jQuery] JavaScript开发进阶 第6课 - JavaScript事件 - [精通JavaScript+jQuery] 第7课 - 表格与表单 - [精通JavaScript+jQuery] 第8课 - Javascript调试与优化 - [精通...

    2.web表单使用及登录页面实现1

    - `CSRF_ENABLED = True`:这会开启跨站点请求伪造(Cross-Site Request Forgery,简称CSRF)保护,防止恶意第三方提交表单数据。 - `SECRET_KEY = 'you-will-never-guess'`:这是用于CSRF令牌加密的密钥,用于...

    前端学习第二天-20161030

    ### 前端学习第二天-20161030 #### HTML文档结构 **一、Meta标签用法** 1. **设置网页关键字(用于SEO)** ```html 页面的关键字"&gt; ``` - **作用**:此标签用于定义网页的关键字,对搜索引擎优化(SEO)十分...

    第七章 JavaScript表单编程

    JavaScript表单编程是Web开发中的核心技能之一,它允许开发者获取用户在网页表单中输入的数据并进行验证,从而提供良好的交互体验。本章主要涵盖了以下几个关键知识点: 1. **脚本访问表单**: - 通过`document....

    PHP表单生成器,快速生成现代化的form表单

    5. 省市区三级联动(Province-City-District Cascade):用于地理信息选择,自动根据前两级选择更新第三级选项。 6. 时间选择(Time Picker):用户可以选择精确到分钟的时间。 7. 日期选择(Date Picker):用户...

    我做的第一个表单

    5. **decorators.xml** - 与sitemesh.xml类似,这可能包含了更多关于页面装饰器的配置,比如定义特定页面使用的装饰模板。 6. **images** - 这是一个目录,通常包含用于美化表单的图片资源,如按钮、图标等。 7. *...

    uni-app通用注册页面,静态页面,二次开发

    综上所述,uni-app通用注册页面涉及的技术点包括前端框架uni-app、Vue.js的基础知识、表单设计与验证、网络请求、错误处理、路由管理、UI组件使用、状态管理和跨平台适配等。开发者可以通过这两个注册页面模板,结合...

    使用CSS控制表单-制作会员注册页面.pdf

    设计要求】登录页面是用户与网站交互的关键环节,设计时需考虑以下几点: 1. 简洁明了:登录界面应该清晰、简洁,让用户一眼就能找到输入用户名和密码的字段。 2. 提示信息:提供清晰的输入提示,如用户名和密码的...

    Web表单设计 Web Form Design

    - **表单设计的重要性**(第5页):阐述了良好的表单设计对于用户体验的重要性。 - **表单设计的影响**(第16页):详细讨论了优秀表单设计对用户行为和网站转化率的影响。 - **设计考虑因素**(第27页):提供了...

    弹出层表单提交数据完美解决

    - **CSRF 攻击防护**:在表单提交时添加CSRF令牌,防止未经授权的第三方提交表单。 - **数据加密**:敏感信息如密码应使用哈希算法加密存储,以增强数据安全性。 6. **前端框架集成**: 如果项目使用React、Vue...

    layui form表单提交之后重新加载数据表格的方法

    通过返回`false`,我们可以让表单提交时不会导致页面跳转,而是执行我们自定义的AJAX请求来与服务器交互,并刷新表格。 ###知识点五:实际应用与官方文档的参考 在文章的最后,提到了两个重要的参考资料:layui...

    javascript弹出层表单提交代码

    JavaScript弹出层表单提交是一种常见的用户交互设计,它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能,提供了良好的用户体验,因为用户无需跳转到新页面...

Global site tag (gtag.js) - Google Analytics