Laravel UI

10. Laravel UI

Materi kita kali ini masih berhubungan dengan front-end. Laravel sebenarnya tidak
mewajibkan stack khusus untuk front-end. Kita bebas apakah ingin memakai framework CSS
Bootstrap, Tailwind CSS, React JS, Vue JS, atau framework lain.

Sejak Laravel 6, Laravel UI hadir sebagai tambahan fitur untuk mempermudah proses
integrasi Laravel dengan Bootstrap, Vue atau React. Setelah itu di Laravel 8 hadir pula Laravel
Breeze untuk integrasi dengan framework Tailwind CSS.

Laravel UI dan Laravel Breeze nantinya juga dipakai untuk proses pembuatan authentication
bawaan Laravel (fitur login/logout). Karena saya pribadi lebih familiar dengan Bootstrap, kita
akan bahas tentang Laravel UI saja.

Laravel UI ini bersifat opsional dan tidak harus di install. Namun karena erat kaitannya dengan
Laravel mix serta perintah npm, saya ingin membahasnya sekilas. Terlebih nanti ada 1 materi
tentang authentication yang mengharuskan kita menginstall Laravel UI.

Agar seragam dan menghindari error akibat praktek dari bab sebelumnya, saya akan
mulai dari installer baru Laravel 9. Anda bisa hapus isi folder laravel01, atau menginstall
Laravel ke folder lain, misalnya laravel02.

Berikut perintah untuk menginstall Laravel ke folder laravel01:

composer create-project laravel/laravel="^9.0" laravel01

10.1. Pengertian Laravel UI

Laravel UI adalah komponen khusus yang dipakai untuk menginstall framework front end
seperti Bootstrap, Vue atau React ke dalam Laravel. Komponen ini sepenuhnya opsional karena
kita tetap bisa menginstall framework tersebut secara manual. Dari halaman dokumentasinya,
Laravel UI ini disebut juga sebagai JavaScript & CSS Scaffolding.

Laravel UI mendukung 3 jenis framework front-end (disebut sebagai 'preset'), yakni: Bootstrap,
Vue dan React.

240
Laravel UI

10.2. Instalasi Laravel UI

Agar bisa menggunakan Laravel UI, kita harus menginstalnya terlebih dahulu. Seperti banyak
hal di Laravel, proses instalasi ini juga menggunakan composer.

Silahkan buka cmd, masuk ke folder instalasi Laravel, kemudian ketik kode berikut:

composer require laravel/ui

Proses instalasi akan berlangsung beberapa saat.

Gambar: Proses instalasi Laravel UI

Setelah selesai, kita bisa memilih akan menggunakan framework yang mana. Secara bawaan, di
versi Laravel UI terdapat 3 pilihan: Bootstrap, Vue atau React.

Untuk melihat daftar pilihan ini, jalankan perintah berikut:

php artisan ui -h

Tambahan flag -h berarti help yang akan menampilkan keterangan dari php artisan ui.

Gambar: Pilihan preset dari Laravel UI

Fokus utama kita ada di <type>, dimana terdapat penjelasan: The preset type (bootstrap, vue,
react). Inilah daftar 'preset' atau framework front-end yang bisa di install. Kali ini saya akan

241
Laravel UI

menginstall bootstrap, maka perintah yang diperlukan adalah:

php artisan ui bootstrap

Gambar: Proses instalasi framework Bootstrap

Proses instalasi akan berlangsung beberapa saat. Setelah selesai, di akhir baris kita disuruh
untuk menjalankan npm install && npm run dev. Ini merupakan gabungan dari perintah
untuk menginstall Laravel Mix (download semua komponen yang diperlukan), kemudian
langsung menjalankannya (compile file assets).

Namun sebelum itu, mari lihat sebentar perubahan yang terjadi.

Pertama, silahkan buka file resources/js/bootstrap.js. Dalam bab tentang Laravel Mix, kita
tidak menyinggung file ini karena berisi kode internal Laravel, yang salah satunya untuk
Laravel UI.

Gambar: Perbandingan isi file bootstrap.js sebelum (kiri) dan sesudah install Laravel UI Bootstrap (kanan)

