Cara Membuat CRUD AJAX CodeIgniter (Penjelasan + jQuery + Material Dashboard) Lengkap

Cara Membuat CRUD AJAX CodeIgniter (Penjelasan + jQuery + Material Dashboard) Lengkap
Di Posting Oleh : wandi
Kategori : CodeIgniter PHP Programming

Pada Aplikasi web, didalamnya pasti tidak terlepas dari manajemen data. Manajemen tersebut berupa menampilkan, menambah, mengedit, dan menghapus data (CRUD)

Pada artikel sebelumnya, kita sudah belajar mengenai dasar-dasar bagaimana cara membuat halaman CRUD database. Baca: Menampilkan data (CRUD) dari database. Pada artikel ini kita akan belajar membuat CRUD database didalam template Material Dashboard dan menggunakan sistem AJAX, yang berarti melakukan aktifitas CRUD tanpa refresh halaman.

Ajax adalah singkatan dari Asynchronous Javascript And Xmlhttp. Ajax dapat membuat request dan mendapatkan response dari belakang layar (background process) tanpa melakukan refresh pada halaman.

Download source code ada dibawah.

Pada artikel ini, kita akan membuat halaman CRUD seperti berikut:

Bagian tutorial:

Menyiapkan Project

Menyiapkan Database

Masuk ke PhpMyAdmin, buat database dan tabelnya seperti berikut.
(nama database: perpustakaandb)

Isi tabel tersebut, 1 atau 2 buah data, Isi kolom data terserah anda

Mengkonfigurasi Project CI

Kita akan menggunakan templating yang sudah dibuat pada artikel sebelumnya.
Ganti nama foldernya, (pada artikel ini kita namai "ciajax")

Buka file config.php pada application/config, rubah isi base_url menjadi alamat yang benar (localhost/ciajax)

Tambahkan library database pada application/config/autoload.php

Masih pada folder yang sama, buka database.php, isi parameter database sesuai dengan database yang telah kita buat

Membuat Model

Buka folder application/models, buat file bernama BukuModel.php. Isikan dengan kode berikut:

<?php 
defined('BASEPATH') OR exit('No direct script access allowed');

class BukuModel extends CI_Model {
 public $table = 'buku';
  
 public function show($limit, $offset)
 {
  $query = $this->db->get($this->table, $limit, $offset);
  $data['object'] = $query->result();
  $data['array'] = $query->result_array();
  $data['count'] = $query->num_rows();
  return $data;
 }

 public function single($id)
 {
  $query = $this->db->get_where($this->table, array('id' => $id));
  $data['object'] = $query->row();
  $data['array'] = $query->row_array();
  $data['count'] = $query->num_rows();
  return $data;
 }

 public function insert($data)
 {
  return $this->db->insert($this->table, $data);
 }

 public function update($data, $id)
 {
  return $this->db->update($this->table, $data, array('id' => $id));
 }

 public function delete($id)
 {
  return $this->db->delete($this->table, array('id' => $id));
 }
}

/* End of file BukuModel.php */
/* Location: ./application/models/BukuModel.php */
?>

Penjelasan

Model ini memuat fungsi dasar CRUD seperti
show untuk menampilkan data banyak
single untuk menampilkan 1 data
insert, update dan delete
Pada method model show() dan single(), nilai kembalian dari method tersebut berupa array yang juga memuat count atau jumlah data.

Membuat Tampilan

Membuat controller

Buat controller Data.php, kemudian buat method buku()
Sesuai dengan artikel sebelumnya, tetapkan elemen dinamisnya dan load view ke data/buku/list.php. Source Code Method seperti berikut:

 public function buku()
 {
  // Judul
  $data['ui_app_name'] = 'Perpus-Sys';
  $data['ui_title'] = 'Perpus-Sys - Data Buku';

  // CSS & JS
  $data['ui_css'] = array('custom/css/default.css');
  $data['ui_js'] = array();

  // Navigasi
  $data['ui_sidebar_nav'] = array(
   'Data|book' => array(
    'Data Buku|book|' .site_url('data/buku'),
    'Data Siswa|face|#',
   )
  );
  $data['ui_sidebar_active'] = 'Data|Data Buku';
  $data['ui_top_nav'] = array(
   'Buku|book|' .site_url('data/buku'),
   'Pegawai|face|#'
  );
  $data['ui_top_nav_active'] = 'Buku';
  $this->load->view('data/buku/list', $data);
 }

