Construyendo tu Startup con PHP: Programación de una reunión

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Este tutorial es parte de la serie Construye tu Startup con PHP en Tuts +. En esta serie, te estaré 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 que damos, vamos a liberar el código de Meeting Planner como ejemplos de código abierto de los que se puede aprender. También veremos las cuestiones de negocios relacionadas con la puesta en marcha que puedan surgir.

Todo el código para el Meeting Planner está escrito en el framework de Yii2 para PHP. Si deseas más información sobre Yii2, revisa nuestra serie paralela Programando con Yii2 en Tuts +. También podrías querer revisar mi sitio base de conocimiento para las preguntas sobre Yii2, The Yii Developer Exchange (en inglés).

En los últimos seis tutoriales, hemos sentado las bases del soporte de la aplicación en una variedad de formas: usuarios, lugares, contactos, configuración y localización. Apuesto a que estarás tan emocionado como yo de que finalmente estamos listos para comenzar a construir la agenda, una funcionalidad para las reuniones. Gracias por tu paciencia a medida que he construido la infraestructura para las partes divertidas, integrales de esta aplicación.

Sin embargo, el tutorial para codificar el soporte a la funcionalidad del agendamiento de las reuniones se extenderá por al menos 4 episodios. Estos próximos dos episodios se enfocarán principalmente en construir el soporte para la experiencia de usuario básica, elegir el participante, el lugar y la fecha y hora de la reunión, y almacenar esto en la base de datos. Después de eso, cubriremos la entrega de la solicitud de la reunión via email. Volveremos más tarde en las series para optimizar y pulir la interfaz de usuario, ya que es crítica para el éxito de este producto; la tarea principal para esta reciente actualización será eliminar la recarga de la página en el proceso de agendar la reunión.

Construir esta funcionalidad para este tutorial, requiere un montón de código, alguno autogenerado por Gii de Yii, y otro montón a mano. Debido a la complejidad para entregar las partes iniciales de esta característica, me enfoqué en una interfaz de usuario muy rudimentaria que puliré de manera iterativa.

Construir esta característica toca muchos aspectos de la programación en con el Framework Yii2: Migraciones de ActiveRecords, relaciones y validaciones, generación de código con Gii, Bootstrap, Yii2, extensiones y widgets de Jquery UI para Yii2, AJAX, renderizar vistas parciales, prácticas de código DRY, etc. Fue difícil elegeir que parte cubrir aquí. Notarás varios cambios en el repositorio desde los primeros episodios de este tutorial.

Si tienes preguntas o comentarios, por favor publícalas abajo, participo en las discusiones.

La Página de Reuniones.

Tabs de Bootstrap

Una de las primeras cosas que necesito hacer es construir diferentes tabs para las reuniones futuras, pasadas y canceladas.

The Meetings Page with Tabs for Upcoming Past and Canceled

Implementar esto es sólo otro ejemplo de lo grandioso que es Bootstrap y lo sólida que es su integración con Yii2. Bootstrap tiene tabs preconstruidos.

En MeetingController, hacemos una precarga de las consultas para cada tipo de reunión y las renderizamos en la vista index.

public function actionIndex()
{
  // add filter for upcoming or past
    $upcomingProvider = new ActiveDataProvider([
        'query' => Meeting::find()->joinWith('participants')->where(['owner_id'=>Yii::$app->user->getId()])->orWhere(['participant_id'=>Yii::$app->user->getId()])->andWhere(['Meeting.status'=>[Meeting::STATUS_PLANNING,Meeting::STATUS_CONFIRMED]]),
    ]);
    $pastProvider = new ActiveDataProvider([
        'query' => Meeting::find()->joinWith('participants')->where(['owner_id'=>Yii::$app->user->getId()])->orWhere(['participant_id'=>Yii::$app->user->getId()])->andWhere(['Meeting.status'=>Meeting::STATUS_COMPLETED]),
    ]);
    $canceledProvider = new ActiveDataProvider([
        'query' => Meeting::find()->joinWith('participants')->where(['owner_id'=>Yii::$app->user->getId()])->orWhere(['participant_id'=>Yii::$app->user->getId()])->andWhere(['Meeting.status'=>Meeting::STATUS_CANCELED]),
    ]);

    return $this->render('index', [
        'upcomingProvider' => $upcomingProvider,
        'pastProvider' => $pastProvider,
        'canceledProvider' => $canceledProvider,
    ]);
}

Luego, en la vista index, implementamos nuestro código de bootstrap con los paneles de los tabs:

<h1><?= $this->title ?></h1>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#upcoming" role="tab" data-toggle="tab">Upcoming</a></li>
  <li><a href="#past" role="tab" data-toggle="tab">Past</a></li>
  <li><a href="#canceled" role="tab" data-toggle="tab">Canceled</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="upcoming">
    <div class="meeting-index">
      
      <?= $this->render('_grid', [
          'dataProvider' => $upcomingProvider,
      ]) ?>

      </div> <!-- end of upcoming meetings tab -->
  </div>
  <div class="tab-pane" id="past">

    <?= $this->render('_grid', [
        'dataProvider' => $pastProvider,
    ]) ?>    
  </div> <!-- end of past meetings tab -->
  <div class="tab-pane" id="canceled">
    <?= $this->render('_grid', [
        'dataProvider' => $canceledProvider,
    ]) ?>
    
  </div> <!-- end of canceled meetings tab -->
  
</div>

A medida que profundicemos en esta serie, voy a dejar un espacios de trabajo por hacer. Uno de ellos es implementar esos paneles de los tabs via AJAX así no cargaremos tres consultas en el front.

Seguimiento de Tiquetes

También voy a empezar a crear entradas en la aplicación de seguimiento de eventos Lighthouse para que mi trabajo futuro sea más fácil de rastrear. Hablaré de Lighthouse en un futuro tutorial.

Lighthouse Issue Tracker AJAXify Meeting Page Tabs

¿Qué hay detrás de agendar una Reunión?

La simple tarea de crear un framework para agendar una reunión resulta ser bastante compleja y detallada bajo la cubierta. Voy a pulirla en diferentes etapas a medida que nos movemos en las serie.

Mi primer objetivo es construir sólo el marco básico de manera que pueda comenzar a probar las características de agendar una reunión.

Las reuniones abarcan un puñado de modelos de datos de Active Record, por ejemplo participantes, Hora de la Reunión, Lugar, Notas, etc.

La idea es usar el patrón MVC para construir esas acciones, pegándome a la metodología DRY tanto como sea posible. Inicialmente, la interfaz trabajará en la recarga de la página, pero más adelante, volveremos e integraremos todos esos modelos via AJAX usando el mismo código MVC.

El Formulario Crear una Reunión

Para muchos de los modelos, comencé yendo a través del proceso definido en los primeros tutoriales de cómo usar el generador de código de Yii, Gii, para construir el CRU. Luego los personalicé como los necesitaba. Por ahora, me quedo con un muy básico formulario de crear una reunión - Ni si quiera incluye aún el correo del participante. Esto me permite crear rápidamente un registro básico de la reunión y trabajar en la página de la agenda.

Una vez el formulario sea enviado, puedes ver la página de la Reunión obviamente, modificaré esta forma y el proceso inicial a tiempo.

La Página de la Reunión

Recuerda mi mockup para el primer tutoria en esta serie:

The Original Meeting Planner Mockup for Scheduling a Meeting

Aquí está una toma temprana del formulario sobre el que he estado trabajando:

The Current Form of Meeting Planners Schedule a Meeting Feature

Hay un montón de infraestructura, código (tanto auto-generado, como generado manualmente) y widgets de terceros involucrados en hacer que esto suceda. Te llevaré por ellos pieza por pieza.

Paneles y Tablas de Bootstrap

Mientras no sea probablemente el diseño final, elegí utilizar paneles de Bootstrap para organizar la página entre propiedades, lugares, fechas y tiempos y notas. La propia página se representa por acción de la vista del controlador de la reunión View y llama las vistas parciales a los modelos particulares para cada uno de ellos.

No tuve que construirlo de esta manera, pero quise utilizar a propósito todo el framework MVC incorporado de Yii e integrarlo tanto como fuera posible. Mi esperanza es que en el futuro sea más fácil de acondicionar con AJAX toda la página, reducir las recargas de la página e incrementar la simplicidad y el mantenimiento del código fuente.

Aquí está cómo la acción del controlador View funciona. Él carga ActiveDataProviders para cada modelo y luego renderiza el archivo vista de la Reunión:

/**
     * Displays a single Meeting model.
     * @param integer $id
     * @return mixed
     */
    public function actionView($id)
    {
      $timeProvider = new ActiveDataProvider([
          'query' => MeetingTime::find()->where(['meeting_id'=>$id]),
      ]);

      $noteProvider = new ActiveDataProvider([
          'query' => MeetingNote::find()->where(['meeting_id'=>$id]),
      ]);

      $placeProvider = new ActiveDataProvider([
          'query' => MeetingPlace::find()->where(['meeting_id'=>$id]),
      ]);

      $participantProvider = new ActiveDataProvider([
          'query' => Participant::find()->where(['meeting_id'=>$id]),
      ]);
      $model = $this->findModel($id);
      $model->prepareView();
        return $this->render('view', [
            'model' => $model,
            'participantProvider' => $participantProvider,
            'timeProvider' => $timeProvider,
            'noteProvider' => $noteProvider,
            'placeProvider' => $placeProvider,
        ]);
    }

Vistas Parciales

Mediante el uso de todas las vistas en cada uno de los modelos asociados, es bastante fácil mostrar la página entera de la agenda con vistas parciales del MVC. La vista de la reunión renderiza todas las vistas de _panel para los otros modelos. Puedes revisar la documentación del método de renderizado de Yii2 aquí.

        <?= $this->render('../participant/_panel', [
            'model'=>$model,
            'participantProvider' => $participantProvider,
        ]) ?>

        <?= $this->render('../meeting-place/_panel', [
            'model'=>$model,
            'placeProvider' => $placeProvider,
        ]) ?>       
                
        <?= $this->render('../meeting-time/_panel', [
            'model'=>$model,
            'timeProvider' => $timeProvider,
        ]) ?>

        <?= $this->render('../meeting-note/_panel', [
            'model'=>$model,
            'noteProvider' => $noteProvider,
        ]) ?>

Modelos Faltantes

Al construir esta funcionalidad, me di cuenta de que descuidé un par de modelos necesarios: MeetingPlaceChoice y MeetingTimeChoice. Estos son necesarios para almacenar la disponibilidad de organizador y participante(s) para MeetingPlaces y MeetingTimes específicos.

Aquí está la migración para MeetingPlaceChoice:

$this->createTable('{{%meeting_place_choice}}', [
          'id' => Schema::TYPE_PK,
          'meeting_place_id' => Schema::TYPE_INTEGER.' NOT NULL',
          'user_id' => Schema::TYPE_BIGINT.' NOT NULL',
          'status' => Schema::TYPE_SMALLINT . ' NOT NULL DEFAULT 0',
          'created_at' => Schema::TYPE_INTEGER . ' NOT NULL',
          'updated_at' => Schema::TYPE_INTEGER . ' NOT NULL',
      ], $tableOptions);
      $this->addForeignKey('fk_mpc_meeting_place', '{{%meeting_place_choice}}', 'meeting_place_id', '{{%meeting_place}}', 'id', 'CASCADE', 'CASCADE');
      $this->addForeignKey('fk_mpc_user_id', '{{%meeting_place_choice}}', 'user_id', '{{%user}}', 'id', 'CASCADE', 'CASCADE');   

Aquí está la migración para MeetingTimeChoice:

$this->createTable('{{%meeting_time_choice}}', [
          'id' => Schema::TYPE_PK,
          'meeting_time_id' => Schema::TYPE_INTEGER.' NOT NULL',
          'user_id' => Schema::TYPE_BIGINT.' NOT NULL',
          'status' => Schema::TYPE_SMALLINT . ' NOT NULL DEFAULT 0',
          'created_at' => Schema::TYPE_INTEGER . ' NOT NULL',
          'updated_at' => Schema::TYPE_INTEGER . ' NOT NULL',
      ], $tableOptions);
      $this->addForeignKey('fk_mtc_meeting_time', '{{%meeting_time_choice}}', 'meeting_time_id', '{{%meeting_time}}', 'id', 'CASCADE', 'CASCADE');
      $this->addForeignKey('fk_mtc_user_id', '{{%meeting_time_choice}}', 'user_id', '{{%user}}', 'id', 'CASCADE', 'CASCADE');  

Las migraciones ActiveRecord de Yii hacen fácil extender programáticamente tu esquema de base de datos mientras tu producto progresa.

Estos modelos determinan el estado de los widgets interruptores (reflejando disponibilidad de usuario) que ves arriba en las filas para cada lugar y horario. En el siguiente tutorial, te voy a guiar a través de como inicializamos esos widgets y usamos AJAX en Yii para actualizar su estado sin una actualización de página.

Programando Alertas

El PrepareView determina el estado de la reunión y si es necesario advierte al usuario que la invitación no ha sido envidada:

public function prepareView() {
        $this->setViewer();
        $this->canSend();
        $this->canFinalize();
        // has invitation been sent
         if ($this->canSend()) {
           Yii::$app->session->setFlash('warning', Yii::t('frontend','This invitation has not yet been sent.'));
      }
        // to do - if sent, has invitation been opened
        // to do - if not finalized, is it within 72 hrs, 48 hrs        
      }

Yii tiene soporte integrado para mostrar Alertas Bootstrap, llamadas flashes:

Meeting Planner setFlash Bootstrap alerts

Botones de Comando

