Programmierung mit Yii2 Ajax verwenden

Was Sie erstellen werden

Wenn Sie fragen: "Was ist Yii?", Checken Sie aus Einführung in das Yii-Framework, Hier werden die Vorteile von Yii beschrieben und ein Überblick über Yii 2.0, der im Oktober 2014 veröffentlicht wurde, bereitgestellt.

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.

Zunächst prüfen wir, wie wir eine Google Map auf der Seite laden, wenn der Nutzer einen bestimmten Ort betritt. Wie unten gezeigt, nachdem ich eingetreten bin Plum Bistro Wenn Sie auf "Zurück" klicken, wird die Karte nach rechts dynamisch ohne Seitenaktualisierung geladen.

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 schließlich den endgültigen auszuwählen.

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

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, beide ohne erneute Aktualisierung, und beide enthalten detaillierte Codebeispiele.

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 "Platz 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:

Einbindung der Google Places-JavaScript-API

Das Formular lädt die Google Maps-JavaScript-Bibliothek und verbindet sie mit dem Eingabefeld "Orts-Suchfeld":

$ gpJsLink = 'https://maps.googleapis.com/maps/api/js?' . http_build_query (array ('key' => Yii :: $ app-> params ['google_maps_key']), 'libraries' => 'places',)); echo $ this-> registerJsFile ($ gpJsLink); $ options = '"types": ["Establishment"], "componentRestrictions": "country": "us"'; echo $ this-> registerJs ("(function () var input = document.getElementById ('place-searchbox'); var options = $ options; searchbox = new google.maps.places.Autocomplete (Eingabe, Optionen); setupListeners ('place');) (); ", \ yii \ web \ View :: POS_END);

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

Frontend \ Assets \ MapAsset verwenden; MapAsset :: register ($ this);…      …

In der Meeting Planner Place-Tabelle werden der Google-Name, die Platz-ID, der Standort, die Website, die Umgebung und die vollständige Adresse zur Verwendung in der gesamten Anwendung gespeichert.

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 Stücken. Zuerst ist es da setupListeners (), vom übergeordneten Formular aufgerufen:

function setupListeners (model) // searchbox ist die Var für das auf der Seite google.maps.event.addListener erstellte google places-Objekt (searchbox, 'place_changed', function () var place = searchbox.getPlace (); if ( ! place.geometry) // Informieren Sie den Benutzer darüber, dass ein Ort nicht gefunden wurde, und geben Sie return. return zurück. else // JSON-Daten von Google in ausgeblendete Formularfelder migrieren populateResult (place, model);; var place_input = document.getElementById (model + '- searchbox'); google.maps.event.addDomListener (place_input, 'keydown', Funktion (e) if (e.keyCode == 13) e.preventDefault (););

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. Das Taste nach unten 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 betrete Pflaume für Plum Bistro:

Sammeln der resultierenden Karte und ihrer Daten

Wenn die Person ausgewählt hat, klicken Sie auf einen Ort in der Dropdown-Liste, oder klicken Sie darauf populateResult () wird genannt; wenn nicht, machen wir nichts.

Funktion populateResult (Ort, Modell) // verschiebt JSON-Daten von Google in ausgeblendete Formularfelder //, damit Yii2 die Daten $ ('#' + Modell + '- location') buchen kann. val (JSON.stringify (place [' Geometrie '] [' Ort '])); $ ('#' + model + '- google_place_id'). val (place ['place_id']); $ ('#' + model + '- full_address'). val (place ['formatted_address']); $ ('#' + model + '- website'). val (place ['website']); $ ('#' + Modell + '- Nähe'). val (Ort ['Nähe']); $ ('#' + model + '- name'). val (place ['name']); loadMap (Ort ['Geometrie'] ['Ort'], Ort ['Name']);

Dadurch werden alle versteckten Felder mit Daten von Google und Anrufen gefüllt loadMap () um die karte anzuzeigen:

Das loadMap () Diese Funktion ist sehr spezifisch für die Google Place API und zeigt rechts oben die Karte, die Sie oben sehen:

function loadMap (gps, name) var gps_parse = gps.toString (). replace ("(", "") .replace (")", "") .split (","); var gps_lat = parseFloat (gps_parse [0]); var gps_lng = parseFloat (gps_parse [1]); 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 durchgehend schwarz'; document.querySelector ('article'). appendChild (mapcanvas);  var latlng = new google.maps.LatLng (gps_lat, gps_lng); // gps ['k'], gps ['D']); var myOptions = zoom: 16, center: latlng, mapTypeControl: false, navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL, mapTypeId: google.maps.MapTypeId.ROADMAP; var map = new google.maps.Map (document.getElementById ("mapcanvas"), meineOptions); var marker = new google.maps.Marker (position: latlng, map: map, titel: name);

Die Benutzererfahrung ist schnell und beeindruckend. Versuch es!

Besprechungsä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 Meetingplänen wird eine Seite wie diese angezeigt:

Das Sie und Sie Spalten zeigen die Bevorzugung jedes Teilnehmers gegenüber Orten und Datumszeiten. Der größere Wählen Mit dem Schieberegler kann die Person die endgültige Entscheidung über Ort und Zeit 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 obige Meeting-Time-Panel funktioniert ähnlich.

Dem Kodex folgen

Aufgrund des MVC-Frameworks und meines Wunsches, Codeteile wiederzuverwenden, kann es schwierig sein, den Fluss hier zu verfolgen. PHP-Helper-Funktionen und JavaScript mussten manchmal in übergeordneten Dateien platziert werden, nicht in den Partials, 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: Denken Sie daran, dass Dateinamen für Partials normalerweise mit einem Unterstrich beginnen.

Die Meetingplaner-Seite wird unter /frontend/views/meeting/view.php geladen. Diese Datei enthält auch hilfreiche JavaScript-Funktionen zum Verwalten des Status von Schaltflächen wie Senden und Abschließen (Nach dieser Änderung kann der Benutzer nun diese Einladung senden. In Meeting Planner müssen Sie in der Regel einen Ort und eine Uhrzeit auswählen, bevor diese gesendet werden kann.) und visuelle Benachrichtigungen darüber anzeigen, dass die Änderungen an die anderen Teilnehmer gesendet werden, wenn der Benutzer den Vorgang beendet hat.
Bei der Anzeige der Woher Panel für Orte, lädt es /frontend/views/meeting-place/_panel.php. Diese Datei enthält PHP-Hilfefunktionen showOwnerStatus () und showParticipantStatus (), die von ihrem Kind, _list.php, wiederverwendet wird. Am wichtigsten ist jedoch, dass _panel.php JavaScript-Methoden für den Bootstrap-Schieberegler enthält switchChange Veranstaltung.
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 ().
Das switchChange Funktionen rufen Ajax-Aufrufe an MeetingPlaceChoiceController.php ab.
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:

meeting_type == \ frontend \ models \ Meeting :: TYPE_PHONE || $ model-> meeting_type == \ frontend \ models \ Meeting :: TYPE_VIDEO)) echo $ this-> render ('… / meeting-place / _panel', ['model' => $ model, 'placeProvider' => $ placeProvider, 'isOwner' => $ isOwner, 'viewer' => $ viewer,]); ?>

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.

id, 'viewer_id': $ viewer, success: function (data) if (data) $ ('# actionSend'). removeClass ("disabled"); else $ ('# actionSend'). addClass ("disabled"); wahr zurückgeben; );  function refreshFinalize () $ .ajax (url: '$ urlPrefix / meeting / canfinalize'), Daten: id: $ model-> id, 'viewer_id': $ viewer, Erfolg: function (data) if ( data) $ ('# actionFinalize'). removeClass ("disabled"); sonst $ ('# actionFinalize'). addClass ("disabled"); return true;;  JS; $ position = \ yii \ web \ View :: POS_READY; $ this-> registerJs ($ script, $ position); ?>

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

  $ placeProvider, 'itemOptions' => ['class' => 'item'], 'layout' => 'items', 'itemView' => '_list', 'viewParams' => ['placeCount' => $ placeProvider-> count, 'isOwner' => $ isOwner, 'participant_choose_place' => $ model-> meetingSettings ['participant_choose_place']],])?>        count> 1 && ($ isOwner || $ model-> meetingSettings ['participant_choose_place'])) echo Yii :: t ('frontend', 'Choose'); ?>

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.

