Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Programmieren mit Yii2: Verwenden von Ajax

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called How to Program With Yii2.
Programming With Yii2: Helpers
Programming With Yii2: Security

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

Final product image
What You'll Be Creating

Wenn Sie nach "Was ist Yii?" Fragen, sehen Sie sich die Einführung in das Yii-Framework an, in der die Vorteile von Yii beschrieben werden und eine Übersicht über Yii 2.0 enthalten, die im Oktober 2014 veröffentlicht wurde.

In dieser Programmierserie mit Yii2 leite ich die Leser beim Einsatz des Yii2-Frameworks für PHP. In diesem Lernprogramm werden wir die Implementierung interaktiver Seiten mit Ajax untersuchen. Im Besonderen werde ich die Verwendung von Ajax in zwei Bereichen der Meeting Planner-Anwendung hervorheben, über die ich parallel die Reihe "Building Your Startup" schreibe.

Zuerst überprüfen wir, wie wir eine Google Map auf die Seite laden, wenn der Nutzer einen bestimmten Ort betritt. Wie unten gezeigt, wird die Karte nach rechts, nachdem ich in Plum Bistro eintrat und auf "Zurück" klicke, dynamisch ohne Seitenaktualisierung geladen.

Yii Ajax - Google Maps UX Example

Zweitens zeige ich Ihnen, wie wir die Änderungen aufzeichnen, die ein Benutzer an einem Meeting während der Planungsphase vornimmt. Der Meeting Planner macht es den Teilnehmern leicht, ihre bevorzugten Orte und Datumszeiten zu identifizieren und letztendlich den endgültigen auszuwählen.

Yii Ajax - Meeting Planner UX Example

Ajax macht den Prozess viel einfacher und schneller, sodass Benutzer eine Reihe von Schaltersteuerelementen verschieben können, um ihre Präferenzen ohne Seitenaktualisierung anzuzeigen.

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 Tutorials vorschlagen möchten. Wenn Sie eine Frage oder ein Thema haben, schreiben Sie bitte unten. Sie können mich auch direkt auf Twitter @reifman erreichen.

Ajax mit Yii verwenden

Yii Ajax - Wikipedia Ajax Flow vs HTTP
Von DanielSHaischt, über Wikimedia Commons, CC BY-SA 3.0

Wenn Sie gerade erst mit Ajax beginnen und langsam anfangen möchten, bietet das Yii Playground zwei einfache Beispiele für Ajax, die für Sie hilfreich sein könnten. Einer ändert den Text auf einer Seite über Ajax, und ein anderer lädt die Antwort in ein Formular auf derselben Seite, ohne beide zu aktualisieren, und beide enthalten detaillierte Codebeispiele.

Yii Ajax - Yii Playground AJAX Examples

Lassen Sie uns in unsere zwei Hauptbeispiele eintauchen. Sie finden alle Quellen für diese Beispiele im Code Repository von Meeting Planner unter GitHub.

Interaktive Anzeige von Google Maps

Erstellen des Eingabeformulars

Wenn das Formular "Ort erstellen" (/frontend/views/place/create_place_google.php) zum ersten Mal geladen wird, enthält es das Widget für die Google Places-Live-Suche:

Yii Ajax - Create a Place in Meeting Planner Using Google Places

Einbindung der Google Places-JavaScript-API

Das Formular lädt die Google Maps-JavaScript-Bibliothek und verbindet sie mit dem Eingabefeld für das Suchfeld "Ort":

Das Teilformular _formPlaceGoogle.php enthält einige ausgeblendete Felder, in denen die Ergebnisse der Karte vor dem Senden der gesamten Seite gespeichert werden können, sowie ein verstecktes Div, um die Karte über Ajax anzuzeigen.

Die Meeting Planner Place-Tabelle speichert den Google-Namen, die Platz-ID, den Standort, die Website, die Umgebung und die vollständige Adresse für die Verwendung in der gesamten Anwendung.

Das MapAsset, das oben enthalten ist, lädt unsere Datei create_place.js, die zwischen Google und unserem Formular arbeitet. Es verwaltet im Wesentlichen die Übertragung und Antwort von Daten über Ajax.

Unser Ajax Verwalten von JavaScript

Ich führe Sie durch create_place.js in Teilen. Zunächst gibt es setupListeners(), das vom übergeordneten Formular aufgerufen wird:

