Senin, 18 September 2023

    Cara Membuat Admin Panel dengan Filament: Tutorial Lengkap untuk Pemula

    Ingin menghemat waktu dan usaha dalam pembuatan Admin Panel ddengan Laravel? Artikel ini akan membahas tutorial Filament yang akan memandu Anda mulai dari nol.

    Apa Itu Filament ??

    Filament adalah kumpulan alat untuk membuat aplikasi stack TALL yang indah dengan cepat, yang dirancang untuk memudahkan pengembangan web. Laravel adalah kerangka kerja web PHP yang populer dan elegan, yang menyediakan fitur-fitur seperti routing, autentikasi, caching, dan banyak lagi.

    Persiapan Awal

    Pastikan Anda sudah memiliki PHP versi 8 atau lebih tinggi, Composer, dan server web yang berjalan di komputer Anda. Pastikan juga Anda sudah memiliki instalasi Laravel yang memadai, setidaknya versi 10.0 ke atas.

    Saya sangat-sangat menyarankan untuk menguji aplikasi Anda dengan teliti sebelum menggunakan Filament v3 dalam produksi.

    Membuat Proyek Laravel Baru

    Selanjutnya, buat proyek Laravel baru dengan menjalankan perintah berikut di terminal Anda, gantilah "nama-proyek" dengan nama yang Anda inginkan untuk proyek Anda:

    Terminal
    composer create-project laravel/laravel nama-proyek --prefer-dist
    

    Setelah itu, masuk ke direktori proyek Anda dengan menjalankan perintah:

    Terminal
    cd nama-proyek
    

    Instalasi Livewire V3

    Kemudian, install Livewire versi 3 dengan menjalankan perintah berikut:

    Terminal
    composer require livewire/livewire
    

    Instalasi Filament V3

    Tambahkan Filament ke proyek Anda dengan menjalankan perintah:

    Terminal
    composer require filament/filament:"^3.0-stable" -W
    

    Terakhir, publikasikan aset Filament dengan menjalankan perintah berikut di terminal Anda:

    Terminal
    php artisan filament:install --panels
    

    Setelah instalasi selesai, jalankan perintah berikut untuk menerbitkan aset Filament:

    Terminal
    php artisan filament:publish
    

    Filament memerlukan versi stack PHP 8.1+, Laravel v10.0+ dan Livewire v3.0+

    Konfigurasi

    Di direktori proyek Laravel, ada file bernama .env. Buka file ini. Temukan bagian yang berkaitan dengan database. Biasanya ada beberapa variabel yang perlu Anda atur, seperti DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD.

    Buka file .env di editor teks favorit Anda dan ubah nilai-nilai berikut sesuai dengan konfigurasi database Anda. Ubah variabel-variabel tersebut sesuai dengan informasi database yang telah Anda buat sebelumnya. Contohnya:

    .env
     DB_CONNECTION=mysql
     DB_HOST=127.0.0.1
     DB_PORT=3306
     DB_DATABASE=nama_database
     DB_USERNAME=nama_pengguna_database
     DB_PASSWORD=kata_sandi_database
    

    Menjalankan Migrasi

    Setelah mengkonfigurasi file .env, buka terminal atau command prompt di direktori proyek Anda. Jalankan perintah berikut untuk menjalankan migrasi dan membuat tabel-tabel yang diperlukan dalam database:

    Terminal
    php artisan migrate
    

    Jalankan migrasi database dengan menjalankan perintah

    Terminal
    php artisan migrate 
    

    di terminal Anda, yang akan membuat tabel-tabel bawaan Laravel di database Anda. Buat akun admin pertama Anda dengan menjalankan perintah

    Terminal
    php artisan filament:user
    

    di terminal Anda, dan ikuti petunjuknya untuk memasukkan email dan kata sandi Anda. Jalankan server pengembangan Laravel dengan menjalankan perintah

    Terminal
    php artisan serve
    

    di terminal Anda. Buka browser Anda dan kunjungi alamat http://localhost:8000/admin untuk melihat panel admin Filament. image

    Login menggunakan akun yang sudah anda buat sebelumnya maka akan tampil halaman dashboard seperti gambar di bawah ini

    image

    Tampilan CRUD dengan Filament UI

    Untuk membuat contoh CRUD (Create, Read, Update, Delete) dengan Filament, Anda perlu melakukan hal-hal berikut: Buat model Eloquent untuk entitas yang ingin Anda kelola di panel admin. Misalnya, jika Anda ingin membuat CRUD untuk artikel blog, Anda bisa membuat model Article dengan menjalankan perintah

    Terminal
    php artisan make:model Article -m
    

    di terminal Anda, yang juga akan membuat migrasi database untuk tabel articles.

    Edit migrasi database yang dibuat di langkah sebelumnya untuk menentukan kolom-kolom yang dibutuhkan untuk model Anda. Misalnya, jika model Article memiliki atribut title, content, dan author, Anda bisa menambahkan kode berikut ke metode up dari migrasi database:

    create_articles_table.php
    Schema::create('articles', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->string('author');
        $table->timestamps();
    });
    

    Jalankan migrasi database dengan menjalankan perintah

    Terminal
    php artisan migrate
    

    di terminal Anda, yang akan membuat tabel articles di database Anda.

    Buat sumber daya Filament untuk model Anda dengan menjalankan perintah

    Terminal
    php artisan make:filament-resource ArticleResource
    

    di terminal Anda, yang akan membuat kelas ArticleResource di direktori app/Filament/Resources.

    Ini akan membuat beberapa file di direktori app/Filament/Resources:

    +-- ArticleResource
    |   +-- Pages
    |   |   +-- CreateArticle.php
    |   |   +-- EditArticle.php
    |   |   +-- ListArticles.php
    

    Edit kelas ArticleResource yang dibuat di langkah sebelumnya untuk menentukan bagaimana model Anda ditampilkan dan dikelola di panel admin. Misalnya, jika Anda ingin menampilkan dan mengedit atribut title, content, dan author dari model Article, Anda bisa menambahkan kode berikut ke metode-metode yang sesuai dari kelas ArticleResource:

    ArticleResource.php
    <?php
    
    namespace App\Filament\Resources;
    
    use App\Filament\Resources\ArticleResource\Pages;
    use App\Filament\Resources\ArticleResource\RelationManagers;
    use App\Models\Article;
    use Filament\Forms;
    use Filament\Forms\Form;
    use Filament\Resources\Resource;
    use Filament\Tables;
    use Filament\Tables\Table;
    use Illuminate\Database\Eloquent\Builder;
    use Illuminate\Database\Eloquent\SoftDeletingScope;
    
    class ArticleResource extends Resource
    {
        protected static ?string $model = Article::class;
    
        protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
    
        public static function form(Form $form): Form
        {
            return $form
                ->schema([
                    Forms\Components\TextInput::make('title')
                        ->label('Judul')
                        ->required()
                        ->maxLength(255),
                        Forms\Components\TextInput::make('author')
                        ->label('Penulis')
                        ->required()
                        ->maxLength(255),
                    Forms\Components\Textarea::make('content')
                        ->label('Konten')
                        ->required(),
    
                ]);
        }
    
        public static function table(Table $table): Table
        {
            return $table
                ->columns([
                    Tables\Columns\TextColumn::make('title')->sortable()->searchable(),
                    Tables\Columns\TextColumn::make('author')->sortable()->searchable(),
                    Tables\Columns\TextColumn::make('content'),
                ])
                ->filters([
                    //
                ])
                ->actions([
                    Tables\Actions\EditAction::make(),
                ])
                ->bulkActions([
                    Tables\Actions\BulkActionGroup::make([
                        Tables\Actions\DeleteBulkAction::make(),
                    ]),
                ])
                ->emptyStateActions([
                    Tables\Actions\CreateAction::make(),
                ]);
        }
    
        public static function getRelations(): array
        {
            return [
                //
            ];
        }
    
        public static function getPages(): array
        {
            return [
                'index' => Pages\ListArticles::route('/'),
                'create' => Pages\CreateArticle::route('/create'),
                'edit' => Pages\EditArticle::route('/{record}/edit'),
            ];
        }
    }
    
    

    Mengizinkan Semua Model Tanpa Batasan di Laravel Untuk Filament

    Nah, jadi begini, dalam petunjuk singkat ini, kita akan membahas tentang sesuatu yang disebut "perlindungan masif" di Laravel. Tapi jangan khawatir, kita akan menjelaskannya dengan bahasa yang gampang dimengerti, khususnya buat kamu yang baru belajar.

    Jadi, kamu tahu nggak sih, Filament itu suatu bagian dalam Laravel yang membantu kita untuk mengatur data dalam model. Nah, agar Filament bisa bekerja lebih baik, kita perlu melepas "perlindungan" pada model-model kita. Jadi, model-model itu nggak akan terbatas dalam apa yang bisa diubah.

    Nah, buat kamu yang baru belajar, ini langkahnya:

    Buka file yang namanya AppServiceProvider.php. Biasanya bisa ditemukan di folder app/Providers.

    Di dalam file itu, kamu lihat ada baris kode yang seperti ini:

    AppServiceProvider.php
    use Illuminate\Database\Eloquent\Model;
    
    public function boot(): void
    {
        // Nah, di sini kamu tambahkan baris kode berikut:
        Model::unguard();
    }
    

    Nah, langkah itu akan membuat model-model di Laravel nggak lagi terbatas, jadi lebih fleksibel. Tapi ya, ingat juga, kamu tetap harus hati-hati saat ngubah data ya, jangan sembarangan.

    Jalankan Aplikasi Lagi dan Uji CRUD

    Jalankan kembali server development dengan perintah:

    Terminal
    php artisan serve
    

    Buka kembali browser Anda dan refresh halaman panel admin Filament. Anda seharusnya melihat menu Artikel di sidebar, yang akan membawa Anda ke halaman CRUD untuk model Article. Dan anda sudah dibuatkan CRUD dengan sangat mudah, untuk membuat yang lain anda dapat melakukan lengkah seperti yang sebelumnya.

    image

    Selamat, Anda telah berhasil membuat CRUD dengan Filament dan Laravel! Artikel ini telah memberikan panduan langkah demi langkah yang mudah dipahami untuk menginstal Laravel Filament dan Livewire v3, serta membuat operasi CRUD.

    Saya menyarankan Anda untuk menguji aplikasi Anda secara menyeluruh sebelum menggunakannya dalam lingkungan produksi. Dengan menggunakan filament ini, Anda dapat mengembangkan aplikasi web yang interaktif dan efisien dengan lebih mudah. Saya harap tutorial ini bermanfaat untuk Anda. Jika Anda ingin belajar lebih lanjut tentang Laravel anda bisa melihat video series di website ini.

    Jenriko Sinaga

    Saya selalu tertarik untuk menggali teknologi baru, dan apa yang paling saya nikmati adalah berbagi pengetahuan ini dengan orang lain.

    Go to Jenriko Sinaga profile
    Support me
    SaweriaGithub