Cara Mudah Memasang Bootstrap di Laravel

Pengembangan web yang terus mengalami perkembangan, saat ini banyak tersedia berbagai pilihan untuk memudahkan pembuatan sebuah website. Dari yang awalnya membutuhkan kemampuan HTML, CSS, JavaScript dengan pemahaman yang kompleks. Kini lebih dipermudah dengan adanya framework juga alat bantu lain seperti Bootstrap.

Dalam situs resminya, Bootstrap mengambil inti kalimat :

Build fast, responsive sites with Bootstrap

Yang memang secara tidak langsung menyampaikan pesan bahwa membangun website tidak serumit zaman dulu, kini bisa lebih cepat bahkan memiliki kemampuan tambahan seperti responsif.

Baca lebih lanjut tentang Bootstrap ini disini

Sekarang bagaimana memasang toolkit ini di projek Laravel kita ?

Masuk ke dalam projek Laravel kita

Di dalam folder resources/views, kita buat satu folder tambahan dengan nama layout.

Selanjutnya di dalam folder layout tersebut, tambahkan file baru. Disini contoh nama filenya app.blade.php

Isi file app.blade.php dengan baris kode dibawah ini ( copas saja, tidak usah diubah )

Baris kode lengkap :

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>@yield('title')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body class="bg-light">
    <div class="container my-5">
        
        @yield('content')
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
</body>
</html>

Baris kode tersebut adalah perintah untuk menambahkan langsung kode-kode Bootstrap di kedalam projek Laravel. Bagian selanjutnya adalah buat file baru dengan nama index.blade.php di dalam folder /views

Tambahkan perintah HTML dasar lengkap mulai dari <HTML> s/d </HTML>. Masih ingat kan apa saja yang menjadi elemen dasar untuk markup ini ?

Di dalam elemen <body> ... </body>, tambahkan perintah :

<body>
    @extends('layout.app') // tambahkan perintah ini

Perintah ini artinya directive blade yang digunakan untuk mewarisi atau memperluas layout yang telah ditentukan sebelumnya. Dalam hal ini, layout.app merujuk pada folder layout yang terletak di folder resources/views/layout ( sesuai penamaan folder sebelumnya ). Sedang app merupakan nama file yang dibuat dalam folder layout, yaitu app.blade.php.

Kode lengkap :

Setelah selesai semua itu, kita langsung bisa eksekusi UI yang telah di sediakan oleh toolkit ini. Sebagai contoh kita ingin membuat tombol ( button ), Bootstrap telah menyediakan berbagai varian bentuk tombol seperti Button Tags, Outline Buttons, Sizes, Disabled State, Block Buttons dan Button Plugin.

Semua itu telah disediakan contoh dan baris kodenya, mari lihat Button Tags. Dalam keterangannya, Button Tags merupakan :

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Memiliki UI :

Untuk menambahkan salah satu tombol seperti diatas, dengan Bootstrap sangat mudah. Menambahkan tombol Link dengan perintah :

  <a class="btn btn-primary" href="#" role="button">Link</a>

Mari cek dengan peramban internet yang kita miliki :

Nah, tanpa kita memikirkan lebih lanjut terkait CSS. Tombol kita sudah jadi :)

Bisa juga tulisan Link diganti dengan teks lain, misal :

<a class="btn btn-primary" href="#" role="button">Tombol Bootstrap</a>

Menyesuaikan langsung :)

Bagaimana dengan yang lain ? Bisa!

Misal kita ingin menambahkan sebuah Card langsung saja dengan baris kode :

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Judul Card</h5>
      <p class="card-text">Ini untuk menambahkan teks keterangan dari konten card</p>
      <a href="#" class="btn btn-primary">Tombol Tautan</a>
    </div>
  </div>

Maka hasil di peramban akan memunculkan :

Yeaayyy, berhasil!

Kemudian muncul pertanyaan "Bagaimana menghafal / dengan kode-kode yang lain ?"

Tenang! Inilah pentingnya menggunakan Bootstrap untuk pengembangan web lebih cepat, baris kode-kode untuk membuat elemen itu telah di sediakan secara lengkap di web resminya. Bisa dikatakan kita tinggal menyesuaikan dimana letak elemen itu diletakkan dan untuk baris kodenya hanya copas ( copy paste )

Sebagai pengguna, kita hanya berpikir mana yang kita perlukan. Ambil kodenya dan tempelkan pada projek kita :

Bootstrap menyediakan berbagai hal lengkap, mulai dari :

Layout
Content
Form
Components
Helper
Utilities
Extend

Untuk membantu dalam pengembangan web. Semua dokumentasi tentang komponen ini lengkap ditulis dalam website resminya disini, ditambah lagi dengan baris kodenya lengkap disertai hasilnya.

Mantap bukan ? 😎

Baik, sampai disini untuk artikel penggunaan Bootstrap di Laravel. Ada pertanyaan ? Jangan sungkan untuk meninggalkan jejak komentar 😇

Cara Mudah Memasang Bootstrap di Laravel

Posting Komentar

Formulir Kontak