Laravelで管理画面を簡単に構築できる「Filament」の紹介
はじめに
Laravelで管理画面をさくっと作りたいときありますよね。
そのために、
- Laravelの知識で画面も作りたい
- ログイン画面からデータの一覧表示、新規作成~削除まで作りたい(プラグインを個別に入れない)
- モダンなデザイン
- ある程度の日本語の画面
- 基本機能は無料
ぐらいできるとうれしいです。
「Filament」はこの要件をかなえてくれます。
デザインもモダンですね
Laravelに組み込まれているので、artisanコマンドで各ページの作成などが行えます。
また、インストール時にログイン画面は即生成され(デフォルトUserテーブル)の情報でログインできます。
そして、一覧表示・新規作成~削除ページ作成も
# モデル名でページ作成
php artisan make:filament-resource モデル名
で、一発生成！！
からのPHPでフォームを記載すると
// 画面に表示したい入力フォーム
Forms\Components\TextInput::make('カラム名')
一発でフォーム生成。カラム名のデータ変更を変更する画面ができました。
ありがとう「Filament」
デザインが気になる人は、デモページで表示を確認できます。
デモページ↓
公式ページはこちら↓
作ってみよう
実際どれくらいの手軽なのか気になるところです。
ログイン・一覧・新規作成・編集・削除ページまでを作ってみます。
公式のドキュメントが充実しているので、それに沿って構築します。
ドキュメントのチュートリアル
前提条件
Laravel をインストールして、DBに接続してください。
(記事作成時点は、Laravel 11です)
envファイルに日本設定を行います
APP_TIMEZONE=Asia/Tokyo
APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP
Filamentインストール
LaravelにFilamentを導入します。
# composerでインストール
composer require filament/filament:"^3.2" -W
# セットアップコマンド
php artisan filament:install --panels
セットアップ時にFilamentのID(URLのパス)を決めます。
デフォルトは、"admin"
セットアップが終わった段階で、IDをブラウザで開くとログイン画面が表示されます。
例) laravelドメイン/admin
自動的に日本語表示になっていますね。かしこい！
ログインユーザ作成
Laravelのユーザを作成していない場合は、作成します。
ユーザーを追加するコマンド
# tinkerに入る
php artisan tinker
# ユーザを作成
$user = new User;
$user->name = "ユーザー名";
$user->email = "メールアドレス";
$user->password = Hash::make('パスワード');
$user->save();
# tinkerを抜ける
exit
ログインページから作成したユーザでログインできることを確認します
ログイン画面構築完了です！！
リソースの作成
DBの内容を"表示"・"新規作成”・”編集"・”削除”を行う「リソース」ページを作成します。
サンプルデータの作成
まずは、サンプルのデータベースを作成します。
php artisan make:model Owner --migration
php artisan make:model Patient --migration
php artisan make:model Treatment --migration
作成されたマイグレーションファイルをそれぞれ以下の形に変更します。
// create_owners_table
Schema::create('owners', function (Blueprint $table) {
$table->id();
$table->string('email');
$table->string('name');
$table->string('phone');
$table->timestamps();
});
// create_patients_table
Schema::create('patients', function (Blueprint $table) {
$table->id();
$table->date('date_of_birth');
$table->string('name');
$table->foreignId('owner_id')->constrained('owners')->cascadeOnDelete();
$table->string('type');
$table->timestamps();
});
// create_treatments_table
Schema::create('treatments', function (Blueprint $table) {
$table->id();
$table->string('description');
$table->text('notes')->nullable();
$table->foreignId('patient_id')->constrained('patients')->cascadeOnDelete();
$table->unsignedInteger('price')->nullable();
$table->timestamps();
});
作成されたモデルをそれぞれ以下の形に変更します。
// 各ファイルにuseを追加
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
// Owner.php
class Owner extends Model
{
protected $guarded = ['created_at', 'updated_at'];
public function patients(): HasMany
{
return $this->hasMany(Patient::class);
}
}
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
// Patient.php
class Patient extends Model
{
protected $guarded = ['created_at', 'updated_at'];
public function owner(): BelongsTo
{
return $this->belongsTo(Owner::class);
}
public function treatments(): HasMany
{
return $this->hasMany(Treatment::class);
}
}
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
// Treatment.php
class Treatment extends Model
{
protected $guarded = ['created_at', 'updated_at'];
public function patient(): BelongsTo
{
return $this->belongsTo(Patient::class);
}
}
マイグレーションをDBへ適用
php artisan migrate
デモ用のDBはできました。
リリースの作成
デモDB用の管理ページを作成します。
make:filament-resource (モデル名) コマンドで作成できます。
Patientのページを作成します。
php artisan make:filament-resource Patient
app/Filament/Resourcesに以下のファイルが作成されます
.
+-- PatientResource.php
+-- PatientResource
| +-- Pages
| | +-- CreatePatient.php
| | +-- EditPatient.php
| | +-- ListPatients.php
ブラウザで/admin/patientsにアクセスすることでページが表示されます
「新規作成」フォームを作成する
入力フォームを追加します。
PatientResource.phpの "function form"を以下に書き換えます。
use Filament\Forms;
use Filament\Forms\Form;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\Components\TextInput::make('name'),
]);
}
/admin/patients/createにブラウザでアクセスすると、テキスト入力のフォームが表示されます。
入力規則を追加しましょう。
入力規則「必須」「最大長は 255 文字」を追加します。
PatientResource.phpを書き換えます。
use Filament\Forms;
use Filament\Forms\Form;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\Components\TextInput::make('name')
->required()
->maxLength(255)
]);
}
未入力でフォームを進めるとメッセージが表示されます。
このように、「入力フォームの種類」「対応するカラム名」「入力規則」を入れるだけで機能を作れます。
フォームの配列を追加することで、複数の項目を作ることができます。
また、テキスト以外のタイプも作ることができます。
必要なものをすべて追加すると以下の形です
(ドキュメントでは丁寧に解説しています)
use Filament\Forms;
use Filament\Forms\Form;
public static function form(Form $form): Form
{
return $form
->schema([
Forms\Components\TextInput::make('name')
->required()
->maxLength(255),
Forms\Components\Select::make('type')
->options([
'cat' => 'Cat',
'dog' => 'Dog',
'rabbit' => 'Rabbit',
])
->required(),
Forms\Components\DatePicker::make('date_of_birth')
->required()
->maxDate(now()),
Forms\Components\Select::make('owner_id')
->relationship('owner', 'name')
->searchable()
->preload()
->createOptionForm([
Forms\Components\TextInput::make('name')
->required()
->maxLength(255),
Forms\Components\TextInput::make('email')
->label('Email address')
->email()
->required()
->maxLength(255),
Forms\Components\TextInput::make('phone')
->label('Phone number')
->tel()
->required(),
])
->required()
]);
}
新規作成ページ画面構築完了です！！
「一覧」を作成する
PatientResource.php"function table"に表示したいカラムを追加するだけです。
use Filament\Tables;
use Filament\Tables\Table;
public static function table(Table $table): Table
{
return $table
->columns([
Tables\Columns\TextColumn::make('name'),
Tables\Columns\TextColumn::make('type'),
Tables\Columns\TextColumn::make('date_of_birth'),
Tables\Columns\TextColumn::make('owner.name'),
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make(),
])
->bulkActions([
Tables\Actions\BulkActionGroup::make([
Tables\Actions\DeleteBulkAction::make(),
]),
]);
}
一覧を表示することができるようになりました。
さらに、カラムに絞り込みやソートを追加することができます。
public static function table(Table $table): Table
{
public static function table(Table $table): Table
{
return $table
->columns([
//
Tables\Columns\TextColumn::make('name')
->searchable(),
Tables\Columns\TextColumn::make('type'),
Tables\Columns\TextColumn::make('date_of_birth')
->sortable(),
Tables\Columns\TextColumn::make('owner.name')
->searchable(),
])
->filters([
//
])
->actions([
Tables\Actions\EditAction::make(),
])
->bulkActions([
Tables\Actions\BulkActionGroup::make([
Tables\Actions\DeleteBulkAction::make(),
]),
]);
}
}
一覧ページに絞り込みやソートが追加されました。
一覧の画面構築完了です！！
そして、なんということでしょう。
編集・削除の画面も構築完了です！！
おわり
管理ページを非常に簡単に作ることができました。
気になってきた人は、チュートリアルを行ってください。
Discussion