Hệ thống Facebook Like với Jquery, MySQL và PHP

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

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 
);

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

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)
);

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

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)
);

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.

<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>

<b>Srinivas Tamada</b>: Status Message

<div class="sttime">48 seconds ago</div>

</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>

Tiếp theo là đoạn show ra số lượng like

<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>

<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

<?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>';
} ?>

<?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");

<?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à

<script src="https://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>

$('.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

<?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'];
}
}
}
?>

<?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

<?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 } ?>

<?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'];

<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");

<?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>

Ngoài ra còn file db.php làm nhiệm vụ kết nối csdl nữa chứ

<?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");
?>

<?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

Hệ thống Facebook Like với Jquery, MySQL và PHP

Database design

Users Table

Messages Table

Message Like Table

HTML Code

message_like_ajax.php

Download code

Like this:

Có liên quan

Nguyễn Trung Hiếu

Database design

Users Table

Messages Table

Message Like Table

HTML Code

message_like_ajax.php

Download code

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu