No artigo anterior, falamos um pouco sobre o Symfony no Ubuntu, a configuração do servidor apache, a instalação e criamos uma primeira aplicação. 

Agora vamos entender como funciona a configuração do Symfony, como podemos utilizar seus recursos para carregar as informações necessárias a uma aplicação simples.

Cada projeto web tem suas características. Os projetos desenvolvidos pelo modelo MVC são considerados projetos bem organizados e têm por objetivo básico separar a lógica de negócio. O que diferencia é justamente a organização como as camadas são dispostas.

Para elaborar um projeto web, é necessário ter um bom planejamento. Não importa a dimensão do projeto. Tudo começa pelo planejamento e pela descrição das regras de negócio do projeto.

Informações do Projeto

Antes de colocarmos a mão no código, vamos fazer umas considerações básicas para termos um “norte” do projeto. As sessões seguintes apontam características do projeto:

• O projeto possui 3 ( três) tipos de usuários – Administrador, Publicador e  Visitante;
• Administrador – Tem acesso total e pode adicionar, excluir e editar qualquer conteúdo do site;
• Publicador – Tem acesso limitado apenas às noticias e às fotos, pode cadastrar, editar e excluir apenas notícias e fotos no site;
• Visitante – Todo e qualquer usuário capaz de acessar via browser. Podem apenas visualizar os conteúdos do site;
• O projeto terá duas aplicações Frontend  e Backend;
• Frontend é a aplicação disponível para qualquer visitante;
• Backend é a aplicação disponível apenas para Administrador e Publicador. Ou seja, necessita de credenciais de acesso;
• O projeto deverá conter 5 módulos (sessões) para o Frontend e 7 módulos no Backend;
• Módulo Home (frontend)  – Página inicial do site;
• Módulo Conteúdo (frontend) – Todo e qualquer conteúdo para cada sessão;
• Módulo Galeria (frontend) – Mostra as imagens cadastradas;
• Módulo Notícias (frontend) – Para mostrar as notícias do site;
• Módulo Contato  (frontend) – Formulário de contato que submete informações para o administrador e publicador.

As descrições acima não se tratam de User Stories, são apenas umas características do projeto. Não é o objetivo descrever todos os processos, e sim mostrar a elaboração de um projeto simples “na prática”. Vou apresentar uma imagem com esboço do Frontend – home do nosso projeto. Este layout é meramente ilustrativo.

Este projeto vai demandar ações básicas para usarmos uma base de dados ( MySQL ) e uma configuração simples do Symfony Framework. Ao final do projeto, termos algo desta magnitude.

Configurações básicas do Projeto

Vamos abrir o nosso projeto, que, conforme a primeira parte, configuramos o framework e criamos o primeiro projeto no Ubuntu.

• Abrimos o navegar e digitamos a url: http://imasters.tut.br
• Agora abra o projeto com seu editor preferido e vamos editar os Headers
• Vamos abrir a sequencia /imasters/apps/frontend/config
• Vamos localizar o arquivo “view.yml”

Toda vez que alteramos um arquivp .yml (YAML) no Symfony temos que limpar o cache do projeto que, anteriormente, havia definido as suas configurações.

$ php symfony cc

 Recarregando a página do nosso projeto, podemos ver que as configurações definidas no head já são visíveis.

Nosso próximo passo é editar a formatação das páginas, aplicando o estilo à esta página. Vamos editar o arquivo “main.css”, que é carregado no “view.yml” e encontra-se no caminho “web/css/main.css”. Nesse, inserimos o estilo padrão para todo o nosso projeto. Posteriormente teremos estilos definidos por módulos que, igualmente, serão carregados pelo “view.yml”. Veja o código abaixo:

/* web/css/main.css */
/*retiramos todos os espaços padão das páginas*/
*{
  margin:0;
  padding: 0;
}

body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #333333;
}

a{
  color: #000066;
  text-decoration:none;
  outline:none;
}
a:hover{
  text-decoration: underline;
}

h1{
  color: #3FB4C1;
  font-size: 24px;
  padding-top:10px;
  padding-bottom:1px;
  border-bottom: 1px solid #3FB4C1;
  margin-bottom: 15px;
}
/* definimos os box do site */
#topo{
  width: 1003px;
  height: 160px;
  margin: 0 auto;
}

