当前位置： 代码迷 >> Web前端 >> 【军哥聊CI框架】之制作简单留言板的例子
  详细解决方案

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

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

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

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

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

2、留言验证效果

3、留言成功效果

4、点击回复留言效果

5、点击更多效果

二、模型(即Model)
留言表Model:
  1. class M_message extends CI_Model {
  2. //获取留言信息
  3. function get($num) {
  4. $data = '';
  5. $this->db->select('id,name,email,website,picture,content,posttime,show');
  6. $this->db->order_by('posttime','asc');
  7. $data = $this->db->get_where('message', array('show' => 1),$num);
  8. return $data;
  9. }
  10. // 插入留言信息
  11. function insert() {
  12. $data = array(
  13. 'posttime' => time(),
  14. 'name' => $this->input->post('name'),
  15. 'content' => $this->input->post('content'),
  16. );
  17. $this->db->insert('message', $data);
  18. return $this->db->insert_id();
  19. }
  20. // 统计留言数量
  21. function count() {
  22. $data = '';
  23. $this->db->where('show', 1);
  24. $data = $this->db->count_all_results('message');
  25. return $data;
  26. }
  27. }

回复表Model：
  1. class M_reply extends CI_Model {
  2. //获取某一条留言的回复信息
  3. function get($postId) {
  4. $data = '';
  5. $this->db->select('id,postId,content,name,replyTime,show');
  6. $this->db->order_by('replyTime','desc');
  7. $data = $this->db->get_where('reply', array('show' => 1,'postId'=> $postId));
  8. return $data;
  9. }
  10. // 插入留言信息
  11. function insert() {
  12. $data = array(
  13. 'postId' => $this->input->post('postId'),
  14. 'name' => $this->input->post('name'),
  15. 'content' => $this->input->post('content'),
  16. 'replyTime' => time(),
  17. );
  18. $this->db->insert('reply', $data);
  19. return $this->db->insert_id();
  20. }
  21. // 统计某一条留言的回复数量
  22. function count($postId) {
  23. $data = '';
  24. $this->db->where(array('show' => 1,'postId' => $postId));
  25. $data = $this->db->count_all_results('reply');
  26. return $data;
  27. }
  28. }

三、控制器（controllers）
  1. class message extends CI_Controller {
  2. // 构造函数
  3. function __construct() {
  4. parent::__construct();
  5. //配置文件获取应用根目录
  6. $this->base_url = $this->config->item("base_url");
  7. //加载留言表Model
  8. $this->load->model('M_message');
  9. //加载回复表Model
  10. $this->load->model('M_reply');
  11. }
  12. //显示留言表页
  13. function index() {
  14. $data['base_url'] = $this->base_url;
  15. $data['yourName'] = "JayJun";
  16. $data['megnumRow'] = $this->M_message->count();
  17. $this->load->view("message_index",$data);
  18. }
  19. //执行添加留言或回复操作
  20. function insert($type) {
  21. switch($type) {
  22. //执行添加留言操作
  23. case "message":
  24. if ($this->M_message->insert() > 0)
  25. {
  26. echo "yes";
  27. }
  28. else
  29. {
  30. echo "no";
  31. }
  32. break;
  33. //执行添加回复操作
  34. case "reply":
  35. if ($this->M_reply->insert() > 0)
  36. {
  37. echo "yes";
  38. }
  39. else
  40. {
  41. echo "no";
  42. }
  43. break;
  44. }
  45. }
  46. //Ajax加载留言和回复信息
  47. function receive($num){
  48. //获取留言信息
  49. $query = $this->M_message->get($num);
  50. $data['megnumRow'] = $this->M_message->count();
  51. //获取回复信息
  52. if($query->num_rows() > 0)
  53. {
  54. foreach($query->result() as $row)
  55. {
  56. //取回复记录
  57. $query1 = $this->M_reply->get($row->id);
  58. if($query1->num_rows() > 0)
  59. {
  60. foreach($query1->result() as $row1)
  61. {
  62. $row->reply_row[] = $row1;
  63. }
  64. }
  65. $row->num = $this->M_reply->count($row->id);
  66. $data['meg_row'][] = $row;
  67. }
  68. }
  69. $data['base_url'] = $this->base_url;
  70. $this->load->view("message_receive",$data);
  71. }
  72. }

