Laravel ist ein leistungsstarkes PHP-Framework, das eine solide Grundlage für die Entwicklung von Webanwendungen bietet. Filament ist ein elegantes Open-Source-Admin-Panel und Formularersteller für Laravel, das die Erstellung von Admin-Schnittstellen vereinfacht. Dieser Leitfaden führt Sie durch den Aufbau eines robusten Admin-Panels mit den neuesten Versionen von Filament und Laravel.

Laravel SaaS Starter – Starten Sie Ihr nächstes SaaS in einem Tag, nicht in Wochen
Starten Sie Ihr nächstes Laravel Saas-Projekt in nur einem Tag, nicht in Wochen! Mit bereits erstellten Funktionen, die jedes SaaS benötigt
www.laravelsaas.store

Voraussetzungen
Bevor wir beginnen, stellen Sie sicher, dass auf Ihrem Entwicklungscomputer Folgendes installiert ist:

PHP >= 8.0
Komponist
Node.js und NPM
MySQL oder jede andere von Laravel unterstützte Datenbank

Schritt 1: Einrichten eines neuen Laravel-Projekts

Erstellen Sie zunächst ein neues Laravel-Projekt mit Composer:

composer create-project --prefer-dist laravel/laravel filament-admin
cd filament-admin

Als nächstes richten Sie Ihre Umgebungsvariablen ein. Benennen Sie die Datei .env.example in .env um und aktualisieren Sie die Datenbankkonfiguration mit Ihren Anmeldeinformationen:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=filament_db
DB_USERNAME=root
DB_PASSWORD=your_password

Führen Sie den folgenden Befehl aus, um einen Anwendungsschlüssel zu generieren und die Standard-Laravel-Tabellen zu migrieren:

php artisan key:generate
php artisan migrate

Schritt 2: Filament installieren

Um Filament zu installieren, verwenden Sie Composer:

composer require filament/filament

Veröffentlichen Sie als Nächstes die Filament-Assets und die Konfiguration:

php artisan filament:install

Schritt 3: Authentifizierung einrichten

Filament erfordert eine Authentifizierung, um den Zugriff auf das Admin-Panel zu verwalten. Laravel bietet ein integriertes Authentifizierungsgerüst. Verwenden wir der Einfachheit halber Laravel Breeze:

composer require laravel/breeze --dev
php artisan breeze:install

Folgen Sie den Anweisungen, um Ihre bevorzugte Frontend-Option (Blade, Vue, React) auszuwählen. Für dieses Beispiel verwenden wir Blade:

php artisan migrate
npm install
npm run dev

Stellen Sie sicher, dass Sie einen Benutzer haben, mit dem Sie sich anmelden können. Sie können Laravel Tinker verwenden, um eines zu erstellen:

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => '[email protected]']);

Schritt 4: Filament konfigurieren

Aktualisieren Sie das Benutzermodell, um den Filament HasFilamentRoles-Vertrag zu implementieren, wenn Sie Rollen oder Berechtigungen verwenden. Vorerst stellen wir sicher, dass jeder authentifizierte Benutzer auf Filament zugreifen kann.

In app/Providers/FilamentServiceProvider.php, define the authorization logic:

use Filament\Facades\Filament;

public function boot()
{
    Filament::serving(function () {
        Filament::registerUserMenuItems([
            'account' => MenuItem::make()
                ->label('My Account')
                ->url(route('filament.resources.users.edit', ['record' => auth()->user()]))
                ->icon('heroicon-o-user'),
        ]);
    });

    Filament::registerPages([
        // Register your custom pages here
    ]);

    Filament::registerResources([
        // Register your custom resources here
    ]);
}

protected function gate()
{
    Gate::define('viewFilament', function ($user) {
        return in_array($user->email, [
            '[email protected]',
        ]);
    });
}

Schritt 5: Ressourcen erstellen

Filamentressourcen sind Eloquent-Modelle mit CRUD-Schnittstellen. Erstellen wir eine Ressource zum Verwalten eines Post-Modells.

Generieren Sie das Modell, die Migration und die Fabrik:

php artisan make:model Post -mf

Definieren Sie die Felder in der Migrationsdatei:

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

Migration ausführen:

php artisan migrate

Als nächstes generieren Sie eine Filament-Ressource:

php artisan make:filament-resource Post

Dieser Befehl erstellt die erforderlichen Dateien für die Ressource. Öffnen Sie app/Filament/Resources/PostResource.php und definieren Sie die Ressourcenfelder:

use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\CreateRecord;
use Filament\Resources\Pages\EditRecord;
use Filament\Resources\Pages\ListRecords;
use Filament\Resources\Forms;
use Filament\Resources\Tables;
use Filament\Resources\Forms\Components\TextInput;
use Filament\Resources\Forms\Components\Textarea;
use Filament\Resources\Tables\Columns\TextColumn;

class PostResource extends Resource
{
    protected static ?string $model = Post::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('title')
                    ->required()
                    ->maxLength(255),
                Textarea::make('content')
                    ->required(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('title'),
                TextColumn::make('content')
                    ->limit(50),
                TextColumn::make('created_at')
                    ->dateTime(),
            ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListRecords::route('/'),
            'create' => Pages\CreateRecord::route('/create'),
            'edit' => Pages\EditRecord::route('/{record}/edit'),
        ];
    }
}

Schritt 6: Navigation hinzufügen

Fügen Sie die Ressource zur Filament-Seitenleiste hinzu. Öffnen Sie app/Providers/FilamentServiceProvider.php und registrieren Sie die Ressource:

use App\Filament\Resources\PostResource;

public function register()
{
    Filament::registerResources([
        PostResource::class,
    ]);
}

Schritt 7: Filament anpassen

Filament ist hochgradig anpassbar. Sie können das Thema, die Komponenten und mehr ändern. Um beispielsweise die Primärfarbe anzupassen, aktualisieren Sie die Datei config/filament.php:

'brand' => [
    'primary' => '#1d4ed8',
],

Sie können auch benutzerdefinierte Seiten, Widgets und Formularkomponenten erstellen, indem Sie der Dokumentation folgen: Filament-Dokumentation.

Laravel SaaS Starter – Starten Sie Ihr nächstes SaaS in einem Tag, nicht in Wochen
Starten Sie Ihr nächstes Laravel Saas-Projekt in nur einem Tag, nicht in Wochen! Mit bereits erstellten Funktionen, die jedes SaaS benötigt
www.laravelsaas.store

Abschluss

In diesem Leitfaden haben wir Schritt für Schritt ein neues Laravel-Projekt eingerichtet, Filament installiert, die Authentifizierung eingerichtet, Ressourcen erstellt und das Filament-Admin-Panel angepasst. Dies sollte Ihnen eine solide Grundlage für den Aufbau robuster Admin-Panels mit Filament und Laravel bieten. Weitere erweiterte Funktionen und Anpassungen finden Sie in der offiziellen Dokumentation und erkunden Sie die Funktionen von Filament.

Viel Spaß beim Codieren!