Tutorial CRUD for PHP

8/8/2019 Tutorial CRUD for PHP

1/28

CRUD com Flex e Zend_AMF Parte 1

Publicado em21/06/2010porDanielSchmitz

Seguindo o pedido de Paulo Andr Martinhago de Andrade, vamos criar um CRUDutilizando Flex e Zend_AMF. Antes de comearmos, precisamos preparar o nossoambiente, que obrigatoriamente necessita de 2 programas: WAMP Server(http://www.wampserver.com/en/) e Flash Builder 4(http://www.adobe.com/products/flex/). O WAMP Server um servidor PHP que podeser instalado no Windows. No entraremos em detalhes sobre ele, se voc tiverdificuldades me fale que eu crio um outro artigo. O Flash Builder a nossa IDE dedesenvolvimento em Flex. Alm destes programas precisamos tambm do ZendFramework, que pode ser baixado nesse endereo:http://framework.zend.com/download/latest . Pode baixar o Zend Framework MinimalPackage.

Criando a tabela no banco de dados

Com o WAMP Server e Adobe Flash instalado e o Zend Framework baixado, podemoscomear o nosso CRUD. Inicialmente precisamos criar a base de dados, que contm astabelas. Para isso, acesse http://localhost/ e certifique-se que uma tela como a abaixo iraparecer:
http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.wampserver.com/en/http://www.wampserver.com/en/http://www.wampserver.com/en/http://www.adobe.com/products/flex/http://www.adobe.com/products/flex/http://www.adobe.com/products/flex/http://framework.zend.com/download/latesthttp://framework.zend.com/download/latesthttp://framework.zend.com/download/latesthttp://www.adobe.com/products/flex/http://www.wampserver.com/en/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/


2/28

Para criarmos a tabela, precisamos acessar ophpmyadmin. Clique no link em Tools.Na prxima pgina, no campo Criar novo banco de dados, crie o banco

flexCRUD. Na prxima tela podemos criar a tabela, que iremos chamar de pessoas.Em nmero de arquivos, coloque 3. Na prxima tela, crie os 3 campos conforme aimagem a seguir:


3/28

Se no quiser usar a interface grfica, use a seguinte SQL:

CREATE TABLE 'flexCRUD'.'Pessoas' (

'id' INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,'nome' VARCHAR( 200 ) NOT NULL ,'email' VARCHAR( 200 ) NOT NULL) ENGINE = MYISAM ;

Criando o projeto Flex

Agora que estamos com o banco de dados pronto, vamos criar a aplicao Flex. Abra oFlash Builderv at File > New > Flex Project. Na primeira tela, insira o nome doprojeto, e certifique-se que estamos criando uma WebApplication (detalhe da figuraabaixo). No clique no boto Finish, clique emNext.


4/28

A prxima tela do assistente exibe a configurao do Output Folder. Nesta configuraodizemos para onde os arquivos compilados do Flex iro,e neste caso temos queconfigurar a pasta c:\wamp\www\FlexCRUD. Ainda no clique em Finish,precisamos configurar mais alguns parmetros na prxima tela.


5/28

Na prxima tela de configurao, precisamos configurar o campo Output Folder

URL. Ele faz com que, quando acionarmos o boto run do Flash Builder, a urlconfigurada neste campo seja carregada. Geralmente o Flash Builder abre c:\.. masiremos configurar desta forma:


6/28

Aps clicar em Finish o projeto criado. Podemos test-lo clicando no boto Run

(CTRL+F11). Veja que a url aberta no navegador http://localhost/flexCRUD/flexCRUD.html. Verifique tambm o diretrio

C:\wamp\www\flexCRUD, se est semelhante a imagem a seguir:


7/28

Instalando Zend Framework

Crie a pasta C:\wamp\www\flexCRUD\php Aps baixar o Zend Framework,descompacte-o um lugar qualquer e copia a pasta Zend para a recm criada pasta php.Teremos algo semelhante a seguinte figura:

Configurando o gateway.php


8/28

Agora na pasta php iremos criar o seguinte arquivo: gateway.php. Este arquivo a

ponte de comunicao entre o Flex e o PHP. Estou usando o Notepad++ para

manipular os arquivos PHP. O cdigo deste arquivo o seguinte:


9/28

Esta configurao feita atravs do arquivo services-config.xml. Este arquivo contmum xml que descreve a conexo amf e aponta para o arquivo gateway.php. Crie oarquivo services-config.xml na pasta raiz do Flex (src),e adicione o seguinte cdigo:

*

Aps criar o arquivo, deve-se adicion-lo nas diretivas de compilao do projeto.Acesse as propriedades do projeto e no item Flex Compiler, adicione a diretiva: -

services services-config.xml. Veja como fica:


10/28

Testando a conexo

Agora estamos prontos para testar a conexo. Altere o arquivo flexCRUD.mxml para oseguinte cdigo:


11/28

import mx.rpc.events.ResultEvent;public function OnTestConexaoOk(event:ResultEvent):void{

Alert.show(event.result.toString());}]]>

