Integrasi Bootstrap laravel 9. Sebelumnya kita sudah mengkonfigurasi halaman login dan register di projek blog kita dan kita juga sudah berhasil melakukan registrasi admin untuk kebutuhan edit di halaman admin nantinya. Buat kalian yang belum mengikuti tutorial ini dari awal silahkan browsing kembali dan pelajari tutorial laravel 9 lanjutan ini.
Bootstrap merupakan merupakan salah satu framework css yang bisa kita gunakan. dengan menggunakan framework css dari bootstrap ini kita akan lebih cepat membuat tampilan website daripada kita membuat file css sendiri. Seperti yang kita ketahui css merupakan file untuk membuat tampilan web kita lebih rapi, dan cantik.
Integrasi Bootstrap Laravel
Oke untuk memasang css bootstrap di projek laravel_blog kita silahkan kalian kunjungi situs resminya getbootstrap.com. kemudian kalian ke halaman dokumentasi nanti kalian akan di arahkan untuk mendownload filenya kalau di tutorial ini masih menggunakan bootstrap versi 5 mungkin nanti akan ada update versi terbaru.
Sekarang silahkan buka projek kalian kemudian masuk ke folder public kemudian buat folder baru dengan nama assets lalu buat lagi folder lib didalam folder assets kemudian bual lagi folder bootstrap Download file bootstrap disini kemudian Ektrak, lalu copy folder css dan js ke direktori public/assets/lib/bootstrap.
Sekarang buka projek laravel_blog menggunakan vscode kemudian buka file app.blade.php yang ada di direktori resources/views/layouts/ lalu panggil file css bootstrap dengan mengetik kode di atas tag </head> berikut kode untuk pemanggilannya:
<link href="{{asset('assets/lib/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">Lalu masukan juga file js, letakan di atas tag penutup </body> :
<script src="{{asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
Tambahkan Juga Script Jquery, Buka folder public/asseets/lib lalu buat folder baru dengan nama jquery. lalu buat file baru dengan nama jquery-3.6.3.min.js kemudian copy code yang ada disini lalu panggil script jquery di file app.blade.php
<script src="{{asset('assets/lib/jquery/jquery-3.6.3.min.js')}}"></script>Sehingga keseluruhan kode yang ada di app.blade.php adalah seperti di bawah ini :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
<link href="{{asset('assets/lib/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
<script src="{{asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/lib/jquery/jquery-3.6.3.min.js')}}"></script>
</body>
</html>Tampilan halaman Login
Sekarang kita coba akses blog kita, jangan lupa aktifkan dulu xampp apache dan mysql, dan juga aktifkan server laravelnya dengan mengetik perintah php artisan serve. Kemudian ketik url http://localhost:8000/login, jika maka tampilannya adalah seperti ini :
Seperti yang kalian lihat halaman login berbeda dengan yang sebelumnya, dimana terlihat lebih rapi dan enak di lihat, hal ini karena kita sudah menambahkan styling menggunakan framework bootstrap css.
Tampilan halaman Home
sekarang kita coba login menggunakan email dan password yang kemarin sudah di buat jika berhasil maka kita akan masuk ke halaman home seperti di bawah ini:
