Hoje vamos falar sobre algo que é bem simples de fazer, mas ao mesmo tempo é bastante útil. De vez em quando precisamos fazer alguma manutenção em nosso site/aplicação após a mesma estar online, ou seja, em produção. Como fazer para que, durante o período de manutenção, quem visitar o site veja uma tela de manutenção, mas você (que está logado como admin) possa acessar tanto o site quanto o painel de administração?

Simples. Criaremos um plugin que vai fazer esta verificação. Como o objetivo do artigo não é ensinar a criar plugin, vamos direto ao código. Crie um arquivo de nome Manutencao.php e coloque ele na pasta /library/App/Plugin/, ficando /library/App/Plugin/Manutencao.php, com o conteúdo abaixo.

<?php
/**
 * Plugin que deixa o site/aplicação em manutenção.
 *
 * @author Matias Rezende - http://matiasrezende.com.br
 * @version 1.0
 */
class App_Plugin_Manutencao extends Zend_Controller_Plugin_Abstract {
	/**
	 * @see Zend_Controller_Plugin_Abstract::preDispatch()
	 */
	public function preDispatch ( Zend_Controller_Request_Abstract $request ) {
		// assumindo que default é o nome do módulo visível do site
		if ( ! Zend_Auth::getInstance ()->hasIdentity () && $request->getModuleName () == 'default' ) {
			$request->setControllerName ( 'manutencao' )
				->setActionName ( 'index' );
		}
	}
}

O que ele faz. Se ao acessar não tiver usuário logado e o módulo acessado for o módulo default, ele manda para o controller de manutenção, action index. Caso tenha usuário logado ou caso o módulo a ser acessado não seja o default (para permitir que se faça login, por exemplo), ele não faz nada.

Obs.: Apenas estamos verificando se o usuário está logado, mas isto pode ser (é) um problema. O ideal é que se faça a verificação de permissão (Acl), mas isto fica para um outro artigo.

Adicionando o plugin

Para que o plugin seja chamado, precisamos dizer para o ZF fazer isto. Podemos fazer via Boostrap.php ou via application.ini. Para o exemplo aqui, vamos fazer pelo application.ini, adicionando a linha abaixo:

resources.frontController.plugins.Manutencao = "App_Plugin_Manutencao"

Uhn… Mas peraí. Desta forma, ele vai fazer esta verificação SEMPRE. Mas não é isto que queremos. Só queremos que ele faça isto QUANDO estivermos em manutenção. Como resolver?

Usando ambientes no application.ini

Quem já leu o artigo Trabalhando com ambientes no application.ini do Zend Framework já sacou como fazer para funcionar. Em resumo, vimos que podemos criar ambientes para a aplicação. O que vamos fazer? Incluir este plugin dentro do ambiente manutencao, que vamos criar. Nosso application.ini ficará assim:

[production]
// todas as nossas configurações normais
[manutencao : production]
resources.frontController.plugins.Manutencao = "App_Plugin_Manutencao"

Agora o plugin só será adicionado quando estivermos no ambiente manutencao. Para trocar o ambiente da aplicação, temos algumas formas (como vimos no artigo). A que eu mais gosto é via arquivo .htaccess.

SetEnv APPLICATION_ENV manutencao
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

E pronto!! Com isto, temos uma forma simples de colocar o sistema em manutenção para todos, menos para o usuário logado.

Abraços e até a próxima!!

Muito bem, hoje vamos começar a falar sobre o application.ini e algumas configurações que podemos fazer nele. O artigo de hoje é rápido e simples, pois é quase uma introdução.

Ao criar um projeto pelo Zend_Tool, temos como padrão o seguinte arquivo application.ini:

[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH "/../library"
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"
appnamespace = "Application"
resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
resources.frontController.params.displayExceptions = 0

[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
resources.frontController.params.displayExceptions = 1

O que seriam os ambientes? Seriam as seções de configurações. No caso do exemplo acima, temos os ambientes production, staging, testing e development. Como você vai usar cada um deles vai depender bastante de você, mas eu utilizo o ambiente production para as configurações do servidor de produção (maior parte das configurações). O ambiente testing eu utilizo assim que coloco um projeto no ar, mas enquanto estou fazendo alguns ajustes para o ambiente de produção e preciso ver possíveis erros sendo exibidos na tela (e não gravados em log). O ambiente development é o ambiente que eu utilizo enquanto estou desenvolvendo, onde preciso que todos os erros sejam exibidos.

Porque isto é tão interessante? Porque podemos ter configurações únicas para cada ambiente. Por exemplo, a exibição de erros, como citado acima. Outro exemplo clássico de utilização é para dados de acesso ao banco de dados, já que nome do banco, usuário e senha podem ser (normalmente são) diferentes do ambiente de desenvolvimento e em produção.

Definindo o ambiente atual

Podemos definir qual o ambiente atual basicamente de 3 formas:

• index.php (não indico)
• Virtual Host (normalmente em desenvolvimento)
• .htaccess (o que eu mais gosto)

index.php

No index.php padrão, criado pelo Zend_Tool, temos as seguintes linhas:

defined('APPLICATION_ENV')
    || define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));

O que ele verifica? Se a constante APPLICATION_ENV está definida. Se ela não está definida, será definida. Aí verifica se está setada uma variável de ambiente (função getenv) com o nome APPLICATION_ENV. Se existir, pega o seu valor e atribui à constante. Se não existir, define como production.

Então, para definir o ambiente no index.php podemos fazer o seguinte:

<?php
define('APPLICATION_ENV', 'development');

// Define application environment
defined('APPLICATION_ENV')
    || define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));

Pronto. Temos o ambiente definido como development para a aplicação. Eu não gosto muito de fazer assim, porque acho que o arquivo index.php não deve ser editado para isto. Além disto, as linhas abaixo do define que foi adicionado ficam sem sentido, mas algum outro programador pode pegar o projeto para dar manutenção e não vai procurar ali para definir o ambiente (normalmente).

Virtual Host

No exemplo de criação de Virtual Host do Zend Framework ele mostra como fazer a mesma coisa utilizando Virtual Host.

<VirtualHost *:80>
        ServerName quickstart.local
        DocumentRoot /path/to/quickstart/public

        SetEnv APPLICATION_ENV "development"

        <Directory /path/to/quickstart/public>
                DirectoryIndex index.php
                AllowOverride All
                Order allow,deny
                Allow from all
        </Directory>
</VirtualHost>

Vejam que definimos uma variável de ambiente SetEnv APPLICATION_ENV “development” (lembra que o index.php busca por uma variável de ambiente com este nome?) definida com o valor de development. Não gosto desta forma porque, normalmente, não temos acesso à criação de Virtual Host no servidor de produção, mas é uma ótima forma de fazer isto no ambiente de desenvolvimento.

Via .htaccess

Utilizamos a mesma ideia do Virtual Host, mas adicionando a linha ao arquivo .htaccess. Assim:

SetEnv APPLICATION_ENV "development"
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

Vejam que a forma e o efeito é exatamente o mesmo que utilizando o Virtual Host, com uma grande diferença: flexibilidade. No ambiente de produção podemos criar arquivo .htaccess e definir, de forma simples e rápida, uma mudança no ambiente, sem depender de configuração do servidor. Outro motivo é que normalmente você envia o arquivo .htaccess somente uma vez para o servidor e praticamente não modifica ele (isto será útil mais abaixo).

Herança dos ambientes

[development : production]

Olhando o trecho acima de código, percebemos que existe algo que não foi falado ainda. O que é este : production? Herança!!! Ou seja, o ambiente development recebe todas as configurações do ambiente production, podendo sobrescrever qualquer uma delas. Por isto que temos a definição da exibição de erros e exceções na seção production (seção pai) e na seção development (seção filha).

Criando novos ambientes

Por padrão o Zend traz os ambientes citados acima, mas nada impede que você crie, modifique ou remova um ou mais ambientes que você não estiver utilizando. Imagine que, por algum motivo bizarro (já passei por isto) você precisa testar uma aplicação em 3 servidores diferentes (!!!). Como fazer, se os dados de acesso ao banco de dados são diferentes em cada um dos servidores? Simples! Defina 2 seções extras e coloque ali dentro os dados de acesso ao banco de dados de cada servidor. Modifique o arquivo .htaccess de cada um dos servidores (viu como falei que seria útil?) para trabalhar no ambiente escolhido e pronto.

Outro caso que você pode usar é para colocar o site/aplicação em manutenção, mas isto é assunto para outro artigo – link aqui.

Por hoje era só isto, mas fique ligado que teremos mais artigos sobre o application.ini. Gostou? Comente e compartilhe!!!

Abraços

A ideia deste artigo surgiu de uma dúvida que apareceu no fórum iMasters, sobre como trabalhar com layouts diferentes e com os módulos do Zend Framework.

Começando, vamos imaginar uma estrutura simples com 2 módulos (default e admin). Vamos criar a estrutura com o Zend Tool.

Criando o projeto:

zf create project example

Agora, criando os módulos:

cd example
zf create module default
zf create module admin
zf create controller Index -m default
zf create controller Index -m admin

Com isto, criamos os módulos default e admin, criando também o controller Index em cada um deles.

Certo, mas e o layout? Agora, vamos fazer os ajustes no application.ini para conseguirmos trabalhar com layouts por módulos. Vamos lá.

application.ini

[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
phpSettings.date.timezone = "America/Sao_Paulo"
resources.frontController.params.displayExceptions = 0

resources.locale.default = "pt_BR"

; layouts
resources.layout.layout = "layout"

; include path
includePaths.library = APPLICATION_PATH "/../library"

appnamespace = "Application"

; bootstrap
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"

; front controller
resources.frontController.moduleDirectory   = APPLICATION_PATH "/modules"
resources.modules[]= ""
resources.frontController.defaultModule = "default"
resources.frontController.prefixDefaultModule = "true"
resources.frontController.actionHelperPaths.App_Action_Helper = "App/Helpers/Action"

; view
resources.view.doctype = "HTML5"
resources.view.encoding = "UTF-8"
resources.view.charset = "UTF-8"
resources.view.helperPath.App_View_Helper = "App/Helpers/View"
[staging : production]

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
resources.frontController.params.displayExceptions = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
resources.frontController.params.displayExceptions = 1

A “mágica”

Agora, vamos à mágica… (ok, não tem mágica, mas é bem legal ). Criamos um arquivo chamado layout.phtml para cada módulo e deixamos ele dentro da pasta raiz da view do respectivo módulo. Por exemplo, para o módulo default, o arquivo fica em /application/modules/default/views/scripts/layout.phtml e tem, por exemplo, o seguinte conteúdo:

<?php echo $this->doctype()?>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
<?php
$this->headTitle()->append('Layout e módulos - Zend Framework');
$this->headTitle()->setSeparator(' - ');
echo $this->headTitle(),PHP_EOL;
$this->headMeta()->headMeta ('Matias Rezende', 'author');

$this->headLink()->setSeparator(PHP_EOL)
		 ->prependStylesheet($this->baseUrl('estilos/estilo.css'));

$this->headScript ()->setSeparator(PHP_EOL)
		    ->prependFile ($this->baseUrl('scripts/jquery/jquery-1.6.1.min.js') );

echo $this->headMeta(),PHP_EOL;
echo $this->headLink(),PHP_EOL;
echo $this->headScript();
?>
</head>
<body>
	<div id="wrapper">
		<div id="content">
			<h1>Modulo default</h1>
			<?php echo $this->layout()->content;?>
		</div><!-- /content -->
	</div><!-- /wrapper -->
</body>
</html>

Para o módulo admin (/application/modules/admin/views/scripts/layout.phtml), colocamos o conteúdo abaixo (mesma estrutura com a mudança apenas no texto que aparece no H1 – apenas para diferenciar):

<?php echo $this->doctype()?>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
<?php
$this->headTitle()->append('Layout e módulos - Zend Framework');
$this->headTitle()->setSeparator(' - ');
echo $this->headTitle(),PHP_EOL;
$this->headMeta()->headMeta ('Matias Rezende', 'author');

$this->headLink()->setSeparator(PHP_EOL)
		 ->prependStylesheet($this->baseUrl('estilos/estilo.css'));

$this->headScript ()->setSeparator(PHP_EOL)
		    ->prependFile ($this->baseUrl('scripts/jquery/jquery-1.6.1.min.js') );

echo $this->headMeta(),PHP_EOL;
echo $this->headLink(),PHP_EOL;
echo $this->headScript();
?>
</head>
<body>
	<div id="wrapper">
		<div id="content">
			<h1>Modulo admin</h1>
			<?php echo $this->layout()->content;?>
		</div><!-- /content -->
	</div><!-- /wrapper -->
</body>
</html>

Pronto!!!! Agora, vamos explicar o que fizemos no application.ini:

Explicando passo a passo

; layouts
resources.layout.layout = "layout"

Aqui dissemos que o nome do arquivo de layout vai ser layout.phtml. Pode ser qualquer nome que você quiser (base, mainView…), desde que modifique o nome do arquivo também.

; front controller
resources.frontController.moduleDirectory   = APPLICATION_PATH "/modules"
resources.modules[]= ""
resources.frontController.defaultModule = "default"
resources.frontController.prefixDefaultModule = "true"

Configuração básica para trabalhar com módulos. Primeiro definimos a pasta dos módulos. Depois dissemos que existe mais de um módulo. Posteriormente definimos que o primeiro módulo é o default. Na última linha, definimos que o nome dos controllers terá o prefixo (Default_IndexController). Prefiro deixar assim porque ao criar um controller pelo Zend Tool ele cria com o prefixo. Para não ter que editar arquivo por arquivo, prefiro deixar assim mesmo.

Espero que tenham gostado. Se gostou, comente e compartilhe!!!

Mais um post sobre o Zend Framework, mostrando um recurso muito utilizado, que é a paginação. Para isto, utilizaremos o Zend Paginator.

Como quase tudo no Zend Framework, é possível fazer esta paginação de diversas formas. Vou mostrar a que eu tenho utilizado, que acho a mais simples.

Model (uma ideia bem simples, só para demonstrar):

<?php

class Model_NoticiaMapper {
	private $_dbTable;

	 /**
	 * @return Model_DbTable_Noticia
	 */
	public function getDbTable() {
		if (!$this->_dbTable instanceof Model_DbTable_Noticia) {
			$this->_dbTable = new Model_DbTable_Noticia();
		}
		return $this->_dbTable;
	}

	/**
	 * @return Zend_Db_Table_Select
	 */
	public function findAllNews() {
		return $this->getDbTable()->select();
	}
}

O que é importante perceber? O método findAllNews() retorna um Zend_Db_Table_Select e não um resultado depois de feito o fetch(all/row). Isto é fundamental, pois este objeto select será utilizado pelo Zend_Paginator.

No seu Controller:

$model = new Model_NoticiaMapper ();
$noticias = Zend_Paginator::factory ( $model->findAllNews () );
$noticias->setCurrentPageNumber ( $this->_getParam( 'pagina', 1 ) )
         ->setItemCountPerPage ( 10 );
$this->view->noticias = $noticias;

Veja que o factory recebe o objeto Zend_Db_Table_Select e retorna o objeto responsável pela paginação. Nós adicionamos algumas configurações básicas ao objeto:

• setCurrentPageNumber( int $pageNumber ) define qual é a página atual em que os resultados estão sendo exibidos. No nosso caso, recebemos o parâmetro pagina, que será passado pela URL que será montada mais abaixo.
• setItemCountPerPage( int $countPerPage ) define a quantidade de resultados por página. No caso colocamos 10, mas pode ser o valor que você escolher (inclusive um valor definido de forma dinâmica).

Como ele implementa Fluent Interface, podemos usar os métodos encadeados como demonstrados.

Passamos o objeto da paginação para a view em $this->view->noticias, que então estará disponível na view em $this->noticias;

Exibindo os resultados na View:

<?php foreach ($this->noticias as $noticia): ?>
	<h2><?php echo $noticia->titulo?></h2>
	<p><?php echo $noticia->noticia?></p>
<?php endforeach; ?>
<?php echo $this->paginationControl($this->noticias,null,'paginator.phtml'); ?>

A única coisa que precisa de explicação é a utilização do viewHelper paginationControl():

paginationControl(Zend_Paginator $paginator = null, $scrollingStyle = null, $partial = null, $params = null), onde:

• $paginator é o objeto da paginação ($this->noticias no nosso caso)
• $scroolingStyle é o tipo de demonstração de página que será utilizado. O Zend Framework tem 4 opções definidas:
  • All => Retorna todas as páginas.
  • Elastic => Uma paginação no estilo Google, onde a quantidade e as páginas exibidas modificam de acordo com a página atual.
  • Jumping => Só aparecem novas páginas quando você chega no final das páginas exibidas, criando uma nova série.
  • Sliding => Formato padrão. A página atual é o centro da série de páginas a serem exibidas. Por exemplo, se estamos na página 10, aparece da página 5 até a página 15.
• $partial o nome do arquivo que vai renderizar o controle da paginação (exemplo abaixo)
• $params parâmetros a serem passados para o viewPartial que vai renderizar o controle da paginação

Arquivo paginator.phtml (que deve ficar dentro de views/scripts/paginator.phtml):

<?php if ($this->pageCount): ?>
	<div id="paginator">
	<?php if (isset($this->previous)): ?>
		<a href="<?php echo $this->url(array('pagina' => $this->previous)); ?>">Anterior </a>
	<?php endif; ?>
	<?php foreach ($this->pagesInRange as $page): ?>
		<?php if ($page != $this->current): ?>
		    <a href="<?php echo $this->url(array('pagina' => $page)); ?>"><?php echo $page; ?></a>
		<?php else: ?>
			<span class="currentPage"><?php echo $page; ?></span>
		<?php endif; ?> |
	<?php endforeach; ?>
	<?php if (isset($this->next)): ?>
		<a href="<?php echo $this->url(array('pagina' => $this->next)); ?>">Próxima </a>
	<?php endif; ?>
	</div>
<?php endif; ?>

Acho que este não precisa explicar muita coisa, né? Como neste caso só quero que seja mostrada a div#paginator SE houver mais de uma página, fazemos a verificação com o if($this->pageCount). Para montar a URL das páginas, usamos o viewHelper url(). Ele, no formato que está, mantém os parâmetros atuais (rota, controller, action, modulo, parâmetros existentes…). Basicamente ele pega a URL atual e adiciona o número da página (parâmetro pagina, que recebemos no controller, lembra?).

E agora… NADA!!! Prontinho… Só isto. Simples, né?

Esta foi uma forma de paginar resultados do banco de dados, mas o Zend Paginator permite a paginação de diversos tipos de dados. Por hoje é só, mas fique ligado que em breve teremos mais artigos sobre o Zend Paginator, mostrando mais deste poderoso recurso.

Tudo certo? Começando hoje uma série de posts sobre o Zend_Route. Vamos começar ensinando uma forma de criar rotas personalizadas. Este formato é o mais indicado quanto você tem poucas rotas e estas rotas são simples. Basta adicionar alguns códigos ao seu arquivo application.ini:

resources.router.routes.produto.route = "produto/:categoria/:sub-categoria/:produto"
resources.router.routes.produto.defaults.module = default
resources.router.routes.produto.defaults.controller = produtos
resources.router.routes.produto.defaults.action = show
resources.router.routes.produto.defaults.categoria =
resources.router.routes.produto.defaults.sub-categoria =
resources.router.routes.produto.defaults.produto =

Explicando passo a passo:

resources.router.routes.produto

Indicando ao application.ini que estamos trabalhando com o recurso router e que ali contém uma das rotas (routes), de nome produto. Para definir qualquer informação desta rota, devemos iniciar as linhas com este código.

resources.router.routes.produto.route = "produto/:categoria/:sub-categoria/:produto"

Ao fazermos isto, definimos que todas as URLs que começarem com produto entrarão nesta rota. O primeiro parâmetro após a palavra produto será o parâmetro categoria. O segundo será sub-categoria e o terceiro será o produto.

Definindo os valores padrão (defaults)

Para definirmos para onde será direcionada esta requisição, vamos definir nos valores default.

resources.router.routes.produto.defaults.module = default
resources.router.routes.produto.defaults.controller = produtos
resources.router.routes.produto.defaults.action = show

Aí definimos que qualquer requisição (página) será direcionada para o módulo default, para o controller produtos e para a action show.

Para evitarmos problemas, definimos também os valores default para os parâmetros (categoria, sub-categoria e produto).

Então, transformamos uma URL assim:

http://site.com.br/produtos/show/categoria/informatica/sub-categoria/notebooks/produto/notebook-dell-inspirion-15-r

por uma URL assim:

http://site.com.br/produto/informatica/notebooks/notebook-dell-inspirion-15-r

Melhorou, né?

Vejam que esta é UMA das formas de fazer isto (existem diversas outras).

Gostou? Comentem!!!

Mais um artigo da série sobre Zend Navigation. Já viu os outros? Aqui tem o link para a série completa. Vale a pena começar por lá.

Muita vezes temos em um site um menu superior e um menu interno, que varia de acordo com a página. Com o Zend Navigation é fácil de resolver este problema. Para isto, utilizaremos os métodos setOnlyActiveBranch(), setMinDepth(), setMaxDepth(), setRenderParents() e setUlClass() do objeto menu(). Explicando cada um deles rapidamente (maiores informações -> link):

setOnlyActiveBranch(bool false)

Define que somente o galho ativo deve ser exibido. Por exemplo, caso exista mais de um menu com sub-menus, só aparecerá o sub menu em que o menu principal esteja ativo. Ou seja, caso estejamos na página A Empresa, somente será exibido o ramo relativo à página A Empresa.

setMinDepth(int)

Define a profundidade mínima do menu a ser exibida.

setMaxDepth(int)

O oposto do método anterior. Define a profundidade máxima do menu a ser exibida.

setRenderParents(bool true)

Define se junto a um sub menu deve ser renderizado também o pai destes menus. Por exemplo, no caso da página A Empresa, define se no sub-menu o link para página A Empresa aparecerá também.

setUlClass(string)

Define o menu com esta classe. Util para definir formatação diferente para menu e sub-menu.

Então, para montar o menu superior sem sub-menu, colocando o sub-menu na lateral sem o menu principal, modificaremos o arquivo base de layout que temos usado na série de artigos para o seguinte:

arquivo default.ini (arquivo de navegação – mesmo do último artigo)

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"
home.title = "Página Inicial"
home.route = "default"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
empresa.title = "Informações sobre a empresa"
empresa.route = "default"
        ;; História
        empresa.pages.historia.label = "História"
        empresa.pages.historia.controller = "empresa"
        empresa.pages.historia.action = "historia"
        empresa.pages.historia.title = "História da empresa"
        empresa.pages.historia.route = "default"
        ;; Missão
        empresa.pages.missao.label = "Missão"
        empresa.pages.missao.controller = "empresa"
        empresa.pages.missao.action = "missao"
        empresa.pages.missao.title = "Missão da empresa"
        empresa.pages.missao.route = "default"
        ;; Visão
        empresa.pages.visao.label = "Visão"
        empresa.pages.visao.controller = "empresa"
        empresa.pages.visao.action = "visao"
        empresa.pages.visao.title = "Visão da empresa"
        empresa.pages.visao.route = "default"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
noticias.title = "Notícias sobre o mercado"
noticias.route = "default"
        ;; Categoria Esportes
        noticias.pages.esportes.label = "Esportes"
        noticias.pages.esportes.controller = "noticias"
        noticias.pages.esportes.action = "index"
        noticias.pages.esportes.title = "Notícias sobre Esportes"
        noticias.pages.esportes.route = "categoria"
        noticias.pages.esportes.params.categoria = "esportes"
        ;; Categoria Entretenimento
        noticias.pages.entretenimento.label = "Entretenimento"
        noticias.pages.entretenimento.controller = "noticias"
        noticias.pages.entretenimento.action = "index"
        noticias.pages.entretenimento.title = "Notícias sobre Entretenimento"
        noticias.pages.entretenimento.route = "categoria"
        noticias.pages.entretenimento.params.categoria = "entretenimento"
        ;; Categoria Tecnologia
        noticias.pages.tecnologia.label = "Tecnologia"
        noticias.pages.tecnologia.controller = "noticias"
        noticias.pages.tecnologia.action = "index"
        noticias.pages.tecnologia.title = "Notícias sobre Tecnologia"
        noticias.pages.tecnologia.route = "categoria"
        noticias.pages.tecnologia.params.categoria = "tecnologia"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"
contato.title = "Entre em contato conosco"
contato.route = "default

layout.phtml

<div id="wrapper">
        <div id="top">
                <?php echo $this->navigation()->menu()->setMaxDepth(0);?><!-- /menu -->
        </div><!-- /top -->
        <div id="content">
                <?php echo $this->navigation()
                                ->menu()
                                ->setOnlyActiveBranch(true)
                                ->setMinDepth(1)
                                ->setMaxDepth(1)
                                ->setRenderParents(false)?>
                                ->setUlClass('sub-menu')?><!-- /sub-menu -->
                <?php echo $this->layout()->content;?>
        </div><!-- /content -->
        <div id="footer">
                <p>Blog do Matias &copy; <?php echo date('Y')?> • http://matiasrezende.com.br</p>
        </div><!-- /footer -->
</div><!-- /wrapper -->

Explicando:

• No menu principal, definimos setMaxDepth(0) para evitar que fosse renderizado o sub-menu.
• No sub-menu, definimos setOnlyActiveBranch(true) para que fosse exibido somente o sub-menu relativo ao menu selecionado.
• Ainda no sub-menu, definimos setMinDepth(1) para evitar que fosse renderizado o menu principal no sub-menu e definimos setMaxDepth(1) para sobrescrever o que foi definido no objeto anterior (menu), permitindo que apareça só e somente 1 nível de sub-menu.
• Como não queremos que apareça o menu pai renderizado no sub-menu, definimos setRenderParents(false).
• Classe sub-menu somente para demonstrar a funcionalidade, apesar de não ser necessário.

Vejam que mesmo com o menu e sub-menu, o Zend Navigation continua definindo o menu e o sub-menu que está ativo com a classe active, como vimos no primeiro artigo.

Obs.:

Existe o método renderSubMenu(), que funciona quase como queremos. Ele renderiza, como o manual diz, o sub-menu mais profundo do container ativo. O problema aparece quando não existe sub-menu no menu ativo (no nosso exemplo, na página Início e Contato, que não tem sub-páginas). Nestes casos, o sub-menu renderizado passa a ser o próprio menu, o que não é o comportamento desejado para este caso, mas se em uma situação você SEMPRE tiver sub-menu, você pode trocar setMinDepth(), setMaxDepth(), setOnlyActiveBranch() e setRenderParents() pelo renderSubMenu().

Está começando a ficar bom utilizar o Zend Navigation??? Vai ficar ainda melhor, pois ainda não vimos Breadcrumbs, Sitemap e integração com Zend_Acl.

Fiquem ligados e acompanhando o restante da série sobre um ótimo recurso do Zend Framework, que facilita bastante nossa vida na hora de criar aplicações.

Comentem!!!

Já viu os outros posts da série? É melhor começar por eles…

Hoje vamos ver como adicionar rotas a uma página que está em um menu. Não sabe criar rotas ou não sabe o que é uma rota? Dá uma lida aqui antes de prosseguir. Para o nosso caso, vamos incluir utilizando o método mais simples, que é pelo application.ini.

;; Rota - notícias
resources.router.routes.categoria.route = "/categoria/:categoria"
resources.router.routes.categoria.defaults.controller = "noticias"
resources.router.routes.categoria.defaults.action = "index"
resources.router.routes.categoria.defaults.categoria = null

Com isto, precisamos informar ao Zend Navigation em qual rota está cada página. Para isto, utilizamos o código abaixo em nosso navigation/default.ini:

noticias.pages.esportes.route = "categoria"

Fácil, né? Pois é… Só que aí aparece um problema nas outras páginas. Quando você entra em uma categoria de notícias, todas as páginas do menu ficam indicando para a própria página. Estranho, né? Isto acontece porque, quando não definimos uma rota específica para uma página, o View Helper URL pega a rota da página que está sendo exibida neste momento para criar a URL. Quando você não tem nenhuma rota, isto não é um problema. A partir do momento que você tem mais de uma rota (nosso caso) é um problema chato.

Como resolver??

Simples!!!! Definindo a rota das outras páginas como default. Olha como é fácil.

noticias.route = "default"

Fazendo isto em todas as páginas resolvemos o problema. Depois disto, o navigation/default.ini ficou assim:

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"
home.title = "Página Inicial"
home.route = "default"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
empresa.title = "Informações sobre a empresa"
empresa.route = "default"
        ;; História
        empresa.pages.historia.label = "História"
        empresa.pages.historia.controller = "empresa"
        empresa.pages.historia.action = "historia"
        empresa.pages.historia.title = "História da empresa"
        empresa.pages.historia.route = "default"
        ;; Missão
        empresa.pages.missao.label = "Missão"
        empresa.pages.missao.controller = "empresa"
        empresa.pages.missao.action = "missao"
        empresa.pages.missao.title = "Missão da empresa"
        empresa.pages.missao.route = "default"
        ;; Visão
        empresa.pages.visao.label = "Visão"
        empresa.pages.visao.controller = "empresa"
        empresa.pages.visao.action = "visao"
        empresa.pages.visao.title = "Visão da empresa"
        empresa.pages.visao.route = "default"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
noticias.title = "Notícias sobre o mercado"
noticias.route = "default"
        ;; Categoria Esportes
        noticias.pages.esportes.label = "Esportes"
        noticias.pages.esportes.controller = "noticias"
        noticias.pages.esportes.action = "index"
        noticias.pages.esportes.title = "Notícias sobre Esportes"
        noticias.pages.esportes.route = "categoria"
        noticias.pages.esportes.params.categoria = "esportes"
        ;; Categoria Entretenimento
        noticias.pages.entretenimento.label = "Entretenimento"
        noticias.pages.entretenimento.controller = "noticias"
        noticias.pages.entretenimento.action = "index"
        noticias.pages.entretenimento.title = "Notícias sobre Entretenimento"
        noticias.pages.entretenimento.route = "categoria"
        noticias.pages.entretenimento.params.categoria = "entretenimento"
        ;; Categoria Tecnologia
        noticias.pages.tecnologia.label = "Tecnologia"
        noticias.pages.tecnologia.controller = "noticias"
        noticias.pages.tecnologia.action = "index"
        noticias.pages.tecnologia.title = "Notícias sobre Tecnologia"
        noticias.pages.tecnologia.route = "categoria"
        noticias.pages.tecnologia.params.categoria = "tecnologia"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"
contato.title = "Entre em contato conosco"
contato.route = "default"

Isto gerou um menu assim

<ul class="navigation">
    <li class="active">
        <a title="Página Inicial" class="home" href="/navigation/public/">Início</a>
    </li>
    <li>
        <a title="Informações sobre a empresa" href="/navigation/public/empresa">A empresa</a>
        <ul>
            <li>
                <a title="História da empresa" href="/navigation/public/empresa/historia">História</a>
            </li>
            <li>
                <a title="Missão da empresa" href="/navigation/public/empresa/missao">Missão</a>
            </li>
            <li>
                <a title="Visão da empresa" href="/navigation/public/empresa/visao">Visão</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
        <ul>
            <li>
                <a title="Notícias sobre Esportes" href="/navigation/public/categoria/esportes">Esportes</a>
            </li>
            <li>
                <a title="Notícias sobre Entretenimento" href="/navigation/public/categoria/entretenimento">Entretenimento</a>
            </li>
            <li>
                <a title="Notícias sobre Tecnologia" href="/navigation/public/categoria/tecnologia">Tecnologia</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="Entre em contato conosco" href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Legal né? Já está gostando mais de usar o Zend Navigation? Ainda tem MUITA coisa para aprender nele. Fiquem ligados nas novidades

Tudo certo? Hoje temos o terceiro artigo/tutorial da série sobre o Zend Navigation. Já viu o primeiro e o segundo da série? É bom começar por lá antes de iniciarmos aqui.

Muitas vezes temos um site/sistema que precisa montar um menu e um sub-menu, que depende da página (menu) selecionado. Com o Zend Navigation isto é muito simples de fazer. Vejamos qual a estrutura das páginas que teremos:

• Início
• A Empresa
  • História
  • Missão
  • Visão
• Notícias
  • Esportes
  • Entretenimento
  • Tecnologia
• Contato

Então, vamos adicionar as sub-paginas ao menu já existente. Para isto, cada objeto de página deve receber as sub-páginas, através do atributo page. Vejamos o código como ficou.

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"
home.title = "Página Inicial"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
empresa.title = "Informações sobre a empresa"
        ;; História
        empresa.pages.historia.label = "História"
        empresa.pages.historia.controller = "empresa"
        empresa.pages.historia.action = "historia"
        empresa.pages.historia.title = "História da empresa"
        ;; Missão
        empresa.pages.missao.label = "Missão"
        empresa.pages.missao.controller = "empresa"
        empresa.pages.missao.action = "missao"
        empresa.pages.missao.title = "Missão da empresa"
        ;; Visão
        empresa.pages.visao.label = "Visão"
        empresa.pages.visao.controller = "empresa"
        empresa.pages.visao.action = "visao"
        empresa.pages.visao.title = "Visão da empresa"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
noticias.title = "Notícias sobre o mercado"
        ;; Categoria Esportes
        noticias.pages.esportes.label = "Esportes"
        noticias.pages.esportes.controller = "noticias"
        noticias.pages.esportes.action = "esportes"
        noticias.pages.esportes.title = "Notícias sobre Esportes"
        ;; Categoria Entretenimento
        noticias.pages.entretenimento.label = "Entretenimento"
        noticias.pages.entretenimento.controller = "noticias"
        noticias.pages.entretenimento.action = "entretenimento"
        noticias.pages.entretenimento.title = "Notícias sobre Entretenimento"
        ;; Categoria Tecnologia
        noticias.pages.tecnologia.label = "Tecnologia"
        noticias.pages.tecnologia.controller = "noticias"
        noticias.pages.tecnologia.action = "tecnologia"
        noticias.pages.tecnologia.title = "Notícias sobre Tecnologia"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"
contato.title = "Entre em contato conosco"

Desta forma, teremos o seguinte HTML gerado.

<ul class="navigation">
    <li class="active">
        <a title="Página Inicial" class="home" href="/navigation/public/">Início</a>
    </li>
    <li>
        <a title="Informações sobre a empresa" href="/navigation/public/empresa">A empresa</a>
        <ul>
            <li>
                <a title="História da empresa" href="/navigation/public/empresa/historia">História</a>
            </li>
            <li>
                <a title="Missão da empresa" href="/navigation/public/empresa/missao">Missão</a>
            </li>
            <li>
                <a title="Visão da empresa" href="/navigation/public/empresa/visao">Visão</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
        <ul>
            <li>
                <a title="Notícias sobre Esportes" href="/navigation/public/noticias/esportes">Esportes</a>
            </li>
            <li>
                <a title="Notícias sobre Entretenimento" href="/navigation/public/noticias/entretenimento">Entretenimento</a>
            </li>
            <li>
                <a title="Notícias sobre Tecnologia" href="/navigation/public/noticias/tecnologia">Tecnologia</a>
            </li>
        </ul>
    </li>
    <li>
        <a title="Entre em contato conosco" href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Certo, tudo funcionou. Mas a questão das categorias tá estranho, não? Imaginem ter que criar uma action para cada categoria de notícias, ou então capturar tudo em um método __call()? Feio, né? Vamos mudar este menu, para que o nome da categoria seja passada por parâmetro para a action index. Ficaria desta forma:

        ;; Categoria Esportes
        noticias.pages.esportes.label = "Esportes"
        noticias.pages.esportes.controller = "noticias"
        noticias.pages.esportes.action = "index"
        noticias.pages.esportes.title = "Notícias sobre Esportes"
        noticias.pages.esportes.params.categoria = "esportes"
        ;; Categoria Entretenimento
        noticias.pages.entretenimento.label = "Entretenimento"
        noticias.pages.entretenimento.controller = "noticias"
        noticias.pages.entretenimento.action = "index"
        noticias.pages.entretenimento.title = "Notícias sobre Entretenimento"
        noticias.pages.entretenimento.params.categoria = "entretenimento"
        ;; Categoria Tecnologia
        noticias.pages.tecnologia.label = "Tecnologia"
        noticias.pages.tecnologia.controller = "noticias"
        noticias.pages.tecnologia.action = "index"
        noticias.pages.tecnologia.title = "Notícias sobre Tecnologia"
        noticias.pages.tecnologia.params.categoria = "tecnologia"

Teríamos com este código um sub-menu assim:

<li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
        <ul>
            <li>
                <a title="Notícias sobre Esportes" href="/navigation/public/noticias/index/categoria/esportes">Esportes</a>
            </li>
            <li>
                <a title="Notícias sobre Entretenimento" href="/navigation/public/noticias/index/categoria/entretenimento">Entretenimento</a>
            </li>
            <li>
                <a title="Notícias sobre Tecnologia" href="/navigation/public/noticias/index/categoria/tecnologia">Tecnologia</a>
            </li>
        </ul>
    </li>

Legal?? Mais ou menos, né? A URL ficou bem estranha… Vamos adicionar uma rota (Zend Route) para que a URL fique mais amigável. Mas isto é coisa para o próximo artigo.

Comentem!!!

Hoje vamos para o segundo artigo da série sobre o Zend Navigation. Vamos aprender a adicionar atributos às páginas. Antes de ler este artigo, sugiro que leia o primeiro da série, porque usaremos como base os códigos postados lá.

Então, para este artigo, vamos adicionar alguns atributos HTML ao menu, como class e title.

Vamos relembrar como estava nosso navigation.ini?

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"

Agora, para adicionarmos uma class a um item do menu (tag a), apenas adicionamos o atributo class à página que queremos. Vamos adicionar a classe home para a página home.

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"

Simples assim. Teremos assim um html do menu como abaixo:

<ul class="navigation">
    <li class="active">
        <a class="home" href="/navigation/public/">Início</a>
    </li>
    <li>
        <a href="/navigation/public/empresa">A empresa</a>
    </li>
    <li>
        <a href="/navigation/public/noticias">Notícias</a>
    </li>
    <li>
        <a href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Certo, mas pra que serve isto? Imagina que o seu menu tem ícones diferentes para cada página… Pronto!!! Só formatar o CSS, como abaixo:

                        div#top ul.navigation li a.home {
                                background: url(../img/icons/house.png) no-repeat 10px center ;
                                padding-left: 35px;
                        }

                        div#top ul.navigation li a:hover, div#top ul.navigation li.active {
                                background-color: gray;
                        }

