En este artículo aprenderás a crear y reutilizar layouts en CodeIgniter 4 para estructurar tus vistas de una forma más profesional y eficiente.
Si vienes de la entrada anterior donde vimos cómo mostrar vistas individuales (como el header, contenido y footer), ahora daremos un paso más allá para construir plantillas reutilizables que harán tu desarrollo mucho más limpio y mantenible.
¿Qué es un layout en CodeIgniter 4?
Un layout es básicamente una plantilla principal que define la estructura general de tu página (por ejemplo, el encabezado, el contenido y el pie de página).
En lugar de cargar varias vistas manualmente en cada controlador, el layout nos permite insertar dinámicamente contenido en una sección específica, manteniendo el mismo diseño base para todas las páginas.
Esto es útil cuando:
- Tu aplicación comparte el mismo diseño en muchas páginas.
- Quieres modificar el diseño global (header, menú, footer) desde un solo archivo.
- Buscas una manera más organizada de gestionar tus vistas.
Estructura base de un layout
Primero, creamos un nuevo archivo dentro de app/Views/plantilla/ llamado layout.php.
Este archivo contendrá el HTML principal de tu aplicación. Puedes incluir aquí tu estructura básica con Bootstrap u otro framework CSS.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title><?= $titulo ?? 'Mi sitio' ?></title>
<link rel="stylesheet" href="...bootstrap.min.css">
</head>
<body>
<?= $this->include('plantilla/menu') ?>
<?= $this->renderSection('contenido') ?>
<footer class="text-center py-3">
© <?= date('Y') ?> Mi sitio web
</footer>
<?= $this->renderSection('scripts') ?>
</body>
</html>Aquí definimos tres partes importantes:
- Menú: incluido con
$this->include() - Contenido dinámico: definido por
$this->renderSection('contenido') - Scripts específicos:
$this->renderSection('scripts')(para código JS opcional)
Cómo extender un layout desde una vista
Supongamos que tienes una vista llamada app/Views/productos/index.php.
Para que use el layout que acabamos de crear, debes extender el archivo layout.php:
<?= $this->extend('plantilla/layout') ?>
<?= $this->section('contenido') ?>
<div class="container">
<h1><?= esc($titulo) ?></h1>
<p>Bienvenido al listado de productos.</p>
</div>
<?= $this->endSection() ?>
<?= $this->section('scripts') ?>
<script>
alert('Hola desde JS');
</script>
<?= $this->endSection() ?>Con esto, la vista index.php insertará su contenido dentro de la sección contenido del layout, y también podrá agregar scripts personalizados si lo necesita.
Controladores más limpios
En el controlador ya no necesitas cargar el header, el contenido y el footer manualmente.
Basta con retornar la vista principal:
return view('productos/index', [
'titulo' => 'Listado de Productos'
]);CodeIgniter se encargará de renderizar el layout y las secciones definidas dentro de la vista.
Agregar un menú como vista independiente
Para mantener el código modular, también puedes crear un menú como vista aparte.
Por ejemplo, en app/Views/plantilla/menu.php:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Mi Tienda</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="/productos" class="nav-link">Productos</a></li>
<li class="nav-item"><a href="/contacto" class="nav-link">Contacto</a></li>
</ul>
</div>
</div>
</nav>Este menú se incluirá automáticamente cada vez que se use el layout gracias a:
<?= $this->include('plantilla/menu') ?>
Ventajas de usar layouts
Usar layouts en CodeIgniter 4 ofrece varias ventajas:
- Reutilización: un solo diseño para todas las páginas.
- Mantenimiento sencillo: cambia una vez y se actualiza en toda la app.
- Menos código repetido: tus controladores se vuelven más limpios.
- Soporte para secciones: puedes definir áreas específicas para scripts, menús o bloques de contenido personalizados.
Aunque CodeIgniter 4 no utiliza un motor de plantillas como Blade de Laravel, su sistema de layouts y secciones ofrece una forma muy práctica y ligera de lograr el mismo resultado.
Guía en vídeo
Conclusión
Con los layouts de CodeIgniter 4 puedes crear estructuras profesionales y mantener tus vistas organizadas sin complicarte con motores externos.
Esto te permite concentrarte en la lógica de tu aplicación mientras conservas una apariencia consistente y fácil de mantener.