Routing

Alle Routen anzeigen

php artisan route:list

Routen dynamisch erzeugen

composer require illuminate/support

use Illuminate\Support\Facades\File;

function generateRoutes($basePath, $baseNamespace = 'Pages', $routePrefix = '/')
{
    $files = File::allFiles($basePath);

    foreach ($files as $file) {
        $relativePath = str_replace([$basePath, '.vue'], '', $file->getRelativePathname());
        $routeName = str_replace(DIRECTORY_SEPARATOR, '.', $relativePath);
        $routeUri = str_replace(DIRECTORY_SEPARATOR, '/', $relativePath);

        // Example: if file is `resources/js/Pages/Examples/layout-discord.vue`
        // $routeName = 'Examples.layout-discord';
        // $routeUri = 'examples/layout-discord'

        Route::get($routePrefix . $routeUri, function () use ($relativePath, $baseNamespace) {
            return Inertia::render($baseNamespace . str_replace('/', '\\', $relativePath));
        })->name($routeName);
    }
}

generateRoutes(resource_path('js/Pages'));

Mail / SMTP

Lokaler Mailserver für SMTP Testing

MailHog: Web and API based SMTP testing

TL;DR

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.

Dies erstellt die Dateien

	app/Http/Controllers/PostController.php
	app/Http/Requests/
	app/Models/Post.php
	database/migrations/2024_04_19_073500_create_posts_table.php
	database/seeders/PostSeeder.php
	tests/Feature/Http/
	tests/Feature/Models/

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.

Dies erstellt die Dateien

	app/Http/Controllers/PostController.php
	app/Http/Requests/
	app/Models/Post.php
	app/Policies/PostPolicy.php
	database/factories/PostFactory.php
	database/migrations/2024_04_19_075242_create_posts_table.php
	database/seeders/PostSeeder.php
	tests/Feature/Http/
	tests/Feature/Models/

Jetzt aber genug der Einführung. Lassen Sie uns mit dem Erstellen des API Backend beginnen.

Sollten Sie Komponentne erstellen haben, dann löschen Sie diese wie beschrieben.

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können die Starter App auch mit dem Laravel-Installer erstellen:

❯ laravel new App   --jet 
                   --api 
                   --database sqlite 
                   --stack livewire  
                   --teams 
                   --dark 
                   --verification 
                   --git 
                   --pest

Oder auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App App

❯ cd App
❯ composer install
❯ npm install
❯ npm run build

❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate

❯ php artisan serve

Erstellen der erforderlichen Komponenten

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

Die entsprechende Datei ist

database/migrations/2024_04_19_075600_create_posts_table.php 

Der genaue Name kann dabei bei Ihnen abweichen.

Passen sie die Funktion up() an:

public function up(): void
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Die neuen Felder werden über eine Migration in der Datenbank erstellt:

❯ php artisan migrate

Wir kontrollieren, ob die Tabelle richtig erstellt wurde:

❯ php artisan db
SQLite version 3.37.0 2021-12-09 01:34:53
Enter ".help" for usage hints.
sqlite> PRAGMA table_info(posts);
0|id|INTEGER|1||1
1|title|varchar|1||0
2|content|TEXT|1||0
3|created_at|datetime|0||0
4|updated_at|datetime|0||0
sqlite> .quit

Tabelle füllen mit Hilfe eines Seeder

Erstellen Sie den Seeder, falls die Datei database/seeders/PostSeeder.php nicht vorhanden ist:

php artisan make:seeder PostSeeder

Ersetzen Sie den Inhalt mit dem nachfolgenden Programmcode:

<?php

namespace Database\Seeders;

use Illuminate\Support\Facades\DB;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class PostSeeder extends Seeder
{
    static $posts = [
        ['title' => 'Summer Health', 'content' => 'Stay hydrated!'],
        ['title' => 'Pasta Recipe',  'content' => 'Tomato base'],
        ['title' => 'Decor Ideas',   'content' => 'Go minimal'],
        ['title' => 'Python Tips',   'content' => 'Use lists']
    ];

    public function run(): void
    {
        foreach (self::$posts as $post) {
            DB::table('posts')->insert([
                'title' => $post['title'], 'content' => $post['content']
            ]);
        }
    }
}

