Blogger • PHP

Code Igniter: Trabajando con Vistas.

introduccion-code-igniter

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.

code-igniter-hola-mundo

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…

code-igniter-hola-mundo-2

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.

Te podría interesar

Deja un comentario

18 Comentarios

  • Me gusto mucho este tutorial. Estare pendiente a proximas publicaciones.

    Muchas gracias.

    Depronto me confundi un poco en este ultimo codigo, pero era que no habia entendido lo de dividir la vista en tres partes.

    Gracias.

  • yo si me he confundido llegue hasta que empezamos a anidar las vistas si me los desglosas mas por favor!!
    gracias

  • Comparto la idea, más organización desde la vista!!! excelente información.. espero por más!!

  • cuando reviso mi controlador welcome.php el que llega con el paquete CodeIgniter, aparece asi:

    class nomclase extends CI_Controller {

    entonces eso quiere decir que debo declararlo como CI_Controller o como tu ejemplo controller

    ??
    gracias

  • Hola mira al parecer mi version de CodeIgniter esta muy actualizada con respecto al que usaste en el tutorial.

    Bueno la solucion que aplique fue seguir el modelo que me llego en mi controlador welcome.php . Y todo corrio de maravilla.

    Bueno dejo este comentario para futuras dudas. Suerte!

  • La ultima version de codeigniter hay que utilizar CI_Controler y CI_Model

    class personModel extends CI_Model
    class Person extends CI_Controller

    y asi si utilizas el constructor de esta forma
    function Person(){
    parent::CI_Model();
    }
    aunque es recomendable asi

    function __construct()
    {
    parent::__construct();
    }

  • Es un excelente tutorial … la verdad estoy comenzando con los framework y me esta ayudando demasiado … gracias!

  • Muchas gracias Jesús,

    ¿cómo añadirías a las vistas, los siguientes links?
    inicio
    Una página
    Otra página

    Es decir, cómo podemos hacer que sólamente cambie el cuerpo al clicar en cada enlace, y se mantenga siempre la cabecera y el pie?

    Espero tu pronta respuesta.

    Un saludo,

  • Gracias muy útil, en especial lo de llamar a otras vistas, soy nuevo con php y cakephp, pero me haz ayudado. Gracias 🙂

  • tengo el siguiente problema quiero enviar el resultado de dos consultas en una sola vista:

    function MostrarEESS(){
    $data1[‘eess’]=$this->mostrar_model->Mostrar_EESS();
    $data2[‘usuarios’]=$this->mostrar_model->Mostrar_Usuarios();

    $this->load->view(‘front_end/RegistroUsuario’,$data1,$data2);

    }