Clasificación de estrellas con PHP: ejemplo completo
Script de clasificación por estrellas usando PHP y MySQL con AJAX
Clasificación de estrellas con PHP. Vamos a crear un sistema de clasificación escrito en PHP y MySQL como almacenamiento y usaremos Ajax para manejar los eventos.
¿Cómo conocer la valoración de tus lectores o clientes sobre el contenido de tu sitio web?
Una de las opciones es usar la clasificación por estrellas y es una característica que se utiliza en diferentes sitios web. Sin embargo, mediante esta técnica podemos saber con claridad el sentir de los usuarios acerca de un determinado artículo, producto y/o servicio.
¿Cómo ayuda la función de calificación por estrellas a recopilar las opiniones de los clientes?
La clasificación por estrellas te ayuda a saber cómo las personas clasifican tu contenido. No solo da rango en su contenido. Además, una de las más importantes ventajas es atraer a más lectores a su página por la calificación ganada de los demás usuarios que han calificado.
Existen varias formas de permitir la valoración de un sitio web, a menudo los sitios web utilizan una variedad de formas de permitir a los usuarios calificar el contenido. Por ejemplo,
- Calificación por estrellas
- Botón de calificación hacia arriba y hacia abajo,
- Usando calificación emoji y más.
Hemos visto tantos ejemplos de calificación de estrellas, calificación de emoji y más. Agrupo a todos ellos en este único ejemplo.
Admití tres alternativas de interfaz de usuario para la sección de calificación. Esos son,
- Cinco estrellas rating (star rating)
- Favorita rating(corazones)
- Emojis rating (emoji)
Creé una directiva en PHP para configurar la plantilla para la apariencia de calificación.
Ventajas de crear calificación por estrellas personalizada
Con una calificación de estrellas personalizada, podemos simplificar la lógica del código en lugar de rellenar mucho.
Y así, te lo pondrá fácil en el momento de la fase de mejora o mantenimiento.
Rectifica su sobrecarga con una función incorporada repleta de funciones. Además, reduce su esfuerzo en la gestión de mil líneas de código para esta sencilla función de interfaz de usuario.
Tipos de opciones de calificación
Los sitios web utilizan un tipo diferente de opciones de calificación para obtener las opiniones de los usuarios. La siguiente lista muestra algunos de los tipos.
- Rating de una o varias estrellas
- Calificación de emoji similar a Facebook
- Votación simple hacia arriba y hacia abajo.
- Calificación similar a diferente
- Rating usando barra
Clasificación por estrellas con AJAX
Hemos creado un código de ejemplo de calificación de estrellas basado en AJAX con PHP y jQuery.
Este código mostrará una lista de cursos con una opción para calificar cada curso. Los cursos son de la base de datos.
El elemento de calificación en la interfaz de usuario se puede configurar. Proporcioné tres alternativas de interfaz de usuario para la sección de calificación. Las calificaciones de estrellas, favoritos y emoji están ahí para recopilar las reseñas de los usuarios.
Al agregar la calificación, el código la envía a PHP a través de AJAX. Luego, guarda las calificaciones en la base de datos MySQL.
Una vez calificado, el usuario no puede volver a calificar un curso para evitar calificaciones duplicadas.
La base de datos de clasificación
En esta sección se muestra el SQL de la base de datos utilizada en este ejemplo.
Usaremos dos tablas tbl_courses y tbl_course_rating. Sin embargo, la tabla tbl_cources contiene cursos en los que el usuario agregará calificaciones.
La tabla tbl_cource_rating será el encargado de almacenar las valoraciones de los cursos por parte de los visitantes. además, se le ha asignado una calificación única sin duplicados.
El siguiente script muestra la consulta SQL y la instrucción CREATE y el volcado de datos para estas dos tablas. Al importar este script, puede configurar este ejemplo en el entorno local.
sql/db_blog.sql
CREATE TABLE `tbl_course` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`description` varchar(255) NOT NULL,
`period` varchar(255) NOT NULL,
`availabe_seats` int(11) NOT NULL,
`last_date_to_register` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
INSERT INTO `tbl_course` (`id`, `name`, `description`, `period`, `availabe_seats`, `last_date_to_register`) VALUES
(1, 'Formación Profesional para Analista Financiero', 'Formación Profesional para Analista Financiero', '30 dias', 2, '2022-01-31'),
(2, 'Programación Empresarial en Inteligencia Artificial', 'Programación Empresarial en Inteligencia Artificial', '30 dias', 2, '2022-11-16'),
(3, 'Curso programación avanzada en JAVA', 'Curso programación avanzada en JAVA', '3 Meses', 4, '2022-07-12');
CREATE TABLE `tbl_course_rating` (
`id` int(11) NOT NULL,
`course_id` int(11) NOT NULL,
`member_id` int(11) NOT NULL,
`rating` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `tbl_course`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tbl_course_rating`
ADD PRIMARY KEY (`id`),
ADD KEY `course_id` (`course_id`);
ALTER TABLE `tbl_course`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
ALTER TABLE `tbl_course_rating`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
ALTER TABLE `tbl_course_rating`
ADD CONSTRAINT `tbl_course_rating_ibfk_1` FOREIGN KEY (`course_id`) REFERENCES `tbl_course` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;Clasificación de estrellas con PHP: Diseño
En una página de destino, muestra la lista de cursos de la base de datos. El código HTML de esta página se encuentra a continuación.
Carga el elemento de clasificación basado en la constante PHP definida en un archivo de configuración común.
El elemento de clasificación mostrará iconos de 5 estrellas o favoritos o emojis en los que se puede hacer clic.
Al hacer clic en el elemento de clasificación, invoca un script jQuery para enviar solicitudes AJAX para guardar calificaciones.
Fichero index.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Star Rating Script con PHP</title>
<link href="./assets/css/rating-style.css" type="text/css"
rel="stylesheet" />
<link href="./assets/css/star-rating-style.css" type="text/css"
rel="stylesheet" />
<script src="./vendor/jquery/jquery-3.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link href="./assets/css/offcanvas.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
<img class="mr-3" src="./img/menu.svg" alt="" width="48" height="48">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">Cursos programados</h6>
<small>Periodo 2022</small>
</div>
</div>
<div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2 mb-0">Recientes actualizaciones</h6>
<?php require_once "getRatingData.php"; ?>
</div>
</main>
</div>
<script src="./assets/js/rating.js"></script>
</body>
</html>jQuery funciona para manejar la acción de calificación de usuarios
Este archivo contiene funciones jQuery para preparar solicitudes AJAX para guardar las calificaciones de los usuarios.
También controla los eventos de desplazamiento del mouse para resaltar el elemento de calificación. La función mouseOverRating() resalta la estrella u otros elementos de clasificación al pasar el cursor.
Del mismo modo, mouseOutRating() restablece la interfaz de usuario de clasificación a su forma original al salir del mouse.
El código AJAX en addRating() prepara la solicitud con LA URL del extremo PHP y los parámetros de datos.
Recibe la respuesta del servidor en la devolución de llamada de éxito AJAX en la que actualiza la interfaz de usuario en consecuencia.
activos/js/rating.js
function mouseOverRating(courseId, rating, appearance) {
if (appearance == "star") {
for (var i = 1; i <= rating; i++) {
$('#' + courseId + "_" + i + ' img').attr('src',
"./img/" + appearance + "-filled.png");
}
} else {
ratingIconPrefix = "./img/" + appearance;
for (var i = 1; i <= rating; i++) {
if (appearance == "emoji") {
ratingIconPrefix = "./img/" + appearance + "1";
}
if (i == rating) {
$('#' + courseId + "_" + i + ' img').attr('src',
ratingIconPrefix + "-filled.png");
}
}
}
}
function mouseOutRating(courseId, userRating, appearance) {
var ratingId;
if (appearance == "star") {
if (userRating != 0) {
for (var i = 1; i <= userRating; i++) {
$('#' + courseId + "_" + i + ' img').attr('src',
"./img/" + appearance + "-filled.png");
}
}
if (userRating <= 5) {
for (var i = (userRating + 1); i <= 5; i++) {
$('#' + courseId + "_" + i + ' img').attr('src',
"./img/" + appearance + "-open.png");
}
}
$(".selected img").attr('src', "./img/" + appearance + "-filled.png");
} else {
ratingIconPrefix = "./img/" + appearance;
if (userRating <= 5) {
for (var i = 1; i <= 5; i++) {
if (appearance == "emoji") {
ratingIconPrefix = "./img/" + appearance + i;
}
if (userRating == i) {
$('#' + courseId + "_" + i + ' img').attr('src',
ratingIconPrefix + "-filled.png");
} else {
$('#' + courseId + "_" + i + ' img').attr('src',
ratingIconPrefix + "-open.png");
}
}
}
var selectedImageSource = $(".selected img").attr('src');
if (selectedImageSource) {
selectedImageSource = selectedImageSource.replace('open', "filled");
$(".selected img").attr('src', selectedImageSource);
}
}
}
function addRating(currentElement, courseId, ratingValue, appearance) {
var loaderIcon = $(currentElement).closest(".row-item");
$.ajax({
url : "ajax-end-point/insertRating.php",
data : "index=" + ratingValue + "&course_id=" + courseId,
type : "POST",
beforeSend : function() {
$(loaderIcon).find("#loader-icon").show();
},
success : function(data) {
loaderIcon = $(currentElement).closest(".row-item");
$(loaderIcon).find("#loader-icon").hide();
if (data != "") {
$('#response-' + courseId).text(data);
return false;
}
if (appearance == 'star') {
$('#list-' + courseId + ' li').each(
function(index) {
$(this).addClass('selected');
if (index == $('#list-' + courseId + ' li').index(
currentElement)) {
return false;
}
});
} else {
$(currentElement).addClass('selected');
}
}
});
}Salida en el navegador
Conclusión
En este articulo hemos visto la importancia de implementar un script de calificación en una aplicación web. Además, hemos visto los tipos de calificaciones generalmente utilizadas por las aplicaciones.
Además, hemos implementado 3 tipos de componentes de interfaz de usuario de clasificación en un script de ejemplo, estoy seguro de que le ayuda a tener opciones. Puede elegir y arreglar uno de ellos según sea necesario.
No hay límites. Podemos mejorar este componente agregando más opciones de calificación como a diferencia, votación hacia arriba y hacia abajo, podemos agregar 1 una estrella hasta 10 estrellas.
Hemos usado MySQL para almacenar las votaciones de nuestros lectores.
Espero que esta explicación les ayude en sus proyectos web y no se olviden de compartir el artículo.
