Ketika membangun aplikasi dengan laravel dan menggunakan scaffolding yang disediakan, kita akan mendapatan komponen-komponen atau bagian dari komponen mendukung seperti desain, css, js, dll, secara otomatis.
Contohnya seperti ketika kita ingin membuat autentikasi. Di laravel 8 terdapat fitur Jetstream yang memberikan kita desain scaffolding aplikasi. Kita bisa menggunakan Jetstream untuk membuat autentikasi user seperti login, registrasi user, dll, dan dengan desain UI yang sudah disediakan. Jetstream sendiri menggunakan tailwindcss untuk css.
Namun terkadang kita juga pasti ingin membangun atau merancang aplikasi kita sendiri secara manual dengan menginstall package-package yang kita butuhkan tanpa scaffold atau fitur yang disediakan dan dengan css framework yang kita pilih untuk digunakan, contohnya bootstrap.
Penggunaan bootstrap di laravel 8 sendiri tidak sulit, seperti pada umumnya kita bisa gunakan link cdn atau menginstall package bootstrap.
Sebagai contoh kita akan coba install dan menggunakan bootstrap di laravel 8.
Instalasi Bootstrap
Kita akan menambahkan bootstrap dengan menginstall package atau depedensi ke project.
Kita install laravel terlebih dahulu.
~ laravel new labootstrap #atau ~ composer create-project --prefer-dist laravel/laravel labootstrap
Kemudian install node modules.
npm install
Lalu kita install bootstrap dan library pendukung.
npm install bootstrap jquery popper.js --save-dev npm install @popperjs/core
Kemudian buka bootstrap.js dan tambahkan dibawah ini.
//resources/js/bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
Setelah itu kita install sass dan sass-loader.
npm install sass sass-loader --save-dev
Selanjutnya buat folder baru di direktori resources dengan nama sass. Pada folder sass kita tambahkan file baru dengan nama app.scss, dan kita import bootstrap.
//resources/sass/app.scss @import '~bootstrap/scss/bootstrap';
Setelah bootstrap di import kita akan gunakan compiler laravel mix. Kita buka file webpack.mix.js, buat seperti dibawah ini.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Lalu jalankan perintah npm run dev.
@labootstrap ➜ npm run dev
DONE Compiled successfully in 5866ms 2:25:35 PM
Asset Size Chunks Chunk Names
/css/app.css 179 KiB /js/app [emitted] /js/app
/js/app.js 1.08 MiB /js/app [emitted] /js/app
Penggunaan
Setelah compiling selesai, output akan masuk di direktori public. Untuk penggunaannya kita tinggal memanggilnya pada file html kita dengan cara seperti berikut.
<link href=" {{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
Sebagai contoh, silahkan buka file welcome.blade.php, ubah html yang ada dengan dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 8</title>
<link href=" {{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Terakhir tinggal jalankan php artisan serve dan lihat hasilnya. Silahkan dicoba.