Membuat view

Pada folder application/views buat file list.php dan letakkan pada folder data/buku/list.php

Pada artikel sebelumnya, sudah dijelaskan bahwa struktur utama UI view seperti berikut, copy code berikut kedalam file view anda

<?php $this->view('template/header.php')?>
<?php $this->view('template/navigation.php')?>

<!-- KONTEN UTAMA DISINI -->

<?php $this->view('template/js_script.php') ?>
<script type="text/javascript">

//  Kode Javascript jQuery disini

</script>
<?php $this->view('template/footer.php')?>

Kita buat tampilan UI pada konten utama, isikan kode view html bootstrap berikut pada bagian konten

<div class="row">
  <div class="col-sm-12">
    <div class="card mb-0">
      <div class="card-body pt-0">
        <form>
          <div class="row justify-content-center">
            <div class="col-2 col-sm-auto">
              <div class="form-group mb-0 pb-0" style="margin-top: 20px">
                <button id="filter-previous_page" class="btn btn-white btn-round btn-just-icon" type="button" data-toggle="tooltip" data-placement="top" title="Halaman sebelumnya">&laquo;</button>
              </div>
            </div>
            <div class="col-4 col-sm-1 pr-0">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Page</label>
                <input type="number" id="filter-page" class="form-control" data-toggle="tooltip" title="Halaman maksimum: 42" value="1">
              </div>
            </div>
            <div class="col-4 col-sm-1 pl-0">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Limit</label>
                <input type="number" id="filter-limit" class="form-control" value="50">
              </div>
            </div>
            <div class="col-2 col-sm-auto pl-0">
              <div class="form-group mb-0 pb-0" style="margin-top: 20px">
                <button id="filter-next_page" class="btn btn-white btn-round btn-just-icon" type="button" data-toggle="tooltip" data-placement="top" title="Halaman selanjutnya">&raquo;</button>
              </div>
            </div>
            <div class="col-9 col-sm-4 pr-0">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Cari Judul Buku</label>
                <div class="input-group">
                  <input type="text" id="filter-cari" class="form-control">
                </div>
              </div>
            </div>
            <div class="col-auto pl-0 col-sm-auto">
              <div class="form-group mb-0 pb-0" style="margin-top: 20px">
                <button class="btn btn-white btn-round btn-just-icon" type="button" data-toggle="tooltip" data-placement="top" title="Halaman selanjutnya">
                  <i class="material-icons">search</i>
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-header card-header-tabs card-header-primary">
        <div class="nav-tabs-navigation">
          <div class="nav-tabs-wrapper">
            <h4 class="card-title nav-tabs-title">Data Buku</h4>
            <ul class="nav nav-tabs justify-content-end">
              <li class="nav nav-item">
                <a class="nav-link" href="#" data-toggle="modal" data-target="#modal-tambah_buku">
                  <i class="material-icons">add</i>
                  Tambah Buku
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead class="text-primary">
              <tr>
                <th>No</th>
                <th>Judul</th>
                <th>Pengarang</th>
                <th>Penerbit</th>
                <th>Tahun</th>
                <th>Jumlah Buku</th>
                <th>Jumlah Eksemplar</th>
                <th>Kategori</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="data-load-buku">
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modal-tambah_buku">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Tambah data buku</h4>
        <button class="close" data-dismiss="modal" type="button">&times;</button>
      </div>
      <div class="modal-body">
        <form id="form-tambah_buku">
          <div class="row">
            <div class="col-12">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Judul Buku</label>
                <input type="text" name="judul" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-5">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Pengarang</label>
                <input type="text" name="pengarang" class="form-control">
              </div>
            </div>
            <div class="col-sm-5">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Penerbit</label>
                <input type="text" name="penerbit" class="form-control">
              </div>
            </div>
            <div class="col-sm-2">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Tahun</label>
                <input type="number" name="tahun" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Jumlah Buku</label>
                <input type="number" name="jumlah_buku" class="form-control">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Jumlah Eksemplar</label>
                <input type="number" name="jumlah_eksemplar" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Kategori</label>
                <input type="text" name="kategori" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <input type="submit" name="submit" class="btn btn-block btn-primary" value="Tambah">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-edit_buku">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit Data</h4>
        <button type="button" class="close" data-dismiss='modal'>&times;</button>
      </div>
      <div class="modal-body">
        <form id="form-edit_buku">
          <input type="hidden" name="id">
          <div class="row">
            <div class="col-12">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Judul Buku</label>
                <input type="text" name="judul" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-5">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Pengarang</label>
                <input type="text" name="pengarang" class="form-control">
              </div>
            </div>
            <div class="col-sm-5">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Penerbit</label>
                <input type="text" name="penerbit" class="form-control">
              </div>
            </div>
            <div class="col-sm-2">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Tahun</label>
                <input type="number" name="tahun" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Jumlah Buku</label>
                <input type="number" name="jumlah_buku" class="form-control">
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Jumlah Eksemplar</label>
                <input type="number" name="jumlah_eksemplar" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group bmd-form-group">
                <label class="bmd-label-floating">Kategori</label>
                <input type="text" name="kategori" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <input type="submit" name="submit" class="btn btn-block btn-primary" value="Edit">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Penjelasan

