Cara Install Bootstrap di laravel 7 – Laravel #4

Bootstrap merupakan sebuah framework UI yang sederhana dan mudah untuk digunakan. Pada laravel versi 5 dan yang sebelumnya, framework bootstrap ini sudah tersedia secara langsung di laravel jika kita menginstall laravel. Atau kita juga bisa menginstall bootstrap ini secara manual melalui halaman website resmi bootstrap kemudian menambahkannya di dalam proyek laravel. Namun, pada laravel versi 6 dan 7 pihak laravel tidak lagi memasukkan framework UI seperti bootstrap secara langsung di dalam sistem laravel. Hal ini berarti kita harus menginstall dan menambahkan framework UI yang di butuhkan ke dalam sistem proyek laravel kita. Berikut cara install framework UI seperti bootstrap di dalam sistem laravel :

a. Persiapan

  • pastikan versi laravel yang digunakan adalah versi 6, 7 atau diatasnya. Cara cek versi laravel silahkan baca disini
  • Install node.js agar kamu bisa menjalankan perintah npm di terminal. Download disini
  • pastikan composer sudah terinstall di perangkatmu.

b. Install laravel UI

  • Buka terminal kemudian ketikkan perintah berikut ini :

composer require laravel/UI

  • Tunggu sampai proses instalasi selesai seperti gambar di bawah ini

c. Install Framework UI

Disini kamu bisa menginstall framework UI yang ingin kamu gunakan untuk membangun sebuah sistem menggunakan laravel.

  • Buka terminal kemudian ketikkan perintah berikut ini :

php artisan ui bootstrap

jika kamu ingin menginstall framework reactjs/ vuejs kamu bisa mengganti perintah kata bootstrap menjadi reactjs/ vuejs

  • Kemudian, tunggu sampai proses instalasi selesai seperti gambar di bawah ini

d. Jalankan perintah npm

  • Masih diterminal/bash yang sama ketikkan perintah berikut ini :

npm install && npm run dev

  • Selanjutnya, tunggu sampai proses instalasi selesai, proses instalasi ini cukup lama memakan waktu sekitar (10-15menit). Jadi nggak usah khawatir kalo prosesnya agak lama.
  • jika selesai periksa file app di public>css>app.css dan public>js>app.js. Jika ada berarti proses instalasi bootstrap ke dalam proyek laravel sudah selesai dan benar.

e. Membuat source code

Buat sebuah file dengan nama hello.blade.php dan simpan di folder resources>views. copy kan script dibawah ini

<!doctype html>
<html>
<head>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="card-header">
    {{-- navbar  --}}
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Laravel</a>
        </div>
    </nav>
</div>
<div class="card-body">
  <div class="container">
      <h1>Hello World</h1>
  </div>
</div>
</body>
</html>

f. Membuat route

  • Pada folder routes buka file web.php
  • kemudian copy kan source code berikut ini

g. Menjalankan server

  • Jalankan server development laravel menggunakan perintah

php artisan serve

h. Selesai

Jika sudah selesai maka tampilan web browser akan seperti gambar dibawah ini

Jika ada pertanyaan silahkan tinggalkan di kolom komentar. Share juga ke teman-teman kamu biar semuanya makin banyak ilmu. Salam binerian 😀

2 thoughts on “Cara Install Bootstrap di laravel 7 – Laravel #4

  1. Apakah bisa kita membuat web dari 0 sampai muncul permukaan internet hanya dengan bootstrap saja? tolong pencerahannya min, ehehehe.

    1. Halo kak, terimakasih sudah berkunjung. Jawabannya adalah TIDAK. Karena untuk dapat memunculkan sebuah web ke internet, kakak harus punya sebuah server atau membeli layanan hosting. Baru kemudian website kakak bisa tampil di internet

Leave a Reply