7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. PHP

Aufbau Ihres Startups: Anpassen der Besprechungsansicht

Scroll to top
Read Time: 17 mins

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

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

Einführung

Dieses Tutorial ist Teil der Build Your Startup With PHP-Reihe auf Envato Tuts +. In dieser Serie führe ich Sie durch den Start eines Konzepts vom Konzept zur Realität, wobei Sie meine Meeting Planner-App als reales Beispiel verwenden. Bei jedem Schritt werde ich den Meeting Planner-Code als Open-Source-Beispiele veröffentlichen, von denen Sie lernen können. Ich werde auch auf unternehmensbezogene Probleme beim Start eingehen.

Warum die Lücke in dieser Serie?

Möglicherweise stellen Sie fest, dass zwischen der letzten und dieser letzten Episode eine große Lücke besteht. Im April 2015 wurde bei mir ein Hirntumor diagnostiziert, der operiert und bestrahlt werden musste. Ich bin im Allgemeinen unglaublich glücklich, eine so gute Versorgung zu haben, und die Dinge liefen ziemlich gut - viele Menschen haben keinen Zugang zu den qualitativ hochwertigen neurochirurgischen Ressourcen, die mir bei einer Krankenversicherung im pazifischen Nordwesten zur Verfügung stehen. Ich habe seit letztem Herbst wieder für Envato Tuts + geschrieben, aber es macht Spaß, sich endlich wieder auf die Startup-Serie zu konzentrieren, und ich hoffe, es gefällt euch.

Was deckt diese Episode ab?

In diesem Lernprogramm werden die benutzerdefinierten Funktionen behandelt, die erforderlich sind, um unterschiedliche Ansichten bereitzustellen, je nachdem, wer Besprechungseinladungen betrachtet. Bevor wir die Einladung an die Teilnehmer per E-Mail versenden, benötigen wir eine Ansicht mit möglicherweise eingeschränkten Funktionen, um sie mit ihnen zu teilen. Im Wesentlichen stellen wir sicher, dass die Besprechungsansicht genau das ist, was der Besprechungsbesitzer und der Besprechungsteilnehmer benötigen. Folge mit, um zu erfahren, was nötig ist.

Der gesamte Code für Meeting Planner ist im Yii2-Framework für PHP geschrieben, das integrierte Unterstützung für I18n bietet. Wenn Sie mehr über Yii2 erfahren möchten, werfen Sie einen Blick auf unsere parallele Serie Programming With Yii2 bei Envato Tuts +.

Interessanterweise hat sich kürzlich ein potenzieller Angel-Investor mit mir in Verbindung gesetzt, um Ressourcen zur Beschleunigung des Entwicklungsprozesses unserer Website bereitzustellen - er sieht den Wert im Konzept. Während ich den richtigen Weg finde, um weiterzugehen, werde ich Sie auf dem Laufenden halten. Wenn überhaupt, hoffe ich, dass dadurch interessante neue Themen rund um das Management des Anlageprozesses als Unternehmer entstehen.

Nur zur Erinnerung, ich beteilige mich an den Kommentarthreads unten. Ich bin besonders interessiert, wenn Sie unterschiedliche Ansätze, zusätzliche Ideen haben oder Themen für zukünftige Übungen vorschlagen möchten. Sie können mich auch auf Twitter @reifman erreichen.

Anforderungen für die Besprechungsansicht

Es ist irgendwie aufregend - bald wird Meeting Planner die geladenen Teilnehmer einladen. Um dies zu unterstützen, müssen Sie jedoch sicherstellen, dass die Seite für die Besprechungsansicht ordnungsgemäß konfiguriert ist. Wenn Sie die Besprechung erstellt haben, verfügen Sie über bestimmte Befugnisse, z. B. das Einladen von Teilnehmern, das Hinzufügen vorgeschlagener Besprechungsorte, Datums- und Zeitangaben und die Auswahl der endgültigen Auswahl. In einigen Fällen möchte der Veranstalter den Teilnehmern auch einige oder alle dieser Befugnisse anbieten.