Usando esta imagem como ícone.

Agora, vamos adicionar um title para cada página. Alguém arrisca como fazemos isto? Se você disse para fazer igual fizemos com a class, ACERTOU!!! Então, vamos ao código.

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
home.class = "home"
home.title = "Página Inicial"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
empresa.title = "Informações sobre a empresa"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
noticias.title = "Notícias sobre o mercado"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"
contato.title = "Entre em contato conosco"

Isto gera um HTML assim:

<ul class="navigation">
    <li>
        <a title="Página Inicial" class="home" href="/navigation/public/">Início</a>
    </li>
    <li class="active">
        <a title="Informações sobre a empresa" href="/navigation/public/empresa">A empresa</a>
    </li>
    <li>
        <a title="Notícias sobre o mercado" href="/navigation/public/noticias">Notícias</a>
    </li>
    <li>
        <a title="Entre em contato conosco" href="/navigation/public/contato">Contato</a>
    </li>
</ul>

Com isto, temos um menu um pouco mais flexível em termos de HTML/CSS, permitindo formatações diferentes para cada item do menu, além de poder adicionar o title, importante para acessibilidade e SEO.

Por hoje é só. No próximo artigo vamos adicionar páginas às páginas já existentes e configurar a exibição do menu, mostrando em locais separados o menu e o sub-menu. Aguardem e comentem!!!