Tampilan UI secara umum terdiri dari filter data (berupa tombol dan input) dan tabel
Pada tabel di tag tbody, ditambahkan id #data-load-buku. Pada tbody inilah data dimuat oleh ajax
Selain itu juga terdapat tombol Tambah Buku. Tombol berikut memiliki atribut bootstrap untuk membuka modal berisi tambah data.

Membuat Method untuk ajax

Sama dengan view, ajax juga mengakses method controller untuk mendapatkan data dari database. Singkatnya ajax dapat mengakses controller. Seperti yang kita tahu jika kita bisa mengakses controller, kita bisa mengakses segalanya termasuk model database.

Kita pisahkan method untuk menampilkan halaman dengan method untuk melayani ajax.
Karena untuk menampilkan data dari database lebih rumit dari yang lain (seperti ada filter, paginasi dll), maka kita pisahkan methodnya menjadi read_buku() untuk menampilkan sementara write_buku() untuk menambah, edit, dan hapus buku.
Secara keseluruhan, method tersebut seperti berikut (tambahkan kedalam controller Data.php)

public function read_buku($mode = 'single', $ui = FALSE, $pagination = FALSE)
{
 $this->load->model('BukuModel');

 // -----------------------------
 // Ambil semua data
 // -----------------------------
 if ($mode == 'show') {
  $this->db->start_cache();

  // Pagination
  $data['limit'] = $this->input->get('limit');
  if ($data['limit'] == '') {
   $data['limit'] = 0;
  }
  $data['page'] = $this->input->get('page');
  if ($data['page'] == '') {
   $data['page'] = 1;
  }
  $data['offset'] = ($data['page'] - 1) * $data['limit'];
  $this->db->stop_cache();

  // Pencarian Judul
  $cari = $this->input->get('cari');
  if ($cari != '') {
   $this->db->like('judul', $cari, 'BOTH');
  }

  // Pengurutan Data
  $order = $this->input->get('order');
  if ($order != '') {
   $this->db->order_by('id', $order);
  }

  // Pengambilan Data
  $data['data_buku'] = $this->BukuModel->show($data['limit'], $data['offset']);
  $this->db->flush_cache();

  // Route ke Pagination atau data
  if ($pagination != FALSE) {
   $data_buku_all = $this->BukuModel->show(0, 0);
   $pagination_data['limit'] = $data['limit'];
   $pagination_data['offset'] = $data['offset'];
   $pagination_data['page'] = $data['page'];
   $pagination_data['total_data'] = $data_buku_all['count'];
   $pagination_data['total_page'] = floor($pagination_data['total_data'] / $pagination_data['limit']);
   if (($pagination_data['total_data'] % $pagination_data['limit']) > 0) {
    $pagination_data['total_page']++; 
   }
   echo json_encode($pagination_data);
  }
  else {
   $this->load->view('data/buku/' .$ui, $data);
  }
 }

 // -------------------------------------
 // Ambil 1 Data
 // -------------------------------------
 else if ($mode == 'single') {
  $id = $this->input->get('id');
  $data = $this->BukuModel->single($id);
  echo json_encode($data);
 }
}

