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

Erstellen Sie Ihr Startup mit PHP: Benutzereinstellungen, Profilbilder und Kontaktdaten

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Access Control, Active Record Relations and Slugs
Building Your Startup With PHP: Scheduling a Meeting

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product image
What You'll Be Creating

Dieses Tutorial ist Teil der Building Your Startup mit PHP-Serie auf Tuts+. In dieser Serie führe ich Sie durch die Einführung eines Startups von der Idee zur Realität, indem ich meine Meeting Planner-App als ein Beispiel aus dem echten Leben benutze. Bei jedem Schritt veröffentlichen wir den Meeting-Planer-Code als Open-Source-Beispiele, von denen Sie lernen können. Wir werden auch start-up-geschäftliche Probleme behandeln, wie sie entstehen.

In diesem Lernprogramm werden wir Schlüsselbereiche um die eigenen Daten des Benutzers erweitern, um sie über die Anwendung zu verwenden:

  1. Kontaktdetails: Die Telefonnummer des Benutzers und die Videokonferenzadressen für virtuelle Besprechungen
  2. Benutzereinstellungen: Zum Verfolgen der Benutzereinstellungen in der Anwendung
  3. Profilbilder: Damit kann der Nutzer ein Foto hochladen, das wir auf den Meeting-Seiten verwenden können

Der gesamte Code für Meeting Planner ist in das Yii2 Framework für PHP geschrieben, das integrierte Unterstützung für I18n bietet. Wenn du mehr über Yii2 erfahren möchtest, schau dir unsere Parallel-Serie Programmierung mit Yii2 bei Tuts+ an.

Nur zur Erinnerung, ich nehme an den Kommentarthreads unten teil. Ich bin besonders interessiert, wenn Sie unterschiedliche Ansätze, zusätzliche Ideen haben oder Themen für zukünftige Tutorials vorschlagen möchten.

Kontakt details

Der Zweck der Kontaktdetails besteht darin, Benutzern die Bereitstellung von Telefonnummern und Videokonferenzadressen für virtuelle Besprechungen zu ermöglichen. Die Telefonnummer ist auch nützlich vor und nach dem Treffen.

Die Erstellung dieses Features ist relativ einfach. Wie in früheren Tutorials verwendeten wir den Code-Generator Gii von Yii, um das Modell für UserContact- und CRUD-Dateien zu erstellen.

Wir haben auch die Navigationsleiste aktualisiert, um einen Link zur Benutzerkontaktfunktion hinzuzufügen. Im frontend/views/layouts/main.php:

Sie können auch einen Link oben zur Funktion Benutzereinstellungen sehen, die weiter unten beschrieben wird.

Das Hinzufügen eines Auswahl-Dropdown-Menüs für Typen ist eine gängige Modellerweiterung, die wir verwenden, um Formulare freundlicher zu gestalten. Siehe Dropdown-Liste Art des Kontakts:

Add Your Contact Form with Type Dropdown

Hier sind die Modelltypdefinitionen und Hilfsmethoden, um freundliche Dropdowns für Kontakttyp-Dienste zu ermöglichen:

Hier ist das Drop-Down in Form implementiert:

Diese Art Helfer sind allgemeine Konstrukte im Meeting Planner.

Nun zu den Benutzereinstellungen.

Benutzereinstellungen

Da Meeting Planner in seiner Funktionalität wächst, ist es wichtig, dass Benutzer die Funktionalität mit einer Reihe von Einstellungen anpassen können. Wir erstellen ein Benutzereinstellungen-Subsystem, um diese Einstellungen in der Anwendung zu verwalten.

Die Tabelle UserSetting unterscheidet sich ein wenig von anderen Modellen, da jeder Benutzer nur einen Datensatz hat und jeder Datensatz viele Felder enthält, die die Einstellungen eines bestimmten Benutzers repräsentieren. Dies ist anders als wenn Benutzer Kontakteinträge hinzufügen, wobei jeder Benutzer viele Datensätze hat, die jeweils einen Kontakteintrag darstellen.

Wenn Benutzer ihre Einstellungen ändern, aktualisieren wir ihren individuellen Einstellungsdatensatz. Wir können auch die Felder der Tabelle im Laufe der Zeit erweitern, um zusätzliche Optionen zu unterstützen.

Wir müssen Hilfsfunktionen erstellen, die die Einstellungen eines Benutzers laden und einen Standarddatensatz für sie erstellen, falls sie nicht existieren.

Wir müssen auch ein Formular erstellen, um die Konfiguration der Einstellungen zu vereinfachen. Wir können Bootstraps Layouts und Yii2-Widget-Erweiterungen verwenden.

