FilamentPHP is a next generation and full stack package (TALL), it’s really great and easy to use for your admin panel and CMS. Laravel backpack In 2016, when I was a SOHO, I used Backpack as my main stack to build projects for my customers. It’s really flexible and customizable if you understand the author’s design philosophy. I could add any packages and functions I wanted into these projects created with Laravel Backpack....
DigitalOcean object spaces 是兼容 AWS S3 的 APIs 服務，並且提供快速配置跟 CDN，收費方面也是較為便宜，主要是可以控制每月的預算花費，而且在設定上相比於 S3 簡單許多，以下是如何將 Spaces 兼容到 Laravel 使用的方法。 DigitalOcean 前置配置 建立 Personal Access Token 建立 Spaces 啟動 CDN 進入 Spaces 頁面，配置 CORS allowed headers Laravel 配置 .env 新建 keys DO_ACCESS_KEY_ID= DO_SECRET_ACCESS_KEY= DO_DEFAULT_REGION=your-bucket-region DO_BUCKET=your-bucket-name DO_USE_PATH_STYLE_ENDPOINT=false DO_URL="https://${DO_BUCKET}.${DO_DEFAULT_REGION}.cdn.digitaloceanspaces.com" DO_ENDPOINT=https://${DO_DEFAULT_REGION}.digitaloceanspaces.com config/filesystems.php 'spaces' => [ 'driver' => 's3', 'key' => env('DO_ACCESS_KEY_ID'), 'secret' => env('DO_SECRET_ACCESS_KEY'), 'region' => env('DO_DEFAULT_REGION'), 'bucket' => env('DO_BUCKET'), 'url' => env('DO_URL'), 'endpoint' => env('DO_ENDPOINT'), 'use_path_style_endpoint' => env('DO_USE_PATH_STYLE_ENDPOINT', false), 'throw' => false, 'visibility' => 'public', ], 這樣就可以用原本方式使用，由於兼容 S3 APIs 所以相當容易兼容進去。...
Laravel Folio 是提供便捷的頁面驅動路由套件，本文將介紹如何使用 Laravel Folio 建立 Blog 服務。 設計 作為一個基礎的 Blog 系統，我們會有以下幾個部分： 建立頁面 create page 清單 index page 顯示 show page 編輯 edit page 與之對應的，會有幾個動作路由： store api update api destroy api 步驟 官方文檔 安裝組件 $ composer require laravel/folio $ php artisan folio:install Model 配置 這邊就簡單帶過，不是這篇文章的重點 $ php artisan make:model Post --all Relation with user (belongs, has many) factory seeder 建立 create page $ php artisan make:folio "posts/create" 生成 resources/views/pages/posts/create.blade.php <?php auth()->loginUsingId(1); // 登入機制不在這次討論範圍，直接進行登入 use function Laravel\Folio\{name, middleware}; name('posts....
Global Component Configuration 之後是接續 Macros 跟 review base component 由於之前已經有針對 Macro 深入理解過，這邊就直接進入構建自定義欄位。 要把 https://iro.js.org/ 整合到自訂欄位內： 創建自訂欄位 $ php artisan make:form-field ColorPicker //創建 demo form $ php artisan make:livewire-form DemoForm 開啟 color-picker.blade.php 將 iro.js CDN 掛入並且 new instance： <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script> <x-dynamic-component :component="$getFieldWrapperView()" :field="$field" > // alpine.js x-* <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }" x-init=" const colorPicker = new iro.ColorPicker($refs.picker); "> <div x-ref="picker"></div> // 配置 ref </div> </x-dynamic-component> 添加忽略 wire:ignore 防止 livewire refresh 頁面...
laracast 這篇添加可以加入 max length 的方法跟全局組件設定。 Max Length 這個設計跟原先添加設計方法大致相同： //TextInput protected int | \Closure | null $maxLength = null; public function maxLength(int | \Closure | null $length): self { $this->maxLength = $length; return $this; } public function getMaxLength(): ?int { return $this->evaluate($this->maxLength); } //text-input.blade <input type="text" maxlength="{{ $getMaxLength() }}" wire:model.live="{{ $getName() }}"/> 組件 TestForm 新增兩個來進行驗證： $nameInput = TextInput::make('name') ->maxLength(10) ->livewire($this); $emailInput = TextInput::make('email') ->maxLength(20) ->livewire($this); return view('livewire.test-form', [ 'nameInput' => $nameInput, 'emailInput' => $emailInput, ]); <div> {{ $nameInput }} {{ $emailInput }} </div> 添加 global configuration 將全局設定傳入closure 依序添加至元件內：...
接著上篇，Laracasts，這邊將會展示 livewire 自定義組件和傳遞參數。 生成 livewire parent component $ php artisan livewire:layout 生成主要 component $ php artisan make:livewire TestForm 將原本在 route 做的組件注入遷移至 TestForm 當中，由 Form 進行生成： Route::get('/', TestForm::class); //App\Livewire\TestForm.php class TestForm extends Component { public $email; // 放置變化結果 public function render() { $input = TextInput::make('email') ->label('Email Address'); return view('livewire.test-form', [ 'input' => $input ]); } } 到目前為止會是跟原本實作結果一致，接下來開始進行使 Label 具有 closure 傳遞調整： $input = TextInput::make('email') ->label(function () { return Str::random(); }); 到 TextInput field 進行 allow property：...