public function write_buku($mode)
{
 $this->load->model('BukuModel');
 if ($mode == 'insert') {
  if ($this->input->is_ajax_request()) {
   $data = array(
    'judul' => $this->input->post('judul'),
    'pengarang' => $this->input->post('pengarang'),
    'penerbit' => $this->input->post('penerbit'),
    'tahun' => $this->input->post('tahun'),
    'jumlah_buku' => $this->input->post('jumlah_buku'),
    'jumlah_eksemplar' => $this->input->post('jumlah_eksemplar'),
    'kategori' => $this->input->post('kategori')
   );
   $result = $this->BukuModel->insert($data);
   echo json_encode($result);
  }
 }
 else if ($mode == 'update') {
  if ($this->input->is_ajax_request()) {
   $id = $this->input->post('id');
   $data = array(
    'judul' => $this->input->post('judul'),
    'pengarang' => $this->input->post('pengarang'),
    'penerbit' => $this->input->post('penerbit'),
    'tahun' => $this->input->post('tahun'),
    'jumlah_buku' => $this->input->post('jumlah_buku'),
    'jumlah_eksemplar' => $this->input->post('jumlah_eksemplar'),
    'kategori' => $this->input->post('kategori')
   );
   $result = $this->BukuModel->update($data, $id);
   echo json_encode($result);
  }
 }
 else if ($mode == 'delete') {
  if ($this->input->is_ajax_request()) {
   $id = $this->input->post('id');
   $result = $this->BukuModel->delete($id);
   echo json_encode($result);
  }
 }
}

Penjelasan

Pada method read_buku() terbagi 3 parameter,

pertama parameter mode yang berisi show atau single.
show berfungsi untuk menampilkan data banyak,
didalamnya kita bisa tambahkan filter seperti pencarian (db->like), order (db->order) dll.
Parameter ui.
Pada bagian show, saya tambahkan parameter ui untuk mendefinisikan view mana yang akan digunakan.
Parameter pagination.
jika parameter ini di isi, maka akan menampilkan data paginasi, seperti maksimum halaman, baris / halaman dll.

Jika Ajax mengakses ciajax/read_buku/show/ajax-list-1, maka akan muncul data buku pada view ajax-list-1.php
Berbeda pada method write_buku(), didalamnya mempunyai parameter mode yang berisi insert, update atau delete

Langkah selanjutnya, kita buat view untuk ajax. pada folder application/views/data/buku buat file ajax-list-table.php. Copy kode berikut:

<?php 
 if ($data_buku['count'] > 0) {
  $no = 0 + $offset;
  foreach ($data_buku['object'] as $buku) {
   $no++;
?>
<tr>
 <td><?=$no?></td>
 <td><?=$buku->judul?></td>
 <td><?=$buku->pengarang?></td>
 <td><?=$buku->penerbit?></td>
 <td><?=$buku->tahun?></td>
 <td><?=$buku->jumlah_buku?></td>
 <td><?=$buku->jumlah_eksemplar?></td>
 <td><?=$buku->kategori?></td>
 <td>
  <a href="#" class="edit-data text-primary" data-id="<?=$buku->id?>">
   <i class="material-icons">edit</i>
  </a>
  <a href="#" class="hapus-data text-danger" data-id="<?=$buku->id?>">
   <i class="material-icons">delete</i>
  </a>
 </td>
</tr>
<?php
  }
 }
?>

Penjelasan

Ingat saat membuat halaman view tadi?, kita sudah menyiapkan tabel dan mengosongkan isi dari <tbody>. File inilah yang akan ditempatkan didalam <tbody>
File tersebut berisi baris tabel (<tr>)
View ini dipanggil dari method read_buku() yang pada method tersebut kita sudah dapatkan data dari database dan ditampilkan di view ini menggunakan foreach.
Yang paling inti adalah pada bagian link edit dan delete. Masing-masing memiliki atribut data-id yang berisi id setiap baris data. Id inilah yang nantinya diolah lewat script jQuery untuk mengedit dan menghapus data.
Selain itu juga memiliki class edit-data dan hapus-data agar dapat dipanggil oleh jQuery nanti

Method + View untuk melayani ajax selesai, anda bisa akses ke (localhost/ciajax/data/read_buku/show/ajax-list-table?limit=50&page=1) . Maka akan muncul tampilan seperti berikut. Itu berarti, data berhasil didapatkan berupa kumpulan <tr> siap diakses oleh ajax

Membuat Script jQuery untuk setiap elemen

Disinilah inti dari tutorial ini. Semua elemen seperti tombol, inputan, load data buku di lakukan oleh Javascript. Pada bagian ini, langkah langkah dibawah saya buat terpisah agar anda dapat memahami dengan mudah

Masih berada di view anda, kode jQuery ini terletak pada bagian bawah setelah load template js_script.php

        ... kode ui sebelumnya
    </div>
</div>

<?php $this->view('template/js_script.php') ?>
<script type="text/javascript">

//  Kode Javascript jQuery disini

</script>
<?php $this->view('template/footer.php')?>

Tambahkan kode dibawah ini, kedalam bagian kode jquery

// -------------------------------------
// Pemanggilan Ajax
// -------------------------------------
var read_buku = {
 limit: 50,
 page: 1
}
function refresh_buku() {
 $.ajax({
  url: '<?=site_url('data/read_buku/show/ajax-list-table/pagination')?>',
  type: 'GET',
  dataType: 'json',
  data: read_buku,
 })
 .done(function(data) {
  if (read_buku.page == 1) {
   $("#filter-previous_page").addClass('disabled');
  }
  else {
   $("#filter-previous_page").removeClass('disabled');
  }
  if (read_buku.page == data.total_page) {
   $("#filter-next_page").addClass('disabled');
  }
  else {
   $("#filter-next_page").removeClass('disabled');
  }
  $("#filter-page").attr('max', data.total_page);
  $("#filter-page").attr('title', 'Halaman Maksimum: ' + data.total_page);
  $("#filter-page").attr('data-original-title', 'Halaman Maksimum: ' + data.total_page);
  $.ajax({
   url: '<?=site_url('data/read_buku/show/ajax-list-table')?>',
   type: 'GET',
   dataType: 'html',
   data: read_buku,
  })
  .done(function(data) {
   $("#data-load-buku").fadeOut(100, function() {
    $.getScript('<?=site_url('assets/custom/js/default.js')?>');
    $("#data-load-buku").html(data).fadeIn(100);
    event_buku();
   });
  });
 });
}
refresh_buku();

// -------------------------------------
// Event setelah data buku dimuat
// -------------------------------------
function event_buku() {

 // ----------------------------------------
 // Event klik edit buku
 // ----------------------------------------
 ctx_modal_edit_buku = $("#modal-edit_buku");
 $(".edit-data").click(function(e) {
  id = $(this).data('id');
  $.ajax({
   url: '<?=site_url('data/read_buku/single')?>',
   type: 'GET',
   dataType: 'json',
   data: {id: id},
  })
  .done(function(data) {
   $("#form-edit_buku input[name='id']").val(data.object.id);
   $("#form-edit_buku input[name='judul']").val(data.object.judul);
   $("#form-edit_buku input[name='pengarang']").val(data.object.pengarang);
   $("#form-edit_buku input[name='penerbit']").val(data.object.penerbit);
   $("#form-edit_buku input[name='tahun']").val(data.object.tahun);
   $("#form-edit_buku input[name='jumlah_buku']").val(data.object.jumlah_buku);
   $("#form-edit_buku input[name='jumlah_eksemplar']").val(data.object.jumlah_eksemplar);
   $("#form-edit_buku input[name='kategori']").val(data.object.kategori);
   ctx_modal_edit_buku.modal('show').on('shown.bs.modal', function(e) {
    $("#form-edit_buku input[name='judul']").focus();
   });
  });
 });

 // ----------------------------------------
 // Hapus Data Buku
 // ----------------------------------------
 $(".hapus-data").click(function(e) {
  e.preventDefault();
  id = $(this).data('id');
  if (confirm("Anda yakin?")) {
   $.ajax({
    url: '<?=site_url('data/write_buku/delete')?>',
    type: 'POST',
    dataType: 'json',
    data: {id: id},
   })
   .done(function(data) {
    if (data) {
     refresh_buku();
     buat_notifikasi({
      icon: 'done_outline',
      message: "Data berhasil dihapus",
      type: 'success'
     });
    }
   });
  }
 });

}

