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



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:
|
1
2
|
curl -s http://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
|
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":
|
1
2
3
|
cd ~/Sites
composer global require "fxp/composer-asset-plugin:1.0.0-beta2"
composer create-project --prefer-dist yiisoft/yii2-app-basic 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:
|
1
2
|
cd /Applications/MAMP/htdocs
ln -s ~/Sites/hello/ /Applications/MAMP/htdocs/hello
|
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.



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.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<?php
// comment out the following two lines when deployed to production
defined('YII_DEBUG') or define('YII_DEBUG', true);
defined('YII_ENV') or define('YII_ENV', 'dev');
require(__DIR__ . '/../vendor/autoload.php');
require(__DIR__ . '/../vendor/yiisoft/yii2/Yii.php');
$config = require(__DIR__ . '/../config/web.php');
(new yii\web\Application($config))->run();
|
Por defecto, este el el método Index en /controllers/SiteController.php:
|
1
2
3
4
|
public function actionIndex()
{
return $this->render('index');
}
|
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:
|
1
2
3
4
5
6
|
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
|
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:
|
1
2
3
4
5
6
7
8
|
'components' => [
//...
'urlManager' => [
'showScriptName' => false,
'enablePrettyUrl' => true
],
//...
'request' => [
|
Después crea un fichero .htaccess en el directorio /web donde está el fichero index.php principal.
|
1
2
3
4
5
6
7
|
RewriteEngine on
# Si un directorio or fichero existe, usalo directamente
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# De lo contrario usa index.php
RewriteRule . index.php
|
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:
|
1
2
3
4
|
public function actionHola($target = 'Mundo')
{
return $this->render('hola', ['target' => $target]);
}
|
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:
|
1
2
3
4
5
|
<?php
use yii\helpers\Html;
?>
<h1>Hola <?= Html::encode($target) ?></h1>
<p>Bienvenido a tu demostración de Yii2.</p>
|
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í:



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:



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):
|
1
2
3
4
5
|
cd ~/Sites/hello
git init
git commit -m "primer commit, hola mundo para yii2"
git remote add origin git@github.com:youraccount/hello.git
git push -u origin master
|
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.
|
1
|
tuservidor.com A 192.161.234.17
|
Después, entra en tu servidor usando el nombre de dominio o la ip:
|
1
|
ssh root@tuservidor.com
|
Actualiza la configuración, installa git, activa mod_rewrite en Apache y mcrypt en PHP:
|
1
2
3
4
|
sudo apt-get update
sudo apt-get upgrade
sudo a2enmod rewrite
php5enmod mcrypt
|
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.
|
1
|
sudo apt-get install git
|
Luego, vamos a crear un grupo para www, agrega el usuario www-data y GitHub para que sean los propietarios de los directorios web.
|
1
2
3
4
5
6
7
|
adduser github
addgroup www
adduser github www
adduser www-data www
chown -R :www /var/www
chmod +s -R /var/www
chmod -vR g+w /var/www/
|
Luego creamos una llave para el usuario que podamos agregar a GitHub para que podamos tener el código sincronizado:
|
1
2
3
4
|
su github
ssh-keygen -t rsa -C "tucuentadegithub@tuemail.com"
exit
cat /home/github/.ssh/id_rsa.pub
|
Verás algo como esto, lo cual necesitas copiar y pegar en GitHub.com:



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:
|
1
|
git clone git@github.com:tucuenta/hello.git /var/www/hello
|
Si tu acceso a GitHub se ha configurado correctamente, debería aparecer algo así (si no, revisa esto):



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:
|
1
|
nano /etc/apache2/sites-available/hello.conf
|
Personaliza esta configuración con tu nombre de dominio:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<VirtualHost *:80>
ServerName tudominio.com
# Especificamos la raiz a "basic/web"
DocumentRoot "/var/www/hello/web"
<Directory "/var/www/hello/web">
# usamos mod_rewrite para las urls amigables
RewriteEngine on
# Si un directorio o fichero existe, lo usamos
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Si no, enviamos la petición a index.php
RewriteRule . index.php
</Directory>
</VirtualHost>
|
activa tu sitio:
|
1
2
3
|
a2ensite hello.conf
a2dissite 000-default.conf
service apache2 reload
|
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í:



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
- Yii Framework
- Introducción a Yii Framework (Tuts+)
- Otros ejemplos de programación gratis y opensource del mismo autor
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!



