在 phpWeChat 里创建表单的一些约定

表单提交是所有动态程序架构的项目的核心功能。比如:会员注册、会员登录、留言等都需要一个表单来提交我们的数据。

本章节的目的不是告诉你如何用 HTML 代码创建一个表单,而是告诉你一些在 phpWeChat 中创建表单的一些约定。

以留言系统为例:

在一般的项目中,我们可能会用如下代码来实现一个留言提交的表单和后端数据处理:

服务器端 post.php :

<?php

echo '您输入的留言标题是:'.$_POST['title'];

echo '您输入的留言内容是:'.$_POST['content'];

?>

客户端 index.html:

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="title">

<textarea name="content"></textarea>

<input type="submit" value="提交留言" />

</form>

</html>


在 phpWeChat 中,为了统一数据处理,我们约定,所有的表单提交不按照以上格式,而是按照如下格式:

服务器端 post.php :

<?php

echo '您输入的留言标题是:'.$info['title'];

echo '您输入的留言内容是:'.$info['content'];

?>

客户端 index.html:

<html>

<form action="get.php" method="post" name="myform">

<input type="text" name="info[title]">

<textarea name="info[content]"></textarea>

<input type="submit" value="提交留言" />

</form>

</html>


在 phpWeChat 系统中,所有 REQUEST 请求均经过处理,以上 $info 数组即可直接包含了提交的所有信息,而不用一个个进行 $_POST 赋值。

注意:info 只是我们示例的名称,您也可以修改为其他变量,对应的服务器端接收时做对应的更改即可。


 phpWeChat 里丰富的表单字段类型

如第1节中所示,我们可以用常规的 input 、select 、textarea等作为表单字段提交数据,但是在实际业务场景中,会有很多 html 本身没有的表单字段类型需要使用,例如:富文本编辑器、多图上传、地图标注、时间日期等。

phpWeChat 默认集成了常见的表单字段类型包括:富文本编辑器、时间日期、多图上传、附件上传、视频上传、地图标注等。

以下还以上面的表单为例:

在 phpWeChat 里创建一个富文本编辑器

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::baiduEditor('info','content','请输入您的内容')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::baiduEditor('info','content','请输入您的内容');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的富文本是:'.$info['content'];

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

<?php echo $info['content'];?>

</body>

</html

注解:Form 是 phpWeChat 已经封装好的类,在上述代码中,调用了这个类 baiduEditor() 方法,这个方法的三个参数意义分别指: 约定变量info(见第一节)、实际变量content、默认值。

在 phpWeChat 里创建一个多图上传

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::images('info','pics','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::images('info','pics','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

//由于多图上传是一个复杂的过程,提交后需要用  deformat_focus_img() 函数进行处理成可以存储的字符串

$info['pics']=deformat_focus_img('pics'); 

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的多图是:'.$info['pics'];

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

<?php 

$pics=format_focus_img($info['pics']);  // 注意读取从数据库取出的多图字段类型时,需要用format_focus_img() 函数转换成方便模板循环读取数组。

foreach($pics as $name => $url)

{

?>

<img src="<?php echo $url;?>" alt="<?php echo $name;?>" />

<br />

<?php

}

?>

</body>

</html


在 phpWeChat 里创建一个单图上传

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::image('info','pic','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::image('info','pic','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的单图是:'.$info['pic'];

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

<img src="<?php echo $info['pic'];?>" />

</body>

</html


在 phpWeChat 里创建一个附件上传

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::attachment('info','attach','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::attachment('info','attach','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的附件是:'.$info['attach'];

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

<a href="<?php echo $info['attach'];?>">下载附件</a>

</body>

</html


在 phpWeChat 里创建一个视频上传

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::video('info','video','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::video('info','video','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的视频是:'.$info['video'];

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

<video src="<?php echo $info['attach'];?>" controls="controls"></video>

</body>

</html


在 phpWeChat 里创建一个地图标注

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::map('info','map','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::map('info','map','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的地图坐标为:'.$info['map'];

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<style type="text/css">

#container{

    width:603px;

    height:300px;

}

</style>

<body>

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>

<script>

var init = function() {

    var map = new qq.maps.Map(document.getElementById("container"),{

        center: new qq.maps.LatLng(<?php echo $info['map'];?>),

        zoom: 13

    });

}

</script>

</body>

</html


在 phpWeChat 里创建一个日期控件(不带时间)

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::dateNoTime('info','postdate','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::dateNoTime('info','postdate','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的日期为:'.$info['postdate'];

echo '您的提交的日期Linux时间戳格式为:'.strtotime($info['postdate']);

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

日期:<?php echo date('Y-m-d',$info['postdate']);?>

</body>

</html


在 phpWeChat 里创建一个日期控件(带时间)

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::dateWithTime('info','posttime','')}   

 /** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::dateWithTime('info','posttime','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的日期为:'.$info['posttime'];

echo '您的提交的日期Linux时间戳格式为:'.strtotime($info['posttime']);

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

日期:<?php echo date('Y-m-d',$info['posttime']);?>

</body>

</html


在 phpWeChat 里创建一个日期控件(开始日期-截止日期)

<html>

<form action="post.php" method="post" name="myform">

<input type="text" name="info[title]">

{Form::dateTimeStartToEnd('info','time','')}    

/** phpWeChat 拥有自己的模板引擎 这句代码也可以用 <?php echo Form::dateTimeStartToEnd('info','time','');?> 替代 **/

<input type="submit" value="提交留言" />

</form>

</html>

服务器端接收:

<?php

echo '您的提交的标题是:'.$info['title'];

echo '您的提交的开始日期为:'.$info['starttime'];

echo '您的提交的开始日期Linux时间戳格式为:'.strtotime($info['starttime']);

echo '您的提交的截止日期为:'.$info['endtime'];

echo '您的提交的截止日期Linux时间戳格式为:'.strtotime($info['endtime']);

?>

视图模板显示:

<html>

<title><?php echo $info['title'];?></title>

<body>

开始日期:<?php echo date('Y-m-d',$info['starttime']);?>

截止日期:<?php echo date('Y-m-d',$info['endtime']);?>

</body>

</html>


本章节总结:phpWeChat 提供了以上 9 种拓展的字段类型,基本涵盖了大部分的业务场景。

最后更新:2016-06-08