Este sistema funciona exactamente como el sistema Me gusta / No me gusta que YouTube implementa para sus videos. En YouTube, los botones se colocan en videos. Dado que no estamos construyendo el próximo YouTube, nos quedaremos con el uso de publicaciones simples donde los usuarios pueden hacer clic en sus botones de Me gusta y No me gusta asociados.
Estaremos usando:
- Ajax de JQuery para comunicarse con el servidor sin recargar la página.
- JQuery para seleccionar elementos y escribir valores, estilos y atributos en el DOM.
- PHP para hacer la lógica de backend, como recibir acciones de clic y realizar las llamadas a la base de datos
- MySQL como base de datos
Nuestra base de datos consta de solo dos tablas: publicaciones y like_dislike_info. Así que saltemos y creámoslos, ¿de acuerdo?
Crea una base de datos llamada gustar disgustar. En su indicador de MySQL, ejecute los siguientes comandos para crear las tablas:
Tabla 1: publicaciones
CREATE TABLE `posts` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`text` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Tabla 2: rating_info
CREATE TABLE `rating_info` (
`user_id` int(11) NOT NULL,
`post_id` int(11) NOT NULL,
`rating_action` varchar(30) NOT NULL,
CONSTRAINT UC_rating_info UNIQUE (user_id, post_id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;Completemos la tabla de publicaciones con algunas publicaciones que nos van a gustar y a las que no nos gustarán. Ejecute los siguientes comandos para completar la tabla:
INSERT INTO `posts` (`id`, `text`) VALUES
(1, 'This is the first post'),
(2, 'This is the second piece of text'),
(3, 'This is the third post'),
(4, 'This is the fourth piece of text');Por supuesto, puede usar un cliente MySQL como PHPMyAdmin para hacer toda esta creación de bases de datos y completar con publicaciones.
Notas
Asegúrese de que en la tabla rating_info, los campos user_id y post_id sean ÚNICOS. Lo que significa que no puede haber dos registros de un usuario en particular y una publicación en particular en la mesa.
Ahora vayamos a la parte de codificación. El código consta de tres archivos:
- index.php que contiene el marcado general y lo que se ve en el navegador y con el que se interactúa
- server.php esto es solo un código que se incluirá en index.php
- main.css es un archivo que contiene estilos
- scripts.js es el archivo que contiene nuestro Jquery
Ahora cree estos tres archivos en la raíz de su aplicación y pegue el siguiente código en ellos:
index.php:
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Like and Dislike system</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="posts-wrapper">
<?php foreach ($posts as $post): ?>
<div class="post">
<?php echo $post['text']; ?>
<div class="post-info">
<!-- if user likes post, style button differently -->
<i <?php if (userLiked($post['id'])): ?>
class="fa fa-thumbs-up like-btn"
<?php else: ?>
class="fa fa-thumbs-o-up like-btn"
<?php endif ?>
data-id="<?php echo $post['id'] ?>"></i>
<span class="likes"><?php echo getLikes($post['id']); ?></span>
<!-- if user dislikes post, style button differently -->
<i
<?php if (userDisliked($post['id'])): ?>
class="fa fa-thumbs-down dislike-btn"
<?php else: ?>
class="fa fa-thumbs-o-down dislike-btn"
<?php endif ?>
data-id="<?php echo $post['id'] ?>"></i>
<span class="dislikes"><?php echo getDislikes($post['id']); ?></span>
</div>
</div>
<?php endforeach ?>
</div>
<script src="scripts.js"></script>
</body>
</html>
Agreguemos el estilo.
main.css:
.posts-wrapper {
width: 50%;
margin: 20px auto;
border: 1px solid #eee;
}
.post {
width: 90%;
margin: 20px auto;
padding: 10px 5px 0px 5px;
border: 1px solid green;
}
.post-info {
margin: 10px auto 0px;
padding: 5px;
}
.fa {
font-size: 1.2em;
}
.fa-thumbs-down, .fa-thumbs-o-down {
transform:rotateY(180deg);
}
.logged_in_user {
padding: 10px 30px 0px;
}
i {
color: blue;
}server.php:
<?php
// connect to database
$conn = mysqli_connect('localhost', 'root', '', 'dislike_like');
// lets assume a user is logged in with id $user_id
$user_id = 2;
if (!$conn) {
die("Error connecting to database: " . mysqli_connect_error($conn));
exit();
}
// if user clicks like or dislike button
if (isset($_POST['action'])) {
$post_id = $_POST['post_id'];
$action = $_POST['action'];
switch ($action) {
case 'like':
$sql="INSERT INTO rating_info (user_id, post_id, rating_action)
VALUES ($user_id, $post_id, 'like')
ON DUPLICATE KEY UPDATE rating_action='like'";
break;
case 'dislike':
$sql="INSERT INTO rating_info (user_id, post_id, rating_action)
VALUES ($user_id, $post_id, 'dislike')
ON DUPLICATE KEY UPDATE rating_action='dislike'";
break;
case 'unlike':
$sql="DELETE FROM rating_info WHERE user_id=$user_id AND post_id=$post_id";
break;
case 'undislike':
$sql="DELETE FROM rating_info WHERE user_id=$user_id AND post_id=$post_id";
break;
default:
break;
}
// execute query to effect changes in the database ...
mysqli_query($conn, $sql);
echo getRating($post_id);
exit(0);
}
// Get total number of likes for a particular post
function getLikes($id)
{
global $conn;
$sql = "SELECT COUNT(*) FROM rating_info
WHERE post_id = $id AND rating_action='like'";
$rs = mysqli_query($conn, $sql);
$result = mysqli_fetch_array($rs);
return $result[0];
}
// Get total number of dislikes for a particular post
function getDislikes($id)
{
global $conn;
$sql = "SELECT COUNT(*) FROM rating_info
WHERE post_id = $id AND rating_action='dislike'";
$rs = mysqli_query($conn, $sql);
$result = mysqli_fetch_array($rs);
return $result[0];
}
// Get total number of likes and dislikes for a particular post
function getRating($id)
{
global $conn;
$rating = array();
$likes_query = "SELECT COUNT(*) FROM rating_info WHERE post_id = $id AND rating_action='like'";
$dislikes_query = "SELECT COUNT(*) FROM rating_info
WHERE post_id = $id AND rating_action='dislike'";
$likes_rs = mysqli_query($conn, $likes_query);
$dislikes_rs = mysqli_query($conn, $dislikes_query);
$likes = mysqli_fetch_array($likes_rs);
$dislikes = mysqli_fetch_array($dislikes_rs);
$rating = [
'likes' => $likes[0],
'dislikes' => $dislikes[0]
];
return json_encode($rating);
}
// Check if user already likes post or not
function userLiked($post_id)
{
global $conn;
global $user_id;
$sql = "SELECT * FROM rating_info WHERE user_id=$user_id
AND post_id=$post_id AND rating_action='like'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
return true;
}else{
return false;
}
}
// Check if user already dislikes post or not
function userDisliked($post_id)
{
global $conn;
global $user_id;
$sql = "SELECT * FROM rating_info WHERE user_id=$user_id
AND post_id=$post_id AND rating_action='dislike'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
return true;
}else{
return false;
}
}
$sql = "SELECT * FROM posts";
$result = mysqli_query($conn, $sql);
// fetch all posts from database
// return them as an associative array called $posts
$posts = mysqli_fetch_all($result, MYSQLI_ASSOC);
scripts.js:
$(document).ready(function(){
// if the user clicks on the like button ...
$('.like-btn').on('click', function(){
var post_id = $(this).data('id');
$clicked_btn = $(this);
if ($clicked_btn.hasClass('fa-thumbs-o-up')) {
action = 'like';
} else if($clicked_btn.hasClass('fa-thumbs-up')){
action = 'unlike';
}
$.ajax({
url: 'index.php',
type: 'post',
data: {
'action': action,
'post_id': post_id
},
success: function(data){
res = JSON.parse(data);
if (action == "like") {
$clicked_btn.removeClass('fa-thumbs-o-up');
$clicked_btn.addClass('fa-thumbs-up');
} else if(action == "unlike") {
$clicked_btn.removeClass('fa-thumbs-up');
$clicked_btn.addClass('fa-thumbs-o-up');
}
// display the number of likes and dislikes
$clicked_btn.siblings('span.likes').text(res.likes);
$clicked_btn.siblings('span.dislikes').text(res.dislikes);
// change button styling of the other button if user is reacting the second time to post
$clicked_btn.siblings('i.fa-thumbs-down').removeClass('fa-thumbs-down').addClass('fa-thumbs-o-down');
}
});
});
// if the user clicks on the dislike button ...
$('.dislike-btn').on('click', function(){
var post_id = $(this).data('id');
$clicked_btn = $(this);
if ($clicked_btn.hasClass('fa-thumbs-o-down')) {
action = 'dislike';
} else if($clicked_btn.hasClass('fa-thumbs-down')){
action = 'undislike';
}
$.ajax({
url: 'index.php',
type: 'post',
data: {
'action': action,
'post_id': post_id
},
success: function(data){
res = JSON.parse(data);
if (action == "dislike") {
$clicked_btn.removeClass('fa-thumbs-o-down');
$clicked_btn.addClass('fa-thumbs-down');
} else if(action == "undislike") {
$clicked_btn.removeClass('fa-thumbs-down');
$clicked_btn.addClass('fa-thumbs-o-down');
}
// display the number of likes and dislikes
$clicked_btn.siblings('span.likes').text(res.likes);
$clicked_btn.siblings('span.dislikes').text(res.dislikes);
// change button styling of the other button if user is reacting the second time to post
$clicked_btn.siblings('i.fa-thumbs-up').removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
}
});
});
});
Ahora encienda la aplicación en su navegador y juegue con ella.
Algunas cosas para tener en cuenta aquí
- Voy a decir esto de nuevo porque es importante: user_id y ID del mensaje Los campos de la tabla rating_info deben ser ÚNICOS si no algunas de las consultas SQL a la base de datos se comportarán mal.
- Solo hemos adaptado la parte de inicio de sesión del usuario de esta aplicación. En una aplicación con todas las funciones que implementa el sistema de Me gusta y No me gusta, tendría que crear una tabla de usuarios y el usuario tendría que iniciar sesión para poder darle me gusta o no a una publicación.
Conclusión
Hemos implementado con éxito lo que YouTube ahora implementa en sus videos. Hemos utilizado solo dos tablas para demostrar lo que es una gran hazaña. No solo eso. Podemos permitir que un usuario le guste o no le guste una publicación solo una vez y podemos saber a qué usuarios le gustó (o no le gustó) una publicación en particular. Podemos consultar y mostrar la lista de todos los usuarios a los que les gustó o no les gustó una publicación en particular.
Así que sigue adelante y juega con el código. Cree una tabla de usuarios e intente ampliar las características del sistema que acabamos de construir en este tutorial. Y, por supuesto, si tienes alguna preocupación o algo que no entendiste en el código, déjalo en los comentarios y llegará la ayuda.
Le agradecería mucho que compartiera esto con sus amigos que puedan necesitarlo. Es un gran estímulo para mí.
Gracias por tu tiempo. Espero que esto haya ayudado.
¡Feliz Programación!
Awa