Im Wesentlichen müssen wir die Anwendung darauf aufmerksam machen, wer die Besprechungsseite anzeigt, und dann das Erscheinungsbild und die verfügbaren Befehle anpassen. Yii macht das meiste einfach, aber es geht um viele Details.

Eine kurze Einschränkung bezüglich der Benutzererfahrung

Lassen Sie mich im Vorfeld sagen, es gibt viele Nachbesserungen und Verbesserungen der Benutzererfahrung, die im Laufe der Zeit schrittweise auf dem Weg zum minimal funktionsfähigen Produkt (MVP) durchgeführt werden müssen. Das meiste, was ich gerade baue, ist die Kernfunktionalität, um das Alpha für die tatsächliche Verwendung zu nutzen. Ich weiß, dass es an manchen Stellen grob aussieht und nicht immer so intuitiv wirkt, wie Sie möchten. Es gibt auch Ineffizienzen bei der Codierung, die in der Zukunft optimiert werden müssen. Bitte schreiben Sie unten Ihre Gedanken und Kommentare, und ich werde sie bei der laufenden Arbeit berücksichtigen.

Die aktuelle Besprechungsansicht

Hier sehen Sie die vorhandene Besprechungsansicht, die der Ersteller (oder Besitzer) sieht:

Customizing Meeting View - The Existing Codes Meeting ViewCustomizing Meeting View - The Existing Codes Meeting ViewCustomizing Meeting View - The Existing Codes Meeting View

Die Schaltfläche Senden sendet dem Teilnehmer die Besprechungseinladung mit den aktuell geöffneten Optionen per E-Mail, damit er Feedback geben kann. Die Kontrollkästchen unter Ihnen und ihnen ermöglichen es dem Betrachter auszudrücken, ob Ort und Zeit für sie funktionieren. Mit den Kontrollkästchen "Auswählen" können Sie den endgültigen Ort und die endgültige Uhrzeit bestimmen. Mit der Schaltfläche Finalisieren wird die Besprechung mit den ausgewählten Optionen für Ort und Uhrzeit im Zeitplan festgelegt.

Wenn das Produkt ausgereift ist, möchten wir die Benutzererfahrung auf verschiedene Weise verbessern und aufpolieren, aber hier sind einige Funktionselemente, die wir für die Teilnehmer ändern möchten:

  • Die Schaltfläche Senden wird nicht benötigt, nachdem der Eigentümer die Einladung übermittelt hat.
  • Teilnehmer können Besprechungsoptionen abschließen oder nicht.
  • Teilnehmer können den Besprechungsdetailtext nicht bearbeiten (Stiftsymbol).
  • Teilnehmer können zurzeit keine Personen hinzufügen (für unser MVP).
  • Teilnehmer können Orte hinzufügen (Plus-Symbol) oder auch nicht.
  • Teilnehmer können Datums- und Zeitangaben (Plus-Symbol) hinzufügen oder auch nicht.
  • In den Fenstern "Orte" und "Datums- und Zeitangaben" möchten wir die aktuellen Optionen des Betrachters unter der Spalte "Sie" und die Daten der anderen Person in ihnen anzeigen.
  • In den Bereichen Orte und Datums- und Zeitangaben können die Teilnehmer möglicherweise den endgültigen Ort und die endgültige Zeit auswählen.

All diese Optionen müssen heute in unserer Arbeit angesprochen werden. Gehen wir durch, was zum Erstellen dieser Funktionen erforderlich ist.

Anforderungen Implementierung

Wenn Sie dem Code folgen, sind die hier beschriebenen Updates in dieser Version auf GitHub enthalten.

Wer ist der aktuelle Viewer?

Das Yii Framework stellt hier die aktuelle user_id für den Viewer bereit:

Das Besprechungsmodell verfügt über die $owner_id -Eigenschaft und die isOwner-Funktion, um zu ermitteln, ob der aktuelle Viewer tatsächlich der Ersteller der Besprechung ist. Wenn dies nicht der Fall ist, hat der Zuschauer weniger Kontrolle über die Besprechung.

