สร้างระบบ Like แสดงอารมณ์ คล้ายๆ Facebook ด้วย PHP MySQL และ jQuery

สร้างระบบ Like แสดงอารมณ์ คล้ายๆ Facebook ด้วย PHP MySQL และ jQuery

ย้อนเวลาไปไม่กี่วันก่อนหน้านี้ Facebook ได้เปิดตัวปุ่มถูกใจ (Like Button) ที่มีการแสดงอารมณ์ Emoticon ที่หลากหลายมากขึ้น ซึ่งก็เป็นลูกเล่นที่น่าสนใจ สามารถที่จะนำไปพัฒนาใช้งานกับงานของเราได้ เช่น ระบบเว็บบอร์ด หรือ การแสดงความคิดเห็นในหน้าบทความหรือข่าวประชาสัมพันธ์ ในเว็บไซต์ของเรา ให้มีลูกเล่นมากขึ้น วันนี้ผมจึงจะมาแนะนำแนวทางการสร้าง ปุ่มกดถูกใจ (Like Button) แสดงอารมณ์ และลูกเล่นที่หลากหลาย คล้ายๆ Facebook ด้วย PHP, PDO MySQL และ jQuery กันครับ

ออกแบบฐานข้อมูล

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,
`name` varchar(100) NOT NULL,
`profile_pic` varchar(200) NOT NULL,
);


Messages Table

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


Reactions Table

CREATE TABLE reactions(
'rid' INT NOT NULL PRIMARY KEY AUTO_INCREMENT
'name' VARCHAR(45) NOT NULL
);


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,
`rid_fk` int(11) NOT NULL,
FOREIGN KEY (uid_fk) REFERENCES users(uid),
FOREIGN KEY (msg_id_fk) REFERENCES messages(msg_id),
FOREIGN KEY (rid_fkREFERENCES reactions(rid)
);


JavaScript Libraries

สำหรับโปรเจคนี้ผมจะใช้ jQuery Plugin ที่ชื่อ Tooltipster jQuery ในการสร้าง Popup เพื่อแสดง Emoticon icon ต่างๆ

<link rel="stylesheet" type="text/css" href="css/tooltipsterReaction.css">
<link rel="stylesheet" type="text/css" href="css/tipsy.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.livequery.js"></script>
<script src="js/jquery.tooltipsterReaction.js"></script>
<script src="js/jquery.tipsy.js"></script>


jQuery Code

การเรียกใช้งาน Tooltipster เพื่อแสดง Popup Emoticon icon ต่างๆ

