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

TL;DR

Das Repository zu diesem Blog finden sie hier.

Voraussetzung

Für die Durchführung dieses Tutorials benötigen Sie Visual Studio Code, sowie Docker.

Docker

Installieren Sie Docker, indem Sie die Anwendung Docker Desktop herunterladen. Sie finden den Download hier: https://www.docker.com/products/docker-desktop

Eine Installationsbeschreibung finden Sie hier

Visual Studio Code

Installieren Sie Visual Studio Code mit Hilfe des Zip-Archiv. Sie können es von hier herunterladen: https://code.visualstudio.com/#alt-downloads

Hinweis: https://code.visualstudio.com, danach den Link Other platforms

Speichern Sie das Zip-Archiv und packen Sie es im gewünschten Programmverzeichnis aus.

Im Programmverzeichnis von Visual Studio Code erstellen Sie den Order data.

Damit wird der portable Mode aktiviert. In diesem Mode werden alle Einstellungen innerhalb dieser Installation gespeichert.

Notwendigen Erweiterungen

• Windows Subsystem for Linux (WLS) (ms-vscode-remote.remote-wsl)
• Remote Containers (ms-vscode-remote.remote-containers)
• Docker (ms-azuretools.vscode-docker)
• Python (ms-python.python)

Umgebung für unser Tutorial

Wir wollen alle in diesem Tutorials verwendeten Dateien in einem eigenen Ordner ablegen, z. B. FastAPI-Tutorial

Am Ende des Tutorials hat der Ordner diesen Inhalt

Docker-Umgebung

Visual Studio Code Remote Containers arbeiten mit Hilfe von Docker, um eine virtuelle Umgebung bereitzustellen.

Hierfür benötigen wie eine Reihe von Docker Konfigurationsdateien

Dockerfile

FROM ubuntu:21.04

LABEL MAINTAINER="Ralph Göstenmeier"

# set environment variables
ENV TZ 'Europe/Berlin'

RUN    apt-get update

RUN echo $TZ > /etc/timezone 

RUN    apt-get install -y tzdata \
    && rm /etc/localtime \
    && ln -snf /usr/share/zoneinfo/$TZ /etc/localtime \
    && dpkg-reconfigure -f noninteractive tzdata \
    && apt-get clean

RUN apt-get install --yes build-essential lsb-release curl sudo git vim
RUN apt-get install --yes python3-pip python3-venv

RUN groupadd work -g 1000
RUN adduser user --uid 1000 --gid 1000 --home /home/user --disabled-password --gecos User

RUN echo 

EXPOSE 5000

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

#
USER user

VOLUME [ "/workspace" ]

COPY requirements.txt /workspace/requirements.txt
WORKDIR /workspace
RUN pip install -r requirements.txt

CMD ["bash", "-l"]

docker-compose.yml

version: "3.8"

services:
    app:
        build:
            context: .
            dockerfile: Dockerfile

        container_name: fastapi-tutorial

        volumes:
            - ./workspace:/workspace

        ports:
            - 5000:5000

        environment:
            - FASTAPI_ENV=development

        command: /bin/sh -c "while sleep 1000; do :; done"

requirements.txt

Für unsere Beispielanwendung benötigen wir eine Reihe von Python-Paketen. Diese werden mit Hilfe der Datei requirements.txt beim Bauen des Docker Images installiert.

asgiref==3.4.1
certifi==2021.5.30
charset-normalizer==2.0.3
click==8.0.1
fastapi==0.67.0
h11==0.12.0
idna==3.2
pydantic==1.8.2
requests==2.26.0
starlette==0.14.2
typing-extensions==3.10.0.0
urllib3==1.26.6
uvicorn==0.14.0

Visual Studio Code Umgebung

Verzeichnisstruktur

Die aktuelle Verzeichnisstruktur beinhaltet 2 Dateien.

Ordner in einem Container öffnen

Wir wollen nun diese Ordner in einem Container öffnen.

Klicken Sie hierzu in der Statusleiste links unten auf das grüne Symbol (Open a Remote Window)

