- Langkah 1 - Membuat Resource Post
- Langkah 2 - Mengubah Icon di Sidebar
- Langkah 3 - Mengubah Redirect URL
- Langkah 4 - Update Form Post
- Langkah 5 - Update Table Post
- Kesimpulan
Halo teman-teman semuanya, setelah sebelumnya kita berhasil membuat Model dan Migration untuk data Post beserta relasinya dengan Category, maka pada kesempatan kali ini kita semua akan belajar membuat fitur CRUD Post menggunakan Resource yang disediakan oleh Laravel Filament 5.
Langkah 1 - Membuat Resource Post
NOTE : Dalam pembuatan resource, pastikan menggunakan nama yang sama dengan Model.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.
php artisan make:filament-resource Post --generate
Perintah di atas akan menampilkan beberapa konfirmasi.
The "title attribute" is used to label each record in the UI.
You can leave this blank if records do not have a title.
┌ What is the title attribute for this model? ─────────────────┐
│ │
└──────────────────────────────────────────────────────────────┘
Teman-teman langsung ENTER aja.
Kemudian akan muncul lagi konfirmais seperti berikut ini.
┌ Would you like to generate a read-only view page for the resource? ┐
│ ○ Yes / ● No │
└────────────────────────────────────────────────────────────────────┘
Pilih No dan ENTER.
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan beberapa file yang berada di dalam folder app/Filament/Resources, kurang lebih seperti berikut ini.
app/Filament/Resources
.
+-- Posts
| +-- PostResource.php
| +-- Pages
| | +-- CreatePost.php
| | +-- EditPost.php
| | +-- ListPosts.php
| +-- Schemas
| | +-- PostForm.php
| +-- Tables
| | +-- PostsTable.php
Sekarang, silahkan teman-teman reload halaman admin panel-nya, maka menu Post akan muncul di sidebar.
Langkah 2 - Mengubah Icon di Sidebar
Pertama, kita akan ubah icon posts yang ada pada sidebar, silahkan teman-teman buka file app/Filament/Resources/PostResource.php, kemudian cari kode berikut ini.
app/Filament/Resources/Posts/PostResource.php
protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;
Kemudian ubah menjadi seperti berikut ini:
app/Filament/Resources/Posts/PostResource.php
protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedNewspaper;
Sekarang silahkan reload, maka icon Posts di sidebar akan berubah.
Langkah 3 - Mengubah Redirect URL
Secara default, setelah proses create dan edit, Filament biasanya akan redirect ke halaman edit. Nah, disini kita akan ubah agar setelah create dan edit diarahkan ke halaman index.
-
Redirect setelah Create
Pertama, kita akan menambahkan untuk halaman create. Silahkan teman-teman buka file
app/Filament/Resources/PostResource/Pages/CreatePost.php, kemudian tambahkan method ini di dalamnya.app/Filament/Resources/Posts/Pages/CreatePost.php
/** * getRedirectUrl * * @return string */ protected function getRedirectUrl(): string { return $this->getResource()::getUrl('index'); } -
Redirect setelah Edit
Kedua, kita akan menambahkan untuk halaman edit. Silahkan teman-teman buka file
app/Filament/Resources/PostResource/Pages/EditPost.php, kemudian tambahkan method ini di dalamnya.app/Filament/Resources/PostResource/Pages/EditPost.php
/** * getRedirectUrl * * @return string */ protected function getRedirectUrl(): string { return $this->getResource()::getUrl('index'); }
Dengan begitu, setelah proses create dan edit, kita akan langsung diarahkan kembali ke halaman daftar data (index).
Langkah 4 - Update Form Post
Sekarang kita akan lanjutkan mengubah default form create post yang telah digenerate oleh Filament, karena masih belum sesuai dengan keinginan kita.
Disin kita akan memanggil relasi Category untuk ditampilkan sebagai select option dan juga menggunakan RichTextEditor untuk menulis content-nya.
Silahkan teman-teman buka file app/Filament/Resources/Posts/Schemas/PostForm.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
app/Filament/Resources/Posts/Schemas/PostForm.php
<?php
namespace App\Filament\Resources\Posts\Schemas;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\RichEditor;
use Filament\Schemas\Schema;
class PostForm
{
public static function configure(Schema $schema): Schema
{
return $schema
->components([
FileUpload::make('image')
->image()
->columnSpanFull()
->required(),
TextInput::make('title')
->columnSpanFull()
->required(),
Select::make('category_id')
->relationship('category', 'name')
->required(),
RichEditor::make('content')
->required()
->columnSpanFull()
->extraAttributes([
'style' => 'min-height: 300px;',
])
]);
}
}
Dari perubahan kode di atas, kita import component Select dan RichEditor.
use Filament\Forms\Components\Select;
use Filament\Forms\Components\RichEditor;
Kemudian kita gunakan 2 component tersebut di dalam schema:
-
Select::make('category_id')digunakan untuk memanggil relasi categorySelect::make('category_id') ->relationship('category', 'name') ->required(), -
RichEditordigunakan untuk input content postRichEditor::make('content') ->required() ->columnSpanFull() ->extraAttributes([ 'style' => 'min-height: 300px;', ])
Sekarang, silahkan klik New Post, jika berhasil maka akan mendapatkan hasil seperti berikut ini.
Sekarang, silahkan teman-teman masukkan data posts, jika berhasil maka hasilnya kurang lebih seperti berikut ini.
Langkah 5 - Update Table Post
Sekarang kita akan lanjutkan untuk mengubah default data yang ditampilkan, secara default yang ditampilkan adalah category id, sedangkan yang kita inginkan adalah nama category-nya.
Silahkan teman-teman buka file app/Filament/Resources/Posts/Tables/PostsTable.php, kemudian ubah kode-nya menjadi seperti berikut ini.
app/Filament/Resources/Posts/Tables/PostsTable.php
<?php
namespace App\Filament\Resources\Posts\Tables;
use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
class PostsTable
{
public static function configure(Table $table): Table
{
return $table
->columns([
ImageColumn::make('image'),
TextColumn::make('title')
->searchable(),
TextColumn::make('category.name')
->searchable(),
TextColumn::make('created_at')
->dateTime()
->sortable()
->toggleable(isToggledHiddenByDefault: true),
TextColumn::make('updated_at')
->dateTime()
->sortable()
->toggleable(isToggledHiddenByDefault: true),
])
->filters([
//
])
->recordActions([
EditAction::make(),
])
->toolbarActions([
BulkActionGroup::make([
DeleteBulkAction::make(),
]),
]);
}
}
Dari perubahan kode di atas, kita menampilkan category post menggunakan TextColumn.
TextColumn::make('category.name')
->searchable(),
Sekarang, silahkan reload project-nya, jika berhasil maka kurang lebih hasilnya akan seperti berikut ini.
Kesimpulan
Pada tutorial ini, kita telah berhasil membuat fitur CRUD Post menggunakan Resource di Laravel Filament 5, mulai dari pembuatan resource, pengaturan redirect, pembuatan form dengan relasi Category, penggunaan Rich Editor untuk konten, hingga menampilkan data Post di dalam table.
Jika teman-teman ada kendala saat belajar atau mengikuti materi ini, silahkan bisa bertanya melalui kolom komentar atau melalui group Telegram milik SantriKoding.
Terima Kasih
SAWERIA
Memuat komentar...