Zend Framework

Aplicação Multi-layout com Zend Framework 2

Por em

Sobre o que é este tutorial

Neste tutorial abordaremos um assunto muito interessante e muito simples de implementar do que se parece: trabalhar com múltiplos layouts com Zend Framework 2.

Muitas pessoas quando começam a trabalhar com zf2, se perguntam: No zf2 só existe um layout para toda aplicação? Como faço para atribuir mais de um layout para os módulos?

Pois é, até conheço algumas pessoas que ficaram frustadas com zf2 porque acharam que ele não permite múltiplos layout, mas isto não é verdade, zf2 permite sim! E, há várias formas de fazer isto, e agora mostrarei uma das maneiras mais simples e práticas possíveis.

Qual é a ideia?

A ideia é muito simples, usar quando necessário um layout específico para um determinando módulo criado na nossa aplicação Zend Framework 2.

Partiremos da ideia que nossa aplicação terá um módulo para o site da nossa aplicação e outro módulo para a área administrativa do site.

O que faremos?

  1. Instalar e configurar o esqueleto do Zend Framework 2 em nossa máquina.
  2. Criar dois módulos Site e Admin
  3. Instalar a biblioteca do EdpModuleLayouts do Evan Coury. Github: http://github.com/EvanDotPro/EdpModuleLayouts.git
  4. Configurar o módulo com nossa aplicação e adicionar algum conteúdo nas páginas para teste.
  5. Testando o que fizemos.

Passos

  1. Instalar o esqueleto do Zend Framework 2 em nossa máquina.

 

Veja como instalar o Zend Framework 2

 

  1. Criar dois módulos Site e Admin

 

Criaremos dois módulos em nossa aplicação

  • Módulo Site para ficar responsável pelo site da aplicação
  • Módulo Admin para ficar responsável pela administração do site da aplicação.

Para criar estes dois módulos usaremos a ferramenta zftool para agilizar na criação dos módulos. Portanto em seu terminal, na raiz de seu projeto faça:

php zf.php create module Site
php zf.php create module Admin

2.1 – Criando arquivos necessários para módulo Site.

Vamos criar um controller IndexController que será acessado por /site e uma view index.phtml para nossa action.

./module/Site/src/Site/Controller/IndexController.php
<?php

namespace Site\Controller;

use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\ViewModel;

class IndexController extends AbstractActionController
{
    public function indexAction()
    {
        return new ViewModel();
    }
}
./module/Site/view/site/index/index.phtml
<div class="jumbotron">
 <h1>Minha página principal</h1>
 <p>Bem vindo ao meu site</p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button">Leia mais</a></p>
 </div>
./module/Site/config/module.config.php
<?php
return array(
    'controllers' => [
        'invokables' => [
            'Site\Controller\Index' => 'Site\Controller\IndexController'
        ]
    ],
    'router' => array(
        'routes' => array(
            'site' => array(
                'type' => 'Literal',
                'options' => array(
                    'route'    => '/site',
                    'defaults' => array(
                        'controller' => 'Site\Controller\Index',
                        'action'     => 'index',
                    ),
                ),
            ),
        )
    ),
    'view_manager' => array(
        'template_path_stack' => array(
            __DIR__ . '/../view',
        ),
    ),
);

Pronto! Nosso módulo Site está configurado e funcionando.

2.2 – Criando arquivos necessários para módulo Admin.

Vamos criar um controller IndexController que será acessado por /admin e uma view index.phtml para nossa action.

./module/Admin/src/Admin/Controller/IndexController.php
<?php

namespace Admin\Controller;

use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\ViewModel;

class IndexController extends AbstractActionController
{
    public function indexAction()
    {
        return new ViewModel();
    }
}
./module/Admin/view/Admin/index/index.phtml
<div class="jumbotron">
 <h1>Minha página principal</h1>
 <p>Bem vindo ao meu site</p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button">Leia mais</a></p>
 </div>
./module/Admin/config/module.config.php
<?php
return array(
    'controllers' => [
        'invokables' => [
            'Admin\Controller\Index' => 'Admin\Controller\IndexController'
        ]
    ],
    'router' => array(
        'routes' => array(
            'admin' => array(
                'type' => 'Literal',
                'options' => array(
                    'route'    => '/admin',
                    'defaults' => array(
                        'controller' => 'Admin\Controller\Index',
                        'action'     => 'index',
                    ),
                ),
            ),
        )
    ),
    'view_manager' => array(
        'template_path_stack' => array(
            __DIR__ . '/../view',
        ),
    ),
);

Pronto! Nosso módulo Admin está configurado e funcionando.

  1. Instalar a biblioteca do EdpModuleLayouts do Evan Coury. Github: http://github.com/EvanDotPro/EdpModuleLayouts.git

Para instalar faça:

php composer.phar evandotpro/edp-module-layouts:dev-master

Agora adicione o EdpModuleLayouts à key ‘modules’ do seu config/application.config.php

