Filamentチュートリアル(管理画面に追加)

使い方チュートリアル

下記のサイトを見ながら、Filamentの使い方を勉強した。

ブログをイメージしてpostとtagを追加してみるサンプルで、とても勉強になった。下記を実践するとチュートリアルで使用するテーブルやモデルが作成されるので、本番の開発を行いたい場合は、開発を始めましょう。(Laravel-Filamentで開発1(管理画面の作成)

管理画面に項目を追加

サンプルモデルファイルとマイグレーションファイル作成

php artisan make:model -m Post
php artisan make:model -m Tag

モデルのマイグレーション作成

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');	// 追加
        $table->text('body');	// 追加
        $table->timestamps();
    });
}
public function up()
{
    Schema::create('tags', function (Blueprint $table) {
        $table->id();
        $table->string('name')->unique();	//追加
        $table->timestamps();
    });
}

モデルリレーションシップテーブル作成

php artisan make:migration create_post_tag_table

リレーションシップのマイグレーション作成

public function up()
{
    Schema::create('post_tag', function (Blueprint $table) {
        $table->id();
        $table->foreignId('post_id')->constrained('posts')->onDelete('cascade'); // 追加
        $table->foreignId('post_id')->constrained('tags')->onDelete('cascade'); // 追加
        $table->unique(['post_id','tag_id']);
        $table->timestamps();
    });
}

Postモデルの設定

class Post extends Model
{
    use HasFactory;
    protected $fillable = ['title', 'body'];  // 追加
    
    // 追加
    public function tags() 
    {
        return $this->belongsToMany(Tag::class);
    }
}

Tagモデルの設定

class Tag extends Model
{
    use HasFactory;
    protected $fillable = ['name'];  // 追加

    // 追加(独自追加)
    public function posts()
    {
        return $this->belongsToMany('App\Models\Post');
    }
}

マイグレーション実行

php artisan migrate

Filament用管理リソースを作成する

php artisan make:filament-resource Post
php artisan make:filament-resource Tag

PostResource.phpファイルを編集します

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // 追加(ここに編集したい項目を追加する)
            Forms\Components\TextInput::make('title')->required()->label('タイトル')
                ->hint("ブログのタイトル入力"),
            Forms\Components\Textarea::make('body')->required()->label('本文')
                ->helperText('本文を入力します')
                ->columnSpan('full'),
        ]);
}

public static function table(Table $table): Table
{
    return $table
        ->columns([
            // 追加(ここに表示したい項目を追加する)
            Tables\Columns\TextColumn::make('title')->label('タイトル'),
            Tables\Columns\TextColumn::make('body')->label('本文'),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\DeleteBulkAction::make(),
        ]);
}

TagResource.phpファイルを編集します

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // 追加(ここに編集したい項目を追加する)
            Forms\Components\TextInput::make('name')->required()->label('タグ')
                ->hint("タグ名を入力"),
        ]);
}

public static function table(Table $table): Table
{
    return $table
        ->columns([
            // 追加(ここに表示したい項目を追加する)
            Tables\Columns\TextColumn::make('name')->label('タグ'),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\DeleteBulkAction::make(),
        ]);
}

管理画面で確認してみてよ

管理画面の左側にpostとtagが追加されているはずだ。

Filamentリレーションリソースの追加

php artisan make:filament-relation-manager PostResource tags name

PostモデルからTagの新規作成&割当を可能にするボタン追加

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name'),
        ])
        ->filters([
            //
        ])
        ->headerActions([
            Tables\Actions\CreateAction::make(),
            Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'), //追加
        ])
        (省略)
}    

PostResourceにTagとのリレーションシップを追加

public static function getRelations(): array
{
    return [
        PostResource\RelationManagers\TagsRelationManager::class, //追加
    ];
}

リレーションシップの付け替えについて

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name'),
        ])
        ->filters([
            //
        ])
        ->headerActions([
            Tables\Actions\CreateAction::make(),
            Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'),
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
            Tables\Actions\DetachAction::make(),  // 修正(DeleteからDetachに)
        ])
        ->bulkActions([
            Tables\Actions\DeleteBulkAction::make(),
        ]);
}

コメントする