Membuat Aplikasi CRUD dengan JavaScript

Jan 16, 2024

—

Berikut adalah contoh kode untuk membuat aplikasi CRUD (Create, Update, dan Delete) menggunakan JavaScript dan UI Bootstrap. Aplikasi ini memungkinkan pengguna untuk mengubah data yang telah diinput tanpa menggunakan database.

See the Pen Aplikasi CRUD JavaScript by WebbizID (@De-Orchids) on CodePen.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi CRUD</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <h1>Aplikasi CRUD</h1>

    <form id="form-data">
      <div class="form-group">
        <label for="nama">Nama:</label>
        <input type="text" class="form-control" id="nama" required>
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" required>
      </div>
      <button type="submit" class="btn btn-primary">Tambah</button>
    </form>

    <table class="table mt-4">
      <thead>
        <tr>
          <th>Nama</th>
          <th>Email</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody id="data-table">
        <!-- Data akan ditambahkan secara dinamis menggunakan JavaScript -->
      </tbody>
    </table>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    // Fungsi untuk menambahkan data ke tabel
    function tambahData() {
      var nama = document.getElementById('nama').value;
      var email = document.getElementById('email').value;

      var row = '<tr>' +
        '<td>' + nama + '</td>' +
        '<td>' + email + '</td>' +
        '<td>' +
        '<button class="btn btn-sm btn-primary" onclick="editData(this)">Edit</button> ' +
        '<button class="btn btn-sm btn-danger" onclick="hapusData(this)">Hapus</button>' +
        '</td>' +
        '</tr>';

      document.getElementById('data-table').innerHTML += row;

      // Reset form setelah data ditambahkan
      document.getElementById('form-data').reset();
    }

    // Fungsi untuk mengedit data
    function editData(button) {
      var row = button.parentNode.parentNode;
      var nama = row.cells[0].innerHTML;
      var email = row.cells[1].innerHTML;

      document.getElementById('nama').value = nama;
      document.getElementById('email').value = email;

      // Hapus baris setelah data diambil untuk diedit
      row.remove();
    }

    // Fungsi untuk menghapus data
    function hapusData(button) {
      var row = button.parentNode.parentNode;
      row.remove();
    }

    // Event listener untuk form submit
    document.getElementById('form-data').addEventListener('submit', function (e) {
      e.preventDefault();
      tambahData();
    });
  </script>
</body>

</html>

HTML

Anda dapat mengganti kode ini sesuai dengan kebutuhan Anda. Semoga contoh ini dapat membantu Anda dalam membuat aplikasi CRUD sederhana menggunakan JavaScript dan UI Bootstrap.

Membuat Aplikasi CRUD dengan JavaScript

Artikel Terbaru ⭐