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

  • Por
  • PHP
Aplicamos una vista para hacer la plantilla general del sitio de artículos, para que todas las páginas se muestren con un layout propio para toda la web.
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);
      }
   }
}
?>

Nota: En el código anterior del controlador hay que fijarse que cuando se invoca a la vista 'listado_articulos' desde el método index(), en el método load() enviamos como tercer parámetro un valor true. Esto es para que esa vista no se muestre en la página una vez procesada, sino que se devuelva por el método load() y se asigne así a una variable. Esto mismo se hace también en la llamada para cargar la vista 'cuerpo_articulo' desde el método muestra().

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

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Maria Fernanda

08/10/2010
mejorar el sitio por medio de una vista utilizado como plantilla
Como ya os hemos comentado anteriormente, a este grupo de diseñadores web llamado (www.webcad.nicknamenoelle.com.ar) nos resultan muy útiles vuestros tutoriales y/o artículos sobre estilos Css, PHP, Javasscript y otros temas relacionados. Les agradecemos también los 3 días de tutoriales PHP.

pablo

11/5/2011
excelente tutorial
muy buen articulo como siempre,gran ayuda

kreke

14/3/2012
sois la leche
Hacéis un trabajo increíble, e invalorable.
Gracias!

Javier Villarreal

21/6/2013
Excelente Tutorial
Excelente tutorial, he programado en php pero queria aprender MVC y codeigniter debido a mi trabajo y lo estoy entediendo de maravilla, excelente manera de explicar muy didactica gracias por su esfuerzo en compartir el conocimiento saludos y sigan adelante

xgrager

26/9/2013
Problema con variables en vistas anidadas
Hola.
Estoy desarrollando un sitio con la estructura que proponéis con plantillas.
Mi problema es que si paso datos en una variable a una sub-vista como habéis hecho vosotros en las sub-vistas lista_articulos y cuerpo_artículo, php no reconoce las variables servidas desde el controlador al renderizar la página.

saludos.

Nelson

21/11/2013
duda de formulario
tengo un problema en el formulario de muestra en la ventana de controller y es que me reclama que &quot; Undefined index: titulo&quot;<br />
siendo que yo hago un var_dump($arrayArticulo); y me imprime<br />
array(1) { [0]=&gt; object(stdClass)#17 (1) { [&quot;TITULO&quot;]=&gt; string(45) &quot;Suministro y Calib. Set Pesas 1 mg a 10 kg&quot; } }<br />
<br />
si me pudieran ayudar gracias.<br />
<br />
pd muy buen tutorial.