Jefferson Soares

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 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" 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.