Créer des panneaux d'administration robustes avec Filament et Laravel : un guide étape par étape

Laravel est un framework PHP puissant qui fournit une base solide pour développer des applications Web. Filament est un panneau d'administration et un générateur de formulaires open source et élégant pour Laravel qui simplifie la création d'interfaces d'administration. Ce guide vous guidera dans la création d'un panneau d'administration robuste en utilisant les dernières versions de Filament et Laravel.

Laravel SaaS Starter - Démarrez votre prochain Saas en un jour et non en quelques semaines
Démarrez votre prochain projet Laravel Saas en seulement un jour et non en quelques semaines ! Avec des fonctionnalités déjà construites dont chaque Saas a besoin
www.laravelsaas.store

Prérequis
Avant de commencer, assurez-vous que les éléments suivants sont installés sur votre machine de développement :

PHP>= 8.0
Compositeur
Node.js et NPM
MySQL ou toute autre base de données supportée par Laravel

Étape 1 : Mettre en place un nouveau projet Laravel

Tout d'abord, créez un nouveau projet Laravel à l'aide de Composer :

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

Ensuite, configurez vos variables d'environnement. Renommez le fichier .env.example en .env et mettez à jour la configuration de la base de données avec vos informations d'identification :

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

Exécutez la commande suivante pour générer une clé d'application et migrer les tables Laravel par défaut :

php artisan key:generate
php artisan migrate

Étape 2 : Installation du filament

Pour installer Filament, utilisez Composer :

composer require filament/filament

Ensuite, publiez les actifs et la configuration du filament :

php artisan filament:install

Étape 3 : Configuration de l'authentification

Filament nécessite une authentification pour gérer l'accès au panneau d'administration. Laravel fournit un échafaudage d'authentification intégré. Utilisons Laravel Breeze pour plus de simplicité :

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

Suivez les invites pour sélectionner votre option d'interface préférée (Blade, Vue, React). Pour cet exemple, nous utiliserons Blade :

php artisan migrate
npm install
npm run dev

Assurez-vous d'avoir un utilisateur avec lequel vous connecter. Vous pouvez utiliser Laravel Tinker pour en créer un :

php artisan tinker

>>> \App\Models\User::factory()->create(['email' => 'admin@example.com']);

Étape 4 : Configuration du filament

Mettez à jour le modèle User pour implémenter le contrat Filament HasFilamentRoles si vous utilisez des rôles ou des autorisations. Pour l'instant, nous veillerons à ce que tout utilisateur authentifié puisse accéder à Filament.

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, [
            'admin@example.com',
        ]);
    });
}

Étape 5 : Création de ressources

Les ressources Filament sont des modèles Eloquent avec des interfaces CRUD. Créons une ressource pour gérer un modèle Post.

Générer le modèle, la migration et l'usine :

php artisan make:model Post -mf

Définissez les champs dans le fichier de migration :

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

Exécutez la migration :

php artisan migrate

Ensuite, générez une ressource Filament :

php artisan make:filament-resource Post

Cette commande crée les fichiers nécessaires pour la ressource. Ouvrez app/Filament/Resources/PostResource.php et définissez les champs de ressources :

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'),
        ];
    }
}

Étape 6 : Ajout de la navigation

Ajoutez la ressource à la barre latérale Filament. Ouvrez app/Providers/FilamentServiceProvider.php et enregistrez la ressource :

use App\Filament\Resources\PostResource;

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

Étape 7 : Personnalisation du filament

Le filament est hautement personnalisable. Vous pouvez modifier le thème, les composants et bien plus encore. Par exemple, pour personnaliser la couleur primaire, mettez à jour le fichier config/filament.php :

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

Vous pouvez également créer des pages personnalisées, des widgets et des composants de formulaire en suivant la documentation : Filament Documentation.

Laravel SaaS Starter - Démarrez votre prochain Saas en un jour et non en quelques semaines
Démarrez votre prochain projet Laravel Saas en seulement un jour et non en quelques semaines ! Avec des fonctionnalités déjà construites dont chaque Saas a besoin
www.laravelsaas.store

Conclusion

Dans ce guide, nous avons expliqué la configuration d'un nouveau projet Laravel, l'installation de Filament, la configuration de l'authentification, la création de ressources et la personnalisation du panneau d'administration de Filament. Cela devrait vous donner une base solide pour créer des panneaux d'administration robustes à l'aide de Filament et Laravel. Pour des fonctionnalités et des personnalisations plus avancées, reportez-vous à la documentation officielle et explorez les capacités de Filament.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!