Ich habe im Meeting-Modell einige Hilfsfunktionen erstellt, um dies zu beschleunigen:

Diese konfigurieren die Eigenschaften $owner_id und $viewer im Besprechungsmodell.

Gebäude für Besprechungseinstellungen

Jedes von Ihnen erstellte Meeting hat wahrscheinlich unterschiedliche Eigenschaften. Manchmal möchten Sie den Teilnehmer davon abhalten, verschiedene Zeiten und Orte vorzuschlagen oder die Details zu finalisieren. Zu anderen Zeiten ist es dir egal. Wenn wir schließlich Besprechungsvorlagen erstellen, um häufig verwendete Besprechungstypen wiederzuverwenden, z. Morgenkaffee-Geschäftstreffen müssen die Vorlagen wahrscheinlich auch diese benutzerdefinierten Einstellungen beibehalten. Wie sollen wir das umsetzen?

Zunächst möchte ich eine Reihe von Standardeinstellungen für Benutzer in Bezug auf die von ihnen erstellten Meetings erstellen.

Dann erstelle ich für jedes Meeting einen Satz von MeetingSettings. Wenn eine Besprechung von Grund auf erstellt wird, erben sie die Standardeinstellungen des Benutzers, der sie erstellt. Das Bearbeiten der Einstellungen für einzelne Meetings kann auf einen späteren Zeitpunkt verschoben werden.

Wenn wir die Besprechungsvorlagen implementieren, fügen wir in Zukunft Besprechungseinstellungen für die Vorlagen hinzu. Dies kann jedoch auch verschoben werden.

Hier sind die Einstellungen, die wir erstellen möchten, um zu beginnen:

  • Erlauben Sie Teilnehmern, Orte hinzuzufügen.
  • Erlauben Sie den Teilnehmern, Termine und Zeiten hinzuzufügen.
  • Erlauben Sie den Teilnehmern, Orte zu wählen.
  • Erlauben Sie den Teilnehmern, Termine und Zeiten zu wählen.
  • Erlauben Sie den Teilnehmern, das Meeting abzuschließen.

Da wir nach einiger Zeit wegen meiner gesundheitlichen Abwesenheit alle wieder in die Serie kommen, werde ich mich ein bisschen mit der Arbeit beschäftigen.

Zuerst erstellen wir die Migration der Besprechungseinstellungen:

Dadurch wird die Migrationsdatei erstellt, die wir zum Schreiben des Codes benötigen, der die Datenbanktabelle nach unserem Schema erstellt:

Jede Besprechung enthält im Wesentlichen eine Reihe von Besprechungssätzen mit booleschen Eigenschaften für die verschiedenen Teilnehmeroptionen, die ich oben gezeigt habe.

Dann weisen wir Yii an, die Tabelle zu migrieren und zu erstellen:

Unser Fremdschlüssel stellt eine Beziehung zwischen dem Besprechungstisch und der Besprechungstabelle her.

Als Nächstes verwenden wir Yii's Gii, um automatisch Code zum Anzeigen und Aktualisieren der Einstellungen zu generieren. Zu Beginn gehe ich zurück zu http://localhost:8888/mp/index.php/gii/. Wir beginnen mit der Generierung des Modells:

Customizing Meeting View - Yiis Gii Model Generator for Meeting SettingCustomizing Meeting View - Yiis Gii Model Generator for Meeting SettingCustomizing Meeting View - Yiis Gii Model Generator for Meeting Setting

Dann generieren wir den Code zum Erstellen, Lesen, Aktualisieren und Löschen (CRUD):

Customizing Meeting View - The Gii CRUD GeneratorCustomizing Meeting View - The Gii CRUD GeneratorCustomizing Meeting View - The Gii CRUD Generator

Da wir jetzt nicht all diesen Code benötigen, können wir mit Gii nur die Funktionen auswählen, die wir benötigen: Controller, Ansicht, _Form und Update:

Customizing Meeting View - Manually limiting files to overwriteCustomizing Meeting View - Manually limiting files to overwriteCustomizing Meeting View - Manually limiting files to overwrite

Gii zeigt Ihnen eine Liste der Dateien, die mit jedem Schritt erstellt werden:

Customizing Meeting View - List of generated files by GiiCustomizing Meeting View - List of generated files by GiiCustomizing Meeting View - List of generated files by Gii

Wie sieht es aber mit den Standardbesprechungseinstellungen des Benutzers aus? Ihre typischen Besprechungsvorlieben?

Erweitern der Benutzereinstellungen

Dazu fügen wir der user_setting-Tabelle parallele Besprechungseinstellungen hinzu. Wieder erstellen wir eine Migration:

Hier sind die Spalten, die wir hinzufügen müssen:

Dann führen wir die Migration durch:

Anstatt das Überschreiben unseres UserSetting.php-Modells mit Gii zu erzwingen, verwenden wir die Option diff von Gii:

Customizing Meeting View - Using Giis diff rather than overwritingCustomizing Meeting View - Using Giis diff rather than overwritingCustomizing Meeting View - Using Giis diff rather than overwriting

Von dort werden wir die neuen Ergänzungen der Datei von Hand auswählen und sie einfügen:

Customizing Meeting View - Diff view to copy and paste necessary changesCustomizing Meeting View - Diff view to copy and paste necessary changesCustomizing Meeting View - Diff view to copy and paste necessary changes

Funktionell fügen wir der Eigenschaftenseite Aktualisieren Sie Ihre Einstellungen eine Registerkarte mit den Einstellungen für die Einstellungen hinzu:

Customizing Meeting View - User settings with the existing two tabsCustomizing Meeting View - User settings with the existing two tabsCustomizing Meeting View - User settings with the existing two tabs

Wir werden den folgenden Code zu /frontend/views/user-setting/_form.php hinzufügen, um unsere neuen Eigenschaften zu unterstützen:

Hier ist das aktualisierte Formular:

Customizing Meeting View - User settings with meeting preferencesCustomizing Meeting View - User settings with meeting preferencesCustomizing Meeting View - User settings with meeting preferences

Neue Besprechungssitzungen initialisieren

Immer wenn der Benutzer eine neue Besprechung erstellt, müssen wir deren Standardeinstellungen laden und in die Einstellungen der einzelnen Besprechung kopieren. initializeMeetingSetting wird aufgerufen, wenn zu diesem Zweck eine neue Besprechung erstellt wird:

Mit den Besprechungseinstellungen können wir uns dem eigentlichen Hauptteil der heutigen Arbeit widmen und die Besprechungsansichten für den Eigentümer und den Teilnehmer anpassen.

Besprechungsbesitzeransicht überprüfen

Betrachten wir nun den Status unserer Besprechungsansicht basierend auf dem Ersteller oder Eigentümer der Besprechung. Ich habe vor kurzem eine Besprechungseinladung erstellt, um meinen Freund Rob zu Getränken einzuladen:

Customizing Meeting View - The Current Meeting ViewCustomizing Meeting View - The Current Meeting ViewCustomizing Meeting View - The Current Meeting View

Die Befehlsleiste

Vor dem Aktivieren von Senden und Abschließen muss eine Person und mindestens ein Ort und eine Uhrzeit eingeladen werden. Wenn es mehr als einen Ort und eine Uhrzeit gibt, muss einer für den Abschluss des Meetings ausgewählt werden.

Die Meeting-Schaltflächen "Abbrechen" (X) und "Bearbeiten" (Stiftsymbol) sind auch für Ersteller aktiviert.

Menschen

Für den MVP beschränken wir zunächst die Einladungen zu Besprechungen auf einen Teilnehmer. Sobald eine Person eingeladen wurde, ist die Schaltfläche Hinzufügen (Pluszeichen) deaktiviert.

Orte und Datum & Zeiten

