Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

Recent Updates

Our latest news

Laravel | Erstellen eines API Backend

Inhaltsverzeichnis

TL;DR

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

Notwendige Komponenten eines API Backend

Für die Umsetzung eines API Backend benötigen wir in unserer Laravel App mehrere Komponenten:

  • ein Model, das beschreibt, wir die Daten aussehen, die unsere API verwendet
  • ein Controller, der den Programmcode beinhaltet, m die einzelnen Aktionen (Create, Read, Update, Delete, ..) auszuführen
  • weitere Komponenten, um die Nutzung zu erleichern
    • ein Seeder um die Datenbank mit definierte Werten zu füllen
    • ein Migrationsskript, um die notwendigen Datenbankeinträge (Tabelle, Spalten) zu erstellen
    • Testskripte, um unseren Controller und weitere Kompoentne zu prüfen

Hinweis

Vorab ein Hinweis: jeder der nachfolgenden Kommandos erstellen Komponenten in Form von Dateien. Ein erneutes Erstellen wird fehlschlagen, da die entsprechende Datei schon vorhanden ist.

Um mit den verschiedenen Kommandos zu experimentieren, verwenden sie am besten eine Funktionalität von Git, die es ihnen ermöglicht de Status zurückzusetzen, also Dateien zu löschen.

Wenn Sie ein Kommando ausgeführt haben, dann sehen sie im Visual Studio die neu erstellen Dateien:

Selektieren sie die neu erstellten Dateien und wählen sie dann die Option Discard Changes:

Komponenten erstellen

Jede dieser Komponenten kann einzeln erstell werden, z. B:

❯ php artisan make:model Post
❯ php artisan make:controller PostController

Hierbei gilt es natürlich, die Abhängigkeiten zu berücksichtigen. Der Controller muss mit dem Model arbeiten und sollte daher die. gleichen Felder und Feldnamen verwendet.

Einfacher ist es daher, das Laravel diese Abhängigkeiten kennt und entsprechend verwendet.

Bei der Erstellung des Models können wir auch einen dazu passenden Controller und weitere Komponenten erstellen:

❯ php artisan make:model Post --migration --controller --seed --api --requests --pest

   INFO  Model and test [app/Models/Post.php] created successfully.
   INFO  Migration [database/migrations/2024_04_19_073500_create_posts_table.php] created successfully.
   INFO  Seeder [database/seeders/PostSeeder.php] created successfully.
   INFO  Request [app/Http/Requests/StorePostRequest.php] created successfully.
   INFO  Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
   INFO  Controller and test [app/Http/Controllers/PostController.php] created successfully.

Dies erstellt die Dateien

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

Und um alle möglichen Komponenten zu erstellen, verwenden wir den nachfolgenden Befehl:

❯ php artisan make:model Post --all --pest

   INFO  Model and test [app/Models/Post.php] created successfully.
   INFO  Factory [database/factories/PostFactory.php] created successfully.
   INFO  Migration [database/migrations/2024_04_19_073800_create_posts_table.php] created successfully.
   INFO  Seeder [database/seeders/PostSeeder.php] created successfully.
   INFO  Request [app/Http/Requests/StorePostRequest.php] created successfully.
   INFO  Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
   INFO  Controller and test [app/Http/Controllers/PostController.php] created successfully.
   INFO  Policy [app/Policies/PostPolicy.php] created successfully.

Dies erstellt die Dateien

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

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

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

Einrichten der Starter-App

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

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

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

Oder auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App App
❯ cd App
❯ composer install
❯ npm install
❯ npm run build
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

Erstellen der erforderlichen Komponenten

❯ php artisan make:model Post --all --pest

   INFO  Model and test [app/Models/Post.php] created successfully.
   INFO  Factory [database/factories/PostFactory.php] created successfully.
   INFO  Migration [database/migrations/2024_04_19_075600_create_posts_table.php] created successfully.
   INFO  Seeder [database/seeders/PostSeeder.php] created successfully.
   INFO  Request [app/Http/Requests/StorePostRequest.php] created successfully.
   INFO  Request [app/Http/Requests/UpdatePostRequest.php] created successfully.
   INFO  Controller and test [app/Http/Controllers/PostController.php] created successfully.
   INFO  Policy [app/Policies/PostPolicy.php] created successfully.

Anpassen des Routing

Erweiteren Sie die Datei routes/api.php um den nachfolgenden Programmcode (Zeile 6 und 12-14):

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:sanctum');

Route::get('/get',            [PostController::class, 'index']);
Route::post('/post',          [PostController::class, 'store']);
Route::delete('/delete/{id}', [PostController::class, 'destroy']);

Erster Test

Prüfen wir die bisherigen Schritte. Starten sie Laravel und öffnen sie einen Browser unter der Adresse http://127.0.0.1:8000/api/get

❯ php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

Sie sehen, das sie nichts sehen. Was zu erwarten war, da die API noch keine Daten hat und daher auch keine Daten liefern kann.

Zur Erinnerung: der API Aufruf /api/get soll alle Datensätze liefern.

Datenbank füllen

Erweitern wir als nächstes das Migrations-Skript um die Datenbank mit Werten zu füllen.

Die entsprechende Datei ist (der genaue Name kann dabei bei Ihnen abweichen)

database/migrations/2024_04_19_075600_create_posts_table.php 

Passen sie die Funktion up() an:

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

Bearbeiten der Komponenten

Laravel | Erstellen eines Blade Layouts

Inhaltsverzeichnis

TL;DR

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

Einrichten der Starter-App

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

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

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App App
❯ cd App
❯ composer install
❯ npm install
❯ npm run build
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

Motivation

Betrachten wir die Dashboard-Seite der Starter-App: dashboard.blade.php. Es fällt auf, das nur der eigentliche Inhalt definiert wird (z. B. der Willkommens-Text in Zeile 11). Das eigentliche “Aussehen” (Layout) wird abgeleitet von dem generellen App-Layout. Dies wird durch die folgende erste Zele erreicht:

<x-app-layout>

Wir wollen Seiten entwicklen, die ein unterschiedliches Aussehen haben. Daher wollen wir neben dem generellen App-Layout noch weitere Layouts erstellen.

Ein weiteres Layout soll z. B. eine Seitenleiste erhalten, wir wollen es AppSidebarLayout nennen.

Verwendet wird es dann, wenn als erste Zeile die folgende verwendet wird:

<x-app-sidebar-layout>

Neue Seite erstellen

Im ersten Schritt erstellen wir zuerst eine neue Seite

Blade-Datei für neue Seite erstellen

Kopieren sie die Datei dashboard.blade.php nach page_with_sidebar.blade.php.

Löschen sie den Aufruf des Willkommens-Text in Zeile 11:

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

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

Navigationsleiste erweitern

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

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

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

Routing hinzufügen

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

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

Ergebnis

So sieht dann unsere Seite aus:

Neues Layout verwenden

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

<x-app-sidebar-layout>

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

Lassen Sie uns also das neue Layout erstellen.

Neues Layout erstellen

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

Laravel | Arbeiten mit PowerGrid

Inhaltsverzeichnis

TL;DR

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

Einrichten der Starter-App

Erstellen der Starter App.

Sie können dazu dieses Kommando verwenden:

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

Dieser Post arbeitet mit der hier beschriebenen StarterApp. Der Post beschreibt, wie eine Starter-App erstellt und die grundlegenden Anpassungen durchgeführt werden. Sie können auch direkt mit dem dazugehörigen Repository starten:

❯ git clone https://github.com/r14r/Laravel_Tutorial_Erstellen-einer-Starter-App Laravel_Tutorial_Arbeiten-mit-PowerGrid
❯ Laravel_Tutorial_Arbeiten-mit-PowerGrid
❯ composer install
❯ npm install
❯ npm run build
❯ cp .env.example  .env
❯ php artisan migrate
❯ php artisan key:generate
❯ php artisan serve

Installation

1. via Composer

composer require power-components/livewire-powergrid

2. Konfigurationsdatei bereitstellen

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

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

3. Views und Sprachdateien bereitstellen (Optional)

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

Views bereitstellen:

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

Sprachdateien bereitstellen:

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