Blog and Web

Code Igniter: Trabajando con Vistas.

Este artículo es una excelente colaboración de Jesus Yepes, segundo de la serie de artículos de introducción a Code Igniter.

Bienvenidos a la segunda parte de nuestra introducción a Code Igniter. En la primera parte, vimos muy por encima qué es Code Igniter y cómo usarlo, cuales son sus características y modo de uso, qué es MVC, cuales son los principales ficheros de Code Igniter para su configuración. En esta segunda parte, expondremos un par de ejemplos sobre cómo usar las vistas, cuándo, y cómo podemos hacer que el desarrollo de nuestra aplicación web sea más rápido gracias a estas.

Empezamos, ¿qué es una vista?

Las vistas se almacenarán en nuestro directorio /application/views de nuestro servidor local. Las vistas son, básicamente, código html. Vamos a hacer un ejemplo, que simplemente llame a la vista blogandweb.php y muestre su contenido, que será simplemente "Buenas, usuarios de blog and web!".

Varias notas: nos vamos a crear un controlador, que será el que usemos por defecto, y lo llamaremos "controlador" (Revisa el primer capítulo si tienes dudas, de todas formas, los controladores van en application/controllers/). El controller, Controlador.php.

class Controlador extends Controller {

function __construct()
{
parent::Controller();
}
function index()
{
$this->load->view('blogandweb');
}
}

La vista, blogandweb.php

<html>
<head>
<title>Bienvenidos a blog and web!</title>
</head>
<body>

<h1>Bienvenidos a blog and web!</h1>

</body>
</html>

Una vez creados, nos iremos a application/config/routes.php, y estableceremos el controlador por defecto a “controlador”


$route['default_controller'] = "controlador";
$route['scaffolding_trigger'] = "";

Tal y como dijimos en el capítulo uno, cuando alguien entre directamente a nuestra web y no pida explícitamente qué controlador y qué método quiere ver, por defecto usaremos el controlador “controlador” y el método por defecto (vacío), es decir, la función index() de ese controlador.

El ejemplo no es muy útil, pero es un comienzo…

Pasándole variables a nuestra vista

Vale, hagamos que la vista sea algo más dinámica. Digamos que tenemos el nombre del usuario en una variable, y que queremos mostrarlo en nuestra página. Para ello, tenemos el segundo parámetro de $this->load->view(). Un array. Todos los items de ese array, estarán disponibles en la vista, de forma que los podremos usar dónde queramos. El nombre de la variable, será el índice del array. Supongamos el siguiente código en el método index del controlador.


function index()
{
$data = array(
'usuario' => 'Jhon Locke',
'mensaje' => 'Has encontrado la escotilla!'
);
$this->load->view('blogandweb', $data);
}

y el siguiente para la vista blogandweb.php

<html>
<head>
<title>Bienvenidos a blog and web!</title>
</head>
<body>

<h1>Buenas <?php echo $usuario; ?>, Bienvenidos a blog and web!</h1>
<p><?php echo $mensaje; ?></p>

</body>
</html>

Obtendríamos esto…

Si por ejemplo, estuviéramos desarrollando un blog, pasaríamos a la vista todos los posts, y esta los recorrería y los mostraría. Pero dejemos este tipo de ejemplos para posteriores capítulos.

Llamando a vistas dentro de las vistas

Esto es una forma de dejar todo el código mucho mas claro. Vamos a usar una forma similar a la que usa WordPress, es decir, WordPress tiene el “gordo” de la página, y desde este fichero, llama a otro que genera la cabecera, a otro que genera el sidebar, y a otro que genera el footer. Lo juntamos todo, y tenemos nuestra web. Vamos a hacer que nuestra vista tenga un poco.

Nota: No vamos a aplicar ningún estilo, no pretendo que la página luzca bien, pretendo que se entienda qué son y que ventajas tienen las vistas en Code Igniter.

<html>
<head>
<title>Bienvenidos a blog and web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

</head>
<body>

<ul id="menu">
<a href="#">inicio</a>
<a href="#">Una página</a>
<a href="#">Otra página</a>
</ul>


<h1>Buenas <?php echo $usuario; ?>, Bienvenidos a blog and web!</h1>
<p><?php echo $mensaje; ?></p>

<div id="lateral">
<p>Estamos en el lateral.</p>
<p>Contenido de prueba</p>
</div>


<div id="footer">
<p>Esto es el footer. Información de copyright y esas cosas</p>
</div>

</body>
</html>

Así la página tiene algo más de chicha. Tiene un menú en la cabecera, el contenido, un sidebar, y el pié de página.

Dinámico y fácil de mantener con Code Igniter

Vamos a partir nuestro html en varias partes, de forma que podamos reutilizarlo en todas las páginas que vayamos creando. Por un lado, crearemos una vista para la cabecera, que será la encargada de mostrar la cabecera en sí, la apertura del documento html, título de la página y etiquetas meta. Por otro lado, tendremos el sidebar, que será el encargado de mostrar todo lo que saldrá en el lateral (imaginad un blog, pues las categorías, comentarios recientes, etc, etc.). Por último, el footer, que mostrará el pié de la página y el cierre del documento html. header.php

<html>
<head>
<title>Bienvenidos a blog and web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

</head>
<body>

<ul id="menu">
<a href="#">inicio</a>
<a href="#">Una página</a>
<a href="#">Otra página</a>
</ul>

sidebar.php

<div id="lateral">
<p>Estamos en el lateral.</p>
<p>Contenido de prueba</p>
</div>

footer.php

<div id="footer">
<p>Esto es el footer. Información de copyright y esas cosas</p>
</div>

</body>
</html>

y la vista principal (blogandweb.php), quedaría así:

<?php $this->load->view('header'); ?>

<h1>Buenas <?php echo $usuario; ?>, Bienvenidos a blog and web!</h1>
<p><?php echo $mensaje; ?></p>

<?php $this->load->view('sidebar'); ?>

<?php $this->load->view('footer'); ?>

Hemos llamado a otras vistas desde nuestra vista principal. También podríamos, desde el controlador, llamar a todas las vistas necesarias. Esto es indiferente, pero a mi me gusta más hacerlo como he explicado ya que me parece más claro y rápido que llamando a todas las vistas desde el controlador.

El tercer parámetro de la llamada a la vista, ese gran desconocido

Hemos visto que la llamada a una vista con $this->load->view(); acepta dos parámetros. La vista que queremos cargar y un array que serán convertidas a variables y estarán disponibles en la vista. Pues bien, hay un tercero que por defecto es false, que indica si queremos devolver el código que genera la vista para almacenarlo en una variable y después hacer con él lo que creamos necesario. Por ejemplo:

$html = $this->load->view('blogandweb', $data, TRUE);

La variable $html tendría todo el código fuente, lo que hagamos con ella ya es otra cosa. Pues bien, hasta aquí el capítulo de las vistas en Code Igniter. Espero que os haya sido ameno y que os sirva de algo. Como siempre, espero vuestros comentarios con dudas, sugerencias, lo que sea.