CodeIgniter 4 – Crear plantilla estructurada

Veamos cómo crear una plantilla estructurada a partir de las vistas de CodeIgniter 4. Tendremos de forma organizada nuestras vistas y compartiremos cabecera y pie en todas y cada una de las vistas.

Tutoriales CodeIgniter 4

Tutorial añadido a nuestro listado de tutoriales de CodeIgniter 4.

Nuestro objetivo es tener una especie de plantilla para que toda nuestra web o aplicación tenga las misma estructura. En nuestro ejemplo,

Estructura web en CodeIgniter 4

Lo que queremos tener es tres apartados:

  • Cabecera (común para todos los apartados)
  • Contenido (individual para cada apartado)
  • Pie (común para todos los apartados)

La Cabecera y el pie, los utilizaremos en todas las páginas. De esta manera, con dos vistas nos facilitará cambiar los apartados de cabecera y pie en toda la web.

/* Controladores */
/app/Controllers/Home.php
/app/Controllers/Contact.php

/* Estructura de la web */
/app/Views/template_header.php
/app/Views/template_footer.php
/app/Views/contact_view.php
/app/Views/home_view.php

Vistas

Como hemos comentado. Tendremos dos vistas comunes a toda la web (cabecera y pie), y luego cada contenido irá por separado.

La cabecera de nuestra web, será eta vista:

/*
/app/Views/template_header.php
*/
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <!-- Main menu -->
  <nav></nav>

El pie de nuestra web será esta vista

/*
/app/Views/template_footer.php
*/
  <footer>
  </footer>
</body>
</html>

Por último, iremos creando los contenidos para cada apartado. En primer lugar la vista contacto_view.php que tendrá el formulario.

/*
/app/Views/contact_view.php
*/
<section id="contact-content">
  <!-- Contenido de Contact -->
</section>

También la vista que muestra la página principal.

/*
/app/Views/home_view.php
*/
<section id="home-content">
  <!-- Contenido de Home -->
</section>

Y así todas las vistas que necesitemos. Lo importante, es que cabecera y pie, la compartiremos en toda la web.

Controlador

Veamos el controlador que llama a la home. Podemos observar que hace un “echo” de las tres vistas.

<?php namespace App\Controllers;

use CodeIgniter\Controller;

/**
 * Class Home
 * @package CodeIgniter
 */

class Home extends BaseController
{
  public function index()
  {
    echo view('template_header');
    echo view('home_view');
    echo view('template_footer');
  }
}

Pero también podríamos hacer lo mismo, en el apartado contacto

<?php namespace App\Controllers;

use CodeIgniter\Controller;

/**
 * Class Contact
 * @package CodeIgniter
 */

class Contact extends BaseController
{
  public function index()
  {
    echo view('template_header');
    echo view('contact_view');
    echo view('template_footer');
  }
}

Si os fijáis, tanto Home como Contact, comparten la vista de template_header y template_footer. Si cambiamos el template_header y template_footer, afectará tanto a Home como a Contact.

Por ahora ya sabemos cómo crear una plantilla estructurada en CodeIgniter 4. En el próximo tutorial, veremos cómo pasar datos a estas vistas para poder personalizarlas mejor.

Hasta el próximo turorial de CodeIgniter 4.


Más información

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *