Aufbau Ihres Startups mit PHP: Planen eines Meetings

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

Final product image — What You'll Be Creating

Dieses Tutorial ist Teil der Reihe Building Your Startup With PHP auf Tuts+. In dieser Serie führe ich Sie durch den Start eines Startups vom Konzept zur Realität anhand meiner Meeting Planner-App als Beispiel aus dem wirklichen Leben. Bei jedem Schritt auf dem Weg veröffentlichen wir den Meeting Planner-Code als Open Source-Beispiele, aus denen Sie lernen können. Wir werden uns auch mit geschäftlichen Problemen im Zusammenhang mit Startups befassen, sobald diese auftreten.

Der gesamte Code für Meeting Planner ist im Yii2 Framework für PHP geschrieben. Wenn Sie mehr über Yii2 erfahren möchten, lesen Sie unsere parallele Serie Programming With Yii2 bei Tuts+. Vielleicht möchten Sie auch auf meiner Knowledge Base-Website nach Yii2-Fragen suchen, The Yii2 Developer Exchange.

In den letzten sechs Tutorials haben wir die Grundlagen für die Anwendungsunterstützung auf verschiedene Weise gelegt: Benutzer, Orte, Kontakte, Einstellungen und Lokalisierung. Ich wette, Sie werden genauso begeistert sein wie ich, dass wir endlich bereit sind, den Zeitplan für eine Besprechungsfunktion zu erstellen. Vielen Dank für Ihre Geduld, da ich die Infrastruktur für die unterhaltsamen, integralen Bestandteile dieser Anwendung aufgebaut habe.

Das Codierungs-Tutorial zur Unterstützung der Zeitplan-Meeting-Funktionalität erstreckt sich jedoch über mindestens vier Episoden. Diese beiden nächsten Episoden konzentrieren sich hauptsächlich darauf, Unterstützung für die grundlegende Benutzererfahrung aufzubauen, den Teilnehmer, den Ort sowie Datum und Uhrzeit für eine Besprechung auszuwählen und diese in der Datenbank zu speichern. Danach kümmern wir uns um die Zustellung der Besprechungsanfrage per E-Mail. Wir werden später in der Serie zurückkehren, um die Benutzeroberfläche zu optimieren und zu verbessern, da dies für den Erfolg dieses Produkts von entscheidender Bedeutung ist. Die Hauptaufgabe für dieses spätere Update besteht darin, Seitenaktualisierungen im Besprechungsplanungsprozess zu vermeiden.

Das Erstellen der Funktionen für dieses Tutorial erforderte eine Menge Code - einige davon wurden automatisch von Yii's Gii generiert und viele von Hand. Aufgrund der Komplexität der Bereitstellung der ersten Teile dieser Funktion habe ich mich auf eine recht rudimentäre Benutzeroberfläche konzentriert, die ich iterativ polieren werde.

Das Erstellen dieser Funktion berührt so viele Aspekte der Programmierung im Yii2-Framework: Active Record-Migrationen, Beziehungen und Validierungen, Gii-Codegenerierung, Bootstrap, Erweiterungen und Widgets der Yii2-JQuery-Benutzeroberfläche, AJAX, Rendern von Teilansichten, DRY-Codierungspraktiken usw. Es war schwierig auszuwählen, was hier behandelt werden sollte. Sie werden viele Änderungen am Repository gegenüber früheren Tutorial-Episoden bemerken.

Wenn Sie Fragen oder Kommentare haben, posten Sie diese bitte unten. Ich nehme an den Diskussionen teil.

Die Meetings-Seite

Bootstrap-Registerkarten

Eines der ersten Dinge, die ich tun muss, ist, verschiedene Registerkarten für zukünftige, vergangene und abgesagte Meetings zu erstellen.

The Meetings Page with Tabs for Upcoming Past and Canceled

Die Implementierung ist nur ein weiteres Beispiel dafür, wie großartig Bootstrap ist und wie solide die Yii2-Integration mit Bootstrap 3.x ist. Bootstrap verfügt über vorgefertigte Registerkarten.

In MeetingController laden wir Abfragen für jeden Besprechungstyp vor und rendern die Indexansicht:

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,
    ]);
}

Anschließend implementieren wir in der Indexansicht unseren Bootstrap-Code mit Registerkarten:

<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>

Wenn wir uns näher mit dieser Serie befassen, werde ich eine Menge Platzhalter für die Arbeit übrig lassen. Eines dieser Dinge ist die Implementierung dieser Registerkarten über AJAX, damit wir nicht drei Abfragen im Voraus laden.

Ticketverfolgung

Ich werde auch damit beginnen, Tickets in der Issue-Tracking-Anwendung Lighthouse für meine zukünftige Arbeit zu erstellen, um die Nachverfolgung zu vereinfachen. Ich werde in einem zukünftigen Tutorial über Lighthouse sprechen.

Lighthouse Issue Tracker AJAXify Meeting Page Tabs

Was steckt hinter der Planung eines Meetings?

Die einfache Aufgabe, einen Rahmen für die Planung eines Meetings zu erstellen, erwies sich unter der Haube als recht komplex und detailliert. Ich werde dies schrittweise polieren, während wir uns durch die Serie bewegen.

Mein erstes Ziel war es, nur das grundlegende Framework zu erstellen, damit ich die Funktionen der Besprechungsplanung testen kann.

Besprechungen bestehen aus einer Handvoll ActiveRecord-Datenmodellen, z. Teilnehmer, MeetingTime, MeetingPlace, MeetingNote usw. Anfangs wollte ich nur die Yii-Codegenerierung verwenden, um CRUD für jedes dieser Modelle zu erstellen und es dann in eine einzelne Planungsseite zu integrieren.

Die Idee ist, MVC zu verwenden, um all diese Aktionen zu erstellen und dabei so weit wie möglich an der DRY-Methodik festzuhalten. Anfänglich wird die Benutzeroberfläche Seitenaktualisierungen durchführen, aber später werden wir zurückkommen und alle diese Modelle über AJAX mit demselben MVC-Code integrieren.

Das Formular zum Erstellen eines Meetings

Bei vielen Modellen habe ich zunächst den in früheren Tutorials beschriebenen Prozess zur Verwendung von Yii-Codegenerator Gii zum Erstellen von CRUD durchlaufen. Dann habe ich sie nach Bedarf angepasst. Im Moment bleibe ich bei einem sehr einfachen Formular zum Erstellen eines Meetings - es enthält noch nicht einmal die E-Mail-Adresse des Teilnehmers. Auf diese Weise kann ich schnell einen grundlegenden Besprechungsdatensatz erstellen und an der Planungsseite arbeiten.

Sobald das Formular gesendet wurde, können Sie die Besprechungsseite anzeigen. Natürlich werde ich dieses Formular und den ersten Prozess rechtzeitig ändern.

Die Besprechungsseite

Erinnern Sie sich an mein Modell für das erste Tutorial in dieser Reihe:

The Original Meeting Planner Mockup for Scheduling a Meeting

Hier ist eine frühe Darstellung der Form, in der ich arbeite:

The Current Form of Meeting Planners Schedule a Meeting Feature

Es gibt eine Menge Infrastruktur, Code (sowohl automatisch generiert als auch manuell generiert) und Widgets von Drittanbietern, die dafür verantwortlich sind. Ich werde dich Stück für Stück durch das Buch führen.

Bootstrap-Panels und -Tabellen

Obwohl dies wahrscheinlich nicht das endgültige Design ist, habe ich mich für die Verwendung von Bootstrap-Bedienfeldern entschieden, um die Seite zwischen Eigenschaften, Orten, Datums- und Uhrzeitangaben sowie Notizen zu organisieren. Die Seite selbst wird durch die Aktion View des Besprechungscontrollers gerendert und ruft für jedes dieser Elemente Teilansichten zu den jeweiligen Modellen auf.

Ich musste es nicht so erstellen, aber ich wollte absichtlich das gesamte integrierte MVC-Framework von Yii nutzen und die Dinge so weit wie möglich integrieren. Ich hatte die Hoffnung, dass es in Zukunft einfacher sein wird, die gesamte Seite zu AJAXifizieren, Seitenaktualisierungen zu reduzieren und die Einfachheit und Wartbarkeit des Quellcodes zu erhöhen.

So funktioniert die Aktion View Meeting-Controller. Es lädt ActiveDataProviders für jedes der Modelle und rendert dann die Besprechungsansichtsdatei:

/**
     * 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,
        ]);
    }

Teilansichten

Durch die Verwendung aller Ansichten in jedem der zugeordneten Modelle ist es ziemlich einfach, die gesamte Zeitplanseite mit MVC-Teilansichten anzuzeigen. In der Besprechungsansicht werden alle _panel-Ansichten für die anderen Modelle gerendert. Hier können Sie die Dokumentation zur Rendermethode von Yii2 einsehen.

        <?= $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,
        ]) ?>

Fehlende Modelle

Beim Erstellen dieser Funktionalität wurde mir klar, dass ich einige notwendige Modelle vernachlässigt hatte: MeetingPlaceChoice und MeetingTimeChoice. Diese sind erforderlich, um die Verfügbarkeit des Veranstalters und der Teilnehmer für bestimmte MeetingPlaces und MeetingTimes zu speichern.

Hier ist die Migration für 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');   

Hier ist die Migration für 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');  

Mit den ActiveRecord-Migrationen von Yii können Sie Ihr Datenbankschema im Verlauf Ihres Produkts auf einfache Weise programmgesteuert erweitern.

Diese Modelle bestimmen den Status der Switch-Widgets (die die Verfügbarkeit der Benutzer widerspiegeln), die Sie oben in den Zeilen für jeden Ort und jede Uhrzeit sehen. Im folgenden Tutorial werde ich Ihnen zeigen, wie wir diese Widgets initialisieren und AJAX in Yii verwenden, um ihren Status ohne Seitenaktualisierung zu aktualisieren.

Planen von Warnungen

Die PrepareView ermittelt den Status der Besprechung und warnt den Benutzer bei Bedarf, dass die Einladung nicht gesendet wurde:

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 verfügt über eine integrierte Unterstützung für die Anzeige von Bootstrap-Warnungen, die als Flashes bezeichnet werden:

Meeting Planner setFlash Bootstrap alerts

Befehlsschaltflächen

Hier ist der Code für einen Beispielcontainer für Besprechungsansichten mit den oben gezeigten Befehlsschaltflächen:

<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>

Jede Schaltfläche wird mit den HTML-Hilfs- und Bootstrap-Schaltflächenstilen von Yii erstellt:

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

Für die Schaltflächen zum Abbrechen und Bearbeiten von Eigenschaften habe ich Glyphicons verwendet. Glyphicons sind wunderschön und frei in Bootstrap enthalten und in Yii2 integriert.

Was machen diese Befehle?

Sobald der Benutzer einen Teilnehmer und mindestens einen Ort sowie Datum und Uhrzeit hinzugefügt hat, kann er die Einladung senden. Diese Funktion sendet dem Benutzer eine Besprechungseinladung per E-Mail, die ich in Kürze in einem Tutorial beschreiben werde.

Über die Schaltfläche Finalisieren kann der Organisator (oder Teilnehmer) den Status des Meetings von "Planung" auf "Bevorstehend" ändern. Die Idee ist, dass nach Auswahl eines Ortes und einer Uhrzeit das Meeting "abgeschlossen" werden kann. Zuvor hat der Teilnehmer die Möglichkeit, optional andere Orte und Datumsangaben vorzuschlagen, und der Veranstalter (oder beide) hat die Möglichkeit, den endgültigen Ort und die Datums- und Uhrzeitangabe auszuwählen.

Mit der Schaltfläche Abbrechen wird die Besprechung abgebrochen und auf die Registerkarte Abgebrochen auf der Seite Besprechungen verschoben.

Teilnehmer

Als nächstes fügt der Benutzer Personen hinzu.

Hinweis: In meinem Produkt mit minimaler Lebensfähigkeit ist nur ein Teilnehmer zulässig, wir können jedoch später weitere hinzufügen.

Wenn Sie sich an die Freundes-Tabelle erinnern, die wir in einem früheren Lernprogramm erstellt haben, können Benutzer eine neue E-Mail-Adresse eingeben oder ihre Eingabe beschleunigen, indem die automatische Vervollständigung aus ihren vorhandenen Freunden und früheren Besprechungen geladen wird.

Meeting Planner invite a participant with autocomplete

In Zukunft werden wir hier mehr Optionen für die Benutzeroberfläche haben - einschließlich häufiger Teilnehmer.

Oben auf dem Teilnehmer-Controller laden wir die Freunde in ein Array, das vom JQuery-Widget für die automatische Vervollständigung verwendet wird. Die Unterstützung ist wiederum in Yii2 integriert:

/**
     * 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());

Hier ist die _form.php in \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,
           ],
          ]);        
    ?>

Ich habe die Entwurfsentscheidung getroffen, alle Teilnehmer in der Benutzertabelle zu speichern. Ich kann das bereuen - noch nicht sicher. Dies vereinfacht jedoch den Prozess, die es den Nutzern ermöglicht, die Site schnell zu nutzen, erheblich und vereinfacht das gesamte Datenmodell.

Wenn ein Benutzer jemanden einlädt, der dem System unbekannt ist (eine neue E-Mail-Adresse), registrieren wir ihn passiv in der Benutzertabelle.

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]);
          } 

Wir erstellen einen Benutzernamen basierend auf ihrer E-Mail-Adresse. Ich benutze Yiis Schneckengenerator in seinem Inflector-Helfer. Wir erstellen vorerst ein zufälliges Passwort mit dem Sicherheitshelfer von Yii. Wenn ich Vanilla PHP verwenden würde, müsste ich wahrscheinlich andere Funktionen für diese Funktionen integrieren. Stattdessen ist es direkt eingebaut.

Fahren wir mit dem Hinzufügen von Orten fort.

Setzt

Die Verwendung der MVC von Yii für jeden Controller und jedes Modell bietet große Vorteile, anstatt all diese Funktionen in den Meeting-Controller zu codieren. Dies macht das Verstehen und Verwalten des Codes viel einfacher und übersichtlicher.

Ich bemerkte jedoch schnell, dass ich die Standard-Breadcrumbs anpassen musste, um auf die aktuelle Besprechungsseite und nicht auf den Index oder die Ansicht für ein bestimmtes Modell zurückzugreifen.

Add a Meeting Place Breadcrumbs

Wir verwenden das MeetingPlace-Modell, um Besprechungen Orte hinzuzufügen. In \frontend\views\meet-place\create.php musste ich einfach die Links im breadcrumbs-Bereich anpassen:

<?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;

?>

Unterstützung für das direkte Hinzufügen von Google Places hinzufügen

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

Ich wollte nicht nur das Formular zur Ortserstellung anpassen, damit der Benutzer zuvor verwendete Orte hinzufügen kann, sondern auch, um neue Google Places im laufenden Betrieb hinzuzufügen.

Grundsätzlich musste ich die Unterstützung, die wir im Google Places-Tutorial hier in der MeetingPlace-Erstellung erstellt haben, replizieren:

<?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>

Ich musste auch die ausgefeilte Validierungsunterstützung von Yii2 stärker nutzen. Im folgenden MeetingPlace-Modell verwenden wir die eindeutige Validierung von Yii2, um einen Fehler zu melden, wenn jemand versucht, einen bereits vorgeschlagenen Ort für ein Meeting zu finden:

    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.')],

Ich habe außerdem eine benutzerdefinierte Fehlerbedingung in der MeetingPlaceController-Erstellungsaktion hinzugefügt, wenn ein Nutzer Orte aus seiner Liste sowie Google Place auswählt - obwohl dies möglicherweise eine optionale Funktion ist, die beibehalten werden soll (haben Sie eine Meinung? Beitrag in den Kommentaren unten):

     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,
              ]);             
           }

Ich habe die addErrors-Methode von Yii2 verwendet.

Ich habe auch einen Fehler aus Episode drei behoben, bei dem mehrere Kartenfelder erstellt wurden, wenn jemand die Google Place-Auswahl änderte. Die Überprüfung der Anzahl der in der article-Auswahl vorhandenen Kinder hat Folgendes behoben:

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);  
  }

In Zukunft wird dieses Erstellungsformular eine Reihe wichtiger Funktionen enthalten:

Ermöglichen Sie Benutzern, ihre aktuelle Geolokalisierung hinzuzufügen.
Schlagen Sie vom Benutzer vorgeschlagene häufige Orte vor.
Bieten Sie schnellen Zugriff auf die Lieblingsorte des Benutzers.
Schlagen Sie Orte in der Nähe (in gleichem Abstand) des Benutzers und der Teilnehmer vor.
Schlagen Sie gesponserte Plätze von bezahlten Werbetreibenden vor.
Ermöglichen, dass Orte und Datums- und Uhrzeitangaben vom Veranstalter entfernt werden - möglicherweise unter der Bedingung, dass sie von den Teilnehmern nicht gesehen oder beantwortet wurden.

Es kann auch nützlich sein, Benutzern das Notieren bestimmter Orte und Datumszeiten zu ermöglichen. Zum Beispiel könnte ich bezeichnen, dass "dieser Ort am Donnerstagmorgen gut für mich funktioniert, aber nicht am Freitagnachmittag" oder "wenn Sie diesmal wählen, können wir es im Caffe Vita auf dem Capitol Hill tun". Wenn Sie eine Meinung zu dieser Funktion haben (was die Komplexität erhöhen würde), geben Sie unten einen Kommentar ab.

Anzeigen der Panels

Für jedes Modell verwenden wir eine ähnliche Hierarchie von Ansichten und Yii2-Komponenten. Der Meeting Controller rendert die Ansicht für _panel.php in \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>

Der Umriss der Bootstrap-kompatiblen Tabelle befindet sich in _panel.php. Anschließend verwenden wir das Widget Yii2 Listview, um jede Datenzeile in Tabellenform anzuzeigen. Der itemView-Teil befindet sich in _list.php.

Beachten Sie, dass wir eine benutzerdefinierte Variable namens placeCount über viewParams übergeben. Dies ist praktisch zum Konfigurieren der Schaltflächen in der Tabelle.

Hier ist die Ansicht _list.php, die ich im nächsten Tutorial ausführlicher behandeln werde, einschließlich der Widgets für die Schaltereingabe und der AJAX-Implementierung.

<?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>

Daten & Zeiten

Um Daten und Zeiten hinzuzufügen, integrieren wir die Bootstrap JQuery Date Time-Auswahl über die Erweiterung 2Amigos Yii2 Date Time

<?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(); ?>

Es gibt einige Verbesserungen, die ich in Zukunft an diesem Widget vornehmen möchte. Ich möchte es beim Laden automatisch öffnen, für das es derzeit keine Einstellung zu geben scheint.

Auch hier verwenden wir den eindeutigen Validator, um sicherzustellen, dass das bestimmte Datum und die Uhrzeit noch nicht zum Meeting hinzugefügt wurden:

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.')],
            
        ];
    }

Auf der Seite "Besprechungsansicht" wird das Bedienfeld "Daten und Zeiten" ähnlich wie "Orte" erstellt:

<?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>

Hier ist die Ansicht _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>


Anmerkungen

Mithilfe von Besprechungsnotizen können Benutzer nach Belieben kommunizieren und Orte und Datums- und Uhrzeitangaben auswählen, ohne sich gegenseitig separat per E-Mail benachrichtigen zu müssen.

So sehen Notizen auf der Besprechungsseite aus:

Die Implementierung von Notizen ist nahezu identisch mit der obigen Implementierung von Orten und Datumsangaben. Weitere Informationen finden Sie in den Dateien MeetingNote-Controller und \frontend\views\meeting-note-Ansicht.

Was kommt als nächstes?

Ich hoffe, Sie haben mit diesem Tutorial etwas Neues gelernt. Achten Sie auf kommende Tutorials in meiner Reihe Erstellen Sie Ihr Startup mit PHP - es stehen viele unterhaltsame Funktionen an.

Im nächsten Tutorial werde ich mich eingehend mit der Implementierung der Optionen für Ort und Datum und Uhrzeit mit AJAX befassen. Danach beginnen wir mit dem Erstellen von E-Mail-Nachrichten, um die Nachrichteneinladungen zuzustellen, die Antworten der Teilnehmer auf der Zeitplanseite zu sammeln und Besprechungen für die reale Welt abzuschließen.

Bitte zögern Sie nicht, Ihre Fragen und Kommentare unten hinzuzufügen; Ich nehme in der Regel an den Diskussionen teil. Sie können mich auch auf Twitter @reifman erreichen oder mir direkt eine E-Mail senden.