Hệ thống nút like của facebook sau khi ra đời đã làm thay đổi toàn diện hệ thống mạng xã hội ngày nay, và trong bài ngày hôm nay, tôi sẽ giới thiệu tới các bạn làm thế nào để thiết kế được một hệ thống tương tự như vậy.
Database design
Chúng ta sẽ cùng nhau đi tạo những bảng database có liên quan, trước tiên là user table
Users Table
1 2 3 4 5 6 | CREATE TABLE `users` ( `uid` int NOT NULL PRIMARY KEY AUTO_INCREMENT , `username` varchar(25) NOT NULL UNIQUE, `password` varchar(50) NOT NULL , `email` varchar(100) NOT NULL ); |
Dữ liệu sẽ được lưu như hình sau
Messages Table
Bảng này lưu trữ trạng thái tin nhắn của người dùng, kiểu như khi một người nào đó nhấn like/unlike sẽ có thông báo cho bạn vây
1 2 3 4 5 6 7 8 | CREATE TABLE `messages` ( `msg_id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `message` varchar(200) NOT NULL, `uid_fk` int(11) NOT NULL, `like_count` int(11) DEFAULT NULL, `created` int(11) DEFAULT NULL, FOREIGN KEY (uid_fk) REFERENCES users(uid) ); |
Message Like Table
1 2 3 4 5 6 7 8 | CREATE TABLE `message_like` ( `like_id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `msg_id_fk` int(11), `uid_fk` int(11) NOT NULL, `created` int(11) NOT NULL, FOREIGN KEY (uid_fk) REFERENCES users(uid), FOREIGN KEY (msg_id_fk) REFERENCES messages(msg_id) ); |
HTML Code
Xong phần database, giờ chúng ta tới phần thiết kế html cho hệ thống của chúng ta.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="stbody"> <div class="stimg"><img src="userprofile.jpg"/></div> <div class="sttext"> <b>Srinivas Tamada</b>: Status Message <div class="sttime">48 seconds ago</div> <div><a href="#" class="like" id="like103" title="Like" rel="Like">Like</a> </div> <div class='likeUsers' id="likes103"><span id="you103"><a href="#">You</a>,</span> <a href="#">Srinivas</a>, <a href="#">Harsha</a> and 20 other friends like this. </div> </div> </div> |
Tiếp theo là đoạn show ra số lượng like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div> <?php $msg_id='103'; //Message id $uid='1'; //Message user id. $q=mysql_query("SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' "); if(mysql_num_rows($q)==0) { echo '<a href="#" class="like'" id="like'.$msg_id.'" title="Unlike" rel="Unlike">Unlike</a>'; } else { echo '<a href="#" class="like" id="like'.$msg_id.'" title="Like" rel="Like">Like</a>'; } ?> </div> |
Và thông tin những người đã like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php if($like_count>0) { $query=mysql_query("SELECT U.username,U.uid FROM message_like M, users U WHERE U.uid=M.uid_fk AND M.msg_id_fk='$msg_id' LIMIT 3"); ?> <div class='likeUsers' id="likes<?php echo $msg_id ?>"> <?php $new_like_count=$like_count-3; while($row=mysql_fetch_array($query)) { $like_uid=$row['uid']; $likeusername=$row['username']; if($like_uid==$uid) { echo '<span id="you'.$msg_id.'"><a href="'.$likeusername.'">You</a>,</span>'; } else { echo '<a href="'.$likeusername.'">'.$likeusername.'</a>'; } } echo 'and '.$new_like_count.' other friends like this'; ?> </div> <?php } else { echo '<div class="likeUsers" id="elikes'.$msg_id.'"></div>'; } ?> |
Và chúng ta sử dụng javascript để làm cho việc like/unlike thêm mượt mà
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> $('.like').die('click').live("click",function() { var ID = $(this).attr("id"); var sid=ID.split("like"); var New_ID=sid[1]; var REL = $(this).attr("rel"); var URL='message_like_ajax.php'; var dataString = 'msg_id=' + New_ID +'&rel='+ REL; $.ajax({ type: "POST", url: URL, data: dataString, cache: false, success: function(html){ if(REL=='Like') { $("#youlike"+New_ID).slideDown('slow').prepend("<span id='you"+New_ID+"'><a href='#'>You</a> like this.</span>."); $("#likes"+New_ID).prepend("<span id='you"+New_ID+"'><a href='#'>You</a>, </span>"); $('#'+ID).html('Unlike').attr('rel', 'Unlike').attr('title', 'Unlike'); } else { $("#youlike"+New_ID).slideUp('slow'); $("#you"+New_ID).remove(); $('#'+ID).attr('rel', 'Like').attr('title', 'Like').html('Like'); } } }); </script> |
message_like_ajax.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?php include 'db.php'; if(isSet($_POST['msg_id']) && isSet($_POST['rel'])) { $msg_id=mysql_real_escape_string($_POST['msg_id']); $rel=mysql_real_escape_string($_POST['rel']); $uid=$session_uid; // User login session id if($rel=='Like') { //---Like---- $q=mysql_query("SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' "); if(mysql_num_rows($q)==0) { $query=mysql_query("INSERT INTO message_like (msg_id_fk,uid_fk) VALUES('$msg_id','$uid')"); $q=mysql_query("UPDATE messages SET like_count=like_count+1 WHERE msg_id='$msg_id'") ; $g=mysql_query("SELECT like_count FROM messages WHERE msg_id='$msg_id'"); $d=mysql_fetch_array($g); echo $d['like_count']; } } else { //---Unlike---- $q=mysql_query("SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' "); if(mysql_num_rows($q)>0) { $query=mysql_query("DELETE FROM message_like WHERE msg_id_fk='$msg_id' and uid_fk='$uid'"); $q=mysql_query("UPDATE messages SET like_count=like_count-1 WHERE msg_id='$msg_id'"); $g=mysql_query("SELECT like_count FROM messages WHERE msg_id='$msg_id'"); $d=mysql_fetch_array($g); echo $d['like_count']; } } } ?> |
Cuối cùng là đoạn code hoàn chỉnh
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <?php $query=mysql_query("SELECT U.username, U.uid, M.msg_id, M.message FROM users U, messages M WHERE U.uid=M.uid_fk and U.uid='$sessions_uid'"); while($row=mysql_fetch_array($query)) { $msg_id=$row['msg_id']; $message=$row['message']; $username=$row['username']; $uid=$row['uid']; ?> <div class="stbody"> <div class="stimg"><img src="userprofile.jpg"/></div> <div class="sttext"> <b>Srinivas Tamada</b>: Status Message <div class="sttime">48 seconds ago</div> <div> <?php $q=mysql_query("SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' "); if(mysql_num_rows($q)==0) { echo '<a href="#" class="like'" id="like.$msg_id.'" title="Unlike" rel="Unlike">Unlike</a>'; } else { echo '<a href="#" class="like" id="like.$msg_id.'" title="Like" rel="Like">Like</a>'; } ?> </div> <?php if($like_count>0) { $query=mysql_query("SELECT U.username,U.uid FROM message_like M, users U WHERE U.uid=M.uid_fk AND M.msg_id_fk='$msg_id' LIMIT 3"); ?> <div class='likeUsers' id="likes<?php echo $msg_id ?>"> <?php $new_like_count=$like_count-3; while($row=mysql_fetch_array($query)) { $like_uid=$row['uid']; $likeusername=$row['username']; if($like_uid==$uid) { echo '<span id="you'.$msg_id.'"><a href="'.$likeusername.'">You</a></span>'; } else { echo '<a href="'.$likeusername.'">'.$likeusername.'</a>'; } } echo 'and '.$new_like_count.' other friends like this'; ?> </div> <?php } else { echo '<div class="likeUsers" id="elikes'.$msg_id.'"></div>'; } ?> </div> </div> <php } ?> |
Ngoài ra còn file db.php làm nhiệm vụ kết nối csdl nữa chứ
1 2 3 4 5 6 7 8 9 | <?php $mysql_hostname = "hostname"; $mysql_user = "username"; $mysql_password = "password"; $mysql_database = "database"; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong"); mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong"); ?> |
Vậy là xong hệ thống Facebook Like System rồi đó, hy vọng bài viết sẽ giúp cho bạn thêm cái nhìn tổng quan và có thể ứng dụng vào hệ thống project của mình
You must log in to post a comment.