Enquete PHP + MySQL + Flash
Flash – Criando uma enquete com Lumine + FlashVamos fazer hoje uma interação com PHP, MySQL e Flash. Para fazer a parte de PHP e MySQL, vou utilizar Lumine como framework, para facilitar na manipulação dos dados vindos do banco. Com ele a vida fica realmente mais fácil Pré-requisitos para este tutorial
Criando as entidadesEntidades são as classes que representam as nossas tabelas no banco de dados. Por exemplo: vamos supor que você tenha uma tabela chamada pessoas, e tenha os campos idpessoa, nome, data_nascimento, email. Para acessar estes dados através de uma entidade, basta você instanciar a entidade, buscar no banco e trabalhar com o registro como se fosse um objeto. Exemplo: /* iniciando uma configuração de Lumine */
$conf = new LumineConfiguration( ‘lumine-conf.xml’ ); /* incluindo a classe Pessoa */ Util::Import(‘entidades.Pessoa’); /* Instanciando */ $pessoa = new Pessoa; /* pegando a pessoa com o código 1 Nota: caso você não saiba o código mas o email, por exemplo, você poderá usar, por exemplo $pessoa->get(‘email’, ‘eu@hufersil.com,br’); */ $pessoa->get( 1 ); /* mostrando o nome da pessoa */ echo $pessoa->nome; Para baixar o pacote, acesse http://www.hufersil.com.br/lumine/ Iremos utilizar o editor visual de Lumine para criarmos os arquivos base para trabalharmos com o banco de dados. Vamos precisar de duas tabelas: uma para armazenar as enquetes e outra para armazenar as opções das enquetes. Em nosso exemplo, as entidades devem ficar assim:
No final desta coluna, tem um arquivo zip com todos os arquivos deste tutorial. Para ver estas entidades, abra no LumineEditor o arquivo chamado LumineEditor.xml. Na lado direito do editor visual, altere os dados necessários para conexão com o banco de dados.
Para uma explicação sobre as configurações, acesse a documentação de Lumine. Depois de terminar de fazer as alterações necessárias, clique no ícone da engrenagem laranja Juntamente com os outros arquivos, irá vir um arquivo chamado createSchema.php. Basta você acessa-lo pelo seu navegador (tipo, http://localhost/mx/enquete/createSchema.php) para ele gerar suas tabelas no banco de dados corretamente. Pronto! Já temos nossas entidades, mapeamentos, tabelas e arquivo de configuração criados! Agora, é só utilizar as classes! Inserindo uma enquete no bancoEu vou fazer um exemplo bem simples. Depois vocês podem fazer um gerenciador para o mesmo. Salve como inserir.php. require_once ‘lumine/LumineConfiguration.php’;
/* iniciando uma configuração de Lumine */ $conf = new LumineConfiguration( ‘lumine-conf.xml’ ); /* incluindo a classe Enquete e Opcao*/ Util::Import(‘entidades.Enquete’); Util::Import(‘entidades.Opcao’); /* instancia a classe Enquete */ $enquete = new Enquete; /* criando 3 opções de enquete */ $opt1 = new Opcao; $opt2 = new Opcao; $opt3 = new Opcao; /* colocando os dados da enquete */ $enquete->pergunta = ‘O que você achou do novo site?’; $enquete->data_cadastro = time(); /* dados das opções */ $opt1->opcao = ‘Excelente’; $opt1->votos = 0; $opt2->opcao = ‘Bom’; $opt2->votos = 0; $opt3->opcao = ‘Horrível!’; $opt3->votos = 0; /* colocando essas opções na enquete */ $enquete->opcao_list = array( $opt1, $opt2, $opt3); /* Salvando tudo no banco de dados */ Viram como é fácil? Dessa forma, não precisamos nos preocupar com as SQL. Ele já insere tudo certinho. Importante: se você quiser inserir valores com aspas simples ou duplas, é necessário colocar uma opção a mais no arquivo lumine-conf.xml, a opção escape. Acesse a documentação do Lumine para maiores informações e como usá-la
Criando o arquivo que gera o XML da enqueteVamos criar agora o arquivo que recupera os dados da enquete e gera o XML. Salve como enquete.php. require_once ‘lumine/LumineConfiguration.php’;
/* inicia a configuração */ $conf = new LumineConfiguration( ‘lumine-conf.xml’ ); /* incluindo a classe Enquete*/ Util::Import(‘entidades.Enquete’); /* recuperando a última enquete adicionada */ /* inicia o XML */ $xml .= ‘<enquete>’; /* procura e já testa se encontrou alguma */ /* coloca a pergunta no XML */ $xml .= ‘<opcoes>’; foreach($opcoes as $opcao) { /* muda o header para XML */ Criando o arquivo que salva a opção escolhida no FlashEste arquivo será chamado quando o usuário clicar em uma das opções. Após salvar a opção escolhida pelo usuário, já retorna os valores atualizados para mostrar os resultados da enquete. Salve-o como salva_opcao.php. require_once ‘lumine/LumineConfiguration.php’;
/* inicia a configuração */ $conf = new LumineConfiguration( ‘lumine-conf.xml’ ); /* inclui a Classe de opção */ Util::Import(‘entidades.Opcao’); /* instância a classe */ /* inicia o XML */ /* adiciona no XML */ /* pega as opções */ /* acrescenta as opções encontradas no XML com o respectivo numero de votos */ $xml .= ‘</opcoes>’; /* coloca o nó do total de votos */ header(“Content-Type: text/xml”); Criando a interface em FlashEssa parte eu acho um pouco mais complicada que a anterior, portanto vou ceder os arquivos em Flash 8, mas da mesma forma, explicarei como fazer a interface para funcionar certinho. Crie um campo de texto dinâmico no palco, com o nome de instância pergunta. Abaixo dele, crie um movie clip com dois quadros. O campo de texto pergunta não deve estar dentro deste movieclip. Este servirá como nosso radio button. No primeiro quadro, faça os desenhos dele não checado, e no segundo, dele como se estivesse checado. Quando você for converte-lo para movieclip, coloque as opções como mostrado abaixo:
Ainda dentro deste mesmo movieclip, coloque um campo de texto dinâmico com nome de instancia opcao. Ele deve estar presente nos dois quadros. A maneira mais fácil é colocar ele no quadro e sem quadro chave no segundo segundo, o que irá fazer com ele fique presente nos dois. Agora selecione o campo de texto dinâmico pergunta e o movieclip opt e crie um novo movie clip, chamado enquete, com as opções abaixo:
Dentro deste novo movieclip, crie uma nova camada. Nesta nova camada, crie um texto dinâmico na mesma posição x e y do movieclip opt (que está na camada de baixo). Selecione este campo de texto recém criado e dê-lhe o nome de instância texto. Selecione-o novamente e converta-o em movieclip. Dê lhe o nome de instância de item_resultado. Pronto! a interface está feita! Agora basta criarmos os AS’s para eles. Se vocês notarem nas duas imagens anteriores, temos a opção AS 2.0 class marcada. Estes são os nomes das classes que criaremos para o movieclip de opções da enquete e para a enquete, respectivamente. Criando o arquivo Opcao.asBasta pegar o código abaixo e salva-lo como Opcao.as na pasta do arquivo FLA. /* importa a classe EventDispatcher */
import mx.events.EventDispatcher; class Opcao extends MovieClip { /* text field que irá aparecer o texto */ var opcao:TextField; /* tipo do objeto */ var tipo:String; /* se está checado ou não */ var checado:Boolean; /* valor do objeto */ var valor:String; /* métodos da classe EventDispatcher */ var addEventListener:Function; var removeEventListener:Function; private var dispatchEvent:Function; /* construtor */ function Opcao() { /* inicializa a EventDispatcher */ mx.events.EventDispatcher.initialize(this); /* coloca como não checado */ this.setChecado(false); /* indica o tipo de objeto */ tipo = ‘__opcao_enquete’; /* quando a pessoa clicar nessa opção */ this.onRelease = function() { /* todos os outros itens serão de-checados */ for (var i in _parent) { if (_parent[i].tipo == this.tipo) { _parent[i].setChecado(false); } } /* seta esta opção como checada */ this.setChecado(true); /* dispara o evento informando qual opção foi checada */ this.dispatchEvent({type:’click’}); }; } /* pega o valor */ function getValor():String { return valor; } /* altera o valor */ function setValor(s:String):Void { this.valor = s; } /* coloca como checado ou não */ function setChecado(b:Boolean):Void { this.checado = b; if (b == true) { this.gotoAndStop(2); } else { this.gotoAndStop(1); } } /* altera o texto */ function setOpcao(t:String):Void { this.opcao.text = t; } /* pega o texto */ function getOpcao():String { return this.opcao.text; } } Criando o arquivo Enquete.asFinalmente, basta criarmos o arquivo Enquete.as. Igualmente ao Opcao.as, salve-o na mesma pasta que o FLA: class Enquete extends MovieClip {
/* url base */ var baseurl:String; /* url que pega a enquete */ var pega_enquete:String; /* url que salva os dados */ var salva_dados:String; /* movie clip da opção */ var opt:MovieClip; /* movie clip de resultado */ var item_resultado:MovieClip; /* valor escolhido pelo usuário */ var valorEscolhido:String; /* botão de votar */ var btnVotar:Button; /* construtor */ function Enquete() { baseurl = ‘http://webmaster/mx/enquete/’; pega_enquete = baseurl+’enquete.php’; salva_dados = baseurl+’salva_opcao.php’; valorEscolhido = ”; opt._visible = false; item_resultado._visible = false; /* pega a enquete */ this.recuperaEnquete(); /* coloca a ação no botão de votar */ btnVotar.onRelease = this.votar; } /* função que recupera a enquete */ function recuperaEnquete():Void { var recebe:LoadVars = new LoadVars(); var envia:LoadVars = new LoadVars(); /* referencia a este objeto */ recebe.ref = this; recebe.onData = function(str:String) { /* XML para tratar o retorno recebido */ var xdoc:XML = new XML(); xdoc.ignoreWhite = true; xdoc.parseXML(str); /* listener */ var list:Object = new Object(); /* referencia a este objeto */ list.ref = this.ref; /* função de retorno */ list.click = function(evt) { this.ref.valorEscolhido = evt.target.getValor(); }; /* coloca a pergunta */ this.ref.pergunta.text = xdoc.firstChild.firstChild.firstChild.toString(); /* pega o nó da primeira opção */ var node:XMLNode = xdoc.firstChild.lastChild.firstChild; /* contador para acertar a posição */ var c:Number = 0; /* para cada opção */ for (node; node != null; node=node.nextSibling) { /* duplica o movieclip da opção */ var d:MovieClip = this.ref.opt.duplicateMovieClip(‘opt’+node.attributes.id, this.ref.getNextHighestDepth()); /* seta o valor */ d.setValor(node.attributes.id); /* seta o texto */ d.setOpcao(node.firstChild.toString()); /* coloca na linha de baixo */ d._y = this.ref.opt._y+(d._height*(c++)); /* adiciona o listener */ d.addEventListener(‘click’, list); } /* posiciona o botao de votar mais abaixo */ this.ref.btnVotar._y = Math.round(d._y + d._height); }; /* envia um dado qualquer para não guardar o xml no cache */ envia.sendAndLoad(pega_enquete, recebe, ‘post’); } /* ação de votar */ function votar():Void { /* remove as opções */ for(var i:String in this._parent) { this._parent[i].removeMovieClip(); } /* deixa o botão de votar invisivel */ this._visible = false; /* cria os objetos de envio e recebimento de dados */ var recebe:LoadVars = new LoadVars(); var envia:LoadVars = new LoadVars(); /* referencia ao objeto da enquete */ recebe.ref = this._parent; /* quando receber o retorno */ recebe.onData = function(str:String):Void { /* cria um XML de retorno */ var xdoc:XML = new XML(); xdoc.ignoreWhite = true; xdoc.parseXML(str); /* pega a primeira opção da enquete com os respectivos votos */ var node:XMLNode = xdoc.firstChild.childNodes[1].firstChild; /* total de votos */ var total:Number = new Number( xdoc.firstChild.lastChild.firstChild.toString() ); /* contador para mudar a posição */ var c:Number = 0; /* para cada opção */ for(node; node != null; node = node.nextSibling) { /* duplica o movie clip de resultado */ var d:MovieClip = this.ref.item_resultado.duplicateMovieClip(‘res’+node.attributes.id,this.ref.getNextHighestDepth()); /* calcula a porcentagem */ var p:String = Math.round((node.attributes.votos/total)*100)+’%'; /* altera o texto */ d.texto.text = node.firstChild.toString() + ‘ – ‘ + node.attributes.votos + ‘ votos (‘ + p + ‘)’; /* ajusta o campo de texto */ d.texto.autoSize=’left’; /* coloca na posição certa */ d._y = this.ref.item_resultado._y + (d._height * (c++)); } }; /* coloca a opção escolhida */ envia.id = this._parent.valorEscolhido; envia.sendAndLoad(this._parent.salva_dados, recebe, ‘post’); } } Ufa! Acho que essa foi uma das colunas mais longas que já escrevi heheheh. E por favor: DÚVIDAS, POSTEM NO FÓRUM! @braços e fiquem com Deus! |
.
para gerar os arquivos de mapeamentos, entidades e configuração. Lumine solicitará a você que efetue o download do arquivo. Salve-o em um lugar desejado e descompacte-o na mesma pasta informada na opção class-path.
Escrito por 
o arquivo editor visual de Lumine, está faltando, não é possível fazer download, por favor indique um endereço válido para download.
Num ta dando pra baixar. Pelo amor de Deus, coloca um link válido pra mim baixar pq eu preciso disso. Por favor, velhão…. Eu te imploro!!! Valew. Ou entaum me fala e me manda por e-mail.
opá blz! muito bom, pode disponibilizar os arquivos pra maiores estudos, ok desde já agradeço, forte abraço!