Perhatikan terdapat tambahan 3 baris kode program di awal file. Isinya berupa proses import
file 'bootstrap' yang akan diperlukan oleh Bootstrap.

File bootstrap.js ini selanjutnya akan di import oleh file app.js.

242
Laravel UI

Gambar: Isi file app.js

Nantinya, file app.js ini akan kita pakai untuk proses kompilasi menggunakan Laravel Mix.

Perubahan lain ada di folder resources/sass. Dalam bab sebelumnya, folder sass kita buat
secara manual. Namun pada saat instalasi Laravel UI, folder sass dibuat otomatis dan sudah
berisi 2 file: _variables.scss dan app.scss.

File _variables.scss berisi beberapa variabel Sass:

Gambar: Isi file _variables.scss dari Laravel UI

Dan berikut isi file app.scss:

Gambar: Isi file app.scss dari Laravel UI

243
Laravel UI

Terdapat 3 baris @import dalam file app.scss, yakni:

 @import url('https://fonts.googleapis.com/css?family=Nunito') , merupakan

perintah untuk proses import font 'Nunito' dari Google Font.

 @import 'variables', adalah perintah untuk proses import file _variables.scss yang
baru saja kita buka.

 @import '~bootstrap/scss/bootstrap' , dipakai untuk proses import file scss

bootstrap framework.

Dari ketiga @import, yang paling penting hanya perintah ketiga, yakni proses import file
Bootstrap. Perintah pertama dan kedua untuk import Font 'Nunito' dan _variables.scss bisa
di hapus apabila anda tidak menyukainya style yang dipilih tim Laravel UI. Namun untuk saat
ini saya akan biarkan kode tersebut.

Laravel UI juga mengubah kode di file webpack.mix.js. Berikut perbandingannya:

Gambar: Isi perintah di file webpack.mix.js sebelum (1), dan sesudah instalasi Laravel UI (2)

Perintah mix.js() berguna untuk proses compile file JavaScript yang ditulis dalam format
EcmaScript 2015 dan juga untuk memproses file Vue. Ini berbeda dengan perintah
mix.script() yang pernah kita gunakan, dimana mix.script() lebih dirancang untuk proses
compile file JavaScript biasa.

Sedangkan perintah mix.sass() berfungsi untuk proses file Sass, yang juga sudah pernah kita
praktekkan. Tambahan mix.sourceMaps() berguna untuk proses debugging.

Selain itu perhatikan file hasil yang merujuk ke alamat folder, yakni ' public/js' dan
'public/css'. Dalam bab sebelumnya, alamat hasil ini kita tulis dalam bentuk file, seperti
'public/js/my-app.js'.

Jika ditulis nama folder saja, Laravel mix akan memakai nama file sumber, yakni app.js dan
app.scss. Sehingga file akhir Laravel UI akan bernama public/app.js dan public/app.css.

244
Laravel UI

10.3. Menjalankan Laravel UI

Persiapan untuk Laravel UI sudah selesai, kita tinggal jalankan Laravel Mix untuk men-compile
file yang diperlukan. Ini bisa dilakukan dengan 2 cara, apakah langsung menjalankan 2
perintah sekaligus, yakni npm install && npm run dev, atau secara terpisah, yakni npm
install terlebih dahulu dan setelah itu baru npm run dev.

Perhatikan bahwa perintah npm install akan kembali men-download semua komponen yang
diperlukan Laravel Mix (dan juga Laravel UI), yang ukurannya bisa mencapai lebih dari 80MB.

Silahkan buka cmd, masuk ke folder laravel01 dan jalankan perintah tersebut.

Gambar: Menjalankan Laravel mix dengan perintah npm install && npm run dev

Jika anda menggunakan Windows PowerShell untuk membuka terminal (bukan memakai
cmd), maka perintah npm install && npm run dev akan error karena PowerShell tidak
mendukung penggabungan perintah seperti ini.

Solusinya, jalankan secara terpisah, yakni npm install terlebih dahulu lalu baru npm run
dev. Aplikasi terminal di VS Code juga menggunakan Windows PowerShell secara default.

