jQuery Rating - Sistema de votação interativa
Canal: JavaScript | Autor: Nícolas Müller | Publicado em: 14/04/2009 | Views: 4.685Com 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.
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.
Adicionaremos dois registros para que possamos testar o efeito.
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:
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.
Onde:
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:
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:
E na linha do form alteramos de:
Para :
Assim o ele pega a avaliação do banco de dados.
Os arquivos para funcionamento e testes estão abaixo disponíveis para download.
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
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]
Artigo anterior
jQuery: Fazendo um SlideShow (.
Caros leitores, hoje vamos ver uma for. Próximo artigo
Exibindo Data e Hora na Página
Esta coluna mostra a função em Java Sc.
jQuery: Fazendo um SlideShow (.
Caros leitores, hoje vamos ver uma for. Próximo artigo
Exibindo Data e Hora na Página
Esta coluna mostra a função em Java Sc.
Compartilhe:
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.
Estou tentando etender os Js para poder deixar as estrelinhas pintadas pela metade (ex. 3.5)
Realmente o jQuery veio pra facilitar e muito a vida de quem usa Js.
Abraços
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
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.
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
@yory - funciona sim, você deve ter feito algo errado...
@cristian, para o blogspot não achei um plugin para instalar...
<!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
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