Advertisement
  1. Code
  2. Yii

Erstellen Sie Ihr Startup mit PHP: Planen der Verfügbarkeit und Auswahlmöglichkeiten

by
Read Time:14 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Scheduling a Meeting
Using the Mailgun Store(): A Temporary Mailbox for Your App's Incoming Email

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Dieses Tutorial ist Teil der Reihe Building Your Startup With PHP auf Tuts+. In dieser Serie führe ich Sie durch den Start eines Startups vom Konzept zur Realität anhand meiner Meeting Planner-App als Beispiel aus dem wirklichen Leben. Bei jedem Schritt auf dem Weg werde ich den Meeting Planner-Code als Open Source-Beispiele veröffentlichen, aus denen Sie lernen können. Ich werde auch auf geschäftliche Probleme im Zusammenhang mit Startups eingehen, sobald diese auftreten.

Der gesamte Code für Meeting Planner ist im Yii2 Framework für PHP geschrieben. Wenn Sie mehr über Yii2 erfahren möchten, lesen Sie meine parallele Serie Programmieren mit Yii2 bei Tuts+. Vielleicht möchten Sie auch auf meiner Knowledge Base-Website nach Yii2-Fragen suchen, The Yii2 Developer Exchange.

Die Codierung für die Zeitplan-Besprechungsfunktion erstreckt sich über mindestens vier Episoden. Dies ist die zweite dieser vier Folgen, in der AJAX zur Planungsseite hinzugefügt wird, damit Benutzer ihre Verfügbarkeit festlegen und Orte, Daten und Zeiten auswählen können. Wenn Sie das vorherige Tutorial zum Planen eines Meetings verpasst haben, lesen Sie es bitte zurück, bevor Sie fortfahren.

Im nächsten Tutorial werden wir uns mit der Zustellung der Besprechungsanfrage per E-Mail befassen. Wir werden später zurückkehren, um die Benutzeroberfläche zu optimieren und zu verbessern, da dies für den Erfolg dieses Produkts von entscheidender Bedeutung ist.

Anzeigen der Verfügbarkeit aus der Datenbank

The Meeting Scheduling View PageThe Meeting Scheduling View PageThe Meeting Scheduling View Page

Die Ansicht des Besprechungsplans war relativ komplex zu codieren. Das visuelle Layout der Tabellenspalten hängt nicht direkt mit der Art und Weise zusammen, wie wir die zugehörigen Daten in unserer Datenbank und in unserem Schema speichern. Glücklicherweise verfügt jede Besprechung nicht über einen großen Datensatz mit Optionen für Ort und Datum und Uhrzeit, sodass dies kein besonderes Leistungsproblem darstellt.

In unserem Schema wird die Verfügbarkeit von Plätzen für Organisatoren und Teilnehmer (d. h. Ob ein Platz für diese Besprechung für sie akzeptabel ist) in der Tabelle MeetingPlaceChoice gespeichert. Unter Verwendung unseres relationalen Modells verfügt jedes Meeting über viele MeetingPlaces mit vielen MeetingPlaceChoices.

Verwechseln Sie die MeetingPlaceChoice-Tabelle nicht mit der endgültigen Auswahl für einen Ort, der im MeetingPlace->status gespeichert ist.

Die oben gezeigte Tabelle wird anders angezeigt, wenn der Veranstalter sie anzeigt:

  • Platz 1 | Veranstalter | Teilnehmer | MeetingPlace.choice
  • Platz 2 | Veranstalter | Teilnehmer | MeetingPlace.choice

Ab wann der Teilnehmer es sieht:

  • Platz 1 | Teilnehmer | Veranstalter | (kann vielleicht MeetingPlace.choice machen)
  • Platz 2 | Teilnehmer | Veranstalter | (kann vielleicht MeetingPlace.choice machen)

Lassen Sie uns nun diskutieren, wie diese Tabellen in den Ansichten implementiert werden.

Anzeigen einer Tabelle mit Bootstrap

Im Moment habe ich mich dafür entschieden, jeden Bereich anzuzeigen, z. Ort oder Datum und Uhrzeit in einem eigenen Bootstrap-Bereich mit Tabellen.

In \frontend\views\meeting\view.php sehen Sie die Aufnahme für das Places-Bedienfeld wie folgt:

Hier ist ein Teil der Panel-Ansichtsdatei für den meeting-place. Dies richtet das Tabellenraster ein und enthält ein Listenansicht-Widget zum Anzeigen der Zeilen:

Schauen wir uns die Listenansicht des meeting-place genauer an.

