Construyendo tu Startup: Control de Acceso, Relaciones de Active Records y Slugs

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product image — What You'll Be Creating

Esta es la quinta parte de la serie Construye tu Startup con PHP en Tuts +. En esta serie, te estoy guiando a través del lanzamiento de una startup desde el concepto a la realidad utilizando mi aplicación Meeting Planner como un ejemplo de la vida real. A cada paso en el camino, liberaremos el código de Meeting Planner como ejemplos de código abierto con los que se puede aprender. También veremos las cuestiones de negocios relacionados con la puesta en marcha que puedan surgir.

Todo el código para el Meeting Planner está escrito sobre el Framework de Yii2 para PHP. Si deseas más información sobre Yii2, revisa nuestra serie paralela Programación con Yii2 en Tuts +.

En este tutorial, voy a guiarte a través de más funciones del Framwork Yii que hará que nuestro código del administrador de lugares vigente sea más robusto. Vamos a implementar los controles de acceso simple de Yii para garantizar que sólo los usuarios registrados añadan lugares. Vamos a utilizar relaciones de Active Records para que solo los lugares que ha añadido el usuario aparezcan en su vista de la página de inicio del sitio. También vamos a utilizar los comportamientos de los slugs de Yii para implementar slugs de URL amigables para la visualización de estos lugares. Y vamos a hacer un poco más de limpieza y pulimento alrededor de las características del lugar.

Simplemente un recordatorio, participo en las cadenas de comentarios más abajo. Me interesa especialmente si tienes diferentes enfoques o ideas adicionales, o si quieres sugerir temas para futuros tutoriales. También recibo con gusto peticiones de características para el Meeting Planner.

Control de Acceso

El código que hemos escrito hasta el momento permite a cualquiera crear lugares incluso si no se ha registrado. Podemos utilizar funciones de control de acceso simple de Yii2 para asegurarnos de que los usuarios se registren e ingresen antes de añadir y visualizar lugares.

Yii2 también ofrece más avanzados (y complejos) Roles Basados en el Control de Acceso o (RBCA) que no implementaremos en este momento.

Si los usuarios no están conectados cuando visitan las páginas de los lugares, Yii les redirigirá a la página de inicio de sesión.

El control de acceso integrado de Yii2 soporta sólo dos roles por defecto: invitado (no conectado), representado por '?' y autenticado, representado por '@'. Si te interesa, The Code Ninja escribió un buen ejemplo para extender esto para soportar moderadores y administradores (Simpler Role Based Authorization in Yii 2.0) sin tener que recurrir al uso de RBAC.

El framework es bastante simple para poner en práctica estos controles. Nosotros sólo tenemos que añadir comportamientos a PlaceController.php que define las reglas de acceso para cada acción, por ejemplo, índice, crear, ver, etcetera. Aquí revisamos el comportamiento de acceso pero si te interesa, los filtros de verbo de Yii permiten restringir operaciones http basadas en la acción del controlador.

public function behaviors()
    {
        return [
            'verbs' => [
                'class' => VerbFilter::className(),
                'actions' => [
                    'delete' => ['post'],
                ],
            ],
            'access' => [
                        'class' => \yii\filters\AccessControl::className(),
                        'only' => ['index','create', 'create_geo','create_place_google','update','view','slug'],
                        'rules' => [
                            // allow authenticated users
                            [
                                'allow' => true,
                                'roles' => ['@'],
                            ],
                            // everything else is denied
                        ],
                    ],            
        ];
    }

Una vez añadidos, si haces clic en el menú de lugares (Places), serás redirigido a la página de inicio de sesión:

Yii también maneja la redirección a la página de índice una vez completada la sesión.

Cuando los usuarios acceden a las páginas de sitios, podemos encontrar el usuario actual con este código:

Yii:: $app-> usuario-> getId();

Por lo tanto, justo antes de que se guarden los nuevos lugares, podemos actualizar el campo de created_by al usuario actualmente conectado. Y podemos confiar en los controles de acceso para asegurarnos de que el método create tiene acceso a sólo los usuarios autenticados:

    public function actionCreate()
    {
        $model = new Place();       
        if ($model->load(Yii::$app->request->post())) {
          $form = Yii::$app->request->post();
            $model->created_by= Yii::$app->user->getId();
            $model->save();

Relaciones de Active Records

En el Meeting Planner, quiero seguir en primer lugar al usuario crea un lugar. Éste se almacena en el campo created_by. También queremos rastrear los sitios que los usuarios sugieren y utilizan para sus reuniones, la frecuencia con que recurren a sus lugares, y sus favoritos. Utilizamos la tabla UserPlace para esto.

Ahora que sabemos cuál usuario está registrado cuando creamos un lugar, queremos rellenar una fila relacional de la tabla de UserPlace así.

En primer lugar, tenemos que usar el generador de código de Yii, Gii (http://localhost:8888/mp/index.php/gii/model), para crear un modelo para UserPlace:

Meeting Planner Yii2 Gii Model Generator User Place

Entonces, cuando un lugar se agrega correctamente, queremos crear un registro en la tabla UserPlace para el usuario activo. Podemos extender Yii ActiveRecord con el método afterSave. En el modelo de lugar, agregamos:

public function afterSave($insert,$changedAttributes)
    {
        parent::afterSave($insert,$changedAttributes);
        if ($insert) {
          $up = new UserPlace;
          $up->add($this->created_by,$this->id);
        } 
    }

En el modelo de UserPlace, hemos añadido la función:

// add place to user place list
    public function add($user_id,$place_id) {
        // check if it exists
        if (!UserPlace::find()
            ->where( [ 'user_id' => $user_id, 'place_id' => $place_id ] )
            ->exists()) {
              // if not, add it
              $up = new UserPlace;
              $up->user_id =$user_id;
              $up->place_id=$place_id;
              $up->save();  
            }            
    }

Cuando el usuario visita la página índice de los sitios, queremos mostrarle los lugares que ha utilizado, solo las de la tabla de UserPlace para ese usuario.

Voy a guiarte a través de dos maneras diferentes de lograrlo. Como todavía estoy ganando experiencia con Yii2.x a medida que avanzo, los detalles de lo mejor eran nuevos para mí. Quiero agradecerle a Alex Makarov, un desarrollador de Yii, quien también maneja YiiFeed.com, por su ayuda. Tanto él como el fundador de Yii Qiang Xue han sido muy útiles para contestar preguntas y apoyar mis esfuerzos con estos tutoriales relacionados con Yii.

El enfoque más sencillo

La forma más fácil es unir la tabla Place con la tabla UserPlace en la propiedad de UserPlace.place_id filtrando UserPlace.user_id con el usuario actualmente autenticado.

Este es el método del controlador de índice predeterminado:

public function actionIndex()
{
    $searchModel = new PlaceSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

    return $this->render('index', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
    ]);
}

Vamos a crear un nuevo método de control llamado Yours:

    public function actionYours() 
    {
      $query = Place::find()->joinWith('userPlaces')->where(['user_id' => Yii::$app->user->getId()]);
      $searchModel = new PlaceSearch();
      
         $dataProvider = new ActiveDataProvider([
             'query' => $query,
             'pagination' => ['pageSize' => 10],
         ]);

         return $this->render('yours',[
            'dataProvider' => $dataProvider,
            'searchModel'=>$searchModel,
         ]);
    }

Aviso que joinWith('userPlaces') está utilizando la consulta relacional generada por Gii en Place.php— esto puede ser un poco confuso ya que omites el prefijo "get":

    /**
     * @return \yii\db\ActiveQuery
     */
    public function getUserPlaces()
    {
        return $this->hasMany(UserPlace::className(), ['place_id' => 'id']);
    }

También necesitamos modificar la clase PlaceSearch:

// add a required rule for created_by
public function rules()
    {
        return [
            [['created_by'], 'required'],        

// add the join within the search query
public function search($params)
    {
        $query = Place::find()->joinWith('user_place')->where(['user_id' => Yii::$app->user->getId()]);
        $dataProvider = new ActiveDataProvider([
            'query' => $query,
        ]);

Un Enfoque Alternativo

Otra forma de aplicarlo es a través de un controlador UserPlace. Después de todo, estamos viendo los "lugares del usuario". En este caso podemos hacerle una ligera modificación al método índice del controlador generado Gii:

public function actionIndex()
    {
        $searchModel = new UserPlaceSearch();
        $searchModel->user_id = Yii::$app->user->getId();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }

En /views/user-place/index.php, necesitamos modificar las rutas de enlace generadas y el modelo de acceso a los datos, por ejemplo, /place/create_place_google/:

<p>
       <?= Html::a(Yii::t('frontend', 'Create {modelClass}', [
         'modelClass' => 'Place',
      ]), ['/place/create'], ['class' => 'btn btn-success']) ?>
      
      <?= Html::a(Yii::t('frontend','Add Current Location'), ['/place/create_geo'], ['class' => 'btn btn-success']) ?> 
      <?= Html::a(Yii::t('frontend','Add a Google {modelClass}',[
         'modelClass' => 'Place'
      ]), ['/place/create_place_google'], ['class' => 'btn btn-success']) ?> 
    </p>

En el widget de vista de Cuadrícula, utilizamos la relación UserPlace a la tabla de Place para llegar a propiedades desde el último modelo, por ejemplo $model-> place-> slug:

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

            [
                'attribute' => 'place_name',
                'format' => 'raw',
                'value' => function ($model) {                      
                            return '<div>'.$model->place->name.'</div>';
                    },
            ],
            [
                'attribute' => 'place_type',
                'format' => 'raw',
                'value' => function ($model) {                      
                            return '<div>'.$model->place->getPlaceType($model->place->place_type).'</div>';
                    },
            ],
            ['class' => 'yii\grid\ActionColumn',
    			      'template'=>'{view} {update} ',
					    'buttons'=>[
                'view' => function ($url, $model) {     
                  return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', Yii::getAlias('@web').'/place/'.$model->place->slug, ['title' => Yii::t('yii', 'View'),]);	
						      },
                 'update' => function ($url, $model) {     
                    return Html::a('<span class="glyphicon glyphicon-pencil"></span>', Yii::getAlias('@web').'/place/update/'.$model->place_id, ['title' => Yii::t('yii', 'Update'),]);	
  						    }
							],
			      ],
        ],
    ]); ?>

El enfoque de UserPlace requiere algunos cambios en los enlaces alrededor de los breadcrumbs, los widgets de enlaces de acción y los botones de comando, pero esto aún es bastante simple.

Si revisas el código de esta versión, puedes ver ambos lugares del usuario desde: http://localhost:8888/mp/place/yours y http://localhost:8888/mp/user-place. Es interesante ver cómo se puede lograr esta funcionalidad con dos enfoques diferentes en Yii.

Slugs

Una vez que se activan las pretty URLs en Yii Framework, la página de un objeto modelo suele ser algo como http://meetingplanner.com/place/692, donde 692 representa el ID del objeto para mostrar. Además de ser indescriptible para el usuario, también es menos eficaz con los motores de búsqueda. Es mejor usar los strings de las URL amigables como http://meetingplanner.com/place/caffe-seattle. Los strings se refieren a veces como un slug. Yii2 proporcionará soporte integrado para los slugs, en forma de Comportamientos Sluggables. Los comportamientos son parte del soporte de Active Record de Yii, y se pueden aplicar automáticamente a los modelos de objetos de datos.

En nuestro modelo de lugar, hemos añadido una propiedad de slug. Aquí es cómo implementamos Comportamientos Sluggables en el modelo de lugar:

public function behaviors()
    {
        return [
            [
                'class' => SluggableBehavior::className(),
                'attribute' => 'name',
                'immutable' => true,
                'ensureUnique'=>true,
            ],

Yii se asegurará durante la operación save() de que el campo slug se rellene con una versión amigable de la URL del campo nombre. En otras palabras, si el nombre del lugar es Oddfellows Cafe, el slug será oddfellows-café.

La propiedad inmutable asegura que el slug nunca cambia aunque sea editado el nombre descriptivo. Esto es útil para conservar los vínculos a los lugares así como las referencias del motor de búsqueda.

La propiedad ensureUnique genera un slug único añadiendo automáticamente un índice de sufijo.

El Generador de código de Yii Gii típicamente enlaza a objetos por IDs numéricos. Queremos cambiar estos enlaces para utilizar el slug. Hay dos lugares donde existe este código.

El primero es en la página de índice del sitio en la rejilla de las columnas de acción. Puedes personalizar los enlaces como este en /frontend/views/places/index.php:

<?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'name',
            [
                'attribute' => 'place_type',
                'format' => 'raw',
                'value' => function ($model) {                      
                            return '<div>'.$model->getPlaceType($model->place_type).'</div>';
                    },
            ],
            ['class' => 'yii\grid\ActionColumn',
    			      'template'=>'{view} {update} ',
					    'buttons'=>[
                'view' => function ($url, $model) {     
                  return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', 'place/'.$model->slug, ['title' => Yii::t('yii', 'View'),]);	
						      }
							],
			],
        ],
    ]); ?>

El otro lugar son los breadcrumbs:

Por ejemplo, en /frontend/views/place/update.php, necesitamos cambiar esto:

<?php

use yii\helpers\Html;

/* @var $this yii\web\View */
/* @var $model frontend\models\Place */

$this->title = Yii::t('frontend', 'Update {modelClass}: ', [
    'modelClass' => 'Place',
]) . ' ' . $model->name;
$this->params['breadcrumbs'][] = ['label' => Yii::t('frontend', 'Places'), 'url' => ['index']];
$this->params['breadcrumbs'][] = ['label' => $model->name, 'url' => ['view', 'id' => $model->id]];
$this->params['breadcrumbs'][] = Yii::t('frontend', 'Update');
?>

Reemplazando el código de identificación de la vista para utilizar el slug:

...
$this->params['breadcrumbs'][] = ['label' => Yii::t('frontend', 'Places'), 'url' => ['index']];
$this->params['breadcrumbs'][] = ['label' => $model->name, 'url' => ['slug', 'slug' => $model->slug]];
$this->params['breadcrumbs'][] = Yii::t('frontend', 'Update');
...

Limpieza y Pulido

A medida que vamos construyendo el Meeting Planner, habrá maratones de código para crear nuevas características y períodos necesarios para su limpieza y pulimiento. Esto será probablemente un ciclo repetitivo.

Voy a caminar a través de unos escenarios que quiero abordar en este momento. Por supuesto, continuaré limpiando las áreas necesarias en tanto vayamos desarrollando el código, tomando en cuenta los comentarios de los usuarios y mejorando el producto.

Extendiendo la Barra de Navegación

Yii2 está bien integrada con Bootstrap, por lo que sus aplicaciones se ven geniales y se ejecutan de manera responsiva fuera de la caja. Si deseas crear una barra de navegación con menús desplegables, es útil revisar la documentación de Bootstrap y comprender en Yii2 el uso de la notación de matriz corta en PHP. La documentación del widget de barra de navegación de Yii2 no proporciona muchos ejemplos en este momento.

Me decidí a empezar a actualizar la navegación del Meeting Planner con algunos menús desplegables basados en el estado del usuario, por ejemplo invitados o autenticado.

Bootstrap Dropdown Menu in Meeting Planner

Aquí está el código que implementa lo anterior — estoy seguro de que seguiré modificándolo a medida que avanzamos:

NavBar::begin([
    'brandLabel' => Yii::t('frontend','MeetingPlanner.io'), //
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse navbar-fixed-top',
    ],
]);
if (Yii::$app->user->isGuest) {
    $menuItems[] = ['label' => Yii::t('frontend','Signup'), 'url' => ['/site/signup']];
    $menuItems[] = ['label' => Yii::t('frontend','Login'), 'url' => ['/site/login']];
} else {    
  $menuItems = [
      ['label' => Yii::t('frontend','Places'), 'url' => ['/place/yours']],              
  ];	
}
$menuItems[]=['label' => Yii::t('frontend','About'),
	'items' => [
		['label' => Yii::t('frontend','Learn more'), 'url' => ['/site/about']],
		['label' => Yii::t('frontend','Contact'), 'url' => ['/site/contact']],
	],
];    
if (!Yii::$app->user->isGuest) {
	$menuItems[] = [
	            'label' => 'Account',
	            'items' => [
	                 [
	                    'label' => Yii::t('frontend','Contact information'),
	                    'url' => ['/user-contact'],
	                ],
	                 [
	                    'label' => Yii::t('frontend','Logout').' (' . Yii::$app->user->identity->username . ')',
	                    'url' => ['/site/logout'],
	                    'linkOptions' => ['data-method' => 'post']
	                ],
	            ],
	        ];				
}            			
echo Nav::widget([
    'options' => ['class' => 'navbar-nav navbar-right'],
    'items' => $menuItems,
]);
NavBar::end();