Sama seperti materi di Laravel Mix, jika terdapat error di akhir perintah npm install && npm
run dev, jalankan sekali lagi npm run dev:

Gambar: Jika terdapat error, jalankan lagi npm run dev

Setelah berhasil, silahkan lihat isi file public/js/app.js dan public/css/app.css. Inilah file
hasil compile Laravel mix.

245
Laravel UI

Untuk uji coba sekedar membuktikan bahwa Bootstrap sudah terinstall, saya akan pakai kode
yang sama dengan contoh kita pada bab sebelumnya. Silahkan edit view welcome.blade.php
dengan kode berikut:

resources/view/welcome.blade.php
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
9 </head>
10 <body>
11 <div class="container text-center py-5">
12 <button id="myPopover" type="button" class="btn btn-lg btn-danger"
13 data-bs-toggle="popover" title="Lagi serius..."
14 data-bs-content="Buku Laravel Uncover top bgt!">
15 Belajar Laravel </button>
16 </div>
17 <script src="{{ asset('/js/app.js') }}"></script>
18 <script>
19 // Tampilkan popover Bootstrap
20 new bootstrap.Popover(document.getElementById('myPopover'));
21 </script>
22 </body>
23 </html>

Sedikit perubahan ada di baris 8 dan 17, dimana saya kembali menggunakan function helper
asset(), serta alamat file sekarang adalah /css/app.css dan /js/app.js.

Selain itu di baris 18 – 21 terdapat sedikit kode JavaScript untuk mengaktifkan komponen
popover Bootstrap. Sebelumnya kode ini berada di file tersendiri ( my-script.js), namun untuk
mempersingkat pembahasan, langsung ditulis ke dalam file view. Berikut hasilnya:

Gambar: Mencoba kode Bootstrap hasil Laravel UI

246
Laravel UI

Tag <button> tampil dengan warna merah sebagai bukti kode CSS Bootstrap sudah berhasil di
akses. Dibandingkan dengan hasil dari bab Laravel mix, font terlihat sedikit berbeda karena
memakai font 'Nunito' bawaan laravel UI.

Akan tetapi ketika tab console di developer tools di buka, tampil pesan error Uncaught
ReferenceError: bootstrap is not defined. Efek lain, saat tombol "Belajar Laravel" di klik juga
tidak tampil popover.

Setelah investigasi lebih lanjut, error ini berasal dari bug Laravel UI karena proses import file
JS Bootstrap tidak menyertakan "alias". Akibatnya, object bootstrap yang coba di akses pada
baris 20 tidak terdefinisi:

new bootstrap.Popover(document.getElementById('myPopover')); // error

Solusinya, buka file resources\js\bootstrap.js, lalu cari baris berikut:

try {
require('bootstrap');
} catch (e) { }

Kemudian modifikasi menjadi:

try {
window.bootstrap = require('bootstrap');
} catch (e) { }

Gambar: Modifikasi file resources\js\bootstrap.js

Save file ini dan jalankan ulang Laravel Mix dengan perintah npm run dev. Setelah selesai, tes
kembali file sebelumnya:

247
Laravel UI

Gambar: Tampilan view welcome dengan file Bootstrap yang berasal dari Laravel UI

Sip, sekarang jendela popover sukses tampil ketika tombol "Belajar Laravel" di klik. Mudah-
mudahan tim Laravel UI segera memperbaiki masalah ini.

# Pentingnya Proses Minify

Jika diperhatikan ukuran file /js/app.js sangat besar, lebih dari 2 MB yang berasal dari
berbagai komponen JavaScript yang dibawa Laravel UI.

Gambar: Ukuran file hasil compile dari npm run dev

Jika sudah masuk tahap production, tentu ini tidak efisien karena proses loading website
menjadi lambat. Salah satu solusinya adalah men-minify file tersebut dengan perintah
npm run prod.

Gambar: Ukuran file hasil compile dari npm run prod

Sekarang ukuran file mengecil jadi sekitar 164kb. Tambahan file lain seperti app.js.
LICENSE.txt dan app.js.map hanya untuk proses debugging saja dan boleh dihapus.

248