Cómo programar con Yii2: Trabajar con la base de datos y Active Record

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image — What You'll Be Creating

Si se está preguntando, "¿Qué es Yii?" Echa un vistazo a mi tutorial anterior: Introducción a Yii Framework, que revisa los beneficios de Yii e incluye una visión general de lo que es nuevo en Yii 2.0, lanzado el 12 de octubre de 2014.

En la programando con Yii2: Primeros pasos, configuramos Yii2 localmente, construimos una aplicación Hello World, configuramos un servidor remoto y usamos GitHub para desplegar nuestro código. En la segunda parte, aprendimos sobre la implementación de Yii de su arquitectura Model View Controller y cómo construir páginas web y formularios que recopilen y validen datos. En este tutorial, usaremos la base de datos de Yii y las capacidades de registro activo para automatizar la generación de código para una aplicación web básica.

Para estos ejemplos, seguiremos imaginando que estamos construyendo un marco para publicar actualizaciones de estado simples, p. Nuestro propio mini-Twitter.

1. Crear su base de datos

Primero, necesitamos crear una base de datos en nuestro entorno de desarrollo. Lo hago a través de la interfaz de usuario web PHPMyAdmin de MAMP. Navegue hasta PHPMyAdmin, p. http://localhost:8888/MAMP/index.php?page=phpmyadmin, elija la pestaña Bases de Datos y cree una base de datos llamada hello:

También puede utilizar la interfaz de línea de comandos de MySQL.

Ahora, proporcionaremos credenciales de bases de datos al archivo de configuración de la base de datos de Yii. Abra /hello/config/db.php y proporcione sus credenciales de base de datos MySQL. El mío se ve asi:

<?php

return [
    'class' => 'yii\db\Connection',
    'dsn' => 'mysql:host=localhost;dbname=hello',
    'username' => 'root',
    'password' => 'password',
    'charset' => 'utf8',
];

Ahora, crearemos nuestra primera migración de base de datos. Una migración proporciona una forma programática de crear y actualizar esquemas de base de datos. Es especialmente útil si está ejecutándose en varios servidores o en diferentes entornos. Elimina la dificultad de importar scripts SQL.

Para nuestros ejemplos de codificación, puede utilizar el repositorio de Git del último tutorial para seguirlo, o puedes descargar el repositorio completo aquí.

Crear la migración

Nuestra primera migración creará la tabla Status. Abra Terminal e introduzca lo siguiente:

1	cd ~/Sites/hello
2	./yii migrate/create create_status_table

Debe ser así, cuando haya terminado:

Cuando abra \hello\migrations, verá un archivo llamado similar a m141201_013120_create_status_table.php. Debe tener este aspecto cuando se abre:

<?php

use yii\db\Schema;
use yii\db\Migration;

class m141201_013120_create_status_table extends Migration
{
    public function up()
    {

    }

    public function down()
    {
        echo "m141201_013120_create_status_table cannot be reverted.\n";

        return false;
    }
}

Este es el código de migración predeterminado que proporciona Yii. A continuación, lo actualizaremos para proporcionar los campos que necesitamos.

Creación de la tabla Status

Nuestra tabla Status almacenará el texto del mensaje y especificará si una publicación es privada o pública. Cada fila también tendrá un id, campos de tiempo de creacion y actualizacion.

Actualice el código de migración al nuestro:

public function up()
    {
          $tableOptions = null;
          if ($this->db->driverName === 'mysql') {
              $tableOptions = 'CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE=InnoDB';
          }

          $this->createTable('{{%status}}', [
              'id' => Schema::TYPE_PK,
              'message' => Schema::TYPE_TEXT.' NOT NULL DEFAULT ""',
              'permissions' => Schema::TYPE_SMALLINT . ' NOT NULL DEFAULT 0',
              'created_at' => Schema::TYPE_INTEGER . ' NOT NULL',
              'updated_at' => Schema::TYPE_INTEGER . ' NOT NULL',
          ], $tableOptions);
      }


    public function down()
    {
      $this->dropTable('{{%status}}');
    }

Observe cómo hemos agregado definiciones para los campos que necesitamos como message, permissions, created_at y updated_at.

Ejecutar la migración

Para indicar a Yii que cree la tabla, debemos ejecutar la migración. Es fácil. De Terminal otra vez, ejecutamos ./yii migrate/up:

$ ./yii migrate/up
Yii Migration Tool (based on Yii v2.0.0)

Total 1 new migration to be applied:
    m141201_013120_create_status_table

Apply the above migration? (yes|no) [no]:yes
*** applying m141201_013120_create_status_table
    > create table {{%status}} ... done (time: 0.032s)
*** applied m141201_013120_create_status_table (time: 0.038s)


Migrated up successfully.

Si navegas por la tabla usando PHPMyAdmin, deberías ver algo como esto:

Ahora que hemos creado la tabla de la base de datos, podemos empezar a usar Gii, el potente generador de scaffolding de Yii, para automatizar todo el código del controlador de vista de modelo.

2. Usando Gii: El generador de código Yii

Gii es el generador de código scaffolding de Yii. Utiliza su conocimiento del esquema de la base de datos para generar un código de controlador de vista de modelo predeterminado y bien escrito para su aplicación. Gii puede convertir un esquema de base de datos en una aplicación web básica de trabajo en cuestión de minutos. Es increíblemente poderoso. Dejame mostrarte como funciona.

Construyendo el Modelo

Con Gii, comenzamos construyendo un modelo basado en cada tabla de base de datos que hemos creado. Para nuestro ejemplo, usaremos la tabla Status.

Para comenzar a usar Gii, vaya a su aplicación web y agregue /gii, p. http://localhost:8888/hello/web/gii. Verás algo como esto:

Haga clic en Model Generator e ingrese status en el campo Table Name:

Al hacer clic en Preview, mostrará qué archivos se creará. Dado que ya tenemos un archivo de modelo Status.php del último tutorial, haz clic en Overwrite. A continuación, haga clic en Generate.

El resultado se verá algo así:

Abra el archivo /hello/models/Status.php y verá las reglas básicas de validación y los atributos de formulario que Yii ha creado para nosotros:

<?php

namespace app\models;

use Yii;

/**
 * This is the model class for table "status".
 *
 * @property integer $id
 * @property string $message
 * @property integer $permissions
 * @property integer $created_at
 * @property integer $updated_at
 */
class Status extends \yii\db\ActiveRecord
{
    /**
     * @inheritdoc
     */
    public static function tableName()
    {
        return 'status';
    }

    /**
     * @inheritdoc
     */
    public function rules()
    {
        return [
            [['message', 'created_at', 'updated_at'], 'required'],
            [['message'], 'string'],
            [['permissions', 'created_at', 'updated_at'], 'integer']
        ];
    }

    /**
     * @inheritdoc
     */
    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'message' => 'Message',
            'permissions' => 'Permissions',
            'created_at' => 'Created At',
            'updated_at' => 'Updated At',
        ];
    }
}

Creación de la Interfaz Web

Ahora, es hora de usar Gii para construir el controlador y las vistas para la tabla Status. Vuelva a la página principal de Gii y haga clic en CRUD Generator, p. http://localhost:8888/hello/web/gii/crud:

Para Model Class, ingrese app\models\Status (estas entradas distinguen entre mayúsculas y minúsculas). Para Search Model Class, ingrese app\models\StatusSearch. Para Controller Class, ingrese app\controllers\StatusController. Debe verse asi:

Haga clic Preview. Verás lo siguiente—asegúrate de hacer clic en Overwrite de nuevo, ya que tenemos archivos antiguos del último tutorial que deben actualizarse:

Al hacer clic en Generate, verá todo el controlador y verá los archivos generados:

Las páginas CRUD predeterminadas

Navegue por su navegador a http://localhost:8888/hello/web/status, y verá la página de índice CRUD generada. Dado que todavía no hay filas en la base de datos, aparecerá vacía.

Ahora, haga clic en Create Status y verá el formulario de estado de creación predeterminado creado por Gii:

Es bastante sorprendente cómo rápidamente Gii crea código de trabajo para nosotros. A continuación, personalizaremos el código scaffolding para que esto funcione para nosotros.

