【军哥谈CI框架】之制作简单留言板的例子

亲们，好久不见了，军哥可想死你们了！最近都比较忙吧，军哥亦是如此哦，首先忙于学习，不断让学习成为一种信仰，一种习惯；接着是忙于运动，生命在于生生不息嘛，军哥在这里表达的不是生命在于运动，否则成天运动的运动员都个个长寿了，而一动不动的乌龟就不会活很久了。其实生命真正的关键在于平衡，在于气血的流通，所以呐，军哥为了活络活络自己脆弱的不能再脆弱的筋骨，毅然而决然的加入到健身的的人群当中，通过近期的锻炼，效果还是很不错滴，精神面貌等有了很大的改良；还有就是“忙“于爱情，不得不感叹一声“众里寻她千百度，那人却在灯火阑珊处”，军哥单身了这么多年，这回连老天也看不下去了，终于让我寻觅到了一位”冤家“，改天介绍亲们认识哈，嘻嘻~~。

完了，完了，居然跑题了~~ 我们还是言归正传吧。

对于初学者学习php，其实做留言板是一个最好的实践项目。同样，学习CI亦是如此，把做留言板的整个流程弄清楚了，也就能够更好的深入学习其他复杂的项目。别小看一个留言板额，”麻雀虽小，五脏俱全“。注册、登录、验证码、回复、分类还有数据库的增删查改操作都会涉及到的。不过这一回嘛，暂时还没有这么齐全，只是制作了一个简单的留言板，包括了留言及留言回复以及分页等（通过Ajax技术实现），军哥在后面的分享当中还会再写一个功能齐全的留言板。
代码示例 CI_message.rar 更多请访问军哥个人主页:www.handsomeboy.sinaapp.com

一、先给大家看一下效果图（有图有真相这话可不是盖的哟）：
1、初始效果

2、留言验证效果

3、留言成功效果

4、点击回复留言效果

5、点击更多效果

二、模型(即Model)
留言表Model:

class M_message extends CI_Model {
//获取留言信息
function get($num) {
$data = '';
$this->db->select('id,name,email,website,picture,content,posttime,show');
$this->db->order_by('posttime','asc');
$data = $this->db->get_where('message', array('show' => 1),$num);
return $data;
}
// 插入留言信息
function insert() {
$data = array(
'posttime' => time(),
'name' => $this->input->post('name'),
'content' => $this->input->post('content'),
);
$this->db->insert('message', $data);
return $this->db->insert_id();
}
// 统计留言数量
function count() {
$data = '';
$this->db->where('show', 1);
$data = $this->db->count_all_results('message');
return $data;
}
}

回复表Model：

class M_reply extends CI_Model {
//获取某一条留言的回复信息
function get($postId) {
$data = '';
$this->db->select('id,postId,content,name,replyTime,show');
$this->db->order_by('replyTime','desc');
$data = $this->db->get_where('reply', array('show' => 1,'postId'=> $postId));
return $data;
}
// 插入留言信息
function insert() {
$data = array(
'postId' => $this->input->post('postId'),
'name' => $this->input->post('name'),
'content' => $this->input->post('content'),
'replyTime' => time(),
);
$this->db->insert('reply', $data);
return $this->db->insert_id();
}
// 统计某一条留言的回复数量
function count($postId) {
$data = '';
$this->db->where(array('show' => 1,'postId' => $postId));
$data = $this->db->count_all_results('reply');
return $data;
}
}

三、控制器（controllers ）

class message extends CI_Controller {
// 构造函数
function __construct() {
parent::__construct();
//配置文件获取应用根目录
$this->base_url = $this->config->item("base_url");
//加载留言表Model
$this->load->model('M_message');
//加载回复表Model
$this->load->model('M_reply');
}
//显示留言表页
function index() {
$data['base_url'] = $this->base_url;
$data['yourName'] = "JayJun";
$data['megnumRow'] = $this->M_message->count();
$this->load->view("message_index",$data);
}
//执行添加留言或回复操作
function insert($type) {
switch($type) {
//执行添加留言操作
case "message":
if ($this->M_message->insert() > 0)
{
echo "yes";
}
else
{
echo "no";
}
break;
//执行添加回复操作
case "reply":
if ($this->M_reply->insert() > 0)
{
echo "yes";
}
else
{
echo "no";
}
break;
}
}
//Ajax加载留言和回复信息
function receive($num){
//获取留言信息
$query = $this->M_message->get($num);
$data['megnumRow'] = $this->M_message->count();
//获取回复信息
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
//取回复记录
$query1 = $this->M_reply->get($row->id);
if($query1->num_rows() > 0)
{
foreach($query1->result() as $row1)
{
$row->reply_row[] = $row1;
}
}
$row->num = $this->M_reply->count($row->id);
$data['meg_row'][] = $row;
}
}
$data['base_url'] = $this->base_url;
$this->load->view("message_receive",$data);
}
}

