> Anil Akin _
DE EN
Erste Schritte mit Laravel Filament: Ein umfassender Leitfaden

Erste Schritte mit Laravel Filament: Ein umfassender Leitfaden

Entdecke, wie du mit Laravel Filament leistungsstarke Admin-Panels erstellen kannst. Erfahre mehr über die Kernfunktionen, den Installationsprozess und Best Practices für eine schnelle Entwicklung.

Anil Akin
3 Min. Lesezeit
Laravel Web Development #Laravel #Filament #Admin Panel #TALL Stack #Tutorial

Einführung in Laravel Filament

Laravel Filament ist ein leistungsstarker Admin-Panel-Builder für Laravel-Anwendungen, der dir eine schöne, intuitive Benutzeroberfläche direkt aus der Box bietet. Es basiert auf dem TALL-Stack (Tailwind CSS, Alpine.js, Laravel und Livewire) und bietet ein umfassendes Set an Tools für den schnellen Aufbau von Admin-Interfaces.

Warum Filament wählen?

Filament sticht aus mehreren Gründen hervor:

  • Schnelle Entwicklung: Erstelle komplexe Admin-Panels in Stunden statt Wochen

  • Schöne UI: Modernes, responsives Design mit Dark-Mode-Unterstützung

  • Erweiterbar: Einfache Anpassung und Erweiterung nach deinen Bedürfnissen

  • Laravel-Ökosystem: Nahtlose Integration mit Laravel-Features

Installation und Setup

Lass uns mit der Installation von Filament in deinem Laravel-Projekt beginnen:

Schritt 1: Installation über Composer

composer require filament/filament:"^3.0"

Schritt 2: Erstelle einen Admin-Benutzer

php artisan make:filament-user

Schritt 3: Zugriff auf das Admin-Panel

Navigiere zu /admin in deinem Browser und melde dich mit deinen Zugangsdaten an.

Erstelle deine erste Ressource

Ressourcen sind das Herzstück von Filament. Sie repräsentieren Eloquent-Modelle in deinem Admin-Panel.

Generiere eine Ressource

php artisan make:filament-resource Product --generate

Dieser Befehl erstellt:

  • Eine Ressourcen-Klasse
  • Seiten für Listing, Erstellen und Bearbeiten
  • Formular- und Tabellenschemas basierend auf deinem Modell

Formular-Builder

Der Formular-Builder von Filament macht es einfach, komplexe Formulare zu erstellen:

use Filament\Forms;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255),
            Forms\Components\Textarea::make('description')
                ->columnSpanFull(),
            Forms\Components\FileUpload::make('image')
                ->image()
                ->imageEditor(),
            Forms\Components\Select::make('category_id')
                ->relationship('category', 'name')
                ->searchable()
                ->preload(),
        ]);
}

Tabellen und Filter

Erstelle leistungsstarke Datentabellen mit Sortierung, Suche und Filtern:

use Filament\Tables;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name')
                ->searchable(),
            Tables\Columns\ImageColumn::make('image'),
            Tables\Columns\TextColumn::make('price')
                ->money('eur')
                ->sortable(),
            Tables\Columns\TextColumn::make('created_at')
                ->dateTime()
                ->sortable(),
        ])
        ->filters([
            Tables\Filters\SelectFilter::make('category')
                ->relationship('category', 'name'),
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
            Tables\Actions\DeleteAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}

Fortgeschrittene Features

Widgets und Dashboard

Erstelle benutzerdefinierte Dashboard-Widgets:

class StatsOverview extends BaseWidget
{
    protected function getStats(): array
    {
        return [
            Stat::make('Gesamt Benutzer', User::count())
                ->description('32k Anstieg')
                ->descriptionIcon('heroicon-m-arrow-trending-up')
                ->color('success'),
            // Mehr Stats...
        ];
    }
}

Beziehungen verwalten

Filament macht es einfach, komplexe Beziehungen zu verwalten:

Forms\Components\Repeater::make('orderItems')
    ->relationship()
    ->schema([
        Forms\Components\Select::make('product_id')
            ->relationship('product', 'name'),
        Forms\Components\TextInput::make('quantity')
            ->numeric(),
    ])
    ->columnSpanFull()

Best Practices

1. Nutze Policies für Autorisierung

Filament integriert sich nahtlos mit Laravel Policies:

class ProductPolicy
{
    public function viewAny(User $user): bool
    {
        return $user->hasRole('admin');
    }
}

2. Optimiere die Performance

  • Nutze Eager Loading für Beziehungen
  • Implementiere Caching wo angebracht
  • Nutze Pagination für große Datensätze

3. Passe das Branding an

Personalisiere dein Admin-Panel:

public function panel(Panel $panel): Panel
{
    return $panel
        ->brandName('Meine App')
        ->brandLogo(asset('images/logo.svg'))
        ->colors([
            'primary' => Color::Amber,
        ])
        ->font('Inter');
}

Fazit

Laravel Filament revolutioniert die Art, wie du Admin-Panels erstellst. Mit seiner intuitiven API, schönen UI und leistungsstarken Features kannst du in Rekordzeit voll funktionsfähige Admin-Interfaces bauen.

Beginne noch heute mit Filament und erlebe, wie es deinen Entwicklungsprozess transformiert!

Diesen Artikel teilen

Ähnliche Artikel