jQuery Rating - Sistema de votação interativa

Canal: JavaScript  |  Autor: Nícolas Müller  |  Publicado em: 14/04/2009  |  Views: 4.685
Com a biblioteca do jQuery podemos criar uma solução muito atraente para um sistema de votação. Você deve ter visto em algum site este sistema com as estrelas que ao uma delas ser clicada o voto é computado. Pois bem este é o sistema que vamos demonstrar nesta matéria.



O uso deste sistema:

A utilização dele é vasta. Todo e qualquer material que você quiser computar votos pode ser utilizado. Assim os usuários evitam de ter que escolher em um formulário o valor, com apenas um clique fazem o voto ser computado.

As necessidades:

  • Precisamos usar duas bibliotecas JavaScript para o funcionamento.
  • Precisamos de um arquivo em php para computar o voto.
  • Um arquivo css para editar os estilos.
  • E um arquivo onde serão exibidas as estrelas.
  • Você precisa ter conhecimento em PHP, JavaScript e MySQL para completar este tutorial.


Primeiramente a tabela do banco de dados:
Vamos criar uma tabela simples com apenas o id de registro e os campos para armazenar os votos.

CREATE TABLE registro (
  id int(11) NOT NULL AUTO_INCREMENT,
  votos int(11) NOT NULL default 0,
  pontos int(11) NOT NULL default 0,
  PRIMARY KEY (id)
);

Adicionaremos dois registros para que possamos testar o efeito.

INSERT INTO registro SET id=1, votos=0, pontos=0;
INSERT INTO registro SET id=2, votos=0, pontos=0;

Feita a tabela vamos iniciar com o arquivo index.php onde exibiremos as estrelas. Na índex é necessário adicionar no <HEAD> do HTML as chamadas para os JavaScripts, que são:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.rating.js"></script>
<script type="text/javascript">
jQuery(function(){
    jQuery('form.rating').rating();
});
</script>

Com a chamada realizada vamos ao formulário que será modificado pelo javascript para aparecer as estrelas. Este formulário é o código que você deve usar para exibir as estrelas, portanto, é com ele que vamos trabalhar e saber onde dispor para que as estrelas apareçam no devido local.

<form style="display:none" title="Average Rating: 3" class="rating" action="rate.php">
    <input type="hidden" name="valor" value="1" />
    <select id="r1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

Onde:
  • <form title=?Average Rating: 3? -> este valor ?3? é o valor da pontuação atual.
    A tag action=?rate.php? define o arquivo que será usado para computar os votos.
  • O <input com name=?valor? é utilizado para saber em qual registro é que o voto será computado.
  • O select é onde o JavaScript se baseia para criar as estrelas, conforme o número de options é o número de estrelas.


Depois de acertar este HTML provavelmente as estrelas já estejam aparecendo. Agora vamos a parte de gravar no banco de dados, usando o novo arquivo que faremos chamado, rate.php:

<?
mysql_connect('host','user','senha');
mysql_select_db('banco_de_dados');

$rate = explode('#',$_POST[ 'rating' ]);
$r = $rate[1];

$SQL = "
UPDATE registro
   SET votos = votos   1,
       pontos = pontos   ".$r."
WHERE id = ".$_POST[ 'id' ];
  
mysql_query($SQL);
?>

Este arquivo faz a conexão ao banco de dados, depois trata o $_POST e realiza o UPDATE na tabela. Com isto você vai ter incrementado o número de votos e terá o número de pontos incrementado o valor que você votou.

Na índex para sabermos qual é a avaliação modificaremos o seguinte:

Adicionaremos, isto:
<?
mysql_connect('host','user','senha');
mysql_select_db('banco_de_dados');

$SQL = " SELECT votos, pontos FROM registro WHERE id = 1";
$RS = mysql_query($SQL);
$RF = mysql_fetch_array($RS);

$r = number_format($RF[ 'pontos' ] / $RF[ 'votos' ],2,'.','.');
?>

E na linha do form alteramos de:
title="Average Rating: 3"
Para :
title="Average Rating: <?=$r?>"
Assim o ele pega a avaliação do banco de dados.
Os arquivos para funcionamento e testes estão abaixo disponíveis para download.


Arquivo anexo: Clique aqui para download
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [58]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Alexander
Publicado em:
30/04/2009 - 15:39
Alexander
Olá Nicolas, primeiramente obrigado por ter entregue o script mastigado assim, foi de grande ajuda!

Eu estava vendo um método para bloquear mais de um voto por usuário, você acha que seria melhor criar mais um campo na tabela registro que armazene uma chave estrangeira do usuário ou teria outra alternativa?

No meu caso somente usuários cadastrados poderão votar.

Mais uma vez obrigado e sucesso.
Nicolas Muller
Publicado em:
30/04/2009 - 16:04
Nicolas Muller
Olá Alexander. Obrigado pelo comentário. Sobre sua dúvida, eu fiz em um sistema, o usuário poder votar apenas uma vez quando logado, e vota apenas se estiver logado entende? Então coloquei o campo para uma chave com a tabela de usuário. Porém se quiser pode talvez gravar um cookie na máquina do usuário, ou gravar o IP dele. Só que o IP pode mudar constantemente, e o cookie pode não gravar caso ele não queira. Entretanto, acho que estes são os únicos métodos para verificar o voto se ele não estiver logado. Espero que tenha compreendido, rsrs.
Marcos
Publicado em:
01/06/2009 - 17:09
Parabéns pelo post foi de grande ajuda!.
Estou tentando etender os Js para poder deixar as estrelinhas pintadas pela metade (ex. 3.5)
Felipe Vasconcelos
Publicado em:
19/06/2009 - 01:48
Ótimo sistema, irei implementar em um site aqui, parabéns pela explicação.
Realmente o jQuery veio pra facilitar e muito a vida de quem usa Js.

Abraços
Luish
Publicado em:
23/06/2009 - 16:59
ótimo sistema muito obrigado! Queria saber uma coisa como botar isso dinamicamente em varias paginas? teria q criar varias tabelas no banco de dados ou alterar algo no código para poder votar de forma separada para cada página? desde já obrigado... abraços parabéns pelo site gostei muito...
Marcos
Publicado em:
30/07/2009 - 08:41
Marcos
Pow cara ficou muito bom, nunca comento nesses artigos assim, mas fico bastante legal. Uma solução para amarraro voto do usuário seria relacionar o seu numero de IP ao banco de dados e colocar ele como uma das chaves primárias
Nicolas
Publicado em:
29/09/2009 - 21:53
Nicolas
Marcos - para amarrar o código o IP talvez não seja bom, pois o IP varia. Somente com cadastro e ai pegando o id do usuário para relacionar com o voto.

Luish - na verdade ele já funciona desta maneira. O campo id faz isto. Só alterar no formulário o valor do campo para cada registro que quiser implementar o voto
Robson
Publicado em:
07/12/2009 - 03:29
Robson
olá estou com o mesmo problema do q o LUISH e vc disse que o campo ID faz isso! eu dei uma olhada nisso e alterei!
mas...

se eu tiver 100 matérias em meu site eu vou ter que fazer 100 sisteminhas para fincionar! desculpem a ignorancia é que sou iniciante em PHP e mysql.
Wanderley Ramos
Publicado em:
14/12/2009 - 00:54
Wanderley Ramos
Estava pensando em Incrementar uma "Media da Votação",
uma coisa bem simples,, buscar no banco de dados os VOTOS
e os PONTOS e faça "votos*pontos*2 = ValorMedioVotacao"

algo dessa maneira !
assim a pessoa saberá a media do artigo, vou tentar fazer algo pareciso,, qualker coisa eu posto aqui, ou se alguem fizer antes. me avise ! se bem q e bem simples .

wanderleyramos@yahoo.com.br
Egberto Sullivan
Publicado em:
10/01/2010 - 11:08
Gostei do tutorial muito prático e fácil, sendo que fui implementar em meu site, mas ele só funciona com o primeiro registro da tabela não funciona com os outros registros da tabela já tentei de tudo e não funciona gostaria que alguém me explicasse que eu deveria fazer.
Yory
Publicado em:
11/01/2010 - 21:53
Não funciona, não faz o UPDATE, fiz tudo certo...
Cristian
Publicado em:
12/01/2010 - 16:16
Cristian
como eu coloco isso no blogspot?
Nicolas
Publicado em:
13/01/2010 - 09:18
@egberto - você precisa trocar o select $SQL = " SELECT votos, pontos FROM registro WHERE id = 1"; onde tem id = 1 para id = X - Onde x = o id do registro que está na página. (por exemplo o id de uma notícia)...

@yory - funciona sim, você deve ter feito algo errado...

@cristian, para o blogspot não achei um plugin para instalar...
Yory
Publicado em:
14/01/2010 - 23:25
Até q funciona na pasta atual, mas se ele estiver em uma pagina q tenha id=$id no link ele não funciona, somente funciona do jeito q esta na pasta 20090414_jquery_rating se eu pegar os scripts da index e adidionar em uma pagina de noticia já não funciona pois ficara o link das estrelas ex: #4" target="_blank">http://www.site.com.br/noticia.php?id=1#4 ,4 é o voto, ai ele não pega p/ funcionar q percebi ele tem q estar assim #4" target="_blank">http://www.site.com.br/20090414_jquery_rating/#4 , dá uma olhada ai, fora isso ta show o rating....
Yory
Publicado em:
15/01/2010 - 00:25
Fiz assim no meu post q não deu certo indo para a pagina post.php pegando o id_post certinho, mas não faz o update...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery_rating/jquery.js"></script>
<script type="text/javascript" src="jquery_rating/jquery.rating.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('form.rating').rating();
});
</script>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="jquery_rating/style.css"/>
</head>
<body>

<?
include "config.php";

if ($_GET['acao'] == 'enviar_rating'){

$id_post = $_POST['id_post'];
$rate = explode('#',$_POST['rating']);
$r = $rate[1];

$SQL = " UPDATE posts SET votos = votos + 1, pontos = pontos + ".$r." WHERE id_post = ".$_POST['id_post'];

mysql_query($SQL);
}


$id_post = $_GET['id_post'];

$SQL = " SELECT votos, pontos FROM posts WHERE id_post = '$id_post'";
$RS = mysql_query($SQL);
$RF = mysql_fetch_array($RS);

$r = number_format($RF['pontos'] / $RF['votos'],2,'.','.');
?>

Aqui aparecerão as estrelas:
<form style="display:none" title="Average Rating: <?=$r?>" class="rating" action="?acao=enviar_rating">
<input type="hidden" name="valor" value="1" />
<input type="hidden" name="id_post" value="<?=$id_post?>" />
<select id="r1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</body>
</html>

somente tirei o rate.php e coloquei ele em ?acao=enviar_rating
Nicolas
Publicado em:
15/01/2010 - 09:24
Olá YORY, mas é claro que não vai funcionar, por que ele nunca esta caindo dentro o IF...

Se você colocar o form assim:
<form style="display:none" title="Average Rating: <?=$r?>" class="rating" action="?acao=enviar_rating">
ele não vai funcionar. Precisa definir qual o method do form...

<form method="post" style="display:none" title="Average Rating: <?=$r?>" class="rating" action="?acao=enviar_rating">

Por que por padrão ele é GET... Tente aí depois comente aqui
Roger
Publicado em:
10/02/2010 - 15:54
Muito interessante. Parabéns.