四、视图（views）
message_index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>在CI框架中，JQuery+Ajax实现一个简单的留言板例子</title>
<link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/page.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/Validform_v4.0_min.js"></script>
<script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ajax3.0.js"></script>
</head>
<body>
<div id="main">
<h1 class="tc mt20 form-actions"><?php echo $yourName; ?>的留言板</h1>
<form class="form-horizontal" id="megform">
<fieldset>
<legend class="fb">写下你的留言：</legend>
<div class="control-group">
<label class="control-label fb" for="name">姓名<span class="red">*</label>
<div class="controls">
<input type="text" class="input-big h20 span2" id="name" name="name" nullmsg="请输入姓名！" datatype="s6-18" errormsg="姓名至少6个字符,最多18个字符！">

<div class="controls">
<span class="Validform_checktip">
<div class="control-group">
<label class="control-label fb" for="content">内容<span class="red">*</label>
<div class="controls">
<textarea id="content" tip="请在这里输入您想说的。" altercss="gray" name="content" rows="5" cols="40" nullmsg="请输入留言内容！" datatype="*5-100" errormsg="至少5个字符！最多100个字符！"></textarea>
<div class="controls">
<span class="Validform_checktip">
</fieldset>
</form>
<div class="form-actions">
<input type="button" class="btn btn-primary ml100" id="meg_sub" value="提交留言" />
<div class="form-horizontal" id="message_list">
<div class="modal hide fade in" id="TipModal">
<div class="modal-header">
<a class="close js_close">×
<h3 class="red">提示</h3>
<div class="modal-body">
亲，没有内容可显示了哦~
<div id="footer" class="alert red h25 mt100">
</body>
<script>
$(function(){
//定义默认显示留言个数，这里初始化值为2
var num = 2;
//实现留言板验证
$("#megform").Validform({
btnSubmit:"#meg_sub",
tiptype:2,
});
//触发留言提交事件
$("#meg_sub").click(function(){
//获取留言表单的名称和留言内容
var name = $("#name").val();
var content = $("#content").val();
//ajax方式提交留言内容
if(name != "" && content!=""){
var ajax = new Ajax();
ajax.post("<?php echo site_url('message/insert/message');?>",{name:name,content:content},function(data){
if(data == "yes"){
receive();
}
});
}
});
//初始化留言和回复信息
receive();
//调用留言控制器的receive方法，获取所有留言信息
function receive(){
var ajax = new Ajax();
ajax.get("<?php echo site_url('message/receive/');?>/" + num,function(data){
$("#loadMore").html("Loading...");
//设置留言内容
$("#message_list").html(data);
//点击更多留言后会增加3条留言个数
num = num + 3;
$("#loadMore").click(function(){
receive();
});
$("#loadMore").attr('href','javascript:receive(' + num + ')');
$("#loadMore").html("显示更多");
//如果没有更多内容提示，则弹出提示框，并屏蔽点击事件
var maxNum = <?php echo $megnumRow; ?> + 3;
if(num > maxNum && maxNum > 5){
$('#TipModal').show();//显示提示框
$("#loadMore").attr('href','javascript:void(0)');
$("#loadMore").attr('title','点击隐藏更多显示');
$("#loadMore").addClass('js_close');
$("#loadMore").html("隐藏更多");
num = 2;
}
//实现回复留言验证
$(".replyform").Validform({
btnSubmit:".reply_sub",
tiptype:2,
});
});
}
//触发点击关闭提示框事件
$('.js_close').live('click',function(){
$('#TipModal').hide();
});
//触发回复点击事件
$(".reply").live('click',function(){
$(this).parent().next().slideToggle(100);
});
//触发回复提交事件
$(".reply_sub").live('click',function(){
//获取回复表单的姓名和内容以及所回复的留言ID
var postId = $(this).parent().siblings().children(".postId").val();
var content = $(this).parent().siblings().children(".content").val();
var name = $(this).prev(".name").val();
//ajax方式提交回复内容
if(name != "" && content != ""){
var ajax = new Ajax();
ajax.post("<?php echo site_url('message/insert/reply');?>",{postId:postId,name:name,content:content},function(data){
if(data == "yes"){
num = 2;
receive();
}
});
}
});
})
</script>
</html>
message_receive.php:
1. <h3>留言<i>(<?php echo $megnumRow; ?>)</i>：</h3>
2. <?php if($megnumRow > 0){ $count=1;?>
3. <div class="control-group">
4. <ul class="controls unstyled w600">
5. <?php foreach($meg_row as $item):?>
6. <li class="fr"><?php echo $count++; ?>楼
7. <li class="mt10">
8. <?php echo $item->content; ?>
9. <li class="mt5">
10. <span class="fb"><?php echo $item->name; ?>
11. | 发表于<?php echo date("Y-m-d h:i:s",$item->posttime); ?>
12. <a οnclick="#" class="pl10 reply" >[回复]
13. <li class="none mt10">
14. <div class="form-horizontal replyform">
15. <input type="hidden" class="postId" value="<?php echo $item->id; ?>" />
16. <textarea class="content" altercss="gray" nullmsg="请输入留言内容！" datatype="*5-32" errormsg="至少5个字符,最多32个字符！" ></textarea>
17. <span class="Validform_checktip">
18. <input type="text" class="name h25 input-small" nullmsg="请输入姓名！" datatype="s6-18" errormsg="姓名至少6个字符,最多18个字符！">
19. <input type="button" class="reply_sub btn btn-danger" value="提交">
20. <span class="Validform_checktip">
<?php if($item->num > 0){ ?>
<ul class="unstyled pl20 mt10 alert-info w600">
<h4>回复<i>(<?php echo $item->num; ?>)</i>：</h4>
<?php foreach($item->reply_row as $items):?>
<?php echo $items->content; ?>
<li class="mt5">
<span class="fb"><?php echo $items->name; ?>
| 发表于
<?php echo date("Y-m-d h:i:s",$items->replyTime); ?>
<li class="dash">
<?php endforeach; ?>
</ul>
<?php } ?>
<li class="dash">
<?php endforeach; ?>
</ul>
<div class="tc w700 mb10">
<a id="loadMore" class="label label-info" href="javascript:receive()" title="点击显示更多留言">显示更多
<?php }else{ ?>
<div class="w600 tc red">还没有访客签写留言哦，您作为第一个访客留言吧！
<?php } ?>
五、应用
（1）、先下载附件，解压之后，拷贝到网站根目录下；
（2）、找到文件install.sql，建库建表；
（3）、修改配置文件CI_message/application/config/database.php，只需设置$db['default']['password'] ='你的数据库密码'; ，大概第10行；
（4）、直接在浏览器中输入http://localhost/CI_message即可访问。