Aquí está el código para un contenedor vista Reunión de ejemplo con los botones de comando que se muestran arriba:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <div class="row">
        <div class="col-lg-12"><h1><?= Html::encode($this->title) ?></h1></div>
      </div>  
    </div>
    <div class="panel-body">
    <?= $model->message ?>
    </div>
    <div class="panel-footer">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6" >
          <div style="float:right;">
          <?= Html::a(Yii::t('frontend', 'Send'), ['finalize', 'id' => $model->id], ['class' => 'btn btn-primary '.(!$model->isReadyToSend?'disabled':'')]) ?>

          <?= Html::a(Yii::t('frontend', 'Finalize'), ['finalize', 'id' => $model->id], ['class' => 'btn btn-success '.(!$model->isReadyToFinalize?'disabled':'')]) ?>
          <?= Html::a('', ['cancel', 'id' => $model->id], ['class' => 'btn btn-primary glyphicon glyphicon-remove btn-danger','title'=>Yii::t('frontend','Cancel')]) ?>

          <?= Html::a('', ['update', 'id' => $model->id], ['class' => 'btn btn-primary glyphicon glyphicon-pencil','title'=>'Edit']) ?>
          </div>
        </div>
    </div> <!-- end row -->
    </div>
   </div>

Cada botón es creado con el ayudante HTML de Yii y estilos de botón Bootstrap:

1	<?= Html::a(Yii::t('frontend', 'Send'), ['finalize', 'id' => $model->id], ['class' => 'btn btn-primary '.(!$model->isReadyToSend?'disabled':'')]) ?>

Para los botones cancelar y editar propiedades, usé Glyphicons. Los Glyphicons son hermosos y libremente incluidos con Bootstrap e integrados con Yii2.

¿Qué Hacen Estos Comandos?

Una vez que el usuario ha agregado a un participante y al menos un lugar y horario, el o ella pueden enviar la invitación. Esta funcionalidad entregará una invitación de reunión al usuario vía correo electrónico que describiré pronto en un próximo tutorial.

El botón Finalizar permite al organizador (o participante) cambiar el estado de la reunión de planeando a próxima. La idea es que una vez que se elige lugar y fecha, la reunión pueda ser "finalizada". Antes de esto, el participante tendrá una oportunidad de sugerir de manera opcional otros lugares y horarios y el organizador (o ambos) tendrán la opción de elegir el lugar y horario finales.

El botón Cancelar cancelará la reunión y la moverá a la pestaña cancelada en la página de Reuniones.

Participantes

A continuación, el usuario agregará personas.

Nota: en mi mínimo producto viable, solo un participante es permitido pero podríamos agregar más después.

Si recuerdas la tabla Friends que creamos en un tutorial anterior, estoy permitiendo a los usuarios ingresar una nueva dirección de correo o acelerar su entrada con autocompletar cargado desde los amigos existentes y reuniones pasadas.

Meeting Planner invite a participant with autocomplete

En el futuro, tendremos más opciones de interfaz de usuario aquí---incluyendo participantes frecuentes.

En la parte superior del controlador Participant, cargamos los amigos en un arreglo para ser usado por el widget autocompletar jQuery---soporte que está de nuevo, integrado en Yii2:

/**
     * Creates a new Participant model.
     * If creation is successful, the browser will be redirected to the 'view' page.
     * @return mixed
     */
    public function actionCreate($meeting_id)
    {
      $mtg = new Meeting();
      $title = $mtg->getMeetingTitle($meeting_id);
        $model = new Participant();
        $model->meeting_id= $meeting_id;
        $model->invited_by= Yii::$app->user->getId();
        // load friends for auto complete field
        $friends = Friend::getFriendList(Yii::$app->user->getId());

Aquí está el _form.php en \frontend\views\participant:

<div class="participant-form">
    <?php $form = ActiveForm::begin(); ?>
    
    <?= $form->errorSummary($model); ?>
    
    <p>Email address:</p>
    <?php 
      // preload friends into array
      echo yii\jui\AutoComplete::widget([
          'model' => $model,
          'attribute' => 'email',
          'clientOptions' => [
          'source' => $friends,
           ],
          ]);        
    ?>

Tomé la decisión de diseño para almacenar todos los participantes en la tabla User. Podría arrepentirme de esto---no estoy seguro aún. Pero simplifica enormemente el proceso de permitir a la gente empezar a usar el sitio rápidamente y simplificar el modelo general de datos.

Cuando un usuario invita a alguien desconocido al sistema (una nueva dirección de correo), los registramos pasivamente en la tabla Usuario.

if ($model->load(Yii::$app->request->post())) {
          if (!User::find()->where( [ 'email' => $model->email ] )->exists()) {
            // if email not already registered
            //  create new user with temporary username & password
            $temp_email_arr[] = $model->email;
            $model->username = Inflector::slug(implode('-', $temp_email_arr));
            $model->password = Yii::$app->security->generateRandomString(12);
            $model->participant_id = $model->addUser();
          } else {
            // add participant from user record
            $usr = User::find()->where( [ 'email' => $model->email ] )->one();
            $model->participant_id = $usr->id;
          }
          // validate the form against model rules
          if ($model->validate()) {
              // all inputs are valid
              $model->save();              
              return $this->redirect(['/meeting/view', 'id' => $meeting_id]);
          } 

Creamos un nombre de usuario basado en su dirección de email. Uso el generador de slug de Yii en su ayudante Inflector. Creamos una contraseña aleatoria por ahora usando el ayudante de Seguridad de Yii. Si estuviera usando PHP vainilla, probablemente tendría que integrar otras funciones para estas capacidades. En su lugar, está integrado.

Continuemos para agregar lugares.

Lugares

Hay ventajas grandiosas de usar MVC de Yii para cada controlador y modelo en vez de codificar toda esta funcionalidad en el controlador Meeting. Hace entender y manejar el código mucho más simple y organizado.

Noté rápidamente, sin embargo, que tenía que personalizar los breadcrumbs por defecto para enlazar de vuelta a la página actual de reunión en vez del index o vista para un modelo específico.

Add a Meeting Place Breadcrumbs

En realidad estamos usando el modelo MeetingPlace para agregar lugares a reuniones. En \frontend\views\meeting-place\create.php, tuve que simplemente personalizar los enlaces en el área breadcrumbs:

<?php

use yii\helpers\Html;

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

$this->title = Yii::t('frontend', 'Add a {modelClass}', [
    'modelClass' => 'Meeting Place',
]);
$this->params['breadcrumbs'][] = ['label' => Yii::t('frontend', 'Meetings'), 'url' => ['/meeting/index']];

$this->params['breadcrumbs'][] = ['label'=>$title,'url' => ['/meeting/view', 'id' => $model->meeting_id]];
$this->params['breadcrumbs'][] = $this->title;

?>

Agregando Soporte para Agregar Lugares Google Directamente

Add a Meeting Place from Your Places or via Google Places Autocomplete

No solo quise personalizar el formulario de creación de Lugar para que el usuario agregue lugares usados sino también para que agreguen Lugares Google al vuelo.

Básicamente tuve que replicar el soporte que construimos en el tutorial de Lugares Google aquí en creación MeetingPlace:

<?php
use yii\helpers\ArrayHelper;
use yii\helpers\BaseHtml;
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use frontend\models\UserPlace;

use frontend\assets\MapAsset;
MapAsset::register($this);

/* @var $this yii\web\View */
/* @var $model frontend\models\MeetingPlace */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="meeting-place-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->errorSummary($model); ?>

    <h3>Choose one of your places</h3>
    <div class="row">
      <div class="col-md-6">
    <?= Html::activeDropDownList($model, 'place_id',
          ArrayHelper::map(UserPlace::find()->all(), 'place.id', 'place.name'),['prompt'=>Yii::t('frontend','-- select one of your places below --')] ) ?>                    
    <h3>- or -</h3>
    <h3>Choose from Google Places</h3>
      <p>Type in a place or business known to Google Places:</p>
        <?= $form->field($model, 'searchbox')->textInput(['maxlength' => 255])->label('Place') ?>
      </div>
      <div class="col-md-6">
        <div id="map-canvas">
          <article></article>
        </div>
      </div>
      </div> <!-- end row -->
        <?= BaseHtml::activeHiddenInput($model, 'name'); ?>
        <?= BaseHtml::activeHiddenInput($model, 'google_place_id'); ?>
        <?= BaseHtml::activeHiddenInput($model, 'location'); ?>
        <?= BaseHtml::activeHiddenInput($model, 'website'); ?>
        <?= BaseHtml::activeHiddenInput($model, 'vicinity'); ?>
        <?= BaseHtml::activeHiddenInput($model, 'full_address'); ?>
    <div class="clearfix"></div>
    <div class="row vertical-pad">
      <div class="form-group">      
          <?= Html::submitButton($model->isNewRecord ? Yii::t('frontend', 'Add Place') : Yii::t('frontend', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
      </div>
    </div>

    <?php ActiveForm::end(); ?>

</div>

También necesité hacer más uso del sofisticado soporte de validación de Yii2. En el modelo MeetingPlace de abajo, usamos validación única de Yii2 para reportar un error si alguien intenta a un lugar ya sugerido para una reunión:

    public function rules()
    {
        return [
            [['meeting_id', 'place_id', 'suggested_by'], 'required'],
            [['meeting_id', 'place_id', 'suggested_by', 'status', 'created_at', 'updated_at'], 'integer'],
            [['place_id'], 'unique', 'targetAttribute' => ['place_id','meeting_id'], 'message'=>Yii::t('frontend','This place has already been suggested.')],

También agregué una condición personalizada de error en la acción crear del MeetingPlaceController por si un usuario elige lugares desde su lista así como Lugar Google---aunque tal vez esto sería una característica opcional para mantener (¿tienes una opinión? publícala en los comentarios de abajo):

     public function actionCreate($meeting_id)
     {
       $mtg = new Meeting();
       $title = $mtg->getMeetingTitle($meeting_id);
         $model = new MeetingPlace();
         $model->meeting_id= $meeting_id;
         $model->suggested_by= Yii::$app->user->getId();
         $model->status = MeetingPlace::STATUS_SUGGESTED;
         $posted_form = Yii::$app->request->post(); 
         if ($model->load($posted_form)) {
          // check if both are chosen and return an error
           if ($model->place_id<>'' and $posted_form['MeetingPlace']['google_place_id']<>'') {    
             $model->addErrors(['place_id'=>Yii::t('frontend','Please choose one or the other')]);
             return $this->render('create', [
                  'model' => $model,
                   'title' => $title,
              ]);             
           }

Use el método addErrors de Yii2.

También arreglé un bug del episodio tres que estaba creando múltiples cajas de mapa siempre que alguien cambiara la selección de Lugar Google. La revisión por el número de hijos existente en el selector article corrigió esto:

function loadMap(gps,name) {
  if (document.querySelector('article').children.length==0) {
    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcanvas';
    mapcanvas.style.height = '300px';
    mapcanvas.style.width = '300px';
    mapcanvas.style.border = '1px solid black';    
    document.querySelector('article').appendChild(mapcanvas);  
  }

En el futuro, este formulario de creación incluirá un número de importantes características:

Permitir a los usuarios agregar su geolocalización actual.
Sugerir lugares frecuentes por el usuario.
Proporcionar acceso rápido a los lugares favoritos del usuario.
Sugerir lugares cercanos (equidistantes) al usuario y participantes.
Sugerir lugares patrocinados para anunciantes pagados.
Permitir que lugares y horarios sean quitados por el organizador---posiblemente bajo a condición de que no hayan sido vistos o respondidos por los participantes.

También podría ser útil permitir a los usuarios hacer notas sobre lugares y horarios específicos. Por ejemplo, podría designar que "este lugar funcionará bien para mí el Jueves en la mañana pero no el Viernes en la tarde" o "si eliges este horario, podemos hacerlo en el Café Vita en Capitol Hill". Si tienes una opinión sobre esta característica (que agregaría complejidad) por favor publica un comentario abajo.

Mostrando los Paneles

Para cada uno de los modelos usamos una jerarquía similar de vistas y componentes Yii2. El Controlador Reunión genera la vista para _panel.php en \frontend\views\meeting-place:

<?php
use yii\helpers\Html;
use yii\widgets\ListView;
?>
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">
    <div class="row">
      <div class="col-lg-6"><h4><?= Yii::t('frontend','Places') ?></h4></div>
      <div class="col-lg-6" ><div style="float:right;"><?= Html::a('', ['meeting-place/create', 'meeting_id' => $model->id], ['class' => 'btn btn-primary glyphicon glyphicon-plus']) ?></div>
    </div>
  </div>
  </div>

  <?php
   if ($placeProvider->count>0): 
  ?>
  <table class="table">
     <thead>
     <tr class="small-header">
       <td></td>
       <td ><?=Yii::t('frontend','You') ?></td>
        <td ><?=Yii::t('frontend','Them') ?></td>
        <td >
          <?php
           if ($placeProvider->count>1) echo Yii::t('frontend','Choose');
          ?>    </tr>
    </thead>
    <?= ListView::widget([ 
           'dataProvider' => $placeProvider, 
           'itemOptions' => ['class' => 'item'], 
           'layout' => '{items}',
           'itemView' => '_list',
           'viewParams' => ['placeCount'=>$placeProvider->count],
       ]) ?>
  </table>
    
  <?php else: ?>
  <?php endif; ?>

</div>

El contorno de la tabla compatible con Bootstrap está en _panel.php. Después usamos el widget Listview de Yii2 para mostrar cada fila de información en forma de tabla. El parcial itemView está en _list.php.

Nota que pasamos una variable personalizada llamada placeCount vía viewParams. Esto es útil para configurar los botones en la tabla.

Aquí está la vista _list.php que cubriremos en mucho más detalle en el siguiente tutorial, incluyendo widgets de entrada de switch y la implementación AJAX.

<?php
use yii\helpers\Html;
use yii\helpers\BaseUrl;
use \kartik\switchinput\SwitchInput;

?>

<tr > 
  <td style >
        <?= Html::a($model->place->name,BaseUrl::home().'/place/'.$model->place->slug) ?>
  </td>
  <td style>
      <?
      foreach ($model->meetingPlaceChoices as $mpc) {
        if ($mpc->user_id == $model->meeting->owner_id) {
            if ($mpc->status == $mpc::STATUS_YES)
              $value = 1;
            else
              $value =0;
              echo SwitchInput::widget([
              'type'=>SwitchInput::CHECKBOX,
              'name' => 'meeting-place-choice',
              'id'=>'mpc-'.$mpc->id,          
              'value' => $value,
              'pluginOptions' => ['size' => 'mini','onText' => '<i class="glyphicon glyphicon-ok"></i>','offText'=>'<i class="glyphicon glyphicon-remove"></i>','onColor' => 'success','offColor' => 'danger',],
              ]);          
        }
      }      
      ?>
  </td>
  <td style>
    <?
  foreach ($model->meetingPlaceChoices as $mpc) {
    if (count($model->meeting->participants)==0) break;    
    if ($mpc->user_id == $model->meeting->participants[0]->participant_id) {
        if ($mpc->status == $mpc::STATUS_YES)
          $value = 1;
        else if ($mpc->status == $mpc::STATUS_NO)
          $value =0;
        else if ($mpc->status == $mpc::STATUS_UNKNOWN)
          $value =-1;
            echo SwitchInput::widget([
          'type'=>SwitchInput::CHECKBOX,         
          'name' => 'meeting-place-choice',
          'id'=>'mpc-'.$mpc->id,          
          'tristate'=>true,
          'indeterminateValue'=>-1,
          'indeterminateToggle'=>false,
          'disabled'=>true,
          'value' => $value,
          'pluginOptions' => ['size' => 'mini','onText' => '<i class="glyphicon glyphicon-ok"></i>','offText'=>'<i class="glyphicon glyphicon-remove"></i>','onColor' => 'success','offColor' => 'danger'],
      ]);          
    }
  }
    ?>
  </td>
  <td style>
      
      <?
      if ($placeCount>1) {
        if ($model->status == $model::STATUS_SELECTED) {
            $value = $model->id;
        }    else {
          $value = 0;        
        } 
        echo SwitchInput::widget([
          'type' => SwitchInput::RADIO,
          'name' => 'place-chooser',
            'items' => [
                [ 'value' => $model->id],
            ],
            'value' => $value,
            'pluginOptions' => [  'size' => 'mini','handleWidth'=>60,'onText' => '<i class="glyphicon glyphicon-ok"></i>','offText'=>'<i class="glyphicon glyphicon-remove"></i>'],
            'labelOptions' => ['style' => 'font-size: 12px'],
        ]);              
      }
      ?>
  </td>
</tr>

Fechas y Horarios

Para agregar Fechas y Horarios, integramos el Date Time Picker Bootstrap jQuery a través de la extensión Date Time 2Amigos Yii2

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\datetimepicker\DateTimePicker;

/* @var $this yii\web\View */
/* @var $model frontend\models\MeetingTime */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="meeting-time-form">

  <div class="row">
    <div class="col-md-4">
    <?php $form = ActiveForm::begin(); ?>

    <?= DateTimePicker::widget([
        'model' => $model,
        'attribute' => 'start',
        'language' => 'en',
        'size' => 'ms',
        'clientOptions' => [
            'autoclose' => true,
            'format' => 'MM dd, yyyy HH:ii P',
            'todayBtn' => true,
            'minuteStep'=> 15, 
            'pickerPosition' => 'bottom-left',
        ]
    ]);?>   
    </div>
  </div>  
  <div class="clearfix"><p></div>
  <div class="row">
      <div class="col-md-4">
     <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('frontend', 'Add') : Yii::t('frontend', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
    </div>
  </div>
    <?php ActiveForm::end(); ?>

Hay algunas cuántas mejoras que me gustaría hacer a este widget en un futuro. Me gustaría hacerlo abrir automáticamente en la carga, para lo cuál actualmente no parece tener un ajuste.

De nuevo, usamos el validador único para asegurar que la fecha específica no ha sido ya agregada a la reunión:

public function rules()
    {
        return [
            [['meeting_id', 'start', 'suggested_by'], 'required'],
            [['meeting_id', 'start', 'suggested_by', 'status', 'created_at', 'updated_at'], 'integer'],
            [['start'], 'unique', 'targetAttribute' => ['start','meeting_id'], 'message'=>Yii::t('frontend','This date and time has already been suggested.')],
            
        ];
    }

En la página de vista Reunión, el panel Fechas y Horarios está construido similar a Lugares:

<?php
use yii\helpers\Html;
use yii\widgets\ListView;
?>
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading"><div class="row"><div class="col-lg-6"><h4><?= Yii::t('frontend','Dates &amp; Times') ?></h4></div><div class="col-lg-6" ><div style="float:right;"><?= Html::a(Yii::t('frontend', ''), ['meeting-time/create', 'meeting_id' => $model->id], ['class' => 'btn btn-primary  glyphicon glyphicon-plus']) ?></div></div></div></div>

  <?php
   if ($timeProvider->count>0): 
  ?>
  <!-- Table -->
  <table class="table">
     <thead>
     <tr class="small-header">
       <td></td>
       <td ><?=Yii::t('frontend','You') ?></td>
       <td ><?=Yii::t('frontend','Them') ?></td>
       <td >
         <?php
          if ($timeProvider->count>1) echo Yii::t('frontend','Choose');
         ?>
        </td>
    </tr>
    </thead>
    <?= ListView::widget([ 
           'dataProvider' => $timeProvider, 
           'itemOptions' => ['class' => 'item'], 
           'layout' => '{items}',
           'itemView' => '_list', 
           'viewParams' => ['timeCount'=>$timeProvider->count],           
       ]) ?>
  </table>
  <?php else: ?>
  <?php endif; ?>
</div>

Aquí está la vista _list.php:

<?php
use yii\helpers\Html;
use frontend\models\Meeting;
use \kartik\switchinput\SwitchInput;
?>

<tr > 
  <td style >
        <?= Meeting::friendlyDateFromTimestamp($model->start) ?>
  </td>
  <td style>
      <?
      foreach ($model->meetingTimeChoices as $mtc) {
        if ($mtc->user_id == $model->meeting->owner_id) {
            if ($mtc->status == $mtc::STATUS_YES)
              $value = 1;
            else
              $value =0;
              echo SwitchInput::widget([
              'type' => SwitchInput::CHECKBOX,              
              'name' => 'meeting-time-choice',
              'id'=>'mtc-'.$mtc->id,
              'value' => $value,
              'pluginOptions' => ['size' => 'mini','onText' => '<i class="glyphicon glyphicon-ok"></i>','offText'=>'<i class="glyphicon glyphicon-remove"></i>','onColor' => 'success','offColor' => 'danger',],
              ]);          
        }
      }
      ?>
  </td>
  <td style>
    <?
    foreach ($model->meetingTimeChoices as $mtc) {
      if (count($model->meeting->participants)==0) break;
      if ($mtc->user_id == $model->meeting->participants[0]->participant_id) {
          if ($mtc->status == $mtc::STATUS_YES)
            $value = 1;
          else if ($mtc->status == $mtc::STATUS_NO)
            $value =0;
          else if ($mtc->status == $mtc::STATUS_UNKNOWN)
            $value =-1;
          echo SwitchInput::widget([
            'type' => SwitchInput::CHECKBOX,          
            'name' => 'meeting-time-choice',
            'id'=>'mtc-'.$mtc->id,
            'tristate'=>true,
            'indeterminateValue'=>-1,
            'indeterminateToggle'=>false,
            'disabled'=>true,
            'value' => $value,
            'pluginOptions' => ['size' => 'mini','onText' => '<i class="glyphicon glyphicon-ok"></i>','offText'=>'<i class="glyphicon glyphicon-remove"></i>','onColor' => 'success','offColor' => 'danger',],
        ]);          
      }
    }
    ?>
  </td>
  <td style>
      <?
      if ($timeCount>1) {
        if ($model->status == $model::STATUS_SELECTED) {
            $value = $model->id;
        }    else {
          $value = 0;        
        } 
        echo SwitchInput::widget([
            'type' => SwitchInput::RADIO,
            'name' => 'time-chooser',
            'items' => [
                [ 'value' => $model->id],
            ],
            'value' => $value,
            'pluginOptions' => [  'size' => 'mini','handleWidth'=>60,'onText' => '<i class="glyphicon glyphicon-ok"></i>','offText'=>'<i class="glyphicon glyphicon-remove"></i>'],
            'labelOptions' => ['style' => 'font-size: 12px'],
        ]);            
      }
      ?>
  </td>
</tr>


Notas

Las Notas de Reunión permiten a los usuarios comunicar mientras sugieres y seleccionan lugares y horarios, sin tener que mandarse correos entre ellos por separado.

Aquí está como lucen las notas en la página de Reunión:

La implementación de notas es casi idéntica a la implementación anterior de Lugares y Horarios. Puedes revisar el controlador MeetingNote y archivos de vista \frontend\views\meeting-note para más información.

¿Qué Sigue?

Espero que hayas aprendido algo nuevo con este tutorial. Espera próximos tutoriales en mi serie Construyendo Tu Startup Con PHP---hay muchas características divertidas por venir.

En el siguiente tutorial, profundizaré en implementar las elecciones de Lugar y Horario con AJAX. Después de eso, vamos a comenzar a construir mensajes de correo para entregar mensajes de invitaciones, recoger respuestas de participantes en la página de programación, y finalizar reuniones para el mundo real.

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