$(document).ready(function()
{
//Black tooltip for reaction icons.
$(".likeTypeAction").tipsy({gravity: 's',live: true});

//Reactions popup on mouseover
$(".reaction").livequery(function ()
{
//Reactions HTML Content
var reactionsCode='<span class="likeTypeAction" original-title="Like" data-reaction="1"><i class="likeIcon likeType"></i></span>'+
'<span class="likeTypeAction" original-title="Love" data-reaction="2"><i class="loveIcon likeType"></i></span>'+
'<span class="likeTypeAction" original-title="Haha" data-reaction="3"><i class="hahaIcon likeType"></i></span>'+
'<span class="likeTypeAction" original-title="Wow" data-reaction="4"><i class="wowIcon likeType"></i></span>'+
'<span class="likeTypeAction" original-title="Cool" data-reaction="5"><i class="coolIcon likeType"></i></span>'+
'<span class="likeTypeAction" original-title="Confused" data-reaction="6"><i class="confusedIcon likeType"></i></span>'+
'<span class="likeTypeAction" original-title="Sad" data-reaction="7"><i class="sadIcon likeType"></i></span>'+
'<span class="likeTypeAction last" original-title="Angry" data-reaction="8"><i class="angryIcon likeType"></i></span>';

$(this).tooltipster({
contentAsHTML: true,
interactive: true,
content: $(reactionsCode),
});
});

$("body").on("click",".likeTypeAction",function()
{
.......
.......
}

$("body").on("click",".unLike",function()
{
.......
.......
}
});
//HTML Code
<a href="#" class="reaction" id="like203" rel="like">
<i class="likeIconDefault" ></i>Like</a>


CSS Code

เขียน CSS เพื่อกำหนดการแสดงผล ดังนี้

.likeType {
background-image: url('../images/like_types.png');
background-size: 100%;
display: block;
height: 40px;
image-rendering: crisp-edges;
line-height: 1;
width: 40px;
cursor: pointer;
}
.angryIcon {
background-position: 0px 0px;
}
.confusedIcon {
background-position: 0px -40px;
}
.hahaIcon {
background-position: 0px -80px;
}
.likeIcon {
background-position: 0px -120px
}
.loveIcon {
background-position:0px -160px;
}
.sadIcon {
background-position: 0px -200px;
}
.wowIcon {
background-position: 0px -240px;
}
.coolIcon {
background-position: 0px -280px;
}
.likeTypeAction{float: left; margin-right: 8px; cursor: pointer;}



Like Ajax

/*Reaction*/
$("body").on("click",".likeTypeAction",function()
{
var reactionType=$(this).attr("data-reaction");
var reactionName=$(this).attr("original-title");
var rel=$(this).parent().parent().attr("rel");
var x=$(this). parent().parent().attr("id");
var sid=x.split("reaction");
var msg_id=sid[1];

var htmlData='<i class="'+reactionName.toLowerCase()+'IconSmall likeTypeSmall" ></i>'+reactionName+'</a>';
var dataString = 'msg_id='+ msg_id +'&rid='+reactionType;

$.ajax({
type: "POST",
url: 'ajaxReaction.php',
data: dataString,
cache: false,
beforeSend: function(){},
success: function(html)
{
if(parseInt(html)==1)
{
$("#like"+msg_id).html(htmlData).removeClass('reaction').removeClass('tooltipstered').addClass('unLike').attr('rel','unlike');
$("#"+x).hide();
}
}
});

return false;
});


Unlike Ajax

$("body").on("click",".unLike",function()
{
var reactionType='1';
var x=$(this).attr("id");
var sid=x.split("like");
var msg_id=sid[1];
var dataString = 'msg_id='+ msg_id +'&rid='+reactionType;
var htmlData='<i class="likeIconDefault" ></i>Like</a>';
$.ajax({
type: "POST",
url: 'ajaxReaction.php',
data: dataString,
cache: false,
beforeSend: function(){},
success: function(html)
{
if(parseInt(html)==2)
{
$("#like"+msg_id).html(htmlData).addClass('reaction').addClass('tooltipstered').removeClass('unLike');
}
}
});

return false;
});


index.php

<?php
include_once 'config.php';
$feedData=$feed->newsFeed();
?>
<!DOCTYPE html >
<html>
<head>
<!-- JavaScript CSS -->
<link rel="stylesheet" type="text/css" href="css/tooltipsterReaction.css">
<link rel="stylesheet" type="text/css" href="css/tipsy.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.livequery.js"></script>
<script src="js/jquery.tooltipsterReaction.js"></script>
<script src="js/jquery.tipsy.js"></script>
<script src="js/app.js"></script>
<!-- JavaScript CSS End -->
</head>
<body>
<?php
foreach($feedData as $data)
{
?>
<div class="messageBody" id="msg<?php echo $data->msg_id; ?>">
<img src="<?php echo $data->profile_pic; ?>" class="messageImg"/>
<b><a href="<?php echo BASE_URL.$data->username?>"><?php echo $data->name?></a></b>
<?php echo $data->message; ?>
<div class="messageFooter">
<a href="#" class="reaction" id="like<?php echo $data->msg_id; ?>" rel="like">
<i class="likeIconDefault" ></i>Like</a>
</div>
</div>
<?php } ?>
</body>
</html>


config.php

<?php
session_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'Reations');
define("BASE_URL", "http://www.yourwebsite.com/");

function getDB() 
{
$dbhost= DB_SERVER;
$dbuser= DB_USERNAME;
$dbpass= DB_PASSWORD;
$dbname= DB_DATABASE;
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->exec("set names utf8"); //utf-8 support
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}

include_once 'feed.php';
$feed = new feed();
?>


ajaxReaction.php

<?php 
include_once 'config.php';
$feedData=$feed->newsFeed();
$sessions_uid=$_SESSION['uid'];
if($_POST['msg_id'] && $_POST['rid'] && $session_uid>0)
{
$msg_id=$_POST['msg_id'];
$rid=$_POST['rid'];
$data=$feed->userReaction($session_uid,$msg_id,$rid);
echo $data;
}
?>


feed.php

<?php
class feed
{
/* News Feed Data */
public function newsFeed()
{
$db = getDB();
$stmt = $db->prepare("SELECT U.uid, U.name, U.username,U.profile_pic, M.msg_id, M.message, M.created, M.like_count FROM users U,messages M WHERE U.uid=M.uid_fk ORDER BY M.msg_id DESC"); 
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;
return $data;
}

/* User Reaction Check */
public function reactionCheck($uid, $msg_id)
{
$db = getDB();
$stmt = $db->prepare("SELECT L.like_id, R.name FROM message_like L, reactions R WHERE R.rid=L.rid_fk AND L.uid_fk=:uid AND L.msg_id_fk=:msg_id"); 
$stmt->bindValue(':uid', $uid, PDO::PARAM_INT);
$stmt->bindValue(':msg_id', $msg_id, PDO::PARAM_INT);
$stmt->execute();
$data= $stmt->fetch(PDO::FETCH_OBJ);
$db = null;
return $data;
}

/* News Feed Data */
public function userReaction($uid,$msg_id,$rid)
{
$db = getDB();
$stmt1 = $db->prepare("SELECT like_id FROM message_like WHERE uid_fk=:uid AND msg_id_fk=:msg_id"); 
$stmt1->bindValue(':uid', $uid, PDO::PARAM_INT);
$stmt1->bindValue(':msg_id', $msg_id, PDO::PARAM_INT);
$stmt1->execute();
$count=$stmt1->rowCount();

if($count > 0)
{
$stmt = $db->prepare("DELETE FROM message_like WHERE uid_fk=:uid AND msg_id_fk=:msg_id"); 
$stmt->bindValue(':uid', $uid, PDO::PARAM_INT);
$stmt->bindValue(':msg_id', $msg_id, PDO::PARAM_INT);
$stmt->execute();
$db = null;
return 2;
}
else
{
$stmt = $db->prepare("INSERT INTO message_like (msg_id_fk, uid_fk, created, rid_fk) VALUES (:msg_id, :uid, :created, :rid)"); 
$stmt->bindValue(':uid', $uid, PDO::PARAM_INT);
$stmt->bindValue(':msg_id', $msg_id, PDO::PARAM_INT);
$created=time();
$stmt->bindValue(':created', $created, PDO::PARAM_INT);
$stmt->bindValue(':rid', $rid, PDO::PARAM_INT);
$stmt->execute();
$db = null;
return 1;
}

}
}
?>


หวังว่าจะมีประโยชน์สำหรับหลายๆท่านนะครับ^^

Siamhttp สยามเอชทีทีพี, บริการรับทำเว็บไซต์, บริการออกแบบเว็บไซต์, บริการออกแบบเว็บไซต์รองรับสมาร์ทโฟน, Responsive Website Design, SEO, พัฒนาโปรแกรมบนเว็บ ราคาเบาๆ

แชร์บทความ

Facebook Twitter Google Digg Reddit LinkedIn StumbleUpon Email
กำลังโหลด ...