Programação » JavaScript

jQuery Rating - Sistema de votação interativa

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 é com...

Publicado em: 14 de abril de 2009  |  Leituras: 7.089  |  Canal: JavaScript  |  Autor: Nícolas Müller
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

Resposta em até 24 horas! (grátis)Dúvidas?
Compartilhe
Share orkut
delicious
Gostei
Nossa url encurtada:
Autor da matéria
Nícolas Müller

Sou um profissional da área de internet, trabalho como programador, designer e desenvolvedor de sites, faz cerca de 8 anos que estou atuando na área, sendo 5 anos profissionalmente.
Nícolas Müller
site | twitter
Matérias relacionadas
Imprimindo áreas isoladas de uma página com jQueryImprimindo áreas isoladas de uma página com jQueryjQuery Lazy Load: Carregamento de imagens com scrolljQuery Lazy Load: Carregamento de imagens com scrollMostrar e Ocultar informações com JQuery + CookieMostrar e Ocultar informações com JQuery + Cookie
Últimas matérias
O que você procura para sua vida profissional?O que você procura para sua vida profissional?O planejamento agrega valorO planejamento agrega valorE-mail marketing em 140 caracteresE-mail marketing em 140 caracteres
Últimas notícias
Novos iPods, novo iOS, novo iTunes e nova Apple TVNovos iPods, novo iOS, novo iTunes e nova Apple TVConheça as 100 primeiras cidades atendidas pelo Banda Larga NacionalConheça as 100 primeiras cidades atendidas pelo Banda Larga ...Linus Torvalds diz que mercado já se rendeu ao LinuxLinus Torvalds diz que mercado já se rendeu ao Linux
Dicas do canal
Populares do canal