Starten Sie den Seeder:

❯ php artisan db:seed --class PostSeeder

Hinweis: Sie können diesen Seeder auch die den generellen DatabaseSeeder mit aufnehmen, so das der Name des Seeders nicht mit angegeben werden muss.

Fügen die in der Datei database/seeders/DatabaseSeeder.php den nachfolgenden Programmcode hinzu:

$this->call([
    PostSeeder::class,
]);

Starten Sie den Seeder:

❯ php artisan db:seed

Bearbeiten der Komponenten

Model

Erweitern Sie die Datei app/Models/Post.php um die zusätzlichen Felder:

protected $fillable = ['title', 'content', 'created_at', 'updated_at'];

Testing

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.

Testen mit Postman

GET

http://127.0.0.1:8000/api/get

POST

http://127.0.0.1:8000/api/post

DELETE

http://127.0.0.1:8000/api/delete/6        

Testen mit curl in der Kommandozeile

GET

❯ curl http://127.0.0.1:8000/api/post
[{"id":1,"title":"Summer Health","content":"Stay hydrated!","created_at":null,"updated_at":null},{"id":2,"title":"Pasta Recipe","content":"Tomato base","created_at":null,"updated_at":null},{"id":3,"title":"Decor Ideas","content":"Go minimal","created_at":null,"updated_at":null},{"id":4,"title":"Python Tips","content":"Use lists","created_at":null,"updated_at":null}]

POST

❯ curl -X POST  http://127.0.0.1:8000/api/post -H "Content-Type: application/json" -d '{ "title": "Neuer Titel", "content": "Neuer Inhalt!" }'
{"title":"Neuer Titel","content":"Neuer Inhalt!","updated_at":"2024-04-19T15:48:22.000000Z","created_at":"2024-04-19T15:48:22.000000Z","id":6}

DELETE

❯ curl -X DELETE http://127.0.0.1:8000/api/post/6
{"message":"Post deleted"}        

TL;DR

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

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App App

❯ cd App
❯ composer install
❯ npm install
❯ npm run build

❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate

❯ php artisan serve

Motivation

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:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
            </div>
        </div>
    </div>
</x-app-layout>

Navigationsleiste erweitern

Erstellen Sie einen weiteren Navigationslink in der Datei resources/views/navigation-menu.blade.php:

<x-nav-link href="{{ route('page_with_sidebar') }}" :active="request()->routeIs('page_with_sidebar')">
    {{ __('Page with Sidebar') }}
</x-nav-link>

Wenn Sie jetzt die Seite aufrufen, dann bekommen Sie einen Fehler: die Route wurde nicht gefunden

Routing hinzufügen

Erweitern Sie die Datei routes/web.php und die neue Route:

 Route::get('/page_with_sidebar', function () {
        return view('page_with_sidebar');
 })->name('page_with_sidebar');

Ergebnis

So sieht dann unsere Seite aus:

Neues Layout verwenden

Nun ändern wir das Layout unserer neuen Seite in Zeile 1 und Zeile 14

<x-app-sidebar-layout>

Wenn Sie jetzt alles speichern und die Seite aktualisieren (im Browser) bekommen sie wie zu Erwarten eine Fehlermeldung:

Lassen Sie uns also das neue Layout erstellen.

Neues Layout erstellen

Kopieren der Datei resources/views/layouts/app.blade.php nach resources/views/layouts/app_with_sidebar.php.

TL;DR

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:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-PowerGrid

❯ Laravel_Tutorial_Arbeiten-mit-PowerGrid
❯ composer install
❯ npm install
❯ npm run build

❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate

❯ php artisan serve

Installation

1. via Composer

composer require power-components/livewire-powergrid

2. Konfigurationsdatei bereitstellen

php artisan vendor:publish --tag=livewire-powergrid-config

Die erstelle Konfigurationsdatei liegt hier: config/livewire-powergrid.php.

3. Views und Sprachdateien bereitstellen (Optional)