Neste cdigo criamos um RemoteObject, que possui duas propriedades importantes:destination e source. Estas propriedades apontam respectivamente para a configuraodo arquivo services-config.xml e da classe pessoas. Dentro de RemoteObject, criamosum mx:method que aponta para uma funo da classe pessoas.php, neste casoTesteConexao. Em s:creationComplete, fazemos a chamada na funo na classe PHP,

que dispara todo o processo.

A figura a seguir tenta ilustrar este processo. Clique na figura para aument-la:


12/28
http://www.flex.etc.br/wp-content/uploads/2010/06/conexao-flex-php.png


13/28

CRUD com Flex e Zend_AMF Parte 2


Se voc ainda no leuCRUD com Flex e Zend_AMFParte 1, leia agora

Agora que nossa conexo foi estabelecida, podemos comear a adicionar registros. Esta a nossa primeira tarefa, e para isso precisamos criar um formulrio de entrada dedados. Geralmente os formulrios de entrada de dados so feitos em uma popup, evamos seguir esta regra, ok? Crie um novo MXML Component, chamado:PessoaForm.mxml, conforme a imagem a seguir:

O cdigo inicial deste componente est a seguir:
http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/wp-content/uploads/2010/06/image24.pnghttp://www.flex.etc.br/wp-content/uploads/2010/06/image24.pnghttp://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/


14/28

import mx.managers.PopUpManager;

import spark.components.PopUpAnchor;]]>

Neste cdigo criamos um form com dois campos, mais os botes ok e cancelar. At aquinada de mais. O boto cancelar remove o popup, pois este TitleWindow ser um popup.

Voltando aplicao principal, temos que criar o boto que ir abrir este TitleWindow.Alterando o cdigo da aplicao (Parte 1), temos:
http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/


15/28

import mx.controls.Alert;

import mx.managers.PopUpManager;import mx.rpc.events.ResultEvent;public function OnTestConexaoOk(event:ResultEvent):void{

Alert.show(event.result.toString());}]]>

PopUpManager.addPopUp(p,this,true);PopUpManager.centerPopUp(p);]]>

O boto Adicionar Pessoa da aplicao principal abre uma popup, exibindo o

formulrio abaixo:


16/28

Agora podemos voltar ao cdigo do formulrio e adicionar a funcionalidade deadicionar pessoa. Para isso usamos o RemoteObject. O cdigo do arquivo

PessoaForm.mxml fica assim:

...

...


17/28

import mx.managers.PopUpManager;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;

import spark.components.PopUpAnchor;

protected function OnInserir(event:ResultEvent):void{PopUpManager.removePopUp(this);

}

protected function OnFault(event:FaultEvent):void{

Alert.show(event.message.toString(), "ERROR");}

]]>

....

pessoaRemote.Inserir(nome.text,email.text);]]>

As mudanas no cdigo so relativas ao RemoteObject, que possui o mtodo inserir,disparado pelo click do boto. O mtodo inserir deve ser criado no arquivo pessoas.php,conforme o cdigo a seguir:


18/28

}

Neste momento j podemos testar a aplicao. Caso d algum erro, verifique o log deerros em c:\wamp\logs\apache_error.log. Mas olhando o cdigo do arquivopessoas.php, podemos notar que ele tem um problema. Os parmetros de conexo esto

dentro da classe pessoas. Fiz isso de propsito, para mostrar que temos que ter umaviso crtica do nosso cdigo, sempre que possvel. J imaginou termos 10 classes ecada uma delas tem as configuraes do banco de dados? E se estas configuraesmudarem?? Precisaremos alterar as 10 classes.. (eu acho que isso da justa causa hehe).

Para resolver o problema, podemos usar um pouco de orientao a objetos. Vamos criaruma classe chamada Base, que contm essa configurao, e fazer a classe Pessoas

herdar de Base. Veja:

base.php:


19/28

Desta forma, conseguimos usar a varivel $this->db em qualquer classe que herde daclasse Base. No prximo artigo da srie,criamos um datagrid para ver os dados queesto sendo inseridos.
http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/


20/28

CRUD com Flex e ZendAMF Parte 3


Nesta 3a parte do tutorial iremos exibir os dados que esto sendo gravados noformulrio para inserir pessoas.

Outras partes do tutorial:

Parte 1 Preparando o ambiente, criando os projetos Flex e PHP, testando a conexo Parte 2 Inserindo dados com ZendAmf e Flex

Agora vamos exibir os dados que foram adicionados na parte 2. Precisamos criar um

dataGrid com as colunas nome e email, e fazer a comunicao com o PHP para obter osdados. O Datagrid feito atravs do seguinte cdigo:

]]>

Veja que chamamos o mtodo GetAll no CreationComplete do DataGrid. Este mtodoest descrito a seguir:

import forms.PessoaForm;

import mx.controls.Alert;import mx.managers.PopUpManager;import mx.rpc.events.ResultEvent;
http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/


21/28

public function OnTestConexaoOk(event:ResultEvent):void{

Alert.show(event.result.toString());}

public function GetAll():void{RemotePessoas.GetAll();

}

protected function OnGetAll(event:ResultEvent):void{

dg.dataProvider = event.result;}

]]>

O mtodo GetAll() ir chamar o mtodo GetAll() do php, que est descrito a seguir:


22/28

]]>


23/28

CRUD com Flex e Zend AMF Parte 4


Nesta 4a parte iremos aprender a editar os dados que foram inseridos.

Outras partes do tutorial:

Parte 1Preparando o ambiente, criando os projetos Flex e PHP, testando aconexo

Parte 2Inserindo dados com ZendAmf e Flex Parte 3Exibindo os dados no DataGrid

Agora vamos editar um registro que est no grid. Inicialmente temos que criar um botoeditar , conforme o cdigo a seguir:

Neste boto, usamos a propriedade enabledligada ao DataGrid, para que o boto estejaativado somente se uma linha do DataGrid estiver selecionada. No click do boto,criamos a o popup e passamos o id da pessoa para ele. Quando o formulrio terminar decarregar, ele ir se encarregar de pegar os dados.

Porque no passar diretamente nome e email para o formulrio? Porque geralmente oformulrio contm mais campos do que as colunas do DataGrid. Neste caso no seriapossivel passar estes campos. O ideal sempre passar o ID e pegar os dados novamente,mesmo porque os dados podem at ter sido alterados por outra pessoa.

O formulrio PessoaForm.mxml conter modificaes para aceitar a edio de dados.As alteraes esto em negrito
http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/


24/28

if (idPessoa != null)pessoaRemote.GetById(idPessoa);

]]>

import mx.controls.Alert;import mx.managers.PopUpManager;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;