3. Personalización de nuestro código

Personalización de la vista de formulario

Vamos a limpiar el formulario. En /hello/views/Status/_form.php, elimine los campos creados y actualizados:

1	<?= $form->field($model, 'created_at')->textInput() ?>
2	<?= $form->field($model, 'updated_at')->textInput() ?>

Reemplace el campo de permisos con el código de lista desplegable que creamos en la segunda parte de esta serie:

1	<?=
2	$form->field($model, 'permissions')->dropDownList($model->getPermissions(),
3	['prompt'=>'- Choose Your Permissions -']) ?>

Tenemos que volver a poner la función getPermissions en el modelo también. Editar /hello/models/Status.php. Ponga de nuevo las definiciones constantes y las funciones de permisos:

      const PERMISSIONS_PRIVATE = 10;
      const PERMISSIONS_PUBLIC = 20;  
...

public function getPermissions() {
      return array (self::PERMISSIONS_PRIVATE=>'Private',self::PERMISSIONS_PUBLIC=>'Public');
    }
    
    public function getPermissionsLabel($permissions) {
      if ($permissions==self::PERMISSIONS_PUBLIC) {
        return 'Public';
      } else {
        return 'Private';        
      }
    }

Su nuevo formulario Status debería tener este aspecto:

Necesitamos ajustar el controlador un poco para que el formulario se guarde correctamente.

Personalización del controlador

En /hello/controllers/StatusController.php, reemplace el método actionCreate por este código:

public function actionCreate()
    {
        $model = new Status();

        if ($model->load(Yii::$app->request->post())) {
          $model->created_at = time();
          $model->updated_at = time();
           if ($model->save()) {             
             return $this->redirect(['view', 'id' => $model->id]);             
           } 
        } 
        return $this->render('create', [
            'model' => $model,
        ]);
    }

Cuando se publica el formulario, establecemos manualmente los campos created_at y updated_at, luego guardamos los datos en la base de datos.

Cuando guarde su primera actualización de estado, verá la siguiente página de vista:

Ajuste del diseño

Vamos a reajustar la barra de navegación para que no se desplace hacia abajo para el estado pero salta directamente a la página de índice de estado. Edite /hello/views/layouts/main.php y reemplace el código de Nav::widget con esto:

echo Nav::widget([
                'options' => ['class' => 'navbar-nav navbar-right'],
                'items' => [
                    ['label' => 'Home', 'url' => ['/site/index']],
                    ['label' => 'Status', 'url' => ['/status/index']],
                    ['label' => 'About', 'url' => ['/site/about']],
                    ['label' => 'Contact', 'url' => ['/site/contact']],
                    Yii::$app->user->isGuest ?
                        ['label' => 'Login', 'url' => ['/site/login']] :
                        ['label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                            'url' => ['/site/logout'],
                            'linkOptions' => ['data-method' => 'post']],
                ],
            ]);

La vista de cuadrícula

Cuando regrese a la vista de índice de estado, puede ver la cuadrícula Yii2 llena de datos:

El código que genera esta página está en /hello/views/status/index.php:

<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel app\models\StatusSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Statuses';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="status-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a('Create Status', ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            'id',
            'message:ntext',
            'permissions',
            'created_at',
            'updated_at',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

</div>

Si prueba la clasificación de columnas y ve, actualiza y elimina los iconos, verá que Gii ha construido toda la funcionalidad de estas características también.

Así que en tan sólo unos minutos, creamos un esquema para nuestra base de datos y generamos un modelo y todo el código de la aplicación web necesario para una aplicación básica. Espero que hayas encontrado las capacidades de generación de código de Yii tan impresionantes como yo.

¿Que sigue?

A continuación, le mostraré cómo integrar las funciones de registro de usuario y de inicio de sesión en nuestra aplicación para poder establecer relaciones de unión entre puestos de estado y usuarios específicos.

Si quieres saber cuándo llega el próximo tutorial de Yii2, sígueme @reifman en Twitter o revisa mi página Tuts+ instructor. Mi página de instructor incluirá todos los artículos de esta serie tan pronto como se publiquen.