Hinweis: Überspringen sie diesen Schritt, wenn die keine Anpassung der Views durchführen wollen.

Views bereitstellen:

php artisan vendor:publish --tag=livewire-powergrid-views

Sprachdateien bereitstellen:

php artisan vendor:publish --tag=livewire-powergrid-lang

TL;DR

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

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-htmx

❯ composer install
❯ npm install
❯ npm run build

❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate

❯ php artisan serve

Motivation

Betrachten wir sie Startseite der Starterapp: welcome.blade.php. Es fällt auf, das es viele Code-Wiederholungen gibt, z. B bei den Überschriften

1013: <h2 class="text-xl font-semibold text-black dark:text-white">Laracasts</h2>
1047: <h2 class="text-xl font-semibold text-black dark:text-white">Laravel News</h2>
1077: <h2 class="text-xl font-semibold text-black dark:text-white">Vibrant Ecosystem</h2>

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:

<starter-header>Laracasts</starter-header>
<starter-header>Laravel News</starter-header>
<starter-header>Vibrant Ecosystem</starter-header>

Fügen wird diesen Bestandteile auch noch Parameter hinzu, so vereinfacht sich die Startseite so:

<starter-header title="Laracasts"/>
<starter-header title"Laravel News" />
<starter-header title="Vibrant Ecosystem" />

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.

Blade View: resources/views/components/starter-header.blade.php

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:

<h2 class="text-xl font-semibold text-black dark:text-white">Laracasts</h2>

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:

<x-starter-header title="Vibrant Ecosystem" />

TL;DR

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

Installation

Erstellen der Starter App

laravel new Laravel-Starter-App --jet --stack=livewire --api --teams --dark --pest --verification --database sqlite --git --quiet

Konfiguration der Datenbank

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

Bei Einrichten der Starter App wurde bereits SQLite vorselektiert:

DB_CONNECTION=sqlite

Leere Datenbankdatei erstellen

Die Starter App hat bereits eine leeren Datenbank im Ordner database mit dem Namen database.sqlite

Tabellen erstellen

Die für Laravel notwendigen Tabellen wurden ebenfalls eingerichtet:

php artisan migrate

Hinweis: Die vorhandenen Tabellen können Sie sie über die Kommandozeile anzeigen:

sqlite3.exe .\database\database.sqlite ".tables"

Installation und Konfiguration des Frontend

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

npm install
npm run dev

Anzeigen der Anwendung

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

php artisan serve

Öffnen Sie die Anwendung im Browser über den Link http://127.0.0.1:8000

Anmeldung und Authentifizierung

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.

E-Mail Verification einrichten

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

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.

Nachfolgend zwei Beispiele:

Lokaler SMTP-Server für Testzwecke: mailpit

Für Testzwecke können sie die E-Mail-Konfiguration auch vereinfachen, indem ein lokaler Mailserver verwendet wird: mailpit (https://mailpit.axllent.org/docs/install/)

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:

http://localhost:8025/

Benutzer einrichten

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

Benutzername oder Passwort sind falsch

Fehlermeldung: Authentication failed: wrong user/password

Weitere Anpassungen

Terms of Services aktivieren

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.

<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

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.

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

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

Routing anpassen

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

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.

Neue Startseite anzeigen

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

Die vorherige Startseite können wir über die Uri /welcome erreichen

Neue Seite zur Navigation hinzufügen

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

<!-- 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

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:

protected function registerComponent(string $component) {
    \Illuminate\Support\Facades\Blade::component('jetstream::components.'.$component, 'jet-'.$component);
}

Der nachfolgende Programmcode registriert ihre Komponente:

public function register() {
    $this->registerComponent('subform');
}

Sie können diese nun wie folgt nutzen:

<x-jet-subform>

TL;DR

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

Einrichten der Starter-App

Erstellen der Starter App. In diesem Post beschreibe ich, wie sie eine Starter-App erstellen und die grundlegenden Anpassungen durchführen können.

Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-htmx

❯ composer install
❯ npm install
❯ npm run build
❯ php artisan

❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate

❯ php artisan serve

htmx einrichten

Installation

❯ npm install htmx.org

Hinweis: Verwenden sie nicht das NPM Paket htmx, dies hat einen anderen Inhalt

Seite für unsere Beipiele erstellen (htmx Playground)

Routing erstellen

Seite erstellen: resources/views/playground.blade.php

cp resources/views/dashboard.blade.php resources/views/playground.blade.php

Inhalt anpassen:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Playground') }} for Laravel and <<span style="color:#3d72d7">/</span>> htm<span
                    style="color:#3d72d7">x</span>
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                #
            </div>
        </div>
    </div>
</x-app-layout>

Navigationslinks anpassen

Ergebnis

Ersten htmx Aufruf hinzufügen

API Aufruf einrichten

Die Datei routes/api.php erweitern:

Route::get('/htmx/message', function () {
    return response('Dies ist eine Nachricht', 200)->header('Content-Type', 'application/json');
});

Playground Seite anpassen

<div hx-get="/api/htmx/message">
    Mitteilungen laden...
</div>

Ergebnis

htmx Beispiele

Auf der htmx – Projekteseite finden sie viele Beispiele. Wir wollen nun einige davon in Laravel umsetzen.

Starter

Create Laravel Starter with basic functionalities

laravel new --jet --stack livewire --teams app

Views

Navigation Menu

Extend the file resources/views/navigation-menu.blade.php

<!-- 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('particles') }}"
                   :active="request()->routeIs('particles')">
      {{ __('Particles') }}
   </x-jet-nav-link>
</div>

Display Laravel and PHP Version

<div>
    Laravel v{{ Illuminate\Foundation\Application::VERSION }}
    (PHP v{{ PHP_VERSION }})
</div>

Create new View and Component

php artisan make:component NewComponent

Creates

app/View/Components/NewComponent.php

and

resources/views/components/new-component.blade.php

Command Line

Create new command make:view

Original source is here

php artisan make:command MakeViewCommand

Create the following file

app/Console/Commands/MakeViewCommand.php

Edit the file and overwrite code with the following

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use File;

class MakeViewCommand extends Command
{
    protected $signature = 'make:view {view}';
    protected $description = 'Create a new blade template.';
    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        $view = $this->argument('view');
        $path = $this->viewPath($view);

        $this->createDir($path);

        if (File::exists($path))
        {
            $this->error("File {$path} already exists!");
            return;
        }

        File::put($path, $path);

        $this->info("File {$path} created.");
    }

    public function viewPath($view)
    {
        $view = str_replace('.', '/', $view) . '.blade.php';

        return "resources/views/{$view}";
    }

    public function createDir($path)
    {
        $dir = dirname($path);

        if (!file_exists($dir))
        {
            mkdir($dir, 0777, true);
        }
    }

}

Database

SQLite

Create an empty SQLite Database

sqlite3 database.sqlite "create table t(f int); drop table t;"

Links

https://laravel-news.com/
https://laravel-news.com/learning-laravel-in-2021
https://laravel.com/docs/8.x

https://laravel-livewire.com/screencasts/installation

https://www.larashout.com/

Tutorial

https://www.tutsmake.com/category/laravel-tutorial/
https://www.tutsmake.com/laravel-interview-questions-answers-for-1235-year-experience/

https://learn2torials.com/category/laravel

https://kinsta.com/blog/laravel-tutorial/#6-best-free-laravel-tutorial-sites

Database

https://eloquentbyexample.com

https://laravel.com/docs/8.x/eloquent#introduction

Blade

https://www.a-coding-project.de/ratgeber/laravel/blade

Blog erstellen

https://www.flowkl.com/tutorial/web-development/simple-blog-application-in-laravel-7/

https://www.section.io/engineering-education/laravel-beginners-guide-blogpost/

https://medium.com/@dinyangetoh/how-to-build-a-blog-with-laravel-9f735d1f3116

https://medium.com/@dinyangetoh/how-to-build-a-blog-with-laravel-9f735d1f3116

Create and Prepare your Laravel Project

Create Laravel App

Installing a fresh Laravel project by running the following steps:

Create Page for Bootstrap Demo

Create a file resources/views/using-bootstrap.blade.php with the following content:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel: Using Bootstrap from Local</title>
</head>

<body class="antialiased">
   <main>
      <div class="container py-4">
         <header class="pb-3 mb-4 border-bottom">
            <a href="/" 
               class="d-flex align-items-center text-dark text-decoration-none">
               <title>Bootstrap</title>
               <span class="fs-4">Bootstrap example</span>
            </a>
         </header>

         <div class="p-5 mb-4 bg-light rounded-3">
            <div class="container-fluid py-5">
               <h1 class="display-5 fw-bold">
                  Using Bootstrap in Laravel Projects
               </h1>
               <p class="col-md-8 fs-4">
                  It's very easy to add the Bootstrap Framework 
                  to your Laravel Project.
               </p>
               <button class="btn btn-primary btn-lg" type="button">
                  See how...
               </button>
            </div>
         </div>
      </div>
   </main>
</body>
</html>

Add the link /using-bootstrap to your App by adding this to route/web.php

Route::get('/', function () {
    return view('welcome');
});

Route::get('/using-bootstrap', function () {
    return view('using-bootstrap');
});

If you open http://127.0.0.1:8000/using-bootstrap in the Browser, you the demo page but with no bootstrap styling.

Adding Bootstrap to your Project

You have three possibilities to add Bootstrap into your Larval Project

Methode 1: Adding Bootstrap by a Link to CDN

Using CDN (Content delivery network) is quite easy and simple for beginners. CDN is a network of servers providing the source files for almost every library used in front-end development.

We need the references for bootstrap.min.css and bootstrap.bundle.min.js

You add Bootstrap by inserting the following code snippets in your main Laravel Page.

We will use the file resources/views/using-bootstrap.blade.php

<link            
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"
>

<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous">
</script>

The final file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boostrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="alert alert-success mt-5" role="alert">
            Boostrap 5 is working!
        </div>    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Methode 2: Adding Bootstrap Public Folder

Download Bootstrap 5 file and put the files into the folder app/public/assets/vendor/bootstrap/5.2.0

Add the following code snippets to your Laravel Page:

<link href="{{ asset('assets/vendor/bootstrap/5.2.0/css/bootstrap.min.css') }}" rel="stylesheet">

<script src="{{ asset('assets/vendor/bootstrap/5.2.0/js/bootstrap.min.js') }}"></script>

The final files look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boostrap 5</title>
    <link rel="stylesheet" href={{ asset('css/bootstrap.min.css') }}>
</head>
<body>
    <div class="container">
        <div class="alert alert-success mt-5" role="alert">
            Boostrap 5 is working!
        </div>    
    </div>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
</body>
</html>

Methode 3: Adding Bootstrap 5 using Laravel Mix

In Laravel, all Frontend Modules are handles with Laravel Mix. This is an elegant wrapper around Webpack, a Package manager for installing and managing node modules.

To use Mix, you need to install NodeJS and NPM.

After this, install all required modules of your starter project

npm install

If you can see node_modules folder, this means npm is working.

Now we need to install bootstrap and the required modules

npm install bootstrap --save-dev 
npm install @popperjs/core --save-dev

You will find the new packages in package.json

    "devDependencies": {
        "@popperjs/core": "^2.11.5",
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "axios": "^0.25",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.0.0"
    }

Next, add the following line to resources/css/app.css:

@import "bootstrap";

Add the following line to the file resources/js/bootstrap.js:

window._ = require("lodash");
import "bootstrap";

Run the following command to build the frontend files (css and js)

npm run development

You done. See the result here: http://127.0.0.1:8000/using-bootstrap

Using Bootstrap

With the Bootstrap Framework installed, now we can style our Pages. An overview of what you can do could be found in the Documentation or using the Examples.

We will work with the Examples, so download all examples to the folder resources/views/bootstrap

With the Commandline and PowerShell, you could do this: Change to the folder and download the Archive with the examples

❯ Set-Location resources\views
❯ Invoke-WebRequest https://github.com/twbs/bootstrap/releases/download/v5.2.0-beta1/bootstrap-5.2.0-beta1-examples.zip -O bootstrap.zip

Extract the archive, don’t forget the trailing dot ‘.’

❯ Expand-Archive .\bootstrap.zip .

Rename the created folder

❯ Rename-Item .\bootstrap-5.2.0-beta1-examples\ bootstrap

❯ Remove-Item bootstrap.zip

Now, we have all examples in the folder resources/views/bootstrap and we are ready to play with them:

Modify the album example to use with Laravel

Modify the /using-bootstrap (resources/views/using-bootstrap.blade.php) page

Add a sample text and a link to out Album Page

<div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
    ... Keep the original content
    </div>

    <div class="container-fluid py-5">
        <p class="col-md-8 fs-4">
            Just start with an <a href="bootstrap/album">example</a>
        </p>
    </div>
</div>

Modify routes/web.php to include a link to /bootstrap/album

Add the following lines to route/web.php

Route::get('/bootstrap/album', function () {
    return view('bootstrap/album');
});

Modify the Album Page

Rename and move the file resources/views/bootstrap/album/index.html to resources/views/bootstrap/album.blade.php.

Please note: We also changed the folder of the file. All examples’ files will be placed directly under the folder resources/views/bootstrap

You can do this for all files with the following PowerShell Script:

Get-ChildItem . index.html -recurse                        | `



Addon: Script to modify all examples files



Remove-Item _web.php

Remove-Item _links.php
Add-Content _links.php "<div class='list-group w-auto'>"

function Add-Link($header, $link) {

Add-Content _links.php ('<a href="' + $link + '" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">')
Add-Content _links.php '<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">'
Add-Content _links.php '<div class="d-flex gap-2 w-100 justify-content-between">'
Add-Content _links.php ('<div><h6 class="mb-0">' + $header + '</h6></div>')
Add-Content _links.php '<p class="mb-0 opacity-75">Another examples></p>'
Add-Content _links.php '</div>'
Add-Content _links.php '<small class="opacity-50 text-nowrap">&nbsp;</small>'
Add-Content _links.php '</a>'

}

 $LINK_OLD_JS="../assets/dist/js/bootstrap.bundle.min.js"
$LINK_OLD_CSS="../assets/dist/css/bootstrap.min.css"
 
 $LINK_NEW_JS="{{ asset('js/app.js')   }}"
$LINK_NEW_CSS="{{ asset('css/app.css') }}"


Get-ChildItem . index.html -recurse                        `
|
|
    (Get-Content $_\index.html)         `
    |
    |
    | Set-Content  $_".blade.php"

    Add-Content _web.php "Route::get('/bootstrap/$_', function () { return view('bootstrap/$_'); });"

    Write-Host "Add links to example $_"
    Add-Link $_ "bootstrap/$_"
}

Add-Content _links.php "</div>"
FAQ
Errors and Problems
Build Modules with npm run dev shows up a warning
To see more information about the warning, add the following to the file webpack.mix.js after the first mix.js( ...
mix.webpackConfig({
    stats: {
        children: true,
    },
});
Then, run npm run dev again.

Voraussetzung

Voraussetzung für die Verwendung von Laravel ist eine lauffähige Entwicklungsumgebung.

Der Aufbau einer solchen Umgebung wird hier beschrieben.

Installation über WSL

WSL starten

WSL ist das Windows Subsystem for Linux 2 (WSL2)

> wsl
/mnt/d/Websites
$

Installation einer Beispielanwendung

curl -s https://laravel.build/example-app | bash

Individuelle Anpassung

Beim Aufruf kann die zu verwendende Dienste mit angegeben werden. Mögliche Werte sind:

mysql, pgsql, mariadb, redis, memcached, meilisearch, selenium, and mailhog

Die Standardwerte sind:

mysql, redis, meilisearch, mailhog und selenium

curl -s "https://laravel.build/example-app?with=mysql,redis" | bash

Installation mit Standardwerten

curl -s https://laravel.build/example-app | bash

Und die letzten Schritte

Starten der Anwendung

$ cd example-app
$ ./vendor/bin/sail up

Zugriff auf die Anwendung über http://localhost