Melhorias de layout - Deixando mais organizado. - Saldaris Consultoria - Serviços de tecnologia e desenvolvimento de sistemas

  • Home
  • Blog
  • Melhorias de layout – Deixando mais organizado.

Até agora, criamos nossas views de forma individual, o que pode levar a código duplicado e dificultar a manutenção do projeto. Para melhorar a estrutura do layout, vamos criar um template base para padronizar todas as páginas da aplicação.

Criando um Layout Base

No diretório app/Views/, crie um novo arquivo chamado layout.php. Esse arquivo servirá como estrutura padrão para todas as páginas do site.


<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $titulo ?? 'Meu Site' ?></title>
    <link rel="stylesheet" href="<?= base_url('assets/css/style.css') ?>">
</head>
<body>

    <header>
        <h1>Meu Site CodeIgniter</h1>
        <nav>
            <a href="<?= site_url('/') ?>">Home</a> |
            <a href="<?= site_url('servicos') ?>">Serviços</a> |
            <a href="<?= site_url('quem-somos') ?>">Quem Somos</a> |
            <a href="<?= site_url('contato') ?>">Contato</a>
        </nav>
    </header>

    <main>
        <?= $this->renderSection('conteudo') ?>
    </main>

    <footer>
        <p>© <?= date('Y') ?> Meu Site - Todos os direitos reservados.</p>
    </footer>

</body>
</html>

Esse template define um cabeçalho, uma área de navegação e um rodapé. O conteúdo das páginas será inserido dentro da seção conteudo.

Adaptando as Views para Usar o Template

Agora, em cada view do site, utilizamos o template base para evitar a repetição de código. Por exemplo, no arquivo app/Views/paginas/home.php, alteramos para:


<?php $this->extend('layout'); ?>

<?php $this->section('conteudo'); ?>
    <h2>Bem-vindo ao nosso site!</h2>
    <p>Aqui você encontrará informações sobre nossos serviços.</p>
<?php $this->endSection(); ?>

Agora, todas as páginas do site seguirão o mesmo layout sem a necessidade de repetir a estrutura do HTML.

Melhorando o Layout da Área Administrativa

Podemos criar um layout específico para o painel administrativo. No diretório app/Views/admin/, crie um arquivo layout_admin.php:


<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - <?= $titulo ?? 'Painel' ?></title>
    <link rel="stylesheet" href="<?= base_url('assets/css/admin.css') ?>">
</head>
<body>

    <header>
        <h1>Painel Administrativo</h1>
        <nav>
            <a href="<?= site_url('admin/posts') ?>">Gerenciar Posts</a> |
            <a href="<?= site_url('logout') ?>">Sair</a>
        </nav>
    </header>

    <main>
        <?= $this->renderSection('conteudo') ?>
    </main>

    <footer>
        <p>© <?= date('Y') ?> Painel Admin - Todos os direitos reservados.</p>
    </footer>

</body>
</html>

Agora, as views administrativas podem utilizar esse template. Por exemplo, alteramos app/Views/admin/posts/lista.php para:


<?php $this->extend('admin/layout_admin'); ?>

<?php $this->section('conteudo'); ?>
    <h2>Gerenciar Posts</h2>
    <a href="<?= site_url('admin/posts/novo') ?>">Criar Novo Post</a>

    <?php foreach ($posts as $post) : ?>
        <p><strong><?= esc($post['titulo']) ?></strong></p>
        <a href="<?= site_url('admin/posts/editar/'.$post['id']) ?>">Editar</a> |
        <a href="<?= site_url('admin/posts/excluir/'.$post['id']) ?>" onclick="return confirm('Tem certeza?');">Excluir</a>
    <?php endforeach; ?>
<?php $this->endSection(); ?>

Conclusão

Agora temos um layout unificado para o site e para a área administrativa, tornando a estrutura mais organizada e fácil de manter.

No próximo post, vamos reforçar a segurança do sistema, protegendo ações sensíveis e melhorando o controle de acessos.

Se você ou sua empresa precisa de suporte para desenvolvimento com CodeIgniter 4, a Saldaris Consultoria pode ajudar. Entre em contato pelo formulário no final da página para saber mais sobre nossos serviços.

    WhatsApp