Create and Prepare your Laravel Project

Create Laravel App

Installing a fresh Laravel project by running the following steps:

Create a new app	`laravel new --stack livewire --jet --teams app`
In the file `.env` and change DB Connection to sqlite	`DB_CONNECTION=sqlite`
Create an empty file `database/database.sqlite`
Start DB Migration	`php artisan migrate`
Start Laravel	`php artisan serve`

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.

31Jul

Laravel | Erstellen einer Beispielanwendung unter WSL

by Ralph Laravel, PHP

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

3Jul

Laravel | Einstieg und erste Schritte

by Ralph Laravel, PHP

TL;DR

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

Laravel Ökosystem

Laravel Breeze

Laravel Breeze ist eine minimale, einfache Implementierung aller Authentifizierungsfunktionen von Laravel, einschließlich Anmeldung, Registrierung, Paßwortzurücksetzung, E-Mail-Bestätigung und Paßwortbestätigung.

Die Standardansichtsebene von Laravel Breeze besteht aus einfachen Blade-Vorlagen, die mit Tailwind CSS gestaltet sind. Breeze bietet einen wunderbaren Ausgangspunkt für den Beginn einer frischen Laravel-Anwendung.

Breeze & Inertia

Laravel Breeze bietet auch eine Frontend-Implementierung von Inertia.js die von Vue oder React unterstützt wird.

Laravel Jetstream (Link)

Jetstream bietet ein schön gestaltetes Anwendungsgerüst für Laravel und umfasst Anmeldung, Registrierung, E-Mail-Verifizierung, Zwei-Faktor-Authentifizierung, Sitzungsverwaltung, API-Unterstützung über Laravel Sanctum und optionales Teammanagement.

Jetstream wurde mit Tailwind CSS entwickelt und bietet Ihre Wahl zwischen Livewire oder Inertia.js-gesteuertem Frontend-Gerüst.

Hinweis:

Während Laravel Breeze einen einfachen und minimalen Ausgangspunkt für die Erstellung einer Laravel-Anwendung bietet, erweitert Jetstream diese Funktionalität mit robusteren Funktionen und zusätzlichen Frontend-Technologie-Stacks.

Für Laravel-Neulinge empfehlen wir, sich mit Laravel Breeze vertraut zu machen, bevor sie Laravel Jetstream abschließen.

Jetstream

Jetstream bietet ein wunderschön gestaltetes Anwendungsgerüst für Laravel und umfaßt Anmeldung, Registrierung, E-Mail-Verifizierung, Zwei-Faktor-Authentifizierung, Sitzungsverwaltung, API-Unterstützung über Laravel Sanctum und optionales Teammanagement.

Jetstream wurde mit Tailwind CSS entwickelt und bietet Ihre Wahl zwischen Livewire – oder Inertia.js-gesteuertem Frontend-Scaffolding.

Fortify

Laravel Fortify ist eine Frontend-agnostische Authentifizierungs-Backend-Implementierung für Laravel.

Fortify registriert die Routen und Controller, die zur Implementierung aller Authentifizierungsfunktionen von Laravel erforderlich sind, einschließlich Anmeldung, Registrierung, Zurücksetzen des Paßworts, E-Mail-Verifizierung und mehr.

Nach der Installation von Fortify können Sie den route:list Artisan-Befehl ausführen, um die von Fortify registrierten Routen anzuzeigen.

Da Fortify keine eigene Benutzeroberfläche bereitstellt, soll es mit Ihrer eigenen Benutzeroberfläche gekoppelt werden, die Anfragen an die registrierten Routen stellt. Wir werden im Rest dieser Dokumentation genau besprechen, wie Anfragen an diese Routen gestellt werden.

Voraussetzung

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

Installation mit Hilfe von Composer

Wenn auf Ihrem Computer bereits PHP und Composer installiert sind, können Sie ein neues Laravel-Projekt erstellen, indem Sie Composer direkt verwenden.

composer create-project laravel/laravel app

cd app

Nachdem die Anwendung erstellt wurde, können Sie den lokalen Entwicklungsserver von Laravel mit dem nachfolgenden Befehl starten:

php artisan serve

Installation mit Hilfe des Laravel Installer

Laravel Installer

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

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

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

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:

Standardeinstellungen für die Datenbankverbindung

Wir wollen uns hier auf die Einrichten der Laravel Anwendung beschränken und nicht noch zusätzlich die Installation einer MySQL Datenbank beschreiben. Hierzu finden Sie mehr Informationen an anderer Stelle.

Datenbank SQLite verwenden

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

DB_CONNECTION=sqlite

sqlite als Datenbank einstellen

Leere Datenbankdatei erstellen

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

Hinweis: Sie können eine leere Datei auch über die Kommandozeile erstellen. Voraussetzung ist das Tool sqlite3 (hier geht’s zum Download)

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

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

touch database/database.sqlite

Tabellen erstellen

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

php artisan migrate

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

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 reicht zum Einrichten des neuen Benutzer der Name, die E-Mail und das Passwort.

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`

use Illuminate\Contracts\Auth\MustVerifyEmail;

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

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.

Festgelegt werden diese Parameter wieder in der Datei .env:

Die entsprechenden Werte hängen vom verwendeten Mailserver ab.

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:

Provider	Strato	United Domains
MAIL_MAILER	smtp	smtp
MAIL_HOST	smtp.strato.de	smtps.udag.de
MAIL_PORT	587	587
MAIL_ENCRYPTION	tls	tls

Beispiele für die E-Mail-Konfiguration

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.

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.

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

Anpassung der Jetstream-Komponenten

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:

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:

php artisan vendor:publish --tag=jetstream-views

Die Kopien finden Sie im Ordner

resources\views\vendor\jetstream

Livewire Views

php artisan livewire:publish

Dadurch werden die nachfolgenden Dateien und Ordner erstellt:

config/livewire.php
public/vendor/

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

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 __:

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>

19Jun

Laravel | Benutzermodel erweitern

by Ralph Laravel, PHP

Laravel bietet mit Eloquent ORM ein leistungsfähiges Datenbank-Framework.

Mit Hilfe von Modellen werden die Datenbankobjekte (z. B. Benutzer) definiert. Diese Objekte können dabei einfach durch zusätzliche Felder erweitert werden.

Im nachfolgenden Beispiel wollen wir das vorhandene Objekt User einer initialen Laravel-Installation durch ein Feld username erweitern.

Neues Feld den Benutzermodel hinzufügen

Erstellen eines Datenbank-Migrationsskriptes, das unser gewünschtes Feld zur Tabelle users hinzufügt.

php artisan make:migration add_column_username_to_users_table --table users

Hinzufügen des Felder Username in der neu erstellten Datei. Dies liegt unter database/migrations.

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('username')->nullable();
        });
    }

    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('username');
        });
    }

Hinzufügen des Feldes Username im Datenbankmodel User in der Datei app\Models\User.php

    protected $fillable = [
        'name',
        'email',
        'password',
        'username'
    ];

Datenbank aktualisieren.

Dieser Schritt entfernt alle Tabellen und erstellt sie neu. Dadurch gehen natürlich alle bereits vorhandenen Daten verloren!

❯ php artisan migrate:fresh --seed
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (2,326.47ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (1,789.28ms)
Migrating: 2014_10_12_200000_add_two_factor_columns_to_users_table
Migrated:  2014_10_12_200000_add_two_factor_columns_to_users_table (1,010.74ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (2,399.99ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (2,313.60ms)
Migrating: 2021_06_19_085151_create_sessions_table
Migrated:  2021_06_19_085151_create_sessions_table (5,279.76ms)
Migrating: 2021_06_19_102316_add_username_to_users_table
Migrated:  2021_06_19_102316_add_username_to_users_table (432.59ms)
Database seeding completed successfully.

Erweitern der Frontend Views

Hinzufügen des Feldes Username in der Datei resources\views\profile\edit.blade.php

<x-slot name="form">
   ...

   <!-- Email -->
      ...


   <!-- column username -->
   <div class="form-group row">
      <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Benutzername') }}</label>

      <div class="col-md-6">
         <input id="username" 
               type="text" 
               class="form-control @error('username') is-invalid @enderror" name="email" 
               value="{{ old('email') ?? auth()->user()->email }}" 
               required autocomplete="email" autofocus>

          @error('username')
          <span class="invalid-feedback" role="alert">
             <strong>{{ $message }}</strong>
          </span>
          @enderror
       </div>
    </div>
 </x-slot>

Anpassen des Controllers

Wir passen die PHP Komponente UpdateUserProfileInformation an, so das die neuen Werte gespeichert werden

app\Actions\Fortify\UpdateUserProfileInformation.php

    public function update($user, array $input)
    {
        ...

        if ($input['email'] !== $user->email &&
            $user instanceof MustVerifyEmail) {
            $this->updateVerifiedUser($user, $input);
        } else {
            $user->forceFill([
                'name' => $input['name'],
                'email' => $input['email'],
                'username' => $input['username'],
            ])->save();
        }
    }

19Jun

Laravel | Installation der Entwicklungsumgebung

by Ralph Laravel, PHP

Installation

Voraussetzung für die Verwendung von Laravel ist eine Web-Server, der eine PHP Umgebung unterstützt bzw bereitstellt.

Eine einfache Umgebung wird durch XAMPP bereitgestellt. Eine Implementierung kann man bei Apache Friends herunterladen.

XAMPP ist hier ein Akronym für X (Beliebiges Betriebssystem) Apache + MariaDB + PHP + Perl

Im Laufe dieses Post werden mehrerer Pakete und Programme installiert. Alle werden unter einem Startorder installiert. Diese benennen wir im nachfolgenden mit $LARAVEL_TUTORIAL_ROOT

mkdir C:\LARAVEL_TUTORIAL

Setzen der Umgebungsvariablen unter Windows Command Line cmd

set LARAVEL_TUTORIAL_ROOT="C:\LARAVEL_TUTORIAL"

Setzen der Umgebungsvariablen unter Poweshell

$ENV:LARAVEL_TUTORIAL_ROOT="C:\LARAVEL_TUTOPRIAL"

Installation XAMPP

Download des Installer: https://www.apachefriends.org/index.html

Um mehrerer Versionen parallel zu installieren, stehen ZIP-Dateien zur Verfügung. Die aktuelle Version ist

Zip Datei herunterladen: $LARAVEL_TUTORIAL_ROOT\xampp

im Zielverzeichnis extrahieren

setup_xamp.bat aufrufen

Installation mit dem Composer

Zielverzeichnis erstellen

mkdir $LARAVEL_TUTORIAL_ROOT\composer

cd $LARAVEL_TUTORIAL_ROOT\composer

Diese Verzeichnis als Umgebungsvariable festlehen

$ENV:COMPOSER_HOME = $ENV:LARAVEL_TUTORIAL_ROOT\composer

set COMPOSER_HOME

Composer herunterladen

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Pfad erweitern um

Fügen Sie die beiden nachfolgenden Pfad ihrer PATH Variablen hinzu:

composer.bat erstellen

Der Composer ist ein PHP Archiv mit der Dateierweiterung phar. Diese Dateien können nicht direkt aufgerufen werden, sondern stellen ein PHP Programm dar. Es muss als über PHP gestartet werden.

Hierzu erstellen wir einfach ein Skript, das diese Aufgabe für uns übernimmt. Erstellen Sie dazu die Datei composer.bat im Verzeichnis php

`composer.ps1 erstellen`

php $env:composer_home\composer.phar $args composer Tipps und Tricks Um weniger Meldungen anzuzeigen kann die nachfolgenden Konfigurationseinstellung verwendet werden: composer global config bin-dir --absolute --quiet Installation von NodeJS https://nodejs.org/en/download/ Installation des Laravel Installer Der Laravel Installer erleichterter das Einrichten und Erstellen neuer Laravel Anwendungen. Installiert wird er mit Hilfe des Composer: composer global require "laravel/installer" Installation einer Beispielanwendung laravel new blog Nächste Schritte Laravel | Installation einer Beispielanwendung Laravel | Tutorial: Eine Blog erstellen

   20May Laravel | Cookbook
  by Ralph  Laravel
Tutorials, Links
https://kinsta.com/blog/laravel-tutorial/#6-best-free-laravel-tutorial-sites
https://laravel-news.com/
https://laravel-news.com/learning-laravel-in-2021
https://laravel.com/docs/8.x
https://www.tutsmake.com/category/laravel-tutorial/
https://www.tutsmake.com/laravel-interview-questions-answers-for-1235-year-experience/
https://www.larashout.com/
https://learn2torials.com/category/laravel
https://eloquentbyexample.com/
https://laravel.com/docs/8.x/eloquent#introduction
Erste Schritte
Erstellen einer ersten Anwendung
laravel new app --jet
cd app
Datenbankkonfiguraton anpassen in der Datei .env
DB_HOLST=
Datenbank erstellen
composer update 
php artisan key:generate
php artisan migrate
Livewire Komponenten hinzufügen
php artisan vendor:publish --tag=jetstream-views
Frontend erstellen
npm install
npm run dev
php artisan serve
Upgrade
composer self-update --2
Datenbanken
https://laravelarticle.com/laravel-ajax-datatable-crud
Controller
Visitor Count
https://postsrc.com/posts/how-to-implement-visitor-views-or-visitor-counter-in-laravel-application
Links
19 Best Laravel Tutorials (Free and Paid Resources)
https://laravel-news.com/
https://laravel-news.com/learning-laravel-in-2021
https://laravel.com/docs/8.x
https://www.tutsmake.com/category/laravel-tutorial/
https://www.tutsmake.com/laravel-interview-questions-answers-for-1235-year-experience/
https://www.larashout.com/
https://learn2torials.com/category/laravel
https://eloquentbyexample.com/
https://laravel.com/docs/8.x/eloquent#introduction

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.

Create and Prepare your Laravel Project

Create Laravel App

Create Page for Bootstrap Demo

Adding Bootstrap to your Project

Methode 1: Adding Bootstrap by a Link to CDN

Methode 2: Adding Bootstrap Public Folder

Methode 3: Adding Bootstrap 5 using Laravel Mix

Using Bootstrap

Modify the album example to use with Laravel

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

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

Modify the Album Page

Addon: Script to modify all examples files

FAQ

Errors and Problems

Voraussetzung

Installation über WSL

WSL starten

Installation einer Beispielanwendung

Individuelle Anpassung

Installation mit Standardwerten

TL;DR

Laravel Ökosystem

Laravel Jetstream (Link)

Hinweis:

Voraussetzung

Installation mit Hilfe von Composer

Installation mit Hilfe des Laravel Installer

Laravel Installer

Erstellen der Anwendung

Konfiguration der Datenbank

Datenbank SQLite verwenden

Leere Datenbankdatei erstellen

Tabellen erstellen

Installation und Konfiguration des Frontend

Anzeigen der Anwendung

Anmeldung und Authentifizierung

E-Mail Verification einrichten

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

use Illuminate\Contracts\Auth\MustVerifyEmail;

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

Festlegen der E-Mail Konfiguration

Registrierung durchführen

Mögliche Konfigurationsfehler

E-Mail Server ist falsch

Port ist falsch

Benutzername oder Passwort sind falsch

Anpassung der Jetstream-Komponenten

Livewire Views

Weitere Anpassungen

Terms of Services aktivieren

Ändern der Sprache

Erstellen einer neue Startseite

Einfache Startseite erstellen

Routing anpassen

Neue Startseite anzeigen

Neue Seite zur Navigation hinzufügen

Komponenten

Komponente erstellen

Blade-Komponenten registrieren

Neues Feld den Benutzermodel hinzufügen

Datenbank aktualisieren.

Erweitern der Frontend Views

Anpassen des Controllers

Installation

Installation XAMPP

Pfad erweitern um

composer.ps1 erstellen

composer Tipps und Tricks

Installation von NodeJS

Installation des Laravel Installer

Installation einer Beispielanwendung

Nächste Schritte

Tutorials, Links

Erste Schritte

Erstellen einer ersten Anwendung

Datenbankkonfiguraton anpassen in der Datei .env

Datenbank erstellen

Livewire Komponenten hinzufügen

Frontend erstellen

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

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

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

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

`composer.ps1 erstellen`