Facebook喜欢使用PHP，MySQL和Jquery的反应。

就在几天前，Facebook推出了Reactions，这是Like按钮的扩展。我成功地在我的WallScript 8，构建自己的社交网络中实现了相同的功能。这是使用PHP，Jquery和PDO MySQL实现Reactions的快速简便方法。这是实施反应的基本思路。希望你喜欢新的Reactions for Like按钮..！快速浏览一下现场演示。

下载脚本现场演示

数据库设计
要构建像反应系统这样的消息，您必须创建四个表，例如Users，Messages，Message_Like 和Reactions。下面的图像是使用Mysql Workbench工具生成的。

用户表

用户表包含所有用户注册详细信息。

CREATE TABLE` 用户 `（
` UID `诠释NOT NULL PRIMARY KEY AUTO_INCREMENT，
` 用户名 `VARCHAR（25）NOT NULL UNIQUE，
' 密码 'VARCHAR（50）NOT NULL，
` 电子邮件 'VARCHAR（100）NOT NULL，
` 名 ` varchar（100）NOT NULL，
` profile_pic`varchar（200）NOT NULL，
）;

数据将以下列方式存储，这里是带有PDO和HASH加密的密码数据PHP登录脚本。

用户

Facebook反应使用PHP，MySQL和Jquery。

消息表

该表包含用户状态消息数据。这里uid_fk 是引用users.uid的FOREIGN KEY

CREATE TABLE` 消息 `（
` MSG_ID `INT（11）NOT NULL PRIMARY KEY AUTO_INCREMENT，
` 消息 `VARCHAR（200）NOT NULL，
` uid_fk `INT（11）NOT NULL，
` LIKE_COUNT `INT（11）DEFAULT NULL，
` 创建 `int（11）DEFAULT NULL，
FOREIGN KEY（uid_fk）REFERENCES users（uid））;

消息

Facebook反应使用PHP，MySQL和Jquery。

反应表

该表包含反应数据名称。

CREATE TABLE 反应（
' RID ' INT NOT NULL PRIMARY KEY AUTO_INCREMENT，
' 名称 ' VARCHAR（45）NOT NULL
）;

反应

Facebook反应使用PHP，MySQL和Jquery。

消息像表

包含所有用户消息喜欢的关系数据。这里uid_fk是FOREIGN KEY to REFERENCES users.uid，r id_fk 是FOREIGN KEY to REFERENCES reactions.rid 和msg_id_fk是FOREIGN KEY to 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，
` 创建 `INT（11）NOT NULL，
` rid_fk ` int（11）NOT NULL，
FOREIGN KEY（uid_fk）REFERENCES 用户（uid），
FOREIGN KEY（msg_id_fk）REFERENCES 消息（msg_id），
FOREIGN KEY （rid_fk） REFERENCES reaction（rid）
）;

message_like

Facebook反应使用PHP，MySQL和Jquery。

JavaScript库
您必须包含以下JavaScript库。我已经为反应弹出修改了jquery tooltipster插件。

Jquery代码
将反应工具提示应用于锚标记。反应名称工具提示的Tipsy插件。

$（文件）。准备（函数（）
{
//用于反应图标黑色提示。
$（ “ .likeTypeAction ”）。醉意（{比重： 'S'，住：真 }）;

//反应鼠标悬停弹出
$（“ 。反应 ”）。的liveQuery（函数（）
{
//反应HTML内容
变种 reactionsCode =” <跨度类= “likeTypeAction”原始标题= “ 喜欢”数据-反应=“ 1 ”> <I类=“ likeIcon likeType”> </ I > </ span> '+
' <“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 =“

true， interactive：true， content：$（reactionsCode）， }）; }）; $（”

body “）。on（” click “，”。likeTypeAction “，function（）
{
.......
.......
}

$（” body “）。on（” click “，”。unLike “，function（）
{
.......
.......
}
}）;
// HTML代码
<a href =”＃“class =” reaction “id =” like 203 “rel =” like “>
<i class =” likeIconDefault “> </ i>喜欢</a>

CSS代码
我实现了图像精灵。

。likeType {
background-image：url（'../ images / like_types.png'）;
背景大小：100％;
显示：块;
身高：40px;
图像渲染：清晰边缘;
line-height：1;
宽度：40px;
游标：指针;
}
。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; 保证金权利：8px; cursor：pointer;}

像Ajax一样
包含javascript代码。$（“body”）。on（'click'，'。likeTypeAction'，function（）{} - 这里likeTypeAction是反应图标标签的类名。使用$（this）.parent（）。parent（）。 attr（“id”）调用图标标记消息ID值。

/ * Reaction * /
$（“ body ”）。上（ “ 点击 ”， “ .likeTypeAction ”，函数（）
{
VAR reactionType = $（本）。ATTR（ “数据-反应”）;
VAR  。reactionName = $（本）ATTR（ “原始标题”）;
无功  rel = $（this）.parent（）。parent（）。attr（“rel”）;
var  x = $（this） .parent（）。parent（）。attr（“id”）;
var  sid = x。分裂（“反应”）;

VAR  htmlData =” <I类=“” + 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 '，' 不同 '）;
$（ “＃” + X）。hide（）;
}
}
}）;

返回虚假 ;
}）;

与Ajax不同，
包含javascript代码。$（“body”）。on（'click'，'。unLike'，function（）{} - 这里unLike是不同的锚标签的类名。使用$（this）.attr（“id”）调用锚标记消息ID值。

$（“ 身体 ”）。上（ “ 点击 ”， “ 不像 ”，函数（）
{
VAR  reactionType = '1';
变种  X = $（本）。ATTR（ “ID”）;
VAR  。SID = X 分裂（ “像”）;
无功  msg_id = sid [1];
var  dataString =' msg_id = '+ msg_id +' ＆rid = '+ reactionType;
var  htmlData =' <i class =“likeIconDefault”> </ i>赞</a> ';
$ .ajax （{
type：“ POST ”，
url：'

cache：false，
beforeSend：function（）{}，
success：function（html）
{
if（parseInt（html）== 2）
{ $（“ ＃like ”+ msg_id）。html（htmlData）。addClass（' 反应 '）。addClass（' tooltipstered '）。removeClass（ ' 不像 '）; } } }）; 返回虚假 ; }）;

index.php
包含PHP和HTML代码，通过调用$ feed-> newsFeed（）显示所有用户更新;

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

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 - > 用户照片; ？> “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 =”喜欢“> <i class =”likeIconDefault“> </ i>喜欢</a> </ div> </ div>

config.php
数据库配置文件，修改用户名，密码和数据库值。为PHP 启用PDO扩展

<？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 ;
新的 PDO（“ mysql：host = $ dbhost ; dbname = $ dbname”，$ dbuser，$ dbpass）;
$ dbConnection-> exec（“ set names utf8 ”）; // utf-8支持
$ dbConnection-> setAttribute（PDO :: ATTR_ERRMODE，PDO :: ERRMODE_EXCEPTION）;
return $ dbConnection;
}

include_once ' feed.php ';
$ feed = new feed（）;
？>

ajaxReaction.php
用于更新用户反应的Ajax post文件。

<？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代码来更新用户反应数据，这将使所有用户更新。您必须根据您的会话ID进行修改。

<？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;
返回 $ data;
}

/ *用户反应检查* /
公共职能 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;
返回 $ data;
} / *新闻Feed数据* / 公共功能

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 = ：“）;
$ stmt-> bindValue（'：uid'，$ uid，  PDO :: PARAM_INT）;
$ stmt-> bindValue（'：msg_id'，$ msg_id，  PDO :: PARAM_INT）;
$ stmt-> execute（） ;
$ db = null;
返回 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;
返回 1;
}

}
}
？>

Facebook喜欢使用PHP，MySQL和Jquery的反应。

猜你喜欢