php實例-PHP仿qq空間或朋友圈發佈動態、評論動態、回覆評論、刪除動態或評論的功能（上）-php教程-PHP中文網

首頁

後端開發

php教程

php實例-PHP仿qq空間或朋友圈發佈動態、評論動態、回覆評論、刪除動態或評論的功能（上）

Jun 28, 2017 pm 12:59 PM

php 發布

我們大部分人都發過動態，想必都知道發動態、回覆評論、刪除動態的整個過程，那麼這個功能是如何實現的呢？下面小編為大家帶來了實例程式碼，對PHP仿qq空間或朋友圈發布動態、評論動態、回覆評論、刪除動態或評論的功能感興趣的朋友，一起學習吧

我們大有些人都發過動態，想必都知道發動態、回覆評論、刪除動態的整個過程，那麼作為初學者，要模仿這些功能有點複雜的，最起碼表的關係得弄清楚~~

#先把思路理一下：

（1）使用者登入，用session讀取目前使用者----目的是：該用戶可以發表動態，重點是顯示該用戶好友及他自己發表的動態，並且按發表時間排序。

（2）做個發表動態框實現發表動態功能

（3）顯示該用戶和他好友已經發表對的動態信息，並按發表時間由近到遠顯示

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

# 需要用到的表格：

（1）使用者表：

##（2）好友表

（3）動態表

# 我先將程式碼分塊解析，最後將首頁程式碼完整附上，不然弄不清邏輯可能會有點混~~~~

第一步：實作簡單的登入

（1 )login.php頁面

&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style&gt;
 #body{
  height: 300px;
  width: 300px;
  margin: 200px auto;
    
 }
&lt;/style&gt;
&lt;p id=&quot;body&quot;&gt;
&lt;form method=&quot;post&quot; action=&quot;login-cl.php&quot;&gt;
 用户名：&lt;input type=&quot;text&quot; name=&quot;uid&quot;&gt;&lt;br&gt;&lt;br&gt;
 密码：&lt;input type=&quot;password&quot; name=&quot;pwd&quot;&gt;&lt;br&gt;
 &lt;input type=&quot;submit&quot; value=&quot;登录&quot;&gt;
&lt;/form&gt;
&lt;/p&gt;

登入後複製

　　效果圖如下：

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

&lt;!--?php
session_start();
$uid = $_POST[&quot;uid&quot;];
$pwd = $_POST[&quot;pwd&quot;];
require &quot;../DB.class.php&quot;;
$db = new DB();
$sql = &quot;select pwd from users where uid = &#39;{$uid}&#39;&quot;;
$mm = $db---&gt;strquery($sql);
var_dump($mm);
if($mm == $pwd &amp;&amp; !empty($pwd))
{
 $_SESSION[&quot;uid&quot;] = $uid;
 header(&quot;location:main.php&quot;);
}
else{
 echo &quot;用户名或密码错误！&quot;;
}
?&gt;

登入後複製

　　第二步：登入之後，版面配置發布動態方塊

（1）發布前，先判斷session是否已經取到值，如果沒有，回到登陸頁面，如果取到值則顯示「歡迎，xx」的字體（後面的姓名均用拼音顯示，不再讀取漢字的姓名）

&lt;!--?php
   session_start();
   $uid = &quot;&quot;;
   if(empty($_SESSION[&quot;uid&quot;]))
   {
    header(&quot;location:login.php&quot;);
    exit;
   }
   $uid = $_SESSION[&quot;uid&quot;];
   echo &quot;欢迎：&quot;.&quot;&lt;span class=&#39;qid&#39; yh=&#39;{$uid}&#39;--&gt;{$uid}&quot;;
   ?&gt;

登入後複製

（2 )

&lt;!--写动态--&gt;
 &lt;p id=&quot;xdt&quot;&gt;
  &lt;p&gt;发表动态：&lt;/p&gt;  
  &lt;textarea cols=&quot;100px&quot; rows=&quot;5px&quot; name=&quot;xdt&quot; class=&quot;xdt&quot;&gt;&lt;/textarea&gt;
  &lt;input type=&quot;submit&quot; value=&quot;发表&quot; id=&quot;fb&quot;&gt;
 &lt;/p&gt;

登入後複製

　　實現的效果：

#第三步：顯示該用戶和他好友已經發表的動態信息，並按發表時間由近到遠顯示

重點是：

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

（2）將讀取出來的資訊依照發表時間讀取，發表時間最近的越在上邊

首先：

&lt;!--容纳动态内容--&gt; 
  &lt;p class=&quot;fdt&quot;&gt;
   &lt;p style=&quot;color: brown; font-family: &#39;微软雅黑&#39;;font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;&quot;&gt;朋友动态：&lt;/p&gt;&lt;p&gt;
   &lt;/p&gt;&lt;p id=&quot;nr&quot;&gt;&lt;/p&gt;
  &lt;/p&gt;

登入後複製

其次：

//当发表动态时，将动态内容写进数据库，并刷新页面
    $(&quot;#fb&quot;).click(function(){
    var dt= $(&quot;.xdt&quot;).val();
    var uid = $(&quot;.qid&quot;).attr(&quot;yh&quot;);
    $.ajax({
     url:&quot;main-cl.php&quot;,
     data:{dt:dt},
     type:&quot;POST&quot;,
     dataType:&quot;TEXT&quot;,
     success:function(data){
      alert(&quot;发表动态成功！&quot;);
      window.location.href=&quot;main.php&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; ;
     } 
    });
    })

