Tutorial CRUD for PHP

CRUD com Flex e Zend_AMF – Parte 1 Publicado em 21/06/2010 por DanielSchmitz Seguindo o pedido de Paulo André Martinhago de Andrade, vamos criar um CRUD utilizando Flex e Zend_AMF. Antes de começarmos, precisamos preparar o nosso ambiente, 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 pode ser instalado no Windows. Não entraremos em detalhes sobre ele, se você tiver dificuldades me fale que eu crio um outro artigo. O Flash Builder é a nossa IDE de desenvolvimento em Flex. Além destes programas precisamos também do Zend Framework, que pode ser baixado nesse endereço: http://framework.zend.com/download/latest. Pode baixar o “Zend Framework Minimal Package”.

Criando a tabela no banco de dados Com o WAMP Server e Adobe Flash instalado e o Zend Framework baixado, podemos começar o nosso CRUD. Inicialmente precisamos criar a base de dados, que contém as tabelas. Para isso, acesse http://localhost/ e certifique-se que uma tela como a abaixo irá aparecer:

Para criarmos a tabela, precisamos acessar o phpmyadmin. Clique no link em “Tools”.  Na próxima página, no campo “Criar novo banco de dados”, crie o banco “flexCRUD”. Na próxima tela podemos criar a tabela, que iremos chamar de pessoas. Em número de arquivos, coloque 3. Na próxima tela, crie os 3 campos conforme a imagem a seguir:

Se não quiser usar a interface gráfica, use a seguinte SQL: CREATE TABLE 'flexCRUD'.'Pessoas' 'flexCRUD'.'P essoas' ( '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 aplicação Flex. Abra o Flash Builder vá até File > New > Flex Project. Na primeira tela, insira o nome do projeto, e certifique-se que estamos criando uma WebApplication (detalhe da figura abaixo). Não clique no botão Finish, clique em Next.

A próxima tela do assistente exibe a configuração do Output Folder . Nesta configuração dizemos para onde os arquivos compilados do Flex irão,e neste caso temos que  \wamp\www\ FlexCRUD”. configurar a pasta “c: \wamp\www\  FlexCRUD”. Ainda não clique em Finish, precisamos configurar mais alguns parâmetros na próxima tela.

 Na próxima tela de configuração, precisamos configurar o campo “Output Folder  URL”. Ele faz com que, quando acionarmos o botão “run” do Flash Builder, a url  \ …..” configurada neste campo seja carregada. Geralmente o Flash Builder abre “c: \  …..” mas iremos configurar desta forma:

Após clicar em Finish o projeto é criado. Podemos testá-lo clicando no botão “Run” (CTRL+F11). Veja que a url aberta no navegador é “http://localhost/flexCRUD/flexCRUD.html”. Verifique também o diretório  \wamp\www\ flexCRUD”, “C: \wamp\www\  flexCRUD”, se está semelhante a imagem a seguir:

Instalando Zend Framework php” Após baixar o Zend Framework,  \wamp\www\flexCRUD\ php Crie a pasta “C: \wamp\www\flexCRUD\  descompacte-o um lugar qualquer e copia a pasta Zend para a r ecém criada pasta “php”. Teremos algo semelhante a seguinte figura:

Configurando o gateway.php

Agora na pasta “php” iremos criar o seguinte arquivo: gateway.php. Este arquivo é a “ponte” de comunicação entre o Flex e o PHP. Estou usando o Notepad++ para manipular os arquivos PHP. O código deste arquivo é o seguinte: setFallbackAutoloader(true); //Instancia o servidor Zend_AMF $server = new Zend_Amf_Server(); //Habilita o modo de desenvolvimento, retornando // mensagens de erro. Comente esta linha quando // estiver em modo de produção $server->setProduction(false); //Adiciona este diretorio como um diretorio de // classes que podem ser usadas pelo Flex $server->addDirectory(dirname(__FILE__)); //Dependendo da requisição do Flex, irá // chamar a classe correspondente, respondendo // em formato AMF o que a classe responder. echo $server->handle(); //não precisa fechar a tag PHP. // É uma prática recomendada pela Zend!

O arquivo gateway.php é muito importante. Você deve olhar cada linha deste arquivo e entender perfeitamente o que ela faz. Se não entender me fale oK? Para testarmos se o arquivo gateway está ok, acesse: “http://localhost/flexCRUD/php/gateway.php” e verifique se surge um arquivo para download com o texto “

Zend Amf  Endpoint

”. Se isto acontecer, o arquivo está OK!

Criando a classe Pessoas Inicialmente a classe Pessoas (arquivo pessoas.php) possui somente um método para testarmos a conexão. Veja:
Configurando a conexão do Flex com o PHP

Esta configuração é feita através do arquivo services-config.xml. Este arquivo contém um xml que descreve a conexão amf e aponta para o arquivo gateway.php. Crie o arquivo services-config.xml na pasta raiz do Flex (“src”), e adicione o seguinte código: *

Após criar o arquivo, deve-se adicioná-lo nas diretivas de compilação do projeto. Acesse as propriedades do projeto e no item Flex Compiler, adicione a diretiva: services services-config.xml. Veja como fica:

Testando a conexão Agora estamos prontos para testar a conexão. Altere o arquivo flexCRUD.mxml para o seguinte código:



Neste código criamos um RemoteObject, que possui duas propriedades importantes: destination e source. Estas propriedades apontam respectivamente para a configuração do arquivo services-config.xml e da classe pessoas. Dentro de RemoteObject, criamos um mx:method que aponta para uma função da classe pessoas.php, neste caso “TesteConexao”. Em s:creationComplete, fazemos a chamada na função na classe PHP, que dispara todo o processo. A figura a seguir tenta ilustrar este processo. Clique na figura para aumentá-la:

CRUD com Flex e Zend_AMF – Parte 2 Publicado em 21/06/2010 por DanielSchmitz Se você ainda não leu CRUD com Flex e Zend_AMF – Parte 1, 1, leia agora Agora que nossa conexão foi estabelecida, podemos começar a adicionar registros. Esta é a nossa primeira tarefa, e para isso precisamos criar um formulário de entrada de dados. Geralmente os formulários de entrada de dados são feitos em uma popup, e vamos seguir esta regra, ok? Crie um novo MXML Component, chamado: PessoaForm.mxml, conforme a imagem a seguir:

O código inicial deste componente está a seguir:

width="100%">

Neste código criamos um form com dois campos, mais os botões ok e cancelar. Até aqui nada de mais. O botão cancelar remove o popup, pois este TitleWindow será um popup. Voltando à aplicação principal, temos que criar o botão que irá abrir este TitleWindow. Alterando o código da aplicação (Parte 1) 1), temos:


mx.controls.Alert; mx.managers.PopUpManager; mx.rpc.events.ResultEvent; function OnTestConexaoOk(event:ResultEvent):void Alert.show(event.result.toString());

} ]]>

O botão “Adicionar Pessoa” da aplicação principal abre uma popup, exibindo o formulário abaixo:

Agora podemos voltar ao código do formulário e adicionar a funcionalidade de “adicionar pessoa”. Para isso usamos o RemoteObject. O código do arquivo PessoaForm.mxml fica assim: ... ...
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"); } ]]> ....

As mudanças no código são relativas ao RemoteObject, que possui o método inserir, disparado pelo click do botão. O método inserir deve ser criado no arquivo pessoas.php, conforme o código a seguir: db = new Zend_Db_Adapter_Pdo_Mysql(array( 'host' => '127.0.0.1', 'username' => 'root', 'password' => '', 'dbname' => 'flexcrud' )); } function TesteConexao() { return "OK"; } function Inserir($nome,$email) { $data = array('nome'=>$nome,'email'=>$email); $this->db->insert('pessoas',$data); return $this->db->lastInsertId(); }

}

Neste momento já podemos testar a aplicação. Caso dê algum erro, verifique o log de erros em c:\wamp\logs\apache_error.log. Mas olhando o código do arquivo pessoas.php, podemos notar que ele tem um problema. Os parâmetros de conexão estão dentro da classe pessoas. Fiz isso de propósito, para mostrar que temos que ter uma visão crítica do nosso código, sempre que possível. Já imaginou termos 10 classes e cada uma delas tem as configurações do banco de dados? E se estas configurações mudarem?? Precisaremos alterar as 10 classes.. (eu acho que isso da justa causa hehe). Para resolver o problema, podemos usar um pouco de orientação a objetos. Vamos criar uma classe chamada “Base”, que contém essa configuração, e fazer a classe Pessoas herdar de Base. Veja: base.php: db = new Zend_Db_Adapter_Pdo_Mysql(array( 'host' => '127.0.0.1', 'username' => 'root', 'password' => '', 'dbname' => 'flexcrud' )); } }

Agora a classe Pessoas fica assim: $nome,'email'=>$email); $this->db->insert('pessoas',$data); return $this->db->lastInsertId(); } }