Auswählen unserer ersten Benutzereinstellungen

Während sich die Anzahl der Einstellungen im Laufe der Zeit erhöht, lassen Sie uns einige der folgenden Einstellungen betrachten:

  • Benutzerprofilfoto (Pfad zu einer Datei, die hochgeladen wird)
  • Mahnungen am Tag vor einem Meeting erhalten
  • Mahnungen in den Tagen vor einem Meeting erhalten
  • Teilen Sie Kontaktdaten mit Besprechungsteilnehmern
  • Blockiere alle E-Mails vom System

Wir können die Benutzereinstellungstabelle mit einer Active Record Migration erstellen und sie später mit aktualisierten Migrationen erweitern.

Hier ist die Migration mit Feldern für unsere Einstellungen - beachten Sie die Beziehung zur Tabelle Benutzer:

Führen Sie die Migration aus:

Den Code schreiben

Wir können Gii verwenden, um die Modell- und CRUD-Dateien für uns zu generieren. Natürlich müssen wir die CRUD ändern, um nur den aktuellen Benutzerdatensatz anzuzeigen.

Hier sind die Einstellungen für den Model Generator:

Yii Code Generator Gii with Model UserSetting

Hier sind die Einstellungen für den CRUD-Controller:

Yii Gii Code Generator CRUD for User Settings

Wenn der Benutzer in der Navigationsleiste auf Einstellungen klickt, möchten wir die Seite mit den Aktualisierungseinstellungen anzeigen. Lassen Sie uns einige Helfer erstellen, um nach dem Einstellungsdatensatz des Benutzers zu suchen und ihn zu erstellen, falls er nicht existiert.

Hier ist der Index Redirect auf die Update-Aktion:

Die Initialize-Methode erstellt einen Datensatz für den aktiven Benutzer und legt alle Standardeinstellungen fest:

Anpassen des Einstellungsformulars

Wir müssen einen Teil des automatisch generierten Formularcodes durch Checkboxen und eine andere Dropdown-Liste ersetzen (wie wir es oben mit dem UserContact-Typ getan haben). Ich mag, dass die Checkbox-Funktionalität von Yii die Möglichkeit bietet, festgelegte und nicht gesetzte Werte anzugeben. Normalerweise geben Webformular-Kontrollkästchen ein leeres Element (exists) für "true" zurück oder "does not return" (existiert nicht) für "false".

Hier ist das Endergebnis:

Meeting Planner Update Your Settings

Lassen Sie uns weiter gehen und UserSetting erweitern, um Profilfotos zu unterstützen.

Profilbilder

Um Nutzerfotos auf den Meeting-Seiten zu zeigen, müssen wir die Nutzer beim Hochladen eines Fotos unterstützen (in den meisten Fällen). Alternativ können wir zumindest standardmäßig den Gravatar-Dienst verwenden, der ein Profilfoto mit der E-Mail-Adresse des Benutzers verknüpft. Das Hochladen und Speichern von Dateien auf einem Server ist immer eine detaillierte und heikle Web-Entwicklungsaufgabe, die wir in Kürze durchgehen werden.

Konfigurieren von Bootstrap-Registerkarten

Zuerst fangen wir an, dem Formular für Benutzereinstellungen Registerkarten hinzuzufügen, die allgemeine Einstellungen von Profilbildern trennen. Mit den Bootstrap-nav-tab-Stildefinitionen kommen wir dazu:

Es sieht aus wie das:

User Settings with Bootstrap Tabs

Wenn kein Bild hochgeladen wird, versuchen wir standardmäßig, den Gravatar des Benutzers anzuzeigen.

Hilfreiche Yii2-Erweiterungen für Profilbilder

Es gibt vier Yii2-Erweiterungen, die ich für die Unterstützung von Profilbildern verwenden möchte:

  1. Carsten Brandts Gravatar zur Darstellung von Gravataren
  2. Kartik Visweswaran File Input zur Unterstützung von Image-Datei-Uploads
  3. Yii Stellen Sie sich vor, Bilder auf verschiedene Größen zu skalieren
  4. 2Amigos Resource Manager für spätere Unterstützung für Amazon S3-Speicher

Visweswaran und die 2Amigos haben eine Reihe von Yii2-Erweiterungen produziert, die sehr nützlich sind und in der Regel eine solide Dokumentation liefern.

Fügen Sie diese Erweiterungen zu Ihrer composer.json-Datei hinzu:

Und aktualisiere Komponisten:

Gravatar-Bilder verwenden

Wenn kein Profilbild konfiguriert ist, zeigen wir den Gravatar des Benutzers an. Der Gravatar-Dienst verweist auf die E-Mail-Adresse des registrierten Benutzers. Hier ist der Code zum Anzeigen des Gravatar:

Es wird ungefähr so aussehen. Wenn der Benutzer einen Gravatar konfiguriert hat, sehen Sie das ausgewählte Bild.

Displaying a Gravatar with Yii2

Hochladen eines Profilbilds

Zum Hochladen von Bildern verwenden wir Kartiks exzellentes Dateieingabe-Widget. Er bietet auch einen sehr schönen Erklärer, wie man es benutzt.

Hier ist der Code für unser Update-Formular, das das Widget im Bereich "Foto hochladen" anzeigt:

Der Anfang des Formulars enthält den Enctype für mehrteilige Formulardaten:

Das Formular sieht folgendermaßen aus:

Yii2 File Input Extension - Upload a Profile Image

Wir fügen dem UserSetting-Modell auch Regeln hinzu, um Uploads auf jpg, gif und png zu beschränken und die Upload-Größe auf 100kb zu begrenzen.

Die Yii2-Validatoren verfügen übrigens über eine erstaunliche Bandbreite an Funktionen für viele gängige Operationen, die Webentwickler normalerweise von Hand erstellen. Ich werde versuchen, dies in einer zukünftigen Programmierung mit Yii2 Tutorial zu erkunden.

Hier ist der Code, der den Post vom Update-Formular behandelt. Im Allgemeinen ist es wahrscheinlich eine gute Idee, mehr von diesem Code in Modellmethoden zu überarbeiten und die Komplexität der Controller zu reduzieren.

Die Bilder müssen dort gespeichert werden, wo sie vom Webserver angezeigt werden können. Ich habe ein uploads/avatar Verzeichnis in der /frontend/web Struktur erstellt.

Skalieren von Bildern mit Imagine

Wir möchten das Bild tatsächlich in drei Größen speichern: volle Größe, ein kleines Quadrat für die Anzeige in der Navigationsleiste oder Listenansichten und ein mittelgroßes Quadrat für das Treffen von Seiten.

Wir werden die Yii2 Imagine-Erweiterung verwenden, um Bilder zu skalieren; Es erweitert die Imagine-Bildbearbeitungsbibliothek für PHP.

Hier ist der Code, der die zusätzlichen Bildgrößen skaliert und speichert:

Hier ist das fertige Formular, das das quadratische Bild auf der Benutzerprofilseite anzeigt:

Meeting Planner Update Your Settings with Tabs and Profile Image

Unbenutzte Bilder bereinigen

Wenn Benutzer ein neues Foto hochladen, müssen wir das alte Bild und die zugehörigen skalierten Kopien löschen. Wir erweitern den Controller, um eine neue Löschmethode aufzurufen:

Hier ist die deleteImage-Methode in UserSetting:

Verwenden von Amazon S3 zum Speichern von Bildern

Das Speichern von vom Nutzer hochgeladenen Bildern auf unserem Webserver kann zu Komplexitäten führen. Es bedeutet, dass wir zusätzlich zur Sicherung von MySQL immer auch einen Teil des Dateisystems sichern müssen. Dies kann Serverwiederherstellungsvorgänge und Migrationen erschweren. Es belastet auch unseren LAMP-Stapel, wenn Bilder geladen werden.

Die Verwendung von Amazon S3 trennt diese Aufgabe von Ihrem primären Webserver und kann die Leistung verbessern und die Serververwaltung im Laufe der Zeit vereinfachen, insbesondere im Hinblick auf Portabilität, Skalierbarkeit und Upgrades. Ich werde das Hochladen und Zugreifen auf Dateien von Amazon S3 in einem zukünftigen Lernprogramm überprüfen.

Was kommt als nächstes?

Ich hoffe, Sie haben einige angewandte Aspekte von Yii, ActiveRecord, Bootstrap, Formulare, Datei-Upload und Bildbearbeitung gelernt. Ich habe es genossen, mit einigen der neuen JQuery-Widgets zu arbeiten, die als Yii-Erweiterungen verfügbar sind. Achten Sie auf kommende Tutorials in unserer Building Your Startup With PHP-Reihe - es gibt viele lustige Features. In der Tat kommen wir unserem ersten Treffen näher!

Fühlen Sie bitte sich frei, fügen Sie Ihre Fragen und Kommentare unten hinzu; Ich nehme generell an den Diskussionen teil. Sie können mich auch auf Twitter @reifman erreichen oder mir direkt eine E-Mail schicken.

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