Carlos Eduardo

Postado também no Fórum iMasters

Este é o primeiro post de uma série de posts que farei sobre o Zend Navigation. Começaremos apenas criando um menu simples, para mostrar como iniciar com o Zend Navigation.

Para todos os exemplos, vamos tomar por base um site que terá a seguinte configuração básica:

• Início
• A empresa
• Notícias
• Ver notícia

Criando o helper navigation()

Basicamente, temos 2 formas de criar. Uma delas é diretamente no arquivo application.ini. A outra, usando _initNavigation() no Bootstrap, deixando os dados das páginas em arquivo separado.

Via application.ini

Para fazermos a configuração via application.ini, é bem simples.

;; Página Início
resources.navigation.pages.home.label = "Início"
resources.navigation.pages.home.controller = "index"
resources.navigation.pages.home.action = "index"
;; Página A empresa
resources.navigation.pages.empresa.label = "A empresa"
resources.navigation.pages.empresa.controller = "empresa"
resources.navigation.pages.empresa.action = "index"
;; Página Notícias
resources.navigation.pages.noticias.label = "Notícias"
resources.navigation.pages.noticias.controller = "noticias"
resources.navigation.pages.noticias.action = "index"
;; Página Contato
resources.navigation.pages.contato.label = "Contato"
resources.navigation.pages.contato.controller = "contato"
resources.navigation.pages.contato.action = "index"

