jQuery Rating - Sistema de votação interativa

jQuery, MySQL, PHP - 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.

Por | @nmuller99 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
Siga nas redes
Mais compartilhados
O QUE LER EM SEGUIDA
Comentários
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar