Portada » Lenguaje PHP » Sistema de valoración con PHP y JQuery Ajax

Sistema de valoración con PHP y JQuery Ajax

Sistema de valoración con PHP y JQuery Ajax. La valoración de estrellas se utiliza para darle autoridad a un artículo o producto, etc., acerca de la aceptación del mismo por parte del usuario. Esto incentivara al usuario a identificar y seleccionar los contenidos de calidad. En este tutorial, desarrollaremos un sistema de valoración con php utilizando jQuery Ajax.

Sistema de valoración con PHP y JQuery Ajax

Este ejemplo de calificación de tipo estrellas muestra las cinco estrellas por defecto, pudiendo incrementarse si lo desea. El usuario debe hacer clic para cada registro devuelto de MySQL para agregar su valoración respectiva. En este ejemplo se almacenan en la base de datos el clic que le dan los usuarios al resultado que le fascina. La calificación se puede agregar un inicio de sesión para poder identificar de manera fehaciente a cada usuario.

Sistema de valoración con PHP
Sistema de valoración con PHP

Lista de resultados con calificación y/o valoración de estrellas

Veamos cómo recuperar los datos del tutorial de la base de datos. Sin embargo tenemos que enumerarlos para asignarle una determinada calificación de estrella.

Se tiene que combinar las tablas guarda_valoracion y tutoriales y usaremos Left join para obtener como resultado la valoración de estrellas. Para cada resultado que se vea, se agregara una calificación del mismo y será visible mediante estrellas haciendo uso de jQuery. También calcula las estrellas que el usuario presiona.

La base de datos MySQL con su respectiva tabla

Para este ejemplo usaremos dos tablas llamadas guarda_valoracion y otra con el nombre tutorial.

-- Base de datos: `valoracion`

CREATE TABLE `guarda_valoracion` (
  `id` int(11) NOT NULL,
  `tutorial_id` int(11) NOT NULL,
  `miembro_id` int(11) DEFAULT NULL,
  `valoracion` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT;

INSERT INTO `guarda_valoracion` (`id`, `tutorial_id`, `miembro_id`, `valoracion`) VALUES
(1, 1, 1, 4),
(2, 2, 1, 5);


CREATE TABLE `tutorial` (
  `id` int(8) NOT NULL,
  `mititulo` varchar(200) CHARACTER SET utf8 DEFAULT NULL,
  `midescripcion` text CHARACTER SET utf8
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `tutorial` (`id`, `mititulo`, `midescripcion`) VALUES
(1, 'El soldadito de plomo', 'Habia una vez 5 soldaditos de plomo, hermanos todos, ya que los habian fundido y trabajado bajo el mismo plomo. Asi eran fuertes con la mirada al frente, pecho erguido y sus pantalones azules. '),
(2, 'La caperucita roja', 'La historia nos relata acerca de una nena que fue a visitar a su abuelita y que un lobo malvado se lo comio en el bosque.');

--
-- Indices de la tabla `guarda_valoracion`
--
ALTER TABLE `guarda_valoracion`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `tutorial`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `guarda_valoracion`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

ALTER TABLE `tutorial`
  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

Añadir calificación a través de JQuery Ajax

Este código jQuery muestra las funciones que se utilizan para controlar los eventos lanzados durante el proceso de adición de la valoración de estrellas.

Creación del fichero index.php

<?php
// En este apartado se puede agregar sesion para usuarios registrados
$member_id = 1;
require_once ("Valoracion.php");
$rate = new Rate();
$result = $rate->getAllPost();
?>
<!DOCTYPE html>
<html>
<head>
<title>Busqueda PHP MySQL Ajax</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>function highlightStar(obj,id) {
	removeHighlight(id);		
	$('.demo-table #tutorial-'+id+' li').each(function(index) {
		$(this).addClass('highlight');
		if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
			return false;	
		}
	});
}

function removeHighlight(id) {
	$('.demo-table #tutorial-'+id+' li').removeClass('selected');
	$('.demo-table #tutorial-'+id+' li').removeClass('highlight');
}

function addRating(obj,id) {
	$('.demo-table #tutorial-'+id+' li').each(function(index) {
		$(this).addClass('selected');
		$('#tutorial-'+id+' #valoracion').val((index+1));
		if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
			return false;	
		}
	});
	$.ajax({
	url: "Agregar_valoracion.php",
	data:'id='+id+'&valoracion='+$('#tutorial-'+id+' #valoracion').val(),
	type: "POST",
    success: function(data) {
        $("#star-rating-count-"+id).html(data);    
        }
	});
}

function resetRating(id) {
	if($('#tutorial-'+id+' #valoracion').val() != 0) {
		$('.demo-table #tutorial-'+id+' li').each(function(index) {
			$(this).addClass('selected');
			if((index+1) == $('#tutorial-'+id+' #valoracion').val()) {
				return false;	
			}
		});
	}
} </script>