Esta é uma solução quando temos poucas páginas, não temos necessidade de modificar nenhuma informação (como Label). Eu particularmente não gosto de fazer assim, pois acho “feio”. O application.ini deve ser usado para configurações e não vejo a definição das páginas existentes no sistema como uma configuração desta forma.

Via boostrap e arquivo .ini

Criando o helper via boostrap, podemos utilizar tanto um array, quanto um arquivo XML quanto um arquivo .ini. Eu prefiro trabalhar com arquivo .ini, pois acho mais “Estilo Zend” de fazer. Então, criaremos um arquivo chamado default.ini dentro da pasta navigation, que vai ficar dentro da pasta application (pode ser qualquer nome que você quiser e em qualquer lugar) e adicionaremos o seguinte ao nosso boostrap:

<?php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap {

	protected function _initNavigation() {
		$this->bootstrap ( 'layout' );
		$layout = $this->getResource ( 'layout' );
		$view = $layout->getView ();
		$config = new Zend_Config_Ini ( APPLICATION_PATH . '/navigation/default.ini' ); // caso tenha trocado o nome ou local do arquivo, modifique esta linha
		$navigation = new Zend_Navigation ( $config );
		$view->navigation ( $navigation );
	}
}

Obs.: Caso tenha trocado o nome ou localização do arquivo, não esqueça de trocar também o caminho/nome no seu Bootstrap

