Coluna Dreamweaver – Sistema de enquete com ajax e sem banco de dados – Parte 1

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui
Arquivo js do Spry.Utils.submitForm
Arquivo js do SpryData (opcional)

Conceitos

Esse sistema de enquete utiliza Ajax para envio do formulário e atualização do resultado . Não necessitar de banco de dados, pois será utilizado ficheiro em TXT para armazenar os resultados. E utilizará um cookie para que o usuário vote apenas uma vez. Veja a enquete em funcionamento

Conteúdo

Crie uma nova página e salve com o nome de config.php. Essa página vai armazenar a pergunta e as opções de resposta que serão utilizadas na enquete, assim quando for mudar o tema da enquete, vai ser necessário apenas mudar esse arquivo. Para armazenar as perguntas e opções, utilizaremos a função define()para definir uma constante. Uma constante é um identificador (nome) para um único valor. Como o nome sugere esse valor não pode mudar durante a execução do script. Para utilizar o comando define() é necessário dois argumentos, o primeiro é o nome da constante e o segundo é o valor.
define(NOME_DA_CONSTANTE,? VALOR?)
Então vamos defini a pergunta como ?De onde você acessar o site?? ficando a declaração assim: define(PERGUNTA,? De onde você acessar o site??) e o mesmo para a primeira opção (define(OPCAO1,?Casa?)) e para a segunda opção, terceira e quarta. O Código dessa página desse ser assim:
<?php
define(ERGUNTA,’De onde você acessar o site?’);
define(OPCAO1,’Casa’);
define(OPCAO2,’Trabalho’);
define(OPCAO3,’Escola’);
define(OPCAO4,’Lan House’);
?>
Crie mais uma nova página e salve com o nome de enquete.php. Agora com a página aberta e no modo de visualização no Show Design View, clique na guia Layout e depois no botão Insert Div Tag, para criar uma div.

Na caixa de configuração do Insert Div Tag, coloque apenas a ID da div como enquete

Agora clique na guia Formulários na barra inserir do Dreamweaver.e depois clique no botão Form

No painel de propriedades, localizado na parte inferior do Dreamweaver, coloque como action a página contar_votos.php e o método como POST

Mude o modo de visualização para o modo Show Code View (modo de visualização do código). Dentro da TAG HEAD vamos adicionar o arquivo do Spry SpryUtils.js que será responsável pelo envio do formulário utilizando Ajax.
<script src=”/includes/spry/SpryUtils.js”type=”text/javascript”></script>
Também vamos adicionar o arquivo do Spry SpryData.js para que atualize a enquete com os resultados, sem a necessidade de atualizar a página.
<script src=”/includes/spry/SpryData.js” type=”text/javascript”></script>
Vamos criar uma função chamada updateResponseDiv que será executa após o envio do formulário. Essa função vai atualizar a div carregando o resultado da enquete. A função updateResponseDiv utiliza o Spry.Utils.setInnerHTML que está no arquivo SpryData.js e que já foi incluído anteriormente. Para utilizar o Spry.Utils.setInnerHTML basta apenas informar a div e a requisição
<script type=”text/javascript”>
function updateResponseDiv(req)
{
Spry.Utils.setInnerHTML(‘enquete’, req.xhRequest.responseText);
}
</script>
Dentro da TAG BODY vamos incluir a pagina config.php que contém a pergunta e as opções
<?php include(‘config.php’); ?>
Vamos adicionar a pergunta, para isso basta apenas incluir a constante que está armazenado a pergunta (PERGUNTA).
<?php echo PERGUNTA; ?>
Agora dentro da TAG FORM vamos adicionar quatro Radio Button, um para cada opção da enquete. Primeiro adicione a constante que armazena a primeira opção (OPCAO1).
<?php echo OPCAO1; ?>
Depois adicione o primeiro radio button que deve ter o nome de reponse (name=”reponse” ) e o valor de 0 para a primeira opção(value=”0″).
<input type=”radio” name=”reponse” value=”0″>
E agora consecutivamente adicione a constante que armazena a segunda opção (OPCAO2) e um radio button de valor 1 , a constante com a terceira opção (OPCAO3) e o radio button de valor 2 e a constante com quarta opção (OPCAO4) com radio button de valor 3 . Seu código deve está assim:
<div id=”enquete”>
<?php echo PERGUNTA; ?>
<form id=”form1″ name=”form1″ action=”contar_votos.php” method=”post”>
<?php echo OPCAO1; ?>
<input type=”radio” name=”reponse” value=”0″><br>
<?php echo OPCAO2; ?>
<input type=”radio” name=”reponse” value=”1″><br>
<?php echo OPCAO3; ?>
<input type=”radio” name=”reponse” value=”2″><br>
<?php echo OPCAO4; ?>
<input type=”radio” name=”reponse” value=”3″><br>
</div>
E para finalizar vamos inserir o botão submit para envio do formulário. Só que como vamos enviar o formulário utilizando Ajax, devemos adicionar a chamada da função Spry.Utils.submitForm e passa os três parâmetros de configuração: identificação do formulário, função a ser executada depois do envio e a terceira para opções especiais.
Spry.Utils.submitForm(‘identificacao_do_formulario’, funcao_executada_final, {method:’get’, url:’pagina.php’});
Ficando o botão Submit Assim:
<input name=”Enviar” value=”Enviar” onClick=”Spry.Utils.submitForm(‘form1′, updateResponseDiv, {method:’post’, url:’contar_votos.php’});” type=”button”>
Agora vamos criar um link para que as pessoas possam ver o resultado da enquete
<p style=”cursor:pointer”> <a >Ver resultado</a> ]</p>
Para que os resultados da enquete seja carregado sem a atualização da página vamos utilizar a função Spry.Utils.updateContent, que necessita de dois parâmetros a ID da DIV que será atualizada e a URL da página que vai ser atualizada.
Spry.Utils.updateContent(‘id_da_div’,'pagina.html’);
Como a página que vai armazenar os resultados vai ser chamar resultados.php o link vai ficar assim:
<p style=”cursor:pointer”> [ <a onclick="Spry.Utils.updateContent('enquete','resultado.php');">Ver resultado</a> ]</p>
Na próxima parte continuaremos…

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br e qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br ou acesse o nosso fórum