Що таке filament laravel і як ним користуватися

filament laravel — це «прискорений» фреймворк розробки, який надає кілька компонентів повного стеку.

Він призначений для оптимізації процесу розробки, полегшуючи створення елегантних програм.

Використовує стек TALL (Tailwind CSS, Alpine.js, Laravel і Livewire)

6 хвилин

філаментний ларавель це платформа для керування вмістом із прекрасною колекцією повних компонентів. The рамки забезпечує найкращий стартовий набір для наступного застосування laravel. Лише за кілька кроків ви можете створити гарний інтерфейс адміністратора, який генерує прості у використанні та легко масштабовані компоненти.

У цьому Підручник з laravel filament ми побачимо всі кроки для налаштування вашого проекту філаментний ларавель

Компоненти філаментний ларавель

Давайте подивимося, які компоненти він пропонує Laravel Filament:

• Конструктор панелей: створити панель адміністратора Laravel,для додатків, орієнтованих на клієнтів, платформ SaaS або будь-який інший додаток, який ви можете собі уявити. The Конструктор панелей спрощує процес створення потужних адміністративних інтерфейсів;
• Form Builder: Дозволяє легко будувати неординарні форми на основі Livewire з більш ніж 25 попередньо визначеними компонентами. Згенеровані форми складатимуться з простих полів введення;
• Конструктор таблиць: створює оптимізовані таблиці даних та інтерактивні на основі Livewire для будь-якої ситуації. Переглядайте дані в інтуїтивно зрозумілому форматі з сортуванням, фільтрацією та розбивкою на сторінки;
• повідомлення: ви можете використовувати управління сповіщення тримати користувачів в курсі, надсилаючи повідомлення в режимі реального часу за допомогою Livewire;
• дії: відкривайте інтерактивні режими та режими ковзання, щоб забезпечити безперебійну роботу користувача. The дії вони дозволяють вам підтримувати зацікавленість користувачів і бути в курсі вашої програми;
• Конструктор інформаційних списків: перегляд списку даних лише для читання про певну сутність. Він також використовується в інших пакетах Filament, таких як Panel Builder, для відображення ресурсів програми та менеджерів зв’язків, а також режимів дій. Вивчення функцій Infolist Builder неймовірно заощадить час як під час створення власних програм Livewire, так і під час використання інших пакетів Filament;
• Віджет: створюйте інформаційні панелі для своєї програми з графіками та статистикою в реальному часі. Віджети дозволяють створювати динамічні візуалізації для моніторингу та звітності;

Фундаментальні поняття

Laravel Filament містить основні концепції, які застосовуються до всіх пакетів:

• All-in: більше не потрібно багаторазово перебудовувати ті самі компоненти інтерфейсу користувача. Filament надає основні інструменти, готові до використання, заощаджуючи ваш час і зусилля.
• ВИСОКІ стеки: Нитка використовуйте стек TALL (Tailwind CSS, Alpine.js, Laravel і Livewire), щоб легко створювати динамічні, супроводжувані програми з повним стеком.

Встановлення філаментний ларавель

Потім переходимо до установки Laravel з Нитка. Однак перш ніж рухатися вперед, переконайтеся, що у вас є наступні вимоги для використання нитка V3.

PHP 8.1+
Laravel v10.0+
LiveWire v3.0+

крок 1: перша інсталяція Laravel у вашій системі, виконавши дану команду для встановлення останньої версії 11 Laravel.

composer create-project laravel/laravel filament-tutorial

Після завершення процесу встановлення оновіть файл .env з ім'ям база даних і виконайте міграцію за допомогою команди php artisan migrate

крок 2: Далі нам потрібно встановити Filament щоб створити наш абсолютно новий інтерфейс адміністратора, виконайте таку команду.

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

крок 3: тепер нам потрібно встановити генератор панелі Нитка, що дозволить створити та зареєструвати нового постачальника послуг Laravel називається AdminPanelProvider.

app/Providers/Filament/AdminPanelProvider.php

Панель нитка Laravel поставляється з попередньо встановленими пакетами, які вам не потрібно встановлювати окремо (Form Builder, Table Builder, Notifications, Actions, InfolistsІ Widgets packages).

php artisan filament:install --panels

крок 4: Тепер ми створимо нашого першого користувача за допомогою наступної команди. Вам буде запропоновано ввести своє ім’я, адресу електронної пошти та пароль, як показано нижче.

php artisan make:filament-user

Тепер ми можемо отримати доступ до створеного нами інтерфейсу адміністратора та створити програму.

php artisan make:filament-user

Name:
> bloginnovazione

Email address:
> bloginnovazione@gmail.com

Password:
>

Success! bloginnovazione@gmail.com may now log in at http://localhost/admin/login.

Щоб побачити центр адміністрування, запустіть програму php artisan serve, відкрийте програму у своєму браузері та введіть /admin після URL-адреси. Ви можете побачити розділ входу адміністратора, як показано на зображенні, і ввести свої облікові дані новоствореного користувача.

Після входу ви побачите панель адміністратора:

Тепер ви готові розпочати створення програми.

Проект продажу нерухомості з laravel filament

Нещодавно я розробив невеликий проект управління нерухомістю/будівельним майданчиком і відповідні кампанії з маркетингу та продажу нерухомості.

Якщо ви хочете глибше заглибитися в структуру проекту, ви можете натисніть це посилання, щоб отримати доступ до репозиторію на GitHub.

У проекті я створив деякі ресурси:

• ChannelResource: для управління каналами продажів;
• HouseResource: для управління властив
• MarketingResource:: для управління маркетинговою діяльністю
• SaleResource: для управління продажами
• WorkSite: для управління буд

Я створив навігаційне меню, згрупувавши елементи. Нижче я повідомляю про налаштування, зроблені в класі ChannelResource: пункт меню Channel групується в Marketing, з іконкою globe-alt, етикетка Canali і п'ятий за порядком пунктів меню навігації.

protected static ?string $model = Channel::class;
protected static ?string $navigationGroup = 'Marketing';
protected static ?string $navigationIcon = 'heroicon-o-globe-alt';
protected static ?string $navigationLabel = 'Canali';
protected static ?int $navigationSort = 5;

Форма

У Формі управління майном ми використовували різні типи інформації:

Select: дозволити вибір місця будівництва, частиною якого є майно, використовуючи переваги зв’язку «один до багатьох» worksite зазначено в model

Forms\Components\Select::make('worksite_id')
                    ->label('Cantiere')
                    ->relationship('worksite', 'name')
                    ->required(),

TextInput: дозволяє встановлювати код властивості, обов’язковий запис, мітку коду та максимальну довжину 15 символів

Forms\Components\TextInput::make('code')
                    ->label('Codice')
                    ->required()
                    ->maxLength(15),

Select: щоб можна було вибрати тип нерухомості між квартирою та віллою

Forms\Components\Select::make('type')
                    ->label('Tipologia')
                    ->options([
                        'appartamento' => 'Appartamento',
                        'villa' => 'Villa',
                    ]),

FileUpLoad: щоб дозволити завантаження зображення власності, де:

• preserveFilenames: зберегти оригінальну назву файлу
• imagePreviewHeight: для визначення розміру (висоти) попереднього перегляду зображення
• imageResizeTargetWidth e imageResizeTargetHeight: для перевизначення висоти та ширини завантаженого зображення

Forms\Components\FileUpload::make('attachment')
                    ->image()
                    ->preserveFilenames()
                    ->imageResizeMode('cover')
                    ->imageCropAspectRatio('16:9')
                    ->imageResizeTargetWidth('300')
                    ->imageResizeTargetHeight('150')
                    ->imagePreviewHeight('250')
                    ->loadingIndicatorPosition('left')
                    ->panelAspectRatio('2:1')
                    ->panelLayout('integrated')
                    ->removeUploadedFileButtonPosition('right')
                    ->uploadButtonPosition('left')
                    ->uploadProgressIndicatorPosition('left'),

RichEditor: дозволити завантажувати поле followup з панеллю інструментів для налаштування стилю та полегшення редагування

Forms\Components\RichEditor::make('followup')
                    ->label('Follow Up')
                    ->maxLength(255),

таблиця

У списку завантажених елементів ми використовували такі методи:

ImageColumn: для перегляду фотографії майна, що зберігається в полі attachment

Tables\Columns\ImageColumn::make('attachment')
                    ->label('Foto'),

TextColumn: відображення ціни нерухомості на продаж, що робить інформацію доступною для пошуку та замовлення

Tables\Columns\TextColumn::make('price')
                    ->label('Prezzo')
                    ->searchable()
                    ->sortable(),

У цьому Підручник з laravel filament ми бачили, як встановити filament у проекті Laravel, щоб дізнатися більше про керування дозволами в проекті Laravel, ви можете прочитати більше про нашу статтю Підручник з laravel filament длявстановлення ролі.