Tutorial Yii Framework (Parte 3)

Antes de comenzar, recapitulemos lo que ya deben conocer y los archivos que necesitan:

---

1.- En su carpeta www o htdocs deben tener el framework yii en esta ruta:

/*Mac*/

Applications/MAMP/htdocs/yii/framework/

/*Pc*/

ArchivosdePrograma/WAMP/www/yii/framework/

2.- En su carpeta www o htdocs deben tener la carpeta tutorial con la webapp generada por la herramienta yiic: (aprendimos a generarla en la parte 2 del tutorial)

/*Mac*/

Applications/MAMP/htdocs/tutorial/

/*Pc*/

ArchivosdePrograma/WAMP/www/tutorial/

Si tuvieron problemas para generar esta carpeta y la webapp con la herramienta acá la pongo en un zip, solo tienen que descargarlo y descomprimirlo en la ruta mencionada. Download Zip

Teniendo el framework y la aplicación comencemos, primero nos vendría bien algo de teoría, para comprender el funcionamiento de Yii Framework, tenemos que entender como funciona el modelo MVC (Modelo Vista Controlador).

¿MVC?

---

Según Wikipedia el Modelo Vista Controlador es es un patrón de arquitectura de software que separa los datos de una aplicación, la interfaz de usuario, y la lógica de control en tres componentes distintos. El patrón de llamada y retorno MVC, se ve frecuentemente en aplicaciones web, donde la vista es la página HTML y el código que provee de datos dinámicos a la página. El modelo es el Sistema de Gestión de Base de Datos y la Lógica de negocio, y el controlador es el responsable de recibir los eventos de entrada desde la vista.

Existen muchos sitios Web en los cuales se nos da una descripción detallada del modelo, inclusive hay algunos donde se explican las variantes que puede tener, para fines prácticos de este tutorial solo vamos a describir sus partes ya que con el uso de Yii iremos clarificando mas el MVC.

Obviamente el modelo se compone de 3 partes:

Modelo.- Volvamos a Wikipedia,  “Esta es la representación específica de la información con la cual el sistema opera. En resumen, el modelo se limita a lo relativo de la vista y su controlador facilitando las presentaciones visuales complejas. El sistema también puede operar con más datos no relativos a la presentación, haciendo uso integrado de otras lógicas de negocio y de datos afines con el sistema modelado”,  de tal manera que el modelo se encarga de la parte de los datos, mas claro: de la base de datos y la relación de la información con la vista y el controlador. Todas las operaciones CRUD (Create, Read, Update, Delete) se harán en este componente y después se pasaran al controlador y este a su vez a la vista para ser presentada al usuario.

Vista.- “Este presenta el modelo en un formato adecuado para interactuar, usualmente la interfaz de usuario.” La vista es en si la pagina Web que el usuario ve y con la cual interactua, la Vista recibe estas interacciones y las pasa al controlador el cual se encarga de procesarlas y de crear mas vistas para el cliente o bien de apoyarse con el modelo para así consultar la base de datos y regresar esta información hacia la vista.

Controlador.- “Este responde a eventos, usualmente acciones del usuario, e invoca peticiones al modelo y, probablemente, a la vista.” El controlador es la parte que une todo, por medio de la vista se invocan acciones o métodos del controlador y este a su vez puede usar librerías, helpers, funciones, usar los modelos, todo para generar una respuesta al usuario por medio de una vista.

El siguiente gráfico es un ejemplo del funcionamiento de Yii a nivel código, ingresemos a la siguiente URL en nuestro entorno: http://localhost/tutorial/index.php?r=site/index

1. Un usuario solicita la pagina http://localhost/tutorial/index.php?r=site/index el servidor maneja la petición primero con el archivo bootstrap index.php. (mas sobre bootstrap aquí)
2. El archivo bootstrap crea una instancia de la aplicación y la inicializa
3. La aplicación obtiene información detallada del usuario del componente de Yii “request”
4. La aplicación determina el controlador y la acción a ejecutar con ayuda del componente de Yii “urlManager”. En este ejemplo el controlador es “site” y la acción es “index” la cual es una función que corresponde a “actionIndex” dentro de la clase SiteController del archivo SiteController.php de la carpeta controllers.

   
   class SiteController extends Controller
   {/**
   * This is the default 'index' action that is invoked
   * when an action is not explicitly requested by users.
   */
   public function actionIndex()
   {
   // renders the view file 'protected/views/site/index.php'
   // using the default layout 'protected/views/layouts/main.php'
   $this->render('index');
   }}
   

5. La aplicación crea una instancia de la clase SiteController y determina que la acción index se refiere al método llamado actionIndex en la clase. Entonce crea y ejecuta el método.
6. En caso de que se requieran datos del modelo de la base de datos es en este punto donde se consultan y se regresan al controlador.
7. La acción Index por medio de su método dentro de la clase SiteController hace un “render” de la vista llamada index que corresponde al controlador y es en este punto donde se puede pasar a la vista un objeto del modelo. La función $this->render('index'); se encarga de hacerlo
8. La vista lee y despliega la información al usuario. La vista se encuentra dentro de la carpeta “views” y a su ves existe una carpeta para cada controlador, en este caso nuestro controlador es SiteController asi que existe una carpeta dentro de views llamada site la cual a su vez tiene un archivo por cada método, en este ejemplo index es el método invocado así que nuestro archivo de vista es index.php dentro de esta carpeta.
9. Aquí se renderean algunos widgets también como paginadores, breadcrumbs, etc.
10. La vista se renderea con el motor de plantillas de Yii y se une con el “layout” general del sitio para formar la pagina.
11. La acción termina mostrando la pagina final al usuario.

En la imagen se muestran estas 3 partes del MVC, la carpeta Controllers (Controlador), la carpeta Models (Modelo) y la carpeta Views (Vistas).

Intenten navegar el sitio y descubrir como es que el controlador SiteController despliega la información que ven, recuerden que dentro de nuestra carpeta views se encuentra una carpeta por cada controlador, en este caso site y dentro un archivo php por cada funcion o metodo, index, contact, error, logi,n etc.

Hagamos un pequeño ejercicio

---

Es hora de poner manos a la obra:

Paso1. En la carpeta controllers vamos a crear un archivo nuevo al que llamaremos “PostController.php” es importante usar la nomenclatura adecuada por ejemplo nuestro controlador siempre comenzara con mayuscula y sera acompañado por la palabra Controller, dentro pongamos el siguiente codigo:

<?php

class PostController extends Controller
{

public function actionIndex(){

$this->render('index');

}

public function actionMensaje(){

$this->render('mensaje');

}

}

Paso2. En nuestra carpeta views crearemos una carpeta llamada “post” y dentro de esta el archivo index.php y el archivo mensaje.php a continuación el código de ambos:

Codigo de index.php

<?php $this->pageTitle=Yii::app()->name; ?>

<h1>Accion post/index</h1>

<p>Desde el controlador post invocamos esta vista con la funcion index:</p>
<ul>
<li>Ruta de esta vista: <tt><?php echo __FILE__; ?></tt></li>
</ul>

Codigo de mensaje.php

<?php $this->pageTitle=Yii::app()->name; ?>

<h1>Accion post/mensaje</h1>

<p>Desde el controlador post invocamos esta vista con la funcion mensaje:</p>
<ul>
<li>Ruta de esta vista: <tt><?php echo __FILE__; ?></tt></li>
</ul>

Paso3. Si accedemos a http://localhost/tutorial/index.php?r=post/index o bien a http://localhost/tutorial/index.php?r=post/mensaje accederemos a cada una de las acciones del controlador y a cada una de las vistas. Ambas vistas hacen uso del archivo “main” dentro de “layouts” en la carpeta views el cual es nuestro template por default (mas adelante veremos un poco mas como funcionan los templates y layouts por ahora solo noten que Yii arroja un codigo html completo y nuestra vista solo completa la parte de contenido). La variable “r” significa “route” o “ruta” y es responsable de pasar a Yii el controlador/vista que queremos mostrar, en nuestros ejemplos es Controlador: Post, Vista: Index y alternando vista: mensaje.

Como se darán cuenta es muy sencillo crear controladores nuevos e ir creando sus respectivas vistas; en este ejemplo lo hicimos desde cero y creando todo el código, sin embargo Yii Framework nos evita hacer eso gracias a una herramienta de generación de codigo, asi es, no tenemos que escribir las clases de controladores y sus respectivas vistas sino que usando la herramienta automáticamente Yii hará esto por nosotros y muchas funciones mas. Aprenderemos mas sobre esa herramienta en el proximo tutorial. Actualizare el código que agregamos ahora en nuestro repositorio. http://code.google.com/p/yii-framework-tutorial/