Olá pessoal, hoje vamos montar um sistema de votação bem simples. Irei utilizar como exemplo uma página com algumas frases e o usuário poderá escolher o que ele achou da frase: bom ou ruim. Tudo isso sem refresh na página, claro. Vamos lá?

Veja o resultado final aqui

Os arquivos estão disponibilizados para download no fim do artigo.

1. Banco de dados

Primeiramente vamos criar nossa tabela no banco de dados e inserir alguns registros:

2. Arquivo de conexão (conn.php)

Como de costume, vamos fazer a conexão com o banco de dados:

3. Exibindo as frases (index.php)

Em nosso arquivo principal vamos exibir as frases e já deixar no jeito os elementos para mais adiante desenvolver nosso código javascript:

Mesmo parecendo simples para alguns, vou explicar o que é mais relevante no código:

Linha 1: Incluímos o arquivo de conexão;

Linha 15: Selecionamos todas as frases no banco de dados e ordenamos em ordem decrescente;

Linha 17: Criamos um loop que irá passar frase por frase; tudo o que está entre a Linha 19 e a Linha 35 será criado para cada frase;

Linha 20: Criamos uma DIV e atribuímos a propriedade LANG a ID da frase, para que mais adiante possamos recuperar esse ID com javascript;

Linha 21 a 35: Exibimos as demais informações da frases e também as imagens de bom e ruim;

Linha 26: Finalizamos o loop.

Resumindo, nós criamos uma DIV para cada frase; Essa DIV possui na propriedade LANG o ID da frase, portanto cada DIV representa uma frase, assim podemos manipular as frases facilmente com JQuery.

4. O JQuery (index.php)

Primeiramente vamos incluir o jquery.js:

Agora nós podemos manipular os facilmente elementos da página. Nosso código é o seguinte:

Bom, vou tentar detalhar o máximo possível.

Linha 2: Iniciamos o código, ou seja, isso irá chamar as funções quando a página for carregada;

Linha 4: Quando clicando em uma imagem de uma DIV com class=”frase”, ou seja, quando o usuário clicar sobre as imagens bom ou ruim;

Linha 6: Recuperamos o ID da frase; como foi dito antes o ID está na propriedade LANG da DIV com class=”frase”. Como as imagens estão dentro dessa DIV utilizamos a função parent() para selecionar a DIV e depois utilizamos a função attr() para selecionar o atributo (propriedade) LANG e enfim temos o ID dessa frase;

Linha 8: Recuperamos o TIPO de voto (bom ou ruim); O tipo do voto está definido na propriedade ALT das imagens;

Linha 10: Selecionamos o SPAN onde está o número de votos atual; Selecionamos a partir do ID e do TIPO que já foram recuperados acima;

Linha 12: Selecionamos a DIV onde serão colocadas as mensagens;

Linha 15: Colocamos um loader na DIV status através da função html();

Linha 18: Fazemos a requisição AJAX (função JQuery.post()) com o arquivo ajax/votar.php que será criado adiante. Passamos, através do método post, o ID e o TIPO da frase para que possamos recuperar no arquivo PHP;

Linha 20 a 23: O arquivo PHP irá devolver uma resposta. Se essa resposta for uma mensagem, ou seja, verdadeiro (true), nós colocamos essa mensagem na DIV status;

Linha 26 a 30: Se essa resposta for falsa (false), quer dizer que não há nada de errado, portanto nós incrementamos os votos e colocamos no SPAN onde estão os votos. Depois colocamos a mensagem de sucesso na DIV status.

5. Nosso arquivo PHP (ajax/votar.php)

Bom, esse arquivo é o responsável por alterar os votos no banco de dados.

Aqui nós incluímos o arquivo de conexão, recuperamos os valores passados através da requisição AJAX, verificamos se um cookie já foi criado para essa frase, caso não tenha sido criado, incrementamos os votos da frase no banco de dados e criamos um cookie para a frase, caso o cookie tenha sido criado, retorna uma mensagem de erro.

6. Concluindo

Meu objetivo foi tentar mostrar um pouco do poder e da flexibilidade de se trabalhar com JQuery. Fica muito simples manipular qualquer elemento da página e fazer uma requisição AJAX. E claro, apresentar um ideia de como fazer um sisteminha de votação com AJAX.

Download dos arquivos

Espero que vocês tenham entendido; Qualquer dúvida é só entrar em contato, ok?
Abraços.