$ script = <<< JS placeCount = $placeProvider->Anzahl; // Erlaubt dem Benutzer, den endgültigen Platz $ festzulegen ('input [name = "place-chooser"]'). on ('switchChange.bootstrapSwitch', function (e, s) // console.log (e.target). value); // true | false // Aktivieren Sie mpc für den Benutzer $ .ajax (url: '$ urlPrefix / meeting-place / select'), data: id: $ model-> id, 'val': e. target.value, // e.target.value ist ausgewählt MeetingPlaceChoice-Modellerfolg: function (data) displayNotifier ('place'); refreshSend (); refreshFinalize (); return true;;); // Benutzer können sagen, ob ein Ort eine Option für sie ist $ ('input [name = "meeting-place-choice"]'). on ('switchChange.bootstrapSwitch', function (e, s) // console. log (e.target.id, s); // true | false // set Intval so, dass es vom booleschen Status über AJAX übergeben wird, wenn (s) state = 1; else state = 0; $ .ajax (url: '$ urlPrefix) / meeting-place-choice / set ', Daten: id: e.target.id,' state ': state, Erfolg: function (data) displayNotifier (' place '); refreshSend (); refreshFinalize (); return true;);); JS; $ position = \ yii \ web \ View :: POS_READY; $ this-> registerJs ($ script, $ position); ?>

Die oben genannten Funktionen rufen den an actionSet () im MeetingPlaceChoiceController So reagieren Sie auf den Switchwechsel mit Ajax-Anfragen:

public function actionSet ($ id, $ state) Yii :: $ app-> response-> format = \ yii \ web \ Antwort :: FORMAT_JSON; // Achtung - AJAX-Typprobleme mit val $ id = str_replace ('mpc -', ", $ id); // if (Yii :: $ app-> user-> getId ()! = $ mpc-> user_id ) false zurückgeben, if (intval ($ state) == 0 oder $ state == 'false') $ status = MeetingPlaceChoice :: STATUS_NO; ansonsten $ status = MeetingPlaceChoice :: STATUS_YES; // $ mpc-> save (); MeetingPlaceChoice :: set ($ id, $ status, Yii :: $ app-> user-> getId ()); return $ id;

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

Yii :: $ app-> response-> format = \ yii \ web \ Response :: FORMAT_JSON;

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

öffentlicher statischer Funktionssatz ($ id, $ status, $ user_id = 0, $ bulkMode = false) $ mpc = MeetingPlaceChoice :: findOne ($ id); if ($ mpc-> user_id == $ user_id) $ mpc-> status = $ status; $ mpc-> save (); if (! $ bulkMode) // Nur im Massenmodus protokollieren, d. h. alle akzeptieren // Siehe setAll für weitere Informationen. if ($ status == MeetingPlaceChoice :: STATUS_YES) $ command = MeetingLog :: ACTION_ACCEPT_PLACE;  else $ command = MeetingLog :: ACTION_REJECT_PLACE;  MeetingLog :: add ($ mpc-> meetingPlace-> meeting_id, Befehl $, $ mpc-> user_id, $ mpc-> meeting_place_id);  return $ mpc-> id;  else return false;

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 "Senden" 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. H. Das Browserfenster zu schließen. Also die displayNotifier () Funktionen zeigen einige Flash-Alarme an, die dazu beitragen, dass diese im Laufe der Zeit aufpoliert und für erfahrene Benutzer entfernt werden.

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 kennen lernen, 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.