Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Programación con Yii2: Primeros pasos

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How to Program With Yii2.
How to Program With Yii2: Exploring MVC, Forms and Layouts

Spanish (Español) translation by Jesus Yepes (you can also view the original English article)

Final product image
What You'll Be Creating

Si te estás preguntando qué es Yii, echale un vistazo a mi tutorial anterior: Introducción a Yii Framework, en el cual hablo sobre los beneficios de Yii y comento qué hay nuevo en Yii 2.0, lanzado el 24 de Octubre de 2014

En este tutorial vamos a ver como instalar Yii 2.0, configurar un entorno local de desarollo, programar un Hola Mundo simple, configurar un entorno de desarollo remoto para alojar y publicar tu código desde un repositorio de Github.

Instalando Yii 2.0

Documentación

Puedes encontrar una guía de instalación detallada aquí; Comentaremos lo básico para configurar un entorno de desarollo en Mac OS X. Podemos encontrar la Guía definitiva (PDF) y Referencia de Clases, las cuales cubren todos los detalles de Yii.

Instalando Composer

Yii2 requiere Composer, un popular gestor de dependencias para PHP. Si aún no tienes Composer instalado, haz lo siguiente:

Instalando Yii2

Utiliza Composer para instalar Yii2. La petición que se realiza necesita que uses tus datos de acceso a Github; registrate si no tienes una cuenta.

Llamemos a nuestro primer proyecto, "hello":

Yii2 proporciona dos plantillas de instalación diferentes dependiendo en el tipo de aplicación que estés desarrollando: básica y avanzada. En este tutorial, voy a usar la básica, la cual es instalada por defecto. La plantilla avanzada viene con la parte visible de la web, la administrativa y la consola, para aplicaciones más avanzadas, como un blog WordPress, con su panel administrativo y sus tareas cron.

Configurando el entorno de desarollo local.

Uso MAMP para OS X ya que es gratis y de código abierto para mis desarrollos LAMP. Asegúrate de que MAMP se está ejecutando y tu servidor web y de base de datos están activos. Después, crea un enlace simbólico para MAMP en tu directorio Sitios:

Después dirígete a http://localhost:8888/hello/web. Deberías ver la plantilla básica de Yii ejecutándose con Bootstrap 3.x

Yii2 ejecutándose con la recién instalada plantilla básica

Esa página alegrará a los desarrolladores que han usado Yii 1.1, ya que no tenía suporte preconfigurado para la última versión de Bootstrap, el extraordinario framework CSS de código abierto que se está apoderando de la web.

Arquitectura de una aplicación Yii

Una de los rasgos más importantes de Yii Framework es que implementa Modelo - Vista - Controlador para PHP. Esto no solo proporciona un entorno de desarrollo más estructurado y facilidad para entender el código, simplifica un montón de cosas que son dificiles de hacer con PHP, como seguridad y generación de código. También hace nuestro código más fácil de extender y más reusable.

En una aplicación Yii, redirigimos todo el tráfico a un fichero: /web/index.php. Este dichero carga Yii, cualquier dependencia, y luego ejecuta la aplicación.

Por defecto, este el el método Index en /controllers/SiteController.php:

Normalmente, los controladores están llenos de métodos, pero con poco código como el de arriba. Los controladores gestionan el acceso, controlan los modelos y renderizan las vistas. El bulto de tu código debería ir en tus modelos y las vistas deberían producir código simple.

Por defecto, Yii renderizará /views/layouts/main.php con el contenido de /views/site/index.php. main.php contiene la estrucura general de la página, por ejemplo, el menú y el pié de la página. En main.php verás que se realiza una llamada al contenido:

La variable $content será reemplazada con el código generado en /views/site/index.php, el cual actualmente es código HTMl estático que muestra la página de Congratulations! mostrada anteriormente.

Programando el Hola Mundo!

Activando las URLs amigables

Activemos las urls amigables en Yii2 con mod_rewrite. En la página de inicio de Yii, si haces click en About en el menú, la url será algo como http://localhost:8888/hello/web/index.php?r=site%2Fabout. Nos gustaría cambiarla para que fuera algo como http://localhost:8888/hello/web/site/about.

El subdirectorio config incluye configuración para tus aplicaciones web y de consola, al igual que para la base de datos. Edita /config/web.php para agregar urlManagement a la aplicación web actual. Agrega la sección urlManager al array de componentes:

Después crea un fichero .htaccess en el directorio /web donde está el fichero index.php principal.

Asegúrate de que el módulo mod_rewrite se está ejecutando localmente en MAMP; de lo contrario, sigue esta guía en StackOverflow.

En tu navgador, visita la URL http://localhost:8888/hello/web/site/about. Deberías ver la página de About de la aplicación Yii y haciendo click en cualquier enlace del menú debería mostrar la página de destino con las urls amigables.

