El sistema de likes de Facebook es una de las mejores características de la red social (y de todas las redes sociales en general), es más, puede ser que en un futuro basándote en los datos de Facebook se lance un motor de búsqueda semántica. En este artículo os explicaré como implementar un sistema de likes/dislike en vuestros proyectos mediante jQuery, MySQL y PHP. ¿Te gustaría darle a like en las publicaciones de tu proyecto? Pues estate atento a este artículo.
Diseño de base de datos
Para crear el mensaje de likes, debemos crear tres tablas: Users, Messages y message_like. Para que te aclares mejor con todo esto, hay unas imágenes más abajo que lo explican mejor.
Tabla users
Tabla que alberga la información de los usuarios.
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 );
La información se guardará de la siguiente manera. Como ves, hemos encriptado la contraseña con MD5.
Tabla messages
Esta tabla contiene información sobre el estado de los mensajes enviados por el usuario. El campo uid_fk es la FOREIGN KEY que referencia al campo 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) );
Tabla message_like
Contiene toda la información relativa a los likes de los mensajes del usuario. Aquí uid_fk es la FOREIGN KEY que referencia a users.uid y msg_id_fk es la FOREIGN KEY que referencia a 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) );
Código HTML
Maqueta que utilizaremos para probar dicho sistema.
<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>
Código PHP
Para mostrar los likes y dislikes de la tabla message_like basándonos en el ID del message
$msg_id='103'; //Message id
$uid='1'; //Message user id.
$q=mysqli_query($db,"SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' ");
if(mysqli_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>';
} ?>
Código PHP
Este script muestra los likes de los usuarios de las tablas users y message_like basándose en el ID del message
<?php
if($like_count>0)
{
$query=mysqli_query($db,"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 ?>">
$new_like_count=$like_count-3;
while($row=mysqli_fetch_array($query,MYSQLI_ASSOC))
{
$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>';
} ?>
Javascript
En la sentencia $(".like").on('click',function(){}, like es el nombre de la clase del elemento a del like y dislike. Utilizando $(this).attr("id") haremos referencia al id del a.
$('.like').on("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');
}
}
});
message_like_ajax.php
Se encarga de actualizar la información del like y del dislike
include 'db.php';
if(isSet($_POST['msg_id']) && isSet($_POST['rel']))
{
$msg_id=mysqli_real_escape_string($db,$_POST['msg_id']);
$rel=mysqli_real_escape_string($db,$_POST['rel']);
$uid=$session_uid; // User login session id
if($rel=='Like')
{
//---Like----
$q=mysqli_query($db,"SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' ");
if(mysqli_num_rows($q)==0)
{
$query=mysqli_query($db,"INSERT INTO message_like (msg_id_fk,uid_fk) VALUES('$msg_id','$uid')");
$q=mysqli_query($db,"UPDATE messages SET like_count=like_count+1 WHERE msg_id='$msg_id'") ;
$g=mysqli_query($db,"SELECT like_count FROM messages WHERE msg_id='$msg_id'");
$d=mysqli_fetch_array($g,MYSQLI_ASSOC);
echo $d['like_count'];
}
}
else
{
//---Unlike----
$q=mysqli_query($db,"SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' ");
if(mysqli_num_rows($q)>0)
{
$query=mysqli_query($db,"DELETE FROM message_like WHERE msg_id_fk='$msg_id' and uid_fk='$uid'");
$q=mysqli_query($db,"UPDATE messages SET like_count=like_count-1 WHERE msg_id='$msg_id'");
$g=mysqli_query($db,"SELECT like_count FROM messages WHERE msg_id='$msg_id'");
$d=mysqli_fetch_array($g,MYSQLI_ASSOC);
echo $d['like_count'];
}
}
}
Código PHP final
Versión completa del sistema de likes
<?php
$query=mysqli_query($db,"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=mysqli_fetch_array($query,MYSQLI_ASSOC))
{
$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>
<?php
$q=mysqli_query($db,"SELECT like_id FROM message_like WHERE uid_fk='$uid' and msg_id_fk='$msg_id' ");
if(mysqli_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=mysqli_query($db,"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=mysqli_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 } ?>
db.php
Necesitamos un archivo de configuración para la conexión con la base de datos, y config.php será el encargado de ello. Mediante este archivo podrás modificar el nombre de usuario, la contraseña e incluso el nombre de la base de datos.
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
Fuente: 9lessons.info