四、视图（views）
message_index.php:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5. <title>在CI框架中，JQuery+Ajax实现一个简单的留言板例子</title>
  6. <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
  7. <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/page.css" type="text/css" />
  8. <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
  9. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/jquery-1.7.1.min.js"></script>
  10. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/Validform_v4.0_min.js"></script>
  11. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ajax3.0.js"></script>
  12. </head>
  13. <body>
  14. <div id="main">
  15. <h1 class="tc mt20 form-actions"><?php echo $yourName; ?>的留言板</h1>
  16. <!-- 留言表单开始 -->
  17. <form class="form-horizontal" id="megform">
  18. <fieldset>
  19. <legend class="fb">写下你的留言：</legend>
  20. <div class="control-group">
  21. <label class="control-label fb" for="name">姓名<span class="red">*</span></label>
  22. <div class="controls">
  23. <input type="text" class="input-big h20 span2" id="name" name="name" nullmsg="请输入姓名！" datatype="s6-18" errormsg="姓名至少6个字符,最多18个字符！">
  24. </div>
  25. <div class="controls">
  26. <span class="Validform_checktip"></span>
  27. </div>
  28. </div>
  29. <div class="control-group">
  30. <label class="control-label fb" for="content">内容<span class="red">*</span></label>
  31. <div class="controls">
  32. <textarea id="content" tip="请在这里输入您想说的。" altercss="gray" name="content" rows="5" cols="40" nullmsg="请输入留言内容！" datatype="*5-100" errormsg="至少5个字符！最多100个字符！"></textarea>
  33. </div>
  34. <div class="controls">
  35. <span class="Validform_checktip"></span>
  36. </div>
  37. </div>
  38. </fieldset>
  39. </form>
  40. <div class="form-actions">
  41. <input type="button" class="btn btn-primary ml100" id="meg_sub" value="提交留言" />
  42. </div>
  43. <!-- 留言表单结束 -->
  45. <!-- 留言内容显示开始 -->
  46. <div class="form-horizontal" id="message_list">
  49. </div>
  50. <!-- 留言内容显示结束 -->
  51. </div>
  52. <!-- 提示框开始 -->
  53. <div class="modal hide fade in" id="TipModal">
  54. <div class="modal-header">
  55. <a class="close js_close">×</a>
  56. <h3 class="red">提示</h3>
  57. </div>
  58. <div class="modal-body">
  59. <p>亲，没有内容可显示了哦~</p>
  60. </div>
  61. </div>
  62. <!-- 提示框结束 -->
  63. <div id="footer" class="alert red h25 mt100">
  64. <p class="tc">?2011-2012 JayJun All Rights Reserved</p>
  65. </div>
  66. </body>
  67. <script>
  68. $(function(){
  69. //定义默认显示留言个数，这里初始化值为2
  70. var num = 2;
  71. //实现留言板验证
  72. $("#megform").Validform({
  73. btnSubmit:"#meg_sub",
  74. tiptype:2,
  75. });
  76. //触发留言提交事件
  77. $("#meg_sub").click(function(){
  78. //获取留言表单的名称和留言内容
  79. var name = $("#name").val();
  80. var content = $("#content").val();
  81. //ajax方式提交留言内容
  82. if(name != "" && content!=""){
  83. var ajax = new Ajax();
  84. ajax.post("<?php echo site_url('message/insert/message');?>",{name:name,content:content},function(data){
  85. if(data == "yes"){
  86. receive();
  87. }
  88. });
  89. }
  90. });
  91. //初始化留言和回复信息
  92. receive();
  93. //调用留言控制器的receive方法，获取所有留言信息
  94. function receive(){
  95. var ajax = new Ajax();
  96. ajax.get("<?php echo site_url('message/receive/');?>/" + num,function(data){
  97. $("#loadMore").html("Loading...");
  98. //设置留言内容
  99. $("#message_list").html(data);
  100. //点击更多留言后会增加3条留言个数
  101. num = num + 3;
  102. $("#loadMore").click(function(){
  103. receive();
  104. });
  105. $("#loadMore").attr('href','javascript:receive(' + num + ')');
  106. $("#loadMore").html("显示更多");
  107. //如果没有更多内容提示，则弹出提示框，并屏蔽点击事件
  108. var maxNum = <?php echo $megnumRow; ?> + 3;
  109. if(num > maxNum && maxNum > 5){
  110. $('#TipModal').show();//显示提示框
  111. $("#loadMore").attr('href','javascript:void(0)');
  112. $("#loadMore").attr('title','点击隐藏更多显示');
  113. $("#loadMore").addClass('js_close');
  114. $("#loadMore").html("隐藏更多");
  115. num = 2;
  116. }
  117. //实现回复留言验证
  118. $(".replyform").Validform({
  119. btnSubmit:".reply_sub",
  120. tiptype:2,
  121. });
  122. });
  123. }
  124. //触发点击关闭提示框事件
  125. $('.js_close').live('click',function(){
  126. $('#TipModal').hide();
  127. });
  128. //触发回复点击事件
  129. $(".reply").live('click',function(){
  130. $(this).parent().next().slideToggle(100);
  131. });
  132. //触发回复提交事件
  133. $(".reply_sub").live('click',function(){
  134. //获取回复表单的姓名和内容以及所回复的留言ID
  135. var postId = $(this).parent().siblings().children(".postId").val();
  136. var content = $(this).parent().siblings().children(".content").val();
  137. var name = $(this).prev(".name").val();
  138. //ajax方式提交回复内容
  139. if(name != "" && content != ""){
  140. var ajax = new Ajax();
  141. ajax.post("<?php echo site_url('message/insert/reply');?>",{postId:postId,name:name,content:content},function(data){
  142. if(data == "yes"){
  143. num = 2;
  144. receive();
  145. }
  146. });
  147. }
  148. });
  149. })
  150. </script>
  151. </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++; ?>楼</li>
  7. <li class="mt10">
  8. <?php echo $item->content; ?>
  9. </li>
  10. <li class="mt5">
  11. <span class="fb"><?php echo $item->name; ?></span>
  12. | 发表于<?php echo date("Y-m-d h:i:s",$item->posttime); ?>
  13. <a onclick="#" class="pl10 reply" >[回复]</a>
  14. </li>
  15. <li class="none mt10">
  16. <div class="form-horizontal replyform">
  17. <p>
  18. <input type="hidden" class="postId" value="<?php echo $item->id; ?>" />
  19. <textarea class="content" altercss="gray" nullmsg="请输入留言内容！" datatype="*5-32" errormsg="至少5个字符,最多32个字符！" ></textarea>
  20. </p>
  21. <p><span class="Validform_checktip"></span></p>
  22. <p>
  23. <input type="text" class="name h25 input-small" nullmsg="请输入姓名！" datatype="s6-18" errormsg="姓名至少6个字符,最多18个字符！">
  24. <input type="button" class="reply_sub btn btn-danger" value="提交">
  25. </p>
  26. <p><span class="Validform_checktip"></span></p>
  27. </div>
  28. </li>
  29. <li>
  30. <?php if($item->num > 0){ ?>
  31. <ul class="unstyled pl20 mt10 alert-info w600">
  32. <li><h4>回复<i>(<?php echo $item->num; ?>)</i>：</h4></li>
  33. <?php foreach($item->reply_row as $items):?>
  34. <li><?php echo $items->content; ?></li>
  35. <li class="mt5">
  36. <span class="fb"><?php echo $items->name; ?></span>
  37. | 发表于
  38. <?php echo date("Y-m-d h:i:s",$items->replyTime); ?>
  39. </li>
  40. <li class="dash"></li>
  41. <?php endforeach; ?>
  42. </ul>
  43. <?php } ?>
  44. </li>
  45. <li class="dash"></li>
  46. <?php endforeach; ?>
  47. </ul>
  48. </div>
  49. <div class="tc w700 mb10">
  50. <a id="loadMore" class="label label-info" href="javascript:receive()" title="点击显示更多留言">显示更多</a>
  51. </div>
  52. <?php }else{ ?>
  53. <div class="w600 tc red">还没有访客签写留言哦，您作为第一个访客留言吧！</div>
  54. <?php } ?>


五、应用
（1）、先下载附件，解压之后，拷贝到网站根目录下；
（2）、找到文件install.sql，建库建表；
（3）、修改配置文件CI_message/application/config/database.php，只需设置$db['default']['password'] ='你的数据库密码'; ，大概第10行；
（4）、直接在浏览器中输入http://localhost/CI_message即可访问。


  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.