Enquete Animada Com jQuery E PHP – Efeito Espetacular!

Um sistema de enquetes ou votações é comum em muitos sites e blogues. Hoje vou criar uma enquete ou votação animada com jQuery e PHP. Utilizei algumas imagens para criar uma apresentação gráfica atraente e usei a função animate() para adicionar animação. Espero que você goste deste tutorial. O código para download está no fim do tutorial.

Demo Da Enquete Animada Com jQuery E PHP

Base De Dados MySQL

Usei duas tabelas. Uma para guardar o IP do usário para que o usuário não vote duas vezes. Neste demo, não ativei a verificação do IP, portanto você poderá votar o número de vezes que quiser. Mas, você precisa de alterar isso no código depois de efectuar o respectivo download.

CREATE TABLE IF NOT EXISTS `polling_ip` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `userip` varchar(100) NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;



CREATE TABLE IF NOT EXISTS `polling` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `liked` int(11) NOT NULL,

  `dislike` int(11) NOT NULL,

  `average` int(11) NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Código jQuery

$(document).ready(function(){  

  

  $('#options a').click(function(){

    

        var vote   = $(this).attr("id");

    showLoader();

    

    $.post("voting.php?value="+vote,{

    }, function(response){

      hideLoader();

      

      $('#wrap').html(unescape(response));  

    });

  });  

  

  //show loading bar

  function showLoader(){

    $('.search-background').fadeIn(200);

  }

  //hide loading bar

  function hideLoader(){

    $('.search-background').fadeOut(200);

  };

  

});  

Código HTML

<div id="wrap" align="center">

  

  <div class="search-background">

    <label><img src="loading.gif" alt="" /></label>

  </div>

    

  <div id="options" align="center">

    

    <span>Vote !</span>

    

    <br clear="all" />

    

    <a href="#" id="good"> Like This Tutorial </a>

    

    <a href="#" id="bad"> Dislike This Tutorial </a>

    

    <a href="#" id="average"> Don't Know </a> 

    

    <br clear="all" />



  </div>

</div>

Código PHP

<?php

include("dbcon.php");

$userip = $_SERVER['REMOTE_ADDR'];



if(@$_REQUEST['value'])

{

  $value = mysql_escape_string($_REQUEST['value']);

  $value = strip_tags($value);

  

  if($value)

  {

    $result = mysql_query("select userip from polling_ip where userip='$userip'");

    $num    = mysql_num_rows($result);

  }

  

  if(!$num==0)

  {

    if($value == 'good')

    {

      $query = "update polling set liked = liked+1 where id = 1";

    }

    else if($value == 'bad')

    {

      $query = "update polling set dislike = dislike+1 where id = 1";

    }

    else if($value == 'average')

    {

      $query = "update polling set average = average+1 where id = 1";

    }

    

    mysql_query( $query);

    

    $que = "insert into polling_ip (userip) values ('$userip')";

    mysql_query( $que);

  }

  

  $result=mysql_query("select * from polling");

  

  $row=mysql_fetch_array($result);

  

  $gettotal = $row['dislike'] + $row['liked']+$row['average'];

  

  $dislike=$row['dislike'];

  

  $like=$row['liked'];

  

  $average=$row['average'];

  

  $likes=($like*60)/$gettotal;

  $likes=round($likes,2);

  

  $average=($average*60)/$gettotal;

  $average=round($average,2);

  

  $dislikes=($dislike*60)/$gettotal;

  $dislikes=round($dislikes,2);?>

  

  <script type="text/javascript">

  

  $(document).ready(function(){  

    

    

    $('img#first').animate( {

        height: parseInt(<?php echo $likes?>)+'%'

    } );

    

    $('img#second').animate( {

        height: parseInt(<?php echo $dislikes?>)+'%'

    } );

    

    $('img#third').animate( {

        height: parseInt(<?php echo $average?>)+'%'

    } );

          

  });  



  </script>



  <table width="150" border="0">

    <tr>

    

    <td valign="bottom" height="160" width="50" align="center">

      <?php echo $likes.'%'?>

      <img src="1.png" alt="" id="first" width="35" height="<?php echo $likes?>" />

    </td>

    <td valign="bottom" height="160" width="50" align="center">  

      <?php echo $dislikes.'%'?>

      <img src="2.png" alt="" id="second" width="35" height="<?php echo $dislikes?>" />

    </td>

    

    <td valign="bottom" height="160" width="50" align="center">  

      <?php echo $average.'%'?>

      <img src="3.png" alt="" id="third" width="35" height="<?php echo $average?>" />

    </td>

    

    </tr>

    

    <tr>

    

    <td valign="bottom" width="50" align="center">

      Liked

    </td>

    <td valign="bottom" width="50" align="center">  

      Disliked

    </td>

    

    <td valign="bottom" width="50" align="center">  

      No

    </td>

    

    </tr>

    

  </table>

  <?php

}?>

Código CSS

Está aqui o CSS:

/* CSS Document */

#wrap{

  width:200px; background:#F4F7CC; height:190px;

  -moz-border-radius: 1em 4em 1em 4em;

  border-radius: 1em 4em 1em 4em;

}



#options{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; padding:6px; }

#options span{ padding:4px; filter: dropshadow(color=#e5e5ee,offX=0,offY=1); 

  font-family:"Courier New", Courier, monospace; font-size:22px; font-weight:bolder; color:#666666}



.greenBar{ float:left; height:11px; margin-left:10px; width:32px;}    

.redBar{height:8px; float:left; margin-left:12px; width:32px;}

.blueBar{height:8px; float:left; margin-left:12px; width:32px;}



table{ font-size:10px;}



#good, #bad, #average {width:110px; display:block; text-align:center; text-decoration:none;color:#FFFFFF; cursor:pointer; padding:6px; margin-top:13px}

#good { background:#CC0000;}

#bad { background:#B5C543;}

#average { background:#336699;}



#good:hover, #bad:hover, #average:hover { background:#006699; }



.search-background {

  display: none;

  font-size: 13px;

  background:#999999;

  color:#FFFFFF;

  text-shadow: #fff 0px 0px 20px;

  font-weight: bold;

  height:110px;

  position: absolute;

  padding-top:80px;

  -moz-border-radius: 1em 4em 1em 4em;

  border-radius: 1em 4em 1em 4em;

  text-align: center;

  opacity:0.5;filter: alpha(opacity=50) ;

  text-decoration: none;

  width:200px;

}

Não se esqueça de criar a base de dados MySQL com o código publicado neste tutorial. O código SQL não está incluído no download que segue. E use o ficheiro dbcon.php para criar a ligação à base de dados. Poderá usar este código em substituição do código que está nesse ficheiro:

<?php

$link = mysql_connect('localhost', 'usuario_mysql', 'senha');

@mysql_select_db('nome_basedados',$link);

?>

Download do código usado neste tutorial: Enquete Animada Com jQuery

Be Sociable, Share!

•