Filament と Laravel を使用した堅牢な管理パネルの構築: ステップバイステップガイド

Laravel は、Web アプリケーション開発のための強固な基盤を提供する強力な PHP フレームワークです。 Filament は、管理インターフェイスの作成を簡素化する、Laravel 用のオープンソースのエレガントな管理パネルおよびフォーム ビルダーです。このガイドでは、Filament と Laravel の最新バージョンを使用して堅牢な管理パネルを構築する手順を説明します。

Laravel SaaS スターター - 数週間ではなく 1 日で次の SaaS を開始します
次の Laravel Saas プロジェクトを数週間ではなく、わずか 1 日で開始しましょう。すべての Saas が必要とする機能がすでに構築されています
www.laravelsaas.store

前提条件
始める前に、開発マシンに以下がインストールされていることを確認してください:

PHP >= 8.0
作曲家
Node.js と NPM
MySQL または Laravel でサポートされているその他のデータベース

ステップ 1: 新しい Laravel プロジェクトをセットアップする

まず、Composer を使用して新しい Laravel プロジェクトを作成します。

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

次に、環境変数を設定します。 .env.example ファイルの名前を .env に変更し、資格情報を使用してデータベース構成を更新します。

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

次のコマンドを実行してアプリケーション キーを生成し、デフォルトの Laravel テーブルを移行します。

php artisan key:generate
php artisan migrate

ステップ 2: フィラメントの取り付け

Filament をインストールするには、Composer を使用します:

composer require filament/filament

次に、Filament アセットと構成を公開します。

php artisan filament:install

ステップ 3: 認証の設定

Filament では、管理パネルへのアクセスを管理するために認証が必要です。 Laravel は組み込みの認証スキャフォールディングを提供します。簡単にするために Laravel Breeze を使用してみましょう:

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

プロンプトに従って、好みのフロントエンド オプション (Blade、Vue、React) を選択します。この例では、Blade:
を使用します。

php artisan migrate
npm install
npm run dev

ログインに使用するユーザーがいることを確認してください。 Laravel Tinker を使用して作成できます:

php artisan tinker

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

ステップ 4: フィラメントの構成

ロールまたは権限を使用している場合は、User モデルを更新して Filament HasFilamentRoles コントラクトを実装します。現時点では、認証されたユーザーが確実に 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',
        ]);
    });
}

ステップ 5: リソースの作成

フィラメント リソースは、CRUD インターフェイスを備えた Eloquent モデルです。 Post モデルを管理するためのリソースを作成しましょう。

モデル、移行、およびファクトリーを生成します:

php artisan make:model Post -mf

移行ファイル内のフィールドを定義します:

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

移行を実行します:

php artisan migrate

次に、Filament リソースを生成します。

php artisan make:filament-resource Post

このコマンドは、リソースに必要なファイルを作成します。 app/Filament/Resources/PostResource.php を開き、リソース フィールドを定義します。

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

ステップ 6: ナビゲーションを追加する

リソースを Filament サイドバーに追加します。 app/Providers/FilamentServiceProvider.php を開き、リソースを登録します:

use App\Filament\Resources\PostResource;

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

ステップ 7: フィラメントのカスタマイズ

フィラメントは高度にカスタマイズ可能です。テーマやコンポーネントなどを変更できます。たとえば、原色をカスタマイズするには、config/filament.php ファイルを更新します。

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

ドキュメントに従ってカスタム ページ、ウィジェット、フォーム コンポーネントを作成することもできます: Filament Documentation。

Laravel SaaS スターター - 数週間ではなく 1 日で次の SaaS を開始します
次の Laravel Saas プロジェクトを数週間ではなく、わずか 1 日で開始しましょう。すべての Saas が必要とする機能がすでに構築されています
www.laravelsaas.store

結論

このガイドでは、新しい Laravel プロジェクトのセットアップ、Filament のインストール、認証のセットアップ、リソースの作成、Filament 管理パネルのカスタマイズについて説明しました。これにより、Filament と Laravel を使用して堅牢な管理パネルを構築するための強固な基盤が得られます。より高度な機能とカスタマイズについては、公式ドキュメントを参照して、Filament の機能を調べてください。

コーディングを楽しんでください!

以上がFilament と Laravel を使用した堅牢な管理パネルの構築: ステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。