Cómo pasar datos del controlador a la vista en CodeIgniter 4 [Tutorial detallado]

Cuando construyas cualquier tipo de aplicación web, una de las primeras cosas que tendrás que averiguar es cómo pasar datos de tu controlador a tu vista. Esto es fundamental para el funcionamiento de los frameworks MVC.

En este tutorial, empezaremos con un controlador sencillo que pasa un título, un mensaje y una lista a la vista, lo suficiente para confirmar que todo está conectado correctamente.

Luego iremos más allá simulando un ejemplo del mundo real: una página de listado de productos con categorías y filtros de precio. Verás cómo pasar datos estructurados más complejos, cómo organizarlos y cómo hacer que tu vista sea lo suficientemente flexible como para escalar con tu aplicación.

Empecemos.

¿Cómo funciona el Modelo-Vista-Controlador (MVC) en las aplicaciones web?

En el desarrollo web, especialmente con frameworks como CodeIgniter, seguimos un patrón llamado Modelo-Vista-Controlador (MVC). Piensa en ello como en un restaurante:

• El Controlador es el camarero. Tú (el usuario) le dices al camarero lo que quieres (por ejemplo, «Enséñame el menú»). El camarero va a la cocina.
• El Modelo es la cocina y la despensa. Aquí es donde se almacena y prepara toda la comida (datos). El camarero coge la comida de aquí.
• La Vista es tu mesa y tu plato. Aquí es donde finalmente se te presenta la comida de forma agradable.

Ahora, imagina que el camarero (Controlador) recibe la comida (datos) de la cocina (Modelo). No pueden simplemente tirarte la comida. Tienen que ponerla bien en un plato (pasar datos a la Vista) para que puedas comerla.

Precisamente por eso pasamos datos del Controlador a la Vista. El trabajo de la Vista es mostrar cosas, pero necesita que el Controlador le dé la información real que debe mostrar.

¿Por qué es importante pasar datos?

Sin el Controlador pasando datos, tus páginas web estarían atascadas mostrando exactamente las mismas cosas cada vez. No podrían mostrar:

• Las entradas de tu blog (porque el Controlador necesita obtenerlas de la base de datos y enviarlas a la página).
• Los artículos de tu cesta de la compra (por el mismo motivo).
• Mensajes de error si rellenas mal un formulario.
• Tu nombre si has iniciado sesión.

Básicamente, si cambia o procede de otro lugar (como una base de datos), el Controlador tiene que cogerlo y pasarlo a la Vista para que ésta pueda mostrarlo.

Ejemplo sencillo: Mostrar el nombre de un usuario

Supongamos que tienes un sitio web y, cuando un usuario inicia sesión, quieres mostrarle «¡Bienvenido, John Doe!».

1. Tú (el usuario) te conectas.
2. El Controlador gestiona tu solicitud de inicio de sesión. Comprueba tu nombre de usuario y contraseña.
3. A continuación, el Controlador pregunta al Modelo (la cocina de nuestra base de datos) tu nombre completo, «Juan Nadie».
4. Ahora el controlador tiene «Juan Pérez». Necesita mostrarlo en la página web. Así que pasa «Juan Pérez» a la Vista.
5. La Vista recibe «Juan Pérez» y lo pone en el mensaje de bienvenida de la página, como «¡Bienvenido, Juan Pérez!».

Este simple acto del Controlador de dar «Juan Pérez» a la Vista es lo que hace que tus páginas web sean dinámicas y personalizadas. Sin ella, ¡la Vista no sabría a quién dar la bienvenida!

Cómo pasar datos del controlador a la vista en CodeIgniter 4 (Paso a Paso)

Este tutorial te guiará a través del proceso de pasar varios tipos de datos desde tu controlador CodeIgniter 4 a tus vistas. Empezaremos con datos estáticos (cadenas, matrices) y luego pasaremos a obtener datos dinámicos de una base de datos.

Objetivo de la tutoría

Aprenderemos a hacerlo:

• Crea un controlador en CodeIgniter.
• Pasa distintos tipos de datos (cadena, matriz, matriz asociativa) desde ese controlador.
• Recibe esos datos y reprodúcelos en una vista.

Requisitos previos

Antes de sumergirte, asegúrate de que tienes configurado lo siguiente:

• PHP instalado(PHP 8.0+ está bien, aunque CodeIgniter 4.6+ necesita PHP 8.1+)
• Composer instalado(Descargar Composer)
• XAMPP instalado y funcionando (el servicio Apache debe estar activado)
• Proyecto CodeIgniter creado (lo haremos a continuación)

Paso 1: Crear un proyecto CodeIgniter

Utilizaremos Composer para crear un nuevo proyecto CodeIgniter 4.

En tu Símbolo del sistema, ejecuta

composer create-project codeigniter4/appstarter codeigniter-tutorial

Esto crea un proyecto CI4 nuevo dentro de la carpeta codeigniter-tutorial. En mi caso, dentro de «C:\sers\abdulrehman\codeigniter-tutorial» puedo ver la estructura completa de la appstarter CodeIgniter 4, incluyendo:

• /app – El código de tu aplicación (controladores, vistas, modelos, etc.)
• /public – La carpeta que servirás en el navegador (es la raíz de tu web)
• /escribible – Archivos de tiempo de ejecución como registros, caché, cargas
• .env – Configuración del entorno (cámbiale el nombre si quieres utilizarlo)

Paso 2: Sirve el proyecto

Navega hasta la carpeta de tu proyecto:

cd C:\Users\abdulrehman\codeigniter-tutorial

A continuación, inicia el servidor local de desarrollo:

php spark servir

Visita tu navegador en:

http://localhost:8080

Deberías verlo:

Bienvenido a CodeIgniter 4.4.8
El pequeño framework con potentes funciones

Eso significa que CodeIgniter funciona.

Paso 3: Crear un nuevo controlador

Vamos a crear un controlador llamado Mensaje.php. Para ello

• Dentro de app/Controladores, crea un nuevo archivo: Mensaje.php

• Añade este código:

<php

namespace App\Controllers;

clase Mensaje extends BaseController
{
  función pública index()
  {
  $datos = [
  'título' =>  ¡Bienvenido a CodeIgniter!
  'mensaje' =>  'Este es un mensaje pasado desde el controlador a la vista',
  'elementos' =>  ['Manzana', 'Plátano', 'Cereza']
  ];

  devolver vista('vista_mensaje', $datos);
  }
}

¿Qué está pasando aquí?

• index() es el método por defecto que se ejecuta cuando visitas localhost:8080/message.
• $datos es una matriz asociativa que contiene:
  • Una cadena (título)
  • Una cadena (mensaje)
  • Una matriz indexada (elementos)

• return view(‘vista_mensaje’, $datos); tells CodeIgniter:
  • Carga el archivo de vista message_view.php (lo crearemos a continuación)
  • Y pasa la matriz $datos a esa vista

Paso 4: Crear la vista

Vamos a crear el archivo message_view.php dentro de la carpeta app/Views/.

• Navega hasta: app/Vistas
• Crear: message_view.php
• Añade este código:

<!DOCTYPE html>
<html>
<cabeza>
    <título><?= esc($título) ?></title>
</head>
<cuerpo>

    <h1><?= esc($título) ?></h1>
    <p><?= esc($mensaje) ?></p>

    <h3>Lista de frutas:</h3>
    <ul>
        <?php foreach ($elementos como $elemento): ?>
            <li><?= esc($elemento) ?></li>
        <?php endforeach; ?>
    </ul>

</body>
</html>

¿Qué está pasando aquí?

• Estamos utilizando esc() para dar salida a las variables de forma segura (protege contra XSS).
• $title, $message y $items proceden del controlador.
• Recorremos la matriz $items con un bucle foreach y mostramos cada fruta.

Paso 5: Encaminar el controlador

Por defecto, CodeIgniter 4 dirige todo al controlador Inicio . Vamos a decirle que ahora queremos utilizar el controlador Mensaje .

• Abre el archivo: app/Config/Routes.php

• Encuentra esta línea: $routes->get(‘/’, ‘Home::index’);
• Añade esta nueva ruta debajo: $routes->get(‘mensaje’, ‘Mensaje::índice’);

Pruébalo

Ahora ve a: http://localhost:8080/message

Deberías verlo:

• El título «¡Bienvenido a CodeIgniter!»
• Un mensaje debajo
• Una lista de frutas: Manzana, Plátano, Cereza

Impresionante. Todo lo que hemos hecho hasta ahora ha funcionado. Así que ahora, vamos a subir un poco el nivel.

Caso práctico real: Obtener una vista renderizada de una página de listado de productos

Imaginemos que estás construyendo un sitio sencillo de comercio electrónico. Quieres mostrar una lista de productos en la página de inicio, agrupados por categorías, y quizá incluso incluir filtros de precio en el futuro.

Para simplificarlo por ahora, nos centraremos en mostrar los productos por categorías. Pasarás estos datos estructurados desde el controlador a la vista y los mostrarás dinámicamente.

Esto es lo que vamos a hacer paso a paso:

Paso 1: Actualizar el controlador

Empezaremos editando el mismo controlador que usaste antes(app/Controladores/Mensaje.php). Pero esta vez, en lugar de frutas, pasaremos datos de productos agrupados por categorías.

<php

namespace App\Controllers;

clase Mensaje extends BaseController
{
  función pública index()
  {
  $datos = [
  'título' =>  'Listado de productos',
  categorías" =>  [
  Electrónica" =>  [
  ['nombre' =>  'Smartphone', 'precio' =>  699],
  ['nombre' =>  'Auriculares', 'precio' =>  199],
  ],
  Libros" =>  [
  ['nombre' =>  'El programador pragmático', 'precio' =>  39],
  ['nombre' =>  'Código limpio', 'precio' =>  45],
  ],
  Ropa" =>  [
  ['nombre' =>  'Camiseta', 'precio' =>  25],
  ['nombre' =>  'Sudadera con capucha', 'precio' =>  60],
  ]
  ]
  ];

  devolver vista('lista_productos', $datos);
  }
}

¿Qué está pasando aquí?

Estamos definiendo una matriz asociativa $datos que contiene:

• Un título
• Una matriz anidada de categorías, donde cada categoría contiene una lista de productos con nombres y precios

Luego pasamos todos estos datos a una vista llamada lista_productos.

Paso 2: Crear la vista

Ahora vamos a crear ese nuevo archivo de vista.

Ve a app/Views/ y crea un archivo llamado product_list.php.

Aquí tienes el código de la plantilla:

<!DOCTYPE html>
<html>
<cabeza>
    <título><?= esc($título) ?></title>
</head>
<cuerpo>

    <h1><?= esc($título) ?></h1>

    <?php foreach ($categorías como $categoría =>  $productos): ?>
        <h2><?= esc($categoría) ?></h2>
        <ul>
            <?php foreach ($productos como $producto): ?>
                <li>
                    <?= esc($producto['nombre']) ?>  - $<?= esc($producto['precio']) ?>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endforeach; ?>

</body>
</html>

¿Qué está pasando aquí?

• Hacemos un bucle por cada categoría y luego por cada producto dentro de esa categoría.
• esc() es una función auxiliar de CodeIgniter que escapa la salida para evitar ataques XSS.
• La estructura es limpia, y cualquier categoría o producto que añadas en el futuro al controlador se mostrará aquí automáticamente.

Pruébalo

Ya está abierto: http://localhost:8080/message

Deberías verlo:

• Una página titulada «Listado de productos»
• Productos agrupados en «Electrónica«, «Libros» y «Ropa«.
• Cada producto con su precio indicado

Éxito. En lugar de pasar una simple matriz de frutas como hicimos antes, ahora estamos pasando un conjunto de datos estructurado que se parece a lo que un sitio real de comercio electrónico podría enviar a su frontend.

Transición de los datos estáticos a los dinámicos

Hasta ahora, te hemos enseñado a pasar datos codificados desde un controlador a una vista en CodeIgniter, lo cual es estupendo para comprender los conceptos básicos. Pero en aplicaciones prácticas como blogs, cuadros de mando, comercio electrónico, tus datos casi siempre proceden de una base de datos.

Así que vamos a partir de lo que hemos hecho y dar un paso más, extrayendo datos de una base de datos y pasándolos a nuestra vista.

Así es como lo haremos, paso a paso:

• Configura una base de datos MySQL con tablas de productos y categorías
• Construye un modelo en CodeIgniter para obtener esos datos
• Utiliza el controlador para extraer datos utilizando el modelo
• Envía esos datos a la vista, igual que antes

💡 Antes de continuar:

Abre tu archivo .env (lo encontrarás en la raíz de tu proyecto CodeIgniter). Si tu archivo se llama env, asegúrate de añadir . antes. Así CodeIgniter podrá leerlo.

Luego, en el archivo, asegúrate de que esta línea no está comentada: CI_ENTORNO = desarrollo.

Si ves CI_ENVIRONMENT = producción, cámbialo por CI_ENVIRONMENT = desarrollo.

Si empieza por #, elimínalo. Esto habilita los mensajes de error mientras desarrollas, útiles para detectar problemas como los de conexión a la base de datos.

Paso 1: Configura tu base de datos

Necesitarás dos tablas: una para las categorías y otra para los productos. Para ello

• Abre tu Panel de Control XAMPP.
• Inicia Apache y MySQL.
• A continuación, haz clic en «Admin» junto a MySQL. Se abrirá phpMyAdmin en tu navegador.

Una vez abierto phpMyAdmin:

Mira en la barra lateral izquierda – haz clic en«Nuevo» en la parte superior.

En«Crear base de datos«, escribe: ci_store

Asegúrate de que la intercalación está establecida en utf8mb4_general_ci (suele ser la predeterminada).

Haz clic en«Crear«.

Ahora que tu base de datos está creada, vamos a ejecutar el SQL para crear tus tablas de categorías y productos.

En phpMyAdmin, asegúrate de que has seleccionado tu base de datos ci_store en el menú de la izquierda.

En la parte superior, haz clic en la pestaña «SQL».

Pega este SQL:

CREAR TABLA categorías (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(255) NOT NULL
);

CREAR TABLA productos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  category_id INT NOT NULL,
  nombre VARCHAR(255) NOT NULL,
  precio DECIMAL(10,2) NOT NULL,
  FOREIGN KEY (categoría_id) REFERENCIAS categorías(id)
);

Haz clic en Ir.

Así se crean las dos tablas. Deberías ver un mensaje verde de éxito en la parte superior.

Inserta algunos datos de muestra

En nuestra tabla de base de datos que hemos creado, vamos a insertar ahora algunos datos de ejemplo. Todavía en la pestaña SQL, pega este fragmento siguiente y vuelve a hacer clic en Ir:

INSERT INTO categorías (nombre) VALUES (‘Electrónica’), (‘Libros’), (‘Ropa’);

INSERT INTO productos (categoría_id, nombre, precio) VALUES

(1, «Smartphone», 699),

(1, «Auriculares», 199),

(2, «El programador pragmático», 39),

(2, «Código limpio», 45),

(3, «Camiseta», 25),

(3, «Encapuchado», 60);

Esto no hace más que sembrar tu base de datos con algunos datos ficticios con los que trabajar. Es como cargar tu primer lote de productos y categorías de prueba.

Es hora de comprobar si nuestra base de datos está rellenada correctamente. Haz clic en la tabla«categorías» de la barra lateral izquierda y luego en«Examinar» en la parte superior. Deberías ver

• Electrónica
• Libros
• Ropa

Luego haz lo mismo con «productos». Verás las filas de productos relacionados.

¡Ahora tu base de datos está totalmente configurada y lista para ser utilizada en CodeIgniter!

Configura tu base de datos Codeigniter

Abre este archivo:

app/Config/BasedeDatos.php

Busca la matriz $default y actualízala para que coincida con la información de tu base de datos. Sólo tienes que actualizar estos tres valores en tu archivo Database.php:

‘nombredeusuario’ => »

‘contraseña’ => »

‘base de datos’ => »

Así que actualizaré mi código así:

public $por defecto = [
  'DSN' =>  '',
  'hostname' =>  'localhost',
  'nombredeusuario' =>  'root', // ← tu nombre de usuario MySQL
  'contraseña' =>  '', // ← tu contraseña MySQL
  'base de datos' =>  'ci_store', // ← el nombre de tu base de datos
  'DBDriver' =>  'MySQLi',
  'DBPrefix' =>  '',
  'pConectar' =>  falso,
  DBDebug' =>  (ENTORNO !== 'producción'),
  'charset' =>  utf8',
  'DBCollat' =>  'utf8_general_ci',
  'swapPre' =>  '',
  'encriptar' =>  falso,
  'comprimir' =>  falso,
  'strictOn' =>  falso,
  failover" =>  [],
  'puerto' =>  3306,
];

Asegúrate de que coinciden con los valores que utilizaste en phpMyAdmin, de lo contrario CodeIgniter no podrá conectarse. Eso es todo, ahora CodeIgniter puede hablar con tu DB.

Paso 2: Crear el modelo

En CodeIgniter, vamos a crear un modelo para hablar con nuestra base de datos. Crearemos un simple ProductModel.

Crea este archivo: app/Models/ProductModel.php

<php

namespace App\Models;

utiliza CodeIgniter\Model;

clase ProductModel extends Modelo
{
  protected $table = 'productos';
  protected $campospermitidos = ['nombre', 'precio', 'categoría_id'];
  protegida $useTimestamps = false;

  función pública getProductosAgrupadosPorCategoría()
  {
  $constructor = $this->db->tabla('productos p');
  $constructor->select('p.nombre como nombre_producto, p.precio, c.nombre como nombre_categoría');
  $constructor->join('categorías c', 'c.id = p.categoría_id');
  $consulta = $constructor->obtener();

  $resultados = [];
  foreach ($consulta->getResultArray() as $fila) {
  $resultados[$fila['nombre_categoría']][] = [
  'nombre' =>  $fila['nombre_producto'],
  'precio' =>  $fila['precio']
  ];
  }

  devuelve $resultados;
  }
}

Este método obtiene todos los productos, los une con sus categorías y los agrupa en una matriz asociativa, igual que tu versión codificada, pero ahora desde la BD.

Paso 3: Actualizar el controlador

Ahora sustituye los datos estáticos de tu controlador por datos dinámicos del modelo. Con esto me refiero al archivo del controlador Mensaje.

<php

namespace App\Controllers;

utiliza App\Models\ProductModel;

clase Mensaje extends BaseController
{
  función pública index()
  {
  $productModel = nuevo ProductModel();
  $categorías = $productoModelo->getProductosAgrupadosPorCategoría();

  $datos = [
  'título' =>  'Listado de productos',
  categorías" =>  $categorías
  ];

  devolver vista('lista_productos', $datos);
  }
}

Observa que no hemos necesitado tocar la vista en absoluto. Ésa es la ventaja de mantener tu lógica en el controlador: tu capa de presentación permanece limpia y reutilizable, independientemente de dónde procedan tus datos.

Comprobación final

Abre tu navegador y ve a: http://localhost:8080/message

Ahora deberías ver el mismo listado de productos, pero esta vez es 100% dinámico, extraído directamente de tu base de datos.

¡Terminando!

Ahora que has visto cómo pasar datos de un controlador a una vista en CodeIgniter, tienes un sólido dominio de uno de los conceptos básicos del desarrollo web dinámico.

Empezamos con mensajes sencillos, pasamos a pasar matrices completas y, por último, lo conectamos todo a una base de datos MySQL real, mostrando cómo extraer datos de productos en directo y representarlos en el front-end.

Si tienes alguna pregunta, házmelo saber en los comentarios y estaré encantada de ayudarte.

Si estás construyendo algo más serio, ahora también es un buen momento para pensar en el rendimiento y el alojamiento, especialmente para aplicaciones de tipo comercio electrónico. Un alojamiento rápido y escalable como Cloudways garantiza que tu aplicación CodeIgniter se cargue rápidamente, incluso cuando los listados de productos se vuelvan pesados (piensa en almacenamiento SSD, caché integrada, integración con Cloudflare).

$datos = ['título' =>  'Mi página', 'mensaje' =>  Hola Mundo];
devolver vista('mi_vista', $datos);

$model = nuevo ProductModel();
$productos = $modelo->findAll();

return view('lista_productos', ['productos' =>  $productos]);

$model = nuevo BlogModel();
$posts = $modelo->findAll();

return view('blog/index', ['posts' =>  $posts]);

sesión()->set('clave', 'valor'); // Establecer datos
$valor = sesión()->get('clave'); // Obtener datos

Abdul Rehman

Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.

Get Connected on: Twitter Community Forum