Membuat Tabel untuk Operasi CRUD Menggunakan Bulma CSS (Part 1)

Membuat Tabel untuk Operasi CRUD Menggunakan Bulma CSS (Part 1)

Bulma CSS adalah salah satu framework untuk membuat sebuah website. Sama seperti Bootstrap, Bulma CSS juga memiliki tampilan yang mudah dikostumisasi demi memenuhi standar dari developer.

Bulma CSS dikenal sebagai framework agnostik yang berarti Bulma CSS tidak menggunakan Javacscipt dan jQuery sebagai paket default-nya. Hal ini tentu saja bisa menjadi nilai tambah bagi Bulma CSS karena waktu loading halaman website menjadi lebih cepat bila dibandingkan dengan Bootstrap..

Cara Menggunakan Bulma CSS

Untuk memulai menggunakan Bulma CSS dapat dilakukan dengan dua cara yaitu melalui koneksi internet dan koneksi lokal.

Jika kamu terkoneksi internet maka kamu cukup kunjungi website ofisial Bulma CSS di https://bulma.io/ cari menu Documentation > Overview > Start lalu copy starter templatenya dan paste di dalam file baru di komputer kita dan simpan.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
  </head>
  <body>Simpan file index.html-nya. Untuk melihat hasil dari file index maka klik file index.html dua kali maka akan muncul tampilan default template tabel seperti di bawah:
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Bila ingin menambahkan icon-icon dalam Bulma CSS maka tambah script berikut ke dalam starter template di atas.

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Sehingga starter template nya menjadi seperti berikut :

<!DOCTYPE html>
<html>Simpan file index.html-nya. Untuk melihat hasil dari file index maka klik file index.html dua kali maka akan muncul tampilan default template tabel seperti di bawah:
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Sedangkan, bila kamu ingin mendownload Bulma CSS maka download file zipnya. Pilih file zip dengan rilissan Bulma yang paling baru. Untuk saat ini yang terbaru adalah Bulma CSS versi 0.9.0. Ekstrak filenya di folder htdocs kamu.

Hasil ekstraksi file zip di folder htdocs