jQuery Star Rating con PHP

Hoy en día, el sistema de clasificaciones más utilizado en Internet es sin duda alguna, las estrellas de clasificación o también conocido técnicamente como star rating, habitualmente acompañada de testimonios o comentarios del usuario o cliente.

Las estrellas se utilizan a menudo como símbolos para las calificaciones. Los revisores los utilizan para clasificar cosas como películas, programas de televisión, restaurantes y hoteles. Por ejemplo, un sistema de una a cinco estrellas se emplea comúnmente para calificar hoteles, con cinco estrellas siendo la más alta calidad.

En la mayoría de sitios que ofrecen productos u servicios casi siempre aparecen estas dichosas estrellas acompañadas de mensajes o comentarios que pueden ser positivos o negativos sobre un artículo, producto o servicio.

También puedes encontrar estas estrellas de valoración en blogs o páginas webs que solo facilitan información y desean permitir al lector valorar una entrada o una página y de esa forma conocer si su contenido es de calidad.

Para situarte en una escena, imagínate que tenemos una página Web que emite noticias de forma dinámica. Podríamos hacer que los usuario puedan valorar dichas noticias mediante un sistema de votación dinámico como podría ser el típico o más popular sistema de valoración mediante estrellas, Star rating.

El sistema de clasificación es simple, 1 estrella indica que el artículo no satisface y 5 estrellas representa que el grado de satisfacción es máximo. Cuando un artículo ha recibido varias calificaciones aparece la media de los valores pintado. A menudo aparece al lado el total de valoraciones y la nota media que ha recibido un artículo en lo larga de su historia.

En este artículo vas a averiguar como convertir unos campos de tipo “radio” en estrellas de valoración para poder seleccionar y enviar. Los datos son recibidos por el servidor con PHP para procesarlos fácilmente.

También se podría hacer por Ajax pero, no es lo que deseamos ilustrar en este caso. Dejamos anotado enviar las estrellas de valoración vía Ajax para un futuro tutorial.

En la cabecera de la página o dentro de la etiqueta <head> agrega las librerías y scripts necesarios:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/jquery.rating.pack.js"></script>
<script>
$(document).ready(function(){
    $('input.star').rating();
});
</script>

Para hacer funcionar las estrellas de valoración nos apoyamos en la librería jQuery v2.2.4 y el plugin jQuery Star Rating v2.0.

Creamos una llamada simple al plugin star rating y él mismo se encarga de convertir todos los inputs con class=”star” que tengamos en la página en estrellas de valoración.

El código anterior también puede ser agregado antes de la etiqueta de cierre del cuerpo de la página, es decir, antes de la etiqueta de cierre </body>.

En el cuerpo de la página o dentro del <body> puedes agregar algo como lo que sigue:

<form action="index.php" method="post">
    <div class="star_content">
        <input name="rate" value="1" type="radio" class="star"/> 
        <input name="rate" value="2" type="radio" class="star"/> 
        <input name="rate" value="3" type="radio" class="star"/> 
        <input name="rate" value="4" type="radio" class="star" checked="checked"/> 
        <input name="rate" value="5" type="radio" class="star"/>
    </div>
    <button type="submit" name="submitRatingStar" class="btn btn-primary btn-sm">Enviar</button>
</form>

El código anterior no es más que un formulario que contiene los campos de tipo “radio” que serán convertidos en estrellas y un botón para enviarlo.

El código PHP que recibe la información puede ser tan simple como lo siguiente:

<?php
if (isset($_POST['submitRatingStar'])) {
    //procesar el rating
    echo '<div class="alert alert-success">Rating recibido: <strong>'.$_POST['rate'].'</strong>.</div>';
}
?>

Ahora solo te queda agregar un poco de código CSS en tu hoja de estilos:

.star_content {
    margin-bottom: 5px;
    float: left;
    width: 100%;
}
 
.star {
    overflow: hidden;
    float: left;
    margin: 0 1px 0 0;
    width: 16px;
    height: 18px;
    cursor: pointer;
}
 
.star a {
    display: block;
    width: 100%;
    background-position: 0 0;
}
 
.star {
    position: relative;
    top: -1px;
    float: left;
    width: 14px;
    overflow: hidden;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
}
 
.star a {
    display: block;
    position: absolute;
    text-indent: -5000px;
}
 
div.star:after {
    content: "\f006";
    font-family: "FontAwesome";
    display: inline-block;
    color: #777676;
}
 
div.star.star_on {
    display: block;
}
 
div.star.star_on:after {
    content: "\f005";
    font-family: "FontAwesome";
    display: inline-block;
    color: #ef8743;
}
 
div.star.star_hover:after {
    content: "\f005";
    font-family: "FontAwesome";
    display: inline-block;
    color: #ef8743;
}

En este momento deseo destacar que las estrellas que se visualizan en este ejemplo no son imágenes. Debes incorporar la fuente Font Awesome en tu sitio Web para que se muestre correctamente. De esta forma, el rendimiento es mucho mejor.

Siempre es interesante potenciar la interacción del usuario en una página web o tienda Online. Las estrellas de valoración son atractivas y todo el mundo que navega por Internet conoce su significado. Dan credibilidad y confianza sobre el producto o servicio que se está vendiendo si en la misma página hay valoraciones y comentarios positivos. ¿A qué esperar para incorporar este sistema de calificaciones en tu página Web?

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre