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

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

Okey, pada tulisan ini kita akan memulai langkah demi langkah untuk membuat sebuah template tabel yang bisa dipakai sebagai aplikasi CRUDS (Create, Read, Update, Delete, damn Search).

Download Paket Bulma

Pertama kita akan mendownload paket Bulma dari website ofisialnya di https://bulma.io. Tempatkan hasil ekstrakan file zip di folder yang sudah kamu buat.

Hasul ekstrak file Bulma

Buat Folder Assets

Untuk menaruh file gambar, css, dan javascript (bila ada) sebaiknya kita buat dulu folder yang bernama assets, di dalam folder assets buatlah tiga buah folder tambahan seperti folder gambar, folder css, dan folder js.

Buat File Index.html Sebagai File Induk

Buat file index.html lalu copas kode html di bawah ini :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tabel di Bulma</title>
    <link rel="stylesheet" type="text/css" href="css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
    <section class="hero is-primary is-medium">
    <div class="hero-body">
      <div class="container">
        <h1 class="title has-text-centered">
          Tabel
        </h1>
        <h2 class="subtitle has-text-centered">
          Membuat tabel Memakai Bulma CSS
        </h2>
     </div>
  </div>
</section>
<br>

<div class="container">
<div class="content">Membuat Tabel untuk Operasi CRUD Menggunakan Bulma CSS (Part 2)
  <h1 class="title has-text-centered">Tabel Member Girl Group K-Pop  </h1>
  <a class="button button is-black" href="tambahdata.html"><span class="icon is-small">
          <i class="fas fa-plus"></i>
        </span><span>Tambah Data</span></a>

  <div class="table-container"><br>
  <table class="table is-bordered is-striped is-narrow bg-color">
    <thead >
      <tr >
       <th class=""><abbr title="GG">Grup</abbr></th>
       <th class=""><abbr title="Nama">Nama Lengkap</abbr></th>
       <th><abbr title="negara">Negara Asal</abbr></th>
       <th><abbr title="tgl_lahir">Tanggal Lahir</abbr></th>
       <th><abbr title="foto">Foto</abbr></th>
       <th>Tindakan</th>
    </tr>
    </thead>
    <tbody>
      <tr>
      <td>Secret Number</td>
      <td>Ogawa Mizuki (Lea)</td>
      <td>Jepang</td>
      <td>August 12, 1995</td>
      <td><figure class="image is-64x64">
               <img class="is-rounded" src="assets/gambar/lea.jpg">
          </figure>
      </td>
      <td><a class="button is-primary" href="lea.html"> <span class="icon is-small">
          <i class="fas fa-edit"></i>
          </span><span>Ubah</span></a> |
          <a class="button is-danger" onclick="return confirm('Hapus Data Ini???'); "> <span class="icon is-small">
          <i class="fas fa-archive"></i>
        </span><span>Hapus</span></a>
      </td>
      </tr>
      <tr>
      <td>Secret Number</td>
      <td>Anak Agung Ayu Puspa Aditya Karang</td>
      <td>Indonesia</td>
      <td>December 25, 1996</td>
      <td><figure class="image is-64x64">
               <img class="is-rounded" src="assets/gambar/dita.jpg">
          </figure>
      </td>
      <td><a class="button is-primary" href="dita.html"> <span class="icon is-small">
          <i class="fas fa-edit"></i>
          </span><span>Ubah</span></a> |
          <a class="button is-danger" onclick="return confirm('Hapus Data Ini???'); "> <span class="icon is-small">
          <i class="fas fa-archive"></i>
        </span><span>Hapus</span></a>
      </td>
      </tr>
      <tr>
      <td>Secret Number</td>
      <td>Jinny Park</td>
      <td>Korea-USA</td>
      <td>January 20, 1998</td>
      <td><figure class="image is-64x64">
               <img class="is-rounded" src="assets/gambar/jinny.jpg">
          </figure>
      </td>
      <td><a class="button is-primary " href="jinny.html"> <span class="icon is-small">
          <i class="fas fa-edit"></i>
          </span><span>Ubah</span></a> |
          <a class="button is-danger" onclick="return confirm('Hapus Data Ini???');"> <span class="icon is-small">
          <i class="fas fa-archive"></i>
        </span><span>Hapus</span></a>
      </td>
      </tr>
      <tr>
      <td>Secret Number</td>
      <td> Lee Soo Dam </td>
      <td>Korea</td>
      <td>November 9, 1999</td>
      <td><figure Membuat Tabel untuk Operasi CRUD Menggunakan Bulma CSS (Part 2)class="image is-64x64">
               <img class="is-rounded" src="assets/gambar/soodam.jpg">
          </figure>
      </td>
      <td><a class="button is-primary" href="soodam.html"> <span class="icon is-small">
          <i class="fas fa-edit"></i>
          </span><span>Ubah</span></a> |
          <a class="button is-danger" onclick="return confirm('Hapus Data Ini???'); "> <span class="icon is-small">
          <i class="fas fa-archive"></i>
        </span><span>Hapus</span></a>
      </td>
      </tr>
      <tr>
      <td>Secret Number</td>
      <td>Denise Kim</td>
      <td>Korea-USA</td>
      <td>January 11, 2001</td>
      <td><figure class="image is-64x64">
               <img class="is-rounded" src="assets/gambar/denise.jpg">
          </figure>
      </td>
      <td><a class="button is-primary" href="denise.html"> <span class="icon is-small">
          <i class="fas fa-edit"></i>
          </span><span>Ubah</span></a> |
          <a class="button is-danger" onclick="return confirm('Hapus Data Ini???'); "> <span class="icon is-small">
          <i class="fas fa-archive"></i>
        </span><span>Hapus</span></a>
      </td>
      </tr>
    </tbody>    
  </table>
</div>
</div>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Sebelumnya</a>
  <a class="pagination-next">Berikutnya</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 10">10</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 11" aria-current="page">11</a></li>
    <li><a class="pagination-link" aria-label="Goto page 12">12</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">16</a></li>
  </ul>
</nav>
</div>


  </body>
  <footer class="footer">
  <div class="content has-text-centered">
    <p>
      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
    </p>
  </div>
</footer>
</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:

File index.html