Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

Laravel | Tipps und Tricks | Bootstrap verwenden

Create and Prepare your Laravel Project

Create Laravel App

Installing a fresh Laravel project by running the following steps:

Create a new applaravel new --stack livewire --jet --teams app
In the file .env and change DB Connection to sqliteDB_CONNECTION=sqlite
Create an empty file database/database.sqlite
Start DB Migrationphp artisan migrate
Start Laravelphp 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.

Angular I18N

Angular | Working with I18N

In this post, you will learn how to get started with Angular I18n using ngx-translate, the internationalization (i18n) library for Angular. We will cover the following topics:

  • setup new angular app
  • install required dependencies
  • add bootstrap as ui framework
  • create app with demo page and translation services

This will be the final result (click to show video). Source code for this post is on GitHub.

Setup new Angular app

➜ ng new app
➜ cd app

Add required modules

➜ npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save

Add Bootstrap as UI framework

We need the libraries for Bootstrap and flag icons. Download the required files into your asset/vendor/bootstrap/5.3.1 folder:

Flags Icons need a CSS file with the corresponding images for the flags, so we use the archive from GitHub.

Download and extract the archive into the folder assets/vendor/flag-icons

Current folder structure

This is our current folder structure:

Setup Application

We choose the following structure for the HTML architecture.

  • index.html contains the required css and js files. Also, the <app-root> component, which loads our app
  • app.component.html contains the main structure of every page. This includes header, navigation, place for main content and footer
  • The main content is inserted via the <router-outlet>

index.html

We will add the corresponding file in the main index.html in our project.

<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <title>I18N</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="/assets/vendor/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/vendor/flag-icons.min.css">

  <link rel="stylesheet" href="/assets/vendor/bootstrap/5.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/vendor/flag-icons/css/flag-icons.min.css">

  <link rel="stylesheet" href="/assets/css/default.css">

</head>

<body class="d-flex flex-column h-100">
  <app-root class="h-100"></app-root>

  <script src="assets/vendor/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

app.component.html

We borrow the main structure from the bootstrap example ‘Sticky Footer with Navbar‘ with some changes in the navigation bar.

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="assets/img/logo-angular.png" height="40px" width="auto">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
                data-bs-target="#navbarCollapse"
                aria-controls="navbarCollapse" 
                aria-expanded="false"     
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                </ul>

                <div class="btn-group dropstart">
                    <button class="btn btn-primary dropdown-toggle" type="button" 
                        id="dropdownFlags"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="flag-icon flag-icon-{{currentlang}}"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li *ngFor="let lang of languages" [value]="lang" 
                            (click)="useLanguage(lang)">
                            <a class="dropdown-item"
                                [ngClass]="{'active': currentlang == lang}">
                                <span class="flag-icon flag-icon-{{lang}}"></span>
                                &nbsp;
                                {{lang | uppercase}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</header>
<main class="flex-shrink-0">
    <div class="container">
        <router-outlet></router-outlet>
    </div>
</main>
<footer class="footer mt-auto py-3 bg-dark">
    <div class="container">
        <span class="text-muted">(C) Ralph Göstenmeier</span>
    </div>
</footer>

app.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import defaultLanguage from '../assets/i18n/de.json';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    title = 'I18N';

    languages = ['us', 'de', 'fr', 'sp'];
    currentlang = 'us';

    constructor(private translate: TranslateService) {
        this.currentlang = 'de';
        translate.setTranslation(this.currentlang, defaultLanguage);
        translate.setDefaultLang(this.currentlang);
    }

    ngOnInit(): void {}

    useLanguage(language: string): void {
        this.currentlang = language;
        this.translate.use(language.toLowerCase());
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HomePageComponent } from './pages/home/component';
import { DemoPageComponent } from './pages/demo/component';

@NgModule({
    declarations: [AppComponent, HomePageComponent, DemoPageComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient],
            },
        }),
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http);
}

How the app works

The translation is done with the ngx-translate component.

Translation works with different JSON files (for each language a separate file), containing the required translation for each text to be displayed. Each text is addressed with a name within the JSON file.

So, the base structure of each JSON file is the following:

Translation files

assets/i18n/de.json

{
  "i18n-demo-header": "I18N Demo",
  "header": "I18N Funktionalität in Angular"
}

assets/i18n/us.json

{
  "i18n-demo-header": "I18N Example",
  "header": "I18N Functionality in Angular"
}

These translations could be used in a html file by using the translate pipe:

<h1>{{'header' | translate }}</h1>

More information and examples are here.

Changing the language is done with the help of the TranslateService

Inject your app with the TranslateService (in app.component.ts)

constructor(private translate: TranslateService) {
    translate.setDefaultLang('de');
}

Change Language

useLanguage(language: string): void {
    this.translate.use(language.toLowerCase());
}

Integrate in our UI

To easy switching the language, we have to do a few steps

Add a dropdown menu to our navigation bar.

And switching the language is done by calling useLanguage within each menu item:

<div class="btn-group dropstart">
    <button class="btn btn-primary dropdown-toggle" type="button"
        id="dropdownFlags"
        data-bs-toggle="dropdown" aria-expanded="false"><span
        class="flag-icon flag-icon-{{currentlang}}"></span>
    </button>
    <ul class="dropdown-menu">
        <li *ngFor="let lang of languages" [value]="lang"
            (click)="useLanguage(lang)">
            <a class="dropdown-item" 
                [ngClass]="{'active': currentlang == lang}">
                <span class="flag-icon flag-icon-{{lang}}"></span>
                &nbsp;
                {{lang | uppercase}}
            </a>
        </li>
    </ul>
</div>

Setup a list for all menu items:

<ul class="dropdown-menu">
<li *ngFor="let lang of languages" [value]="lang" (click)="useLanguage(lang)">

Rust | Modern Alternatives of Command-Line Tools


bat

bat is a cat clone with syntax highlighting and Git integration that works on Windows, MacOS and Linux. It provides syntax highlighting for many file extensions by default.

exa

exa is a modern replacement for ls, the default command-line program in Unix/Linux for listing directory contents. exa supports icons with the --icons flag.

just

A command runner and partial replacement for make

Just create a justfile with the desired commands and your set.

When running with PowerShell, add the following at the start of your justfile:

set windows-shell := ["pwsh.exe", "-NoLogo", "-NoProfile", "-Command"]

fd

fd is a fast and user-friendly alternative to find, the built-in command-line program in Unix/Linux for walking a file hierarchy. fd provides opinionated defaults for the most common use cases. To find a specific file by name, you write fd PATTERN instead of find -iname ‘*PATTERN*’fd is also extremely fast and it comes with a ton of options like ignoring hidden directories, files and patterns from .gitignore by default.

procs

procs is a modern replacement for ps, the default command-line program in Unix/Linux for getting information about processes. It provides convenient, human-readable (and colored) output format by default.

sd

sd is an intuitive find & replace command-line tool, it is an alternative to sed, the built-in command-line program in Unix/Linux for parsing and transforming text (). sd has simpler syntax for replacing all occurrences and it uses the convenient regex syntax that you already know from JavaScript and Python. sd is also 2x-11x faster than sed.

sed is a programmable text editor, with search and replace being a common use case. In that light, sd is more like tr, but on steroids. (thanks /u/oleid for the suggestion).

dust

dust is a more intuitive version of du, the built-in command-line program in Unix/Linux for displaying disk usage statistics. By default dust sorts the directories by size.

startship

The minimal, blazing-fast, and infinitely customizable prompt for any shell.

ripgrep

ripgrep is an extremely fast alternative to grep, the built-in command-line program in Unix/Linux for searching files by pattern. ripgrep is a line-oriented search tool that recursively searches your current directory for a regex pattern. By default, ripgrep respects .gitignore and automatically skips hidden files, directories and binary files.

toeki

tokei is a program that displays statistics about your code. It shows the number of files, total lines within those files and code, comments, and blanks grouped by language.

hyperfine

hyperfine is a command-line benchmarking tool. Among many features, it provides statistical analysis across multiple runs, support for arbitrary shell commands, constant feedback about the benchmark progress and current estimates and more.

ytop

ytop is an alternative to top, the built-in command-line program in Unix/Linux for displaying information about processes.

tealdeer

tealdeer is a very fast implementation of tldr, a command-line program for displaying simplified, example based and community-driven man pages.

bandwhich

bandwhich is a CLI utility for displaying current network utilization by process, connection and remote IP or hostname.

grex

grex is a command-line tool and library for generating regular expressions from user-provided test cases.

rmesg

rmesg is a dmesg implementation in Rust (and available as a library for Rust programs to consume kernel message logs.)

zoxide

zoxide is a blazing fast autojumper, intended to completely replace the cd command. It allows you to change directories without typing out the entire path name.

delta

delta is a viewer for git and diff output. It allows you to make extensive changes to the layout and styling of diffs, as well as allowing you to stay arbitrarily close to the default git/diff output.

tp-note

Tp-Note is a template tool that enhances the clipboard with a save and edit as a note file function. After creating a new note file, Tp-Note launches the user’s favorite file editor (for editing) and web browser (for viewing).

nushell

nushell is a new type of shell, written in Rust. Its goal is to create a modern shell alternative that’s still based on the Unix philosophy but adapted to the current era. It supports piping and filtering in a way similar to awk and sed with a column view so that you can combine operations like in SQL. (thanks /u/matu3ba for the suggestion).


SpringBoot - Cookbook

Spring Boot | Cookbook

Introduction

Tipps and Tricks

Change App Port Number

Add line to file src/main/resources/application.properties

server.port=9010

Rest Api

Get JSON Data from a remote Rest Server

final RestTemplate restTemplate = new RestTemplate();
final String response = restTemplate.getForObject("https://httpbin.org/ip", String.class);

System.out.println(response);

Rust | Cookbook

Fehler und deren Behebung

Problem

cargo build
error: no default toolchain configured

Lösung

Ermitteln, welche Toolchains installiert sind

rustup toolchain list

Toolchain installieren

rustup install stable
rustup default  stable

Laravel | Erstellen einer Beispielanwendung unter WSL

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
$ cd example-app $ ./vendor/bin/sail up

Zugriff auf die Anwendung über http://localhost

Python | Cookbook

Pip

List all available versions of a packagepip install --use-deprecated=legacy-resolver <module>==
wget -q https://pypi.org/pypi/PyJWT/json -O - | python -m json.tool -

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

Elixir | Einstieg in Elixir

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 funktionaleElixir 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)>

FastAPI| Arbeiten mit FastAPI

Installation

FastAPI basiert auf den nachfolgenden leistungsfähigen Paketen:

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

Laravel | Einstieg und erste Schritte

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.

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
Anwendung erstellen

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

Initiale leere Datenbank-Datei 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
Migration der Tabellen durchführen

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

sqlite3.exe .\database\database.sqlite ".tables"
Vorhandene Tabellen in der Datenbank

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
Lokalen Webserver starten

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

Startseite der Anwendung

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

Einrichten der emailVerification

use Illuminate\Contracts\Auth\MustVerifyEmail;

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

class User extends Authenticatable implements MustVerifyEmail
Einrichten der emailVerification

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:

Mailkonfiguration

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:

ProviderStratoUnited Domains
MAIL_MAILERsmtpsmtp
MAIL_HOSTsmtp.strato.desmtps.udag.de
MAIL_PORT587587
MAIL_ENCRYPTIONtlstls
Beispiele für die E-Mail-Konfiguration

Starten Sie die Anwendung neu und richten Sie einen weiteren Benutzer ein

php artisan serve
Lokalen Webserver starten

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