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

Erstellen Sie Ihr Startup: Dynamische Ajax-Formulare für die Planung

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Preparing for Reminders
Building Your Startup: Sending Reminders

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

Final product image
What You'll Be Creating

Dieses Tutorial ist Teil der Reihe "Your Startup With PHP" 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.

Einführung

Im heutigen Tutorial werde ich Sie durch die ersten umfangreichen Änderungen an der Oberfläche für die Besprechungsplanung führen. Mein Ziel war es, Ajax zu verwenden, um alle üblichen Planungsaktivitäten ohne Seitenaktualisierung zu ermöglichen. Einige Aspekte davon erwiesen sich als einfach und andere als kompliziert. In dieser Episode konzentriere ich mich auf die unkomplizierten Teile: Wie man Ajax UX-Anforderungen in Ihrer PHP-basierten Yii-Anwendung erstellt

In Teil zwei werde ich das schwierigere Thema behandeln - Debugging von Ajax und Initialisieren der Bootstrap-Widgets nach dem ersten Laden der Seite. Ich erzähle auch, wie ich die Chrome Browser-Entwicklerkonsole von Google verwendet habe, um gebrochenen Code zu identifizieren.

Ehrlich gesagt, während die ersten Updates gut liefen, stieß ich auf so viele Hindernisse und Schwierigkeiten, dass es Momente gab, in denen ich dachte, ich müsste das Ziel für die Betaversion aufgeben.

Seltsamerweise würde es Codepfade geben, die mich anscheinend kurz vor dem Abschluss befanden und dann einen unüberwindlichen Straßensperre erlebten - und ich müsste mit einem neuen Ansatz beginnen. Letztendlich konnte ich die vollständige Planung über Ajax für die Betaversion erfolgreich abschließen.

Folgen Sie heute, um Sie durch den Kern der Arbeit zu führen.

Wenn Sie Meeting Planner noch nicht ausprobiert haben, planen Sie Ihr erstes Meeting mit den neuen interaktiven Funktionen. Ich nehme an den Kommentarthreads unten teil, also sag mir, was du denkst! Sie können mich auch auf Twitter @reifman erreichen. Ich bin besonders interessiert, wenn Sie neue Funktionen oder Themen für zukünftige Tutorials vorschlagen möchten.

Zur Erinnerung: Der gesamte Code für Meeting Planner ist im Yii2-Framework für PHP geschrieben. Wenn Sie mehr über Yii2 erfahren möchten, werfen Sie einen Blick auf unsere parallele Serie Programming With Yii2.

Optimierung der Scheduling UX

Mein Hauptziel in dieser Phase des Produkts war es, alle wichtigen Planungsfunktionen mit Ajax zu implementieren und die Seitenaktualisierungen zu beseitigen, die derzeit für die Bearbeitung des Betreffs erforderlich sind, Teilnehmer hinzufügen, Datumszeiten, Orte und Notizen hinzufügen.

Hintergrund

Als ich früher Ajax in die Site eingebaut hatte, hatte ich ein paar Ideen, was gut und was schwierig werden würde.

Begleite mich, wenn ich durch die Anfangselemente der ajaxifizierenden Planung gehe.

Betreff der Besprechung bearbeiten

Startups Ajax - The Meeting Subject Panel Loaded via Ajax

Ich habe mit dem Editieren des Betrefffelds für Besprechungen begonnen, da es aus zwei statischen Feldern, einer Eingabe und einer Textfläche besteht. Das Betrefffeld verwendet jedoch ein jQuery Typeahead-Widget. Widgets können Dinge komplizieren, da Sie sie für Ajax vorbereiten müssen.

In diesem Fall lade ich das versteckte Formular vor und lade die Widget-Bibliothek mit. Es gibt keine wirkliche Komplexität. In der nächsten Folge werden Sie sehen, dass das Widget Bootstrap Switch an den Datums- und Ortsanzeigen dies viel schwieriger macht.