Der Ersteller kann Orte, Datum und Uhrzeit bis zum Maximum unserer Website hinzufügen (z. B. sieben pro Meeting) und er kann seine Verfügbarkeit und Akzeptanz angeben. Und wenn es mehr als eine gibt, können sie den Ort und die Uhrzeit auswählen.

Anmerkungen

Der Ersteller kann dem Meeting immer Notizen hinzufügen. Mit Notizen können der Ersteller und die Teilnehmer miteinander kommunizieren.

Letztendlich werden wir den Großteil unserer Arbeit in die Verbesserung der AJAX-Funktionalität stecken, sodass die Schaltflächen Senden und Abschließen, wenn der Besitzer Orte und Zeiten wählt, richtig aktiviert (oder in einigen Fällen deaktiviert) sind.

Hier ist ein Beispiel für ein Meeting mit zwei möglichen Zeiten. Die Schaltfläche "Finalisieren" kann erst aktiviert werden, wenn ein Mal ausgewählt wird:

Customizing Meeting View - Another Meeting View Scenario Customizing Meeting View - Another Meeting View Scenario Customizing Meeting View - Another Meeting View Scenario

Sobald die Auswahl getroffen wurde, möchten wir die Schaltfläche Finalize über AJAX aktivieren, um dem Benutzer eine Seitenaktualisierung zu ersparen.

Teilnehmeransicht überprüfen

Wenn wir die Einladung aus der Sicht des Teilnehmers betrachten, gibt es viel weniger Anfangsfähigkeit:

Customizing Meeting View - The Participant ViewCustomizing Meeting View - The Participant ViewCustomizing Meeting View - The Participant View

Der Teilnehmer kann seine Teilnahme an der Besprechung absagen (X-Symbol), und er kann angeben, ob die Orte und Zeiten für ihn akzeptabel sind, er kann jedoch nicht den endgültigen Ort auswählen oder die Besprechung abschließen. Die Daten in den Spalten "Du" und "Sie" werden jetzt umgeschaltet. Das Teilnehmerfeld wird ausgeblendet, da es nicht benötigt wird.

Angenommen, das Meeting wurde mit Einstellungen erstellt, mit denen der Teilnehmer Ort, Datum und Uhrzeit auswählen, das Meeting jedoch nicht abschließen kann. Das müsste so aussehen:

Customizing Meeting View - The Participant View with Participant ChoiceCustomizing Meeting View - The Participant View with Participant ChoiceCustomizing Meeting View - The Participant View with Participant Choice

Da es nur einen Ort gibt, Herkimer Coffee, ist keine Auswahlauswahl erforderlich. Wo es zwei mögliche Zeiten gibt, können Sie jetzt die Select-Selektoren sehen. Es gibt jedoch noch keine Schaltfläche zum Abschließen.

Es stellte sich heraus, dass die Unterstützung all dies eine Menge neuen Codes zur Aktualisierung des Systems erforderte, aber dies beginnt sich in das Herz des Produkts zu vertiefen - die Planung der Besprechungen für Benutzer. Ich werde Sie durch eine Handvoll der notwendigen Änderungen führen.

Kodierung der Besprechungsanforderungen

Implementierung der Besprechungseinstellungen

In den Meeting-Time- und Meeting-Place-Bereichen müssen wir die Meeting-Einstellungen verwenden, um festzustellen, ob die Auswahlauswahl angezeigt werden muss. In der _panel.php-Ansicht sieht es so aus:

Wir überprüfen die Teilnehmereinstellungen und übergeben sie als Parameter an die nachfolgende _list.php-Ansicht, die wie folgt aussieht:

Wenn es sich bei der Ansicht um den Ersteller handelt oder der Teilnehmer das endgültige Mal auswählen darf, sehen sie Folgendes:die Möglichkeit, in der rechten Spalte zu wählen

Customizing Meeting View - The Choice Selector for Dates TimesCustomizing Meeting View - The Choice Selector for Dates TimesCustomizing Meeting View - The Choice Selector for Dates Times

