Laravel baru saja mengeluarkan versi terbarunya, yaitu versi 12. Dimana pada versi ini Laravel mengeluarkan Starter Kit sehingga Laravel bisa digunakan bersama 3 framework front-end yang popular, yaitu React, Vue dan Livewire.

Sekarang pertanyaannya, untuk bagian CSS-nya, apakah Laravel masih bisa menggunakan Bootstrap? Secara Bootstrap masih cukup popular karena menyediakan cara yang sederhana untuk membangun website yang bersifat reponsive dan tetap nyaman untuk digunakan pada smartphone. Proses coding pun lebih cepat karena Bootstrap menyediakan komponen yang siap untuk dipakai, sehingga kita bisa lebih banyak fokus ke bagian back-end atau business process-nya.

Nah, pada video ini, saya akan memperlihatkan cara meng-install Laravel versi 12. Yang kemudian kita integrasikan dengan Bootstrap versi 5. Jadinya situs yang kita bangun bisa menggunakan Bootstrap. Dan kita juga masih bisa melakukan customize terhadap Bootstrap melalui source code-nya.

Sebelum kita melanjutkan, kita bahas dahulu apa saja yang kita butuhkan. Untuk meng-install Laravel versi 12, kita memerlukan PHP minimal versi 8,2. Jadi pastikan dahulu versi PHP yang kita gunakan. Kita bisa memeriksa melalui command prompt dengan perintah php -ver. Selain PHP, kita juga perlu menggunakan tools composer dan NPM.

Untuk membuat project baru Laravel, kita bisa menggunakan command prompt. Pertama kita buka dahulu folder yang akan kita gunakan untuk menyimpan proyek. Pada komputer saya, kebetulan foldernya berada di drive d, dengan nama folder Laravel. Kemudian kita bisa ketik perintah:

  composer create-project laravel/laravel test-bootstrap

Perintah ini akan menginstall proyek baru laravel ke folder test-bootstrap. Berhubung kita tidak menyebutkan versi laravel yang ingin digunakan, maka composer secara otomatis mengambil versi terbaru. Pada saat video ini dibuat, versi terbaru laravel adalah 12. Kita tunggu proses unduh-nya yang cukup lama, karena hasil akhir proyek kita akan berukuran di sekitar 50 megabyte.

Setelah proses unduh selesai, kita bisa masuk ke folder test-bootstrap. Di dalamnya, kita bisa membuat Visual Studio Code dengan perintah code. Enaknya perintah ini adalah visual studio code langsung membuka workspace baru dan memasukkan folder test-bootstrap ke dalamnya. Jadi pada bagian kiri atau Explorer, kita bisa langsung melihat semua source code Laravel. Kita bisa tutup command prompt-nya.

Kita buka terminal dan pertama kita test dahulu apakah laravel telah berhasil di-install. Kita jalankan perintah php artisan serve. Perhatikan tulisannya bahwa server dijalankan di 127.0.0.1 dengan port 8000. Untuk mengakses laravel, kita bisa buka browser dan mengetikkan alamat yang sama yaitu 127.0.0.1:8000. Kalau browser menampilkan Laravel seperti ini, artinya kita sudah berhasil meng-install Laravel.

Kita lanjutkan ke tahap berikutnya yaitu instalasi Bootstrap. Kita bisa buka terminal baru dan kita jalankan perintah:

  npm i -D bootstrap @popperjs/core sass

Disini kita melakukan instalasi Bootstrap lengkap dengan popperjs dan sass sebagai dependency-nya. Dan sekali lagi proses instalasinya cukup lama ya. Jadi ditunggu saja. Setelah proses instalasi selesai, maka pada source code laravel ditambahkan folder node_modules. Total ukuran source code juga bertambah sebanyak 60 megabytes, sehingga ukuran total proyek menjadi sekitar 110 megabytes.

Untuk memeriksa hasil instalasi, kita bisa buka file package.json. Perhatikan bagian devDependencies. Seharusnya sudah ada tambahan 3 buah module, yaitu popperjs, bootstrap, dan sass.

Selanjutnya kita mesti mengubah konfigurasi proyek, agar bagian front-end-nya bisa menjalankan Bootstrap. Buka folder resources. Tambahkan folder baru sass. Buat file baru dengan nama app.scss. Di dalamnya kita ketikkan kode:

  @import 'bootstrap/scss/bootstrap';

Setelah itu buka file app.js. Tambahkan kode baru:

  import * as bootstrap from 'bootstrap';

Lalu buka folder views dan file welcome.blade.php. Hapus semua kode dari dalam file. Kemudian kita ketik html:5 dan tekan tombol Enter. Kita akan mendapatkan boilerplate HTML versi 5.

Di dalam tag head, kita tambahkan kode untuk membaca resources yang kita ubah tadi.

  @vite(['resources/sass/app.scss', 'resources/js/app.js'])

Selanjutnya kita ambil contoh dari script Bootstrap. Kita buka halaman dokumentasi. Kita cari bagian alert. Kita copy kodenya. Kemudian kita paste ke dalam tag body.

Kita coba refresh browser. Nah, kalau kita menemukan error vite seperti ini, artinya kita belum menjalankan vite ya. Kita kembali ke visual studio code. Kita buka terminal. Berhubung kita masih dalam proses pengembangan, dimana kita masih perlu mengubah resource yang digunakan oleh vite, maka lebih baik kita jalankan perintah:

  npm run dev

Kita refresh kembali browser. Apabila semua alert Bootstrap sudah tampil seperti di layar, artinya kita sudah berhasil melakukan instalasi Laravel, dan sudah bisa menggunakan Bootstrap di dalam proyek kita.

Kelebihan dari instalasi seperti ini adalah kita bisa melakukan kostumisasi terhadap Bootstrap yang digunakan di dalam proyek kita. Sebagai contoh, secara default warna primary yang digunakan oleh Bootstrap adalah biru seperti ini. Kita bisa mengubahnya menjadi warna primary yang digunakan oleh situs kita. Sebagai contoh, misalkan kita ingin menggunakan warna dasar hijau.

Kita bisa mengubahnya dari source code di folder node_modules, bootstrap, scss, dengan nama file _variables.scss. Di dalamnya kita bisa cari variable $primary. Disini kita bisa mengganti nilainya dengan kode hexadesimal warna yang hendak kita gunakan. Sebagai contoh warna hijau #00FF00.

Sebelum kita ke browser, kita mesti restart dahulu npm. Tekan Ctrl+C untuk membatalkan perintah npm. Lalu kita jalankan ulang npm run dev. Kita refresh browser. Sekarang situs kita menggunakan warna hijau sebagai warna utama.

Selanjutnya kita ingin memastikan bahwa Javascript bawaan Bootstrap dapat berjalan dengan baik. Kita buka kembali dokumentasi Bootstrap dan kita coba komponen yang membutuhkan JavaScript. Contohnya seperti Dropdowns. Kita copy paste contoh kodenya. Kemudian kita coba jalankan di Laravel. Kita coba klik dropdown-nya. Berhasil jalan dengan baik ya. Artinya instalasi Bootstrap kita sudah berjalan dengan sempurna`.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.