Membuat Tabel untuk Operasi CRUD Menggunakan Bulma CSS (Part 5 - Selesai)

Membuat Tabel untuk Operasi CRUD Menggunakan Bulma CSS (Part 5 – Selesai)

Di bagian terakhir ini kita akan membuat sebuah file Javascript untuk menampilkan sebuah popup alert sebagai suatu konfirmasi sebelum menghapus data.

Sebetulnya kita tidak perlu membuat sebuah file html untuk menghapus data. Karena di file index.html sudah tersedia link untuk melakukan hal tersebut. Buka kembali file index.html kamu.

<!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>

Pada index.html terdapat tombol warna merah yang bertuliskan Hapus, tombol ini bila ditekan akan muncul sebuah popup konfirmasi apakah kita akan benar-benar menghapus data yang dipilih atau tidak. Bila yakin maka perintah untuk menghapus data akan dieksekusi bila tidak maka perintah menghapus akan dibatalkan. Berikut ini adalah tampilan popup konfirmasinya yang dibuat menggunakan Javascript.

Javascript konfirmasi hapus data

File Download Project

File ini bisa kamu download di link Github di bawah :

Download