#menu{
  width: 1003px;
  height: 20px;
  margin: 0 auto;
}

#corpo{
  width: 983px;
  padding:10px;
  margin:0 auto;
}
#rodape{
  width: 1003px;
  height: 20px;
  margin:0 auto;
}

Agora abriremos o arquivo responsável pela apresentação do código html da aplicação. Ou seja, a visão da aplicação. Não confunda a visão de cada módulo com a visão da aplicação. Este arquivo encontra-se segundo o caminho “apps/frontend/templates/layout.php”. Vamos inserir o código html abaixo:

<!-- imasters/apps/frontend/templates/layout.php -->
<div id="topo">

</div>

<div id="menu">

</div>

<div id="corpo">

   <?php echo $sf_content ?>

</div>

<div id="rodape">

</div>

Particionando o Projeto

Agora que criamos a estrutura e veremos que o layout já tomou um certo “estilo”. Podemos prosseguir incluindo os arquivos necessários.

Percebemos que há uma separação bem distinta no nosso projeto. E, por isso, devemos colocar cada elemento no seu devido lugar, nos preocupando para não duplicar arquivos, fazendo um bom uso da reutilização desses no decorrer do processo. Vamos analisar cada um dos box – “divs” – html que criamos.

No box do “topo”, temos algumas ações. Mas, em princípio, nada que dependa de registros no banco de dados. Também o conteúdo do topo não se altera para cada ação de navegabilidade. Ou seja, se eu estiver na home, carrego o mesmo topo. Assim procede para as páginas internas. Com isso, criaremos algo chamado de “parciais”, que é apenas a inclusão de um conteúdo sem a necessidade de buscar dados do nosso banco. Essas “parciais” são chamadas de Partial ou Slots. Cada parcial é definida pelo prefixo “_”  com o nome desse. Apenas crie o arquivo dentro do diretório “templates” do seu módulo. No nosso caso, “apps/frontend/modules/home/templates”. Vamos criar o arquivo chamado “_topo.php”.

Criado esse arquivo, precisamos habilitar o helper Partial para que o symfony reconheça, de maneira global, todos que iremos criar. Abriremos o arquivo “apps/frontend/config/settings.yml” e adicionaremos, ao final do arquivo ( prestando atenção na identação do YAML), a linha abaixo:

# apps/frontend/config/settings.yml
...
    standart_helpers:       [Partial]

Vamos adicionar  no partial criado “_topo.php” o seguinte código:

<!-- apps/frontend/modules/home/templates/_topo.php -->
<a href="<?php echo url_for('@homepage') ?>" title="Página Inicial" >
  <?php echo image_tag("logo_projeto.jpg", array("alt" => "logo do projeto", "border" => 0))?>
</a>

A  tag “a”, correspondente ao link que iremos criar no topo. Tem por ação o retorno para a página inicial. A ação da página é definida pelo symfony e seus roteadores de ações. Sendo assim, temos que usar este padrão toda vez em que criarmos um link. A  tag “img” busca da pasta images o arquivo da nossa logomarca. Esse arquivo encontra-se na pasta “web/images/logo_projeto.jpg”.

O symfony, por segurança trata diversas tags html, à sua maneira. Ou seja, para manter o padrão interpretado pela sua biblioteca.

Vamos chamar o parcial na visão da aplicação, “apps/frontend/templates/layout.php”. Vamos adicionar nesse arquivo o conteúdo abaixo. Vamos adicioná-lo dentro da box (div) topo.

<!-- apps/frontend/templates/layout.php -->
...
<div id="topo">
  <?php include_partial("home/topo") ?>
</div>
...

Conforme comentado anteriormente, já que alteramos um arquivo de configuração para dizer ao symfony carregar o helper Partial, então precisamos limpar o cache da aplicação.

$php symfony cc

Vamos verificar o novo topo do nosso projeto. “http://imasters.tut.br” pressione F5. O symfony vai criar o cache novamente, então é normal certo “delay” nessa ação. Mas logo é possível ver a nossa logomarca e o link carregando exatamente para a página inicial.

Limpando conteúdos desnecessários e definindo conteúdos padrões para todo o Projeto

