PHP仿qq空間或朋友圈發(fā)布動態(tài)、評論動態(tài)、回復評論、刪除動態(tài)或評論的功能（上）

更新時間：2017年05月26日 14:28:05 作者：小魚小魚加油吐泡泡

我們大部分人都發(fā)過動態(tài)，想必都知道發(fā)動態(tài)、回復評論、刪除動態(tài)的整個過程，那么這個功能是如何實現(xiàn)的呢？下面小編給大家?guī)砹藢嵗a，對PHP仿qq空間或朋友圈發(fā)布動態(tài)、評論動態(tài)、回復評論、刪除動態(tài)或評論的功能感興趣的朋友，一起學習吧

我們大部分人都發(fā)過動態(tài)，想必都知道發(fā)動態(tài)、回復評論、刪除動態(tài)的整個過程，那么作為初學者，要模仿這些功能有點復雜的，最起碼表的關系得弄清楚~~

先把思路理一下：

（1）用戶登錄，用session讀取當前用戶----目的是：該用戶可以發(fā)表動態(tài)，重點是顯示該用戶好友及他自己發(fā)表的動態(tài)，并且按發(fā)表時間排序。

（2）做個發(fā)表動態(tài)框實現(xiàn)發(fā)表動態(tài)功能

（3）顯示該用戶和他好友已經(jīng)發(fā)表對的動態(tài)信息，并按發(fā)表時間由近到遠顯示

（4）再每條動態(tài)后面做一個評論按鈕和刪除按鈕；實現(xiàn)對動態(tài)的評論，回復和刪除（斜體部分下一篇隨筆，不然太長了）

需要用到的表：

（1）用戶表：

（2）好友表

（3）動態(tài)表

我先將代碼分塊解析，最后將主頁代碼完整附上，不然弄不清邏輯可能會有點混~~~~

第一步：實現(xiàn)簡單的登錄

（1）login.php頁面

<meta charset="UTF-8">
<title></title>
<style>
 #body{
  height: 300px;
  width: 300px;
  margin: 200px auto;
   
 }
</style>
<div id="body">
<form method="post" action="login-cl.php">
 用戶名：<input type="text" name="uid"><br><br>
 密碼：<input type="password" name="pwd"><br>
 <input type="submit" value="登錄">
</form>
</div>

　　效果圖如下：

（2）login-cl.php頁面：（用session存取用戶名）

<!--?php
session_start();
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
require "../DB.class.php";
$db = new DB();
$sql = "select pwd from users where uid = '{$uid}'";
$mm = $db--->strquery($sql);
var_dump($mm);
if($mm == $pwd && !empty($pwd))
{
 $_SESSION["uid"] = $uid;
 header("location:main.php");
}
else{
 echo "用戶名或密碼錯誤！";
}
?>

　　第二步：登錄之后，布局發(fā)布動態(tài)框

（1）發(fā)布之前，判斷一下session是否已經(jīng)取到值，如果沒有，返回到登陸頁面，如果取到值則顯示“歡迎，xx”的字體（后面的姓名均用拼音顯示，不再讀取漢字的姓名）

<!--?php
   session_start();
   $uid = "";
   if(empty($_SESSION["uid"]))
   {
    header("location:login.php");
    exit;
   }
   $uid = $_SESSION["uid"];
   echo "歡迎："."<span class='qid' yh='{$uid}'-->{$uid}";
   ?>

（2）

<!--寫動態(tài)-->
 <div id="xdt">
  <p>發(fā)表動態(tài)：</p>  
  <textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
  <input type="submit" value="發(fā)表" id="fb">
 </div>

　　實現(xiàn)的效果：

第三步：顯示該用戶和他好友已經(jīng)發(fā)表的動態(tài)信息，并按發(fā)表時間由近到遠顯示

重點是：

（1）顯示的動態(tài)只是登陸的該用戶和他好友的，非好友不顯示--------所以在處理頁面的sql語句要注意

（2）將讀取出來的信息按照發(fā)表時間讀取，發(fā)表時間最近的越在上邊

首先：

<!--容納動態(tài)內容--> 
  <div class="fdt">
   <p style="color: brown; font-family: '微軟雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友動態(tài)：</p><p>
   </p><div id="nr"></div>
  </div>

其次：

//當發(fā)表動態(tài)時，將動態(tài)內容寫進數(shù)據(jù)庫，并刷新頁面
    $("#fb").click(function(){
    var dt= $(".xdt").val();
    var uid = $(".qid").attr("yh");
    $.ajax({
     url:"main-cl.php",
     data:{dt:dt},
     type:"POST",
     dataType:"TEXT",
     success:function(data){
      alert("發(fā)表動態(tài)成功！");
      window.location.href="main.php" rel="external nofollow" rel="external nofollow" ;
     } 
    });
    })

　　對應的main-cl.php頁面：

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

然后：

//刷新頁面時將內容讀取出來，并按發(fā)表時間讀出來
    $.ajax({
     url:"sx-cl.php",
     dataType:"TEXT",
     success:function(data){
      var hang = data.trim().split("|");
      var str="";
      for(var i=0;i<hang.length;i++) {="" var="" lie="hang[i].split("^");" str="str" +="" "<div="" class="a"><span class="xm">"+lie[1]+"</span>發(fā)表動態(tài)：<div class="b">"+lie[2]+"<p></p><div class="c">發(fā)表動態(tài)時間："+lie[3]+"</div>";              
       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]+"">刪除動態(tài)</a></span></div>";
      }
      $("#nr").html(str);
        
     } 
    });
</div></hang.length;i++)>

　　sx-cl.php頁面：

<!--?php
session_start();
$uid = $_SESSION["uid"];
$date = date ("Y-m-d H:i:s");
require "../DB.class.php";
$db = new DB();
//選取該用戶和該用戶好友的動態(tài)，并按時間順訓讀出
 $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";
 //echo $sql;
 $arr = $db--->strquery($sql);
 echo $arr;
?>

由上面可知：登錄用戶是lisi，由好友表可以知道，lisi的好友只有zhangsan和zhaoliu,那么顯示的動態(tài)只能有l(wèi)isi,zhangsan,和zhaoliu的?，F(xiàn)在看一下效果及數(shù)據(jù)庫~~~~

第四步：用bootstrap添加模態(tài)框用來評論動態(tài)

（1）引入文件：

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

（2）用模態(tài)框做評論效果：

<!-- 評論模態(tài)框（Modal） -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title" id="myModalLabel">評論</h4>
      </div>
      <textarea class="modal-body" cols="80px"></textarea>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
       <button type="button" class="btn btn-primary qdhf">確定</button>
      </div>
     </div><!-- /.modal-content -->
    </div><!-- /.modal -->
   </div>

　　實現(xiàn)效果：（樣式比較簡陋）

點擊“評論”：

到這一步基本就能實現(xiàn)動態(tài)的發(fā)布和顯示好友動態(tài)了~~~~未完待續(xù)----評論和評論回復見下一篇隨筆~~~

主頁面全部代碼：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
   <!--引入bootstrap的css文件-->
  <link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
  <!--引入js包-->
  <script src="../jquery-3.2.0.js"></script>
  <!--引入bootstrap的js文件-->
  <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <style>
   #body{
    height: auto;
    width: 1000px;
    margin: 0px auto;
   }
   #xdt{
    height: 200px;
    width:1000px; 
    border: 1px solid royalblue;
    }
    .fdt{
    position: relative;
    min-height:300px;   
    width: 1000px;
    }
    /*誰發(fā)表動態(tài)樣式*/
    .a{
    float: left;
    min-height:40px;
    width: 1000px;
    border-bottom: 2px solid brown;
    }
    .xm{
    font-size: 18px;
    color: brown;
    font-weight: bold;
    }
    /*發(fā)表動態(tài)樣式內容*/
    .b{
    float: left;
    text-align: left;
    height:100px;
    line-height: 50px;
    }
    /*發(fā)表時間與回復刪除樣式*/
    .c{
    height:30px;
    width: 800px;
    float: left;
    font-size: 12px;
    text-align:right;
     }
    #d{
    height:30px;
    width: 200px;
    float: left;
    font-size: 15px;
    text-align:center;
     }
  </style>    
 </head>
 <body>
  <div id="body">
  <?php
   session_start();
   $uid = "";
   if(empty($_SESSION["uid"]))
   {
    header("location:login.php");
    exit;
   }
   $uid = $_SESSION["uid"];
   //這種方法可以取到uid。
   echo "歡迎："."<span class='qid' yh='{$uid}'>{$uid}</span>";
   ?>
  <!--寫動態(tài)-->
  <div id="xdt">
   <p>發(fā)表動態(tài)：</p>
   <!--<form method="post" action="main-cl.php">-->
   <textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
   <input type="submit" value="發(fā)表" id="fb" />
   <!--</form>-->
  </div>
  <!--容納動態(tài)內容-->
  <div class="fdt">
   <p style="color: brown; font-family: '微軟雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友動態(tài)：<p>
   <div id="nr"></div>
  </div>
  <!-- 評論模態(tài)框（Modal） -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title" id="myModalLabel">評論</h4>
      </div>
      <textarea class="modal-body" cols="80px"></textarea>
      <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
       <button type="button" class="btn btn-primary qdhf">提交評論</button>
      </div>
     </div><!-- /.modal-content -->
    </div><!-- /.modal -->
   </div>
  </div> 
 </body>
