GuestBook com XML/PHP/MySQL Autor:  Natan D. Alves Data de publicação:  14/01/2007 Parte do Tutorial:  1 Quantidade de Visualização:  7325

Flash - Criando um GuestBook com XML+PHP+MySQL.Olá Comunidade. Vamos a mais uma Coluna de Flash. Dessa vez iremos criar um GuestBook uzando XML+PHP+MySQL.

Pré-requisitos para esse tutorial

Flash MX 2004 ou Flash 8; Servidor rodando PHP 4.2 ou superior; MySQL 4.x ou superior; Conhecimento com Interação com XML

Criando o a tabela no MySQL

Vamos a tabela que vai receber os dados vindo do GuestBook. Caso queiram podem adicionar mais campos. Abaixo segue a instrução SQL para criar nossa tabela no banco de dados:

1. CREATE TABLE guestbook (2. id INT(5) NOT NULL AUTO_INCREMENT,3. nome TEXT,4. email TEXT,5. data VARCHAR(10),6. comentario TEXT,7. PRIMARY KEY (id)8. );

Criando o arquivo PHP

Com a tabela criada, vamos criar o arquivo PHP. Ele vai ser responsável por receber os dados do Flash, enviar para o Banco de Dados, consultar o banco de dados para recuperar os itens e criar o arquivo XML que iremos usar no Flash. Salve como guest.php.

