Enquete PHP + MySQL + Flash

janeiro 3, 2006 | Arquivado em: Flash | Escrito por: hugo

Sharebar

Flash Criando uma enquete com Lumine + Flash

Vamos fazer hoje uma interao com PHP, MySQL e Flash. Para fazer a parte de PHP e MySQL, vou utilizar Lumine como framework, para facilitar na manipulao dos dados vindos do banco. Com ele a vida fica realmente mais fcil Pr-requisitos para este tutorial Servidor rodando PHP 4.2; MySQL 4.x ou superior com uma base de dados criada; Flash 8. .

Criando as entidades
Entidades so 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 atravs de uma entidade, basta voc instanciar a entidade, buscar no banco e trabalhar com o registro como se fosse um objeto. Exemplo: /* iniciando uma configurao 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 cdigo 1 Nota: caso voc no saiba o cdigo mas o email, por exemplo, voc poder usar, por exemplo 9. $pessoa->get(email, eu@hufersil.com,br); 10. */ 11. 12. $pessoa->get( 1 ); 13. /* mostrando o nome da pessoa */ 14. echo $pessoa->nome; Para baixar o pacote, acesse http://www.hufersil.com.br/lumine/

1. 2. 3. 4. 5. 6. 7. 8.

Para mais exemplos e documentao, acesse http://www.hufersil.com.br/lumine/lumine/documentation/enduser/. 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 opes 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 necessrios para conexo com o banco de dados.

Para uma explicao sobre as configuraes, acesse a documentao de Lumine. Depois de terminar de fazer as alteraes necessrias, clique no cone da engrenagem laranja para gerar os arquivos de mapeamentos, entidades e configurao. Lumine solicitar a voc que efetue o download do arquivo. Salve-o em um lugar desejado e descompacte-o na mesma pasta informada na opo class-path. 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 configurao criados! Agora, s utilizar as classes!

Inserindo uma enquete no banco

Eu vou fazer um exemplo bem simples. Depois vocs podem fazer um gerenciador para o mesmo. Salve como inserir.php.

1. 2. 3. 4. 5. 6. 7. 8. 9.

require_once lumine/LumineConfiguration.php; /* iniciando uma configurao 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 opes de enquete */

10. $opt1 = new Opcao; 11. $opt2 = new Opcao; 12. $opt3 = new Opcao; 13. /* colocando os dados da enquete */ 14. $enquete->pergunta = O que voc achou do novo site?; 15. $enquete->data_cadastro = time(); 16. /* dados das opes */ 17. $opt1->opcao = Excelente; 18. $opt1->votos = 0; 19. $opt2->opcao = Bom; 20. $opt2->votos = 0; 21. $opt3->opcao = Horrvel!; 22. $opt3->votos = 0; 23. /* colocando essas opes na enquete */ 24. $enquete->opcao_list = array( $opt1, $opt2, $opt3); 25. /* Salvando tudo no banco de dados */ 26. $enquete->save(); Viram como fcil? Dessa forma, no precisamos nos preocupar com as SQL. Ele j insere tudo certinho.
Importante: se voc quiser inserir valores com aspas simples ou duplas, necessrio colocar uma opo a mais no arquivo lumine-conf.xml, a opo escape. Acesse a documentao do Lumine para maiores informaes e como us-la

Criando o arquivo que gera o XML da enquete

Vamos criar agora o arquivo que recupera os dados da enquete e gera o XML. Salve como enquete.php.