Agora que criamos uma “parcial” chamada de topo, iremos incluir outra parte para o menu, chamada de “menu”. Porém, há de se pensar que o nosso menu será carregado através do nosso banco de dados. No próximo artigo, iremos trabalhar com relacionamento de dados, a partir do banco de dados. Mas, primeiro, vamos “limpar” o nosso projeto e adicionar outro tipo de parcial chamada de Componentes.

Os componentes são partes. Porém, podem carregar dados do banco de dados agindo pela controladora do módulo, sem afetar qualquer ação de outro módulo. São “apontamentos” para outros módulos podendo ser acessados em qualquer parte do projeto. Ou seja, mesmo se estiver em outra sessão (módulo), poderei carregar esses componentes com dados oriundos do banco de dados sem prejudicar o módulo em questão.

Vamos carregar os componentes no módulo “home”. Criaremos na controladora do módulo – diretório “actions” um arquivo chamado “components.class.php”. Nesse arquivo, vamos adicionar o seguinte conteúdo:

/* apps/frontend/modules/home/actions/components.class.php */
<?php
/******* components.class ********

   controlador de componentes 
        do módulo home

**********************************/

class homeComponents extends sfComponents{

      public function executeMenu(sfWebRequest $request){

	$this->menus = array("Home", "O Projeto", "Notícias", "Fotos", "Contato");

      }
}

Mesmo processo anterior para visão do módulo – diretório “templates”. Vamos criar um arquivo com o mesmo nome do método “apps/frontend/modules/home/templates/_menu.php”. Nesse, adiciona-se o código abaixo:

<!-- apps/frontend/modules/home/templates/_menu.php
<ul>

  <?php foreach($menus as $menu): ?>

    <li><a href="#"><?php echo $menu ?></a></li>

  <?php endforeach; ?>

</ul>

Agora vamos chamar o componente “menu” dentro da box (div) menu no arquivo “layout.php” – visão da aplicação. Adiciona-se o código abaixo:

<!-- apps/frontend/templates/layout.php -->
...
<div id="menu">
   <?php include_component("home", "menu") ?>
</div>

Antes de testar o módulo vamos limpar a controladora “actions.class.php” do módulo home, ficando conforme o código abaixo:

/* apps/frontend/modules/home/actions.class.php */
<?php

/***** actions.class **********

controlador do módulo home

******************************/

class homeActions extends sfActions
{

	public function executeIndex(sfWebRequest $request){


        }

}

Também é necessário limpar completamente o arquivo da view – diretório “templates” – responsável por apresentar as ações dessa controladora. Ou seja, delete todo o código do arquivo “apps/frontend/modules/home/templates/indexSuccess.php”.

Feito isso, podemos testar e visualizar os componentes definidos na nossa home. Cabe salientar que ainda falta estilizar o menu. Esse vai se apresentar como bloco de uma lista unordenada “<ul>”.

Acessamos “http://imasters.tut.br” e vejamos conforme a imagem abaixo:

Considerações finais

A visão é responsável por processar a saída relacionada com uma determinada ação. No symfony, a visão consiste em várias partes, cada parte é projetada para ser facilmente modificada pela pessoa que trabalha habitualmente com ela.

Web designers geralmente trabalham sobre os modelos (a apresentação dos dados de ação em curso) e no layout (que contém o código comum a todas as páginas). Eles são escritos em HTML com pequenos pedaços incorporados do PHP, que são principalmente as chamadas dos helpers.

Para a reutilização, os desenvolvedores geralmente fragmentam pacotes do modelo de código em parciais ou componentes. Eles usam faixas para afetar mais de uma zona do layout. Web designers podem trabalhar nesses fragmentos do modelo também. Desenvolvedores focam no arquivo de configuração YAML – view (definindo as propriedades da resposta e outros elementos de interface) e sobre o objeto resposta. Quando trabalhamos com variáveis nos modelos, os riscos de “cross-site scripting” não devem ser ignorados. Uma boa compreensão das técnicas para evitar tais problemas é o tratamento dos dados do usuário de forma segura.

Neste artigo, você aprendeu a configurar os headers do projeto, teve um entendimento sobre a inclusão de parciais e componentes no projeto. Tivemos uma boa prática de manipulação da  visão da aplicação e da visão do módulo.

Nos próximos artigos, iremos manipular a base de dados. Vamos ver o quão fácil e rápido é trabalhar com modelagem de dados no symfony usando a ORM Doctrine.

Dúvidas e sugestões serão sempre bem-vindas!