Anzeigen der Zeilen mit Bootstrap-Switch-Widgets

In der Yii-Listenansicht wird für jeden Ort eine Datenzeile angezeigt. Der Code funktioniert für Datums- und Uhrzeitangaben nahezu identisch.

Ich verwende Krajees Yii2 Switch Input Widget für den Bootstrap Switch anstelle langweiliger Kontrollkästchen und Kombinationsfelder:

Examples of The Bootstrap Switch InputExamples of The Bootstrap Switch InputExamples of The Bootstrap Switch Input

Ich mag die Art und Weise, wie die Drei-Status-Option es uns ermöglicht, den Teilnehmern einen eindeutigen Status anzuzeigen, bevor sie eine Auswahl treffen. Außerdem können wir dem Veranstalter zeigen, dass der Teilnehmer noch keine Auswahl getroffen hat.

Lassen Sie uns Spalte für Spalte durch den Code gehen. Hier ist das Place-Panel und die Tabelle, die wir implementieren:

The Place PanelThe Place PanelThe Place Panel

Die Platzspalte

In der ersten Spalte verwende ich den Yii-HTML-Link-Helfer, um den Namen des Ortes mit seiner eigenen Ansichtsseite zu verknüpfen. Beachten Sie, wie wir den Orts-Slug verwenden.

Die Organizer-Spalte

Um die Auswahl des Organisators zu finden, durchlaufen wir das Array von MeetingPlaceChoices und ordnen user_id der meeting->owner_id zu:

Zur Auswahl Ihrer Verfügbarkeit an einem bestimmten Ort verwenden wir den Kontrollkästchenmodus des Schaltereingangs, d. H. Dieser Ort funktioniert für Sie (ein) oder nicht (aus).

Die value-Eigenschaft setzt den Schalter beim Laden. Die ID, die der MeetingPlaceChoice->id entspricht, wird für AJAX unten verwendet, um diesen bestimmten Switch zu identifizieren.

Möglicherweise stellen Sie auch fest, dass wir anstelle von Beschriftungen Glyphicons für Ja und Nein verwenden.

Die Teilnehmerspalte

Der Code für den Teilnehmer implementiert Drei-Zustands-Schalter. d.h. dieser Ort funktioniert für Sie (ein), er funktioniert nicht (aus) oder Sie haben noch nicht angegeben (unbestimmt):

Wenn wir Unterstützung für Besprechungen hinzufügen, bei denen der Teilnehmer Orte und Datums- und Uhrzeitangaben vorschlagen kann, fügen wir der Organisator-Spalte auch Widgets mit drei Status hinzu.

Anzeigen des Schalters "Ort und Datum auswählen"

Wenn der Veranstalter das Meeting anzeigt, können er den endgültigen Ort und die Uhrzeit des Meetings auswählen. In Kürze werden wir auch Unterstützung für Besprechungen hinzufügen, damit der Teilnehmer diese auswählen kann.

In diesem Fall trifft der Benutzer eine zeilenübergreifende Auswahl (Auswahl einer der aufgelisteten Stellen). Dies erfordert, dass wir den Schaltereingang im Optionsfeldmodus verwenden. Bei den AJAX-Ereignissen für die Auswahl können wir nur die Eigenschaft name abhören - es wird keine ID benötigt, da nur eine Auswahl für das Panel möglich ist.

Ich wollte auch, dass der Auswahlschalter anders aussieht als die Verfügbarkeitsschalter, also habe ich sie breiter gemacht und verschiedene Farben verwendet.

Jetzt werde ich Ihnen zeigen, wie wir die AJAX-Unterstützung für all diese Wähler implementiert haben.

Implementierung der AJAX-Unterstützung

Natürlich wollte ich vermeiden, dass Benutzer Änderungen an diesen Formularen speichern müssen. Stattdessen wollte ich, dass die Switches den Status über AJAX ohne Seitenaktualisierung ändern.

Der Code ist unterteilt in das Einrichten von Ereignis-Listenern, um auf Statusänderungen zu reagieren, und Controller-Aktionen, um die Änderungen in unserer Datenbank aufzuzeichnen. Es ist auch etwas anders für die Kontrollkästchenschalter als für die Funkschalter.

Erstellen von Ereignis-Listenern

Wir erstellen Ereignis-Listener, um Code auszuführen, wenn der Status einer Schaltfläche geändert wird. Das Listen-Ereignis ist JavaScript-Code, der von PHP in der Bedienfeldansicht generiert wird (für die gesamte Optionstabelle).

Hier ist der Code am Ende von \frontend\views\meeting-place\_panel.php:

Übrigens, wenn mir jemand den Namen der JS-Blockkürzel für PHP sagen kann, posten Sie ihn im Kommentarbereich. Ich würde gerne wissen. Einige Dinge sind schwer zu suchen.

Die Funktion registerJs in Yii rendert das Skript für eine bestimmte $position auf der Seite. In diesem Fall handelt es sich um ein On-Ready-Ereignis.

Der obige Code richtet Listener-Ereignisse für alle Optionsfelder zur Ortsauswahl für alle Orte mit der Eigenschaft name ein. Der Zielwert der Veranstaltung repräsentiert die gewählte Treffpunkt-ID. Ich werde gleich mehr über die AJAX-Funktion sprechen.

Mit anderen Worten, die Switch-Radio-Ereignisse reagieren darauf, dass der Organisator (im Allgemeinen) einen Ort oder eine Uhrzeit auswählt, um die Besprechung abzuschließen, und die Besprechungsort- oder Besprechungszeit-ID überträgt.

Hier ist der Code zum Abhören von Verfügbarkeitsänderungen mit den Kontrollkästchen für die Schaltereingabe:

Der Listener ist für alle Eigenschaften des Namens für die meeting-place-choice eingerichtet, muss jedoch die ID übergeben, um genau anzugeben, welche MeetingPlaceChoice geändert wird.

Zur Verdeutlichung können Benutzer mithilfe der Ereignis-Listener für Schalter-Eingabekästchen angeben, ob sie für einen Ort oder eine Uhrzeit verfügbar sind oder nicht. Sie senden eine ID zur meeting-place-choice oder eine ID zur meeting-place-time.

Schauen wir uns nun genauer an, wie die AJAX-Ereignisse unsere PHP-basierten Controller-Aktionen aufrufen, um Statusänderungen in der Datenbank aufzuzeichnen.

Erstellen der Controller-Aktionen

Hier ist noch einmal der Code für die Auswahl des Optionsfelds für den meeting-place:

Die URL gibt den Pfad zur Auswahlaktion des MeetingPlace-Controllers an:

Die eingehende $id repräsentiert die meeting_id. Der Wert repräsentiert die ausgewählte MeetingPlace-ID. STATUS_SELECTED zeigt an, dass der Ort ausgewählt wurde, während STATUS_SUGGESTED nur angibt, dass er vorgeschlagen wurde (nicht ausgewählt).

Dieser Code durchläuft die Treffpunkte jedes Meetings und aktualisiert den Status des ausgewählten Ortes.

Schauen wir uns noch einmal den Code für die Kontrollkästchen für die Schaltereingabe an, mit denen festgestellt wird, ob jemand für einen bestimmten Ort verfügbar ist:

Diese Ereignisse rufen die festgelegte Aktion des MeetingPlaceChoice-Controllers mit einer Zeichenfolge auf, deren Suffix die ID des MeetingPlaceChoice-Datensatzes enthält, der aktualisiert werden muss:

Sichern von AJAX-Anfragen

Aus Sicherheitsgründen müssen wir überprüfen, ob die AJAX-Anforderung vom tatsächlichen Benutzer initiiert wurde, der diese Änderungen vornehmen kann. Dieser Code macht das:

und

Ohne diese Überprüfungen wäre es für einen Hacker einfach, ein Skript zu schreiben, um die Besprechungseinstellungen für jedermann zu ändern.

Der AJAX-Code zum Anzeigen der Verfügbarkeit für Datums- und Uhrzeitangaben und zum Treffen von Auswahlmöglichkeiten ist nahezu identisch.

Unterstützung der Verfügbarkeitseinstellungen

Um alle oben genannten Funktionen zu unterstützen, müssen wir auch Code hinzufügen, der den Tabellen MeetingPlaceChoice und MeetingTimeChoice-Datensätze hinzufügt, wenn Teilnehmer, Orte und Datumszeiten hinzugefügt werden. Dafür verwenden wir die AfterSave-Ereignisse von Yii.

Wenn ein Teilnehmer hinzugefügt wird, müssen wir für jeden MeetingPlace neue MeetingPlaceChoice-Zeilen und für jede MeetingTime neue MeetingTimeChoice-Zeilen hinzufügen. Hier ist der Code im Participate-Modell, der dies automatisch für uns erledigt:

Wenn ein neuer Ort hinzugefügt wird, werden für jeden Teilnehmer neue MeetingPlaceChoices benötigt:

Wenn eine neue Datums- und Uhrzeitangabe hinzugefügt wird, werden für jeden Teilnehmer neue Einträge für MeetingTimeChoice benötigt:

Es wird davon ausgegangen, dass der Organisator eines Meetings, wenn er einen Ort oder eine Uhrzeit hinzufügt, zunächst für ihn funktioniert.

Auswahl des endgültigen Ortes, Datums und der Uhrzeit

Sobald mindestens ein Teilnehmer, ein Ort und eine Zeit eingeladen ist, kann der Organisator des Meetings das Meeting abschließen. In Zukunft können die Teilnehmer das Meeting auch abschließen.

Während sich dieser Code in Zukunft etwas ändert, gibt es im Besprechungsmodell eine Funktion, die der Ansicht mitteilt, ob die Schaltfläche Finalize aktiviert werden soll:

Hier ist der Ansichtscode:

Sobald das Meeting abgeschlossen ist, ändert MeetingPlanner den Modus von der Unterstützung der Planung zur Erleichterung der Teilnahme der Teilnehmer durch eine Vielzahl cooler Funktionen, die wir in zukünftigen Tutorials behandeln werden.

Codierungsprobleme, auf die ich gestoßen bin

Ich wollte einige Probleme erwähnen, auf die ich beim Schreiben des Codes für diesen relativ komplizierten Abschnitt gestoßen bin.

AJAX-Typen

Die SwitchInput-Zustände wurden über JavaScript als boolesche Typen gesendet, z. wahr oder falsch, aber ich musste diese in ganzzahlige Werte konvertieren, um sie erfolgreich über AJAX an die Controller zu übertragen.

Überlappende IDs

Die numerischen IDs der Widgets MeetingPlaceChoice und MeetingTimeChoice überlappen sich. Es dauerte eine Weile, bis ich herausgefunden hatte, warum die Switch-Widgets für mich nicht mehr richtig gerendert wurden, als ich die Auswahlfunktionen hinzufügte. Da es überlappende IDs gab, wurden die Switch-Widgets nur für das erste Objekt gerendert.

Es war notwendig, Präfixe wie mpc- oder mtc- zu den IDs hinzuzufügen und diese in den Controller-Aktionen zu entfernen.

Hier entfernen wir das Präfix im Controller, um das Modell zu laden:

Swith Input Widget Optionsfeld Ladezustand

Es dauerte eine Weile, bis ich herausgefunden hatte, wie der anfängliche Ladezustand / -wert für das Weicheingabe-Widget im Optionsfeldmodus eingestellt werden konnte. Es gab keine Dokumentation, die zeigte, wie das geht. Ich habe hier endlich einen Erklärer für andere geschrieben: Einstellen des Status des Optionsfelds "Switch Input Widget".

Was kommt weiter?

Nachdem die gesamte AJAX vorhanden ist und funktioniert, ist es an der Zeit, einige der verbleibenden Bereiche der Besprechungsplanungsansicht fertigzustellen, um Einladungen vorzubereiten, die zugestellt wurden und von den Teilnehmern angezeigt werden müssen.

Beispielsweise unterscheidet sich die Ansicht des Besprechungsplans, die die Teilnehmer sehen, im Layout vom Veranstalter und hängt davon ab, welche Befugnisse der Veranstalter delegiert hat.

Beispielsweise müssen sich die Spalten "Sie" und "Sie" gegenüber ihrer aktuellen Implementierung ändern. Die Einstellungen des Besprechungsmodells müssen erweitert werden, um zu bestimmen, ob die Teilnehmer Orte und Datumsangaben vorschlagen und die Besprechung abschließen können.

In der Zukunft möchte ich wahrscheinlich mehrere Teilnehmer zulassen und muss mehr Verfügbarkeitsspalten für die Organisationsansicht anzeigen. Diese Funktionalität ist nicht Teil unseres Minimum Viable Product (MVP).

Ich muss auch die Implementierung des MeetingLog abschließen, in dem jede Änderung aufgezeichnet wird, die während des Planungsprozesses an einem Meeting vorgenommen wurde. Dies liefert eine Art Planungsverlauf für jedes Meeting. Ich kann auch afterSave()-Ereignisse dafür verwenden.

Achten Sie auf bevorstehende Tutorials in unserer Reihe Erstellen Sie Ihr Startup mit PHP. Eine Liste der bevorstehenden Themen finden Sie jetzt in unserem Inhaltsverzeichnis.

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

Ähnliche Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.