Modificando template e layout do Módulo Admin

No artigo anterior, aprendemos como criar um módulo e criamos o nosso admin (como era chamado antigamente, o nosso backend) da nossa vitrine pelo Gii. Nesse artigo vamos preparar o módulo admin para receber um layout diferente e criar os menus pertinentes ao admin.

Nota: Pode não parecer, mas este artigo está ligado a geração de módulos visto anteriormente, porém está ligado também a um assunto que veremos mais para frente no projeto.

Para começar precisamos separar um pouco as coisas. Vamos criar um layout separado para o admin com seus próprios menus. Fazer isso é uma tarefa muito simples pois o Yii2 gerencia isso de uma forma bem prática.

Na raíz do projeto verá um diretório chamado assets e nele um arquivo chamado AppAssets.php. Esse arquivo é responsável pele coleção de dependências gerais da sua aplicação.

Que dependências são essas?

Seus CSS, bibliotecas (libs) / frameworks / arquivos JavaScript, dependências do próprio Yii (no caso o Bootstrap 3 e jQuery).

Duplique esse arquivo e renomeie ele para AdminAsset.php, altere o nome da classe para AdminAsset.

Seu assets deve estar assim. Repare na mudança do nome da Classe.

Estamos criando esse assets novo pois mais para frete no projeto irei mostrar como ter 2 ou mais templates CSS configurados em uma aplicação. No momento não vai fazer muito sentido estar separado. Mas aguarde e confie! ;)

Preparando o Admin para utilizar o AdminAsset

Para que o nosso módulo admin tenha um layout diferente do site precisamos criar arquivo de layout.

vá até o diretório views/layouts e nele um arquivo chamado main.php. Esse arquivo é responsável pela criação do template que será herdado em todo o site. Duplique esse arquivo e renomeie ele para admin.php, altere o

use app\assets\AppAsset;para use app\assets\AdminAsset;

Precisa alterar também o registro o asset no template.

AppAsset::register($this);para AdminAsset::register($this);

Acesse seu admin http://localhost/vitrine/web/admin e deverá ver como a imagem abaixo.

Calma, ainda não fizemos modificações aqui. Por isso parece que não mudou nada. Mas mudou!

Agora precisamos dizer ao módulo admin qual template usar. Nesse caso será o admin. Abra o arquivo config/web.php e adicione no bloco modules a linha como mostra o código abaixo.

...
modules’ => [
    ‘admin’ => [
        ‘class’ => ‘app\modules\admin\Admin’,
        ‘layout’ => ‘@app/views/layouts/admin’,
    ],
],
...

Com essas 3 pequenas e rápidas modificações implementamos um layout/template diferente no módulo admin.

Alterando menus e outros itens no template

Para não ficar muito extenso irei deixar aqui o código já modificado. O arquivo a ser alterado é o views/layouts/admin.php.

Veja que o menu já está diferente.

Abra mais uma aba e acesse o site e veja que de fato o Site e o Admin estão com menus diferentes.

Recapitulando o processo

Passo 1: Criamos o arquivo AdminAsset.php que carrega as dependências do Yii2 e onde pode ser adicionado diversos CSS e JavaScripts.
Passo 2: Criamos o arquivo admin.php que serve como template do admin, que tem uma aparência diferente do site.
Passo 3: Associamos o AdminAsset.php no admin.php.
Passo 4: Adicionar ao arquivo config/web.php a chamada do layout novo.

Mais uma etapa concluída do projeto. Acompanhe o projeto e vejas os arquivos no GitHub: https://github.com/Calcio/vitrine