1. require_once lumine/LumineConfiguration.php; 2. /* inicia a configurao */ 3. $conf = new LumineConfiguration( lumine-conf.xml ); 4. /* incluindo a classe Enquete*/ 5. Util::Import(entidades.Enquete); 6. /* recuperando a ltima enquete adicionada */ 7. $enquete = new Enquete; 8. $enquete->orderby(idenquete desc); 9. $enquete->limit( 1 ); 10. /* inicia o XML */ 11. $xml = <?xml version=1.0 encoding=UTF-8?>; 12. $xml .= <enquete>; 13. /* procura e j testa se encontrou alguma */ 14. if($enquete->find( true ) > 0) { 15. /* coloca a pergunta no XML */ 16. $xml .= <pergunta><![CDATA['.$enquete->pergunta.']]></pergunta>; 17. $xml .= <opcoes>; 18. /* recupera as opes */ 19. $opcoes = $enquete->getLink(opcao_list); 20. /* para cada opo encontrada */ 21. foreach($opcoes as $opcao) { 22. /* coloca no XML */

23. $xml .= <opcao id=.$opcao->idopcao.><![CDATA['.$opcao>opcao.']]></opcao>; 24. } 25. /* fecha o bloco de opes */ 26. $xml .= </opcoes>; 27. } else { 28. /* se no encontrou, coloca um n de erro informando que no encontrou */ 29. $xml .= <erro>.'Enquete no encontrada.'</erro>; 30.} 31. /* fecha o bloco da enquete */ 32. $xml .= </enquete>; 33. /* muda o header para XML */ 34. header(Content-Type: text/xml); 35. /* envia o XML */ 36. echo $xml;

Criando o arquivo que salva a opo escolhida no Flash

Este arquivo ser chamado quando o usurio clicar em uma das opes. Aps salvar a opo escolhida pelo usurio, j retorna os valores atualizados para mostrar os resultados da enquete. Salve-o como salva_opcao.php.

1. require_once lumine/LumineConfiguration.php; 2. /* inicia a configurao */ 3. $conf = new LumineConfiguration( lumine-conf.xml ); 4. /* inclui a Classe de opo */ 5. Util::Import(entidades.Opcao); 6. /* instncia a classe */ 7. $opt = new Opcao; 8. /* inicia o XML */ 9. $xml .= <?xml version=1.0 encoding=UTF-8 10. ?>; 11. $xml .= <enquete>; 12. /* recupera a opo escolhida e j testa se encontrou */ 13. if( $opt->get( sprintf(%d, $_POST['id']) ) > 0) { 14. /* adiciona o voto escolhido */ 15. $opt->votos++; 16. /* salva os dados */ 17. $opt->save(); 18. /* recupera a enquete */ 19. $enquete = $opt->getLink(enquete); 20. /* adiciona no XML */ 21. $xml .= <pergunta><![CDATA['.$enquete->pergunta.']]></pergunta>; 22. /* pega as opes */ 23. $opts = $enquete->getLink 24. (opcao_list); 25. /* guarda o total de votos */ 26. $total = 0; 27. /* acrescenta as opes encontradas no XML com o respectivo numero de votos */

28. $xml .= <opcoes>; 29. foreach($opts as $opcao) { 30. /* soma o total mais os votos da opo atual */ 31. $total += $opcao->votos; 32. $xml 33. .= <opcao votos=.$opcao->votos. id=.$opcao->idopcao.><![CDATA['. $opcao->opcao.']]></opcao>; 34. } 35. $xml .= </opcoes>; 36. } 37. /* coloca o n do total de votos */ 38. $xml .= <total_votos>.$total.</total_votos>; 39. $xml .= </enquete>; 40. /* muda o header */ 41. header(Content-Type: text/xml); 42. echo $xml;

Criando a interface em Flash

Essa 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 dinmico no palco, com o nome de instncia pergunta. Abaixo dele, crie um movie clip com dois quadros. O campo de texto pergunta no deve estar dentro deste movieclip. Este servir como nosso radio button. No primeiro quadro, faa os desenhos dele no checado, e no segundo, dele como se estivesse checado. Quando voc for converte-lo para movieclip, coloque as opes como mostrado abaixo:

Ainda dentro deste mesmo movieclip, coloque um campo de texto dinmico com nome de instancia opcao. Ele deve estar presente nos dois quadros. A maneira mais fcil colocar ele no quadro e sem quadro chave no segundo segundo, o que ir fazer com ele fique presente nos dois. Volte a linha de tempo principal e d o nome deste movieclip como opt. Agora selecione o campo de texto dinmico pergunta e o movieclip opt e crie um novo movie clip, chamado enquete, com as opes abaixo:

Dentro deste novo movieclip, crie uma nova camada. Nesta nova camada, crie um texto dinmico na mesma posio x e y do movieclip opt (que est na camada de baixo). Selecione este campo de texto recm criado e d-lhe o nome de instncia texto. Selecione-o novamente e converta-o em movieclip. D lhe o nome de instncia de item_resultado. Pronto! a interface est feita! Agora basta criarmos os ASs para eles. Se vocs notarem nas duas imagens anteriores, temos a opo AS 2.0 class marcada. Estes so os nomes das classes que criaremos para o movieclip de opes da enquete e para a enquete, respectivamente.

Criando o arquivo Opcao.as

Basta pegar o cdigo abaixo e salva-lo como Opcao.as na pasta do arquivo FLA.

1. /* importa a classe EventDispatcher */ 2. import mx.events.EventDispatcher; 3. class Opcao extends MovieClip { 4. /* text field que ir aparecer o texto */ 5. var opcao:TextField; 6. /* tipo do objeto */ 7. var tipo:String; 8. /* se est checado ou no */ 9. var checado:Boolean; 10. /* valor do objeto */ 11. var valor:String;

12. /* mtodos da classe EventDispatcher */ 13. var addEventListener:Function; 14. var removeEventListener:Function; 15. private var dispatchEvent:Function; 16. /* construtor */ 17. function Opcao() { 18. /* inicializa a EventDispatcher */ 19. mx.events.EventDispatcher.initialize(this); 20. /* coloca como no checado */ 21. this.setChecado(false); 22. /* indica o tipo de objeto */ 23. tipo = __opcao_enquete; 24. /* quando a pessoa clicar nessa opo */ 25. this.onRelease = function() { 26. /* todos os outros itens sero de-checados */ 27. for (var i in _parent) { 28. if (_parent[i].tipo == this.tipo) { 29. _parent[i].setChecado(false); 30.} 31. } 32. /* seta esta opo como checada */ 33. this.setChecado(true); 34. /* dispara o evento informando qual opo foi checada */ 35. this.dispatchEvent({type:click}); 36. }; 37. } 38. /* pega o valor */ 39. function getValor():String { 40. return valor; 41. } 42. /* altera o valor */ 43. function setValor(s:String):Void { 44. this.valor = s; 45. } 46. /* coloca como checado ou no */ 47. function setChecado(b:Boolean):Void { 48. this.checado = b; 49. if (b == true) { 50. this.gotoAndStop(2); 51. } else { 52. this.gotoAndStop(1); 53. } 54. } 55. /* altera o texto */ 56. function setOpcao(t:String):Void { 57. this.opcao.text = t; 58. } 59. /* pega o texto */ 60. function getOpcao():String {

61. return this.opcao.text; 62. } 63. }

Criando o arquivo Enquete.as

Finalmente, basta criarmos o arquivo Enquete.as. Igualmente ao Opcao.as, salve-o na mesma pasta que o FLA:

1. class Enquete extends MovieClip { 2. /* url base */ 3. var baseurl:String; 4. /* url que pega a enquete */ 5. var pega_enquete:String; 6. /* url que salva os dados */ 7. var salva_dados:String; 8. /* movie clip da opo */ 9. var opt:MovieClip; 10. /* movie clip de resultado */ 11. var item_resultado:MovieClip; 12. /* valor escolhido pelo usurio */ 13. var valorEscolhido:String; 14. /* boto de votar */ 15. var btnVotar:Button; 16. /* construtor */ 17. function Enquete() { 18. baseurl = http://webmaster/mx/enquete/; 19. pega_enquete = baseurl+enquete.php; 20. salva_dados = baseurl+salva_opcao.php; 21. valorEscolhido = ; 22. opt._visible = false; 23. item_resultado._visible = false; 24. /* pega a enquete */ 25. this.recuperaEnquete(); 26. /* coloca a ao no boto de votar */ 27. btnVotar.onRelease = this.votar; 28.} 29. /* funo que recupera a enquete */ 30. function recuperaEnquete():Void { 31. var recebe:LoadVars = new LoadVars(); 32. var envia:LoadVars = new LoadVars(); 33. /* referencia a este objeto */ 34. recebe.ref = this; 35. recebe.onData = function(str:String) { 36. /* XML para tratar o retorno recebido */ 37. var xdoc:XML = new XML(); 38. xdoc.ignoreWhite = true; 39. xdoc.parseXML(str); 40. /* listener */ 41. var list:Object = new Object(); 42. /* referencia a este objeto */

43. list.ref = this.ref; 44. /* funo de retorno */ 45. list.click = function(evt) { 46. this.ref.valorEscolhido = evt.target.getValor(); 47. }; 48. /* coloca a pergunta */ 49. this.ref.pergunta.text = xdoc.firstChild.firstChild.firstChild.toString(); 50. /* pega o n da primeira opo */ 51. var node:XMLNode = xdoc.firstChild.lastChild.firstChild; 52. /* contador para acertar a posio */ 53. var c:Number = 0; 54. /* para cada opo */ 55. for (node; node != null; node=node.nextSibling) { 56. /* duplica o movieclip da opo */ 57. var d:MovieClip = this.ref.opt.duplicateMovieClip(opt+node.attributes.id, this.ref.getNextHighestDepth()); 58. /* seta o valor */ 59. d.setValor(node.attributes.id); 60. /* seta o texto */ 61. d.setOpcao(node.firstChild.toString()); 62. /* coloca na linha de baixo */ 63. d._y = this.ref.opt._y+(d._height*(c++)); 64. /* adiciona o listener */ 65. d.addEventListener(click, list); 66.} 67. /* posiciona o botao de votar mais abaixo */ 68. this.ref.btnVotar._y = Math.round(d._y + d._height); 69. }; 70. /* envia um dado qualquer para no guardar o xml no cache */ 71. envia.sendAndLoad(pega_enquete, recebe, post); 72. } 73. /* ao de votar */ 74. function votar():Void { 75. /* remove as opes */ 76. for(var i:String in this._parent) { 77. this._parent[i].removeMovieClip(); 78. } 79. /* deixa o boto de votar invisivel */ 80. this._visible = false; 81. /* cria os objetos de envio e recebimento de dados */ 82. var recebe:LoadVars = new LoadVars(); 83. var envia:LoadVars = new LoadVars(); 84. /* referencia ao objeto da enquete */ 85. recebe.ref = this._parent; 86. /* quando receber o retorno */ 87. recebe.onData = function(str:String):Void{ 88. /* cria um XML de retorno */ 89. var xdoc:XML = new XML(); 90. xdoc.ignoreWhite = true;

91. xdoc.parseXML(str); 92. /* pega a primeira opo da enquete com os respectivos votos */ 93. var node:XMLNode = xdoc.firstChild.childNodes[1].firstChild; 94. /* total de votos */ 95. var total:Number = new Number( xdoc.firstChild.lastChild.firstChild.toString() ); 96. /* contador para mudar a posio */ 97. var c:Number = 0; 98. /* para cada opo */ 99. for(node; node != null; node = node.nextSibling) { 100./* duplica o movie clip de resultado */ 101.var d:MovieClip = this.ref.item_resultado.duplicateMovieClip(res+node.attributes.id,this.ref.getNext HighestDepth()); 102./* calcula a porcentagem */ 103.var p:String = Math.round((node.attributes.votos/total)*100)+% 104./* altera o texto */ 105.d.texto.text = node.firstChild.toString() + + node.attributes.votos + votos ( + p + ); 106./* ajusta o campo de texto */ 107.d.texto.autoSize=left; 108./* coloca na posio certa */ 109.d._y = this.ref.item_resultado._y + (d._height * (c++)); 110.} 111.}; 112./* coloca a opo escolhida */ 113.envia.id = this._parent.valorEscolhido; 114.envia.sendAndLoad(this._parent.salva_dados, recebe, post); 115.} 116.} Ufa! Acho que essa foi uma das colunas mais longas que j escrevi heheheh. Vocs podem baixar os arquivos aqui
E por favor: DVIDAS, POSTEM NO FRUM! @braos e fiquem com Deus!