1. Журнал
  2. Решения и советы
  3. Веб-фреймворки
  4. jQuery
0 ∞

Система «лайков» Facebook’а с помощью Jquery, MySQL и PHP

Система «лайков» – важный элемент взаимодействия пользователей на сайтах, который позволяет мгновенно выразить мнение о контенте. В этой статье мы разберем, как реализовать подобную систему с использованием jQuery, MySQL и PHP, обеспечив простоту и функциональность на практике.

Вы узнаете, как правильно спроектировать базу данных, создать таблицы для пользователей и сообщений, а также интегрировать «лайки» в веб-приложение. Вы научитесь управлять взаимодействием между PHP и jQuery, создавая функционал, который легко масштабировать и поддерживать.

Содержание

Проектирование Базы Данных

Чтобы построить систему сообщений, вам надо создать три таблицы: Users (Пользователи), Messages (Сообщения) и Messages_Like (Отметки «Нравится»). Следующие изображения сгенерированы, используя Mysql Workbench.

Таблица пользователей

Таблица пользователей содержит всю информацию о зарегистрированных пользователях.

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

Данные будут храниться в следующем виде (здесь пароли зашифрованы в формате MD5):

Таблица пользователей
Стать профессионалом JavaScript на курсах по JavaScript-разработке и начинайте создавать динамичные сайты!

Таблица сообщений

Эта таблица содержит статусы пользователей. Здесь uid_fk – это внешний ключ, ссылающийся на поле 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)
);
Таблица сообщений
Примеры валидации форм с помощью JQuery

Таблица отметок «Нравится»

Содержит всю информацию об отметках «Нравится» к статусам. Здесь uid_fk – внешний ключ, ссылающийся на поле users.uid, а msg_id_fk внешний ключ, ссылающийся на поле 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)
);
Таблица отметок «Нравится»
Простой запрос Ajax с помощью jQuery и PHP

Код HTML

Простой код HTML.

<div class="stbody">
<div class="stimg"><img src="userprofile.jpg"/></div>
<div class="sttext">
<b>Srinivas Tamada</b>: Изменения Статуса
<div class="sttime">48 секунд назад</div>

<div><a href="#" class="like" id="like103" title="Нравится" rel="Like">Нравится</a>
</div>

<div class='likeUsers' id="likes103"><span id="you103"><a href="#">Вам</a>,</span> <a href="#">Srinivas</a>, <a href="#">Harsha</a> и ещё 20 пользователям это нравится.
</div>

</div>
</div>

Код PHP

Следующий код отображает «Нравится» или «Не нравится» из таблицы message_like, основываясь на ID сообщения.

<div>
<?php
$msg_id='103'; //id сообщения
$uid='1'; //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="Не нравится" rel="Unlike">Не нравится</a>';
 }
else
{ 
echo '<a href="#" class="like" id="like'.$msg_id.'" title="Нравится" rel="Like">Нравится</a>';
} ?>
</div>

Код PHP

Этот код отобразит информацию из таблиц users и message_like о пользователях, которым нравится сообщение, основываясь на ID сообщения.

<?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.'">Вам</a>,</span>';
}
else
{ 
echo '<a href="'.$likeusername.'">'.$likeusername.'</a>';
}  
}
echo 'и ещё '.$new_like_count.' пользователям это нравится.'; 
?> 
</div>
<?php }
else { 
echo '<div class="likeUsers" id="elikes'.$msg_id.'"></div>';
} ?>
Проверка состояния чекбокса с помощью jQuery и JavaScript

JavaScript

Следующий блок содержит код javascipt: основная функция – $(".like").click(function(){}, где like – имя класса якорного тэга «Нравится»/«Не нравится». Используя $(this).attr("id") получаем значение атрибута ID якорного тега.

<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='#'>Вам</a> это нравится.</span>.");
$("#likes"+New_ID).prepend("<span id='you"+New_ID+"'><a href='#'>Вам</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 для обновления данных при клике на «Нравится» или «Не нравится».

<?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; // ID авторизованного пользователя из сессии
if($rel=='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
{
//---Не нравится----
$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

Система «Нравится»/«Не нравится» полностью.

<?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>: Изменения Статуса
<div class="sttime">48 секунд назад</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="Не нравится" rel="Unlike">Не нравится</a>';
 } else { 
echo '<a href="#" class="like" id="like.$msg_id.'" title="Нравится" rel="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.'">Вам</a></span>';
}
else
{ 
echo '<a href="'.$likeusername.'">'.$likeusername.'</a>';
}  
}
echo ' и ещё '.$new_like_count.' пользователям это нравится.';
?> 
</div>
<?php }
else { 
echo '<div class="likeUsers" id="elikes'.$msg_id.'"></div>';
} ?>
</div>
</div>
<php } ?>

db.php

Файл конфигурации базы данных.

<?php
$mysql_hostname = "hostname";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) 
or die("Ой, что-то пошло не так");
mysql_select_db($mysql_database, $bd) or die("Ой, что-то пошло не так");
?>

РедакцияПеревод статьи «Facebook Like System with Jquery, MySQL and PHP»

Комментарии

Оставьте свой комментарий
Пока никто не оставил комментариев