Star Rating System con Ajax, PHP y MySQL

Star Rating System con Ajax, PHP y MySQL. En este artículo veremos la implementación de un sistema de valoración escrito con los lenguajes: PHP, MySQL, HTML5, jQuery. Los sistemas de calificación y de revisión de «estrellas» o «Me gusta» son muy usados en portales de comercio electrónico para permitir a los clientes dar comentarios sobre los productos comprados.

Por lo tanto, esas valoraciones también influyen a la compra a los potenciales clientes que visitan nuestro portal web buscando productos para comprar.

Los sistemas de clasificación de 5 estrellas son muy usados permitiendo a los usuarios pueden calificar productos con estrellas de uno a cinco y también dar comentarios de retroalimentación para el historial del producto. Sin embargo, si estás buscando un simple sistema de valoración y comentarios estás aquí en el lugar correcto.

En este artículo nos enfocaremos en desarrollar un sistema de cinco estrellas de evaluación y revisión de inicio utilizando Ajax, PHP y MySQL.

Star Rating System con Ajax, PHP y MySQL

A continuación, veremos una serie de procesos y recursos que necesitamos para que nuestro proyecto funcione.

Ficheros que necesitamos para el sistema valoración

• Index.php .- Archivo principal que almacenara el sistema de valoración.
• header.php. – Este archivo contiene las librería externas para darle dinamismo al sistema.
• footer.php.- Pie de página de nuestro sistema
• Rating. js.- Script jQuery encargado de almacenar los registros sin actualizar la página.
• container.php.- Consta de elementos iniciales de la página web.
• saveRating. php.- Guarda la información en la base de datos.
• php_rating.sql.- Fichero que contiene las consultas que deben ser ejecutadas en el PHPMyAdmin.
• conexion.php.- Vendría ser el motor del sistema porque es el encargado de realizar la conexión de PHP a MySQL.

Estructura de nuestro star rating system con ajax

a) Paso 1: Crear la tabla de base de datos llamado «item_rating»

Recordemos que hoy en día todo lo que hacemos tiene que quedar registrado y más aún si son valoraciones. Por lo tanto, necesitamos crear la tabla de base de datos MySQL «item_rating» para almacenar la calificación y comentarios de los usuarios.

CREATE TABLE `item_rating` (
  `ratingId` int(11) NOT NULL,
  `itemId` int(11) NOT NULL,
  `userId` int(11) NOT NULL,
  `ratingNumber` int(11) NOT NULL,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `comments` text COLLATE utf8_unicode_ci NOT NULL,
  `created` datetime NOT NULL,
  `modified` datetime NOT NULL,
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1 = Block, 0 = Unblock'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `item_rating` (`ratingId`, `itemId`, `userId`, `ratingNumber`, `title`, `comments`, `created`, `modified`, `status`) VALUES
(1, 12345678, 1234567, 5, 'Buen Recurso', 'Espero que continuen asi', '2019-01-04 01:21:40', '2019-01-04 01:21:40', 1),
(2, 12345678, 1234567, 4, 'Valorando este recurso', 'Gracias por compartir', '2019-01-04 01:23:24', '2019-01-04 01:23:24', 1),
(3, 12345678, 1234567, 3, 'Falta recursos', 'EL articulo le falta mas informacion.', '2019-01-04 01:33:42', '2019-01-04 01:33:42', 1);


ALTER TABLE `item_rating`
  ADD PRIMARY KEY (`ratingId`);

ALTER TABLE `item_rating`
  MODIFY `ratingId` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
COMMIT;

b) Paso 2: crear la calificación y formulario de revisión

El fichero index. php será el encargado de almacenar el formulario de calificación y revisión con cinco estrellas

<div class="row">
<div class="col-sm-12">
<form id="ratingForm" method="POST">					
    <div class="form-group">
        <h4>Calificar este producto</h4>
        <button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        <input type="hidden" class="form-control" id="rating" name="rating" value="1">
        <input type="hidden" class="form-control" id="itemId" name="itemId" value="12345678">
    </div>		
    <div class="form-group">
        <label for="usr">Titulo*</label>
        <input type="text" class="form-control" id="title" name="title" required>
    </div>
    <div class="form-group">
        <label for="comment">Comentario*</label>
        <textarea class="form-control" rows="5" id="comment" name="comment" required></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-info" id="saveReview">Guardar Valoracion</button> <button type="button" class="btn btn-info" id="cancelReview">Cancelar</button>
    </div>			
</form>
</div>
</div>
</div>				

c) Paso 3: Formulario de calificación y revisión enviar y guardar con jQuery Ajax

La dinámica del sistema lo maneja el archivo «rating. js«. Por lo tanto,  manejaremos un formulario para enviar con jQuery y también con el PHP a través del fichero «saveRating. php«, para almacenar los registros de valoración en la tabla de base de datos.

$('#ratingForm').on('submit', function(event){
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'saveRating.php',
data : formData,
success:function(response){
$("#ratingForm")[0].reset();
window.setTimeout(function(){window.location.reload()},1000)
}
});
});

d) Paso 4: Guardar clasificación y revisión

Para almacenar las valoraciones usaremos el archivo «saveRating. php«. Este fichero será el encargado de almacenar la información en la base de datos llamado «php_rating» y la tabla llamada «item_rating«.

<?php
include_once("conexion.php");
if(!empty($_POST['rating']) && !empty($_POST['itemId'])){
$itemId = $_POST['itemId'];
$userID = 1234567;
$insertRating = "INSERT INTO item_rating (itemId, userId, ratingNumber, title, comments, created, modified) VALUES ('".$itemId."', '".$userID."', '".$_POST['rating']."', '".$_POST['title']."', '".$_POST["comment"]."', '".date("Y-m-d H:i:s")."', '".date("Y-m-d H:i:s")."')";
mysqli_query($conn, $insertRating) or die("database error: ". mysqli_error($conn));
echo "rating saved!";
}
?>

e) Paso 5: Visualización de la clasificación

En el archivo index. php, se mostrarán los usuarios de la clasificación guardada y se revisarán los detalles de la tabla de base de datos item_rating con la calificación de estrellas de los usuarios para mostrar la estrella de calificación seleccionada.

CONCLUSIÓN DEL SISTEMA VALORACIÓN

Sí, estamos pensando implementar un portal para comercio electrónico, es imprescindible también implementar un sistema de valoración con comentarios. Sin embargo, mediante este sistema podemos apreciar lo que opina nuestros clientes.

Su uso es muy recomendable, si observamos grandes paginas como ser: Facebook, Google, YouTube usan este tipo de valoración para poder apreciar lo que sus clientes piensan de un determinado producto.

DESCARGA DEL SCRIPT VALORACIÓN

A continuación, les dejare un script completo para que puedan descargarlo y probarlo en sus sistemas web. Espero, que les sea de mucha utilidad.