La votación mediante estrellas se utiliza para puntuar páginas, artículos o posts publicados para el usuario final. Esto ayudará al usuario a identificar y preseleccionar los contenidos de calidad que tengan una buena puntuación. En este artículo, vamos a ver cómo crear un sistema de votación mediante estrellas con PHP y jQuery AJAX. En este ejemplo, calculamos la media de puntuación con estrellas del total enviadas.
El sistema de votación mostrará cinco estrellas clicables para cada uno de los artículos. Los tutoriales y sus votaciones se almacenan en la base de datos. Ojo, las votaciones se almacenarán junto a id de sesión del usuario. También puedes integrar tu módulo de autenticación para sustituirlo por el ID de sesión del usuario que inició la sesión.
Listar tutoriales
Utilizaremos el siguiente código para extraer los tutoriales de la base de datos y listarlos con la característica de votación mediante estrellas. Combinaré las tablas tutorials y tbl_member_rating usando LEFT JOIN para obtener la puntuación por estrellas junto con la información del tutorial. Para cada tutorial, veremos la calificación enviada por el usuario con la representación gráfica de las estrellas. Además, calculamos la media sobre 5 utilizando la calificación general del propio tutorial.
<?php
$member_id = 1;
require_once ("Rate.php");
$rate = new Rate();
$result = $rate->getAllPost();
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 id="tutorial-<?php echo $tutorial["id"]; ?>"
class="star-rating-box">
<input type="hidden" name="rating" id="rating"
value="<?php echo $ratingVal; ?>" />
<ul
onMouseOut="resetRating(<?php echo $tutorial["id"]; ?>);">
<?php
for ($i = 1; $i <= 5; $i ++) {
$selected = "";
if (! empty($ratingResult[0]["rating"]) && $i <= $ratingResult[0]["rating"]) {
$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"]; ?>);">★</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 "Average Star Rating is " . $average . " from the Total " . $tutorial["rating_count"] . " Ratings";
?>
<?php } else { ?>
No Ratings
<?php } ?>
</div>
</div>
<div><?php echo $tutorial["description"]; ?></div>
</td>
</tr>
<?php
}
}
?>
Puntuando vía jQuery AJAX
Este código jQuery muestra las funciones que utilizaremos para gestionar los eventos que se van a ejecutar durante el proceso de puntuar mediante estrellas. Por ejemplo, gestionar el efecto de hover para resaltar las estrellas o gestionar el evento de clic para enviar la puntuación. Se llamará a la función addRating() cuando se haga clic a una estrella para puntuar un tutorial. Esta función enviará una solicitud al código PHP para insertar la puntuación del tutorial.
<script src="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 + ' #rating').val((index + 1));
if (index == $('.demo-table #tutorial-' + id + ' li').index(obj)) {
return false;
}
});
$.ajax({
url : "add_rating.php",
data : 'id=' + id + '&rating='
+ $('#tutorial-' + id + ' #rating').val(),
type : "POST",
success : function(data) {
$("#star-rating-count-" + id).html(data);
}
});
}
function resetRating(id) {
if ($('#tutorial-' + id + ' #rating').val() != 0) {
$('.demo-table #tutorial-' + id + ' li').each(function(index) {
$(this).addClass('selected');
if ((index + 1) == $('#tutorial-' + id + ' #rating').val()) {
return false;
}
});
}
}
</script>
En el PHP, recibiremos la información de la puntuación junto con el ID del tutorial. Si el tutorial ya está votado por el usuario, el registro se actualizará con la nueva votación. Si no, se agregará un nuevo registro a la tabla de la base de datos tbl_member_rating. Aquí podéis ver el código.
<?php
$member_id = 1;
if (! empty($_POST["rating"]) && ! empty($_POST["id"])) {
require_once ("Rate.php");
$rate = new Rate();
$ratingResult = $rate->getRatingByTutorial($_POST["id"], $member_id);
if (! empty($ratingResult)) {
$rate->updateRating($_POST["rating"], $ratingResult[0]["id"]);
} else {
$rate->addRating($_POST["id"], $_POST["rating"], $member_id);
}
$postRating = $rate->getRatingByTutorial($_POST["id"]);
if (! empty($postRating[0]["rating_total"])) {
$average = round(($postRating[0]["rating_total"] / $postRating[0]["rating_count"]), 1);
echo "Average Star Rating is " . $average . " from the Total " . $postRating[0]["rating_count"] . " Ratings";
} else {
echo "No Ratings";
}
}
?>