webmaster

Enquete Animada Com jQuery E PHP – Efeito Espetacular!

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

Enquete Animada Com jQuery E PHP – Efeito Espetacular!

enquete animada

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

Código PHP





Liked Disliked No


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:



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

1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.50 out of 5)

Deixe o seu comentário, participe!

5 Responses

  1. Muito bom o post, parabens!!

    Existe um site que oferece algo parecido com isso.
    http://www.desenvolverenquetes.com.br/

    Você cria a enquete, personaliza e gera um código html pra por na sua página (site, blog etc)…

    O legal que também é em php e jquery. Vale a pena conferir.

    Abraços,
    Rafael

    1. Olá Rafael! Obrigado pela dica e também pelo elogio. Um Abraço! Rui Soares

  2. olá, gostei muito do seu post mas queria saber se tem como implementar esta enquete com várias perguntas, sendo que uma só aparece depois que a outra for respondida, ou seja, no mesmo espaço. Obrigada

Leave a Reply to aleixo Cancel reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.