Layouts e Elements no CakePHP

Tempo de leitura: 5 minutos

Layouts e Elements no CakePHP: Você já parou para pensar quanto tempo perde copiando e colando o mesmo menu de navegação ou o mesmo rodapé em todas as páginas do seu site? No desenvolvimento de software profissional, repetição é sinônimo de erro. Se você mudar um link no menu e tiver 50 páginas, terá que editar 50 arquivos.

Como especialista em CakePHP, preparei este décimo quinto artigo da nossa série para ensinar você a dominar a organização visual do seu projeto. Vamos aprender a usar Layouts e Elements para transformar seu front-end em um sistema modular, fácil de manter e extremamente escalável.

Trabalhando com Layouts e Elements: Modularizando seu front-end no CakePHP

Layouts e Elements no CakePHP: No CakePHP, a visualização não é apenas um amontoado de arquivos HTML. O framework utiliza um sistema de “casca” e “peças” que permite que você defina a estrutura global do site uma única vez e apenas encaixe o conteúdo específico de cada página.

Essa modularização é feita através de dois conceitos fundamentais:

Layouts: O “esqueleto” ou template global da aplicação.
Elements: Pequenos blocos de código reutilizáveis que podem ser inseridos em qualquer lugar.

Dominar esses conceitos é o que permite que você gerencie um blog com centenas de artigos ou um SaaS complexo como o RPJobs sem enlouquecer com a manutenção do HTML.

1. O que é um Layout? (O Esqueleto Global)

O Layout é o arquivo que contém as tags estruturais do seu site: <html>, <head>, <body>, além das chamadas de CSS e JavaScript globais. Ele define onde o conteúdo das suas views (como o formulário de cadastro ou a lista de artigos) será renderizado.

Por padrão, os layouts ficam em templates/layout/. O arquivo padrão do CakePHP é o default.php.

Exemplo de um Layout Simples (`default.php`)

PHP

<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <title><?= $this->fetch('title') ?></title>
    <?= $this->Html->css(['normalize.min', 'milligram.min', 'cake']) ?>
    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
</head>
<body>
    <nav>
        </nav>

    <main class="main">
        <div class="container">
            <?= $this->Flash->render() ?>
            <?= $this->fetch('content') ?>
        </div>
    </main>

    <footer>
        </footer>
    <?= $this->fetch('script') ?>
</body>
</html>

O método <?= $this->fetch('content') ?> é o coração do layout. Ele atua como um marcador de posição que o CakePHP preenche com o conteúdo da View que está sendo acessada.

2. Criando Layouts Personalizados

Nem todas as páginas do seu sistema precisam do mesmo esqueleto. O seu painel administrativo (Admin) certamente tem um visual diferente do seu site público. No CakePHP, você pode criar múltiplos layouts e alternar entre eles no seu Controller.

Como trocar o Layout no Controller:

PHP

public function login()
{
    // Usa o layout em templates/layout/login_area.php
    $this->viewBuilder()->setLayout('login_area');
}

Isso permite que você tenha um layout limpo para páginas de login e um layout complexo, com barras laterais e menus suspensos, para a área restrita.

3. Elements: O Poder da Reutilização

Se o Layout é o esqueleto, os Elements são os órgãos e membros. Um Element é um pequeno pedaço de código (ex: um formulário de newsletter, um card de autor, um menu lateral) que você extrai para um arquivo separado para poder usá-lo em vários lugares.

Os Elements ficam em templates/element/.

Exemplo de Uso de Element:

Imagine que você criou um bloco de “Artigos Relacionados”. Em vez de escrever o HTML e o loop de dados na página de visualização e na home, você cria o arquivo templates/element/artigos_relacionados.php.

Para chamá-lo em qualquer View, basta usar:

PHP

<?= $this->element('artigos_relacionados') ?>

Passando Dados para o Element:

O Element não tem acesso automático às variáveis da View, a menos que você as passe explicitamente. Isso torna o Element independente e muito mais fácil de testar.

PHP

<?= $this->element('user_profile', ['user' => $usuarioLogado]) ?>

No arquivo do element, você usaria a variável $user normalmente.

4. View Blocks: Personalizando o Layout a partir da View

Às vezes, você quer que uma página específica carregue um arquivo CSS extra ou um script de terceiros (como o SDK do Facebook) apenas naquela tela, sem sujar o layout global. Para isso, usamos os Blocks.

Na sua View (view.php), você pode definir um bloco:

PHP

<?php $this->append('css'); ?>
    <link rel="stylesheet" href="css/galeria.css">
<?php $this->end(); ?>

O CakePHP pegará esse conteúdo e o “transportará” para onde você colocou o <?= $this->fetch('css') ?> no seu layout. É a forma mais limpa de gerenciar dependências específicas de página.

5. View Cells: Elements com “Cérebro”

Aqui está a surpresa: e se você precisar de um Element que busque dados no banco de dados sozinho? Por exemplo, uma barra lateral que mostra as “Top 5 Categorias”.

Se você usar um Element comum, teria que buscar as categorias em todos os Controllers do site. Para resolver isso, o CakePHP oferece as View Cells. Elas são como mini-controllers que buscam seus próprios dados e renderizam seu próprio template.

Como criar uma Cell:

Gere a Cell via terminal: bin/cake bake cell Sidebar
No arquivo src/View/Cell/SidebarCell.php, faça a busca no banco.
No template da Cell templates/cell/Sidebar/display.php, crie o HTML.
Chame em qualquer lugar: <?= $this->cell('Sidebar') ?>.

6. Boas Práticas na Modularização do Front-end

Para manter seu projeto com qualidade de nível sênior, siga estas diretrizes:

Mantenha o Layout Limpo: Não coloque lógica de PHP complexa no layout. Use helpers ou extraia para elements.
Nomeie bem seus Elements: Use nomes semânticos como card-artigo.php ou navbar-principal.php.
Use Prefixos de Pasta: Se você tem muitos elements, organize-os em subpastas dentro de templates/element/ (ex: element/blog/sidebar.php).
Cuidado com a Performance: Evite chamar muitas Cells em uma única página, pois cada uma pode gerar uma nova consulta ao banco de dados.

Conclusão: Um Front-end Inteligente e Sustentável

Trabalhar com Layouts e Elements no CakePHP transforma a maneira como você constrói interfaces. Em vez de ser um “escritor de HTML”, você se torna um “arquiteto de componentes”. Essa abordagem modular não só acelera o desenvolvimento inicial, como torna a manutenção do seu blog de 500 artigos ou de qualquer SaaS algo prazeroso e seguro.

Ao centralizar a estrutura em Layouts e as peças repetitivas em Elements, você garante que sua aplicação seja visualmente consistente e tecnicamente impecável. Você está preparado para qualquer mudança de design, pois agora seu front-end é tão organizado quanto o seu banco de dados.

Mas antes de dominar o CakePHP, se for o seu caso, toda jornada tem um início. Vamos entender quais são os conhecimentos básicos necessários para aproveitar ao máximo este poderoso framework. Para iniciar seus estudos no CakePHP, você precisará dominar as seguintes tecnologias: