Yii Framework: mi primer proyecto

Sobre Yii

Tras un periodo de inactividad he decido retomar el blog para hablaros de mi experiencia con una herramienta de trabajo que a los desarrolladores y sobre todo a los phperos les puede resultar muy interesante. Hablo de Yii Framework , un framework orientado a objetos para el desarrollo de aplicaciones web con php.

logo_yii

Algunas de las características que argumentan su uso y que por el momento me han aportado hasta el momento me parecen interesantes destacar se encuentran:

Mi experiencia con este framework se basa en la versión 2, que fue publicada oficialmente en Octubre del año pasado (Ver Historia de versiones) y para iniciarme comencé de la forma que considero más indicada para cualquier tipo de herramienta de este tipo: leyendo la documentación oficial (Guía Yii 2.0).

Qué os cuento hoy?

En el post de hoy hablaré de cómo crear nuestro primer proyecto con Yii y explicaré un poco sobre la estructura de carpetas para que podamos a continuación tratar un escenario muy común en las aplicaciones web: la autenticación de usuarios.

Antes de comenzar quiero mencionar que para desarrollar este proyecto me basé en la gúia 2.0 de la documentación oficial de Yii (http://www.yiiframework.com/doc-2.0/index.html) y en el post Autenticación y autorización básica en Yii 2 (http://yii2enespanol.com/2015/04/09/autenticacion-y-autorizacion-basica-en-yii-2/) escrito por vihugarcia, donde se trabaja con un proyecto creado con la plantilla avanzada de Yii que más adelante explicaremos.

Entorno de desarrollo

  • OS X Yosemite (10.10.3) – SSOO
  • MAMP (3.2.1) (PHP 5,6,7, MySQL 5.0.11-dev y Apache 2.2.29) – Lenguaje, Servidor y gestor de bases de datos).
  • Sublime Text (3) – Editor de texto
  • Yii Framework (2.0.4) – Framework de desarrollo PHP
  • Composer (1.0-dev) – Gestor de dependencias para PHP

Creando el proyecto

Teniendo en cuenta que tenemos instalados los requisitos comentados en el punto anterior, desde el terminal o la línea de comandos si estáis en Windows nos colocamos en la ruta:

iMac-de-Vicente:/ vicmonmena$ cd Applications/MAMP/htdocs/

Y desde aquí introducimos lo siguiente:

composer create-project --prefer-dist yiisoft/yii2-app-basic basic

yii_helloworld_1

Con estos estaremos creando un proyecto llamado “basic” con la estructura de carpetas generada con la plantilla básica de Yii (yii-app-basic). La estructura de carpetas generada es la siguiente:

yii_helloworld_2

En ella he señalado varios elementos que interesa conocer para qué sirven:

  • basic, es la carpeta contenedora de todo el proyecto, y por la que nuestra URL, a priori, estará formada.
  • config, contiene ficheros de configuración donde se definen los parámetros de conexión con la base de datos (db.php) o de la propia aplicación web (we.php)
  • models y controllers, contienen las clases que representan el modelo y los controladores respectivamente.
  • views, contiene los ficheros que general la interfaz de usuario de la aplicación
  • composer.json, es el fichero que utiliza el gestor de dependencias (composer).

La plantilla avanzada

Como comentamos al inicio del post, la alternativa a la plantilla básica que hemos usado aquí es la que utiliza vihugarcia en su post: la plantilla avanzada con la que se generaría un proyecto con la siguiente estructura de carpetas:

yii_helloworld_3

La principal diferencia es que con la plantilla avanzada el backend se independiza del frontend, permitiendo que el primero pueda ser reutilizado por varias aplicaciones (Podéis leer más aquí).

Pero quiero ver algo en mi navegador!

A partir de este momento ya podemos acceder a nuestra aplicación web desde el navegador para ver el resultado generado cuando creamos el proyecto Yii basado en la plantilla básica. Para ello introducimos en nuestro navegador la URL: http://localhost:8888/basic/web/ que nos muestra la Home de nuestra web:

yii_helloworld_4

Una vez hayáis navegado un poco por el sitio web habréis podido observar que, por un lado en la zona inferior disponemos de la barra de depuración de Yii o Yii Debbuger desde la que podemos acceder a múltiples herramientas que nos ayudarán durante el desarrollo; y por otro lado, disponemos de un sistema de autenticación de usuarios con un formulario de Login ya implementado y disponible para su uso desde la ULR http://localhost:8888/basic/web/index.php?r=site%2Flogin:

yii_helloworld_5

Aunque parezca que ya está todo hecho para que podamos trabajar con nuestros usuarios y nuestra base de datos, esto no es más que un “cartón-piedra”, es decir, la autenticación no se realiza contra la BBDD y tampoco existen más usuarios que los que están hardcodeados en el fichero basic/models/User.php:

yii_helloworld_6

Don’t worry! Para eso escribo este post. Aquí vamos a desarrollar la parte de autenticación de usuarios contra la BBDD además de la inclusión de roles que nos permitan definir a qué zona de la web tiene acceso cada usuario.

Modelo-Vista-Controlador

Para continuar implementando código entendiendo lo que hacemos, debemos conocer cómo se aplicar este patrón en Yii.

Por defecto el fichero SiteController.php que se ha auto-generado es el controlador de todas las vista creadas dentro del paquete basic/views/site, por ejemplo:

Cuando hacemos clic sobre el link “about” estamos llamando a la URL http://localhost:8888/basic/web/index.php?r=site%2Fabout lo que se traduce en invocar a la acción actionAbout dentro de la clase SiteController.php quien en este caso renderiza el fichero basic/views/site/about.php para que sea dispuesto por el navegador:

public function actionAbout() {
    return $this->render('about'); 
}

Otro caso, donde las clases del modelo entran en juego, sería pulsar en “Login” desde el formulario de login para identificarnos en el sistema, con lo que estaríamos invocando la siguiente función del controlador SiteController:

yii_helloworld_7

Como vemos primero se valida si el usuario ya estaba previamente logado:

Yii::$app->user->isGuest

Y si no es el caso se recogen los datos del formulario de login (LoginForm) y se validan las credenciales mediante la llamada a la función login:

yii_helloworld_8

Como vemos se produce la interacción Controlador – Modelo y Controlador – Vista.
Reutilizando

Uno de los principales conceptos que aprendemos los programadores es el de la reutilización del código. Cuántas veces hemos escuchado eso de:

utiliza lo que ya este hecho y que sepas que funcione para ahorrar tiempo en tus desarrollos…

Es por ello que siendo fieles a este concepto vamos a utilizar trozos de un proyecto de la plantilla avanzada para adaptarlo a nuestro código y no tener que programar de nuevo todo el código referente a la autenticación de usuarios.

Resulta que, si habéis sido curiosos y habéis creado un proyecto con la plantilla avanzada como se comentaba más arriba, os habréis fijado que, según la guía oficial, hay un paso en el que se genera la base de datos del proyecto con la que se va a trabajar (leed el apartado Getting started de la guía).
Pues con nuestro proyecto vamos a hacer lo mismo, es decir, vamos a aprovechar la parte del proyecto con la plantilla avanzada y la vamos a incluir dentro de nuestro proyecto para disponer de un sistema de autenticación y una BBDD lista para funcionar:
El primer paso es disponer de un proyecto con la plantilla avanzada, para lo cual ejecutamos lo siguiente en consola:

composer create-project --prefer-dist yiisoft/yii2-app-advanced yii-application

Para crear la BBDD, desde la línea de comandos nos situamos en la carpeta raíz de nuestro proyecto y ejecutamos el comando:

yii migrate/create init_user

yii_helloworld_9
Como vemos, se ha generado un archivo nuevo (m150613_150726_init_user.php) y una carpeta nueva (migrations) dentro del proyecto. Este fichero sirve para generar todo el esquema de BBDD, incluso si lo deseamos, con registros ya creados en nuestras tablas (para más detalles podemos consultar la guía oficial).

