~ We are changing the world with technology. ~

Matt Mullenweg

Convert Jetstream From Tailwind to Bootstrap

Convert Jetstream From Tailwind to Bootstrap

460 Dilihat

Jetstream memperkenalkan diri dengan sebagai starter kit dengan design yang cukup menarik sebagai 'permulaan' dalam mengembang aplikasi menggunakan Laravel. Jetstream menyediakan beberapa fitur, diantaranya: login, register, email verification, two-factor authentication, session management, API via Laravel Sanctum dan team management.

Jetstream di-design menggunakan Tailwind CSS dan sebagai pilih dari Livewire atau Inertia Scaffolding. Tailwind CSS masih kurang familiar pada beberapa developer yang sudah terbiasa dan merasa nyaman dengan Bootstrap, sehingga fokus utama pembahasan ini adalah bagaimana cara mengganti Tailwind dengan Bootstrap.

Baca Juga: Image Watermark in Laravel 8

Install Laravel & Jetstream

Agar lebih mudah memahaminya, kita gunakan Laravel fresh install, dari command line, install Laravel dengan command

composer create-project laravel/laravel jetstrap

Kemudian install Jetstream dengan command

composer require laravel/jetstream

Jika sudah, kita akan menggunakan Livewire sebagai scaffolding-nya.

php artisan jetstream:install livewire --teams

Note: Hapus flag --teams apabila tidak ingin meng-install fitur team management.

Compile CSS dan Javascriptnya dengan command

npm install && npm run dev

Langkah terakhir, modifikasi file .env dan sesuaikan informasi database Anda. Kemudian generate migration

php artisan migrate

Convert Jetstream From Tailwind to Bootstrap

Baca Juga: CRUD Laravel 8 & InertiaJS

Convert Jetstream From Tailwind to Bootstrap

Adapun package yang akan kita gunakan untuk menyelesaikan tugas ini adalah Jetstrap yang dibuat oleh nascent-africa. Tahap pertama, install package tersebut dengan command

composer require nascent-africa/jetstrap --dev

Kemudian jalankan command dari jetstream untuk menerapkan konfigurasinya

php artisan jetstrap:swap livewire --teams

Note: Hapus flag --teams apabila Anda tidak ingin meng-install fitur team management.

Sebagai penutup dari proses konfigurasi ini adalah dengan men-generate CSS & Javascript yang tersedia

npm install && npm run dev

Jetstream telah menggunakan Bootstrap sebagai framework CSS-nya, jika kita lihat pada saat inspect element, maka class yang digunakan sudah sangat familiar tentunya dengan class Bootstrap.

Convert Jetstream From Tailwind to Bootstrap

Sebagai tambahan, buka file AppServiceProvider.php dan tambahkan code berikut di dalam method boot()

Paginator::useBootstrap();

Catatan: Fungsi di atas adalah untuk menerapakan class Bootstrap pada pagination.

Jangan lupa tambahkan use statement

use Illuminate\Pagination\Paginator;

 

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Import With Relationships Using Laravel Excel Laravel

Import With Relationships Using Laravel...

Migrasi aplikasi ke dalam sistem yang baru, terkadang ada banyak perbedaan yang cukup signifikan, salah satu diantaranya adalah struktur database antara sistem yang lama dengan sistem yang baru. Berik...

Image Watermark in Laravel 8 Laravel

Image Watermark in Laravel 8

Watermark menjadi salah satu cara untuk mengantisipasi penggunaan gambar tanpa izin pemiliknya dimana hak atas gambar tersebut harus mendapatkan izin yang bersangkutan. Ada beragam kasus yang sering m...

CRUD Laravel 8 dan InertiaJs Laravel

CRUD Laravel 8 dan InertiaJs

Jika Laravel 8 sudah sangat populer dengan sequelnya hingga versi ke-8, lalu InertiaJs itu apa?. InertiaJs adalah sebuah teknik yang berbeda dalam membuat aplikasi SPA atau Single Page Application tan...

Komentar