1. <?php2. /* Conectamos ao MySQL */3. $connection = mysql_connect("seu host", "seu usuario", "sua senha") or die ('Erro

ao Conectar ao Banco de dados');

4. /* Selecionamos o Banco de Dados */5. $db = mysql_select_db("tutoriais") or die ("Não foi possível localizar o banco de

dados");6. /* Buscamos o nome, email e comentarios da tabela guestbook */7. $consulta = mysql_query("SELECT id,nome,email,data,comentario FROM

guestbook ORDER BY id DESC");8. /* Retorna o número de linhas do resultado */9. $row=mysql_num_rows($consulta);10. /* Verificamos se retornou algum resultado */11. if($row>0){12.    /* Manda a mensagem para o Flash */13.    print "&erroMensagem=0";14.    /* Começamos a criar o arquivo XML */15.    $conteudo = "<?xml version='1.0'?><guest>";16.    /* Para cada item retornado */17.    for($i=0; $i<$row; $i++) {18.       /* Recuperamos os Nomes */19.       $nome = mysql_result($consulta,$i,"NOME");20.       /* Recuperamos os E-mails */21.       $email = mysql_result($consulta,$i,"EMAIL");22.       /* Recuperamos as Datas */23.       $data = mysql_result($consulta,$i,"DATA");24.       /* Recuperamos os Comentarios */25.       $comentario = mysql_result($consulta,$i,"COMENTARIO");26.       /* Inserimos os valores recuperados nas respectivas tags */27.       $conteudo .= "<dados><nome>";28.       $conteudo .= $nome;29.       $conteudo .= "</nome><email>";30.       $conteudo .= $email;31.       $conteudo .= "</email><data>";32.       $conteudo .= $data;33.       $conteudo .= "</data><comentario>";34.       $conteudo .= $comentario;35.       $conteudo .= "</comentario></dados>";36.    }37.    /* Fechamos a tag guest */38.    $conteudo .= "</guest>";39.    /* Se existir, abrimos o arquivo guest.xml para leitura e escrita */40.    /* Se não existir criamos o arquivo guest.xml */41.    $ponteiro = fopen("guest.xml", "w");42.    /* Escremos o conteúdo dentro do arquivo selecionado */43.    /* Codificamos para UTF8 os campos para não dar problemas com acentuação */44.    fwrite($ponteiro, utf8_encode($conteudo));45.    /* Fechamos o arquivo */46.    fclose($ponteiro);47.    /* Se não retornou nenhum resultado */48. } else {

49.    /* Manda a mensagem de erro para o Flash */50.    print "&erro=Não existe nenhum registro no Guestbook!&erroMensagem=1";51. }52. /* Selecionando a Ação */53. $action = $_GET['action'];54. /* Seleciona a Ação */55. switch ("$action") {56.    /* Caso seja ação cadastrar */57.    case 'cadastrar':58.    /* Variáveis vindas do Flash pelo método POST */59.    /* Codificamos para ISO-8859-1 */60.    $nome = utf8_decode(@$_POST['nome']);61.    $email = utf8_decode(@$_POST['email']);62.    $comentario = utf8_decode(@$_POST['comentario']);63.    /* Deixamos a data com o formato Dia/Mes/Ano */64.    $data = date("d/m/Y");65.    /* Inserimos os dados no Banco de Dados */66.    $cadastra = mysql_query("INSERT INTO guestbook

(nome,email,data,comentario) VALUES ('$nome','$email','$data','$comentario')") or die(mysql_error());

67.    /* Manda a mensagem de Cadastro efetuado com Sucesso para o Flash */68.    print "&mensagem=Obrigado por Assinar o Guest Book&enviado=1";69.    break;70. }71. ?>

Criando a interface no Flash

Chegou a hora de ir para o Flash. Comecei com um palco com dimenções de 300x350. A disposição das camadas será assim:

Vamos posicionar nossos itens no primeiro frame. Os nomes em vermelho são as instancias dos objetos:

vazio: MovieClip em branco, posicione na camada Conteúdo.statusGuest: Campo de texto dinâmico, posicione na camada Conteúdo.mascara: MovieClip, posicione na camada Máscara.scrollBar: Componente criado, posicione na camada Conteúdo.paginacao: MovieClip em branco, posicione na camada Conteúdo.escrever: Componente Button, posicione na camada Conteúdo.

Agora, no segundo frame:

nome: Campo de texto input, posicione na camada Conteúdo.emai: Campo de texto input, posicione na camada Conteúdo.comentario: Campo de texto input, posicione na camada Conteúdo.status_txt: Campo de texto dinâmico, posicione na camada Conteúdo.limpar: Componente Button, posicione na camada Conteúdo.enviar: Componente Button, posicione na camada Conteúdo.voltar: Componente Button, posicine na camada Conteúdo.

Vocês devem estar se perguntando. Que ScrollBar é esse. Esse ScrollBar foi criado por um de nossos Colunistas, Hugo Ferreira da Silva. Nós vamos seguir as mesmas regras de criação dos MovieClips. Para os que não conhecem ou não tenham criado, segue o Link do Tutorial:

ScrollBar para MovieClips e TextFields

Nós iremos modificar o código dele. Substitua as ações dele por essas:

1. /* Importamos a Classe Tween */2. import mx.transitions.Tween;3. import mx.transitions.easing.*;4. /* Listener para o Mouse */5. var mouseListener:Object = new Object();6. /* Coloca no tamanho normal */7. _xscale = _yscale=100;8. /* Pode ser um movieclip ou um textfield */9. var alvo = _parent[alvo];

10. /* Posição inicial do movieclip em y */11. var sy:Number = alvo._y;12. /* Altera o tamanho da barra */13. track._height = track_height;14. /* Tira a maozinha dos botões */15. btn_baixo.useHandCursor =

btn_cima.useHandCursor=pan.useHandCursor=track.useHandCursor=false;16. /* Mínimo em _y q o pan pode ir */17. var miny:Number = Math.round(track._y);18. /* Máximo em _y q o pan pode ir */19. var maxy:Number = Math.round((track._y+track._height)-pan._height);20. /* Quando o cara pressionar o botão de cima */21. btn_cima.onPress = function() {22.    /* Chamamos a função mover */23.    mover();24.    /* Deixamos a variável subindo igual a true */25.    subindo = true;26.    /* Deixamos a variável descendo igual a false */27.    descendo = false;28. };29. /* Quando tirar o mouse*/30. btn_cima.onRelease = btn_cima.onReleaseOutside=function () {31.    /* Deixamos a variável subindo e descendo igual a false */32.    subindo = descendo=false;33.    /* Deletamos o onEnterFrame */34.    delete _root.onEnterFrame;35. };36. /* Quando o cara pressionar o botão de baixo */37. btn_baixo.onPress = function() {38.    /* Chamamos a função mover */39.    mover();40.    /* Deixamos a variável descendo igual a true */41.    descendo = true;42.    /* Deixamos a variável subindo igual a false */43.    subindo = false;44. };45. /* Quando tirar o mouse */46. btn_baixo.onRelease = btn_baixo.onReleaseOutside=function () {47.    /* Deixamos a variável descendo e subindo igual a false */48.    descendo = subindo=false;49.    /* Deletamos o onEnterFrame */50.    delete _root.onEnterFrame;51. };52. /* Quando pressionar o pan */53. pan.onPress = function() {54.    /* Inicia o arrastamento */55.    startDrag(this, false, this._x, miny, this._x, maxy);

56.    /* Chamamos a função mover */57.    mover();58. };59. /* Quando soltar o mouse */60. pan.onRelease = pan.onReleaseOutside=function () {61.    /* Para o arrastamento */62.    stopDrag();63.    /* Deletamos o onEnterFrame */64.    delete _root.onEnterFrame;65. };66. /* Quando pressionar o track */67. track.onPress = function() {68.    /* Chamamos a função mover */69.    mover();70.    /* Move o pan */71.    pan._y = _ymouse-pan._height/2;72.    /* Se o pan passar do valor máximo volta para o máximo */73.    if (pan._y>=maxy) {74.       pan._y = maxy;75.    }76.    /* Se o pan passar do valor mínimo volta para o mínimo */77.    if (pan._y<=miny) {78.       pan._y = miny;79.    }80. };81. /* Ao girar da bolinha do Mouse */82. mouseListener.onMouseWheel = function(delta) {83.    /* Verificamos se o Mouse está em cima das frases ou do ScrollBar */84.    if (_parent.mascara.hitTest(_root._xmouse, _root._ymouse) ||

_parent.scrollBar.hitTest(_root._xmouse, _root._ymouse)) {85.       /* Chamamos a função mover */86.       mover();87.       /* Se delta for igual a 3 sobe, senão desce*/88.       if (delta == 3) {89.          /* Se não estiver a ponto de ir além do que pode */90.          if (pan._y-1>miny) {91.             pan._y -= 5;92.          } else {93.             pan._y = miny;94.             /* Deletamos o onEnterFrame */95.             delete _root.onEnterFrame;96.          }97.       } else {98.          /* Se não estiver a ponto de ir além do que pode */99.          if (pan._y+1<maxy) {100.             pan._y += 5;101.          } else {

102.             pan._y = maxy;103.             /* Deletamos o onEnterFrame */104.             delete _root.onEnterFrame;105.          }106.       }107.    } else {108.       /* Deletamos o onEnterFrame */109.       delete _root.onEnterFrame;110.    }111. };112. /* Função mover */113. function mover() {114.    /* Cria o onEnterFrame */115.    _root.onEnterFrame = function() {116.       /* Se estiver subindo */117.       if (subindo) {118.          /* Se não estiver a ponto de ir além do que pode */119.          if (pan._y-1>miny) {120.             pan._y -= 5;121.          } else {122.             pan._y = miny;123.             /* Deletamos o onEnterFrame */124.             delete _root.onEnterFrame;125.          }126.       }127.       /* Se estiver descendo */128.       if (descendo) {129.          /* Se não estiver a ponto de ir além do que pode */130.          if (pan._y+1<maxy) {131.             pan._y += 5;132.          } else {133.             pan._y = maxy;134.             /* Deletamos o onEnterFrame */135.             delete _root.onEnterFrame;136.          }137.       }138.       /* Calcula */139.       var s:Number = ((pan._y-miny)/(maxy-miny))*100;140.       var p:Number = (alvo._height-mascara)/100;141.       /* Movemos o alvo */142.       var tw:Tween = new Tween(alvo, "_y", Back.easeOut, alvo._y, sy-(p*s),

1, true);143.    };144. }145. /* Adicionamos o listener ao Mouse */146. Mouse.addListener(mouseListener);

Outra coisa, precisamos dizer algumas coisas ao ScrollBar criado, quem ele deve mover, o tamanho da barra e o tamanho da mascara. Deixaremos igual a essa imagem:

Reparem uma coisa. Criei o scrollBar com altura (height) de 250, então devo deixar o campo Altura da Mascara com o tamanho do ScrollBar e o MovieClip máscara com o mesmo tamanho, no caso, 250. O campo Alvo preenchemos com o MovieClip que queremos que faça o scroll, e Altura da Barra, a altura do MovieClip track.

Agora, criaremos dois MovieClips, um vai ser responsável pelas páginas, e outro para exibir as mensagens. Os nomes em vermelho são as instâncias dos objetos

pag_txt: Campos de texto dinâmico.

nome_txt: Campo de texto dinâmico.email_txt: Campo de texto dinâmico.dia: Campo de texto dinâmico.comentario_txt: Campo de texto dinâmico.scroll_comentario: Componente UIScrollBar.

Com nossos MovieClips e ScrollBar criados e instanciados vamos ao ActionScript. Coloquem isso no primeiro frame na camada Actions:

1. /* Ocultamos os itens do menu de contexto */2. Stage.showMenu = false;3. /* Paramos o filme */4. stop();5. /* Mensagem de Carregamento */6. statusGuest.text = "Carregando Mensagens";7. /* Deixamos o ScrollBar invisível */8. scrollBar._visible = false;9. /* Definimos a máscara */

10. vazio.setMask(mascara);11. /* Quantidade de colunas desejada */12. var quantidadeColuna:Number = 1;13. /* Quantidade de linhas desejadas */14. var quantidadeLinha:Number = 10;15. /* Quantidade de páginas */16. var quantidadePagina:Number = 0;17. /* Deixamos linhaAtual e colunaAtual igual a 0 */18. var linhaAtual:Number, colunaAtual:Number = 0;19. /* Criamos um LoadVars que recebe as informações do PHP */20. var objRecebe:LoadVars = new LoadVars();21. /* Criamos um novo XML */22. var xml:XML = new XML();23. /* Ignoramo os espaços em branco */24. xml.ignoreWhite = true;25. /* Carregamos o arquivo PHP evitando o Cache da máquina */26. objRecebe.load("http://natan-alves.t35.com/guestMx.php?cache="+getTimer());27. /* Ao carregar o arquivo PHP */28. objRecebe.onLoad = function(ok) {29.    /* Se for ok */30.    if (ok) {31.       /* Se a variavel erroMensagem for igual a 1 */32.       if (this.erroMensagem == 1) {33.          /* Mostramos qual o erro */34.          statusGuest.text = this.erro;35.          /* Se não */36.       } else {37.          /* Apagamos o campo statusGuest */38.          statusGuest.text = "";39.          /* Carregamos o arquivo XML evitando o Cache da máquina */40.          xml.load("http://natan-alves.t35.com/guestMx.xml?cache="+getTimer());41.       }42.       /* Se não for ok */43.    } else {44.       /* Mostramos a mensagem de erro */45.       statusGuest.text = "Erro ao carregar os arquivos";46.    }47. };48. /* Ao carregar do arquivo XML */49. xml.onLoad = function(ok) {50.    /* Se for ok */51.    if (ok) {52.       /* Apagamos o campo statusGuest */53.       statusGuest.text = "";54.       /* Dizemos qual o primeiro nó */55.       xmlNode = this.firstChild;56.       /* Criamos uma variável para o total de itens no XML */

57.       total = xmlNode.childNodes.length;58.       /* Quantidade de página é igual a total dividido por quantidade de linha vezes

coluna */59.       quantidadePagina = Math.ceil((total)/(quantidadeColuna*quantidadeLinha));60.       /* Se quantidade de páginas for maior que 1 */61.       if (quantidadePagina>1) {62.          /* Chamamos a função criaPaginacao */63.          criaPaginacao();64.          /* Se quantidade de página for menor que 1 */65.       } else {66.          /* Chamamos a função preencher */67.          preencher();68.          /* Deletemos a função criaPaginacao */69.          delete criaPaginacao();70.          /* Removemos o MovieClip paginação */71.          paginacao.unloadMovie();72.       }73.       /* Se não for ok */74.    } else {75.       /* Mostramos a mensagem de erro */76.       statusGuest.text = "Erro ao carregar os arquivos";77.    }78. };79. /* Função preencher */80. function preencher() {81.    /* Chamamos o MovieClip recebe no MovieClip vazio */82.    var mc:MovieClip = vazio.attachMovie("recebe", "recebe"+i,

vazio.getNextHighestDepth());83.    /* Posicionamos o MovieClip */84.    mc._x = Math.round(colunaAtual*mc._width+colunaAtual*5);85.    mc._y = Math.round(linhaAtual*mc._height+linhaAtual*5);86.    /* Deixamos o campo de texto dinamico nome_txt aumentar sozinho conforme o

texto */87.    mc.nome_txt.autoSize = true;88.    /* Deixamos o campo de texto dinamico email_txt aumentar sozinho conforme o

texto */89.    mc.email_txt.autoSize = true;90.    /* Mostramos o Nome */91.    mc.nome_txt.text = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;92.    /* Mostramos o E-mail */93.    mc.email_txt.text = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;94.    /* Mostramos a Data da postagem */95.    mc.dia.text = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;96.    /* Mostramos o Comentário */97.    mc.comentario_txt.text =

xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;98.    /* Colocamos os MovieClips importados no Array mcs pelo método push */

99.    mcs.push(mc);100.    /* Incrementamos i e coluna */101.    i++, colunaAtual++;102.    /* Se colunaAtual for igual a quantidadeColuna e linhaAtual for menor que

quantidadeLinha */103.    if (colunaAtual == quantidadeColuna && linhaAtual<quantidadeLinha) {104.       /* Zeramos a coluna */105.       colunaAtual = 0;106.       /* Incrementamos linha */107.       linhaAtual++;108.    }109.    /* Se i for menor que total */110.    if (i<total) {111.       /* Chamamos a função preecher */112.       preencher();113.    }114.    /* Se a altura do scrollBar for menor que altura do MovieClip vazio */115.    if (scrollBar._height>vazio._height) {116.       /* Deixamos o MovieClip scrollBar invisível */117.       scrollBar._visible = false;118.       /* Se não */119.    } else {120.       /* Deixamos o MovieClip scrollBar visível */121.       scrollBar._visible = true;122.    }123. }124. /* Função criaPaginacao */125. function criaPaginacao() {126.    /* Para a quantidadePagina */127.    for (var paginas:Number = 0; paginas<quantidadePagina; paginas++) {128.       /* Importamos o MovieClip pag_mc */129.       var pg = paginacao.attachMovie("pag_mc", "p"+paginas,

paginacao.getNextHighestDepth());130.       /* Posicionamos ele */131.       pg._x = Math.round(paginas*pg._width+paginas*3);132.       /* Retorna o ponto em que se deve carregar as Mensagens */133.       pg.idpag = paginas*(quantidadeColuna*quantidadeLinha);134.       /* Numero da página */135.       pg.pag_txt.text = paginas+1;136.       /* Definimos a página atual */137.       pg.atual = paginas;138.       /* Ao clicar da página */139.       pg.onRelease = function() {140.          /* Retornamos a posição de origem do pan */141.          scrollBar.pan._y = 16;142.          /* Executa a função remove */143.          remove();

144.          /* Execute a função ativar */145.          ativar(this.atual);146.          /* Deixamos a variável i igual ao id da paginação */147.          i = this.idpag;148.          /* Zeramos a variável colunaAtual */149.          colunaAtual = 0;150.          /* Zeramos a variável linhaAtual */151.          linhaAtual = 0;152.          /* Executa a função preencher */153.          preencher();154.       };155.       /* Deixamos a primeira página ativada */156.       paginacao.p0.onRelease();157.    }158. }159. /* Função remove */160. function remove():Void {161.    /* Criamos um loop for para remover os MovieClips */162.    for (var i:Number = 0; i<mcs.length; i++) {163.       /* Removemos os MovieClips com o método removeMovieClip */164.       mcs[i].removeMovieClip();165.    }166.    /* Zere o array mcs */167.    mcs = [];168. }169. /* Função ativar */170. function ativar(num:Number):Void {171.    /* O loop for abaixo vai servir para definir quais dos MovieClips da

paginação vão ficar habilitados, e o que ficará desabilitado */172.    for (var i = 0; i<quantidadePagina; i++) {173.       /* Se num for diferente de i */174.       if (num != i) {175.          /* Habilitamos as páginas */176.          eval("paginacao.p"+i).enabled = true;177.       } else {178.          /* Desativamos as páginas */179.          eval("paginacao.p"+i).enabled = false;180.       }181.    }182. }183. /* Ao pressionar do botão escrever */184. escrever.onPress = function() {185.    /* Vamos para o segundo frame */186.    gotoAndStop(2);187. };

Agora, coloquem isso no segundo frame da camada Actions:

1. /* Paramos o filme */2. stop();3. /* Definimos a ordem de tabulação */4. nome.tabIndex = 1;5. email.tabIndex = 2;6. comentario.tabIndex = 3;7. enviar.tabIndex = 4;8. limpar.tabIndex = 5;9. /* Criamos um LoadVars que manda as informações ao PHP */10. var objManda:LoadVars = new LoadVars();11. /* Ao pressionar do botão enviar */12. enviar.onPress = function() {13.    /* Verificamos se o campo nome foi preenchido */14.    if (nome.text == "") {15.       /* Mostramos a mensagem de erro */16.       status_txt.text = "Informe seu Nome";17.       /* Se não, verificamos se o campo email foi preenchido */18.    } else if (email.text == "") {19.       /* Mostramos a mensagem de erro */20.       status_txt.text = "Informe seu E-mail";21.       /* Se não, verificamos se o campo email contém os caracteres @ e . */22.    } else if (email.text.indexOf("@") == -1 || email.text.indexOf(".") == -1) {23.       /* Mostramos a mensagem de erro */24.       status_txt.text = "Informe corretamente seu E-mail";25.       /* Se não, verificamos se o campo comentario foi preenchido */26.    } else if (comentario.text == "") {27.       status_txt.text = "Informe uma mensagem para enviar";28.       /* Se todos os campos estiverem corretos */29.    } else {30.       /* Mostramos o status de Enviando Mensagem */31.       status_txt.text = "Enviando Mensagem";32.       /* Mandamos ao PHP os valores */33.       /* O nome digitado no campo nome */34.       objManda.nome = nome.text;35.       /* O email digitado no campo email */36.       objManda.email = email.text;37.       /* O comentário digitado no campo comentario */38.       objManda.comentario = comentario.text;39.       /* Enviamos ao PHP os dados e carregamos as mensagens do PHP */40.       objManda.sendAndLoad("http://natan-alves.t35.com/guestMx.php?

action=cadastrar", objManda, "POST");41.       /* Ao carregar o arquivo PHP */42.       objManda.onLoad = function(ok) {43.          /* Se carregou sem problemas */

44.          if (ok) {45.             /* Mostramos a mensagem vinda do PHP */46.             status_txt.text = this.mensagem;47.             /* Apagamos os campos input */48.             nome.text = "";49.             email.text = "";50.             comentario.text = "";51.             /* Chamamos a função volta */52.             intervalo = setInterval(volta, 2000);53.          }54.       };55.    }56. };57. /* Ao pressionar do Botão limpar */58. limpar.onPress = function() {59.    /* Limpamos os campos input */60.    nome.text = "";61.    email.text = "";62.    comentario.text = "";63.    /* Limpamos o campo status_txt */64.    status_txt.text = "";65. };66. /* Função volta */67. function volta() {68.    /* Voltamos ao primeiro frame */69.    gotoAndStop(1);70.    /* Acabamos com o intervalo */71.    clearInterval(intervalo);72. }73. /* Ao pressionar do botão voltar */74. voltar.onPress = function() {75.    /* Voltamos ao primeiro frame */76.    gotoAndStop(1);77.    /* Acabamos com o intervalo */78.    clearInterval(intervalo);79. };

Se seguiram o tutorial corretamente, o resultado será como esse:

Considerações Finais

Hoje aprendemos como criar GuestBook. Aprendemos como criar um arquivo XML a partir de um código em PHP e como criar paginação no Flash. O ideal, sempre que possível utilizar XML, pois facilitam e muito nossa vida quando vamos ao Flash.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://natan.atspace.com

Um abraço a todos e até a próxima.

Autor: Natan D. Alves - Moderador do Fórum de Flash & ActionSctipt MXSTUDIO