Wenn der Benutzer mit der Eingabe beginnt, werden die Kopfzeilenoptionen für reale Orte vom Widget heruntergefahren und das Ereignis place_changed wird bei jedem Tastendruck verarbeitet. Der keydown-Listener oben verhindert, dass der Return-Schlüssel (ASCII 13 oder 0xD für Sie Hex-Geeks) das Formular sendet.

So sieht es bei der Eingabe aus. Ich komme in Plum für Plum Bistro:

Yii Ajax - Google Places Dropdown List

Sammeln der resultierenden Karte und ihrer Daten

Wenn die Person einen Eintrag in der Dropdown-Liste ausgewählt oder angeklickt hat, wird populateResult() aufgerufen. wenn nicht, machen wir nichts.

Dadurch werden alle ausgeblendeten Felder mit Daten von Google gefüllt und loadMap() aufgerufen, um die Karte anzuzeigen:

Yii Ajax - Google Places Load Map via Ajax

Die loadMap() - Funktion ist sehr spezifisch für Google Place API und zeigt die Karte oben rechts an:

Die Benutzererfahrung ist schnell und beeindruckend. Versuch es!

Meeting-Änderungen dynamisch aufzeichnen

Als Nächstes wollen wir uns ansehen, wie wir Änderungen an Besprechungsplänen in Echtzeit aufzeichnen. Hier gibt es keine Google-API. Es ist mehr Vanille-AJAX im Yii-Framework.

Beim Hinzufügen von Terminen, Zeiten und Orten zu Ihren Meeting-Plänen wird eine Seite wie diese angezeigt:

Yii Ajax - Meeting Planner Planning View with Sliders

Die Sie- und Themenspalten zeigen die Bevorzugung jedes Teilnehmers gegenüber Orten und Datumszeiten. Mit dem größeren Schieberegler "Auswählen" können Sie die endgültige Entscheidung über den Ort und die Uhrzeit des Treffens treffen.

Es gibt eine Menge Daten, die von Personen gesammelt werden müssen, und wir möchten bei jeder Änderung keine Seitenaktualisierung anfordern. Ajax ist die ideale Lösung für dieses Problem.

Ich gehe den Code für das Meeting-Place-Panel oben durch. Das Meeting-Time-Panel oben funktioniert ähnlich.

Dem Kodex folgen

Aufgrund des MVC-Frameworks und meines Wunsches, Codeteile wiederzuverwenden, kann der Fluss hier möglicherweise schwer zu folgen sein. PHP-Hilfsfunktionen und JavaScript mussten manchmal in übergeordneten Dateien platziert werden, nicht in den Teilbereichen, mit denen sie am engsten verwandt waren. Ich werde versuchen, Ihnen zuerst einen Überblick zu geben. Ich möchte Sie dazu ermutigen, einige Passagen vorzulesen, um es vollständig zu verstehen. Und wieder können Sie den Code über GitHub durchsuchen.

Hinweis: Beachten Sie, dass Dateinamen für Partials normalerweise mit einem Unterstrich beginnen.

  1. Die Seite Meetingplaner wird unter /frontend/views/meeting/view.php geladen. Diese Datei enthält auch hilfreiche JavaScript-Funktionen zur Verwaltung des Status von Schaltflächen wie Senden und Finalisieren. In Meeting Planner muss in der Regel ein Ort und eine Uhrzeit ausgewählt werden, bevor er gesendet werden kann. Außerdem werden visuelle Benachrichtigungen angezeigt, dass die Änderungen per E-Mail an andere Teilnehmer gesendet werden, wenn der Benutzer den Vorgang abgeschlossen hat.
  2. Beim Anzeigen des Bereichs Wo für Orte wird /frontend/views/meeting-place/_panel.php geladen. Diese Datei enthält die PHP-Hilfefunktionen showOwnerStatus() und showParticipantStatus(), die von ihrem untergeordneten Element _list.php wiederverwendet werden. Am wichtigsten ist jedoch, dass _panel.php JavaScript-Methoden für das switchChange-Ereignis des Schiebereglers Bootstrap enthält.
  3. Die Datei _panel.php verwendet _list.php, um jede einzelne Zeile für jeden Ort anzuzeigen. Diese Datei rendert die Bootstrap-Schieberegler durch Aufrufen der _panel.php-Funktionen showOwnerStatus() und showParticipantStatus().
  4. Die switchChange-Funktionen rufen Ajax-Aufrufe an MeetingPlaceChoiceController.php ab.
  5. Schließlich ruft MeetingPlaceChoiceController.php das MeetingPlaceChoice.php-Modell auf, um die Änderungen in der Datenbank aufzuzeichnen.

