zf básico - 4. controle e visão
DESCRIPTION
Mini-curso sobre Zend Framework - Parte 4TRANSCRIPT
![Page 1: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/1.jpg)
11
Zend FrameworkZend Framework
Parte IV: Ampliando a primeira Parte IV: Ampliando a primeira aplicação – Controle e Visãoaplicação – Controle e Visão
![Page 2: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/2.jpg)
22
Ajustando o BootstrapAjustando o BootstrapSubstitua o seguinte trecho de código:Substitua o seguinte trecho de código:
Zend_Loader::loadClass('Zend_Controller_Front');Zend_Loader::loadClass('Zend_Controller_Front');
Por:Por:
Zend_Loader::registerAutoload();Zend_Loader::registerAutoload();
O método registerAutoload() se encarrega de carregar O método registerAutoload() se encarrega de carregar automaticamente qualquer classe da biblioteca do ZF.automaticamente qualquer classe da biblioteca do ZF.
![Page 3: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/3.jpg)
33
Especificação da AplicaçãoEspecificação da Aplicação
Iremos construir uma simples aplicação para inventário de uma coleção de CDs.
A página principal deverá listar a coleção e permitir o acesso às funcionalidades de Adicionar, Editar e Remover CDs da coleção.
![Page 4: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/4.jpg)
44
Modelando os DadosModelando os Dados
Iremos armazenar nossa lista numa tabela chamada ‘cd’ com um esquema semelhante a:
CampCampoo
TipoTipo NuloNulo??
ObsObs
idid IntegerInteger NãoNão Primary key,Autoincrement
artistartistaa
Varchar(10Varchar(100)0)
NãoNão
titulotitulo Varchar(10Varchar(100)0)
NãoNão
![Page 5: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/5.jpg)
55
Páginas para a aplicaçãoPáginas para a aplicaçãoPáginaPágina DescriçãoDescrição
HomeHome Exibirá a lista de álbuns e proverá links para editá-los e removê-los. Além disso, um link para permitir a adição de novos álbuns será provido.
AdicionarAdicionar Proverá um formulário para adição de um novo álbum.
EditarEditar Proverá um formulário para edição de um álbum.
RemoverRemover Esta página confirmará a remoção de um álbum e então o removerá.
![Page 6: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/6.jpg)
66
Organizando as páginasOrganizando as páginas
Cada página da aplicação é conhecida como uma “action” e estas são agrupadas dentro de “controllers”.
Ex.: Para uma URL no formato http://localhost/project/news/view, o controller é news e a action é view.
O ZF permite agrupar actions relacionadas.
![Page 7: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/7.jpg)
77
Organizando as páginasOrganizando as páginas
O controller do ZF reserva uma action especial chamada index como a action padrão.
Em nosso exemplo, na URL http://localhost/project/news/ a action index contida no controller news será executada.
![Page 8: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/8.jpg)
88
Organizando as páginasOrganizando as páginas
Como temos quatro páginas, todas aplicáveis a álbuns, iremos agrupá-las num único controller contedo as quatro actions. Usaremos o controller padrão e as quatro actions serão:
PáginaPágina ControllerController ActionAction
HomeHome IndexIndex indexindex
AdicionarAdicionar IndexIndex addadd
EditarEditar IndexIndex editedit
RemoverRemover IndexIndex deletedelete
![Page 9: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/9.jpg)
99
Setando o Setando o controllercontroller
No ZF, o controller é uma classe nomeada como {Nome}Controller.
Esta classe deverá estar num arquivo chamado {Nome}Controller.php dentro do diretório ./application/controllers.
Note que ambos os nomes devem começar com letras maiúsculas.
![Page 10: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/10.jpg)
1010
Setando o Setando o controllercontroller
Cada action é uma função pública contida na classe controller e deve ser nomeada como {nome}Action. Neste caso {nome} deve iniciar com letra minúscula.
Como nosso controller é o IndexController já iniciado na aplicação passada, vamos editá-lo.
![Page 11: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/11.jpg)
1111
Setando o Setando o controllercontroller
Cada action é uma função pública contida na classe controller e deve ser nomeada como {nome}Action. Neste caso {nome} deve iniciar com letra minúscula.
Como nosso controller é o IndexController já iniciado na aplicação passada, vamos editá-lo.
![Page 12: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/12.jpg)
1212
Setando o Setando o controllercontroller
![Page 13: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/13.jpg)
1313
Setando o Setando o controllercontroller
Setamos as quatro actions que usaremos no controller. Porém, não poderão ser usadas até que setemos seus respectivos views. As URLs para cada action são:
URLURL ActionAction
http://localhost/projecthttp://localhost/project IndexController::indexAction()IndexController::indexAction()
http://localhost/project/index/http://localhost/project/index/addadd
IndexController::addAction()IndexController::addAction()
http://localhost/project/index/http://localhost/project/index/editedit
IndexController::editAction()IndexController::editAction()
http://localhost/project/index/http://localhost/project/index/deletedelete
IndexController::deleteAction()IndexController::deleteAction()
![Page 14: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/14.jpg)
1414
Setando o Setando o viewview O componente view do ZF é chamado Zend_View.
Ele nos permitirá separar o código de visualização da página do código das funções action.
Zend_Controller_Action_Helper_ViewRenderer é o componente listener que inicializa uma propriedade view ($this->view) para que possa ser usada na renderização de um script de visualização. Para isso, ele seta o objeto Zend_View para observar em views/scripts/{controller_name} para que seja renderizado o script de visualização cujo nome seja a parte inicial da action correspondente, acrescido da extensão .phtml.
Dessa forma, o script de visualização renderizado é: views/scripts/{controller_name}/{action_name}.phtml
![Page 15: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/15.jpg)
1515
Setando o Setando o viewview
Para integrar a visualização dentro da aplicação é preciso criar os arquivos de visualização (templates). Para prover funcionalidade aos mesmos, deve-se acrescentar algum conteúdo específico que corresponda às ações definidas nos controller actions.
Implementar a renderização das visões das páginas com seus respectivos títulos.
![Page 16: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/16.jpg)
1616
Setando o Setando o viewview
![Page 17: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/17.jpg)
1717
Setando o Setando o viewview
É preciso adicionar quatro arquivos de visão à aplicação. Estes arquivos são conhecidos como scripts de visão ou templates de visão.
Cada template é nomeado conforme sua action e possui extensão .phtml.
O arquivo precisa estar no subdiretório nomeado conforme o controller utilizado.
![Page 18: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/18.jpg)
1818
Setando o Setando o viewview ./application/views/scripts/index/index.phtml
![Page 19: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/19.jpg)
1919
Setando o Setando o viewview ./application/views/scripts/index/add.phtml
![Page 20: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/20.jpg)
2020
Setando o Setando o viewview ./application/views/scripts/index/edit.phtml
![Page 21: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/21.jpg)
2121
Setando o Setando o viewview
./application/views/scripts/index/delete.phtml Rode a aplicação.
![Page 22: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/22.jpg)
2222
Código HTML comumCódigo HTML comum
Ficou bem óbvio que há um código HTML comum em nossos templates. Este é um problema bastante comum, por isso o componente Zend_Layout foi desenvolvido para resolvê-lo.
Zend_Layout nos permite mover todo o código de cabeçalho e rodapé comuns para um script de layout, o qual poderá incluir o código de visão que for específico à ação executada.
![Page 23: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/23.jpg)
2323
Código HTML comumCódigo HTML comum São necessários os seguintes ajustes em
nossa aplicação:– Criar o diretório: ./application/layouts.– Inicializar o Zend_Layout no arquivo bootstrap
(index.php): Localize a linha: $frontController->setControllerDirectory('../application/controllers'); Abaixo dela acrescente:/** * seta o diretório com os templates-padrão da aplicação * */Zend_Layout::startMvc(array('layoutPath'=>'./application/
layouts'));
![Page 24: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/24.jpg)
2424
Código HTML comumCódigo HTML comum
O método startMvc() trabalha nos bastidores para setar um plugin ao front controller que garantirá que o componente Zend_Layout renderize o script de layout, com os scripts de visão das ações, até o final do processo de execução.
Agora é preciso criar um script de layout. Por padrão, ele é chamado layout.phtml e fica no diretório ./application/layouts.
![Page 25: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/25.jpg)
2525
Criando o layout.phtmlCriando o layout.phtml
./application/layouts/layout.phtml
![Page 26: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/26.jpg)
2626
Código HTML comumCódigo HTML comum
Agora, pode-se limpar as 4 action scripts pois nenhum conteúdo específico foi colocado nelas.
Sem apagar os arquivos, apenas limpe o conteúdo de index.phtml, add.phtml, edit.phtml e delete.phtml.
Execute o código e analise o resultado.
![Page 27: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/27.jpg)
2727
Aplicando um CSS: Aplicando um CSS: ProblemaProblema
Aplicar um CSS ao projeto com ZF tem Aplicar um CSS ao projeto com ZF tem um problema: a URL não consegue um problema: a URL não consegue apontar corretamente ao diretório-raiz apontar corretamente ao diretório-raiz da aplicação.da aplicação.
Isso é resolvido usando um componente Isso é resolvido usando um componente chamado chamado HelperHelper de visão. de visão.
Ao passo que o ZF provê muitos Ao passo que o ZF provê muitos helpershelpers prontos, alguns específicos precisam prontos, alguns específicos precisam ser feitos pelo projetista da aplicação.ser feitos pelo projetista da aplicação.
![Page 28: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/28.jpg)
2828
Aplicando um CSS: SoluçãoAplicando um CSS: Solução Será preciso criar um view helper específico,
chamado baseUrl(), que colherá a informação no formato requerido para requisitar o objeto.
View helpers ficam no subdiretório application/views/helpers e são nomeados {Helper_name}.php (primeira letra maiúscula) e a classe contida precisa ser chamada Zend_View_Helper_{Helper_name} (novamente, primeira letra maiúscula). É preciso haver um método na classe chamado {helper_name}() (primeira letra minúscula).
Em nossa aplicação, o arquivo é chamado BaseUrl.php.
![Page 29: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/29.jpg)
2929
Criando o Criando o View HelperView Helper
./application/views/helpers/BaseUrl.php
![Page 30: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/30.jpg)
3030
Ajustando o layout.phtmlAjustando o layout.phtml
Localize o seguinte trecho de código no arquivo Localize o seguinte trecho de código no arquivo layout.phtml e acrescente a linha necessária:layout.phtml e acrescente a linha necessária:
![Page 31: ZF Básico - 4. Controle e Visão](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5590a7431a28ab59528b4650/html5/thumbnails/31.jpg)
3131
Criando o CSSCriando o CSS
./public/css/site.css Rode a aplicação.