About Blog Category Tag

03. July 2021

Laravel | Jetstream Anwendung erstellen

uploads/2021/07/Laravel-Installation-einer-Beispielanwendung.png

TL;DR

Der Code für die in diesem Post erstelle Anwendung liegt hier.

Voraussetzung

Voraussetzung für die Verwendung von Laravel ist eine lauffähige Entwicklungsumgebung. Der Aufbau einer solchen Umgebung wird hier beschrieben.

Laravel Installer

Am einfachsten wird eine neuen Anwendung installiert mit Hilfe der Laravel CLI laravel. Sie installieren diese über

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">composer global require laravel/installer

Der Laravel Installer verwendet für die neue Anwendung die vorgegebenen Standardeinstellungen (z., B. Registrierungsmöglichkeit ohne Mailbestätigung).

Hinweis: Im Laufe diese Posts werden Sie diese anpassen.

Erstellen der Anwendung

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">laravel new app --stack=livewire --jet --teams

Die Konfiguration der Datenbank erfolgt in der bereits vorhandenen Datei .env.

Nach der Installation finden Sie dort die folgenden Einträge für eine MySQL Datenbankanbindung:

Datenbank SQLite verwenden

Ändern Sie den nachfolgenden Eintrag (im obigen Beispiel in Zeile 10):

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">DB_CONNECTION=sqlite

Im nächsten Schritt erstellen wir eine leeren Datenbank, indem wir im Ordner database eine Datei database.sqlite erstellen

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">touch database/database.sqlite

Eine leere SQlite-Datenank können sie auch mit diesem Kommando erstellen:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">sqlite3 database\database.sqlite "create table a(f int); drop table a;"

Tabellen erstellen

Im letzten Schritt werden in der Datenbank die für Laravel notwendigen Tabellen eingerichtet:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">php artisan migrate

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="1" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">sqlite3.exe .\database\database.sqlite ".tables"

Um mit dem Frontend arbeiten zu können müssen zu ersten die notwendigen Komponenten installiert und das Frontend erstellt werden:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">npm install
npm run dev

Anzeigen der Anwendung

Die grundlegende Installation und Konfiguration ist abgeschlossen. Starten Sie die Anwendung durch das nachfolgende Kommando:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">php artisan serve

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.

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.

E-Mail Verification einrichten

Das Einrichten dieser E-Mail Verification erfolgt in mehreren Schritten:

Aktivieren des Features emailVerification in der Datei config/fortify.php

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="php" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">use Illuminate\Contracts\Auth\MustVerifyEmail;

Erweitern des Klassendefinition im Benutzermodels app/Models/User.psp

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="php" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">class User extends Authenticatable implements MustVerifyEmail

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.

Festgelegt werden diese Parameter wieder in der Datei .env:

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.

Nachfolgend zwei Beispiele:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">php artisan serve

Starten Sie die Registrierung über den Link Register auf der Startseite.

Alternativ kopieren Sie einfach den Link, wechseln wieder zurück in das Registrierungsfenster und fügen den kopierten Link ein.

E-Mail Server ist falsch

Fehlermeldung: Der angegebene Host ist unbekannt

Fehlermeldung: Es konnte keine Verbindung hergestellt werden, da der Zielcomputer die Verbindung verweigerte

Fehlermeldung: Authentication failed: wrong user/password

Die erstelle Laravel-Jetstream Anwendung beinhaltet bereits „von Haus aus“ einen großen Funktionsumfang. Jede einzelnen Funktionalität wird in den meisten Fällen durch mindestens zwei Dateien realisiert:

  • eine PHP-Klasse, welche die Funktionalität umsetzt (Programmcode)
  • eine Blade-Template, das die Ausgabe (Benutzersicht, View) umsetzt

Die Views werden z. B in dem nachfolgendem Ordner gespeichert:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">vendor\laravel\jetstream\resources\views

Um diese Views innerhalb unserer Anwendung anpassen zu können, müssen sie an einer anderen Stelle gespeichert werden. Sonst werden unsere Änderungen z. B. nach jedem Update wieder gelöscht.

Wie kopieren diese durch den nachfolgenden Befehl:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="shell" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">php artisan vendor:publish --tag=jetstream-views

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">resources\views\vendor\jetstream

Livewire Views

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">php artisan livewire:publish

Dadurch werden die nachfolgenden Dateien und Ordner erstellt:

config/livewire.php
public/vendor/

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">config/livewire.php
public/vendor/livewire/livewire.js
public/vendor/livewire/livewire.js.map
public/vendor/livewire/manifest.json
resources/views/vendor/livewire/bootstrap.blade.php
resources/views/vendor/livewire/simple-bootstrap.blade.php
resources/views/vendor/livewire/simple-tailwind.blade.php
resources/views/vendor/livewire/tailwind.blade.php

Weitere Anpassungen

Terms of Services aktivieren

Aktivieren Sie dazu das Feature termsAndPrivacyPolicy in der Datei config/jetstream.php

Bearbeiten Sie in der Datei config/app.php die Einstellung locale. Ändern Sie den Wert auf 'de'.

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:

Betrachten wir hierzu die Startseite, speziell die Links in der rechten oberen Ecke:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title=""><a href="{{ route('register') }}" class="...">Register</a>

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

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">Register

schreiben wir nun

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">{{ __('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:

  • Ermitteln des Views mit dem zu übersetzenden Text, z. B. Sample Text
  • Einbinden des Textes in die Funktion , z. B. {{ ('<em>Sample text</em>') }}
  • 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

In der vorhandenen Einstellung legt fest, das bei der Uri '/' der View 'welcome' angezeigt wird.

Einfache Startseite erstellen

Wir verwenden hier das in der Laravel Dokumentation beschrieben einfache Beispiel.

Erstellen Sie die Datei Datei resources/views/home.blade.php. Verwenden Sie als Inhalt den nachfolgenden Text

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title=""><html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

Passen Sie dann die Datei routes/web.php an.

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">Route::get('/welcome', function () {
    return view('welcome');
})->name('welcome');

Route::get('/', function () {
    return view('home', ['name' => 'Laravel']);
});

Wir ändern die neue Startseite mit der Uri / und stellen die alte Startseite unter einer neuen Uri /welcome bereit.

Öffnen Sie nun wieder die Seite http://localhost:8000 oder aktualisieren Sie ein bereits geöffnetes Browserfenster:

Erweitern Sie die Daten resources/views/navigation-menu.blade.php um einen Eintrag:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="9-14" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title=""><!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link href="{{ route('dashboard') }}" 
                    :active="request()->routeIs('dashboard')">
         {{ __('Dashboard') }}
    </x-jet-nav-link>
</div>

<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-jet-nav-link href="{{ route('welcome') }}" 
                    :active="request()->routeIs('welcome')">
         {{ __('Welcome') }}
    </x-jet-nav-link>
</div>

Komponenten

Komponente erstellen

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">php artisan make:component MyComponent

Blade-Komponenten registrieren

You can register your jetstream blade components in App\Providers\JetstreamServiceProvider.php located in app\Providers folder.

Fügen sie die nachfolgende Funktion hinzu:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">protected function registerComponent(string $component) {
    \Illuminate\Support\Facades\Blade::component('jetstream::components.'.$component, 'jet-'.$component);
}

Der nachfolgende Programmcode registriert ihre Komponente:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title="">public function register() {
    $this->registerComponent('subform');
}

Sie können diese nun wie folgt nutzen:

<pre class="EnlighterJSRAW" data-enlighter-group="" data-enlighter-highlight="" data-enlighter-language="generic" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-theme="" data-enlighter-title=""><x-jet-subform>
The Latest