Wählen Sie dann dein Eintrag Reopen in Container

Um anzugeben, wie der Container initial konfiguriert werden soll, wählen Sie den Eintrag From 'docker-compose.yml'

Anschließen wird der Container erstellt und geöffnet. Als erstes wird das Docker Image erstellt und gestartet

Umgebung im Container

Visual Studio Code hat nun den Container geöffnet und Sie befinden sich innerhalb des Docker Image.

Fehler beim Erstellen der Umbung

Tritt beim Erstellen der Umgebung ein Fehler auf, dann kann es an den Einstellungen in der Datei docker-compose.yml liegen

Die Fehlermeldung besagt, das wir den Namen für unseren “Service” (also die Anwendung, die wir erstellen wollen) noch anpassen müssen.

Schließen Sie das Fenster und öffnen sie den Ordner wieder lokal.

Öffnen sie dann die Datei .devcontainer/docker-compose.yml.

Ändern se den Namen des Servier von your-service-name-here nach app.

Öffnen sie danach den Ordner wieder als Container (Reopen in Container)

Prüfen der Umgebung

Dieses Docker Image würde basierend auf der Linux Distribution Ubuntu erstellt.

Erkunden Sie einfach mal die Umgebung.

DevContainer-Umgebung anpassen

Als nächstes passen wir die Umgebung des DevContainer an. Wir wollen z. B. nur die Dateien unserer Anwendung sehen und nicht die Docker Konfigurationsdateien

Hierzu erstellen wir einen Unterordner workspace und legen diesen als Startverzeichnis fest.

.devcontainer/devcontainer.json

{
	"name": "FastAPI Tutorial",

	"dockerComposeFile": [
		"../docker-compose.yml",
		"docker-compose.yml"
	],

	"service": "app",

	"workspaceFolder": "/workspace",

	"settings": {},
	"extensions": []
}

.devcontainer/docker-compose.yml

version: '3.8'
services:
  app:
    
    volumes:
      - ./workspace:/workspace:cached

      command: /bin/sh -c "while sleep 1000; do :; done"
 

Arbeitsordner erstellen

mkdir workspace

Container neu erstellen

Startverzeichnis im Container

Da wir ein neuen workspaceFolder eingestellt haben, ist das Startverzeichnis in Visual Studio Code leer:

Erste Anwendung erstellen

Basisdatei für die Anwendung erstellen

Nennen Sie die neue Ddatei main.py

Verwenden Sie dann den nachfolgende Code für die Datei

from fastapi import FastAPI

app =FastAPI()

@app.get('/')
def home():
	return { 'name': 'FastAPI Tutorial' }

Öffnen Sie dann ein Terminal (falls noch keines geöffnet ist)

Starten Sie dann den Webserver mit dem nachfolgenden Kommando:

uvicorn main:app --reload --port 5000 --host 0.0.0.0

Öffnen Sie einen Browser mit dem Link localhost:5000

Pip

Show Pip Configuration

pip config list

Set Pip Cache Folder

pip config set global.cache-dir D:\Temp\Pip\Cache

Location of packages

pip show <module>

Installation

Update all Python Packages with Powershell

pip freeze |



Update Packages



requirements.txt aktualisieren und alle Versionsnummern als Minimalversionnummer setzen



sed -i '' 's/==/>=/g' requirements.txt
pip install -U -r requirements.txt
pip freeze > requirements.txt
pip install --upgrade --force-reinstall -r requirements.txt
pip install --ignore-installed -r requirements.txt

Einführung

Elixir ist eine dynamische, funktionale Sprache zum Erstellen skalierbarer und wartbarer Anwendungen. Elixir nutzt die Erlang VM, die dafür bekannt ist, verteilte und fehlertolerante Systeme mit geringer Latenz auszuführen.

Außerdem wird Elixir wird erfolgreich in Webentwicklung, eingebetteter Software, Datenaufnahme und Multimediaverarbeitung in einer Vielzahl von Branchen eingesetzt.

Hier ein erster Blick:

iex> "Elixir" |> String.graphemes() |> Enum.frequencies()



Oder, wie es Wikipedia beschreibt:



Elixir ist eine funktionale, Elixir Grundlagen



Hier folge eine kleine Einführung in die Programmiersprache Elixir 




Grundlegende Datentypen



Elixir supports the basic data types that other programming languages have. You can use integers (whole numbers), floats (decimal numbers), booleans (true or false) and strings (which are wrapped in double quotes, are UTF-8 encoded, and support line breaks).



Probieren wir in der Elixit Shell einfach die nachfolgenden Beispiele aus.



Starten Sie dazu die Elixit Shell:



iex
Oder wenn Sie mit Powershell arbeiten
iex.bat
iex(1)> 5
5

iex(2)> 4.32
4.32

iex(3)> true
true

iex(4)> "Hello World!"
"Hello World!"

iex(5)> "Hello
...(5)> World!"
"Hello\nWorld!"
Beachten Sie, dass wir im letzten Beispiel Umschalt + Eingabetaste verwenden, um einen Befehl auszuführen, der sich über mehrere Zeilen erstreckt.
Sie können auch Variablen und einfache Operatoren verwenden, um Werte zu vergleichen oder Zeichenfolgen zu verketten:
iex(1)> my_number = 6
6

iex(2)> my_number
6

iex(3)> my_number >= 7
false

iex(4)> my_number == 6
true

iex(5)> my_name = "Tristan"
"Tristan"

iex(6)> "Hello " <> my_name
"Hello Tristan"

iex(7)> "Hello #{my_name}"
"Hello Tristan"
​
Atoms
Atome sind eine besondere Art von Datentyp, die Konstanten (unveränderlichen Variablen) ähneln, ihr einziger Wert jedoch der ihnen gegebene Name ist.
iex(1)> :my_atom
:my_atom

iex(2)> :my_atom == "my_atom"
false

iex(3)> :my_atom == true
false

iex(4)> :my_atom == :my_atom
true

iex(5)> :my_other_atom = 4
** (MatchError) no match of right hand side value: 4
Im letzten Beispiel sehen wir, dass wir einem Atom keinen bestimmten Wert zuweisen können. Auch hier ist ihr einziger Wert ihr Name!
Lists
Listen in Elixir können jeden Datentyp enthalten und beliebig lang sein. Sie können mit ++ zwei Listen verketten oder mit — eine Liste von einer anderen subtrahieren.
iex(1)> [5, "Elixir", :ok]
[5, "Elixir", :ok]
iex(2)> [1, 2] ++ [3]
[1, 2, 3]
iex(3)> [1, 2, 3] -- [2]
[1, 3]
Beachten Sie, dass Elixir eine unveränderliche Sprache (immutable language) ist.
Wenn Sie diese Vorgänge ausführen, wird die ursprüngliche Liste also nie geändert. Stattdessen wird eine neue Liste zurückgegeben, die Sie in einer Variablen speichern können:
iex(1)> my_list = [1, 2, 3]
[1, 2, 3]

iex(2)> my_list ++ [4]
[1, 2, 3, 4]

iex(3)> my_list
[1, 2, 3]
Listen in Elixir können auch in zwei Teile aufgeteilt werden: den Kopf (head, der mit der hd-Funktion extrahiert werden kann) und den Schwanz (tail , der mit der tl-Funktion extrahiert werden kann). Der Kopf ist das erste Element der Liste und der Schwanz ist der Rest:
iex(1)> hd [5, "Banana", :ok]
5

iex(2)> tl [5, "Banana", :ok]
["Banana", :ok]
Tuples
Tupel ähneln Listen, aber sie speichern ihre Elemente zusammenhängend im Speicher. Dadurch wird der Zugriff auf Tupelelemente schneller als auf Listenelemente, jedoch ist deren Änderung langsamer.
Sie können ein Tupel als eine Ansammlung von Werten sehen, um eine Art Ressource zu bilden, während Listen verwendet werden, um Dinge aufzuzählen.
iex(7)> {"Tristan", 24}
{"Tristan", 24}
Sie werden feststellen, dass viele Elixir-Funktionen Tupel zurückgeben, um zwischen Erfolgen und Misserfolgen zu unterscheiden, z. B.: {:ok, value} oder {:error, error_message}
Maps
Karten (Maps) sind der Schlüsselwertspeicher (key-value store) von Elixir. Die Schlüssel können einen beliebigen Typ haben und zeigen mit => auf einen Wert.
iex(1)> company_phones =

iex(2)> company_phones.apple
"iphone"
Most of the time, you’ll probably want the keys in your map to be atoms, like in the example above. When that’s the case, there’s a nice shorthand syntax where we can use a colon instead of “=>” to point to the values, and omit the :-character at the beginning of our atoms:
iex(3)> company_phones =



Structs



Eine Struktur (struct) ist einer Map sehr ähnlich, bietet jedoch einige zusätzliche Funktionen – Sie können die Anzahl der Schlüssel begrenzen und ihnen Standardwerte zuweisen.



Um Strukturen (structs) auszuprobieren, müssen wir eine Elixir-Datei erstellen, also fahren Sie fort und erstellen Sie eine neue Datei namens user.ex. Darin werden wir ein neues Modul definieren, in dem wir auch unsere Struktur definieren:



defmodule User do
  defstruct name: "Tristan", age: 24
end
Gehen Sie nun zurück zur IEx-Shell und führen Sie den Befehl c(“user.ex”) aus.
Sie können jetzt eine neue Benutzerstruktur erstellen, indem Sie
❯ iex.bat -S mix
Compiling 1 file (.ex)
Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> c("user.ex")
[User]
iex(2)>
iex(3)>
Conditionals
Die grundlegenden if- und else-Anweisungen funktionieren genau so, wie Sie es erwarten. Beachten Sie, dass wir end verwenden müssen, um anzugeben, wo die if-Anweisungen enden.
iex(4)> if 5 > 4 do
...(4)>   "It's higher!"
...(4)> else
...(4)>   "It's lower"
...(4)> end
"It's higher!"
Sie können sogar die Umkehrung unless verwenden, um Ihren Code lesbarer zu machen:
iex(6)> unless 5 > 6 do
...(6)>   "The laws of mathematics still work!"
...(6)> end
"The laws of mathematics still work!"
Was ist mit “else if”?
In Elixir gibt es kein “else if”. Wenn Sie einen Flow mit mehr als nur zwei Ergebnissen haben, sollten Sie stattdessen wahrscheinlich cond verwenden:
iex(5)> cond do
...(5)>   5 > 6 ->
...(5)>     "This isn't true"
...(5)>   5 == 8 ->
...(5)>     "Neither is this"
...(5)>   true ->
...(5)>     "But this is!"
...(5)> end
"But this is!"
Wenn in Ihrer cond-Anweisung nichts als wahr ausgewertet wird, wird eine Ausnahme ausgelöst! Daher ist es normalerweise eine gute Praxis, immer eine letzte true-Bedingung ganz am Ende Ihrer Anweisung hinzuzufügen (wie wir es in unserem obigen Beispiel getan haben), um eventuelle Ausnahmen zu behandeln.
Schließlich gibt es noch eine case-Anweisung, die den Kontrollfluss in Elixir behandelt, aber dazu werden wir im nächsten Kapitel mehr erfahren …
Erstellen einer App
Im ersten Schritt erstellen wir die grundlegende Elixir Anwendung mit Hilfe des Komandos mix.
❯ mix new starterapp
* creating README.md
* creating .formatter.exs
* creating .gitignore
* creating mix.exs
* creating lib
* creating lib/starterapp.ex
* creating test
* creating test/test_helper.exs
* creating test/starterapp_test.exs

Your Mix project was created successfully.
You can use "mix" to compile it, test it, and more:

    cd starterapp
    mix test

Run "mix help" for more commands.
Durch dieses Kommando wird der Ordner starterapp mit der folgenbden Verzeichnisstruktur erstellt
Ersten Test starten
❯ cd starterapp
❯ mix test
Compiling 1 file (.ex)
Generated starterapp app
..

Finished in 0.07 seconds (0.00s async, 0.07s sync)
1 doctest, 1 test, 0 failures

Randomized with seed 697266
Ersten Programmcode schreiben
Funktion say_hello
defmodule StarterApp do

  def hello do
    :world
  end

  def say_hello do
    IO.puts("Hello World")
  end
  
end
Interactive Shell mit unserer App starten
iex -S mix
Unter Poweshell gibt es bereits einen Alias iex. Hier nutzen wir diesen Aufruf
iex.bat -S mix
❯ iex.bat -S mix
Compiling 1 file (.ex)
Generated starterapp app
Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)>
Aufruf unserer Funktion
❯ iex.bat -S mix
Compiling 1 file (.ex)
Generated starterapp app
Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> StarterApp.say("Hello", "World")
Hello World!
:ok
iex(2)>
Erweitern der Funktion um Paramter
  def say(greeting, name) do
    IO.puts "#{greeting} #{name}!"
  end
❯ iex.bat -S mix
Compiling 1 file (.ex)
Generated starterapp app
Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> StarterApp.say("Hello", "World")
Hello World!
:ok
iex(2)>
Funktion mit mehrerer, auch optionalen Parametern festlegen
defmodule StarterApp do

  def main() do
    name = IO.gets("Bitte geben Sie Ihrem Name an: ") |> String.trim
    say(name)
  end

  def say("") do
    IO.puts "Sie muessen einen Namen angeben!"
    main()
  end

  def say(name) do
    IO.puts "Hallo #{name}!"
  end

  def say(greeting, name) do
    IO.puts "#{greeting} #{name}!"
  end
end
In der Elixir Shell das Modul neu laden
iex(2)> r StarterApp
warning: redefining module StarterApp (current version defined in memory)
  lib/starterapp.ex:1

{:reloaded, StarterApp, [StarterApp]}
iex(3)>
 Aufruf ohne Parameter
iex(3)> StarterApp.say()
** (UndefinedFunctionError) function StarterApp.say/0 is undefined or private. Did you mean one of:

      * say/1
      * say/2

    (starterapp 0.1.0) StarterApp.say()
iex(4)>
iex(4)> StarterApp.say("")
Sie muessen einen Namen angeben!
Bitte geben Sie Ihrem Name an: World
Hallo World!
:ok
iex(5)>
Aufruf mit zwei Parametern
iex(8)>  StarterApp.say("Hallo", "Welt")
Hallo Welt!
:ok
iex(5)>

Installation

FastAPI basiert auf den nachfolgenden leistungsfähigen Paketen:

• Starlette für deb Web-Teil.
• Pydantic für den Daten-Teil.

pip install fastapi

Oder die Installation von FastAPI mit allen Komponenten

pip install fastapi[all]

pip install uvicorn[standard]

Arbeiten mit Datenbanken

Alembic

Alembic ist ein leichtgewichtiges Datenbankmigrationstool zur Verwendung mit dem SQLAlchemy Database Toolkit für Python.

pip install alembic
alembic init alembic
alembic list_templates
alembic init --template generic ./scripts

Migrationsskript zur Erstellug der Tabelle ‘account’

alembic revision -m "create account table"

Migrationsskript bearbeiten

def upgrade():
    op.create_table(
        'account',
        sa.Column('id', sa.Integer, primary_key=True),
        sa.Column('name', sa.String(50), nullable=False),
        sa.Column('description', sa.Unicode(200)),
    )

def downgrade():
    op.drop_table('account')

Migration durchführen

alembic upgrade head

Migrationsskript erstellen für das Hinzufügen einer Spalte

alembic revision -m "Add a column"

Migrationsskript bearbeiten

def upgrade():
    op.add_column('account', sa.Column('last_transaction_date', sa.DateTime))

def downgrade():
    op.drop_column('account', 'last_transaction_date')

Migration durchführen

alembic upgrade head

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:

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

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:

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

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>