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
Muy bueno! Estoy deseando la siguiente entrega.
Salu2!
@Datzerox gracias por el comentario
Excelente tutorial! un saludo!
Excelente tema amigo!!!
espero que sigas con el tutorial.
Un abrazo!!!
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
Grande master ! yo pienso que es mas claro tambien hacerlo desde la vista mismo y no desde la controller.
Abrazo !
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 muchas gracias
Esto se puede resumir usando con fichero con layouts
muchas gracias!!!1
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);
}