Sistema de votação thumbs up com PHP/MySQL/jQuery

Aprenda a criar um sistema de votação do estilo LIKE, UNLIKE para colocar em seus posts e páginas. 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.

Por | @@faael Programação
<p>Ol&aacute; pessoal, hoje vamos montar um sistema de vota&ccedil;&atilde;o bem simples. Irei utilizar como exemplo uma p&aacute;gina com algumas frases e o usu&aacute;rio poder&aacute; escolher o que ele achou da frase: bom ou ruim. Tudo isso sem refresh na p&aacute;gina, claro. Vamos l&aacute;?</p> <p><strong>Veja o resultado:</strong></p> <p><iframe src="http://rafaelcouto.com.br/artigos/sistema_votacao/" width="638" height="300" frameborder="1"></iframe></p> <p>Os arquivos est&atilde;o disponibilizados para download no fim do artigo.</p> <p>&nbsp;</p> <h2><span style="font-weight: normal;">1. Banco de dados</span></h2> <p>Primeiramente vamos criar nossa tabela no banco de dados e inserir alguns registros:</p> <pre class="mysql" style="margin: 0px; padding: 1em 2em; font-family: monospace; font-size: 12px; background-color: #e7ebef; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow: visible; line-height: 1.333; width: auto; clear: none; color: #110000;"><span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">CREATE</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">TABLE</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">IF <span style="margin: 0px; padding: 0px; color: #cc0099;">NOT</span> EXISTS</span> <span style="margin: 0px; padding: 0px; color: #008000;">`frases`</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span> <span style="margin: 0px; padding: 0px; color: #008000;">`id`</span> <span style="margin: 0px; padding: 0px; color: #999900; font-weight: bold;">int</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">11</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #cc0099; font-weight: bold;">NOT</span> <span style="margin: 0px; padding: 0px; color: #9900ff; font-weight: bold;">NULL</span> <span style="margin: 0px; padding: 0px; color: #ff9900; font-weight: bold;">AUTO_INCREMENT</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">`texto`</span> <span style="margin: 0px; padding: 0px; color: #999900; font-weight: bold;">varchar</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">250</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #cc0099; font-weight: bold;">COLLATE</span> utf8_unicode_ci <span style="margin: 0px; padding: 0px; color: #cc0099; font-weight: bold;">NOT</span> <span style="margin: 0px; padding: 0px; color: #9900ff; font-weight: bold;">NULL</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">`bom`</span> <span style="margin: 0px; padding: 0px; color: #999900; font-weight: bold;">int</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">11</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">DEFAULT</span> <span style="margin: 0px; padding: 0px; color: #9900ff; font-weight: bold;">NULL</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">`ruim`</span> <span style="margin: 0px; padding: 0px; color: #999900; font-weight: bold;">int</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">11</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">DEFAULT</span> <span style="margin: 0px; padding: 0px; color: #9900ff; font-weight: bold;">NULL</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">PRIMARY KEY</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008000;">`id`</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">ENGINE</span><span style="margin: 0px; padding: 0px; color: #cc0099;">=</span>MyISAM <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">DEFAULT</span> <span style="margin: 0px; padding: 0px; color: #ff9900; font-weight: bold;">CHARSET</span><span style="margin: 0px; padding: 0px; color: #cc0099;">=</span>utf8 <span style="margin: 0px; padding: 0px; color: #cc0099; font-weight: bold;">COLLATE</span><span style="margin: 0px; padding: 0px; color: #cc0099;">=</span>utf8_unicode_ci <span style="margin: 0px; padding: 0px; color: #ff9900; font-weight: bold;">AUTO_INCREMENT</span><span style="margin: 0px; padding: 0px; color: #cc0099;">=</span><span style="margin: 0px; padding: 0px; color: #008080;">6</span><span style="margin: 0px; padding: 0px; color: #000033;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">INSERT</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">INTO</span> <span style="margin: 0px; padding: 0px; color: #008000;">`frases`</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008000;">`id`</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">`texto`</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">`bom`</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">`ruim`</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span> <span style="margin: 0px; padding: 0px; color: #990099; font-weight: bold;">VALUES</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">1</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">'"A imagina&ccedil;&atilde;o &eacute; mais importante que o conhecimento."'</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">2</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">'"O mundo n&atilde;o est&aacute; amea&ccedil;ado pelas pessoas m&aacute;s, e sim por aquelas que permitem."'</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">3</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">'"Tente mover o mundo - o primeiro passo ser&aacute; mover a si mesmo."'</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">4</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">'"Os homens erram, os grandes homens confessam que erraram."'</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #ff00ff;">(</span><span style="margin: 0px; padding: 0px; color: #008080;">5</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008000;">'"S&oacute; os mortos conhecem o fim da guerra."'</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #000033;">,</span> <span style="margin: 0px; padding: 0px; color: #008080;">0</span><span style="margin: 0px; padding: 0px; color: #ff00ff;">)</span><span style="margin: 0px; padding: 0px; color: #000033;">;</span></pre> <p>&nbsp;</p> <h2><span style="font-weight: normal;">2. Arquivo de conex&atilde;o (conn.php)</span></h2> <p>Como de costume, vamos fazer a conex&atilde;o com o banco de dados:</p> <pre class="php" style="margin: 0px; padding: 1em 2em; font-family: monospace; font-size: 12px; background-color: #e7ebef; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow: visible; line-height: 1.333; width: auto; clear: none; color: #110000;"><span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Informa&ccedil;&otilde;es para conex&atilde;o</span> <span style="margin: 0px; padding: 0px; color: #000088;">$host</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"localhost"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$usuario</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"root"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$senha</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">""</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$banco</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"banco"</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Conectando ao banco de dados</span> <span style="margin: 0px; padding: 0px; color: #000088;">$conn</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_connect</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$host</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$usuario</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$senha</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> or <span style="margin: 0px; padding: 0px; color: #990000;">die</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #990000;">mysql_error</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Selecionando o banco de dados</span> <span style="margin: 0px; padding: 0px; color: #000088;">$db</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_select_db</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$banco</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #000088;">$conn</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> or <span style="margin: 0px; padding: 0px; color: #990000;">die</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #990000;">mysql_error</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Definindo o charset como utf8 para evitar problemas com acentua&ccedil;&atilde;o</span> <span style="margin: 0px; padding: 0px; color: #000088;">$charset</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_set_charset</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"utf8"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span></pre> <p>&nbsp;</p> <h2><span style="font-weight: normal;">3. Exibindo as frases (index.php)</span></h2> <p>Em nosso arquivo principal vamos exibir as frases e j&aacute; deixar no jeito os elementos para mais adiante desenvolver nosso c&oacute;digo javascript:</p> <pre class="php" style="margin: 0px; padding: 1em 2em; font-family: monospace; font-size: 12px; background-color: #e7ebef; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow: visible; line-height: 1.333; width: auto; clear: none; color: #110000;"><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">include</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"conn.php"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Sistema de vota&ccedil;&atilde;o simples com PHP/JQuery/AJAX&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Sistema de vota&ccedil;&atilde;o simples com PHP/JQuery/AJAX&lt;/h1&gt; &nbsp; <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Selecionando todas as frases</span> <span style="margin: 0px; padding: 0px; color: #000088;">$query</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_query</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"SELECT * FROM frases ORDER BY id DESC"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Passando frase por frase</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">while</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$frase</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_fetch_object</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$query</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">:</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span> &nbsp; &lt;div class="frase" lang="<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #000088;">$frase</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">id</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span>"&gt; &lt;div class="texto"&gt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #000088;">$frase</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">texto</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span>&lt;/div&gt; &nbsp; &lt;img src="imagens/bom.png" alt="bom" /&gt; &lt;span class="bom"&gt; (&lt;span class="valor"&gt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #000088;">$frase</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">bom</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span>&lt;/span&gt;) &lt;/span&gt; &nbsp; &lt;img src="imagens/ruim.png" alt="ruim" /&gt; &lt;span class="ruim"&gt; (&lt;span class="valor"&gt;<span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #000088;">$frase</span><span style="margin: 0px; padding: 0px; color: #339933;">-&gt;</span><span style="margin: 0px; padding: 0px; color: #004000;">ruim</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span>&lt;/span&gt;) &lt;/span&gt; &nbsp; &lt;div class="status"&gt;&lt;/div&gt; &lt;/div&gt; &nbsp; <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">endwhile</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span> &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p>Mesmo parecendo simples para alguns, vou explicar o que &eacute; mais relevante no c&oacute;digo:</p> <ul> <li><strong>Linha 1:</strong>&nbsp;Inclu&iacute;mos o arquivo de conex&atilde;o;</li> <li><strong>Linha 15:</strong>&nbsp;Selecionamos todas as frases no banco de dados e ordenamos em ordem decrescente;</li> <li><strong>Linha 17:</strong>&nbsp;Criamos um loop que ir&aacute; passar frase por frase; tudo o que est&aacute; entre a Linha 19 e a Linha 35 ser&aacute; criado para cada frase;</li> <li><strong>Linha 20:</strong>&nbsp;Criamos uma DIV e atribu&iacute;mos a propriedade LANG a ID da frase, para que mais adiante possamos recuperar esse ID com javascript;</li> <li><strong>Linha 21 a 35:</strong>&nbsp;Exibimos as demais informa&ccedil;&otilde;es da frases e tamb&eacute;m as imagens de bom e ruim;</li> <li><strong>Linha 26:</strong>&nbsp;Finalizamos o loop.</li> </ul> <p>Resumindo, n&oacute;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&nbsp;JQuery.</p> <p>&nbsp;</p> <h2><span style="font-weight: normal;">4. O JQuery (index.php)</span></h2> <p>Primeiramente vamos incluir o jquery.js:</p> <pre class="javascript"><code><script type="text/javascript" language="javascript" src="js/jquery.js"></script></code></pre> <p>&nbsp;</p> <p>Agora n&oacute;s podemos manipular os facilmente elementos da p&aacute;gina. Nosso c&oacute;digo &eacute; o seguinte:</p> <pre class="javascript" style="margin: 0px; padding: 1em 2em; font-family: monospace; font-size: 12px; background-color: #e7ebef; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow: visible; line-height: 1.333; width: auto; clear: none; color: #110000;"><span style="margin: 0px; padding: 0px; color: #339933;">&lt;</span>script type<span style="margin: 0px; padding: 0px; color: #339933;">=</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"text/javascript"</span><span style="margin: 0px; padding: 0px; color: #339933;">&gt;</span> $<span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span>$<span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Quando clicando em uma imagem da div que tem CLASS = frase</span> $<span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"div.frase img"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span>.<span style="margin: 0px; padding: 0px; color: #660066;">click</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Recupera o ID da frase que est&aacute; na propriedade LANG da DIV-PAI da img<br /> // que tem CLASS = frase</span> <span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">var</span> id <span style="margin: 0px; padding: 0px; color: #339933;">=</span> $<span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000066; font-weight: bold;">this</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span>.<span style="margin: 0px; padding: 0px; color: #660066;">parent</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"div.frase"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span>.<span style="margin: 0px; padding: 0px; color: #660066;">attr</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"lang"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Recupera o tipo (bom|ruim) que est&aacute; na propriedade ALT da imagem clicada</span> <span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">var</span> tipo <span style="margin: 0px; padding: 0px; color: #339933;">=</span> $<span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000066; font-weight: bold;">this</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span>.<span style="margin: 0px; padding: 0px; color: #660066;">attr</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"alt"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Seleciona o SPAN onde est&atilde;o os votos</span> <span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">var</span> votos <span style="margin: 0px; padding: 0px; color: #339933;">=</span> $<span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"div[lang="</span><span style="margin: 0px; padding: 0px; color: #339933;">+</span>id<span style="margin: 0px; padding: 0px; color: #339933;">+</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"] span."</span><span style="margin: 0px; padding: 0px; color: #339933;">+</span>tipo<span style="margin: 0px; padding: 0px; color: #339933;">+</span><span style="margin: 0px; padding: 0px; color: #3366cc;">" span.valor"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Seleciona a DIV onde ser&atilde;o colocadas as mensagens</span> <span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">var</span> <span style="margin: 0px; padding: 0px; color: #000066;">status</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> $<span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"div[lang="</span><span style="margin: 0px; padding: 0px; color: #339933;">+</span>id<span style="margin: 0px; padding: 0px; color: #339933;">+</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"] div.status"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Mensagem de carregando</span> <span style="margin: 0px; padding: 0px; color: #000066;">status</span>.<span style="margin: 0px; padding: 0px; color: #660066;">html</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"&lt;img src='imagens/loader.gif' alt='Carregando...' /&gt;"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Faz a requisi&ccedil;&atilde;o AJAX</span> $.<span style="margin: 0px; padding: 0px; color: #660066;">post</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"ajax/votar.php"</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span>id<span style="margin: 0px; padding: 0px; color: #339933;">:</span> id<span style="margin: 0px; padding: 0px; color: #339933;">,</span> tipo<span style="margin: 0px; padding: 0px; color: #339933;">:</span> tipo<span style="margin: 0px; padding: 0px; color: #009900;">}</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #003366; font-weight: bold;">function</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span>resposta<span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Se houver uma mensagem na resposta, exibe a mensagem</span> <span style="margin: 0px; padding: 0px; color: #000066; font-weight: bold;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span>resposta<span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #000066;">status</span>.<span style="margin: 0px; padding: 0px; color: #660066;">html</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span>resposta<span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Quando a resposta for FALSE </span> <span style="margin: 0px; padding: 0px; color: #000066; font-weight: bold;">else</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Incrementa mais um aos votos</span> votos.<span style="margin: 0px; padding: 0px; color: #660066;">html</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span>parseInt<span style="margin: 0px; padding: 0px; color: #009900;">(</span>votos.<span style="margin: 0px; padding: 0px; color: #660066;">html</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #339933;">+</span> <span style="margin: 0px; padding: 0px; color: #cc0000;">1</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #006600; font-style: italic;">// Mensagem de sucesso</span> <span style="margin: 0px; padding: 0px; color: #000066;">status</span>.<span style="margin: 0px; padding: 0px; color: #660066;">html</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #3366cc;">"Obrigado por votar!"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #009900;">}</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #339933;">&lt;/</span>script<span style="margin: 0px; padding: 0px; color: #339933;">&gt;</span></pre> <p>&nbsp;</p> <p>Bom, vou tentar detalhar o m&aacute;ximo poss&iacute;vel.</p> <ul> <li><strong>Linha 2:</strong>&nbsp;Iniciamos o c&oacute;digo, ou seja, isso ir&aacute; chamar as fun&ccedil;&otilde;es quando a p&aacute;gina for carregada;</li> <li><strong>Linha 4:</strong>&nbsp;Quando clicando em uma imagem de uma DIV com class=&rdquo;frase&rdquo;, ou seja, quando o usu&aacute;rio clicar sobre as imagens bom ou ruim;</li> <li><strong>Linha 6:</strong>&nbsp;Recuperamos o ID da frase; como foi dito antes o ID est&aacute; na propriedade LANG da DIV com class=&rdquo;frase&rdquo;. Como as imagens est&atilde;o dentro dessa DIV utilizamos a fun&ccedil;&atilde;o&nbsp;parent()&nbsp;para selecionar a DIV e depois utilizamos a fun&ccedil;&atilde;o&nbsp;attr()&nbsp;para selecionar o atributo (propriedade) LANG e enfim temos o ID dessa frase;</li> <li><strong>Linha 8:</strong>&nbsp;Recuperamos o TIPO de voto (bom ou ruim); O tipo do voto est&aacute; definido na propriedade ALT das imagens;</li> <li><strong>Linha 10:</strong>&nbsp;Selecionamos o SPAN onde est&aacute; o n&uacute;mero de votos atual; Selecionamos a partir do ID e do TIPO que j&aacute; foram recuperados acima;</li> <li><strong>Linha 12:</strong>&nbsp;Selecionamos a DIV onde ser&atilde;o colocadas as mensagens;</li> <li><strong>Linha 15:</strong>&nbsp;Colocamos um loader na DIV status atrav&eacute;s da fun&ccedil;&atilde;o&nbsp;<a href="http://api.jquery.com/html/">html()</a>;</li> <li><strong>Linha 18:</strong>&nbsp;Fazemos a requisi&ccedil;&atilde;o AJAX (fun&ccedil;&atilde;o&nbsp;<a href="http://api.jquery.com/jQuery.post/" target="_blank">JQuery.post()</a>) com o arquivo ajax/votar.php que ser&aacute; criado adiante. Passamos, atrav&eacute;s do m&eacute;todo post, o ID e o TIPO da frase para que possamos recuperar no arquivo PHP;</li> <li><strong>Linha 20 a 23:</strong>&nbsp;O arquivo PHP ir&aacute; devolver uma resposta. Se essa resposta for uma mensagem, ou seja, verdadeiro (true), n&oacute;s colocamos essa mensagem na DIV status;</li> <li><strong>Linha 26 a 30:</strong>&nbsp;Se essa resposta for falsa (false), quer dizer que n&atilde;o h&aacute; nada de errado, portanto n&oacute;s incrementamos os votos e colocamos no SPAN onde est&atilde;o os votos. Depois colocamos a mensagem de sucesso na DIV status.</li> </ul> <p>&nbsp;</p> <h2><span style="font-weight: normal;">5. Nosso arquivo PHP (ajax/votar.php)</span></h2> <p>Bom, esse arquivo &eacute; o respons&aacute;vel por alterar os votos no banco de dados.</p> <pre class="php" style="margin: 0px; padding: 1em 2em; font-family: monospace; font-size: 12px; background-color: #e7ebef; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; overflow: visible; line-height: 1.333; width: auto; clear: none; color: #110000;"><span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">&lt;?php</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Incluindo arquivo de conex&atilde;o</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">include</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"../conn.php"</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Recuperando valores</span> <span style="margin: 0px; padding: 0px; color: #000088;">$id</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span>int<span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #000088;">$_POST</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"id"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$tipo</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">addslashes</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$_POST</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"tipo"</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #000088;">$cookie</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #000088;">$_COOKIE</span><span style="margin: 0px; padding: 0px; color: #009900;">[</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"votado_"</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$id</span><span style="margin: 0px; padding: 0px; color: #009900;">]</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> &nbsp; <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se o cookie ainda n&atilde;o foi setado</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #339933;">!</span><span style="margin: 0px; padding: 0px; color: #990000;">isset</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$cookie</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Incrementa o voto da frase</span> <span style="margin: 0px; padding: 0px; color: #000088;">$query</span> <span style="margin: 0px; padding: 0px; color: #339933;">=</span> <span style="margin: 0px; padding: 0px; color: #990000;">mysql_query</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"UPDATE frases SET "</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$tipo</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">" = "</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$tipo</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"+1 WHERE id = "</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$id</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">""</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se for um sucesso a query</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">if</span> <span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #000088;">$query</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Seta um cookie</span> <span style="margin: 0px; padding: 0px; color: #990000;">setcookie</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #0000ff;">"votado_"</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #000088;">$id</span><span style="margin: 0px; padding: 0px; color: #339933;">.</span><span style="margin: 0px; padding: 0px; color: #0000ff;">""</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #009900; font-weight: bold;">true</span><span style="margin: 0px; padding: 0px; color: #339933;">,</span> <span style="margin: 0px; padding: 0px; color: #990000;">time</span><span style="margin: 0px; padding: 0px; color: #009900;">(</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">+</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">60</span><span style="margin: 0px; padding: 0px; color: #339933;">*</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">60</span><span style="margin: 0px; padding: 0px; color: #339933;">*</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">24</span><span style="margin: 0px; padding: 0px; color: #339933;">*</span><span style="margin: 0px; padding: 0px; color: #cc66cc;">6004</span><span style="margin: 0px; padding: 0px; color: #009900;">)</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Retorna false, ou seja, sucesso</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #009900; font-weight: bold;">false</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se houver erro na query </span> <span style="margin: 0px; padding: 0px; color: #b1b100;">else</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Problemas no servidor."</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #666666; font-style: italic;">// Se j&aacute; houver um cookie</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">else</span> <span style="margin: 0px; padding: 0px; color: #009900;">{</span> <span style="margin: 0px; padding: 0px; color: #b1b100;">echo</span> <span style="margin: 0px; padding: 0px; color: #0000ff;">"Voc&ecirc; j&aacute; votou nessa frase."</span><span style="margin: 0px; padding: 0px; color: #339933;">;</span> <span style="margin: 0px; padding: 0px; color: #009900;">}</span> <span style="margin: 0px; padding: 0px; color: #000000; font-weight: bold;">?&gt;</span></pre> <p>&nbsp;</p> <p>Aqui n&oacute;s inclu&iacute;mos o arquivo de conex&atilde;o, recuperamos os valores passados atrav&eacute;s da requisi&ccedil;&atilde;o AJAX, verificamos se um cookie j&aacute; foi criado para essa frase, caso n&atilde;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.</p> <p>&nbsp;</p> <h2><span style="font-weight: normal;">6. Concluindo</span></h2> <p>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&aacute;gina e fazer uma requisi&ccedil;&atilde;o AJAX. E claro, apresentar um ideia de como fazer um sisteminha de vota&ccedil;&atilde;o com AJAX.</p> <p>&nbsp;</p> <p><a href="https://www.oficinadanet.com.br/imagens/post/8598/sistema_votacao.rar"><strong>Download dos arquivos</strong></a></p> <p>&nbsp;</p> <p><strong><em>Tamb&eacute;m visto em: <a rel="nofollow" href="http://rafaelcouto.com.br/sistema-de-votacao-simples-com-php-jquery-ajax/" target="_blank">rafaelcouto.com.br</a></em></strong></p>

Mais sobre: php, mysql, jQuery
Share Tweet
DESTAQUESRecomendado
Mais compartilhados
Comentários