Tutorial Menggunakan Bootstrap di Website PHP

Tutorial menggunakan Bootstrap di website PHP ini merupakan lanjutan dari tutorial Pengenalan Bootstrap untuk Website PHP yang telah menjelaskan konsep dasar dari Bootstrap. Pada tutorial Bootstrap ini akan dijelaskan cara menggunakan komponen komponen dari Bootstrap. Hanya komponen yang umum digunakan untuk membuat website dinamis php. Komponen komponen lain bisa dilihat cara penggunaanya di dokumentasi Bootstrap. Tutorial ini dilengkapi dengan video tutorial. Video tutorial bisa diakses di Youtube channel MyPHPtutorials di video "Tutorial Menggunakan Bootstrap di Website PHP".

Video tutorial menggunakan bootstrap di website php

tutorial menggunakan bootstrap

Berikut adalah materi tutorial Bootstrap ini:

  1. Tabel
  2. Forms
  3. Buttons / Tombol
  4. Navbar / Menu Navigasi
  5. Pagination / Paginasi
  6. Modal / Dialog

Tabel

Untuk mempercantik tabel mengunakan Bootstrap sangat mudah, cukup tambahkan class table seperti di bawah

<table class="table">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Jenis Kelamin</th>
            <th>Kelas</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Adi</td>
            <td>L</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Eka</td>
            <td>P</td>
            <td>XI</td>
        </tr>
    </tbody>
</table>

untuk membuat tabel dengan ukuran kecil tambahkan class table-sm seperti

<table class="table table-sm">
    ...
</table>

Table memiliki beberapa variasi dari segi warna, ada warna biru table-primary warna hijau table-success, merah table-danger

<table class="table table-primary">
    ...
</table>

Semua warna ada di dokumentasi tabel. Untuk membuat tabel dengan warna berbeda untuk tiap baris tambahkan table-striped

<table class="table table-striped">
    ...
</table>

untuk membuat warna baris berubah saat dihover mouse tambahkan table-hover

<table class="table table-hover">
    ...
</table>

Bagaimana hasil dari contoh di atas bisa dilihat di video tutorial bagian tabel

Form

Form digunakan untuk menerima masukan dari pengguna. Dengan form yang cantik akan membuat pengguna lebih nyaman mengunakan website kita. Di bawah adalah contoh form yang menggunakan Bootstrap

<form method="post">
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">Alamat</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
    <div class="mb-3">
        <label class="form-label">Kelas</label>
        <select class="form-select">
            <option selected>Pilih</option>
            <option value="1">Satu</option>
            <option value="2">Dua</option>
            <option value="3">Tiga</option>
        </select>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox">
        <label class="form-check-label">
            Beasiswa?
        </label>
    </div>
    <div class="mb-3">
        <label class="form-label">Jenis Kelamin</label>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="jk">
            <label class="form-check-label">
                Laki Laki
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="jk">
            <label class="form-check-label">
                Perempuan
            </label>
        </div>
    </div>
</form>

CSS class form-control digunakan untuk <input/> (selain checkbox dan radio) dan <textarea/>. Radio button dan checkbox menggunakan form-check-input. Dan select atau combobox menggunakan form form-select. Untuk label menggunakan class form-label, sedangkan label checkbox dan radio mengunakan form-check-input.

Untuk membuat input form yang besar tambahkan form-control-lg, untuk yang kecil form-control-sm seperti di bawah

<input type="text" class="form-control form-control-lg">
<input type="text" class="form-control form-control-sm">
<select class="form-select form-select-lg"></select>
<select class="form-select form-select-sm"></select>

untuk select gunakan form-select-lg dan form-select-sm.

Kemudian ada cara untuk menampilkan hasil validasi, misalnya input tidak sesuai, dan juga input pengguna sudah sesuai. Cukup tambahkah class is-invalid atau is-valid seperti:

<div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control is-invalid">
      <div class="invalid-feedback">
        Masukkan format email yang benar
        </div>
    </div>
    <div class="mb-3">
        <label class="form-label">Alamat</label>
        <textarea class="form-control is-valid" rows="3"></textarea>
    </div>
    <div class="mb-3">
            <label class="form-label">Kelas</label>
            <select class="form-select is-invalid">
                <option selected>Pilih</option>
                <option value="1">Satu</option>
                <option value="2">Dua</option>
                <option value="3">Tiga</option>
            </select>
          <div class="invalid-feedback">
        Silahkah pilih kelas
         </div>
    </div>

untuk pesan validasi bisa menggunakan div dengan class invalid-feedback di bagian bawah form, misal <div class="invalid-feedback">Silahkah pilih kelas</div>. Hasil dari contoh di atas bisa dilihat di video tutorial bagian form

Tombol / Button

Tentunya setiap form memerlukan tombol untuk mengirim data. Ada beberapa tampilan button berdasarkan warna dengan mengunakan class btn btn-{warna} seperti di bawah

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Style button juga bisa digunakan untuk <input type="submit"/>, <input type="reset"/> dan link seperti di bawah

<input type="submit" class="btn btn-primary" value="Simpan"/>
<input type="reset" class="btn btn-secondary" value="Reset"/>
<a href="info.php"class="btn btn-info">Info</button>

Ukuran tombol bisa diatur dengan class btn-lg untuk ukuran besar dan btn-sm untuk kecil seperti:

