Laravel 9 - Bootstrap 5

Menggunakan Bootstrap 5 di Laravel 9

Semenjak versi 8, laravel sudah meninggalkan bootstrap dan mulai beralih ke Tailwind. Sama dengan bootstrap, tailwind juga merupakan sebuah framework untuk user interface website atau aplikasi berbasis web. Untuk seorang yang terbiasa menggunakan bootstrap, mempelajari tailwind memerlukan tambahan sumber daya untuk bisa digunakan dalam aplikasi yang akan dan sedang dikembangkan. Untuk itu saya lebih memilih kembali menggunakan bootstrap pada framework laravel yang saya gunakan.

Mulai versi 8, laravel memang mulai memperkenalkan jetstream, yang menggunakan tailwind css untuk membuat scaffolding dengan memberikan pilihan livewire atau inertia. Ini berarti menggantikan scaffolding bootstrap, vue atau react yang tersedia pada versi sebelumnya.

Sebelum memulai, kali ini saya environment yang saya gunakan adalah di operation system windows. Kali ini saya menggunakan laragon sebagai emulator PHP untuk dijalankan di local komputer. Sebelumnya saya juga pernah memuat tulisan bagaimana menjalankan laravel di enviromnet windows. Walaupun di tulisan tersebut masih menggunakan laravel 5, tetapi secara umum metodenya masih sama hanya versi PHP dan laravel nya saja yang berubah.

Persiapan

Sekedar informasi, pada laravel 9 versi PHP minimal yang dibutuhkan adalah versi 8. Jadi yang masih menggunakan PHP 7, silakan upgrade terlebih dahulu sebelum mulai mempraktekkan yang ada di tulisan ini. Selain itu, saya juga berasumsi environment yang akan digunakan sudah di setup dan sesuai dengan ketentuan minimal yang dibutuhkan oleh laravel 9.

Membuat project laravel baru

Kita akan menginstall project baru dari laravel menggunakan composer. Perintah yang dijalankan adalah:

composer create-project laravel/laravel laravel-9-bootstrap-5

Tunggu sampai selesai prosesnya lalu masuk ke direktori yang barusan dibuat. kemudian install paket Laravel UI

cd laravel-9-bootstrap-5
composer require laravel/ui

Setelah itu kita akan membuat sebuah scaffolding autentikasi sederhana bawaan laravel dengan dasar framework bootstrap 4.

php artisan ui bootstrap --auth

Perintah diatas akan memasang Bootstrap versi 4.6 dan men-generate file yang dibutuhkan untuk autentikasi.

Install Bootstrap 5

Sekarang, mari kita install Bootstrap 5, caranya dengan menjalankan perintah:

npm install [email protected] bootstrap-icons @popperjs/core --save-dev

Dengan perintah tersebut, kita akan mengupdate Bootstrap 4.6.x ke versi 5.x dan menambahkan Bootstrap Icons dan popper.js versi 2.

Harap diingat, jangan menghapus popper.js version 1!

Import Bootstrap Icons

Import bootstrap icons ke dalam framework kita. Edit file resources\sass\app.scss kemudian tambahkan baris berikut:

@import '~bootstrap-icons/font/bootstrap-icons';

sehingga dalam file menjadi seperti di bawah ini:

Import bootstrap icons

Konfigurasi file .env

Konfigurasi .env untuk memuat informasi koneksi database dan mengaktifkan fitur autentikasi. Rubah bagian berikut dan sesuaikan dengan parameter database.

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

Compile file

Kita akan compile file blade.

npm install
npm run dev

Catatan:
Kalau perintah npm run dev menampilkan errors karena dependensi, bisa ulangi perintah npm run dev

Terakhir, kita akan buat tabel di database

php artisan migrate

Kalau sudah tisak ada masalah, sekarang kita sudah bisa melanjutkan pembuatan aplikasi kita.

Terima kasih, semoga bermanfaat…

Repository Github: https://github.com/KaredokNetwork/laravel-9-bootstrap-5

Welly Rosadi

Ayah dari satu orang putra dan dua orang putri, seorang biasa-biasa saja yang menyukai Ikan Hias, dan Teknologi. Lahir di Jakarta, besar di Tangerang, dan menuntaskan pendidikan di Bandarlampung. Saat ini sedang belajar mengembangkan perusahaan end-to-end technology enabler.

Mari diskusi

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.