Mengganti Tailwindcss dengan Bootstrap di Jetstream Laravel

Mengganti Tailwindcss dengan Bootstrap di Jetstream Laravel

Admin
Admin・ 13 Oktober 2021
7 min read ・ 2552 views

Jetstream Bootstrap - Di artikel ini, saya akan share artikel yang akan membahas tentang cara menggunakan bootstrap untuk menggantikan tailwindcss di jetstream laravel. ✍ Jetstream merupakan scafolding package di laravel dengan fitur-fitur seperti login, register, email verification, two-factor authentication, session management, API via laravel sanctum, dan fitur team management. By default, Jetstream dirancang menggunakan tailwindcss dan menawarkan pilihan stack seperti livewire atau inertia.

Karena jetstream menggunakan tailwindcss, mungkin akan terasa menyulitkan bagi yang belum terlalu familiar dengan tailwindcss untuk menggunakan jetstream di laravel. Bagi kamu yang lebih familiar atau lebih suka menggunakan bootstrap daripada tailwindcss, kamu bisa menggunakan jetstrap atau jetstream bootstrap package di laravel project kamu.

Apa itu jetstrap ? secara garis besar, jetstrap merupakan package yang berfungsi untuk mengganti resources tailwindcss yang digenerate oleh laravel jetstream dengan bootstrap. Jetstrap hanya berfokus di sisi view jetstream package, sehingga ketika swap dilakukan, model, controller, component dan action dari laravel project kita masih 100% menggunakan dari jetstream package.

Untuk implementasi menggunakan Jetstrap atau jetstream bootstrap package di laravel 8, akan di bahas di bawah ini. 👇 ✍

Step 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new laravel-jetstream-bootstrap

//via Composer
composer create-project laravel/laravel laravel-jetstream-bootstrap

Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita coba untuk implementasi menggunakan bootstrap untuk menggantikan tailwindcss di jetstream laravel 8. Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-jetstream-bootstrap.

Step 2: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_jetstream_bootstrap
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk menyimpan data-data sample yang akan kita gunakan pada percobaan ini. Jika kamu menggunakan xampp sebagai local development, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel_jetstream_bootstrap. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Step 3: Install Jetstream

composer require laravel/jetstream

Sebelum dapat menggunakan jetstream pada project percobaan menggunakan bootstrap untuk menggantikan tailwindcss di jetstream laravel, kita harus terlebih dahulu install jetstream. Untuk itu silahkan jalankan perintah seperti di atas pada terminal untuk mulai install jetstream. 

php artisan jetstream:install livewire

Setelah menginstall jetstream package, kita dapat menjalankan perintah php artisan jetstream:install. Perintah tersebut menerima stack yang kita inginkan (livewire atau inertia). Selain itu, kita juga dapat menambahkan --teams untuk membuat fitur team management.

Pada project percobaan kali ini kita akan menggunakan jetstream dengan livewire. Untuk itu silahkan jalankan perintah seperti di atas untuk menginstall jetstream dengan livewire.

npm install && run dev

Selanjutnya, compile asset-asset yang akan digunakan dengan menjalankan perintah seperti di atas.

php artisan migrate

Dan kemudian jalankan perintah php artisan migrate, untuk memigrasi semua file migration ke database.

Step 4: Install Jetstrap (Jetstream Bootstrap)

composer require nascent-africa/jetstrap --dev

Kita sudah berhasil install jetstream di laravel project kita, tapi di jetstream tersebut masih menggunakan tailwindcss. Untuk itu, jika kita ingin menggunakan bootstrap di jetstream laravel, kita bisa menggunakan jetstrap (jetstream bootstrap) package. Menginstall jetstrap bisa menggunakan perintah composer seperti di atas.

php artisan jetstrap:swap livewire

Kemudian jalankan perintah jetstrap:swap seperti di atas, untuk mempublish dan mengganti tailwindcss dengan bootstrap.

npm install && npm run dev

Setelah menginstall jetstrap dan mengganti resources jetstream, lanjutkan dengan menjalankan perintah seperti di atas.

Step 5: Configuration & Testing

Setelah sukses menginstall jetstrap dan berhasil menjalankan perintah npm install && npm run dev, sekarang silahkan coba menjalankan laravel project kalian dengan perintah php artisan serve. Lalu buka laravel project pada browser, silahkan coba fitur-fitur jetstream seperti register, login, dan lain-lain. Tampilan jetstream seperti tidak ada bedanya dengan jetstream asli yang menggunakan tailwindcss. Tapi jika kalian coba view page source, lalu buka file app.css, hasilnya jetstream yang sekarang sudah menggunakan bootstrap versi 5.

Paginator

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

Jika kamu menggunakan pagination, mungkin nanti tampilannya akan berantakan. Jika seperti itu, solusinya buka file di App/Providers/AppServiceProvider.php lalu tambahkan trait use Illuminate\Pagination\Paginator; dan tambahkan Paginator::useBootstrap(); di dalam function boot (seperti kode di atas).

Presets

Tidak suka dengan tampilan yang sekarang ? mungkin kamu mau tampilan dashboard jetstream menggunakan template seperti Core UI atau Admin LTE ? Jika iya, kamu bisa menggunakan preset Core UI atau Admin LTE seperti di bawah ini.

Core UI

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useCoreUi3();
    }
} 

Jika kamu ingin menggukan template Core UI di jetstrap, kamu bisa menambahkan trait use NascentAfrica\Jetstrap\JetstrapFacade; di file AppServiceProvider.php dan tambahkan juga JetstrapFacade::useCoreUi3(); di dalam function boot.

php artisan jetstrap:swap livewire
npm run dev

Kemudian, jalankan lagi perintah php artisan jetstrap:swap livewire dan dilanjutkan dengan menjalankan perintah npm run dev.

Laravel jetstream bootstrap Core UI

Dan hasilnya, dashboard jetstream/jetstrap kita sudah berhasil terpasang template CoreUI seperti gambar di atas. Mantap kan ? 😆

Admin LTE

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useAdminLte3();
    }
} 

Tidak suka template Core UI ? kamu bisa menggunakan opsi preset yang kedua yaitu template Admin LTE. Caranya cukup menambahkan JetstrapFacade::useAdminLte3(); di dalam function boot (AppServiceProvider.php) seperti kode di atas.

php artisan jetstrap:swap livewire
npm run dev

Setiap ada perubahan preset, pastikan untuk menjalankan lagi perintah php artisan jetstrap:swap dan npm run dev.

Laravel jetstream bootstrap Admin LTE

Sekarang jika kita refresh, tampilan halaman dashboard jetstream atau jetstrap sudah berganti menggunakan template AdminLTE seperti gambar di atas.

Kesimpulan

Sampai di akhir artikel ini, kita telah berhasil mengganti tailwindcss dengan bootstrap di jetstream laravel. Selain itu, dengan jetstrap package, kita bisa menggunakan preset Core UI atau Admin LTE. Dengan adanya jetstrap (jetstream bootstrap) package ini, tentunya sangat membantu bagi kita yang terbiasa menggunakan bootstrap dan ingin menggunakan jetstream di laravel. 

 

Sekian artikel tentang menggunakan bootstrap di jetstream laravel kali ini, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. 👋 🚀

Tinggalkan Komentar
Loading Comments