当前位置: 代码迷 >> 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. <!-- 留言表单结束 -->
  44. <!-- 留言内容显示开始 -->
  45. <div class="form-horizontal" id="message_list">
  46. </div>
  47. <!-- 留言内容显示结束 -->
  48. </div>
  49. <!-- 提示框开始 -->
  50. <div class="modal hide fade in" id="TipModal">
  51. <div class="modal-header">
  52. <a class="close js_close">×</a>
  53. <h3 class="red">提示</h3>
  54. </div>
  55. <div class="modal-body">
  56. <p>亲,没有内容可显示了哦~</p>
  57. </div>
  58. </div>
  59. <!-- 提示框结束 -->
  60. <div id="footer" class="alert red h25 mt100">
  61. <p class="tc">?2011-2012 JayJun All Rights Reserved</p>
  62. </div>
  63. </body>
  64. <script>
  65. $(function(){
  66. //定义默认显示留言个数,这里初始化值为2
  67. var num = 2;
  68. //实现留言板验证
  69. $("#megform").Validform({
  70. btnSubmit:"#meg_sub",
  71. tiptype:2,
  72. });
  73. //触发留言提交事件
  74. $("#meg_sub").click(function(){
  75. //获取留言表单的名称和留言内容
  76. var name = $("#name").val();
  77. var content = $("#content").val();
  78. //ajax方式提交留言内容
  79. if(name != "" && content!=""){
  80. var ajax = new Ajax();
  81. ajax.post("<?php echo site_url('message/insert/message');?>",{name:name,content:content},function(data){
  82. if(data == "yes"){
  83. receive();
  84. }
  85. });
  86. }
  87. });
  88. //初始化留言和回复信息
  89. receive();
  90. //调用留言控制器的receive方法,获取所有留言信息
  91. function receive(){
  92. var ajax = new Ajax();
  93. ajax.get("<?php echo site_url('message/receive/');?>/" + num,function(data){
  94. $("#loadMore").html("Loading...");
  95. //设置留言内容
  96. $("#message_list").html(data);
  97. //点击更多留言后会增加3条留言个数
  98. num = num + 3;
  99. $("#loadMore").click(function(){
  100. receive();
  101. });
  102. $("#loadMore").attr('href','javascript:receive(' + num + ')');
  103. $("#loadMore").html("显示更多");
  104. //如果没有更多内容提示,则弹出提示框,并屏蔽点击事件
  105. var maxNum = <?php echo $megnumRow; ?> + 3;
  106. if(num > maxNum && maxNum > 5){
  107. $('#TipModal').show();//显示提示框
  108. $("#loadMore").attr('href','javascript:void(0)');
  109. $("#loadMore").attr('title','点击隐藏更多显示');
  110. $("#loadMore").addClass('js_close');
  111. $("#loadMore").html("隐藏更多");
  112. num = 2;
  113. }
  114. //实现回复留言验证
  115. $(".replyform").Validform({
  116. btnSubmit:".reply_sub",
  117. tiptype:2,
  118. });
  119. });
  120. }
  121. //触发点击关闭提示框事件
  122. $('.js_close').live('click',function(){
  123. $('#TipModal').hide();
  124. });
  125. //触发回复点击事件
  126. $(".reply").live('click',function(){
  127. $(this).parent().next().slideToggle(100);
  128. });
  129. //触发回复提交事件
  130. $(".reply_sub").live('click',function(){
  131. //获取回复表单的姓名和内容以及所回复的留言ID
  132. var postId = $(this).parent().siblings().children(".postId").val();
  133. var content = $(this).parent().siblings().children(".content").val();
  134. var name = $(this).prev(".name").val();
  135. //ajax方式提交回复内容
  136. if(name != "" && content != ""){
  137. var ajax = new Ajax();
  138. ajax.post("<?php echo site_url('message/insert/reply');?>",{postId:postId,name:name,content:content},function(data){
  139. if(data == "yes"){
  140. num = 2;
  141. receive();
  142. }
  143. });
  144. }
  145. });
  146. })
  147. </script>
  148. </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即可访问。


  相关解决方案