Der Code für die in diesem Post erstelle Anwendung liegt hier.
Notwendige Komponenten eines API Backend
Für die Umsetzung eines API Backend benötigen wir in unserer Laravel App mehrere Komponenten:
ein Model, das beschreibt, wir die Daten aussehen, die unsere API verwendet
ein Controller, der den Programmcode beinhaltet, m die einzelnen Aktionen (Create, Read, Update, Delete, ..) auszuführen
weitere Komponenten, um die Nutzung zu erleichern
ein Seeder um die Datenbank mit definierte Werten zu füllen
ein Migrationsskript, um die notwendigen Datenbankeinträge (Tabelle, Spalten) zu erstellen
Testskripte, um unseren Controller und weitere Kompoentne zu prüfen
Hinweis
Vorab ein Hinweis: jeder der nachfolgenden Kommandos erstellen Komponenten in Form von Dateien. Ein erneutes Erstellen wird fehlschlagen, da die entsprechende Datei schon vorhanden ist.
Um mit den verschiedenen Kommandos zu experimentieren, verwenden sie am besten eine Funktionalität von Git, die es ihnen ermöglicht de Status zurückzusetzen, also Dateien zu löschen.
Wenn Sie ein Kommando ausgeführt haben, dann sehen sie im Visual Studio die neu erstellen Dateien:
Selektieren sie die neu erstellten Dateien und wählen sie dann die Option Discard Changes:
Komponenten erstellen
Jede dieser Komponenten kann einzeln erstellt werden, z. B mit
❯ php artisan make:model Post
❯ php artisan make:controller PostController
Hierbei gilt es natürlich, die Abhängigkeiten zu berücksichtigen. Der Controller muss mit dem Model arbeiten und sollte daher die gleichen Felder und Feldnamen verwendet.
Einfacher ist es daher, das Laravel diese Abhängigkeiten kennt und entsprechend verwendet.
Bei der Erstellung des Models können wir auch einen dazu passenden Controller und weitere Komponenten erstellen:
❯ php artisan make:model Post --migration --controller --seed --api --requests --pest
INFO Model and test [app/Models/Post.php] created successfully.
INFO Migration [database/migrations/2024_04_19_073500_create_posts_table.php] created successfully.
INFO Seeder [database/seeders/PostSeeder.php] created successfully.
INFO Request [app/Http/Requests/StorePostRequest.php] created successfully.
INFO Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
INFO Controller and test [app/Http/Controllers/PostController.php] created successfully.
Und um alle möglichen Komponenten zu erstellen, verwenden wir den nachfolgenden Befehl:
❯ php artisan make:model Post --all --pest
INFO Model and test [app/Models/Post.php] created successfully.
INFO Factory [database/factories/PostFactory.php] created successfully.
INFO Migration [database/migrations/2024_04_19_073800_create_posts_table.php] created successfully.
INFO Seeder [database/seeders/PostSeeder.php] created successfully.
INFO Request [app/Http/Requests/StorePostRequest.php] created successfully.
INFO Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
INFO Controller and test [app/Http/Controllers/PostController.php] created successfully.
INFO Policy [app/Policies/PostPolicy.php] created successfully.
❯ php artisan make:model Post --all --pest
INFO Model and test [app/Models/Post.php] created successfully.
INFO Factory [database/factories/PostFactory.php] created successfully.
INFO Migration [database/migrations/2024_04_19_075600_create_posts_table.php] created successfully.
INFO Seeder [database/seeders/PostSeeder.php] created successfully.
INFO Request [app/Http/Requests/StorePostRequest.php] created successfully.
INFO Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
INFO Controller and test [app/Http/Controllers/PostController.php] created successfully.
INFO Policy [app/Policies/PostPolicy.php] created successfully.
Anpassen des Routing
Erweiteren Sie die Datei routes/api.php um den nachfolgenden Programmcode (Zeile 6 und 12-14):
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('/user', function (Request $request) {
return $request->user();
})->middleware('auth:sanctum');
Route::get('/post', [PostController::class, 'index']);
Route::post('/post', [PostController::class, 'store']);
Route::delete('/post/{id}', [PostController::class, 'destroy']);
Prüfen wir die von Laravel erkannten Routen:
Erster Test
Prüfen wir die bisherigen Schritte. Starten sie Laravel und öffnen sie einen Browser unter der Adresse http://127.0.0.1:8000/api/post
❯ php artisan serve
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server
Sie sehen, das sie nichts sehen. Was zu erwarten war, da die API noch keine Daten hat und daher auch keine Daten liefern kann.
Datenbank
Tabelle erstellen
Erweitern wir als nächstes das Migrations-Skript, um die notwendige Tabelle zu erstellen und mit Werten zu füllen.
Für die Operationen GET (Einträge anzeigen), POST (neuen Eintrag erstellen) und DELETE (Eintrag löschen) stehen jeweils eigene URLs zur Verfügung. Am einfachsten ist der Test der URLs mit Postman.
Betrachten wir die Dashboard-Seite der Starter-App: dashboard.blade.php. Es fällt auf, das nur der eigentliche Inhalt definiert wird (z. B. der Willkommens-Text in Zeile 11). Das eigentliche “Aussehen” (Layout) wird abgeleitet von dem generellen App-Layout. Dies wird durch die folgende erste Zele erreicht:
<x-app-layout>
Wir wollen Seiten entwicklen, die ein unterschiedliches Aussehen haben. Daher wollen wir neben dem generellen App-Layout noch weitere Layouts erstellen.
Ein weiteres Layout soll z. B. eine Seitenleiste erhalten, wir wollen es AppSidebarLayout nennen.
Verwendet wird es dann, wenn als erste Zeile die folgende verwendet wird:
<x-app-sidebar-layout>
Neue Seite erstellen
Im ersten Schritt erstellen wir zuerst eine neue Seite
Blade-Datei für neue Seite erstellen
Kopieren sie die Datei dashboard.blade.php nach page_with_sidebar.blade.php.
Löschen sie den Aufruf des Willkommens-Text in Zeile 11:
Der Code für die in diesem Post erstelle Anwendung liegt hier.
Einrichten der Starter-App
Erstellen der Starter App.
Sie können dazu dieses Kommando verwenden:
❯ laravel new site --jet --teams --api --pest --dark --database sqlite --stack livewire --verification --git
Dieser Post arbeitet mit der hier beschriebenen StarterApp. Der Post beschreibt, wie eine Starter-App erstellt und die grundlegenden Anpassungen durchgeführt werden. Sie können auch direkt mit dem dazugehörigen Repository starten:
Nicht nur, das mehrfach den gleichen Code geschrieben wurde, auch bei Änderungen muss an mehreren Stellen geändert werden.
Dabei sollte aus Designer-Sicht das Layout oder Aussehend der Seite aus “logischen” Bestandteilen bestehen, z. B. einer Überschrift, einer Kopfzeile, einen Textabschnitt.
Das aussehen dieser Bestandteile wird dann an andere Stelle festgelegt, aber jeder dieser Bestandteile hat das gleiche Aussehen.
Unsere Startseite würde dann vielleicht so aussehen:
Um dies zu implementieren, setzen wir Blade Komponenten ein.
Hinweis: Der Begriff Blade kommt ihnen vielleicht bekannt vor. Sie haben ihn bestimmt schon in den Dateinamen gesehen:
welcome.blade.php
Was ist Blade.
Die Projektseite formuliert es so:
Blade is the simple, yet powerful templating engine that is included with Laravel.
Oder, wie Wikipedia es formuliert:
Funktional erweiterbare Templating-Sprache zur Erstellung von Views.
Blade ist Funktional erweiterbare Templating-Sprache zur Erstellung von Views.. Eine Template-Engine (von englisch für Vorlage bzw. Schablone und Maschine) ist eine Software, die eine Vorlagen-Datei (engl. Template) verarbeitet und bestimmte Platzhalter darin ähnlich wie bei einem Formular durch jeweils aktuelle Inhalte ersetzt.
Unsere Blade besteht also nicht nur aus grafischen Elementen, z. B. Text, Icon, Auswahlbox. Sondern auch aus Programmkomponenten um diese Seite mit dynamischen Werten zu füllen.
Bezogen auf unser Beispiel des <starter-header> besteht der dynamische Teil aus dem tatächlich anzuzeugendem Text. Dadurch kann diese Komponente an beliebiger Stelle eingesetzt werden und jedesmal einen anderen Text darstellen, immer mit dem gleichen Aussehen.
Erstellen wir also unsere erste Komponente.
Blade Komponente erstellen
Wir erstellen eine Komponente mit dem nachfolgenden Kommando:
❯ php artisan make:component StarterHeader
Dadurch werden zwei neue Dateien erstellt:
resources/views/components/starter-header.blade.php In dieser Datei wird das Aussehen der Komponente festgelegt, Dabei können zusätzlich “Variablen” (also die dynamischen Teile) verwende werden.
app/View/Components/StarterHeader.php Diese ist die zum Blade-View zugehöroge PHP-Klasse. In dieser Daten wird die Verbindung zwischen dem Komponentennamen (starter-header) und dem dazugehörigen View definiert. Zusätzlich werden hier auch die dynamischen Teile festgelegt, also die Parameter für unsere Komponente (im Beispiel “title”)
Blade Komponente konfigurieren
PHP Klasse: app/View/Components/StarterHeader.php
Betrachten wird im ersten Schritt die PHP Klasse der Komponente: app/View/Components/StarterHeader.php
Der Name der Klasse in Zeile 9: StarterHeader
Den dazugehörigen Blade-View in Zeile 24: components.starter-header
Fügen wir nun einen Parameter für unsere Komponente hinzu: title
public $title;
public function __construct($title = 'Header')
{
$this->title = $title;
}
Wird in einer Blade-Seite einen Komponenten verwendet, so wird der Konstruktor (__construct) dieser Komponente aufgerufen, um den notwendigen Programmcode zu erstellen.
Die beim Aufruf angegebene Parameter werden diesem Konstruktor übergeben.
Der Aufruf:
<starter-header title=Laravel" />
führt zu einem Aufruf des Konstruktor __construct("Laravel"). Der Parameter $title wird dabei durch den angegebene Wert "Laravel" ersetzt.
Betrachten wir nun den Blade-View in der Datei resources/views/components/starter-header.blade.php:
Der View hat noch sehr wenig Inhalt. Wir ersetzen nun den vorhandenen Inhalt mit dem Inhalt aus der Datei welcome.blade.php, der für die Formatierung und Darstellung es Headers verwendet wird:
Wir sehen zwei Header: in Zeile 1013 und in Zeile 1047. Beide beinhalten die gleichen HTML-Anweisungen und unterscheiden sich nur im Text des Headers:
Wir kopieren also diese Anweisungen in unseren Blade-View. Dabei ersetzen wir gleichzeitig den (statischen) Text, z. B. Laracast, durch unsere Variable $title, die den gewüscnhten Titel enthält.
Hinweis: Damit Blade erkenne kann, wann HTML Code verwendet wird und wann Programmcode, wird dieser durch die Zeichen {{ und }} umschlossen.
In unserer Seite welcome.blade.php können wir nun die Komponente einsetzen und den vorhandenen Text ersetzen:
Wichtig: Beachten Sie, das wir dem Komponentennamen mit x- beginnen müssen:
Die erstelle Laravel-Anwendung enthält bereits die Funktionalität, das sich Benutzer Registrieren und Anmelden können. Hierzu finden Sie auf der Startseite rechts oben entsprechende Links.
Mit den verwendeten Standardeinstellungen sin Ausreichend für das Einrichten neuen Benutzer.
Um eine höhere Sicherheit zu erreichen, werden diese Einstellungen so geändert, das einen Bestätigungsmail an den Benutzer gesendet wird. Erst durch den Klick auf den darin enthaltenen Bestätigungslink wird die Einrichtung des Benutzers abgeschlossen.
Hinweis: Diese wurden ebenfalls durch die Starter App durchführt.
Aktivieren des Features emailVerification in der Datei config/fortify.php
Einrichtern der E-Mail-Verifizierung bei der Registrierung
Passen sie die Datei app/User.php an:
use Illuminate\Contracts\Auth\MustVerifyEmail;
class User extends Authenticatable implements MustVerifyEmail
Festlegen der E-Mail Konfiguration
Damit Laravel eine E-Mail versenden kann wird der Zugang zu einem E-Mail Server verwendet. Hier benötigen wir die Zugangsdaten für den SMTP-Versand.
Für das Empfangen der Verifizierungsmail gibt es zwei Möglichkeiten:
die Verifizierungsmail wird im Laravel-Log gespeichert
die Verifizierungsmail wird an einen SMPT-Server gesenden
sie können hier ihren eigenen SMTP-Server verwenden
oder sie verwenden mailpit (Lokaler SMTP-Server für Tests)
Festgelegt werden diese Parameter wieder in der Datei .env:
Die entsprechenden Werte hängen vom verwendeten Mailserver ab.
Laravel Log verwenden
Der Eintrag in der Datei .env lautet dann:
MAIL_MAILER=log
Die Verifizierungsmail finden sie dann in der Datei storage/logs/laravel.log:
Eigener SMTP-Server
Der Eintrag in der Datei .env lautet dann:
MAIL_MAILER=smtp
Zuerst müssen Sie bei ihrem Provider ein Mailkonto einrichten (Benutzer und Passwort). Testen Sie am besten diese Daten über den von ihrem Provider bereitgestellten Webmailer.
Die weiteren Werte (Port, Protokoll) entnehmen Sie der Dokumentation ihres Providers.
Installieren sie diesen und starten sie ihn dann mit den Parametern aus der Laravel-Konfiguration: dem SMTP-Port aus der Datei .env. Passen sie zusätzlich den Parameter MAIL_MAILER an:
MAIL_MAILER=smtp
❯ mailpit -s 0.0.0.0:2525
INFO[2024/04/09 18:42:33] [smtpd] starting on 0.0.0.0:2525 (no encryption)
INFO[2024/04/09 18:42:33] [http] starting on [::]:8025
INFO[2024/04/09 18:42:33] [http] accessible via http://localhost:8025/
mailpit Frontend öffnen
Klicken sie auf den angegeben Link der Ausgabe von mailpit, um das Frontend zu starten:
Starten Sie die Anwendung neu und richten Sie einen weiteren Benutzer ein
php artisan serve
Registrierung durchführen
Starten Sie die Registrierung über den Link Register auf der Startseite.
Geben Sie die notwendigen Benutzerdaten ein. Bestätigen Sie ebenfalls die Terms of Services, falls diese aktiviert sind. Wie sie diese aktivieren können sie hier nachlese.
Bei erfolgreichen Versand der Bestätigungsmail erscheint diese Anzeige. Sie erhalten ebenfalls eine Bestätigungsmail an die verwendete E-Mail-Adresse.
Öffnen Sie die E-Mail und klicken Sie auf den Bestätigungslink. Achten Sie darauf, das der Link im gleichen Browser geöffnet wird, mit dem Sie die Registrierung durchgeführt haben.
Alternativ kopieren Sie einfach den Link, wechseln wieder zurück in das Registrierungsfenster und fügen den kopierten Link ein.
Wenn sie mit mailpit arbeiten, so sehen sie im Frontend, das eine neue E-Mail eingegangen ist:
Danach befinden Sie sich auf dem Dashboard der Anwendung. Die Registrierung hat somit funktioniert.
Mögliche Konfigurationsfehler
E-Mail Server ist falsch
Fehlermeldung: Der angegebene Host ist unbekannt
Port ist falsch
Fehlermeldung: Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte
Aktivieren Sie dazu das Feature termsAndPrivacyPolicy in der Datei config/jetstream.php
Dadurch sehen sie im Registrierungsdialog ein zusätzliches Optionsfeld
Ändern der Sprache
Bearbeiten Sie in der Datei config/app.php die Einstellung locale. Ändern Sie den Wert auf 'de'.
Nach einem Neustart der Anwendung werden aber weiterhin die englischen Texte angezeigt.
Die Ursache liegt an der nicht vorhandenen deutschen Übersetzung der verwendeten Texte. Prüfen Sie einfach den Ordner mit den vorhandenen Übersetzungen: resources/lang
Es gibt nur einen Unterordner en für die englischen Texte:
Zusätzlich zu den Übersetzungen muss noch ein weiterer Schritt erfolgen. Um ihre Anwendung komplett auf Mehrsprachlichkeit umzustellen dürfen keine Texte direkt angegeben werden.
Betrachten wir hierzu die Startseite, speziell die Links in der rechten oberen Ecke:
Der View für die Startseite wird in der Datei resources/views/welcome.blade.php definiert:
Wir sehen, das hier der Text direkt in englischer Sprache angegeben wird.
Es ist sehr schwierig, eine automatische Übersetzung für alle Texte durchzuführen, wenn nicht angegeben wird, ob ein bestimmter Text übersetzt werden soll. Einfach alle Texte zu übersetzen kann zu Problemen führen.
Daher wird bei Laravel der Weg gewählt, explizit anzugeben, ob ein Text übersetzt werden soll.
Diese Angabe der nachfolgende Text soll übersetzt werden erfolgt mit Hilfe der Funktion __ (Der Name der Funktion lautet tatsächlich __, als zwei Unterstriche)
Anstatt
Register
schreiben wir nun
{{ __('Register') }}
Dadurch erkennt Laravel (speziell die Blade Template Engine), das hier eine Übersetzung durchgeführt werden soll und sucht eine passenden Übersetzungstext.
Hier kommt nun der bereits angesprochen Ordner resources/lang ins Spiel. Erstellen Sie in diesem Ordner eine Datei de,json und verwenden Sie als Inhalt den nachfolgenden Text:
Nach einen Neustart der Anwendung sehen wir gewünschte Ergebnis:
Den gewünschten Übersetzungstext findet Blades anhand des angegebenen Textes innerhalb der Funktion __:
welcome.blade.php
de.json
Die Übersetzung der Anwendung erfordert somit für alle Texte die gleichen Schritte
Ermitteln des Views mit dem zu übersetzenden Text, z. B. Sample Text
Einbinden des Textes in die Funktion , z. B. {{ ('Sample text') }}
Hinzufügen der Übersetzung in der Datei de.json, z. B. "Sample text“: Beispieltext“
Erstellen einer neue Startseite
Die Startseite entspricht immer noch der Standardanwendung. Der entsprechende View ist welcome.blade.php.
Zur Startseite wird dieser View aber nicht durch den Namen, sondern durch eine Einstellung in der Datei routes/web.php
Mit Hilfe des von Laravel verwendeten Routing, wird festgelegt, welcher View angezeigt wird, wenn eine bestimmte URI aufgerufen wird.
In der vorhandenen Einstellung legt fest, das bei der Uri '/' der View 'welcome' angezeigt wird.
< function composerRequire1a366ea8c9013f37377c59393191f427($fileIdentifier, $file)
---
> function composerRequiref2da6e83b085fd96649a1eced6ba9cbb($fileIdentifier, $file)
vendor/composer/autoload_static.php
Changes
< class ComposerStaticInit1a366ea8c9013f37377c59393191f427
---
> class ComposerStaticInitf2da6e83b085fd96649a1eced6ba9cbb
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.