《PHP實戰:PHP仿qq空間或朋友圈發布動態、評論動態、回復評論、刪除動態或評論的功能(上)》要點:
本文介紹了PHP實戰:PHP仿qq空間或朋友圈發布動態、評論動態、回復評論、刪除動態或評論的功能(上),希望對您有用。如果有疑問,可以聯系我們。
我們大部分人都發過動態,想必都知道發動態、回復評論、刪除動態的整個過程,那么作為初學者,要模仿這些功能有點復雜的,最起碼表的關系得弄清楚~~PHP應用
先把思路理一下:PHP應用
(1)用戶登錄,用session讀取當前用戶----目的是:該用戶可以發表動態,重點是顯示該用戶好友及他自己發表的動態,并且按發表時間排序.PHP應用
(2)做個發表動態框實現發表動態功能PHP應用
(3)顯示該用戶和他好友已經發表對的動態信息,并按發表時間由近到遠顯示PHP應用
(4)再每條動態后面做一個評論按鈕和刪除按鈕;實現對動態的評論,回復和刪除(斜體部分下一篇隨筆,不然太長了)PHP應用
?需要用到的表:PHP應用
(1)用戶表:PHP應用
PHP應用
(2)好友表PHP應用
PHP應用
(3)動態表PHP應用
PHP應用
?我先將代碼分塊解析,最后將主頁代碼完整附上,不然弄不清邏輯可能會有點混~~~~PHP應用
第一步:實現簡單的登錄PHP應用
(1)login.php頁面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>
效果圖如下:PHP應用
PHP應用
(2)login-cl.php頁面:(用session存取用戶名)PHP應用
<!--?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 "用戶名或密碼錯誤!"; } ?>
第二步:登錄之后,布局發布動態框PHP應用
(1)發布之前,判斷一下session是否已經取到值,如果沒有,返回到登陸頁面,如果取到值則顯示“歡迎,xx”的字體(后面的姓名均用拼音顯示,不再讀取漢字的姓名)PHP應用
<!--?php session_start(); $uid = ""; if(empty($_SESSION["uid"])) { header("location:login.php"); exit; } $uid = $_SESSION["uid"]; echo "歡迎:"."<span class='qid' yh='{$uid}'-->{$uid}"; ?>
(2)PHP應用
<!--寫動態--> <div id="xdt"> <p>發表動態:</p> <textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea> <input type="submit" value="發表" id="fb"> </div>
實現的效果:PHP應用
PHP應用
第三步:顯示該用戶和他好友已經發表的動態信息,并按發表時間由近到遠顯示PHP應用
重點是:PHP應用
(1)顯示的動態只是登陸的該用戶和他好友的,非好友不顯示--------所以在處理頁面的sql語句要注意PHP應用
(2)將讀取出來的信息按照發表時間讀取,發表時間最近的越在上邊PHP應用
?首先:PHP應用
<!--容納動態內容--> <div class="fdt"> <p style="color: brown; font-family: '微軟雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友動態:</p><p> </p><div id="nr"></div> </div>
????? 其次:PHP應用
//當發表動態時,將動態內容寫進數據庫,并刷新頁面 $("#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" ; } }); })
對應的main-cl.php頁面: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; ?>
然后:PHP應用
//刷新頁面時將內容讀取出來,并按發表時間讀出來 $.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應用
<!--?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應用
PHP應用
第四步:用bootstrap添加模態框用來評論動態PHP應用
(1)引入文件:PHP應用
<!--引入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)用模態框做評論效果:PHP應用
<!-- 評論模態框(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應用
PHP應用
點擊“評論”:PHP應用
PHP應用
到這一步基本就能實現動態的發布和顯示好友動態了~~~~未完待續----評論和評論回復見下一篇隨筆~~~PHP應用
?主頁面全部代碼:PHP應用
<!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>
以上所述是小編給大家介紹的PHP仿qq空間或朋友圈發布動態、評論動態、回復評論、刪除動態或評論的功能(上),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的.在此也非常感謝大家對維易PHP網站的支持!PHP應用
轉載請注明本頁網址:
http://www.snjht.com/jiaocheng/725.html