Tweet [3]
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 [4]
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 [5]
Tweet [3]
