CodeIgniter 4 – Crear plantilla estructurada

Publicada el por

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


Artículos relacionados: