Membina Panel Pentadbir Teguh dengan Filamen dan Laravel: Panduan Langkah demi Langkah

Laravel ialah rangka kerja PHP yang berkuasa yang menyediakan asas kukuh untuk membangunkan aplikasi web. Filamen ialah panel pentadbir sumber terbuka yang elegan dan pembina borang untuk Laravel yang memudahkan penciptaan antara muka pentadbir. Panduan ini akan membimbing anda membina panel pentadbir yang mantap menggunakan versi terkini Filamen dan Laravel.

Pemula SaaS Laravel - Mulakan Saas anda yang seterusnya dalam sehari bukan minggu
Mulakan projek Laravel Saas anda yang seterusnya hanya dalam sehari, bukan minggu! Dengan ciri binaan yang diperlukan setiap saas
www.laravelsaas.store

Prasyarat
Sebelum kami mula, pastikan anda telah memasang yang berikut pada mesin pembangunan anda:

PHP >= 8.0
Komposer
Node.js dan NPM
MySQL atau mana-mana pangkalan data lain yang disokong oleh Laravel

Langkah 1: Menyediakan Projek Laravel Baharu

Pertama, buat projek Laravel baharu menggunakan Komposer:

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

Seterusnya, sediakan pembolehubah persekitaran anda. Namakan semula fail .env.example kepada .env dan kemas kini konfigurasi pangkalan data dengan kelayakan anda:

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

Jalankan arahan berikut untuk menjana kunci aplikasi dan pindahkan jadual Laravel lalai:

php artisan key:generate
php artisan migrate

Langkah 2: Memasang Filamen

Untuk memasang Filamen, gunakan Komposer:

composer require filament/filament

Seterusnya, terbitkan aset dan konfigurasi Filamen:

php artisan filament:install

Langkah 3: Menyediakan Pengesahan

Filamen memerlukan pengesahan untuk mengurus akses kepada panel pentadbir. Laravel menyediakan perancah pengesahan terbina dalam. Mari gunakan Laravel Breeze untuk kesederhanaan:

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

Ikuti gesaan untuk memilih pilihan bahagian hadapan pilihan anda (Blade, Vue, React). Untuk contoh ini, kami akan menggunakan Blade:

php artisan migrate
npm install
npm run dev

Pastikan anda mempunyai pengguna untuk log masuk. Anda boleh menggunakan Laravel Tinker untuk mencipta satu:

php artisan tinker

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

Langkah 4: Mengkonfigurasi Filamen

Kemas kini model Pengguna untuk melaksanakan kontrak Filament HasFilamentRoles jika anda menggunakan peranan atau kebenaran. Buat masa ini, kami akan memastikan mana-mana pengguna yang disahkan boleh mengakses Filamen.

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

Langkah 5: Mencipta Sumber

Sumber filamen ialah model Eloquent dengan antara muka CRUD. Mari cipta sumber untuk mengurus model Post.

Jana model, migrasi dan kilang:

php artisan make:model Post -mf

Tentukan medan dalam fail migrasi:

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

Jalankan migrasi:

php artisan migrate

Seterusnya, jana sumber Filamen:

php artisan make:filament-resource Post

Arahan ini mencipta fail yang diperlukan untuk sumber tersebut. Buka app/Filament/Resources/PostResource.php dan tentukan medan sumber:

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

Langkah 6: Menambah Navigasi

Tambahkan sumber pada bar sisi Filamen. Buka app/Providers/FilamentServiceProvider.php dan daftarkan sumber:

use App\Filament\Resources\PostResource;

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

Langkah 7: Menyesuaikan Filamen

Filamen sangat boleh disesuaikan. Anda boleh menukar tema, komponen dan banyak lagi. Contohnya, untuk menyesuaikan warna utama, kemas kini fail config/filament.php:

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

Anda juga boleh membuat halaman tersuai, widget dan komponen borang dengan mengikuti dokumentasi: Dokumentasi Filamen.

Pemula SaaS Laravel - Mulakan Saas anda yang seterusnya dalam sehari bukan minggu
Mulakan projek Laravel Saas anda yang seterusnya hanya dalam sehari, bukan minggu! Dengan ciri binaan yang diperlukan setiap saas
www.laravelsaas.store

Kesimpulan

Dalam panduan ini, kami telah melalui penyediaan projek Laravel baharu, memasang Filamen, menyediakan pengesahan, mencipta sumber dan menyesuaikan panel pentadbir Filamen. Ini sepatutnya memberi anda asas yang kukuh untuk membina panel pentadbir yang teguh menggunakan Filamen dan Laravel. Untuk ciri dan penyesuaian yang lebih lanjut, rujuk dokumentasi rasmi dan terokai keupayaan Filamen.

Selamat mengekod!

Atas ialah kandungan terperinci Membina Panel Pentadbir Teguh dengan Filamen dan Laravel: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!