Validando los Modelos Apropiadamente Antes de Guardar

Reescribí las acciones de crear en PlaceController para validar los modelos antes de intentar añadir las relaciones UserPlace. Hubo algunos casos donde podrían presentarse datos no válidos y eso rompería los intentos de añadir relaciones. Esto también asegura que los usuarios se devolverán al formulario con los mensajes de error amigables cuando las validaciones fallen.

public function actionCreate()
    {
        $model = new Place();       
        if ($model->load(Yii::$app->request->post())) {
    		      $form = Yii::$app->request->post();
            if (!is_numeric($model->place_type)) {
               $model->place_type=Place::TYPE_OTHER;
            }
            $model->created_by= Yii::$app->user->getId();
            // validate the form against model rules
            if ($model->validate()) {
                // all inputs are valid
                $model->save();
                // lookup gps location from address
                $model->addLocationFromAddress($model,$form['Place']['full_address']); 
                return $this->redirect(['view', 'id' => $model->id]);
            } else {
                // validation failed
                return $this->render('create', [
                    'model' => $model,
                ]);
            }            
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }

Evitando Duplicados

En nuestro código de creación del lugar inicial, queremos protegernos contra duplicados. Los lugares pueden tener nombres idénticos, por ejemplo, hay muchos cafés de Starbucks (demasiados), pero queremos evitar que el lugar exacto se cree dos veces, por ejemplo, Starbucks Coffe con idéntico ID en Google PLace o idéntico nombre y dirección de la calle.

Yii ofrece validadores de modelo que se integran con ActiveForms para hacer mucho de este trabajo por nosotros. Aquí están las reglas que lo definen en el modelo de lugar:

/**
     * @inheritdoc
     */
     public function rules()
     {
         return [
             [['name','slug'], 'required'],
             [['place_type', 'status', 'created_by', 'created_at', 'updated_at'], 'integer'],
             [['name', 'google_place_id', 'slug', 'website', 'full_address', 'vicinity'], 'string', 'max' => 255],
             [['website'], 'url'],
             [['slug'], 'unique'],
             [['searchbox'], 'unique','targetAttribute' => 'google_place_id'],             
             [['name', 'full_address'], 'unique', 'targetAttribute' => ['name', 'full_address']],
         ];
     }

Los validadores pueden forzar a los campos requeridos y a los tipos y la longitud de los campos. También pueden validar las URLs como con el campo de la página web anterior, las direcciones de correo electrónico y mucho más. También puedes escribir validadores personalizados.

Existen varios validadores incorporados específicos de singularidad. Por ejemplo, pueden validar singularidad en campos sencillos como lo hemos hecho con el campo de slug. Pero también hay validadores de singularidad más complejos.

Cuando el usuario está agregando un lugar con Google Autocomplete, queremos reforzar la singularidad del google_place_id resultante en el campo oculto, pero queremos que el mensaje de error aparezca en el campo de searchbox. Esta definición lo logra:

1	[['searchbox'], 'unique','targetAttribute' => 'google_place_id'],

También queremos asegurar que nombre y dirección sean únicos juntos. En otras palabras, varios lugares pueden tener el mismo nombre o la misma dirección pero no pueden ser idénticos en ambos campos. Esta definición hace esto:

1	[['name', 'full_address'], 'unique', 'targetAttribute' => ['name', 'full_address']],

Por supuesto, muchos usuarios pueden agregar el mismo lugar a su lista de UserPlaces.

Eliminando el Borrado

También quiero proteger contra el borrado de lugares. Gii, el generador automático de código de Yii, típicamente enlaza el borrado de operaciones desde la rejilla de la página de índice y la página de actualizar . Queremos eliminarlas. Y queremos restringir el acceso a la acción de eliminación del controlador.

Este es un ejemplo de la página de índice del sitio con los íconos de borrar:

Meeting Planner Place Index Page with Delete Action

cuando personalizamos los links de enlace en los slugs anteriores, eliminamos el uso predeterminado del comando delete.

Por cierto, realmente aprecio el uso de Yii de Bootstrap y los Glyphicons. Trabajan muy bien.

Aquí está la página con el botón delete:

Meeting Planner Update with Delete button

Por ahora, vamos a comentar el código para el botón de borrar en /frontend/views/place/view.php. Querríamos añadirlos de vuelta para los administradores en algún momento.

         <?php /* Html::a(Yii::t('frontend', 'Delete'), ['delete', 'id' => $model->id], [
             'class' => 'btn btn-danger',
             'data' => [
                 'confirm' => Yii::t('frontend', 'Are you sure you want to delete this item?'),
                 'method' => 'post',
             ],
         ]) */ ?>

Previniendo el Autocompletado del Envío de la Clave de Acceso

En cuanto estaba construyendo algo de la geolocalización con HTML5 y el código de autocompletar de Google Places, fueron apareciendo algunos errores, algunos relacionadas con JavaScript.

Por ejemplo, si pulsas la tecla Enter después de escribir en el campo de autocompletar, Google envía el formulario. Tenemos que reemplazar esto.

En nuestro create_place.js, añadimos un controlador a la tecla para que detenga el envío del formulario:

function setupListeners() { 
    // ...
    var place_input = document.getElementById('place-searchbox');
    google.maps.event.addDomListener(place_input, 'keydown', function(e) { 
        if (e.keyCode == 13) { 
            e.preventDefault();
        }
      });
}

Ahora cuando presionas Enter, verás el mapa en la página y podrás editar el resto del formulario antes de enviarlo.

Revisando los Beneficios del Uso de un Framework

Mucha gente cree que PHP es una plataforma menos seria o capaz para construir cosas. Para mí, el éxito de Facebook con PHP siempre les demostrará su equivocación.

Mucha gente no ha oído de Yii Framework o desprecia el valor de los frameworks.

Brevemente en esta serie sobre una Startup, nos hemos beneficiado de un gran número de características de Yii Framwork - acelerando el desarrollo, entregando una arquitectura limpia y código de calidad:

Arquitectura MVC
Migraciones de Bases de Datos
Relaciones y validaciones del modelo de Active Record
Generación de código automatizado
Integración de Bootstrap y Glyphicons
Filtros de control de acceso
Comportamientos de los slugs
Internacionalización

Por esta razón soy un gran defensor de Yii Framework. Me ha hecho un desarrollador mucho más eficiente, capaz de ofrecer soluciones mucho más rápidamente de lo que quisiera con vainilla PHP.

¿Qué sigue?

En el siguiente tutorial de Construyendo tu Startup con PHP, vamos a construir el soporte para las configuraciones de usuarios, contacto e imagen de perfil.

Por favor siéntete libre de agregar tus preguntas y comentarios abajo, generalmente participo en las discusiones. También puedes encontrarme en Twitter @reifman o enviarme un correo directamente.