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
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
<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