Repaso 4: Mejorar el sitio por medio de una vista utilizada como plantilla

Nos hemos detenido para hacer una pausa que sirva de repaso para lo que llevamos aprendido en el Manual de CodeIgniter. En pasados artículos hicimos una aplicación básica para asimilar conceptos nuevos como los controladores, vistas o modelos, que esperamos haya podido entenderse perfectamente.

Llevamos tres entregas del mencionado repaso, que comenzó en el artículo Tutorial para hacer una aplicación de prueba en CodeIgniter y aunque podríamos decir que hemos creado una aplicación suficiente para revisar esos conceptos nuevos, lógicamente, aun tenemos muchas otras cosas que aprender. En este sentido y motivados por uno de los comentarios de usuarios enviados en los artículos, vamos a mostrar la manera de crear un sistema sencillo para implementar lo que llamaríamos una plantilla o layout para el sitio.

La idea es crear una vista que sirva para definir una estructura de página que sea común para todo el sitio y claro, que se pueda personalizar para mostrar datos distintos en cada página. La estructura del sitio hará de plantilla y marcará el diseño de la página.

Es de suponer que nuestro propósito no será nuevo para las personas que puedan leer este manual, puesto que el trabajo con plantillas es algo que casi todos los desarrolladores hemos realizado en algún momento. En este artículo lo que haremos será poner en marcha una posibilidad de esquema de trabajo cuando queremos crear plantillas, que hemos visto en el artículo anterior, en una aplicación web desarrollada con CodeIgniter.

Adaptar nuestra aplicación de artículos para tener una plantilla

Ahora, si hemos seguido las explicaciones de los anteriores repasos de CodeIgniter, podremos ver cuáles son los cambios a realizar para adaptar el sitio a la estructura de vistas propuesta. Para realizar esos cambios hemos decidido crear nuevos controladores y vistas, para no machacar el trabajo realizado en los anteriores artículos. Veamos pues, archivo a archivo, cuáles son los cambios que tenemos que realizar en el código.

Nuevo controlador Articulos_plantilla

Comenzamos reformulando el antiguo controlador que habíamos llamado "Articulos". Ahora lo llamamos "Articulos_plantilla" y es todo igual, con la particularidad que vamos a tener que realizar invocaciones a más de una vista.

Por un lado tendremos la función index() (cuando se accede al controlador si especificar qué artículo mostrar, que presentaba un listado de artículos) y por otro lado la función muestra() (que recibe el identificador del artículo a mostrar).

En la función index() ahora tendremos invocación a dos vistas. Por un lado está la vista "listado_articulos", que sirve para generar el cuerpo de la página. Esta vista no se imprime directamente en pantalla al procesarse cuando se carga, sino que se devuelve y se guarda como dato para enviar a la vista principal. Por otro lado tendremos la vista "plantilla_articulo", que contiene el layout general del sitio, a la que enviamos diversos datos incluido el cuerpo de la página generado con la vista anterior.

En la función muestra() tendremos también dos vistas. Por un lado una vista llamada "cuerpo_articulo", que tampoco se imprime, sino que simplemente guardamos su salida en una variable. Por otro lado tenemos la vista "plantilla_articulo", que contiene el layout del sitio, igual que en la función index().

class Articulos_plantilla extends Controller {
   function index(){
      
      //cargo el helper de url, con funciones para trabajo con URL del sitio
      $this->load->helper('url');
      
      //cargo el modelo de artículos
      $this->load->model('Articulo_model');
      
      //pido los ultimos artículos al modelo
      $ultimosArticulos = $this->Articulo_model->dame_ultimos_articulos();
      
      //creo el array con datos de configuración para la vista
      $datos_vista = array('rs_articulos' => $ultimosArticulos);
      
      //cargo la vista pasando los datos de configuacion
      $datos_plantilla["cuerpo"] = $this->load->view('listado_articulos', $datos_vista, true);
      $datos_plantilla["titulo"] = "Portada de la aplicación de artículos";
      
      $this->load->view('plantilla_articulo', $datos_plantilla);
   }
   
   function muestra($id){
      //cargo el helper de url, con funciones para trabajo con URL del sitio
      $this->load->helper('url');
      
      //cargo el modelo de artículos
      $this->load->model('Articulo_model');
      
      //pido al modelo el artículo que se desea ver
      $arrayArticulo = $this->Articulo_model->dame_articulo($id);
      
      //compruebo si he recibido un artículo
      if (!$arrayArticulo){
         //no he recibido ningún artículo
         //voy a lanzar un error 404 de página no encontrada
         show_404();
      }else{
         //he encontrado el artículo
         //muestro la vista de la página de mostrar un artículo pasando los datos del array del artículo
         $datos_plantilla["cuerpo"] = $this->load->view('cuerpo_articulo', $arrayArticulo, true);
         $datos_plantilla["titulo"] = $arrayArticulo["titulo"];
         
         $this->load->view('plantilla_articulo', $datos_plantilla);
      }
   }
}
?>

Ahora podríamos ver el código de las distintas que utilizamos en este controlador.

Vista para crear el layout: plantilla_articulo

Esta es la vista principal del sitio, que contiene el layout o plantilla del sitio web. Como vemos, tenemos todas las etiquetas para la página básica (HTML, HEAD, TITLE, BODY, etc.) y algunas capas para crear elementos comunes a todas las páginas, como la cabecera o el pie.

<html>
<head>
<title><?=$titulo?></title>
</head>
<body>
   <div style="background-color: #ffffcc; padding: 10px 20px; font-size:200%;">
      Cabecera aplicación de artículos
   </div>
   <div style="padding: 15px;">
      <?=$cuerpo?>
   </div>
   <div style="background-color: #ccc; padding: 10px 20px; font-size:80%;">
      Pié de página | enlace | enlace de pie 2
   </div>
</body>
</html>

Vista listado_articulos

Esta plantilla sirve para mostrar el listado de los artículos que tenemos en la base de datos. La plantilla simplemente la utilizamos para generar el cuerpo de la portada de la aplicación de artículos. Sólo contiene código que se colocará en el layout general, en la parte destinada al cuerpo de página. Por ello podemos ver que hemos eliminado todas las etiquetas HTML que sirven para generar el layout general de sitio, puesto que estarán en la plantilla principal, que hemos visto antes.

<h1>Listado de artículos</h1>
<p>Estos son los últimos artículos publicados.</p>
<?php
while ($fila = mysql_fetch_array($rs_articulos)){
   echo '<p>';
   echo '<a href="' . site_url('/articulos_plantilla/muestra/' . $fila['id']) . '">' . $fila['titulo'] . '</a>';
   echo '</p>';
}
?>

Vista cuerpo_articulo

Esta vista la invocamos desde la función muestra() y es para mostrar el cuerpo de un artículo cualquiera del sitio. Este cuerpo de artículo luego se enviará por el controlador para la vista principal, para que el artículo se muestre dentro del layout de página del sitio.

<h1><?=$titulo?></h1>
<blockquote><b><?=$titulo?></b></blockquote>
<?=nl2br($cuerpo)?>
<p><a href="<?=site_url("/articulos_plantilla/")?>">Volver</a></p>

Conclusión al repaso 4 de la aplicación de artículos en CodeIgniter

Con las modificaciones que hemos visto tenemos ya creada nuestra aplicación de artículos pero con un layout específico, que se repetirá en todas las páginas del sitio. En total hemos tenido que crear un nuevo controlador, adaptando el anterior, y tres vistas nuevas, basadas también en las que teníamos antes.

Podríamos poner en marcha este nuevo ejemplo accediendo al controlador creado en esta ocasión. Como el controlador es nuevo, tenemos que acceder con una URL que indique su nombre. Algo como esto:

http://localhost/index.php/articulos_plantilla