Blog and Web » Code Igniter http://blogandweb.com Recursos para Blog y Web Tue, 08 Nov 2011 23:09:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Code Igniter: Trabajando con Vistas. http://blogandweb.com/php/code-igniter-vistas/ http://blogandweb.com/php/code-igniter-vistas/#comments Thu, 22 Jul 2010 02:30:17 +0000 Jesus Yepes http://blogandweb.com/?p=2796 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.

]]> http://blogandweb.com/php/code-igniter-vistas/feed/ 9 Introducción a Code Igniter http://blogandweb.com/php/introduccion-a-code-igniter-i/ http://blogandweb.com/php/introduccion-a-code-igniter-i/#comments Fri, 09 Jul 2010 03:18:47 +0000 Jesus Yepes http://blogandweb.com/?p=2780 introduccion-code-igniter

Este artículo es una excelente colaboración de Jesus Yepes, a quien puedes leer en su blog. Recuerda que la invitación esta abierta para publicar tus artículos.

En este pequeño post voy a hacer un breve repaso sobre las razones más importantes de usar un Framework para php, para realizar nuestros desarrollos de forma más rápida y eficiente (y por qué está de moda, todo hay que decirlo).

Lo primero que deberías hacer, es ver en qué posición estás. Un framework está pensado para gente que tiene un dominio, al menos medio, del lenguaje de programación en el que está hecho (en este caso PHP) y que quieren realizar sus proyectos de una forma más ordenada rápida. Si estás empezando con php este NO es el camino que debes seguir. Deberías empezar aprendiendo PHP “a pelo” para después elegir el mejor framework para tu caso.También es de agradecer estar familiarizado con el modelo de programación orientada a objetos en PHP.

¿Por qué Code Igniter?

Cuando me picó el gusanillo de los frameworks en PHP, estuve buscando opiniones sobre cual usar. Obviamente, cada uno tiene sus preferencias, pero en algo que todos coinciden es que Code Igniter tiene una gran documentación y comunidad, requisito indispensable si estás empezando en este mundillo, ya que tarde o temprano tendremos alguna duda y a alguien le tendremos que preguntar… ¿no?

Además, Code Igniter es altamente extensible, es rápido, soporta PHP 4 (en la última versión estable, 1.7.2). Las futuras versiones no soportarán PHP 4, requerirán PHP 5 para funcionar.

Code Igniter utiliza MVC, un estilo de programación en el que la aplicación está separada entres capas:

  • Modelo: Es el que procesa / obtiene los datos. Generalmente, lo usaremos sobre todo para gestionar la entrada y salida de los datos en nuestra base de datos.
  • Vista: Llamada desde el controlador, es la que forma los datos para representarlos en pantalla. En Code Igniter ( y cualquier framework para web) es la que montará todo el código html).
  • Controlador: Como su nombre indica, es el que “controla” que pasa en nuestra aplicación.Básicamente, y a grandes rasgos, un controlador recibe una petición, obtiene datos de un modelo, los procesa, y se los pasa a la vista para que los muestre de forma adecuada.

Además, en Code Igniter tenemos helpers, hooks y librerías, pero de esto ya hablaremos más adelante. A grandes rasgos, los helpers son un conjunto de funciones agrupadas por funcionalidad, es decir, tenemos un helper para crear formularios, tenemos un helper para trabajar con fechas, etc. Las librerías, son clases. Tenemos librerías para enviar emails, tenemos librerías para validar los datos que nos llegan de un formulario, etc.

Hola Mundo!

Nota: Es necesario tener un servidor web que soporte php, instalado, configurado y funcionando. Para las pruebas, usaremos una máquina local con MAMP corriendo en MacOs.Puedes usar Wamp en windows, Mamp en mac o Mamp en linux, o puedes montar Apache +PHP + MySQL a mano.

Empezamos con una aplicación de ejemplo, dejémonos de rollos. Vamos a Codeigniter.com y nos descargamos la última versión (1.7.2 a la hora de escribir esto). Una vez la descargamos, veremos que tenemos dos directorios: System y user_guide. La carpeta user_guide es la documentación que podemos encontrar en su web en formato HTML,no es necesario para que nuestra aplicación funcione.

La descargamos y descomprimimos en un directorio de accesible por nuestro servidor web.Tendremos el directorio system (que contiene el framework en sí), el directorio application que veis (está dentro de system, solo que yo lo muevo fuera para poder tenerlo todo más separado) y el archivo index.php, que es el encargado de poner en marcha todo el framework. El directorio user_guide y el archivo license los he borrado, por que no son necesarios para el uso del framework.

code-igniter-directorios

Lo primero que debemos hacer es editar el fichero application/config/config.php y poner los datos de nuestro servidor, en el primero parámetro, $config['base_url']=http://example.com/; cambiando example.com por nuestra URL, en mi caso: http://localhost/Sites/ci-baw/

Nota: Aseguraros de terminar siempre la url con: /

Ahora, accedemos a dicho directorio mediante nuestro explorador favorito (ni que decir, que para el desarrollo web, Firefox + Firebug)

code-igniter-inicio

Podemos ver que todo ha salido bien. Nos sale una página por defecto, en la que nos dice que ha cargado la vista welcome_message.php y que corresponde al controlador controllers/welcome.php.

Bueno, vamos a entrar a ver el código, y a entender por que ha ejecutado el controlador welcome y como se ha cargado la vista.

Abrimos el archivo applicattion/config/routes.php:

code-igniter-welcome

Veremos las siguientes líneas de código:

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

Eso le está diciendo a Code Igniter que el controlador, si no especificamos ninguno,será “welcome”. El parámetro scaffolding_trigger no lo veremos de momento.

Ahora, abrimos el fichero application/controllers/welcome.php.

<?php
class Welcome extends Controller {
function Welcome()
{
parent::Controller();
}

function index()
{
$this->load->view('welcome_message');
}
}

Vamos a ver, el controlador se llama siempre igual que el nombre del fichero, pero con la primera en mayúscula, y debe extender siempre la clase Controller. Si declaramos un constructor (por que lo necesitemos), en PHP 4 function Welcome(), en PHP 5 function__construct(), lo primero que debemos hacer siempre dentro de dicho constructor es llamar al constructor de la clase padre, en este caso, parant::Controller(). El constructor lo definiremos cuando necesitemos asignar valores globales para toda la clase, o cargar librerías o helpers que los utilizaremos en toda la clase.

El método index, es el que se ejecuta si no hemos dicho lo contrario. Este método, lo único que hace es cargar una vista, ‘welcome_message’. Si abrimos el fichero application/views/welcome_message.php veremos que contiene el código que genera la página que hemos visto en nuestro explorador.

Ahora, a modo de ejemplo y para terminar, vamos a crear una función dentro del controlador Welcome.

function hola_mundo()
{
echo 'Hola Mundo desde Code Igniter';
}

Visitamos, dicha página con nuestro navegador, en mi caso vamos a:

http://localhost/Sites/ci-baw/index.php/welcome/hola_mundo

Nota: Ya veremos pronto como quitar el index.php de ahí en medio.

Y hasta aquí esta pequeña introducción, quizá demasiado abstracta, pero necesaria cuando se ve algo nuevo.

Espero vuestros comentarios y sugerencias para los siguientes posts sobre Code Igniter.

]]> http://blogandweb.com/php/introduccion-a-code-igniter-i/feed/ 15