Belajar Laravel Folio

¶Perkenalan

Dengan Laravel Folio, Anda dapat dengan mudah memetakan route dari file atau folder yang mirip dengan sistem routing berbasis file dalam framework seperti Next.js atau Nuxt.js.

¶Install Laravel Folio Beta

Pada saat saya memperbarui artikel ini yaitu 26 Juli 2023, Laravel telah resmi merilis brand new package mereka yaitu "laravel folio", dan ini masih versi "1.0@beta". Yang mana itu artinya, package ini tentu masih dalam working in progress, namun sudah bisa di pakai untuk versi beta yang ini.

Folio ini adalah package, jadi pastikan Anda sudah melakukan instalasi laravel.

composer require laravel/folio

Setelah itu, silakan jalankan perintah install untuk mendaftarkan dan menyalin "FolioServiceProvider" ke dalam aplikasi laravel kita.

php artisan folio:install

¶Bagaimana cara kerjanya

Setelah Anda memasang Folio ke dalam aplikasi Anda, Anda dapat membuat halaman baru dengan perintah artisan berikut:

php artisan make:folio index

Dengan perintah di atas, maka kita akan dibuatkan 1 file dengan nama index.blade.php tepat di dalam folder pages.

Berikut adalah strukturnya:

resources
└── views
   └── pages
      └── index.blade.php

Dengan begitu, apapun yang kita isi tepat di dalam index.blade.php akan menjadi halaman utama dari website kita.

¶Wildcard

Pada saat kita menggunakan route, tentu kita sudah familiar dengan yang namanya wildcard, dimana kita bisa mengakses spesipik enpoint entah itu users dengan id=1 atau mungkin articles dengan slug=txe.

¶Tradisional Routing

Tentu ini dapat dengan mudah menggunakan route seperti:

Route::get('users/{user}', UserController::class);

Atau ketika Anda ingin mengakses key yang bukan id seperti misalnya slug dari artikel, atau bisa jadi username dari seorang user.

Route::get('articles/{article:slug}', [ArticleController::class, 'show']);

¶Default Folio

Dengan folio itu hal itu juga bisa dengan membuat prefix nama file nya dengan di wrap ke dalam brackets seperti:[]. Jadi structurnya misalnya seperti:

resources
└── views
   └── pages
      ├── articles
      │  ├── [id].blade.php
      │  └── index.blade.php
      ├── index.blade.php
      └── users
         └── [id].blade.php

Maka dengan begitu, kita bisa mengunjungi halamannya dengan id dari setiap model yang kita punya seperti misalnya user: /users/2 atau artikel: /articles/5.

¶Model Binding

Muncul pertanyaan pastinya. Bagaimana ketika kita ingin target slug dari artikel, karena sangat tidak masuk akal ketika kita mengunjungi artikel dari id nya. Dengan itu, kita bisa menggunakan yang namanya model binding. Namun tetap dengan cara folio pastinya.

Kita tetap akan menggunakan teknik yang sama yaitu menggunakan brackets, namun kali ini dengan nama model nya. Ketika misalnya kita ingin mengidentifikasi user dari username dan artikel dari slug, maka struktur folder nya bisa dengan seperti:

resources
└── views
   └── pages
      ├── articles
      │  ├── [Article:slug].blade.php
      │  └── index.blade.php
      ├── index.blade.php
      └── users
         └── [User:username].blade.php

Dengan begitu, maka folio akan otomatis menganggap bahwa kita ingin menampilkan seoarang user atau artikel dari key yang kita berikan.

¶Blade Template

Karena kita sudah bisa mengakses model nya, maka tentu kita sudah bisa memanggil apapun field yang terkait dari model tersebut:

Hello, {{ $user->name }}.

¶Middleware

Coba bayangkan Anda sedang membangun sebuah blog yang mana setiap artikel pastinya mempunyai penulis masing-masing. Dan pastinya kita tentu tidak mengizinkan orang lain mengedit artikel kita sendiri. Kalau kita balik ke cara yang biasa yaitu menggunakan controller, tentu kita dapat dengan mudah membuat cara seperti:

Gate::authorize('update', $article);

Jika dengan folio, ini tentu berbeda.

Seandainya, Anda mempunyai policy untuk artikel, yang kurang lebih seperti ini:

class ArticlePolicy
{
    public function update(User $user, Article $article): bool
    {
        return $user->id === $article->user_id;
    }
}

Karena kita sedang ingin mengedit, tentu struktur folder kita sudah seperti:

resources/views/pages/articles
├── [slug].blade.php
├── edit
│  └── [id].blade.php
└── index.blade.php

Tepat di dalam articles/edit/[id].blade.php, kita bisa langsung membuat semaca middleware yang itu bisa kita letakkan directly di file blade nya seperti:

<?php  
use function Laravel\Folio\{middleware};
middleware(['can:update,article']);
?>

<x-layout>
    <!-- Edit page -->
</x-layout>

Dengan begitu, maka orang yang bisa mengunjungi halaman ini hanyalah penulisnya. Orang lain yang bukan penulisnya akan mendapatkan halaman Unauthorized | 403 .

¶Multiple wildcard

Keadaan ini memang jarang terjadi, namun hal ini bisa juga kita lakukan ketika memang dibutuhkan. Perhatikan struktur folder dibawah:

resources/views/pages/users
├── [...ids].blade.php
└── [username].blade.php

Perhatikan tepat pada bagian [...ids], ketika kita buat hal semacam itu, maka kita bisa mengunjunginya di browser dengan link: /users/1/2/3/4/5/6 sebagai contoh. Dengan begitu, kemudian kita akan bisa melakukan loop dari ids yang kita dapat.

<x-layout>
    The hell ids: {{ implode(', ', $ids) }}
</x-layout>

¶List all routes

Jika kita ingin melihat semua daftar file yang termasuk dalam folio routes. Mudah dengan menjalankan perintah berikut:

php artisan folio:list

¶Kesimpulan

Dengan menggunakan Laravel Folio, kita bisa membuat route di aplikasi kita dengan menambahkan file atau folder di dalam direktori views/pages.

Laravel Folio dirilis hari ini, walaupun masih versi beta namun sudah bisa langsung dipakai. Anda bisa langsung lihat semua tentang folio di sini.

Semoga artikel ini bermanfaat dan sampai jumpa di artikel selanjutnya.