PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)

时间:2017-06-10

  对应的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;
?>

然后:

//刷新页面时将内容读取出来,并按发表时间读出来
    $.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>发表动态:<div class="b">"+lie[2]+"<p></p><div class="c">发表动态时间:"+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]+"">删除动态</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();
//选取该用户和该用户好友的动态,并按时间顺训读出
 $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,那么显示的动态只能有lisi,zhangsan,和zhaoliu的。现在看一下效果及数据库~~~~

PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上) PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上) PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)

第四步:用bootstrap添加模态框用来评论动态

(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)用模态框做评论效果:

<!-- 评论模态框(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>

  实现效果:(样式比较简陋)

PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)

点击“评论”:

PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)

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

 主页面全部代码:

<!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>
  <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>";
   ?>
  <!--写动态-->
  <div 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>-->
  </div>
  <!--容纳动态内容-->
  <div class="fdt">
   <p style="color: brown; font-family: '微软雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友动态:<p>
   <div id="nr"></div>
  </div>
  <!-- 评论模态框(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>
    //刷新页面时将内容读取出来,并按发表时间读出来
    $.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>发表动态:</div><div class='b'>"+lie[2]+"</p><div class='c'>发表动态时间:"+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]+"'>删除动态</a></span></div>";
      }
      $("#nr").html(str);
      //点击回复 
     } 
    });
    //当发表动态时,将动态内容写进数据库,并刷新页面
    $("#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("发表动态成功!");
      window.location.href="main.php" rel="external nofollow" rel="external nofollow" ;
     } 
    });
    })             
 </script>
  • 共3页:
  • 上一页
  • 2/3
  • 下一页
  • 上一篇:PHP中的函数声明与使用详解 下一篇:Yii2实现ActiveForm ajax提交

    相关文章

    最新文章