Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
Las vistas son un ingrediente clave en cualquier aplicación MVC, y las aplicaciones CodeIgniter no son diferentes. Hoy, aprenderemos qué es una vista y descubriremos cómo se pueden usar para crear una solución de plantilla para sus proyectos CodeIgniter.
La primera parte de este tutorial educará a los principiantes completos de CodeIgniter sobre qué es una vista y cómo usarlos en una aplicación típica. La segunda mitad discutirá las motivaciones para encontrar una solución de plantillas y guiará al lector a través de los pasos necesarios para crear una biblioteca de plantillas simple pero efectiva. ¿Interesado? ¡Empecemos!
¿Qué es una vista?
Las vistas son archivos especiales que se utilizan en CodeIgniter para almacenar el marcado generado por la aplicación, que generalmente consiste en HTML y etiquetas PHP simples.
"Una vista es simplemente una página web, o un fragmento de página, como un encabezado, pie de página, barra lateral, etc. De hecho, las vistas se pueden incrustar de manera flexible dentro de otras vistas (dentro de otras vistas, etc., etc.) si lo necesita. tipo de jerarquía ".
Las vistas se cargan desde los métodos del controlador, y el contenido dentro de la vista se muestra posteriormente en el navegador.
Cómo cargar una vista
Para cargar (y mostrar) una vista en CodeIgniter, usamos la biblioteca Loader integrada.
1 |
$this->load->view('hello_world', $data, true/false); |
Esta única línea de código le indicará a CodeIgniter que busque hello_world.php en la carpeta application/views, y muestre el contenido del archivo en el navegador.
Tenga en cuenta que CodeIgniter le permite excluir el sufijo .php, guardando algunas pulsaciones al escribir el nombre de archivo de la vista que desea cargar.
El segundo parámetro, $data, es opcional y toma una matriz u
objeto asociativo. Esta matriz / objeto se utiliza para pasar datos al archivo de vista, por lo que se puede usar o hacer referencia dentro de la vista.
El último parámetro opcional determina si el contenido de la vista se muestra en la ventana del navegador o si se devuelve como una cadena. El valor predeterminado de este parámetro es falso, mostrando el contenido en el navegador. Veremos más adelante en el tutorial cómo se puede usar este parámetro al crear una solución de plantillas.
Creación y visualización de una vista
Para
configurar nuestra primera vista, cree un nuevo archivo llamado
hello_world.php en application/views y escriba el siguiente HTML
simple dentro de:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>Hello World!</title> |
5 |
</head>
|
6 |
<body>
|
7 |
<p>
|
8 |
Hello world! |
9 |
</p>
|
10 |
</body>
|
11 |
</html>
|
Ahora para mostrar esta vista en el navegador, se debe cargar dentro de un método del Controlador, utilizando el método mencionado anteriormente.
Así que vamos a crear un nuevo archivo de Controlador llamado hello_world.php en application/controllers y colocar el siguiente código dentro. Desde dentro de este controlador, cargaremos la vista recién creada.
1 |
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); |
2 |
|
3 |
class Hello_world extends CI_Controller { |
4 |
|
5 |
public function index() |
6 |
{
|
7 |
$this->load->view('hello_world'); |
8 |
}
|
9 |
}
|
Si apunta su navegador a http://your-ci-install.com/index.php/ ahora se mostrará el código HTML en application/views/hello_world.php en el navegador. ¡Has cargado correctamente una vista!
Cargando vistas múltiples
Dividir una vista en varios archivos hace que su sitio web sea más fácil de mantener y reduce la posibilidad de que exista código duplicado.
Mostrar una única vista es muy bueno, pero es posible que desee dividir la salida en varios archivos distintos, como header, content y footer.
La carga de varias vistas se logra
simplemente llamando al método $this->load->view() varias
veces. Luego, CodeIgniter concatena el contenido de las vistas antes de mostrarlas en el navegador.
Cree un nuevo archivo llamado header.php en application/views y corte y pegue las primeras líneas de nuestro archivo original hello_world.php.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>Hello World!</title> |
5 |
</head>
|
6 |
<body>
|
Del mismo modo, cree otro archivo llamado footer.php en application/views y mueva las dos últimas líneas de hello_world.php.
1 |
</body>
|
2 |
</html>
|
Esto deja el archivo de vista hello_world.php que solo contiene el contenido de nuestra página.
1 |
<p>
|
2 |
Hello world! |
3 |
</p>
|
Ahora para mostrar la página de nuevo, tenemos que cargar las tres vistas (header.php, hello_world.php, footer.php), en orden, dentro de nuestro controlador.
Vuelva a abrir application/controllers/hello_world.php y agregue las nuevas llamadas $this->load->view() por encima y por debajo de la existente.
1 |
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); |
2 |
|
3 |
class Hello_world extends CI_Controller { |
4 |
|
5 |
public function index() |
6 |
{
|
7 |
$this->load->view('header'); |
8 |
$this->load->view('hello_world'); |
9 |
$this->load->view('footer'); |
10 |
}
|
11 |
}
|
Debido a que las vistas de encabezado y pie de página ahora están separadas de la vista hello_world, significa que pueden usarse junto con cualquier otra vista en el sitio web. Esto significa que el código dentro de los archivos de encabezado y pie de página no necesita ser copiado en ninguna otra vista en el proyecto que requiera este código.
Obviamente, esto es un gran beneficio ya que cualquier cambio en el HTML o el contenido de las vistas, por ejemplo, al agregar una nueva hoja de estilo al encabezado, se puede hacer en un solo archivo, ¡y no en todos los archivos!
Uso de datos del controlador en la vista
Ahora, veremos cómo se pasan los datos de los controladores, para que puedan usarse o generarse dentro de la vista.
Para lograr esto, pasaremos una matriz asociativa, $data como el segundo parámetro en la llamada $this->load->view().
Los valores de esta matriz serán accesibles dentro de la vista cargada como variables, nombradas por sus respectivas claves.
1 |
$data = array( |
2 |
|
3 |
'title' => 'Hello World!', |
4 |
'content' => 'This is the content', |
5 |
'posts' => array('Post 1', 'Post 2', 'Post 3') |
6 |
|
7 |
);
|
8 |
|
9 |
$this->load->view('hello_world', $data); |
El código anterior le dará a la variable $title el valor '¡Hola mundo!' Dentro de la vista hello_world.
Cómo usar variables en vistas
Una vez que hemos pasado nuestros datos a los archivos de vista, las variables se pueden utilizar de la forma habitual.
Normalmente, el archivo de vista usará los datos pasados para:
- Mostrar el valor de una variable
- Recorrer a través de matrices o propiedades de objetos
- Utilice instrucciones condicionales para mostrar u ocultar el marcado
Voy a repasar ejemplos rápidos de cómo hacer cada uno.
Para mostrar el contenido de una variable, use la declaración simple y familiar, echo:
1 |
<h1><?php echo $title; ?></h1> |
El bucle a través de una matriz, u objeto, es una tarea común en los archivos de vista, y se puede lograr con un bucle foreach:
1 |
<ul>
|
2 |
<?php foreach($posts as $post) { ?> |
3 |
|
4 |
<li><?php echo $post; ?></li> |
5 |
|
6 |
<?php } ?> |
7 |
</ul>
|
Se pueden usar sentencias condicionales simples en los archivos de vista para alterar levemente la salida, dependiendo de los datos pasados.
En general, usted desea mantener el uso de las declaraciones condicionales en las vistas al mínimo, ya que el uso excesivo puede llevar a archivos de vista complicados, que contienen "la lógica". Es mucho más preferible dividir la vista en diferentes archivos y decidir qué se mostrará en el controlador.
1 |
<?php if ( $logged_in ) { ?> |
2 |
|
3 |
<p><?php echo 'Welcome '.$user_name; ?></p> |
4 |
|
5 |
<?php } else { ?> |
6 |
|
7 |
<p>Please login</p> |
8 |
|
9 |
<?php } ?> |
El ejemplo anterior mostrará un mensaje de "Bienvenida" o una solicitud para que el usuario inicie sesión, dependiendo del valor de $logged_in (verdadero / falso).
Plantillas en CodeIgniter
Hemos visto cómo dividir vistas en archivos separados más pequeños puede ayudar a organizar y reducir la cantidad de archivos en sus proyectos CodeIgniter, pero ahora es necesario realizar múltiples llamadas de vista de carga en cada instancia en que se muestra una página.
Supongamos que tiene vistas de encabezado y pie de página separadas, que se utilizan para formar una plantilla. Cada instancia en el proyecto donde desea cargar y mostrar una página utilizando esta plantilla, se deben llamar tres cargas de vista. Esto no solo puede saturar sus controladores, sino que resulta en una gran cantidad de código repetido, exactamente de lo que deseamos deshacernos al dividir los archivos.
Si desea agregar un marcado adicional a esta plantilla ahora, por ejemplo, un menú de barra lateral. Podría ir en la vista de encabezado, pero es más adecuado para estar en su propia vista separada. Agregar esta nueva vista a la plantilla existente significa pasar por cada instancia de las cargas de vista y agregar otra. Esto puede causar problemas rápidamente.
Necesitamos una forma de poder incrustar archivos de visualización que muestren contenido de páginas individuales, dentro de una plantilla, sin repetir el código, y una que permita realizar modificaciones a la plantilla de manera fácil y eficiente.
Los siguientes pasos lo guiarán a través de la creación de una biblioteca CodeIgniter simple que satisfaga estas necesidades, así como:
- Hacer cumplir una estructura de directorios previsible y mantenible para sus vistas
- Permitiendo que se usen múltiples plantillas distintas
- Reducir la carga de una vista de página a solo una línea de código
Una vez que la biblioteca esté escrita y en nuestro cinturón de herramientas CodeIgniter, podremos mostrar una página de plantilla como esta:
1 |
$this->template->load('template_name', 'body_view'); |
¡Mucho más bonito!
Nuestra solución de plantilla utilizará los archivos de vista que contienen el marcado completo de una plantilla, con un marcador de posición para otro archivo de vista (con el contenido de la página) para incrustarlo.
El marcador de posición en realidad solo será una variable llamada $body. Al cargar una vista de plantilla con nuestra biblioteca, el contenido del archivo de vista de cuerpo apropiado se asignará a este $body, incrustando la vista dentro de la plantilla.
Paso 1: Configuración del Directorio
Queremos imponer un sistema de directorio razonable y predecible para que nuestros archivos de vista se alojen, de modo que nuestras vistas sean:
- Fácil de localizar
- Fácil de determinar a qué área de la aplicación pertenecen.
- Facil de mantener
Nuestro sistema de directorio también permitirá a la biblioteca determinar inteligentemente dónde buscar archivos de vista, reduciendo la cantidad de código necesario para cargar una vista de plantilla.
Cree una nueva carpeta dentro del directorio application/views y asígnele el nombre templates. Esta carpeta contendrá las diferentes vistas de plantillas.
Paso 2: Creando la biblioteca
Las Libraries en CodeIgniter son solo clases de PHP y se cargan en los Controladores al igual que las vistas.
1 |
$this->load->library('class_name'); |
Las bibliotecas personalizadas que utiliza en sus proyectos CodeIgniter se almacenan en la carpeta application/libraries. Para comenzar a escribir nuestra biblioteca de plantillas, cree un nuevo archivo en esta carpeta llamada Template.php y coloque el siguiente código en:
1 |
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); |
2 |
|
3 |
class Template |
4 |
{
|
5 |
var $ci; |
6 |
|
7 |
function __construct() |
8 |
{
|
9 |
$this->ci =& get_instance(); |
10 |
}
|
11 |
}
|
El código anterior define una nueva clase o biblioteca, llamada Template y el método __construct().
Este método asigna el súper objeto CodeIgniter a la variable de clase $ci, permitiendo que todos los recursos de CodeIgniter se usen al reemplazar $this con $this->ci en las llamadas de método habituales.
Cuando la biblioteca se carga en el marco CodeIgniter, el método __construct() se llama automáticamente.
Escribiendo el método de carga
Ahora escribiremos el método para cargar una vista de plantilla. Queremos pasar hasta tres parámetros a esta función:
- El nombre de la plantilla
- El nombre de la vista del cuerpo (opcional)
- Los datos a pasar a las vistas (opcional).
El resultado de la llamada a este método será la vista de la plantilla que se muestra en el navegador, con la vista del cuerpo incrustada, si se proporciona una.
Debajo del método __construct(), coloque el siguiente
código:
1 |
function load($tpl_view, $body_view = null, $data = null) |
2 |
{
|
3 |
if ( ! is_null( $body_view ) ) |
4 |
{
|
5 |
if ( file_exists( APPPATH.'views/'.$tpl_view.'/'.$body_view ) ) |
6 |
{
|
7 |
$body_view_path = $tpl_view.'/'.$body_view; |
8 |
}
|
9 |
else if ( file_exists( APPPATH.'views/'.$tpl_view.'/'.$body_view.'.php' ) ) |
10 |
{
|
11 |
$body_view_path = $tpl_view.'/'.$body_view.'.php'; |
12 |
}
|
13 |
else if ( file_exists( APPPATH.'views/'.$body_view ) ) |
14 |
{
|
15 |
$body_view_path = $body_view; |
16 |
}
|
17 |
else if ( file_exists( APPPATH.'views/'.$body_view.'.php' ) ) |
18 |
{
|
19 |
$body_view_path = $body_view.'.php'; |
20 |
}
|
21 |
else
|
22 |
{
|
23 |
show_error('Unable to load the requested file: ' . $tpl_name.'/'.$view_name.'.php'); |
24 |
}
|
25 |
|
26 |
$body = $this->ci->load->view($body_view_path, $data, TRUE); |
27 |
|
28 |
if ( is_null($data) ) |
29 |
{
|
30 |
$data = array('body' => $body); |
31 |
}
|
32 |
else if ( is_array($data) ) |
33 |
{
|
34 |
$data['body'] = $body; |
35 |
}
|
36 |
else if ( is_object($data) ) |
37 |
{
|
38 |
$data->body = $body; |
39 |
}
|
40 |
}
|
41 |
|
42 |
$this->ci->load->view('templates/'.$tpl_view, $data); |
43 |
}
|
El código anterior comienza verificando si el parámetro $body_view fue proporcionado al método. Esta variable mantendrá el nombre de la vista que se utilizará como cuerpo en la vista de plantilla.
1 |
if ( ! is_null( $body_view ) ) |
Si se proporciona el parámetro, se realizan una serie de comprobaciones de file_exists para intentar localizar el archivo de vista dentro de nuestro sistema de directorios.
1 |
if ( file_exists( APPPATH.'views/'.$tpl_view.'/'.$body_view ) ) |
2 |
{
|
3 |
$body_view_path = $tpl_view.'/'.$body_view; |
4 |
}
|
5 |
else if ( file_exists( APPPATH.'views/'.$tpl_view.'/'.$body_view.'.php' ) ) |
6 |
{
|
7 |
$body_view_path = $tpl_view.'/'.$body_view.'.php'; |
8 |
}
|
El código primero intenta localizar el archivo de vista dentro de una carpeta con el mismo nombre que la plantilla en la carpeta application/views.
Esto es útil si las secciones de su proyecto son drásticamente diferentes de otras y usan plantillas diferentes. En estas circunstancias, tiene sentido agrupar estos archivos de vista juntos.
Por ejemplo, muchos sitios web muestran una plantilla diferente para distintas secciones, como los blogs. En nuestro sistema, los archivos de la vista del blog se pueden colocar dentro de la carpeta application/views/blog, separándolos de las vistas principales del sitio.
Si el archivo de vista no se puede ubicar en esta carpeta, .php se agrega al final del nombre del archivo, y la verificación se realiza nuevamente. Esto es simplemente para que .php pueda ser excluido como la llamada nativa $this->load->view().
Si el archivo aún no se puede localizar, se realizan más comprobaciones de su ubicación.
1 |
else if ( file_exists( APPPATH.'views/'.$body_view ) ) |
2 |
{
|
3 |
$body_view_path = $body_view; |
4 |
}
|
5 |
else if ( file_exists( APPPATH.'views/'.$body_view.'.php' ) ) |
6 |
{
|
7 |
$body_view_path = $body_view.'.php'; |
8 |
}
|
9 |
else
|
10 |
{
|
11 |
show_error('Unable to load the requested file: ' . $tpl_name.'/'.$view_name.'.php'); |
12 |
}
|
Esta vez, el código verifica si el archivo de vista está ubicado dentro de la carpeta application/views, y una vez más, si no se puede encontrar, agrega .php y comprueba una vez más.
Si el archivo se encuentra en uno de estos lugares, la ruta se asigna a $body_view_path, de lo contrario, se genera un mensaje de error utilizando la función show_error() incorporada en CodeIgniter y el script finaliza.
Si el archivo de vista del cuerpo se localizó correctamente, el contenido se asigna a la variable $body.
1 |
$body = $this->ci->load->view($body_view_path, $data, TRUE); |
Pasamos el parámetro $data (nulo si no se proporciona) a la llamada de carga de vista, y configuramos el tercer parámetro en true (verdadero) para devolver la salida de la vista como una cadena.
Ahora agregamos esta variable $body a la lista de datos en $data para que se pueda incrustar en la vista de plantilla cuando se cargue.
1 |
if ( is_null($data) ) |
2 |
{
|
3 |
$data = array('body' => $body); |
4 |
}
|
5 |
else if ( is_array($data) ) |
6 |
{
|
7 |
$data['body'] = $body; |
8 |
}
|
9 |
else if ( is_object($data) ) |
10 |
{
|
11 |
$data->body = $body; |
12 |
}
|
Si $data no se suministró a la llamada a load(), $data se asigna a una matriz que contiene $body debajo de key body. Si se proporcionó el parámetro, $body se agrega a la lista asignándola a una clave de matriz o propiedad de objeto, ambas también denominadas body.
La variable $body ahora se puede usar en los archivos de vista de plantilla como un marcador de posición para vistas incrustadas.
La última línea de nuestro método carga el archivo de vista de plantilla desde la carpeta application/views/templates, y pasa la variable $data en el segundo
parámetro.
1 |
$this->ci->load->view('templates/'.$tpl_name, $data); |
¡Y eso es! La biblioteca ahora se puede poner en uso.
Usando la biblioteca
Para comenzar a utilizar nuestra biblioteca, creemos una vista de plantilla, denominada default.php en application/views/templates, y coloquemos el siguiente HTML / PHP dentro:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
<head>
|
5 |
<title><?php echo $title; ?></title> |
6 |
</head>
|
7 |
|
8 |
<body>
|
9 |
|
10 |
<h1>Default template</h1> |
11 |
|
12 |
<div class="wrapper"> |
13 |
|
14 |
<?php echo $body; ?> |
15 |
|
16 |
</div>
|
17 |
|
18 |
</body>
|
19 |
|
20 |
</html>
|
En esta plantilla, hacemos referencia a dos variables, $title y $body.
Recuerde que en nuestros archivos de plantilla, $body sirve como un marcador de posición para una vista incrustada.
Ahora haremos otra vista para incrustarla dentro de esta plantilla. Cree un nuevo archivo llamado content.php en application/views/ y coloque este HTML simple dentro
de:
1 |
<p>
|
2 |
Hello world! |
3 |
</p>
|
Ahora estamos listos para cargar la vista de la página de la plantilla desde un controlador.
Dentro de cualquier método de controlador, coloque el siguiente código para mostrar la vista content, dentro de la plantilla default.
1 |
$data = array( |
2 |
|
3 |
'title' => 'Title goes here', |
4 |
|
5 |
);
|
6 |
|
7 |
$this->load->library('template'); |
8 |
$this->template->load('default', 'content', $data); |
Nota: la biblioteca debe estar cargada antes de poder llamar al método load. Para ahorrar la carga de la biblioteca cada vez que se necesite visualizar una vista de plantilla,
autoload la clase agregándola a la matriz de bibliotecas en application/config/autoload.php.
Si en lugar de un archivo de vista, desea que una cadena se incruste en la plantilla, simplemente asigne la cadena a la matriz $data usando body de la clave y pase null como el segundo parámetro en la llamada de carga.
1 |
$data = array( |
2 |
|
3 |
'title' => 'Title goes here', |
4 |
'body' => 'The string to be embedded here!' |
5 |
|
6 |
);
|
7 |
|
8 |
$this->template->load('default', null, $data); |
Consejo rapido
Descubrí que agrupar los archivos de vista en carpetas por el controlador, e incluso el método al que pertenecen, realmente ayuda a mantener mis vistas organizadas y fáciles de localizar.
Organizar sus vistas de esta manera resulta en la estructura del directorio siguiendo de cerca el esquema de URL del controller/method.
Por ejemplo, digamos que su proyecto tiene un controlador llamado Members, que contiene la list.de métodos.
Una ubicación adecuada para el archivo de vista list sería en application/views/members, o application/views/members/list, si este método carga varias vistas.
Esta vista podría luego incrustarse en una plantilla usando nuestra biblioteca con el siguiente código:
1 |
$this->template->load('template_name', 'members/list'); |
Conclusión
La solución de plantillas analizada en este tutorial es solo una de las muchas maneras diferentes de lograr la creación de plantillas en CodeIgniter.
Es de esperar que ahora sepa qué son las vistas y cómo usarlas de manera efectiva y eficiente en sus proyectos CodeIgniter.
La solución de plantillas analizada en este tutorial es solo una de las muchas maneras diferentes de lograr la creación de plantillas en CodeIgniter. Hay varios enfoques diferentes, y los aliento, lector, a que investiguen los otros métodos y determinen cuál se ajusta mejor a sus proyectos.
Si tiene algún comentario o pregunta sobre el tutorial, o alguna información sobre diferentes soluciones de plantillas, ¡deje un comentario a continuación! Gracias por leer.
By
