O QUE HÁ DE NOVO

jQuery Rating - Sistema de votação interativa

Nicolas Muller por Nicolas Muller Programação
<p>Com a biblioteca do jQuery podemos criar uma solu&ccedil;&atilde;o muito atraente para um sistema de vota&ccedil;&atilde;o. Voc&ecirc; deve ter visto em algum site este sistema com as estrelas que ao uma delas ser clicada o voto &eacute; computado. Pois bem este &eacute; o sistema que vamos demonstrar nesta mat&eacute;ria.<br /> <br /><span class="img_editor"><img src="https://www.oficinadanet.com.br/imagens/post/1355/20090414_jquery.gif" alt="" /></span></p> <h3 class="interno">O uso deste sistema:</h3> <p>A utiliza&ccedil;&atilde;o dele &eacute; vasta. Todo e qualquer material que voc&ecirc; quiser computar votos pode ser utilizado. Assim os usu&aacute;rios evitam de ter que escolher em um formul&aacute;rio o valor, com apenas um clique fazem o voto ser computado.</p> <h3 class="interno">As necessidades:</h3> <ul> <li>Precisamos usar duas bibliotecas JavaScript para o funcionamento.</li> <li>Precisamos de um arquivo em php para computar o voto.</li> <li>Um arquivo css para editar os estilos.</li> <li>E um arquivo onde ser&atilde;o exibidas as estrelas.</li> <li>Voc&ecirc; precisa ter conhecimento em PHP, JavaScript e MySQL para completar este tutorial.</li> </ul> <p>&nbsp;</p> <p><strong>Primeiramente a tabela do banco de dados:</strong></p> <p><strong>&nbsp;</strong>Vamos criar uma tabela simples com apenas o id de registro e os campos para armazenar os votos.</p> <pre><code>CREATE TABLE registro (<br />  id int(11) NOT NULL AUTO_INCREMENT,<br />  votos int(11) NOT NULL default 0,<br />  pontos int(11) NOT NULL default 0,<br />  PRIMARY KEY (id)<br />);</code></pre> <p><br /> Adicionaremos dois registros para que possamos testar o efeito.</p> <pre><code>INSERT INTO registro SET id=1, votos=0, pontos=0;<br />INSERT INTO registro SET id=2, votos=0, pontos=0;</code></pre> <p>&nbsp;</p> <p>Feita a tabela vamos iniciar com o arquivo <strong>index.php</strong> onde exibiremos as estrelas. Na &iacute;ndex &eacute; necess&aacute;rio adicionar no do HTML as chamadas para os JavaScripts, que s&atilde;o:</p> <pre><code><script type="text/javascript" src="jquery.js"></script><br /><script type="text/javascript" src="jquery.rating.js"></script><br /><script type="text/javascript"><br />jQuery(function(){<br />    jQuery('form.rating').rating();<br />});<br /></script></code></pre> <p>&nbsp;</p> <p>Com a chamada realizada vamos ao formul&aacute;rio que ser&aacute; modificado pelo javascript para aparecer as estrelas. Este formul&aacute;rio &eacute; o c&oacute;digo que voc&ecirc; deve usar para exibir as estrelas, portanto, &eacute; com ele que vamos trabalhar e saber onde dispor para que as estrelas apare&ccedil;am no devido local.</p> <pre><code><form style="display:none" title="Average Rating: 3" class="rating" action="rate.php"><br />    <input type="hidden" name="valor" value="1" /><br />    <select id="r1"><br />        <option value="1">1</option><br />        <option value="2">2</option><br />        <option value="3">3</option><br />        <option value="4">4</option><br />        <option value="5">5</option><br />    </select><br /></form></code></pre> <p>&nbsp;</p> <p><strong>Onde:</strong></p> <ul> <li><strong>&lt;form title=?Average Rating: 3?</strong> -&gt; este valor ?3? &eacute; o valor da pontua&ccedil;&atilde;o atual.&nbsp;A tag action=?rate.php? define o arquivo que ser&aacute; usado para computar os votos.</li> <li>O <strong>&lt;input com name=?valor?</strong> &eacute; utilizado para saber em qual registro &eacute; que o voto ser&aacute; computado.</li> <li>O select &eacute; onde o JavaScript se baseia para criar as estrelas, conforme o n&uacute;mero de options &eacute; o n&uacute;mero de estrelas.</li> <li>O select &eacute; onde o JavaScript se baseia para criar as estrelas, conforme o n&uacute;mero de options &eacute; o n&uacute;mero de estrelas.</li> </ul> <p><br /> Depois de acertar este HTML provavelmente as estrelas j&aacute; estejam aparecendo. Agora vamos a parte de gravar no banco de dados, usando o novo arquivo que faremos chamado, <strong>rate.php</strong>:</p> <pre><code><?<br />mysql_connect('host','user','senha');<br />mysql_select_db('banco_de_dados');<br /> $rate = explode('#',$_POST[ 'rating' ]);<br />$r = $rate[1];<br /> $SQL = "UPDATE registro SET votos = votos + 1,pontos = pontos + ".$r." WHERE id = ".$_POST[ 'id' ];<br />mysql_query($SQL);<br />?></code></pre> <p>&nbsp;</p> <p>Este arquivo faz a conex&atilde;o ao banco de dados, depois trata o $_POST e realiza o UPDATE na tabela. Com isto voc&ecirc; vai ter incrementado o n&uacute;mero de votos e ter&aacute; o n&uacute;mero de pontos incrementado o valor que voc&ecirc; votou. &nbsp;<strong>Na &iacute;ndex para sabermos qual &eacute; a avalia&ccedil;&atilde;o modificaremos o seguinte:</strong><br /> <br /> Adicionaremos, isto:</p> <pre><code><?<br />mysql_connect('host','user','senha');<br />mysql_select_db('banco_de_dados');<br /> $SQL = " SELECT votos, pontos FROM registro WHERE id = 1";<br />$RS = mysql_query($SQL);<br />$RF = mysql_fetch_array($RS);<br />$r = number_format($RF[ 'pontos' ] / $RF[ 'votos' ],2,'.','.');<br />?></code></pre> <p><br /> <strong>E na linha do form alteramos de:</strong></p> <pre><code>title="Average Rating: 3"</code></pre> <p><br /> <strong>Para :</strong></p> <pre><code>title="Average Rating: <?=$r?>"</code></pre> <p>&nbsp;</p> <p>Assim o ele pega a avalia&ccedil;&atilde;o do banco de dados.&nbsp;Os arquivos para funcionamento e testes est&atilde;o dispon&iacute;veis para download&nbsp;<a href="https://www.oficinadanet.com.br/imagens/post/1355/20090414_jquery_rating.zip"><strong>aqui</strong></a>.</p>
Recomendado
Assuntos jquery, mysql, php, javascript e tutoriais
Siga nas redes
Encontrou algum erro no texto?

Entre em contato com o autor e nos ajude a melhorar a qualidade dos posts cada vez mais!

AVISAR
O QUE LER EM SEGUIDA
Comentários
Últimas publicaçõesver tudo
ASSINE NOSSA NEWSLETTER

Não perca nenhuma novidade do mundo da tecnologia.