import spark.components.PopUpAnchor;

public var idPessoa:String;

protected function OnInserir(event:ResultEvent):void{

PopUpManager.removePopUp(this);}

protected function OnFault(event:FaultEvent):void{

Alert.show(event.message.toString(), "ERROR");}

protected function OnGetById(event:ResultEvent):void

{nome.text = event.result.nome;


25/28

email.text = event.result.email;}

protected function OnAlterar(event:ResultEvent):void{

PopUpManager.removePopUp(this);

}

]]>

if (idPessoa != null)

pessoaRemote.Alterar(idPessoa,nome.text,email.text);else

pessoaRemote.Inserir(nome.text,email.text);]]>

Para preparar o formulrio para edio, preciso criar uma varivel de controle, queaqui chamamos de idPessoa. Atravs desta varivel sabemos se estamos inserindo ou

alterando um registro

A classe Pessoas no php tambm sobre modificaes, conforme o cdigo a seguir:


26/28

{return "OK";

}

function Inserir($nome,$email){

$data = array("nome"=>$nome,"email"=>$email);$this->db->insert("pessoas",$data);return $this->db->lastInsertId();

}

function Alterar($idPessoa,$nome,$email){

$data = array("nome"=>$nome,"email"=>$email);$this->db->update("pessoas",$data,"id={$idPessoa}");return true;

}

function GetAll()

{ return $this->db->fetchAll("select * from pessoas");}

function GetById($idPessoa){

return $this->db->fetchRow("select * from pessoas where id ={$idPessoa}");}

}

Agora s falta deletar o registro, que ser feitono prximo artigo da srie.
http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/


27/28

CRUD com Flex e Zend-AMF Parte 5

Final


Para finalizar o CRUD criado ao logo da semana, iremos implementar o delete deregistros.

Parte 1Preparando o ambiente, criando os projetos Flex e PHP, testando aconexo

Parte 2Inserindo dados com ZendAmf e Flex Parte 3Exibindo os dados no DataGrid Parte 4Alterando dados

Para deletar um registro, precisamos inicialmente criar um boto que tem o mesmocomportamento do boto editar, ou seja, ele fica disponvel somente se uma linha doDataGrid estiver selecionada. Isso feito com o seguinte cdigo:

Veja que agora chamamos o mtodo Delete do PHP, que est implementado a seguir:

function Delete($idPessoa){

$this->db->delete("pessoas", "id = {$idPessoa}");return true;

}

Para finalizar, precisamos atualizar o DataGrid assim que o registro for deletado. Isso feito da seguinte forma:
http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-4/http://www.flex.etc.br/tutorial/crud-com-flex-e-zendamf-parte-3/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-2/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend_amf-parte-1/http://www.flex.etc.br/author/danielschmitz/http://www.flex.etc.br/tutorial/crud-com-flex-e-zend-amf-parte-5-final/


28/28

..............protected function OnDelete(event:ResultEvent):void

{GetAll();

}

Com isso conseguimos deletar os registros que criamos.

Voc pode baixar o cdigo fonte completo aqui.

Concluses

O desenvolvimento de sistemas, seja ele em flex ou no, sempre est passvel de erros.Este crud apresentado possuidiversas melhorias que podem ser feitas e fica como dever de casa para voc. Fique avontade em criticar o cdigo, assim que se aprende (e no copiando/colando)

Esta srie de artigos marcou minha despedida das frias, que tirei exclusivamente paratrabalhar em casa. Foi muitoproveitoso, muito bom. Quero mais !! To pensando em virar freela !! Tem algumtrabalho ae??
http://www.flex.etc.br/wp-content/uploads/2010/06/flexCRUD.ziphttp://www.flex.etc.br/wp-content/uploads/2010/06/flexCRUD.ziphttp://www.flex.etc.br/wp-content/uploads/2010/06/flexCRUD.zip

Tutorial CRUD for PHP

Documents

Transcript of Tutorial CRUD for PHP