Facebook me gusta con emoji usando PHP jQuery. Facebook está revolucionando en modo de calificación de publicaciones en las redes sociales. Por lo general, usa como la calificación emojis con diferentes estados de ánimo de una persona (reacciones). Se usa especialmente para recopilar la emoción del usuario ante la publicación que está observando.
Sin embargo, en este tutorial, vamos a crear una estructura similar usando un ejemplo y haciendo uso de herramientas existentes en internet.
¿Qué recursos necesito para que funcione este ejemplo?
Básicamente necesitamos recursos existentes en el internet como ser:
b) jQuery para darle dinamismo al sistema y no actualice la página en cada petición que realiza el usuario final.
c) AJAX. Para comunicarse con el PHP para que realice el proceso de valoración y almacenamiento en MySQL.
d) MySQL. Usaremos este gestor de base de datos para almacenar las valoraciones de todos los usuarios que interactúan con el sistema.
¿Cómo funciona este script me gusta usando emojis?
Para ver el funcionamiento tenemos que cargar la página del script en nuestro LOCALHOST y/o servidor web en internet y tener vinculado con la base de datos. También, tiene que estar sus respectivas tablas y columnas.
La página nos mostrara una lista de tres elementos que contiene título y descripción, toda esa información es extraída de la base de datos.
Cada registro contiene una opción para el usuario pueda agregar gustos (reacciones). Por lo tanto, al pasar el mouse sobre la opción «me gusta», esta nos mostrar como un «Tooltips» emergente los iconos de emojis que podemos presionar y esta se agregara a la base de datos.
Facebook me gusta con emoji usando PHP jQuery
¿Cómo se registra o edita un «me gusta» ingresado?
Veamos. Cuando agrego o actualizo uno de mis gustos se hacen a través de AJAX para mostrar una sensación suave y no refrescar la página web al usuario mientras comparte sus emociones y gustos de esa publicación. Por lo tanto, al hacer clic en los iconos Emoji, la información del emoji se enviarán y procesarán en el código PHP a través de AJAX para registrar o actualizar la base de datos.
Los «me gusta» cuentan y las emociones únicas se almacenan en la base de datos y se muestran en cada fila (registro). Ahora, después de realizar la acción de agregar y/o actualizar, la interfaz gráfica de usuario se actualizará inmediatamente con la última calificación seleccionada de Emoji. Todo esto, sin recargar la página actual.
Estructura del sistema de calificación con Emoji
A continuación, veremos una serie de pasos para implementar nuestro script.
Código base de datos
Nuestra base de datos se llamará «php_like«. Ahora, dentro de esa base de datos tenemos que ejecutar la consultas que se encuentra líneas abajo.
La base de datos mencionada debe contener dos tablas.
- a) Tabla «tbl_rating». que será el encargado de almacenar las reacciones y los datos del usuario que interactuó con el sistema.
- b) Tabla «tutorial». Sera el encargado de almacenar las publicaciones en el cual el usuario tiene que reaccionar dándole una calificación. Esta tabla posee 3 campos: id, title, description.
Esta consulta lo podemos ejecutar usando PHPMyAdmin u otra plataforma para gestionar la información.
Fichero «php_like.sql»
CREATE TABLE IF NOT EXISTS `tbl_rating` ( `id` int(11) NOT NULL, `tutorial_id` int(11) NOT NULL, `member_id` int(11) NOT NULL, `rating` varchar(25) CHARACTER SET latin1 NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8; -- -- Volcado de datos para la tabla `tbl_rating` -- INSERT INTO `tbl_rating` (`id`, `tutorial_id`, `member_id`, `rating`) VALUES (1, 1, 6, 'smile'), (2, 2, 6, 'love'), (3, 3, 6, 'love'), (4, 1, 7, 'like'), (5, 2, 7, 'angry'), (6, 3, 7, 'like'), (7, 1, 8, 'wow'), (8, 2, 8, 'sad'); -- -------------------------------------------------------- CREATE TABLE IF NOT EXISTS `tutorial` ( `id` int(8) NOT NULL, `title` varchar(255) CHARACTER SET utf8 NOT NULL, `description` text CHARACTER SET utf8 NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1; -- Volcado de datos para la tabla `tutorial` INSERT INTO `tutorial` (`id`, `title`, `description`) VALUES (1, 'Manual del lenguaje jQuery', 'JQuery es una librería de JavaScript (JavaScript es un lenguaje de programación muy usado en desarrollo web). Esta librería de código abierto, simplifica la tarea de programar en JavaScript y permite agregar interactividad a un sitio web sin tener conocimientos del lenguaje. '), (2, 'Lista Feed PHP', 'Muchas veces nos hemos preguntado como generar feed RSS para nuestros blogs o sistema de noticias. Al igual que muchos, yo pensaba que era una tarea más que dura, pero con observación y un poco de ingenio todo se puede.'), (3, 'jQuery AJAX Autocompletar', 'Utilizamos la función keyup de jQuery para capturar los eventos del teclado en este campo. Obtenemos el valor del input y se lo pasamos al archivo “ajax.php” mediante la técnica Ajax. La parte más interesante está en el success, observa los comentarios para entenderlo.'); ALTER TABLE `tbl_rating` ADD PRIMARY KEY (`id`), ADD KEY `tut_rate_id` (`tutorial_id`); -- -- Indices de la tabla `tutorial` -- ALTER TABLE `tutorial` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- ALTER TABLE `tbl_rating` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=9; -- -- AUTO_INCREMENT de la tabla `tutorial` -- ALTER TABLE `tutorial` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4;
Fichero index.php
Este fichero, posee la interfaz gráfica que será mostrada al usuario y tendrá los datos de emociones almacenados para cada registro en la carga de página. Por lo tanto, estos datos se actualizarán a través de AJAX en cada acción similar realizada por el usuario.
Existe una variable llamada «$member_id» que podemos jalar información de una tabla usuarios para poder reemplazar y nos quedaría un sistema dinámico.
<?php
// Aquí la identificación del miembro está codificada.
// Puede integrar su código de autenticación aquí para obtener el ID de miembro registrado
$member_id = 8;
$emojiArray = array("like", "love", "smile", "wow", "sad", "angry");
require_once ("Like.php");
$rate = new Rate();
$result = $rate->getAllPost();
?>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Facebook me gusta con emoji usando PHP jQuery | BaulPHP</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</script>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container">
<h3 class="mt-5">Facebook me gusta con emoji usando PHP jQuery</h3>
<hr>
<div class="row">
<div class="col-12 col-md-10">
<!-- Contenido -->
<table class="demo-table">
<tbody>
<?php
if (! empty($result)) {
$i = 0;
foreach ($result as $tutorial) {
$ratingResult = $rate->getRatingByTutorialForMember($tutorial["id"], $member_id);
$ratingVal = "";
if (! empty($ratingResult[0]["rating"])) {
$ratingVal = $ratingResult[0]["rating"];
}
?>
<tr>
<td valign="top">
<div class="feed_title"><?php echo $tutorial["title"]; ?></div>
<div><?php echo $tutorial["description"]; ?></div>
<div id="tutorial-<?php echo $tutorial["id"]; ?>"
class="emoji-rating-box">
<input type="hidden" name="rating" id="rating"
value="<?php echo $ratingVal; ?>" />
<div class="emoji-section">
<a class="like-link"
onmouseover="showEmojiPanel(this)"
onmouseout="hideEmojiPanel(this)"><img
src="like.png" /> Like</a>
<ul class="emoji-icon-container">
<?php
foreach ($emojiArray as $icon) {
?>
<li><img src="icons/<?php echo $icon; ?>.png" class="emoji-icon"
data-emoji-rating="<?php echo $icon; ?>"
onClick="addUpdateRating(this, <?php echo $tutorial["id"]; ?>)" /></li>
<?php
}
?>
</ul>
</div>
<div
id="emoji-rating-count-<?php echo $tutorial["id"]; ?>"
class="emoji-rating-count">
<?php
if (! empty($tutorial["rating_count"])) {
echo $tutorial["rating_count"] . " Likes";
?>
<?php
if (! empty($tutorial["emoji_rating"])) {
$emojiRatingArray = explode(",", $tutorial["emoji_rating"]);
foreach ($emojiRatingArray as $emojiData) {
?>
<img
src="icons/<?php echo $emojiData; ?>.png"
class="emoji-data" />
<?php
}
}
} else {
?>
No Ratings
<?php } ?>
</div>
</div>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<!-- Fin Contenido -->
</div>
</div>
<!-- Fin row -->
</div>
<!-- Fin container -->
<footer class="footer">
<div class="container"> <span class="text-muted">
<p>Códigos <a href="https://baulphp.com/" target="_blank">BaulPHP</a></p>
</span> </div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="dist/js/bootstrap.min.js"></script>
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>Mostrar emojis y Añadir calificación mediante jQuery AJAX
Este script jQuery muestra las funciones creadas para mostrar y/o ocultar iconos de los Emoji cuando el mouse se posa por encima del elemento «Me Gusta» en la interfaz de usuario. Además, contiene la función para procesar la calificación de Añadir/actualizar Emoji a través de AJAX.
<title>Facebook me gusta con emoji usando PHP jQuery | BaulPHP</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
function showEmojiPanel(obj) {
$(".emoji-icon-container").hide();
$(obj).next(".emoji-icon-container").show();
}
function hideEmojiPanel(obj) {
setTimeout(function() {
$(obj).next(".emoji-icon-container").hide();
}, 2000);
}
function addUpdateRating(obj,id) {
$(obj).closest(".emoji-icon-container").hide();
$.ajax({
url: "AgregarActualizarLike.php",
data:'id='+id+'&rating='+$(obj).data("emoji-rating"),
type: "POST",
success: function(data) {
$("#emoji-rating-count-"+id).html(data);
}
});
}
</script>
CONCLUSIÓN
- La valoración de una publicación es muy importante para una empresa. Por lo tanto, con ese resultado podemos ver la aceptación de nuestros clientes y tomar decisiones correctivas, acerca de productos, servicios, etc.
- La implementación es muy sencilla y la curva de aprendizaje es muy baja.
- Les recomiendo que lo prueben y puedan implementar en sus sistemas web y/o páginas web. Saludos cordiales y les dejare un paquete de instalación.
Descargar
Vinculo para descargar el ejemplo completo más la base de datos del sistema.
Descargar Código