Contruyendo la acción Hola Mundo!

Ahora vamos a agregar una acción al controlador llamada Hola para que diga el mensaje que elijamos. En /controllers/SiteController.php, agrega la siguiente acción:

Esto buscará un parámetro en la url llamado target para imprimirlo en la pantalla. Si no existe tal parámetro, dirá "Mundo". En Yii, las acciones se definen como métodos con el prefijo "action" seguido del nombre de la acción. En la clase SiteController usamos el método public function actionHola. Yii usa el prefijo action para diferenciar las acciones de otro métodos.

El comportamiento por defecto del renderizador es buscar un fichero en views/ControllerID/Nombrevista.php. Por lo tanto, en /views/site/ crea un fichero hola.php:

Esta es la vista para mostrar una etiqueta h1 con el texto Hola seguido de la variable target. Nota: codificamos la variable para prevenir que un parámetro que recibimos por url pueda tener código malicioso.

Si te diriges a la url http://localhost:8888/hello/web/site/say?target=Tuts%20Readers, deberías ver algo así:

Hello Tuts Readers

Esto es un ejemplo muy básico de las capacidades MVC de Yii2. Si quieres más información puedes leer sobre cómo funciona este "Hola Mundo" y el MVC en Yii2 aquí.

Ahora, vamos a conigurar nuestra aplicación en GitHub y subirla al nuestro servidor en producción.

Configurando nuestro entorno de desarollo remoto

La aplicación básica de Yii debería ejecutarse correctamente tal cual en Apache o en Nginx, voy a mostrar las instrucciones para Apache. Puedes encontrar las de Nginx aquí

Crea un repositorio en GitHub

Una vez configurado Yii, crea un repositorio en Github:

Create a New Repository at Github

Nota: Es más simple copiar y pegar el fichero .gitignore desde GitHub en ~/Sites/hello/.gitignore que crear el sitio sin dicho fichero y después tener que hacer un merge local, pero ambas formas son correctas.

He estado usando la aplicación GitHub para Mac OS X pero puedes usar la línea de comandos si lo deseas. Aquí están las instrucciones para agregando un proyecto existente a GitHub usando la línea de comandos.  (cambia "youraccount" con tu usuario de GitHub):

Configura tu sitio Apache en tu servidor

Si aún no tienes un servior LAMP, o una instancia de un servidor en la nube, sigue mis instrucciones genéricas para Ubuntu para empezar. Una vez tienes tu dirección IP, modifica tus entradas DNS para crear una entrada A que apunte a tu servidor.

Después, entra en tu servidor usando el nombre de dominio o la ip:

Actualiza la configuración, installa git, activa mod_rewrite en Apache y mcrypt en PHP:

Configura el acceso a GitHub en el Servidor Remoto

Ahora, vamos a configurar un usuario para descargar el código desde GitHub para que apache lo pueda servir. Primero, instala git en tu servidor.

Luego, vamos a crear un grupo para www, agrega el usuario www-data y GitHub para que sean los propietarios de los directorios web.

Luego creamos una llave para el usuario que podamos agregar a GitHub para que podamos tener el código sincronizado:

Verás algo como esto, lo cual necesitas copiar y pegar en GitHub.com:

Your Github Key

Vistita la página de preferencias para tu repositorio git, y agrega la llave a tu repositorio:

Una vez la agregues, la verás listada aquí:

Por último, puedes clonarlo en tu servior de producción:

Si tu acceso a GitHub se ha configurado correctamente, debería aparecer algo así (si no, revisa esto):

Git Clone

A medida que amplies tu base de código con esta seríe de tutoriales y mandes las actualizaciones desde tu máquina local, serás capaz de sincronizar el código en tu servidor de producción realizando un git pull. Esto es mucho más simple que descargar el tarball o sincronizar el código manualmente, y se convertirá en algo más útil conforme esta seríe continúe en los siguientes módulos.

Configurando el sitio en Apache

Crea un fichero de configuración para Apache:

Personaliza esta configuración con tu nombre de dominio:

activa tu sitio:

Visita http://yourdomain.com/site/hola?target=Mundo! y deberías ver tu aplicación ejecutándose en su propio dominio sin la barra de debug de Yii2 en el pié de la página como aquí:

Production Server Hello World Application

Felicidades! Ahora estamos preparados para explorar características más útiles y complicadas en Yii2. Si te gustaría saber cuando se publica el siguiente tutorial sobre Yii2, sigue @tutspluscode or @reifman on Twitter or revisa mi página de autor. Mi página de autor incluye todo lo que he ido publicando..

Si tienes alguna duda sobre el tutorial, por favor publícalas en los comentarios.

Enlaces Relacionados

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.