<input type="submit" class="btn btn-primary btn-lg" value="Simpan"/>
<input type="reset" class="btn btn-secondary btn-sm" value="Reset"/>

kemudian bisa juga menggunakan tombol block, atau 1 tombol 1 baris seperti:

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Simpan</button>
  <button class="btn btn-secondary" type="button">Reset</button>
</div>

Hasil dari contoh contoh di atas bisa dilihat di tutorial video bagian tombol

Navbar / Menu Navigasi

Setiap website pasti memiliki menu navigasi. Navbar Bootstrap mendukung brand/logo, menu navigasi dan form. Di bawah adalah contoh navigasi seperti menu navigasi MyPHPtutorials.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">My PHP tutorials</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
            Kategori
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">PHP</a></li>
            <li><a class="dropdown-item" href="#">JavaScript</a></li>
                        <li><a class="dropdown-item" href="#">CSS</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Hasil dari contoh di atas bisa dilihat di video tutorial bagian navbar.

Contoh di atas berisi brand, <a class="navbar-brand" href="#">My PHP tutorials</a> yang bisa diganti dengan logo. Menu home, untuk menambahkan navigasi menu pertama gunakan <ul/> dengan class navbar-nav. Untuk menunya sendiri menggunakan 2 class, nav-item di tag <li/> dan nav-link untuk linknya seperti:

<li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>

Dan class active digunakan untuk menandai menu yang aktif. Untuk menambahkan sub menu, bisa menggunakan dropdown menu. Pertama tambahkan menu utama seperti di atas dengan tambahan class dropdown, dropdown-toggle dan juga attribute data-bs-toggle="dropdown" seperti:

<li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                Kategori
            </a>
</li>

kemudian di bawah linknya (tag <a/>), tambahkan sub menu, dengan tag <ul/> beserta class dropdown-menu, sub menunya sendiri menggunakan class dropdown-item seperti:

<ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">PHP</a></li>
    <li><a class="dropdown-item" href="#">JavaScript</a></li>
    <li><a class="dropdown-item" href="#">CSS</a></li>
</ul>

Kemudian bagian terakhir dari navbar di atas ada form untuk searching, cara menambahkannya sama seperti form biasa, hanya dengan tambahan class d-flex di tag <form/>.

<form class="d-flex">
    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
</form>

Fitur fitur lebih lengkap dari navbar bisa dilihat di dokumentasi navbar Bootstrap dan juga di video tutorial bagian navbar.

Pagination / Paginasi

Pada saat menampilkan data yang banyak menggunakan tabel maka akan diperlukan paginasi. Tidak mungkin untuk menampilkan jutaan data dalam satu halaman website. Paginasi menggunakan style Bootstrap sangat sederhana seperti di bawah

<nav>
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Dimulai dengan tag <nav/> kemudian <ul/> dengan class pagination. Sedangkan setiap halaman menggunakan kombinasi class page-item di <li/> dan class page-link di tag <a/> seperti: <li class="page-item"><a class="page-link" href="#">1</a></li>. Untuk menandakan halaman yang sedang aktif tambahkan class active setelah page-item dan class disabled untuk menandakan halaman yang tidak aktif seperti di bawah.

<nav>
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    ...
  </ul>
</nav>

Agar paginasi ada di tengah tengah gunakan class justify-content-center di tag ul dan gunakan class justify-content-end agar paginasi ada di bagian kanan layar.

Modal / Dialog

Modal sering digunakan untuk menampilkan konfirmasi sebelum menyimpan data, juga untuk menampilkan sebuah detail dari versi singkat sebuah narasi text di website. Untuk menampilkan modal di butuhkan sebuah tombol dan juga modal itu sendiri seperti

<!-- Button untuk menampilkan modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Hapus
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Konfirmasi</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Apakah Anda yakin menghapus data ini?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button>
        <button type="button" class="btn btn-primary">Ya</button>
      </div>
    </div>
  </div>
</div>

Agar bisa bekerja pada bagian tombol harus di tambahkan dua attribute data-bs-toggle="modal" dan data-bs-target. Attribute kedua data-bs-target harus diisi dengan selector dari modal, paling sederhana menggunakan selector id seperti pada contoh di atas, data-bs-target="#exampleModal". Kemudian modal harus ditambahkan dengan attribute id id="exampleModal". Hasil dari contoh di atas bisa dilihat di tutorial video bagian modal.

Kemudian modal memiliki beberapa ukuran, kecil modal-sm ditambahkan setelah modal-dialog, besar modal-lg, extra besar modal-xl. 

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Beberapa fitur lain untuk modal bisa dilihat lebih lanjut di dokumentasi modal Bootstrap.

Kesimpulan

Pada tutorial menggunakan komponen Bootstrap ini telah dijelaskan tentang cara mempercantik tabel, form, tombol, membuat menu navigasi, paginasi dan menggunakan modal. Pada dasarnya menggunakan Bootstrap adalah menggunakan css class yang sudah disediakan dengan struktur html tertentu. Dengan kemampuan sedikit bahasa Inggris maka akan dengan mudah menggunakannya. Dalam video tutorial ini sudah dijelaskan lebih mendalam cara menggunakan dokumentasi Bootstrap. Selamat mencoba dan jangan malu bertanya di kolom komentar.