Desta forma, conseguimos usar a variável $this->db em qualquer classe que herde da classe Base. No próximo artigo da série, criamos um datagrid para ver os dados que estão sendo inseridos. inseridos.

CRUD com Flex e ZendAMF – Parte 3 Publicado em 22/06/2010 por DanielSchmitz

Nesta 3a parte do tutorial iremos exibir os dados que estão sendo gravados no formulário para inserir pessoas. Outras partes do tutorial:  

Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão 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 comunicação com o PHP para obter os dados. O Datagrid é feito através do seguinte código:

Veja que chamamos o método GetAll no CreationComplete do DataGrid. Este método está descrito a seguir:
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 método GetAll() irá chamar o método GetAll() do php, que está descrito a seguir: $nome,'email'=>$email); $this->db->insert('pessoas',$data); return $this->db->lastInsertId(); } function GetAll() { return $this->db->fetchAll("select * from pessoas"); }

}

O método GetAll() do PHP usa a instância de db para realizar um select, através do método fetchAll. O resultado de fetchAll é retornado pelo php e o método OnGetAll no flex é executado, onde setamos o dataprovider do DataGrid. Para finalizar, precisamos criar um botão que irá atualizar o dataGrid. Isso é facilmente feito pelo código a seguir:
]]>

CRUD com Flex e Zend AMF – Parte 4 Publicado em 23/06/2010 por DanielSchmitz Nesta 4a parte iremos aprender a editar os dados que foram inseridos. Outras partes do tutorial: 

 

Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão Parte 2 – Inserindo dados com ZendAmf e Flex Parte 3 – Exibindo os dados no DataGrid

Agora vamos editar um registro que está no grid. Inicialmente temos que criar um botão “editar” , conforme o código a seguir:

Neste botão, usamos a propriedade enabled ligada ao DataGrid, para que o botão esteja ativado somente se uma linha do DataGrid estiver selecionada. No click do botão, criamos a o popup e passamos o id da pessoa para ele. Quando o formulário terminar de carregar, ele irá se encarregar de pegar os dados. Porque não passar diretamente nome e email para o formulário? Porque geralmente o formulário contém mais campos do que as colunas do DataGrid. Neste caso não seria possivel 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 formulário PessoaForm.mxml conterá modificações para aceitar a edição de dados. As alterações estão em negrito

        

  


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

import spark.components.PopUpAnchor;  public var idPessoa:String; 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:Result OnGetById(event:ResultEvent):void  Event):void  { nome.text = event.result.nome;

email.text = event.result.email; }  protected function OnAlterar(event:Result OnAlterar(event:ResultEvent):void  Event):void  { PopUpManager.removePopUp(this); }

]]>  



Para preparar o formulário para edição, é preciso criar uma variável de controle, que aqui chamamos de idPessoa. Através desta variável sabemos se estamos inserindo ou alterando um registro A classe Pessoas no php também sobre modificações, conforme o código a seguir:
{ 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á feito no próximo artigo da série. série.

CRUD com Flex e Zend-AMF – Parte 5 –  Final Publicado em 23/06/2010 por DanielSchmitz Para finalizar o CRUD criado ao logo da semana, iremos implementar o delete de registros. 

  

Parte 1 – Preparando o ambiente, criando os projetos Flex e PHP, testando a conexão Parte 2 – Inserindo dados com ZendAmf e Flex Parte 3 – Exibindo os dados no DataGrid Parte 4 – Alterando dados

Para deletar um registro, precisamos inicialmente criar um botão que tem o mesmo comportamento do botão editar, ou seja, ele fica disponível somente se uma linha do DataGrid estiver selecionada. Isso é feito com o seguinte código:

Veja que agora chamamos o método Delete do PHP, que está implementado a seguir: function Delete($idPessoa) 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:

.............. protected function OnDelete(event:ResultEvent):void { GetAll(); }

Com isso conseguimos deletar os registros que criamos. Você pode baixar o código fonte completo aqui.

Conclusões O desenvolvimento de sistemas, seja ele em flex ou não, sempre está passível de erros. Este crud apresentado possui diversas melhorias que podem ser feitas e fica como “dever de casa” p ara você. Fique a vontade em criticar o código, é assim que se aprende (e não copiando/colando)… Esta série de artigos marcou minha despedida das férias, que tirei exclusivamente para trabalhar em casa. Foi muito proveitoso, muito bom. Quero mais !! To pensando em virar freela !! Tem algum trabalho ae??