Vorab laden des gesamten JavaScript

Um das Planen jedes Planungsbereichs (Teilnehmer, Betreff, Datumszeiten, Orte und Notizen) zu vereinfachen, lade ich sie im Voraus und erweitere den ursprünglichen Inhalt von meeting.js.

Ich habe auch die Definition von MeetingAsset.php um weitere JavaScript-Funktionen erweitert:

MeetingAsset wird von der Meeting-Datei view.php geladen:

Laden des Betrefffelds

Die Betreff- und Besprechungsdetails sind Teil des Teils _panel_what.php. Im Folgenden habe ich es so eingerichtet, dass es beim Laden in #editWhat ausgeblendet wird:

Ich habe die Bearbeitungsschaltfläche (mit dem Bleistiftsymbol) in _panel_what.php angehängt, um eine JavaScript-Funktion showWhat()aufzurufen, mit der das Bearbeitungsformular ein- oder ausgeblendet werden kann. Hier ist der Code:

Die showWhat() - Funktion von meeting.js wird unten gezeigt:

Hier ist der obere Teil von /frontend/views/meeting/_form.php, den es verbirgt und zeigt. Hier werden die Eingabe- und Textfelder angezeigt:

Aktualisieren des Betreffs und der Besprechungsdetails über Ajax

Wenn der Benutzer das Besprechungsformular aktualisiert, wird der folgende Ajax aufgerufen:

Die Funktion actionUpdatewhat sich in MeetingController.php befindet:

Beachten Sie Yii::$app->response->format=\yii\web\Response::FORMAT_JSON; welche eine Yii-Methode konfiguriert, um JSON zurückzugeben, nicht HTML.

Die Funktion Meeting:isAttendee() ist eine Authentifizierungsprüfung, um sicherzustellen, dass der angemeldete Benutzer Teilnehmer ist, bevor die Daten der Besprechung aktualisiert werden.

Was habe ich bisher gelernt?

Wie Sie sehen können, ist einiges an Code erforderlich, um alle diese Teile zu ajaxifizieren.

Eine der Herausforderungen besteht darin, dass ein Mensch versucht, zwischen so vielen Dateien gleichzeitig und zwei verschiedenen Sprachen zu wechseln. PHP und JavaScript haben unterschiedliche Vorgehensweisen. Zum Beispiel wird die Verkettung von Zeichenfolgen mit einem Punkt in PHP und einem Pluszeichen in JavaScript ausgeführt. Ein schneller Wechsel zwischen Sprachen, die gelegentlich versuchen, Abfrageparameter-Zeichenfolgen zu erstellen, kann zu Fehlern führen.

In meinen PHP-basierten Ajax-Funktionen sind außerdem intensive Sicherheitsprüfungen erforderlich. Im heutigen Tutorial sehen Sie den Anfang davon, aber ich muss gründlichere Überprüfungen hinzufügen, bevor der Code vollständig live ist.

Und schließlich versuchte ich, Notizen und strukturelle Ansätze wiederzuverwenden, sodass der gesamte Code eine ähnliche Zusammensetzung und Terminologie hatte, obwohl er mit verschiedenen Datenelementen arbeitete.

Senden von Besprechungsnotizen

Startups Ajax - The Meeting Notes Panel Loaded via Ajax

Besprechungsnotizen sind auch statische Textfelder. Es kann jedoch ein fortlaufender Faden von Notizen vorhanden sein, die auf der Seite aktualisiert werden müssen, wenn eine hinzugefügt wird (z. B. nicht nur ein einzelner Betreff der Besprechung). Es ist wichtig, dem Benutzer mitzuteilen, dass wir die Teilnehmer über die Notiz informieren.

Zum Beispiel habe ich die UX-Schaltfläche zum Senden der Schaltfläche in der Zeitplanung entfernt, sodass die Planung schnell und effizient ist. Neue Meeting Planner-Benutzer werden dadurch oft verwirrt. Ich habe Warnhinweise hinzugefügt, um sie wissen zu lassen, dass wir uns darum kümmern.

Startups Ajax - Meeting Notes Ajax Success Alert

Kodierung der Notizen über Ajax

Zuerst gibt es die _panel.php für die Besprechungsnotiz. Ich baue versteckte Fehlermeldungen ein, die bei Bedarf über jQuery angezeigt werden können. Ich plane dies in Zukunft zu vereinfachen und zu standardisieren, einschließlich der Lokalisierung der Nachrichten.

In dem folgenden Beispiel werden noteMessage1 und noteMessage2 als ausgeblendet geladen.

Hier ist die jQuery, die nach einer leeren Notiz sucht, einen entsprechenden Fehler anzeigt oder den Inhalt über Ajax übermittelt, um eine Aktualisierung des Hinweis-Threads anzufordern, und eine Erfolgswarnung anzeigt:

Eine der Aufgaben, die es dort gibt, ist die Behandlung von Fehlern in Ajax. Dies ist nicht einfach und erfordert eine ziemlich detaillierte Architektur, um dies zu unterstützen - im Moment bin ich weitermachen, ohne diese Art von Fehlern zu behandeln.

Hier ist die JavaScript-Funktion displayAlert(), die ich wiederverwendet habe und auf die alle Panels und ihre Warnmeldungen aufbauten:

Aktualisieren des Notes-Threads

Wenn ein Benutzer eine neue Notiz übergibt, wird MeetingNoteController.php actionUpdatethread() über Ajax aufgerufen. Hier ist das PHP:

Ich experimentierte manchmal damit, einfach den neuesten Inhalt (d. H. Die neueste Notiz) zurückzugeben und über den vorherigen Elementen einzufügen. Dies erwies sich jedoch als problematisch, insbesondere bei Datumsangaben und Orten, die in Tabellenzeilen angezeigt werden.

Im Moment ersetze ich den gesamten aktualisierten Thread des Inhalts und das gesamte Panel über Ajax. Hier ist das Teil _thread.php, das alle Notizen lädt, einschließlich der neuen:

Ich hoffe, das reicht, um heute zu lernen und auszuprobieren.

Ich verbrachte buchstäblich etwa fünf bis sieben lange Codiertage, einschließlich eines Alles-Nächters, um den gesamten Code hinter dieser und der kommenden Episode zu vervollständigen. Ich hatte seit Jahren keinen All-Nighter mehr. Trotzdem waren die Ergebnisse inspirierend.

Was kommt als nächstes?

Ich hoffe es war hilfreich, die Grundlagen der Ajax-Entwicklung für Yii und PHP zu sehen. Ich habe durch diesen Prozess sicherlich viel gelernt und die Änderungen haben die Planung von Besprechungen unglaublich schneller und einfacher als zuvor gemacht.

In der nächsten Episode werde ich auf die verbleibenden Funktionen eingehen und Datums- und Ortsangaben hinzufügen sowie die Debugging-Tools von Google Chrome Browser verwenden, um mich zu unterstützen.

Wenn Sie auf die nächste Episode warten, planen Sie Ihr erstes Meeting und probieren Sie die Ajax-Planungsfunktionen aus. Ich würde es auch begrüßen, wenn Sie Ihre Erfahrungen unten in den Kommentaren teilen und ich bin immer an Ihren Vorschlägen interessiert. Sie können mich auch direkt auf Twitter @reifman erreichen.

Die Preview-Version von Meeting Planner ist jetzt live. Jetzt können Sie es mit Ihren Freunden und Kollegen teilen.

Schließlich beginne ich mit WeFunder zu experimentieren, basierend auf der Umsetzung der neuen Crowdfunding-Regeln der SEC. Sie können dort unserem Profil folgen, wenn Sie möchten. Darüber werde ich in einem zukünftigen Tutorial noch mehr schreiben.

Achten Sie auf kommende Tutorials in der Reihe "Your Startup With PHP".

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