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登录脚本。
用户
消息表
该表包含用户状态消息数据。这里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） ）;
消息
反应表
该表包含反应数据名称。
CREATE TABLE 反应（
' RID ' INT NOT NULL PRIMARY KEY AUTO_INCREMENT，
' 名称 ' VARCHAR（45）NOT NULL
）;
反应
消息像表
包含所有用户消息喜欢的关系数据。这里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
JavaScript库
您必须包含以下JavaScript库。我已经为反应弹出修改了jquery tooltipster插件。
<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代码
将反应工具提示应用于锚标记。反应名称工具提示的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;
}
}
}
？>
转载于:https://blog.51cto.com/13959020/2287070