</HEAD>
<BODY>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="./">BaulPHP</a> </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li ><a href="./">INICIO <span class="sr-only">(current)</span></a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h2>Valoración PHP MySQL</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
<div class="panel-body">

<!--Inicio elementos contenedor-->

<table class="demo-table">
        <tbody>
            <tr> 
                <th><strong>Sistema de valoracion PHP y jQuery</strong></th>
            </tr>
<?php
if (! empty($result)) {
    $i = 0;
    foreach ($result as $tutorial) {
        $ratingResult = $rate->getRatingByTutorialForMember($tutorial["id"], $member_id);
        $ratingVal = "";
        if (! empty($ratingResult[0]["valoracion"])) {
            $ratingVal = $ratingResult[0]["valoracion"];
        }
        ?>
<tr>
                <td valign="top">
                    <div class="feed_title"><?php echo $tutorial["mititulo"]; ?></div>
                    
                    <div><?php echo $tutorial["midescripcion"]; ?></div>
                    <div id="tutorial-<?php echo $tutorial["id"]; ?>"
                        class="star-rating-box">
                        <input type="hidden" name="valoracion" id="valoracion"
                            value="<?php echo $ratingVal; ?>" />
                        <ul
                            onMouseOut="resetRating(<?php echo $tutorial["id"]; ?>);">
  <?php
        for ($i = 1; $i <= 5; $i ++) {
            $selected = "";
            if (! empty($ratingResult[0]["valoracion"]) && $i <= $ratingResult[0]["valoracion"]) {
                $selected = "selected";
            }
            ?>
  <li class='<?php echo $selected; ?>'
                                onmouseover="highlightStar(this,<?php echo $tutorial["id"]; ?>);"
                                onmouseout="removeHighlight(<?php echo $tutorial["id"]; ?>);"
                                onClick="addRating(this,<?php echo $tutorial["id"]; ?>);">&#9733;</li>  
  <?php }  ?>
</ul>
                        <div
                            id="star-rating-count-<?php echo $tutorial["id"]; ?>"
                            class="star-rating-count">
                                <?php
        
        if (! empty($tutorial["rating_total"])) {
            $average = round(($tutorial["rating_total"] / $tutorial["rating_count"]), 1);
            echo "La calificación promedio es " . $average . " del Total " . $tutorial["rating_count"] . " Valoración";
            ?>
                                
                                <?php } else { ?>
                                No hay valoración
                                <?php  } ?>
                                </div>

                    </div>
                    
                </td>
            </tr>
<?php
    }
}
?>
</tbody>
    </table>
<!--Fin elementos contenedor-->
</div>
</div>
  </div>
</div>
<div class="panel-footer">
  <div class="container">
    <p>Códigos <a href="https://baulphp.com/" target="_blank">BaulPHP</a></p>
  </div>
</div>

</body>
</html>

Fichero Valoracion.php para agregar/actualizar calificación de estrellas.

Estas líneas de código recibe los datos con el ID. Si el resultado ya está clasificado por el usuario, este registro se actualizará con la nueva clasificación enviada. Caso contrario, se añade un nuevo registro a la base de datos para almacenarlo.

   function addRating($tutorial_id, $valoracion, $miembro_id)
    {
        $query = "INSERT INTO guarda_valoracion (tutorial_id,valoracion,miembro_id) VALUES (?, ?, ?)";
        
        $params = array(
            array(
                "param_type" => "i",
                "param_value" => $tutorial_id
            ),
            array(
                "param_type" => "i",
                "param_value" => $valoracion
            ),
            array(
                "param_type" => "i",
                "param_value" => $miembro_id
            )
        );
        
        $this->updateDB($query, $params);
    }

    function updateRating($valoracion, $rating_id)
    {
        $query = "UPDATE guarda_valoracion SET  valoracion = ? WHERE id= ?";
        
        $params = array(
            array(
                "param_type" => "i",
                "param_value" => $valoracion
            ),
            array(
                "param_type" => "i",
                "param_value" => $rating_id
            )
        );
        
        $this->updateDB($query, $params);
    }
}
Sistema de valoración con PHP y JQuery Ajax
Sistema de valoración con PHP y JQuery Ajax

CONCLUSIÓN

Implementar un sistema de valoración en una página web o proyecto web es muy importante. Sin embargo, de esta calificación estaremos viendo lo que opinan los usuarios y cual registro tiene más relevancia el uno del otro. Por lo tanto, de acuerdo con esta valoración podemos tomar decisiones correctas.

DESCARGA

Descargar código fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 4 / 5. Recuento de votos: 5

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad