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 bootstrap@latest 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:
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
