Vistas en CodeIgniter 4

por

En este artículo aprenderás cómo trabajar correctamente con vistas, cómo enviar datos desde el controlador, cómo organizarlas por módulos y cómo crear plantillas reutilizables para optimizar tu desarrollo.

¿Qué es una vista en CodeIgniter?

Una vista es un archivo que contiene el HTML que se renderiza al usuario. Estas vistas se ubican en la carpeta /app/Views/ y puedes cargarlas desde cualquier controlador utilizando la función view().

Ejemplo básico

Supongamos que tienes una ruta /productos y quieres mostrar un catálogo. Tu controlador podría verse así:

public function index()
{
    return view('productos');
}

En este caso, CodeIgniter buscará un archivo llamado productos.php dentro de la carpeta app/Views.

Y tu archivo productos.php puede contener simplemente:

<h1>Productos</h1>

Enviar datos desde el controlador

Puedes pasar información dinámica a tu vista mediante un arreglo asociativo. Por ejemplo:

public function index()
{
    $data = [
        'titulo' => 'Catálogo de productos'
    ];

    return view('productos', $data);
}

Luego, en tu vista puedes acceder al valor con:

<title><?= esc($titulo) ?></title>
<h1><?= esc($titulo) ?></h1>

La función esc() es muy importante, ya que evita que código HTML malicioso se interprete dentro de tu página. Siempre que imprimas datos provenientes de usuarios o del servidor, es recomendable escapar el contenido.

Organizando las vistas en carpetas

Si estás trabajando en un proyecto grande, es buena idea organizar tus vistas por módulos. Por ejemplo, puedes crear una carpeta /Views/productos/ y dentro colocar tu archivo index.php.

// Controlador
return view('productos/index');

Así mantienes tu estructura limpia y cada módulo tiene su propio conjunto de vistas.

Uso de plantillas (Header y Footer)

En lugar de repetir todo el código HTML como <html>, <head>, <body>, etc., puedes crear vistas parciales para tu plantilla base. Por ejemplo:

/Views/plantilla/header.php
/Views/plantilla/footer.php

El archivo header.php podría contener:

<!DOCTYPE html>
<html>
<head>
    <title><?= esc($titulo ?? 'Mi sitio') ?></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>

Y el footer.php algo como:

<footer class="text-center mt-5">
    <p><?= esc($copy ?? '© 2025 Mi sitio') ?></p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Luego en tu controlador puedes componer tu vista principal así:

public function index()
{
    $data = [
        'titulo' => 'Catálogo de productos',
        'copy' => '© 2025 MRoblesDev'
    ];

    echo view('plantilla/header', $data);
    echo view('productos/index', $data);
    echo view('plantilla/footer', $data);
}

Esto te permite reutilizar tu header y footer en todas las vistas sin duplicar código.

Ventajas de usar plantillas y dividir vistas

  • Reutilización: una sola plantilla para múltiples páginas.
  • Organización: tus vistas están separadas por módulo.
  • Mantenimiento: puedes actualizar tu diseño en un solo lugar.

Además, CodeIgniter te permite ver las vistas que se cargaron en el toolbar de debug, en la sección Views, lo que te ayuda a identificar problemas de carga o estructura.

Guía en vídeo

Conclusión

Trabajar con vistas en CodeIgniter 4 es muy flexible y potente. Puedes comenzar con algo simple y luego ir creando estructuras más robustas con templates, módulos y paso de datos dinámicos. Dividir correctamente tus archivos y usar buenas prácticas como esc() te ayudará a construir aplicaciones más seguras, ordenadas y fáciles de mantener.

¿Estás listo para seguir aprendiendo CodeIgniter 4? ¡Suscríbete al canal y revisa los siguientes videos donde trabajaremos con modelos y bases de datos!