Yii Framework: mi primer proyecto

Quiero comenzar mi participación en este blog de Novanotio compartiendo 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, que permite la máxima reutilización en la programación web y puede acelerar el proceso de desarrollo.

Algunas de las características que argumentan su uso y que me parecen interesantes destacar:

Mi experiencia con este framework se basa en la versión 2, que fue publicada oficialmente en octubre del 2014 (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).

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 guía 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

Una vez que tenemos instalados los requisitos, 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:

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

yii_helloworld_1

Estamos 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

He señalado los elementos para los que es importante conocer la utilidad:

  • 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 generan la interfaz de usuario de la aplicación
  • composer.json, es el fichero que utiliza el gestor de dependencias (composer).

La plantilla avanzada

La plantilla avanzada que utiliza vihugarcia es una buena alternativa a la plantilla básica que estamos realizando , ya que genera un proyecto con esta 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 (aquí encontraréis más información).

Quiero ver algo en mi navegador:

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. Simplemente hay que introducir en nuestro navegador la URL: http://localhost:8888/basic/web/ para acceder a 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

Ahora 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 estaba logueado, 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…

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:

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
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.

Vicente Montaño. Analista en Novanotio.

21 Comentarios

  1. Ribasca 14/07/2015 en 8:59 am- Responder

    Excelente documentación.para iniciarse en este framework. Ni que decir tiene, que el tiempo dedicado a la formación, en cualquier disciplina, es el tiempo mejor invertido.
    ¡Enhorabuena!

    • Novanotio 14/07/2015 en 9:36 am- Responder

      Nos alegra mucho que te haya parecido interesante este artículo para iniciarse en Yii. Estamos de acuerdo que la formación es muy importante para todos los profesionales. Un saludo

  2. […] Yii Framework: mi primer proyecto Quiero comenzar mi participación en este blog de Novanotio compar… […]

  3. Mauro Barbosa 16/08/2015 en 5:21 am- Responder

    Hola, soy muy nuevo en la programacion, y recien comencé a trabajar con la plantilla basica del Yii 2.0.5. Hasta ahora he logrado hacer todo lo que necesito para un proyecto que estoy realizando menos la parte de loguearse desde la bd. He buscado y lo unico que encuentro es indicaciones para trabajar con la plantilla avanzada y me cuesta porque estoy en Cuba y tengo algunos problemas con la conexion a la internet, y lo hago desde un servidor proxy que no me da muchas alternativas, lhe pregunto si pudiera ser tan amable y hacerme una guia para lograrlo, desde la creacion de la tabla user en la bd hasta la implementacion del codigo. Gracias de antemano

  4. Mauro Bruno 20/09/2015 en 4:56 am- Responder

    saludos una vez mas, gracias por responderme, lo que pasa es que estoy en cuba y el acceso a la internet no es muy bueno y lento, lo poco de conexion que tengo es por proxy y no puedo ni siquiera usar el composer comletamente ademas de pasar trabajo para instalarlo, lo tengo instalado pero no me hace nada con los paquetes que intento instalar. ya pude resolver lo de los usuarios (en parte) y unas cuantas cosas mas que me fui guiado por el blog de vihugarcia, que es muy bueno explicando las cosas, pero hay cosas que deja detras porque se supone que ya algunos o todos lo saben, que es mi caso, recien entrando en el mundo de la programación. he visto varias extenciones para gestionar el control de usuarios, pero como ya lo dije antes, no puedo instalarlas por el problema que tengo con el composer y en ningun lado veo explicaciones de como instalar paquetes y las dependencias manualmente asi que la unica alternativa que me resta es hacerlo tirando codigo. lo que quiero es quitar la opcion de registrar usuario, que para crear un usuario sea tarea de un usuario administrador y que tenga una opcion para cambiar roles. lo segundo es como mostrar los menus segun el tipo de usuario, lo de la planilla avanzada viene nada mas si es invitado y si no lo es, no veo como separ por tipo de usuario (invitado, admin, usuario simples). creo que por ahora es todo. gracias otra vez.

  5. Mauro 26/09/2015 en 2:39 am- Responder

    me sirvio de mucho, gracias

    • Novanotio 26/09/2015 en 10:59 am- Responder

      Mauro, nos alegramos mucho que este post y los otros que te enviamos te sirviesen. Un saludo

  6. david 07/01/2016 en 8:20 pm- Responder

    hola!! donde podria encontrar clases en una escuela de yii en el df?

    • Novanotio 16/01/2016 en 7:25 pm- Responder

      Lo sentimos David, estamos en España y no conocemos escuelas de Yii en DF. Buena suerte!!

      • Chanet 21/03/2016 en 7:49 pm- Responder

        hola necesito que mi sistema permita crear comentarios, como puedo hacer esto?
        gracias de antemano, please es muy importante

        • Novanotio 22/03/2016 en 4:20 pm- Responder

          Hola, para poder ayudarte necesitaríamos saber:
          · ¿En qué consiste tu sistema?
          · ¿Qué es lo que quieres hacer?
          · ¿Has intentado ya algo para realizar la funcionalidad?
          · ¿Qué fuentes has consultado?
          Un saludo

          • Chanet 27/03/2016 en 9:11 pm

            básicamente es un sitema de gestión, donde necesito hacer tipo un blog que me permita crear intercambio entre los roles del sistema, he visto varios articulos de creacion de sistemas de comentarios pero no cumplen el nivel de detalle que necesito.
            gracias de antemano, es muy importante para mi

          • Novanotio 31/03/2016 en 4:36 pm

            Hola, aquí tienes algunas referencias para implementar un sistema de comentarios pueden ser:

            · http://www.yiiframework.com/doc/blog/1.1/en/comment.create

            · http://www.yiiframework.com/extension/yii-blog/

            Ten en cuenta que estas entradas se refieren a la versión 1.1 de Yii por lo que pueden requerir ser adaptadas a la versión 2 si estás trabajando con esta.

            Si tu aplicación está destinada a ser un blog tal vez puedes plantearte trabajar con herramientas que ya están traen implementadas este tipo de funcionalidades de base, como es el caso de WordPress

            si ninguna de las opciones se adapta a tus necesidades, puedes partir de la que más se aproxime y adaptarla.

            Si tienes alguna duda concreta sobre cómo adaptar o implementar algo, puedes comentarlo aquí y vemos cómo te podemos ayudar.

            Un saludo

  7. Siu 12/05/2016 en 4:52 pm- Responder

    Excelente tutorial, muy bien explicado!
    para que aparezca el enlace para dar de alta a los usuarios
    agregar en basic/views/login.php esta línea:
    Sign up or if you forgot your password you can. .

    Saludos!

    • Novanotio 13/05/2016 en 9:32 am- Responder

      Gracias Siu, nos alegra que te haya parecido un buen tutorial para Yii Framework. Un saludo

  8. Neo 28/06/2016 en 10:08 pm- Responder

    Hola a todos, exelente tutorial, me gusto mucho el analisis. Queria aportar algo para los que lo hagan por primera vez, el link para dar de alta a los usuarios
    podrian colocarlo de esta manera:
    Sign up or if you forgot your password you can.
    para que los lleve al formulario de ingreso.
    saludos…

    • Neo 28/06/2016 en 10:13 pm- Responder

      me borro el codigo en el comentario anterior, quizas por que esta entre etiquetas php, os lo pongo de nuevo, para que lo veais, unicamente al colocarlo en su proyecto debereis reemplazar las comillas por etiquetas php

      Sign up “= Html::a(‘here’, [‘site/signup’])” or if you forgot your password you can.

      saludos…

      • Novanotio 29/06/2016 en 9:17 am- Responder

        Gracias Neo por tu aportación al tutorial de Yii Framework.

  9. hectro torres 03/08/2018 en 8:19 pm- Responder

    hola que tal me gustaria saber si publicaste el tutorial de roles de usaio por favor exelente trabajo me ayudo bastante

  10. David 22/02/2019 en 1:48 pm- Responder

    Gracias por compartir!

Deje su comentario