Consegui fazer o sistema de star rating, porém eu queria que o voto fosse mostrado na tela ou guardado na estrela, para ela ficar preenchida conforme os votos. Alguém poderia me ajudar, aqui esta meu código:
Essa é a pagina em que estão as estrelas:
<script>
$(document).ready(function () {
$(".vote #stars").click(function () {
$.post('rating.php',{rate:$(this).val()},function(d){
if(d>0)
{
alert('Seu voto Ja foi confirmado');
}else{
alert('Obrigado por Votar');
}
});
$(this).attr("checked");
});
});
</script>
<div class="vote">
<label>
<input id="stars" type="radio" name="fb" value="1" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="2" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="3" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="4" />
<i class="fa" id="fa"></i>
</label>
<label>
<input id="stars" type="radio" name="fb" value="5" />
<i class="fa" id="fa"></i>
</label>
</div>
Aqui o script para o hover
nas estrelas e para marcá-las como actives
:
$('.vote label i.fa').on('click mouseover',function(){
// remove classe ativa de todas as estrelas
$('.vote label i.fa').removeClass('active');
// pegar o valor do input da estrela clicada
var val = $(this).prev('input').val();
//percorrer todas as estrelas
$('.vote label i.fa').each(function(){
/* checar de o valor clicado é menor ou igual do input atual
* se sim, adicionar classe active
*/
var $input = $(this).prev('input');
if($input.val() <= val){
$(this).addClass('active');
}
});
$("#voto").html(val); // somente para teste
});
//Ao sair da div vote
$('.vote').mouseleave(function(){
//pegar o valor clicado
var val = $(this).find('input:checked').val();
//se nenhum foi clicado remover classe de todos
if(val == undefined ){
$('.vote label i.fa').removeClass('active');
} else {
//percorrer todas as estrelas
$('.vote label i.fa').each(function(){
/* Testar o input atual do laço com o valor clicado
* se maior, remover classe, senão adicionar classe
*/
var $input = $(this).prev('input');
if($input.val() > val){
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
}
$("#voto").html(val); // somente para teste
});
E esta é a pagina rating em PHP. Eu queria que o usuário pudesse votar mais de uma vez nela, mas não estou conseguindo. Obs: Essa parte do banco em PHP eu fiz seguindo um tutorial em inglês e estou tentando fazer ele não bloquear o voto para somente uma pessoa.
<?php
$ipaddress = md5($_SERVER['REMOTE_ADDR']); // here I am taking IP as UniqueID but you can have user_id from Database or SESSION
$servername = "localhost"; // Server details
$username = "root";
$password = "";
$dbname = "filmes";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Unable to connect Server: " . $conn->connect_error);
}
if (isset($_POST['rate']) && !empty($_POST['rate'])) {
$rate = $conn->real_escape_string($_POST['rate']);
// check if user has already rated
$sql = "SELECT `id` FROM `tbl_rating` WHERE `user_id`='" . $ipaddress . "'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
if ($result->num_rows > 0) {
echo $row['id'];
} else {
$sql = "INSERT INTO `tbl_rating` ( `rate`, `user_id`) VALUES ('" . $rate . "', '" . $ipaddress . "'); ";
if (mysqli_query($conn, $sql)) {
echo "0";
}
}
}
$conn->close();
?>
AVG( rate )
para calcular a média geral, e uma query com a lista de todos os votos: ( user1 - ★★★☆☆, user2 - ★★★★★ )...select AVG( rate ) as rate from tbl_rating where id = 1
essa consulta vai retornar um índice com a média total de votos.