当前位置： 维易PHP培训学院 > PHP学习 > 内容正文

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）

作者：VEPHP   时间 2017-09-12

《PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）》要点：
本文介绍了PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上），希望对您有用。如果有疑问，可以联系我们。

我们大部分人都发过动态,想必都知道发动态、回复评论、删除动态的整个过程,那么作为初学者,要模仿这些功能有点复杂的,最起码表的关系得弄清楚~~PHP应用

先把思路理一下：PHP应用

(1)用户登录,用session读取当前用户----目的是：该用户可以发表动态,重点是显示该用户好友及他自己发表的动态,并且按发表时间排序.PHP应用

(2)做个发表动态框实现发表动态功能PHP应用

(3)显示该用户和他好友已经发表对的动态信息,并按发表时间由近到远显示PHP应用

(4)再每条动态后面做一个评论按钮和删除按钮；实现对动态的评论,回复和删除(斜体部分下一篇随笔,不然太长了)PHP应用

 需要用到的表：PHP应用

(1)用户表：PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

(2)好友表PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

(3)动态表PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

 我先将代码分块解析,最后将主页代码完整附上,不然弄不清逻辑可能会有点混~~~~PHP应用

第一步：实现简单的登录PHP应用

(1)login.php页面PHP应用

  1. <meta charset="UTF-8">
  2. <title></title>
  3. <style>
  4.  #body{
  5.   height: 300px;
  6.   width: 300px;
  7.   margin: 200px auto;
  8.    
  9.  }
  10. </style>
  11. <div id="body">
  12. <form method="post" action="login-cl.php">
  13.  用户名：<input type="text" name="uid"><br><br>
  14.  密码：<input type="password" name="pwd"><br>
  15.  <input type="submit" value="登录">
  16. </form>
  17. </div>

　　效果图如下：PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

(2)login-cl.php页面：(用session存取用户名)PHP应用

  1. <!--?php
  2. session_start();
  3. $uid = $_POST["uid"];
  4. $pwd = $_POST["pwd"];
  5. require "../DB.class.php";
  6. $db = new DB();
  7. $sql = "select pwd from users where uid = '{$uid}'";
  8. $mm = $db--->strquery($sql);
  9. var_dump($mm);
  10. if($mm == $pwd && !empty($pwd))
  11. {
  12.  $_SESSION["uid"] = $uid;
  13.  header("location:main.php");
  14. }
  15. else{
  16.  echo "用户名或密码错误!";
  17. }
  18. ?>

　　第二步：登录之后,布局发布动态框PHP应用

(1)发布之前,判断一下session是否已经取到值,如果没有,返回到登陆页面,如果取到值则显示“欢迎,xx”的字体(后面的姓名均用拼音显示,不再读取汉字的姓名)PHP应用

  1. <!--?php
  2.    session_start();
  3.    $uid = "";
  4.    if(empty($_SESSION["uid"]))
  5.    {
  6.     header("location:login.php");
  7.     exit;
  8.    }
  9.    $uid = $_SESSION["uid"];
  10.    echo "欢迎："."<span class='qid' yh='{$uid}'-->{$uid}";
  11.    ?>

(2)PHP应用

  1. <!--写动态-->
  2.  <div id="xdt">
  3.   <p>发表动态：</p>  
  4.   <textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
  5.   <input type="submit" value="发表" id="fb">
  6.  </div>

　　实现的效果：PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

第三步：显示该用户和他好友已经发表的动态信息,并按发表时间由近到远显示PHP应用

重点是：PHP应用

(1)显示的动态只是登陆的该用户和他好友的,非好友不显示--------所以在处理页面的sql语句要注意PHP应用

(2)将读取出来的信息按照发表时间读取,发表时间最近的越在上边PHP应用

 首先：PHP应用

  1. <!--容纳动态内容--> 
  2.   <div class="fdt">
  3.    <p style="color: brown; font-family: '微软雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友动态：</p><p>
  4.    </p><div id="nr"></div>
  5.   </div>

      其次：PHP应用

  1. //当发表动态时,将动态内容写进数据库,并刷新页面
  2.     $("#fb").click(function(){
  3.     var dt= $(".xdt").val();
  4.     var uid = $(".qid").attr("yh");
  5.     $.ajax({
  6.      url:"main-cl.php",
  7.      data:{dt:dt},
  8.      type:"POST",
  9.      dataType:"TEXT",
  10.      success:function(data){
  11.       alert("发表动态成功!");
  12.       window.location.href="main.php" rel="external nofollow" rel="external nofollow" ;
  13.      } 
  14.     });
  15.     })

　　对应的main-cl.php页面：PHP应用

  1. <!--?php
  2. session_start();
  3. $uid = $_SESSION["uid"];
  4. $dt = $_POST["dt"];
  5. $date = date ("Y-m-d H:i:s");
  6. require "../DB.class.php";
  7. $db = new DB();
  8.  $sql = "insert into qqdongtai values ('','{$uid}','{$dt}','{$date}')";
  9.  $db--->query($sql,0);
  10.  $sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}'))";
  11.  //echo $sql;
  12.  $arr = $db->strquery($sql);
  13.  echo $arr;
  14. ?>

然后：PHP应用

  1. //刷新页面时将内容读取出来,并按发表时间读出来
  2.     $.ajax({
  3.      url:"sx-cl.php",
  4.      dataType:"TEXT",
  5.      success:function(data){
  6.       var hang = data.trim().split("|");
  7.       var str="";
  8.       for(var i=0;i<hang.length;i++) {="" var="" lie="hang[i].split("^");" str="str" +="" "<div="" class="a"><span class="xm">"+lie[1]+"</span>发表动态：<div class="b">"+lie[2]+"<p></p><div class="c">发表动态时间："+lie[3]+"</div>";              
  9.        str =str+"<div id="d"><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">评论</button><span><a href="del.php?code=" rel="external nofollow" +lie[0]+"">删除动态</a></span></div>";
  10.       }
  11.       $("#nr").html(str);
  12.         
  13.      } 
  14.     });
  15. </div></hang.length;i++)>

　　sx-cl.php页面：
PHP应用

  1. <!--?php
  2. session_start();
  3. $uid = $_SESSION["uid"];
  4. $date = date ("Y-m-d H:i:s");
  5. require "../DB.class.php";
  6. $db = new DB();
  7. //选取该用户和该用户好友的动态,并按时间顺训读出
  8.  $sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}')) order by time desc";
  9.  //echo $sql;
  10.  $arr = $db--->strquery($sql);
  11.  echo $arr;
  12. ?>

 由上面可知：登录用户是lisi,由好友表可以知道,lisi的好友只有zhangsan和zhaoliu,那么显示的动态只能有lisi,zhangsan,和zhaoliu的.现在看一下效果及数据库~~~~PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

第四步：用bootstrap添加模态框用来评论动态PHP应用

(1)引入文件：PHP应用

  1.  <!--引入bootstrap的css文件-->
  2. <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
  3. <!--引入js包-->
  4. <!--引入bootstrap的js文件-->

(2)用模态框做评论效果：PHP应用

  1. <!-- 评论模态框(Modal) -->
  2.    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3.     <div class="modal-dialog">
  4.      <div class="modal-content">
  5.       <div class="modal-header">
  6.        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  7.        <h4 class="modal-title" id="myModalLabel">评论</h4>
  8.       </div>
  9.       <textarea class="modal-body" cols="80px"></textarea>
  10.       <div class="modal-footer">
  11.        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  12.        <button type="button" class="btn btn-primary qdhf">确定</button>
  13.       </div>
  14.      </div><!-- /.modal-content -->
  15.     </div><!-- /.modal -->
  16.    </div>

　　实现效果：(样式比较简陋)PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

点击“评论”：PHP应用

PHP实战：PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能（上）PHP应用

到这一步基本就能实现动态的发布和显示好友动态了~~~~未完待续----评论和评论回复见下一篇随笔~~~PHP应用

 主页面全部代码：PHP应用

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.    <!--引入bootstrap的css文件-->
  7.   <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
  8.   <!--引入js包-->
  9.   <script src="../jquery-3.2.0.js"></script>
  10.   <!--引入bootstrap的js文件-->
  11.   <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  12.   <style>
  13.    #body{
  14.     height: auto;
  15.     width: 1000px;
  16.     margin: 0px auto;
  17.    }
  18.    #xdt{
  19.     height: 200px;
  20.     width:1000px; 
  21.     border: 1px solid royalblue;
  22.     }
  23.     .fdt{
  24.     position: relative;
  25.     min-height:300px;   
  26.     width: 1000px;
  27.     }
  28.     /*谁发表动态样式*/
  29.     .a{
  30.     float: left;
  31.     min-height:40px;
  32.     width: 1000px;
  33.     border-bottom: 2px solid brown;
  34.     }
  35.     .xm{
  36.     font-size: 18px;
  37.     color: brown;
  38.     font-weight: bold;
  39.     }
  40.     /*发表动态样式内容*/
  41.     .b{
  42.     float: left;
  43.     text-align: left;
  44.     height:100px;
  45.     line-height: 50px;
  46.     }
  47.     /*发表时间与回复删除样式*/
  48.     .c{
  49.     height:30px;
  50.     width: 800px;
  51.     float: left;
  52.     font-size: 12px;
  53.     text-align:right;
  54.      }
  55.     #d{
  56.     height:30px;
  57.     width: 200px;
  58.     float: left;
  59.     font-size: 15px;
  60.     text-align:center;
  61.      }
  62.   </style>    
  63.  </head>
  64.  <body>
  65.   <div id="body">
  66.   <?php
  67.    session_start();
  68.    $uid = "";
  69.    if(empty($_SESSION["uid"]))
  70.    {
  71.     header("location:login.php");
  72.     exit;
  73.    }
  74.    $uid = $_SESSION["uid"];
  75.    //这种方法可以取到uid.
  76.    echo "欢迎："."<span class='qid' yh='{$uid}'>{$uid}</span>";
  77.    ?>
  78.   <!--写动态-->
  79.   <div id="xdt">
  80.    <p>发表动态：</p>
  81.    <!--<form method="post" action="main-cl.php">-->
  82.    <textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
  83.    <input type="submit" value="发表" id="fb" />
  84.    <!--</form>-->
  85.   </div>
  86.   <!--容纳动态内容-->
  87.   <div class="fdt">
  88.    <p style="color: brown; font-family: '微软雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友动态：<p>
  89.    <div id="nr"></div>
  90.   </div>
  91.   <!-- 评论模态框(Modal) -->
  92.    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  93.     <div class="modal-dialog">
  94.      <div class="modal-content">
  95.       <div class="modal-header">
  96.        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  97.        <h4 class="modal-title" id="myModalLabel">评论</h4>
  98.       </div>
  99.       <textarea class="modal-body" cols="80px"></textarea>
  100.       <div class="modal-footer">
  101.        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  102.        <button type="button" class="btn btn-primary qdhf">提交评论</button>
  103.       </div>
  104.      </div><!-- /.modal-content -->
  105.     </div><!-- /.modal -->
  106.    </div>
  107.   </div> 
  108.  </body>
  109. </html>
  110.    <script>
  111.     //刷新页面时将内容读取出来,并按发表时间读出来
  112.     $.ajax({
  113.      url:"sx-cl.php",
  114.      dataType:"TEXT",
  115.      success:function(data){
  116.       var hang = data.trim().split("|");
  117.       var str="";
  118.       for(var i=0;i<hang.length;i++)
  119.       {
  120.        var lie = hang[i].split("^");        
  121.         str = str + "<div class='a'><span class='xm'>"+lie[1]+"</span>发表动态：</div><div class='b'>"+lie[2]+"</p><div class='c'>发表动态时间："+lie[3]+"</div>";              
  122.        str =str+"<div id='d'><button class='btn btn-primary' data-toggle='modal' data-target='#myModal'>评论</button><span><a href='del.php?code="+lie[0]+"'>删除动态</a></span></div>";
  123.       }
  124.       $("#nr").html(str);
  125.       //点击回复 
  126.      } 
  127.     });
  128.     //当发表动态时,将动态内容写进数据库,并刷新页面
  129.     $("#fb").click(function(){
  130.     var dt= $(".xdt").val();
  131.     var uid = $(".qid").attr("yh");
  132.     $.ajax({
  133.      url:"main-cl.php",
  134.      data:{dt:dt},
  135.      type:"POST",
  136.      dataType:"TEXT",
  137.      success:function(data){
  138.       alert("发表动态成功!");
  139.       window.location.href="main.php" rel="external nofollow" rel="external nofollow" ;
  140.      } 
  141.     });
  142.     })             
  143.  </script>

以上所述是小编给大家介绍的PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对维易PHP网站的支持!PHP应用

转载请注明本页网址：
http://www.vephp.com/jiaocheng/725.html


    标签：  




同类教程排行


特辑教程