Pronto! O módulo já está instalado, agora vamos criar o layout para o módulo Site e para o módulo Admin.

  1. Configurar o módulo com nossa aplicação e adicionar algum conteúdo nas páginas para teste.
./module/Site/view/site/layout/layout.phtml
<?php echo $this->doctype(); ?>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <?php echo $this->headTitle('ZF2 '. $this->translate('Meu Site'))->setSeparator(' - ')->setAutoEscape(false) ?>

        <?php echo $this->headMeta()
            ->appendName('viewport', 'width=device-width, initial-scale=1.0')
            ->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
        ?>

        <!-- Le styles -->
        <?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'))
                        ->prependStylesheet($this->basePath('css/style.css'))
                        ->prependStylesheet($this->basePath('css/bootstrap-theme.min.css'))
                        ->prependStylesheet($this->basePath('css/bootstrap.min.css')) ?>

        <!-- Scripts -->
        <?php echo $this->headScript()
            ->prependFile($this->basePath('js/bootstrap.min.js'))
            ->prependFile($this->basePath('js/jquery.min.js'))
            ->prependFile($this->basePath('js/respond.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
            ->prependFile($this->basePath('js/html5shiv.js'),   'text/javascript', array('conditional' => 'lt IE 9',))
        ; ?>

    </head>
    <body>
        <nav class="navbar navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?php echo $this->url('home') ?>"><img src="<?php echo $this->basePath('img/zf2-logo.png') ?>" alt="Zend Framework 2"/>&nbsp;<?php echo $this->translate('Skeleton Application') ?></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="<?php echo $this->url('home') ?>">Minha home</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">
            <?php echo $this->content; ?>
            <hr>
            <footer>
                <p>&copy; 2005 - <?php echo date('Y') ?> by Zend Technologies Ltd. <?php echo $this->translate('All rights reserved.') ?></p>
            </footer>
        </div> <!-- /container -->
        <?php echo $this->inlineScript() ?>
    </body>
</html>
./module/Admin/view/admin/layout/layout.phtml
<?php echo $this->doctype(); ?>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <?php echo $this->headTitle('ZF2 '. $this->translate('Meu Site'))->setSeparator(' - ')->setAutoEscape(false) ?>

        <?php echo $this->headMeta()
            ->appendName('viewport', 'width=device-width, initial-scale=1.0')
            ->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
        ?>

        <!-- Le styles -->
        <?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'))
                        ->prependStylesheet($this->basePath('css/style.css'))
                        ->prependStylesheet($this->basePath('css/bootstrap-theme.min.css'))
                        ->prependStylesheet($this->basePath('css/bootstrap.min.css')) ?>

        <!-- Scripts -->
        <?php echo $this->headScript()
            ->prependFile($this->basePath('js/bootstrap.min.js'))
            ->prependFile($this->basePath('js/jquery.min.js'))
            ->prependFile($this->basePath('js/respond.min.js'), 'text/javascript', array('conditional' => 'lt IE 9',))
            ->prependFile($this->basePath('js/html5shiv.js'),   'text/javascript', array('conditional' => 'lt IE 9',))
        ; ?>

    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?php echo $this->url('home') ?>"><img src="<?php echo $this->basePath('img/zf2-logo.png') ?>" alt="Zend Framework 2"/>&nbsp;<?php echo $this->translate('Skeleton Application') ?></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="<?php echo $this->url('home') ?>">Minha home Admin</a></li>
                        <li class="active"><a href="#">Meus posts</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container">
            <?php echo $this->content; ?>
            <hr>
            <footer>
                <p>&copy; 2005 - <?php echo date('Y') ?> by Zend Technologies Ltd. <?php echo $this->translate('All rights reserved.') ?></p>
            </footer>
        </div> <!-- /container -->
        <?php echo $this->inlineScript() ?>
    </body>
</html>

Agora temos que configurar o EdpModuleLayouts para registrar nossos layouts:

./config/autoload/global.php
'module_layouts' => array(
    'Site' => 'site/layout/layout',
    'Admin' => 'admin/layout/layout',
),

Portanto para configurar os layouts por módulo precisamos fazer:

'module_layouts' => array(
    'Nome do meu modulo' => 'caminho para o meu layout'
    //...
)
  1. Testando o que fizemos.

Para testar o que fizemos usaremos o php built-in-server para executar a aplicação no nosso browser. Faça em seu terminal:

php -S localhost:9999 -t public public/index.php

Agora é só abrir seu browser e digitar localhost:9999. Se aparecer uma página mostrando o Zend Framework 2, então tudo deu certo.

Para ver a página do site acesse localhost:9999/site.

site

Para ver a página do site acesse localhost:9999/admin.

admin

Se você quiser ver o código deste tutorial acesse http://github.com/codeedu/multi-layout.git

 

Então é isso pessoal, espero que tenham gostado. Vejam que não é nenhum bicho de sete cabeças usar múltiplos layout por módulo e que quando instalado é um recurso poderoso para o

visual da nossa aplicação.

Referências:

http://github.com/EvanDotPro/EdpModuleLayouts.git