Kann der Viewer das Meeting senden und abschließen

Ich habe die Funktionen canSend() und canFinalize() erstellt, die den Code allgemein und die AJAX-Anforderungen unterstützen, um den aktiven Status der Schaltflächen Senden und Finalize zu bestimmen.

Hier ist canSend():

Der Organisator kann die Einladung zum Meeting erst versenden, wenn Teilnehmer, Orte und Zeiten vorhanden sind.

Hier ist canFinalize():

Zunächst wird geprüft, ob das Meeting gesendet werden konnte. Andernfalls kann es nicht abgeschlossen werden. Anschließend wird überprüft, ob Ort und Zeit ausgewählt wurden. Anschließend wird geprüft, ob der Zuschauer der Organisator ist, oder ob die Meeting-Einstellungen einem Teilnehmer erlauben, das Meeting abzuschließen.

Während Änderungen vorgenommen werden, ändert sich grundsätzlich der Status der Schaltflächen Senden und Abschließen:

Customizing Meeting View - The Command Bar with Send and FinalizeCustomizing Meeting View - The Command Bar with Send and FinalizeCustomizing Meeting View - The Command Bar with Send and Finalize

In der Besprechung view.php habe ich JavaScript eingebettet, um AJAX-Aktualisierungen für den Status der Schaltflächen Senden und Abschließen zu unterstützen, wenn Benutzer die Einstellungen für die Besprechung ändern. Bei Auswahl von Orten und Zeiten werden refreshSend() und refreshFinalize() aufgerufen und die Schaltflächen entsprechend geändert:

Orts- und Zeitstatus-Selektoren umkehren

In der aktuellen Benutzeroberfläche zeigen wir die Platz- und Zeitauswahl des Betrachters in der linken oder ersten Spalte. Der Code muss angepasst werden, um dies beim Anzeigen der Teilnehmer umzukehren:

Customizing Meeting View - The You and Them Columns for Selection DataCustomizing Meeting View - The You and Them Columns for Selection DataCustomizing Meeting View - The You and Them Columns for Selection Data

Um das Anzeigen unterschiedlicher Daten in den Spalten "Sie" und "Sie" der Besprechungsansicht für Zeiten und Orte zu unterstützen, müssen die _list.php-Dateien für die Besprechungszeit und den Besprechungsort aktualisiert werden, um dynamisch zu bestimmen, welche Daten angezeigt werden sollen:

Fürs Erste habe ich diese Funktionen in die _panel.php-Ansicht gestellt, die _list.php aufruft, da sie darauf angewiesen sind, dass das SwitchInput-Widget im Kontext enthalten ist:

Anstehende Anpassungen

Letztendlich gibt es noch viele Verbesserungen an diesem Code. An Orten mache ich zwei oder drei Mal AJAX-Aufrufe an den Server, wenn ich diese effizienter in eine einzige Anforderung schreiben konnte. An anderen Stellen kann ich lokal mehr mit JavaScript machen. Die Benutzeroberfläche muss sich ständig verbessern, und der Code muss geändert werden, um sich daran anzupassen. In funktionaler Hinsicht bedeutet die heutige Arbeit jedoch einen großen Fortschritt auf dem Weg zum MVP.

Was kommt als nächstes?

Mit den Besprechungseinstellungen und Ansichtsanforderungen für Organisatoren und Teilnehmer bin ich bereit, die erste Einladung zu senden. In der nächsten Episode wird untersucht, wie Sie die Einladung per E-Mail an den Teilnehmer senden und das Erscheinungsbild von Inhalten sowie funktionale Befehlslinks in der E-Mail implementieren und die Berechtigungen für noch nicht registrierte Benutzer verwalten. Achten Sie auf kommende Tutorials in unserer Reihe "Your Startup With PHP" - das wird spannend!

Bitte zögern Sie nicht, Ihre Fragen und Kommentare unten hinzuzufügen. Ich nehme generell an den Diskussionen teil. Sie können mich auch auf Twitter @reifman erreichen.

ähnliche Links

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.