Anggit TSPada seri belajar Laravel bagian 22, kita telah membahas cara membuat fitur forgot password di Laravel. Di seri ini, kita akan melanjutkan pembelajaran dengan mempelajari cara menggunakan bootstrap di Laravel untuk mempercantik tampilan aplikasi.
Dalam membangun sebuah aplikasi berbasis web, tampilan website menjadi salah satu aspek penting yang memengaruhi kenyamanan pengguna. Laravel adalah salah satu framework PHP yang populer menawarkan fleksibilitas yang terintegrasi dengan berbagai library front-end, salah satunya bootstrap.
Dengan menggunakan bootstrap, developer dapat membuat tampilan website yang responsif, keren, modern, dan konsisten tanpa perlu lagi menulis banyak kode CSS dari nol secara manual.
Pada artikel ini, kami akan membahas cara menggunakan dan mengintegrasikan Bootstrap ke dalam proyek yang dibuat menggunakan Laravel, mulai dari instalasi hingga penerapannya dalam view. Berikut ini pembahasannya.
Persiapan Sistem
Jika Anda sudah mengikuti rangkaian tutorial belajar Laravel sebelumnya, maka langkah pertama ini bisa dilewati. Namun, bagi Anda yang belum memiliki Laravel, silakan lakukan instalasi terlebih dahulu sesuai panduan di tutorial Laravel bagian 1.
Caranya, masuk ke folder tempat Laravel akan diinstal, lalu jalankan perintah berikut:
composer create-project --prefer-dist laravel/laravel .
Cara Memasang Bootstrap di Laravel
Sampai tahap ini, Laravel Anda seharusnya sudah bisa diakses. Selanjutnya, kita akan menambahkan Bootstrap ke dalam Laravel. Ada dua cara yang bisa digunakan.
Cara pertama adalah cara cepat, sedangkan cara kedua lebih direkomendasikan karena memanfaatkan perintah Artisan Laravel, sehingga struktur proyek menjadi lebih rapi dan teratur.
Cara 1: CDN (paling cepat)
Untuk cara pertama ini, silakan Anda edit manual file resources/views/welcome.blade.php kemudian tambahkan Bootstrap CDN di bagian <head>. Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Laravel Bootstrap Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center text-primary">Hello, ini adalah Bootstrap + Laravel!</h1>
<div class="card shadow mt-4">
<div class="card-header bg-primary text-white">Demo Card</div>
<div class="card-body">
<p>Ini adalah contoh penggunaan Bootstrap di Laravel.</p>
<button class="btn btn-success">Klik Saya Ya</button>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Kemudian, jalankan program Laravel Anda dengan perintah berikut.
php artisan serveAkses melalui browser alamat http://127.0.0.1:8000/ kemudian akan tampil halaman seperti berikut.
Dengan tampilan tersebut, berarti Bootstrap telah terhubung dengan website Laravel Anda.
Cara 2: Install via NPM
Cara kedua bisa Anda pilih agar tampilan bootstrap lebih rapi dan mungkin akan lebih cocok untuk project besar Anda. Berikut langkah-langkahnya:
Step 1. Install Bootstrap
Install Bootstrap melalui terminal menggunakan perintah:
npm install bootstrap
Step 2. Import Bootstrap di resources/js/app.js
Selanjutnya, buka file resources/js/app.js, kemudian tambahkan import Bootstrap berikut:
import './bootstrap';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import '../css/app.css';Step 3. Import CSS Bootstrap
Berikutnya, silakan import CSS Bootsrap. Untuk melakukannya Anda bisa buka resources/css/app.css lalu tambahkan:
@import "bootstrap/dist/css/bootstrap.min.css";Step 4. Compile asset dengan Vite
Langkah berikutnya, kita akan melakukan compile asset dengan Vite dengan perintah berikut:
npm run devatau untuk build production:
npm run build
Step 5. Pastikan Blade sudah memanggil Vite
Di file resources/views/welcome.blade.php atau layout utama (misalnya resources/views/layouts/app.blade.php), tambahkan:
@vite(['resources/css/app.css', 'resources/js/app.js'])6. Tes Bootstrap
Edit welcome.blade.php menjadi misalnya berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel + Bootstrap</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="p-5">
<div class="container">
<h1 class="text-primary">Hello, Bootstrap di Laravel!</h1>
<button class="btn btn-success">Tombol Bootstrap</button>
</div>
</body>
</html>
Selamat, sampai disini projek Laravel Anda telah terhubung dengan Bootstrap. Berikut adalah contoh tampilan default bootstrap yang telah kita buat.
Selanjutnya, Anda dapat membuat tampilannya dengan memaksimalkan komponen-komponen yang disediakan bootstrap.
Penutup
Mengintegrasikan Bootstrap di Laravel ternyata tidaklah sulit. Dengan Bootstrap, Anda bisa lebih cepat membangun tampilan website yang responsif dan profesional tanpa harus membuat semuanya secara manual dari awal.
Ikuti terus seri belajar laravel lengkap dari Rumahweb Indonesia untuk mendapatkan panduan terbaru seputar penggunaan Laravel. Di seri belajar laravel selanjutnya, kita akan melanjutkan tentang cara memaksimalkan komponen bootstrap di Laravel.