O nosso arquivo default.ini ficará assim:

;; Página Início
home.label = "Início"
home.controller = "index"
home.action = "index"
;; Página A empresa
empresa.label = "A empresa"
empresa.controller = "empresa"
empresa.action = "index"
;; Página Notícias
noticias.label = "Notícias"
noticias.controller = "noticias"
noticias.action = "index"
;; Página Contato
contato.label = "Contato"
contato.controller = "contato"
contato.action = "index"

Pronto. Para iniciarmos, o que temos até o momento já basta. Daqui para frente, vamos assumir que foi feito sempre utilizando a forma Boostrap + arquivo .ini.

Montando o Menu

Agora, vamos utilizar este menu no nosso site. O site terá 3 partes. Topo, conteúdo e rodapé. O html será básico, da seguinte forma.

<?php echo $this->doctype ( 'XHTML1_STRICT' )?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
$this->headTitle ()
	->append ( 'Matias Rezende' )
	->append ( 'Blog' )
	->append ( 'Zend Navigation' )
	->setSeparator ( ' - ' );

$this->headMeta ()
	->appendHttpEquiv ( 'Content-Type', 'text/html;charset=UTF-8' )
	->appendHttpEquiv ( 'Content-Language', 'pt-br' );

$this->headLink ()
	->setSeparator ( PHP_EOL );

