数据绑定表单,前台提交数据


任何数据库驱动的应用程序(Couch 恰好是其中之一)基本上只包含四个基本操作 -
创建读取更新删除(众所周知的 CRUD)。

而目前位置,只公开了一个 pages标签,读取。

向前端开放CRUD可以干很多事情,

- 允许访问者提交文章或职位发布等内容。
- 允许访问者提交他们的评论和评级。
 -允许一组注册用户创建/管理他们自己的页面。

Couch通过简单的方法把创建/更新/删除功能带到前端使用,强大的力量伴随着巨大的责任,Couch 还为您提供所有必要的安全工具,以安全地实现这种新发现的力量的潜力。

真实案例操作

警告:接下来的讨论假设您已经熟悉 Couch 的表单可编辑区域概念。
如果您是 Couch 的新手,请花一些时间先学习一下,因为这里讨论的所有新功能都建立在它们之上。

在我们开始我们的小教程之前,需要先完成一个小准备步骤。
由于并非所有部署 Couch 的站点都需要数据绑定表单功能,尽管 Couch 附带该模块,但默认情况下不启用它。
要启用此模块,请编辑“couch/addons”文件夹中的“kfunctions.php”文件并取消注释(如果从旧版本升级,则添加)以下行

require_once( K_COUCH_DIR.'addons/data-bound-form/data-bound-form.php' );

我们教程中的代码还将利用cms:set_flash标签来设置表示表单提交成功的 flash 消息。这将需要启用“会话”模块,因此也取消注释以下行(如果尚未如此)

require_once( K_COUCH_DIR.'addons/cart/session.php' );

启用所需的模块后,我们终于可以开始了。

假设我有一个留言板,标题,内容,电话三个字段,把留言提交到后台我们需要两个东西:
- 前端提交表单。
- 可以接收留言的后端数据库。

如果我们暂时忽略对提交的前端数据进行保存的目的,我们可以看到 Couch 已经可以用于独立实现这两个部分中的每一个。
- cms:formcms:input标签来实现前端表单。
- 带有cms:editable标签的可克隆模板,用于保存数据。

但是很明显的问题,这两个没有联系。
Couch数据绑定表单功能可以很简单的解决此问题,下面见识一下“绑定”二字的真正威力。
一个极简的留言表单如下:

<form method="post">
    <input type='text' name='title' />
    <input type='text' name='tel' />
    <input type='textatea' name='content' />
</form>

再创建和注册一个后台的可编辑的克隆模板,假设命名为:feedback.php,和前端数据对应的主要结构代码应该如下:

<cms:template title='留言板' clonable='1'>
    <cms:editable name='title' desc='标题' required='1' type='text' />
    <cms:editable name='tel' desc='电话' required='1' type='text' />
    <cms:editable name='content' desc='留言内容' required='1' type='textarea' />
</cms:template>

我们把前端表单使用couch语义转换过来,这是及其简单的工作:

<cms:set submit_success="<cms:get_flash 'submit_success' />" />
<cms:if submit_success >
    <h4>Success: Your application has been submitted.</h4>
</cms:if>
<cms:form method='post' anchor='0'>
    <cms:if k_success >
        <cms:set_flash name='submit_success' value='1' />
        <cms:redirect k_page_link />
    </cms:if>
    <cms:if k_error >
        <div class="error">
            <cms:each k_error >
                <br><cms:show item />
            </cms:each>
        </div>
    </cms:if>

    <cms:input name="title" type="text" />
    <cms:input name="tel" type="text" />
    <cms:input name="content" type="text" />
    
    <cms:if "<cms:not submit_success />" >
        <button type="submit">Submit Application</button>
    </cms:if>
</cms:form>

 注意到最后一个content字段了吗,原来是textarea,转化后是text,这同行适用于select, radio, checkbox等,这是故意为之,稍后将看到这背后的逻辑所在。

绑定

修改form标签
前:

<cms:form method='post' anchor='0'>

后:

<cms:form masterpage=k_template_name mode='create' enctype='multipart/form-data' method='post' anchor='0'>

加了一堆标签和值,用于表单提交。
这里的关键变化是“masterpage”参数。通过指定此参数,我们让表单知道它不再是常规表单,而是“数据绑定”表单(绑定到指定为母版页的模板)。
另一个感兴趣的参数是“mode”。它可以采用两个可能的值,“edit”和“create”。但是,对于我们的本教程,我们将其硬编码为“create”,因为我们只会使用我们的表单来创建新的克隆页面,而不会用于编辑现有页面。

字段值的绑定改造:
前:

<cms:input name="title" type="text" />
<cms:input name="tel" type="text" />
<cms:input name="content" type="text" />

后:

<cms:input name="title" type="bound" />
<cms:input name="tel" type="bound" />
<cms:input name="content" type="bound" />

前端字段全部变成了bound类型,刷新前端后发现尽管前端全部为bound类型,但是textarea呈现的样式依旧是textarea,它调取到了后端的“可编辑区域”的类型,一一对应,同样适用于select,radio,checkbox。
每个渲染都与它在管理面板中所做的完全一样,这就是“数据绑定”中的“绑定”。