Comencemos a reutilizar! Para ello primero localizamos dentro del proyecto de la plantilla avanzada (yii-application) el archivo de migración con nombre similar al que acabamos de crear, concretamente en la ruta yii-application/console/migrations/ y copiamos las funciones “up” y “down” en nuestro fichero de migración:

yii_helloworld_10

A continuación vamos a configurar nuestro proyecto para que se conecte con la base de datos. Para ello abrimos el fichero basic/config/db.php donde definimos los parámetros de usuario, password y nombre del esquema que vayamos a utilizar. Si aún no habéis creado el esquema ¡Esto es lo primero! Acceded a vuestro phpmyadmin y creadlo.
Seguidamente nos dirigimos a la consola e introducimos el comando:

yii migrate

Ojo! Si os da un error de conexión con la BBDD similar a este:

yii_helloworld_11

Debéis cambiar la cadena de conexión del fichero db.php para poner la siguiente:

'dsn' => 'mysql:host=localhost;port=8889;dbname=yii2basic;unix_socket=/Applications/MAMP/tmp/mysql/mysql.sock'

Si todo ha ido bien entonces debe quedaros un resultado similar a este:

yii_helloworld_12

De manera que cuando vayamos a nuestro phpmyadmin veremos que el esquema que creamos (en mi caso he dejado el de por defecto “yii2basic”) ya no está vacío y que contiene una tabla llamada “migrations” que crea Yii automáticamente y la tabla que nos interesa y que definimos en el script “user”:

yii_helloworld_13

El segundo paso en este proceso de reutilización está relacionado con el código PHP del proyecto. Vamos a copiar las clases y las vistas del proyecto yii-application (el de la plantilla avanzada) en nuestro proyecto para que la autenticación se realice contra la tabla “user” de la base de datos.
En la siguiente imagen marco los ficheros que he copiado a mi proyecto, donde como vemos en algunos casos que se trata de ficheros que no existían previamente, como puede ser SignupForm.php y otros que si como SiteController.php:

yii_helloworld_14
Una vez copiado todo el código debemos corregir las rutas a las que se hacen referencia para que vayan acorde con la estructura de carpetas de un proyecto basado en la plantilla básica.
Por ejemplo, en la clase SiteController, donde ponga “frontend” y common” debemos colocar la palabra “app”, es decir:

namespace frontend\controllers; ===> namespace app\controllers;

use common\models\LoginForm; ===> use app\models\LoginForm;

Una vez terminamos ya podríamos realizar el login en la aplicación que autenticaría nuestro usuario contra la base de datos, accediendo a la URL: http://localhost:8888/basic/web/index.php?r=site%2Flogin

Sin embargo, en ningún momento hemos creado un usuario y por tanto nuestra tabla “user” está vacía. Así que vamos a facilitar a los usuarios una vía para poder registrarse en nuestra aplicación y para ello vamos a modificar el código de una de nuestras vistas, concretamente basic/views/login.php, de la siguiente forma:
Cambiamos la línea:

If you forgot your password you can .

Por lo siguiente:

Sign up or if you forgot your password you can .

Ahora cuando accedamos al formulario de login encontraremos un link al formulario de alta de usuarios:

yii_helloworld_15

Desde este momento podemos darnos de alta:

yii_helloworld_16

Y a continuación identificarnos en el sistema:

yii_helloworld_17

Si visualizamos el contenido de la tabla “user” vemos que se ha generado un nuevo registro:

yii_helloworld_18

Y hasta aquí por hoy que no es poco!
Os dejo el código de este proyecto publicado en github por si queréis descargarlo. En el próximo post abordaremos el tema de la autorización, es decir, definiremos una serie de roles y reglas que determinarán el acceso a las distintas zonas de la web.
Un saludo y espero que os sea de utilidad!!

Acerca de vicmonmena

Just trying to contribute with my code to make this world easier
Esta entrada fue publicada en Desarrollo web, yii y etiquetada , , , , , . Guarda el enlace permanente.

2 respuestas a Yii Framework: mi primer proyecto

  1. Pingback: Yii Framework: Gii | Blog de vicmonmena

  2. Pingback: Relaciones entre entidades: Parte II | Blog de vicmonmena

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s