</html>
   <script>
    //刷新頁面時將內容讀取出來，并按發(fā)表時間讀出來
    $.ajax({
     url:"sx-cl.php",
     dataType:"TEXT",
     success:function(data){
      var hang = data.trim().split("|");
      var str="";
      for(var i=0;i<hang.length;i++)
      {
       var lie = hang[i].split("^");        
        str = str + "<div class='a'><span class='xm'>"+lie[1]+"</span>發(fā)表動態(tài)：</div><div class='b'>"+lie[2]+"</p><div class='c'>發(fā)表動態(tài)時間："+lie[3]+"</div>";              
       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]+"'>刪除動態(tài)</a></span></div>";
      }
      $("#nr").html(str);
      //點擊回復 
     } 
    });
    //當發(fā)表動態(tài)時，將動態(tài)內容寫進數(shù)據(jù)庫，并刷新頁面
    $("#fb").click(function(){
    var dt= $(".xdt").val();
    var uid = $(".qid").attr("yh");
    $.ajax({
     url:"main-cl.php",
     data:{dt:dt},
     type:"POST",
     dataType:"TEXT",
     success:function(data){
      alert("發(fā)表動態(tài)成功！");
      window.location.href="main.php" rel="external nofollow" rel="external nofollow" ;
     } 
    });
    })             
 </script>

以上所述是小編給大家介紹的PHP仿qq空間或朋友圈發(fā)布動態(tài)、評論動態(tài)、回復評論、刪除動態(tài)或評論的功能（上），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

WordPress過濾垃圾評論的幾種主要方法小結
不僅是中文的,WordPress用戶經(jīng)常還會受到英文日文等各種國外垃圾評論的騷擾,這里我們就來看一下WordPress過濾垃圾評論的幾種主要方法小結:
2016-07-07
codeigniter發(fā)送郵件并打印調試信息的方法
這篇文章主要介紹了codeigniter發(fā)送郵件并打印調試信息的方法,實例分析了codeigniter實現(xiàn)發(fā)送郵件及打印調試信息的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
typecho插件編寫教程（一）:Hello World
這篇文章主要介紹了typecho插件編寫教程（一）:Hello World,本文講解了插件的文件結構、插件信息、插件結構、插件流程等內容,需要的朋友可以參考下
2015-05-05
實現(xiàn)laravel 插入操作日志到數(shù)據(jù)庫的方法
今天小編就為大家分享一篇實現(xiàn)laravel 插入操作日志到數(shù)據(jù)庫的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
php操作xml
分步學習php操作xml：XML概念、DOMDocument對象、加載xml、讀取/遍歷節(jié)點與屬性、修改屬性/節(jié)點、添加元素/屬性、刪除屬性/節(jié)點，學會上面這些就可以順利操作XML了。
2013-10-10
解決laravel查詢構造器中的別名問題
今天小編就為大家分享一篇解決laravel查詢構造器中的別名問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
CI框架文件上傳類及圖像處理類用法分析
這篇文章主要介紹了CI框架文件上傳類及圖像處理類用法,設計CI框架圖片上傳及縮略圖操作的相關技巧,需要的朋友可以參考下
2016-05-05
用windows下編譯過的eAccelerator for PHP 5.1.6實現(xiàn)php加速的使用方法
用windows下編譯過的eAccelerator for PHP 5.1.6實現(xiàn)php加速的使用方法...
2007-09-09
Laravel框架Request、Response及Session操作示例
這篇文章主要介紹了Laravel框架Request、Response及Session操作,結合實例形式分析了Laravel框架中Request請求、Response響應及Session存取等相關操作技巧,需要的朋友可以參考下
2019-05-05
微信跳一跳php代碼實現(xiàn)
這篇文章主要為大家詳細介紹了微信跳一跳輔助php代碼實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-01-01