{"id":7942,"date":"2021-07-03T17:37:51","date_gmt":"2021-07-03T15:37:51","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=7942"},"modified":"2022-11-21T19:44:54","modified_gmt":"2022-11-21T18:44:54","slug":"laravel-install-jetstream-app","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2021\/07\/03\/laravel-install-jetstream-app\/","title":{"rendered":"Laravel | Einstieg und erste Schritte"},"content":{"rendered":"\n

TL;DR<\/h1>\n\n\n\n

Der Code f\u00fcr die in diesem Post erstelle Anwendung liegt hier<\/a>.<\/p>\n\n\n\n

Laravel \u00d6kosystem<\/h1>\n\n\n\n

Laravel Breeze<\/a><\/h3>\n\n\n\n

Laravel Breeze ist eine minimale, einfache Implementierung aller Authentifizierungsfunktionen von Laravel, einschlie\u00dflich Anmeldung, Registrierung, Pa\u00dfwortzur\u00fccksetzung, E-Mail-Best\u00e4tigung und Pa\u00dfwortbest\u00e4tigung.<\/p>\n\n\n\n

Die Standardansichtsebene von Laravel Breeze besteht aus einfachen Blade-Vorlagen<\/a>, die mit Tailwind CSS<\/a> gestaltet sind. Breeze bietet einen wunderbaren Ausgangspunkt f\u00fcr den Beginn einer frischen Laravel-Anwendung.<\/p>\n\n\n\n

Breeze & Inertia<\/a><\/h3>\n\n\n\n

Laravel Breeze bietet auch eine Frontend-Implementierung von Inertia.js<\/a> die von Vue oder React unterst\u00fctzt wird.<\/p>\n\n\n\n

Laravel Jetstream (Link)<\/h3>\n\n\n\n

Jetstream bietet ein sch\u00f6n gestaltetes Anwendungsger\u00fcst f\u00fcr Laravel und umfasst Anmeldung, Registrierung, E-Mail-Verifizierung, Zwei-Faktor-Authentifizierung, Sitzungsverwaltung, API-Unterst\u00fctzung \u00fcber Laravel Sanctum und optionales Teammanagement. <\/p>\n\n\n\n

Jetstream wurde mit Tailwind CSS<\/a> entwickelt und bietet Ihre Wahl zwischen Livewire<\/a> oder Inertia.js<\/a>-gesteuertem Frontend-Ger\u00fcst.<\/p>\n\n\n\n

Hinweis:<\/h5>\n\n\n\n

W\u00e4hrend Laravel Breeze einen einfachen und minimalen Ausgangspunkt f\u00fcr die Erstellung einer Laravel-Anwendung bietet, erweitert Jetstream diese Funktionalit\u00e4t mit robusteren Funktionen und zus\u00e4tzlichen Frontend-Technologie-Stacks.<\/p>\n\n\n\n

F\u00fcr Laravel-Neulinge empfehlen wir, sich mit Laravel Breeze vertraut zu machen, bevor sie Laravel Jetstream abschlie\u00dfen.<\/p>\n\n\n\n

Jetstream<\/a><\/h3>\n\n\n\n

Jetstream bietet ein wundersch\u00f6n gestaltetes Anwendungsger\u00fcst f\u00fcr Laravel und umfa\u00dft Anmeldung, Registrierung, E-Mail-Verifizierung, Zwei-Faktor-Authentifizierung, Sitzungsverwaltung, API-Unterst\u00fctzung \u00fcber Laravel Sanctum und optionales Teammanagement. <\/p>\n\n\n\n

Jetstream wurde mit Tailwind CSS<\/a> entwickelt und bietet Ihre Wahl zwischen Livewire<\/a> – oder  Inertia.js<\/a>-gesteuertem Frontend-Scaffolding.<\/p>\n\n\n\n

Fortify<\/a><\/h3>\n\n\n\n

Laravel Fortify ist eine Frontend-agnostische Authentifizierungs-Backend-Implementierung f\u00fcr Laravel.<\/p>\n\n\n\n

Fortify registriert die Routen und Controller, die zur Implementierung aller Authentifizierungsfunktionen von Laravel erforderlich sind, einschlie\u00dflich Anmeldung, Registrierung, Zur\u00fccksetzen des Pa\u00dfworts, E-Mail-Verifizierung und mehr. <\/p>\n\n\n\n

Nach der Installation von Fortify k\u00f6nnen Sie den route:list<\/code> Artisan-Befehl ausf\u00fchren, um die von Fortify registrierten Routen anzuzeigen.<\/p>\n\n\n\n

Da Fortify keine eigene Benutzeroberfl\u00e4che bereitstellt, soll es mit Ihrer eigenen Benutzeroberfl\u00e4che gekoppelt werden, die Anfragen an die registrierten Routen stellt. Wir werden im Rest dieser Dokumentation genau besprechen, wie Anfragen an diese Routen gestellt werden.<\/p>\n\n\n\n

Voraussetzung<\/h1>\n\n\n\n

Voraussetzung f\u00fcr die Verwendung von Laravel ist eine lauff\u00e4hige Entwicklungsumgebung. Der Aufbau einer solchen Umgebung wird hier <\/a>beschrieben.<\/p>\n\n\n\n

Installation mit Hilfe von Composer<\/h1>\n\n\n\n

Wenn auf Ihrem Computer bereits PHP und Composer installiert sind, k\u00f6nnen Sie ein neues Laravel-Projekt erstellen, indem Sie Composer direkt verwenden. <\/p>\n\n\n\n

composer create-project laravel\/laravel app\n\ncd app<\/pre>\n\n\n\n
Nachdem die Anwendung erstellt wurde, k\u00f6nnen Sie den lokalen Entwicklungsserver von Laravel mit dem nachfolgenden Befehl starten:<\/p>\n\n\n\n
php artisan serve<\/pre>\n\n\n\n
Installation mit Hilfe des Laravel Installer<\/h1>\n\n\n\n
Laravel Installer<\/h2>\n\n\n\n
Am einfachsten wird eine neuen Anwendung installiert mit Hilfe der Laravel CLI laravel<\/code>. Sie installieren diese \u00fcber<\/p>\n\n\n\n
composer global require laravel\/installer<\/pre>\n\n\n\n
Der Laravel Installer verwendet f\u00fcr die neue Anwendung die vorgegebenen Standardeinstellungen (z., B. Registrierungsm\u00f6glichkeit ohne Mailbest\u00e4tigung).<\/p>\n\n\n\n
Hinweis: Im Laufe diese Posts werden Sie diese anpassen.<\/p>\n\n\n\n
Erstellen der Anwendung<\/h2>\n\n\n\n
laravel new app --stack=livewire --jet --teams<\/pre>\n\n\n\n
\"\"
Anwendung erstellen<\/figcaption><\/figure>\n\n\n\n
Konfiguration der Datenbank<\/h2>\n\n\n\n
Die Konfiguration der Datenbank erfolgt in der bereits vorhandenen Datei .env<\/code><\/kbd>.<\/p>\n\n\n\n
Nach der Installation finden Sie dort die folgenden Eintr\u00e4ge f\u00fcr eine MySQL Datenbankanbindung:<\/p>\n\n\n\n
\"\"
Standardeinstellungen f\u00fcr die Datenbankverbindung<\/figcaption><\/figure>\n\n\n\n
Wir wollen uns hier auf die Einrichten der Laravel Anwendung beschr\u00e4nken und nicht noch zus\u00e4tzlich die Installation einer MySQL Datenbank beschreiben. Hierzu finden Sie mehr Informationen an anderer Stelle<\/a>.<\/p>\n\n\n\n
Datenbank SQLite verwenden<\/h3>\n\n\n\n
\u00c4ndern Sie  den nachfolgenden Eintrag (im obigen Beispiel in Zeile 10):<\/p>\n\n\n\n
DB_CONNECTION=sqlite<\/pre>\n\n\n\n
\"\"
sqlite als Datenbank einstellen<\/figcaption><\/figure>\n\n\n\n
Leere Datenbankdatei erstellen<\/h3>\n\n\n\n
Im n\u00e4chsten Schritt erstellen wir eine leeren Datenbank, indem wir im Ordner database <\/code>eine Datei database.sqlite<\/code> erstellen<\/p>\n\n\n\n
\"\"
Initiale leere Datenbank-Datei erstellen<\/figcaption><\/figure>\n\n\n\n
Hinweis: Sie k\u00f6nnen eine leere Datei auch \u00fcber die Kommandozeile erstellen. Voraussetzung ist das Tool sqlite3 (hier <\/a>geht’s zum Download)<\/p>\n\n\n\n
sqlite3 database\\database.sqlite \"create table a(f int); drop table a;\"<\/pre>\n\n\n\n
Eine leere SQlite-Datenbank k\u00f6nnen sie auch mit diesem Kommando erstellen:<\/p>\n\n\n\n
touch database\/database.sqlite<\/pre>\n\n\n\n
Tabellen erstellen<\/h3>\n\n\n\n
Im letzten Schritt werden in der Datenbank die f\u00fcr Laravel notwendigen Tabellen eingerichtet:<\/p>\n\n\n\n
php artisan migrate<\/pre>\n\n\n\n
\"\"
Migration der Tabellen durchf\u00fchren<\/figcaption><\/figure>\n\n\n\n
Hinweis: Die vorhandenen Tabellen k\u00f6nnen Sie sich \u00fcber die Kommandozeile anzeigen lassen:<\/p>\n\n\n\n
sqlite3.exe .\\database\\database.sqlite \".tables\"<\/pre>\n\n\n\n
\"\"
Vorhandene Tabellen in der Datenbank<\/figcaption><\/figure>\n\n\n\n
Installation und Konfiguration des Frontend<\/h2>\n\n\n\n
Um mit dem  Frontend  arbeiten zu k\u00f6nnen m\u00fcssen zu ersten die notwendigen Komponenten installiert und das Frontend erstellt werden:<\/p>\n\n\n\n
npm install\nnpm run dev<\/pre>\n\n\n\n
Anzeigen der Anwendung<\/h2>\n\n\n\n
Die grundlegende Installation und Konfiguration ist abgeschlossen. Starten Sie die Anwendung durch das nachfolgende Kommando:<\/p>\n\n\n\n
php artisan serve<\/pre>\n\n\n\n
\"\"
Lokalen Webserver starten<\/figcaption><\/figure>\n\n\n\n
\u00d6ffnen Sie die Anwendung im Browser \u00fcber den Link http:\/\/127.0.0.1:8000<\/a><\/p>\n\n\n\n
\"\"
Startseite der Anwendung<\/figcaption><\/figure>\n\n\n\n
Anmeldung und Authentifizierung<\/h1>\n\n\n\n
Die erstelle Laravel-Anwendung enth\u00e4lt bereits die Funktionalit\u00e4t, das sich Benutzer Registrieren und Anmelden k\u00f6nnen. Hierzu finden Sie auf der Startseite rechts oben entsprechende Links.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Mit den verwendeten  Standardeinstellungen reicht zum Einrichten des neuen Benutzer der Name, die E-Mail und das Passwort.<\/p>\n\n\n\n
Um eine h\u00f6here Sicherheit zu erreichen, werden diese Einstellungen so ge\u00e4ndert, das einen Best\u00e4tigungsmail an den Benutzer gesendet wird. Erst durch den Klick auf den darin enthaltenen Best\u00e4tigungslink wird die Einrichtung des Benutzers abgeschlossen.<\/p>\n\n\n\n
E-Mail Verification einrichten<\/h2>\n\n\n\n
Das Einrichten dieser E-Mail Verification<\/a> erfolgt in mehreren Schritten:<\/p>\n\n\n\n
Aktivieren des Features emailVerification <\/code>in der Datei config\/fortify.php<\/code><\/h3>\n\n\n\n
\"\"
Einrichten der emailVerification<\/figcaption><\/figure>\n\n\n\n
Hinzuf\u00fcgen eines Interface im Benutzermodels app\/Models\/User.psp<\/code><\/h3>\n\n\n\n
use\u00a0Illuminate\\Contracts\\Auth\\MustVerifyEmail;<\/pre>\n\n\n\n
Erweitern des Klassendefinition im Benutzermodels app\/Models\/User.psp<\/code><\/h3>\n\n\n\n
class User extends Authenticatable implements MustVerifyEmail<\/pre>\n\n\n\n
\"\"
 Einrichten der emailVerification <\/figcaption><\/figure>\n\n\n\n
Festlegen der E-Mail Konfiguration<\/h3>\n\n\n\n
Damit Laravel eine E-Mail versenden kann wird der Zugang zu einem E-Mail Server verwendet. Hier ben\u00f6tigen wir die Zugangsdaten f\u00fcr den SMTP-Versand.<\/p>\n\n\n\n
Festgelegt werden diese Parameter wieder in der Datei .env<\/code>:<\/p>\n\n\n\n
\"\"
Mailkonfiguration<\/figcaption><\/figure>\n\n\n\n
Die entsprechenden Werte h\u00e4ngen vom verwendeten Mailserver ab. <\/p>\n\n\n\n
Zuerst m\u00fcssen Sie bei ihrem Provider ein Mailkonto einrichten (Benutzer und Passwort). Testen Sie am besten diese Daten \u00fcber den von ihrem Provider bereitgestellten Webmailer.<\/p>\n\n\n\n
Die weiteren Werte (Port, Protokoll) entnehmen Sie der Dokumentation ihres Providers.<\/p>\n\n\n\n
Nachfolgend zwei Beispiele:<\/p>\n\n\n\n
Provider<\/th>Strato<\/th>United Domains<\/th><\/tr><\/thead>
MAIL_MAILER<\/td>smtp<\/td>smtp<\/td><\/tr>
MAIL_HOST<\/td>smtp.strato.de<\/td>smtps.udag.de <\/td><\/tr>
 MAIL_PORT <\/td>587<\/td>587<\/td><\/tr>
 MAIL_ENCRYPTION <\/td>tls<\/td>tls<\/td><\/tr><\/tbody><\/table>
Beispiele f\u00fcr die E-Mail-Konfiguration<\/figcaption><\/figure>\n\n\n\n
Starten Sie die Anwendung neu und richten Sie einen weiteren Benutzer ein<\/p>\n\n\n\n
php artisan serve<\/pre>\n\n\n\n
\"\"
Lokalen Webserver starten<\/figcaption><\/figure>\n\n\n\n
Registrierung durchf\u00fchren<\/h2>\n\n\n\n
Starten Sie die Registrierung \u00fcber den Link Register <\/a>auf der Startseite.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Geben Sie die notwendigen Benutzerdaten ein. Best\u00e4tigen Sie ebenfalls die Terms of Services,<\/em> falls diese aktiviert sind.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bei erfolgreichen Versand der Best\u00e4tigungsmail erscheint diese Anzeige. Sie erhalten ebenfalls eine Best\u00e4tigungsmail an die verwendete E-Mail-Adresse.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u00d6ffnen Sie die E-Mail und klicken Sie auf den Best\u00e4tigungslink. Achten Sie darauf, das der Link im gleichen Browser ge\u00f6ffnet wird, mit dem Sie die Registrierung durchgef\u00fchrt haben.<\/p>\n\n\n\n
Alternativ kopieren Sie einfach den Link, wechseln wieder zur\u00fcck in das Registrierungsfenster und f\u00fcgen den kopierten Link ein.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Danach befinden Sie sich auf dem Dashboard der Anwendung. Die Registrierung hat somit funktioniert.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
M\u00f6gliche Konfigurationsfehler<\/h2>\n\n\n\n
E-Mail Server ist falsch<\/h3>\n\n\n\n
Fehlermeldung: Der angegebene Host ist unbekannt<\/em><\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Port ist falsch<\/h3>\n\n\n\n
Fehlermeldung: Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte<\/em><\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Benutzername oder Passwort sind falsch<\/h3>\n\n\n\n
Fehlermeldung: Authentication failed: wrong user\/password<\/em><\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/p>\n\n\n\n
Anpassung der Jetstream-Komponenten<\/h2>\n\n\n\n
Die erstelle Laravel-Jetstream Anwendung beinhaltet bereits “von Haus aus” einen gro\u00dfen Funktionsumfang. Jede einzelnen Funktionalit\u00e4t wird in den meisten F\u00e4llen durch mindestens zwei Dateien realisiert:<\/p>\n\n\n\n