原文地址：http://bbs.lampbrother.net/read-htm-tid-132305.html

<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>

阅读(82) | 评论(0) | 转发(0) |

0

上一篇：离散数学与计算机编程（一）命题函数

下一篇：在路上
相关热门文章
- 从支付宝全线放弃线下POS业务...
- 新浪微博，请让信息在关系链中...
- text段,data段,bss段,堆和栈 ...
- 纪念日的独白
- 女神答应做我女友的背后竟然是...
- IP Sec VPN与NAT破镜重圆
- 网站导航
- GoAgent图文设置教程
- UT2.0正式版下载
- tomcat6.0配置(含配置视频下载...
- 大家都是用什么来管理hadoop集...
- 网站被人挂了吗，添加了些程序...
- Nginx如何保证不走宕机的那个...
- 大家谈谈MYSQL客户端和服务器...
- 以下代码运行后为何会输出5?...
给主人留下些什么吧！~~

评论热议

【军哥谈CI框架】之制作简单留言板的例子相关推荐

编写Java 制作留言板_JSP+Servlet+JavaBean制作简单留言板
[实例简介] 本资源是一个简易留言板的代码,主要用了JSP+Servlet+JavaBean传统方式,实现登录.注册与留言的功能,内容仅供学习参考. 下载的文件肯定不能直接运行,需要自己配好服务器与环 ...
使用JavaScript DOM制作简单留言板
效果图: 先准备html代码: <body><textarea name="" id=""></textarea><b ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
用php制作网页留言板的分页
1.用php做一个简单的留言板用php做一个简单的留言板 2.用php制作网页留言板的分页效果图核心步骤: 使用limit限制从数据库查询条数: 根据页面a标签中的href?page在使用预定义 ...
基于javaweb+mysql的简单留言板
基于javaweb+mysql的简单留言板运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行适用课程设计, ...
php留言簿代码,php自治简单留言板代码
php自治简单留言板代码 $lianjie = mysql_connect("localhost","root","xiaolie") or ...
【CyberSecurityLearning 附】使用PHP语言搭建简单的论坛:注册功能实现+PHP个人中心设计+简单留言板
使用PHP语言搭建简单的论坛简单留言板留言个人中心登录验证码注册头像 ...
HTML5实现简单留言板1
简单留言板之前端最近参加培训,HTML学习也有一段时间了:感觉时间过得很快,,. 前端的开发还是有利器的–HBuilder 首先看下自动生成的模块: <!DOCTYPE html> &l ...

【军哥谈CI框架】之制作简单留言板的例子

【军哥谈CI框架】之制作简单留言板的例子相关推荐

最新文章

热门文章