$this->headScript ()
	->setSeparator ( PHP_EOL );

echo $this->headTitle (), PHP_EOL;
echo $this->headMeta (), PHP_EOL;
echo $this->headLink (), PHP_EOL;
echo $this->headScript ();
?>
</head>
<body>
	<div id="wrapper">
		<div id="top">
			<?php echo $this->navigation ()->menu ();?><!-- /menu -->
		</div><!-- /top -->
		<div id="content">
			<?php echo $this->layout ()->content;?>
        </div><!-- /content -->
		<div id="footer">
			<p>Blog do Matias © <?php echo date ( 'Y' )?> • http://matiasrezende.com.br</p>
		</div><!-- /footer -->
	</div><!-- /wrapper -->
</body>
</html>

Ao acessarmos a página inicial do site, temos o seguinte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Matias Rezende - Blog - Zend Navigation</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />

</head>
<body>
<div id="wrapper">
        <div id="top">
                <ul class="navigation">
    <li class="active">
        <a href="/navigation/public/">Início</a>
    </li>
    <li>
        <a href="/navigation/public/empresa">A empresa</a>
    </li>
    <li>
        <a href="/navigation/public/noticias">Notícias</a>
    </li>
    <li>
        <a href="/navigation/public/contato">Contato</a>
    </li>
</ul><!-- /menu -->
        </div><!-- /top -->
        <div id="content">
                <h1>Início</h1>
<p>Página inicial</p>   </div><!-- /content -->
        <div id="footer">
                <p>Blog do Matias © 2011 • http://matiasrezende.com.br</p>
        </div><!-- /footer -->
</div><!-- /wrapper -->
</body>
</html>

Com quase nada de CSS, temos um efeito um pouco melhor no menu (é, continua feio, mas o artigo é do Zend_Navigation e não do design… Não me culpem por não saber fazer nada de layout!!! ).

@charset "UTF-8";

* {
        margin: 0;
        padding: 0;
        list-style: none;
}

a {
        text-decoration: none;
}

a:hover {
        text-decoration: underline;
}

body {
        font-family: Arial, sans-serif;
}

div#wrapper {
        width: 1000px;
        margin: 0 auto;
        background: red;
}

div#top {
        height: 200px;
        background: blue;
}

        /**
         * CSS Menu
         */
        div#top ul.navigation {
                height: 40px;
        }

                div#top ul.navigation li {
                        float: left;
                        line-height: 30px;
                        background: green;
                }

                        div#top ul.navigation li a {
                                color: #fff;
                                display: block;
                                padding: 5px 15px;
                        }

                        div#top ul.navigation li a:hover {
                                background: gray;
                        }

div#content {
        background: white;
        min-height: 400px;
}

div#footer {
        text-align: center;
        padding: 10px;
}

Se vocês perceberem, o menu é feito utilizando ul li e recebe a classe navigation. Isto pode ser alterado, mas não entraremos nesta situação ainda.

Até agora, você viu alguma vantagem em utilizar o Zend_Navigation? Eu confesso que ainda não, mas vamos começar a ver a primeira das vantagens agora (e até o final da série de artigos veremos MUITOS outros).

Normalmente, nos menus que fazemos, a página ativa recebe uma formatação especial. Se você é uma pessoa atenta, percebeu que, ao acessar a página inicial (no HTML colado ali em cima), o link para esta opção do menu recebeu a classe active. isto mesmo, o Zend_Navigation já identificou a página que está ativa neste momento!!! Para formatar o menu ativo, vamos modificar um pouco o CSS.

                        div#top ul.navigation li a:hover, div#top ul.navigation li.active {
                                background: gray;
                        }

Pronto!!! O menu ativo já está igual ao menu onde o mouse está!! Assim, você pode formatar (com CSS) da forma que bem entender.

E aí? Já está valendo a pena utilizar o Zend_Navigation? Então espere até ver mais alguns recursos possíveis com ele.

Fiquem atentos aos próximos artigos desta série sobre o Zend_Navigation, mais uma das poderosas ferramentas do Zend Framework.

Abraços!!!