Es tut mir leid, dass die Platzierung von relevantem Code kompliziert und verbreitet ist.

Nun werde ich Sie Schritt für Schritt durch die wichtigsten Komponenten führen.

Ajax-Code Schritt für Schritt

Hier ist Meeting / view.php, das Meeting-Place / _panel.php darstellt. Dies zeigt den Teil für die Reihen möglicher Plätze und die Auswahl der Teilnehmer an:

Darunter ist JavaScript im Zusammenhang mit Aktionen, die auf Ajax-Ergebnisse reagieren, aber nicht direkt für Ajax benötigt werden. Sie müssen nicht verstehen, was diese Funktionen tun, um dieses Ajax-Beispiel zu verstehen, aber ich habe sie hinzugefügt, da sie als Reaktion auf Ajax-Ereignisse aufgerufen werden.

Hier in Meeting-Place / _panel.php wird die Tabelle mit den Orten und Auswahlen erstellt, wobei _list.php aufgerufen wird:

Noch wichtiger ist, es enthält auch das JavaScript, das wir verwenden, um Ajax-Aufrufe durchzuführen, wenn der Benutzer einen Schalter bewegt und seinen Status ändert. Die Auswahlfunktionen entsprechen dem größeren blauen Auswahlschieberegler, während die Auswahlfunktionen den Vorzugsschiebereglern entsprechen.

Die obigen Funktionen rufen den Aufruf von actionSet() in MeetingPlaceChoiceController auf, um auf die Switchänderung mit Ajax-Anforderungen zu reagieren:

Controller-Aktionen, die über Ajax antworten, müssen ein JSON-Antwortformat haben (auf diese Weise weiß Yii, dass sie nicht für die Bereitstellung von HTML gedacht sind):

Hier ist die MeetingPlaceChoice::set() - Methode, die die Aktionen des Benutzers in der Datenbank aufzeichnet und einen MeetingLog-Eintrag erstellt, der alle Änderungen während der Planung überwacht.

Funktionen im Zusammenhang mit Besprechungsänderungen

In Meeting Planner protokolliere ich jede einzelne Änderung. Dadurch kann ich wissen, wann seit der letzten Änderung einer Person einige Minuten vergangen sind, und andere Meeting-Teilnehmer benachrichtigen. Es ist ein Experiment, das ich mit diesem Service versuche, anstatt zu verlangen, dass die Teilnehmer jedes Mal auf Submit klicken, wenn sie Änderungen vornehmen möchten.

Dies erfordert jedoch ein Training, um zu verstehen, dass es in Ordnung ist, es zu ändern und zu verlassen, d. Die displayNotifier() - Funktionen zeigen daher einige Flash-Warnungen an, um dies zu unterstützen. Ich werde sie letztendlich im Laufe der Zeit verbessern und für erfahrene Benutzer entfernen.

Mit dem MeetingLog kann ich auch eine Textzusammenfassung des Planungsverlaufs der Besprechung erstellen. Wenn Sie daran interessiert sind, mehr darüber zu erfahren, habe ich darüber geschrieben in "Erstellen Sie Ihr Startup": Benachrichtigen von Personen über Besprechungsänderungen und Übermitteln von Benachrichtigungen

Was kommt als nächstes?

Ich hoffe, diese Beispiele helfen Ihnen, die Grundlagen von Ajax in Yii zu verstehen. Wenn Sie an fortgeschrittenem Ajax interessiert sind, plane ich, Ajax-geladene Formulare in die Meeting Planner-Serie aufzunehmen. Und zugegebenermaßen ist Ajax ein Gebiet, in dem die Yii-Community nicht viele Beispiele geteilt hat. Im Allgemeinen arbeitet Ajax in Yii ähnlich wie in PHP und anderen Frameworks, sodass Sie von Beispielen aus anderen Framework-Communities lernen können.

Achten Sie auf kommende Tutorials in unserer Programmierserie "Programmieren mit Yii2", während wir weiter in verschiedene Aspekte des Frameworks eintauchen. Vielleicht möchten Sie auch unsere Reihe für das Erstellen Ihres Startups mit PHP ausprobieren, die die erweiterte Vorlage von Yii2 verwendet, während wir eine reale Anwendung erstellen.

Wenn Sie wissen möchten, wann das nächste Yii2-Tutorial ankommt, folgen Sie mir @reifman auf Twitter oder besuchen Sie meine Instructor-Seite. Meine Ausbilderseite enthält alle Artikel dieser Serie, sobald sie veröffentlicht sind.

ähnliche Links

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