登入後複製

　　對應的main-cl.php頁面：

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

登入後複製

然後：

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

登入後複製

　　sx-cl.php頁面：

&lt;!--?php
session_start();
$uid = $_SESSION[&quot;uid&quot;];
$date = date (&quot;Y-m-d H:i:s&quot;);
require &quot;../DB.class.php&quot;;
$db = new DB();
//选取该用户和该用户好友的动态，并按时间顺训读出
 $sql = &quot;select * from qqdongtai where uid=&#39;{$uid}&#39; or uid in (select uid from qqfriends where fname =(select name from qqusers where uid=&#39;{$uid}&#39;)) order by time desc&quot;;
 //echo $sql;
 $arr = $db---&gt;strquery($sql);
 echo $arr;
?&gt;

登入後複製

由上面可知：登入使用者是lisi，由好友表可以知道，lisi的好友只有zhangsan和zhaoliu,那麼顯示的動態只能有lisi,zhangsan,和zhaoliu的。現在看一下效果及資料庫~~~~

#第四個步驟：用bootstrap加入模態方塊用來評論動態

（1）引入檔案：

&lt;!--引入bootstrap的css文件--&gt;
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../bootstrap-3.3.7-dist/css/bootstrap.min.css&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; &gt;
&lt;!--引入js包--&gt;
&lt;!--引入bootstrap的js文件--&gt;

登入後複製

（2）用模態方塊做註解效果：

&lt;!-- 评论模态框（Modal） --&gt;
   &lt;p class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
    &lt;p class=&quot;modal-dialog&quot;&gt;
     &lt;p class=&quot;modal-content&quot;&gt;
      &lt;p class=&quot;modal-header&quot;&gt;
       &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
       &lt;h4 class=&quot;modal-title&quot; id=&quot;myModalLabel&quot;&gt;评论&lt;/h4&gt;
      &lt;/p&gt;
      &lt;textarea class=&quot;modal-body&quot; cols=&quot;80px&quot;&gt;&lt;/textarea&gt;
      &lt;p class=&quot;modal-footer&quot;&gt;
       &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;关闭&lt;/button&gt;
       &lt;button type=&quot;button&quot; class=&quot;btn btn-primary qdhf&quot;&gt;确定&lt;/button&gt;
      &lt;/p&gt;
     &lt;/p&gt;&lt;!-- /.modal-content --&gt;
    &lt;/p&gt;&lt;!-- /.modal --&gt;
   &lt;/p&gt;

登入後複製

　　實現效果：（樣式比較簡陋）

點選「評論」：

到這一步基本上就能實現動態的發布與顯示好友動態了~~~~未完待續----評論與留言回覆見下一篇隨筆~~~

主頁全部程式碼：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!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;
    }
    /*谁发表动态样式*/
    .a{
    float: left;
    min-height:40px;
    width: 1000px;
    border-bottom: 2px solid brown;
    }
    .xm{
    font-size: 18px;
    color: brown;
    font-weight: bold;
    }
    /*发表动态样式内容*/
    .b{
    float: left;
    text-align: left;
    height:100px;
    line-height: 50px;
    }
    /*发表时间与回复删除样式*/
    .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>
  <p 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>";
   ?>
  <!--写动态-->
  <p id="xdt">
   <p>发表动态：</p>
   <!--<form method="post" action="main-cl.php">-->
   <textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
   <input type="submit" value="发表" id="fb" />
   <!--</form>-->
  </p>
  <!--容纳动态内容-->
  <p class="fdt">
   <p style="color: brown; font-family: '微软雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友动态：<p>
   <p id="nr"></p>
  </p>
  <!-- 评论模态框（Modal） -->
   <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <p class="modal-dialog">
     <p class="modal-content">
      <p class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title" id="myModalLabel">评论</h4>
      </p>
      <textarea class="modal-body" cols="80px"></textarea>
      <p class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       <button type="button" class="btn btn-primary qdhf">提交评论</button>
      </p>
     </p><!-- /.modal-content -->
    </p><!-- /.modal -->
   </p>
  </p> 
 </body>
</html>
   <script>
    //刷新页面时将内容读取出来，并按发表时间读出来
    $.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 + "<p class='a'><span class='xm'>"+lie[1]+"</span>发表动态：</p><p class='b'>"+lie[2]+"</p><p class='c'>发表动态时间："+lie[3]+"</p>";              
       str =str+"<p id='d'><button class='btn btn-primary' data-toggle='modal' data-target='#myModal'>评论</button><span><a href='del.php?code="+lie[0]+"'>删除动态</a></span></p>";
      }
      $("#nr").html(str);
      //点击回复 
     } 
    });
    //当发表动态时，将动态内容写进数据库，并刷新页面
    $(&quot;#fb&quot;).click(function(){
    var dt= $(&quot;.xdt&quot;).val();
    var uid = $(&quot;.qid&quot;).attr(&quot;yh&quot;);
    $.ajax({
     url:&quot;main-cl.php&quot;,
     data:{dt:dt},
     type:&quot;POST&quot;,
     dataType:&quot;TEXT&quot;,
     success:function(data){
      alert(&quot;发表动态成功！&quot;);
      window.location.href=&quot;main.php&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; ;
     } 
    });
    })             
 </script>