// -------------------------------------
// Event Filter / Penyaringan Data
// -------------------------------------
var ctx_limit = $("#filter-limit"); 
var ctx_page = $("#filter-page"); 
var ctx_next_page = $("#filter-next_page"); 
var ctx_previous_page = $("#filter-previous_page"); 
var ctx_cari = $("#filter-cari");

ctx_limit.on('input', function(e) {
 value = $(this).val();
 if (value > 0) {
  read_buku.limit = value;
 }
 else {
  $(this).val(50);
 }
 $("#filter-page").val(1);
 read_buku.page = 1;
 refresh_buku();
});
ctx_page.on('input', function(e) {
 value = $(this).val();
 if (value > 0) {
  read_buku.page = value;
 }
 else {
  $(this).val(1);
 }
 refresh_buku();
});
ctx_next_page.click(function(e) {
 disabled = $(this).hasClass('disabled');
 if (!disabled) {
  read_buku.page++;
  ctx_page.val(read_buku.page);
  refresh_buku(); 
 }
});
ctx_previous_page.click(function(e) {
 disabled = $(this).hasClass('disabled');
 if (!disabled) {
  read_buku.page--;
  ctx_page.val(read_buku.page);
  refresh_buku(); 
 }
});
ctx_cari.on('input', function(e) {
 value = $(this).val();
 if (value != '') {
  read_buku.cari = value;
 }
 else {
  delete read_buku.cari;
 }
 refresh_buku();
});


// -------------------------------------
// Tambah Data Buku
// -------------------------------------
$("#form-tambah_buku").submit(function(e) {
 e.preventDefault();
 ctx_modal = $("#modal-tambah_buku");
 form = $(this);
 $.ajax({
  url: '<?=site_url('data/write_buku/insert')?>',
  type: 'POST',
  dataType: 'json',
  data: form.serialize(),
 })
 .done(function(data) {
  if (data) {
   form[0].reset();
   ctx_modal.modal('hide');
   buat_notifikasi({
    icon: 'done_outline',
    message: "Data berhasil ditambahkan",
    type: 'success'
   });
   refresh_buku();
  }
  else {
   alert('Tidak dapat terhubung dengan database');
  }
 });
});

// -------------------------------------
// Edit buku
// -------------------------------------
$("#form-edit_buku").submit(function(e) {
 e.preventDefault();
 form = $(this);
 $.ajax({
  url: '<?=site_url('data/write_buku/update')?>',
  type: 'POST',
  dataType: 'json',
  data: form.serialize(),
 })
 .done(function(data) {
  if (data) {
   form[0].reset();
   ctx_modal_edit_buku.modal('hide');
   buat_notifikasi({
    icon: 'done_outline',
    message: 'Data berhasil di edit',
    type: 'success'
   });
   refresh_buku();
  }
 });
});

Untuk penjelasan, pada script ini sudah tertulis didalam kode dalam bentuk comment. Jika comment tersebut belum dimengerti, anda bisa tulis pertanyaan di kolom komentar

Semua siap, waktunya testing

Buka browser, ketikkan url localhost/ciajax/data/barang. Coba tambahkan, edit ataupun hapus data.

Kesimpulan

Pada dasarnya, alur data hampir sama dengan CRUD database biasa.

Pada operasi read (menampilkan data)

Perbedaannya terdapat pada cara mendapatkan data. Jika pada CRUD database biasa, data ditampilkan bersamaan dengan tampilan utama. Data dari DB dilempar bersamaan dengan $this->load->view().

Namun jika CRUD Ajax, Tampilan utama dimuat terlebih dahulu dan saat tampilan sudah siap, kode jQuery Ajax diam diam mengakses method controller untuk mengambil data.

Pada operasi insert, update, delete (Tambah, Edit, Hapus)

Perbedaannya terdapat pada cara suatu form mengirimkan data. Pada CRUD biasa, form mengirimkan data dengan mengakses URL dalam method transfer POST, singkatnya form harus berpindah halaman untuk mengirimkan data, dan mendapat response berupa redirect ke list data lagi.

Sedangkan CRUD Ajax, saat form disubmit, kode Ajax menangkap data dan mencegah pergantian halaman. Selanjutnya, sama dengan CRUD biasa data tersebut diterima oleh method controller untuk diteruskan ke model.

Source Code (disertai file sql didalamnya)