TUTORIAL

Codeigniter

Tutorial Membuat Create, Read, Update dan Delete (CRUD) Menggunakan CodeIgniter 3, Bootstrap 4.5.2, AJAX dan Datatable

19-08-2020 20:37:44 BY Alfikri Read 538x 25 min read

Halo Klinik Coders...

Ditutorial ini kita akan mempelajari bagaimana cara membuat Create, Read, Update dan Delete (CRUD) menggunakan CodeIgniter 3, Bootstrap 4.5.2, AJAX dan Datatable.

Tahap#1 - Pendahuluan

CRUD adalah singkatan untuk Create, Read, Update, dan Delete. Tugasnya adalah memanipulasi data pada Database.

Tahap#2 - Persiapan

Pada tahap ini kita membutuhkan tool sebagai berikut :

  1. CodeIgniter
    Disini saya menggunakan CodeIgniter 3. Teman-teman bisa download disini.
  2. Bootstrap
    Untuk membuat tampilannya lebih bagus, saya menggunakan Bootstrap 4.5.2. Teman-teman bisa membaca lebih lanjut di https://getbootstrap.com/
  3. Datatable
    Untuk proses menamplikan data (READ), saya menggunakan library Datatable.

Selanjutnya buatlah struktur folder CodeIgniter 3 teman-teman sebagai berikut :

Tahap#3 - Membuat Database dan Table

Ditahap ini teman-teman bisa merujuk ke tutorial sebelumnya yaitu Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan PHP Native, Library FAKER, JQuery, Select2 dan AJAX (Studi Kasus : Data Siswa).

Tahap#4 - Konfigurasi

Ditahap ini kita akan mengkonfigurasi CodeIgniter agar berjalan dengan baik.

  1. "application/config/autoload.php" dan ubah seperti ini :
    $autoload['libraries']  = array('database');
    $autoload['helper']     = array('url');
  2. "application/config/config.php" dan ubah seperti ini :
    $config['base_url'    'http://localhost/ci_crud_ajax_datatables/';
  3. "application/config/database.php" dan ubah seperti ini :
    $db['default'] = array(
      'dsn' => '',
      'hostname' => 'localhost',
      'username' => 'root',
      'password' => '',
      'database' => 'sekolah',
      'dbdriver' => 'mysqli',
      'dbprefix' => '',
      'pconnect' => FALSE,
      'db_debug' => (ENVIRONMENT !== 'production'),
      'cache_on' => FALSE,
      'cachedir' => '',
      'char_set' => 'utf8',
      'dbcollat' => 'utf8_general_ci',
      'swap_pre' => '',
      'encrypt' => FALSE,
      'compress' => FALSE,
      'stricton' => FALSE,
      'failover' => array(),
      'save_queries' => TRUE
    );
  4. "application/config/database.php" dan ubah seperti ini :
    $route['default_controller'] = 'siswa';

Tahap#5 - Membuat Controller Siswa.php

Ditahap ini kita akan membuat sebuah controller dengan nama "Siswa.php". Controller ini memiliki 6 Method yaitu

  1. __construct()
    public function __construct()
      {
        parent::__construct();
        $this->load->model([
          'siswa_model'
        ]);
      }

    Berfungsi untuk meload model. Disini kita menggunakan model dengan nama "siswa_model".
  2. index()
    public function index()
      {
        $this->load->view('siswa');
      }

    Berfungsi untuk menampilkan proses CRUD melalui view yang bernama "siswa".
  3. get_siswa()
    public function get_siswa()
      {
        if (!$this->input->is_ajax_request()) {
          show_404(); // Jika tidak akses melalui ajax request
        } else {
          $column_order   = ['''nama_siswa']; // Order berdasarkan columns pada table siswa
          $column_search  = ['nama_siswa']; // Pencarian berdasarkan columns nama siswa
          $order          = ['nama_siswa' => 'ASC']; // Sorting berdasarkan nama siswa menggunakan ASC
          $list           = $this->siswa_model->get_datatables('siswa'$column_order$column_search$order); // Memanggil siswa model untuk menampilkannya ke datatables
          $data           = [];
          $no             = $_POST['start'];
          foreach ($list as $key => $lists) {
            $no++;
            $data[$key][]  = $no;
            $data[$key][]  = $lists->nama_siswa;
            $data[$key][]  = '<a href="javascript:;" class="btn btn-warning btn-sm" onclick="edit(' . $lists->id_siswa . ')">EDIT</a>';
            $data[$key][]  = '<a href="javascript:;" class="btn btn-danger btn-sm" onclick="hapus(' . $lists->id_siswa . ')">HAPUS</a>';
          }

          // Output menggunakan JSON
          $output = [
            "draw"              => $_POST['draw'],
            "recordsTotal"      => $this->siswa_model->count_all('siswa'),
            "recordsFiltered"   => $this->siswa_model->count_filtered('siswa'$column_order$column_search$order),
            "data"              => $data,
          ];

          echo json_encode($output);
        }
      }

    Berfungsi untuk menampilkan data siswa ke Datatable menggunakan format JSON.
  4. save_siswa()
    public function save_siswa()
      {
        if (!$this->input->is_ajax_request()) {
          show_404();
        } else {
          $simpan = $this->siswa_model->save_siswa();
          if ($simpan) {
            $this->outputs['status']    = true;
            $this->outputs['message']   = "Data berhasil disimpan !";
          }

          echo json_encode($this->outputs);
        }
      }

    Berfungsi untuk menyimpan data siswa kedalam tabel siswa.
  5. edit_siswa()
    public function edit_siswa()
      {
        if (!$this->input->is_ajax_request()) {
          show_404();
        } else {
          $siswa = $this->siswa_model->get_siswa_by_id();
          if ($siswa->num_rows() > 0) {
            $this->outputs['data'] = $siswa->row();
            $this->outputs['status']  = true;
          }

          echo json_encode($this->outputs);
        }
      }

    Berfungsi untuk menampilkan detail siswa berdasarkan id_siswa pada tabel siswa.
  6. update_siswa()
    public function update_siswa()
      {
        if (!$this->input->is_ajax_request()) {
          show_404();
        } else {
          $update = $this->siswa_model->update_siswa();
          if ($update) {
            $this->outputs['status']  = true;
            $this->outputs['message'] = "Data berhasil diupdate !";
          }

          echo json_encode($this->outputs);
        }
      }

    Berfungsi untuk mengupdate data siswa berdasarkan id_siswa pada tabel siswa.
  7. delete_siswa()
    public function delete_siswa()
      {
        if (!$this->input->is_ajax_request()) {
          show_404();
        } else {
          $delete = $this->siswa_model->delete_siswa();
          if ($delete) {
            $this->outputs['status']  = true;
            $this->outputs['message'] = "Data berhasil dihapus !";
          }

          echo json_encode($this->outputs);
        }
      }

    Berfungsi untuk menghapus data siswa berdasarkan id_siswa pada tabel siswa.

Untuk script lebih lengkapnya bisa kita buat seperti ini :

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

class Siswa extends CI_Controller
{

  public $outputs = [
    'status'  => false,
    'message' => '',
    'data'    => []
  ];

  public function __construct()
  {
    parent::__construct();
    $this->load->model([
      'siswa_model'
    ]);
  }

  public function index()
  {
    $this->load->view('siswa');
  }

  public function get_siswa()
  {
    if (!$this->input->is_ajax_request()) {
      show_404(); // Jika tidak akses melalui ajax request
    } else {
      $column_order   = ['''nama_siswa']; // Order berdasarkan columns pada table siswa
      $column_search  = ['nama_siswa']; // Pencarian berdasarkan columns nama siswa
      $order          = ['nama_siswa' => 'ASC']; // Sorting berdasarkan nama siswa menggunakan ASC
      $list           = $this->siswa_model->get_datatables('siswa'$column_order$column_search$order); // Memanggil siswa model untuk menampilkannya ke datatables
      $data           = [];
      $no             = $_POST['start'];
      foreach ($list as $key => $lists) {
        $no++;
        $data[$key][]  = $no;
        $data[$key][]  = $lists->nama_siswa;
        $data[$key][]  = '<a href="javascript:;" class="btn btn-warning btn-sm" onclick="edit(' . $lists->id_siswa . ')">EDIT</a>';
        $data[$key][]  = '<a href="javascript:;" class="btn btn-danger btn-sm" onclick="hapus(' . $lists->id_siswa . ')">HAPUS</a>';
      }

      // Output menggunakan JSON
      $output = [
        "draw"              => $_POST['draw'],
        "recordsTotal"      => $this->siswa_model->count_all('siswa'),
        "recordsFiltered"   => $this->siswa_model->count_filtered('siswa'$column_order$column_search$order),
        "data"              => $data,
      ];

      echo json_encode($output);
    }
  }

  public function save_siswa()
  {
    if (!$this->input->is_ajax_request()) {
      show_404();
    } else {
      $simpan = $this->siswa_model->save_siswa();
      if ($simpan) {
        $this->outputs['status']    = true;
        $this->outputs['message']   = "Data berhasil disimpan !";
      }

      echo json_encode($this->outputs);
    }
  }

  public function edit_siswa()
  {
    if (!$this->input->is_ajax_request()) {
      show_404();
    } else {
      $siswa = $this->siswa_model->get_siswa_by_id();
      if ($siswa->num_rows() > 0) {
        $this->outputs['data'] = $siswa->row();
        $this->outputs['status']  = true;
      }

      echo json_encode($this->outputs);
    }
  }

  public function update_siswa()
  {
    if (!$this->input->is_ajax_request()) {
      show_404();
    } else {
      $update = $this->siswa_model->update_siswa();
      if ($update) {
        $this->outputs['status']  = true;
        $this->outputs['message'] = "Data berhasil diupdate !";
      }

      echo json_encode($this->outputs);
    }
  }

  public function delete_siswa()
  {
    if (!$this->input->is_ajax_request()) {
      show_404();
    } else {
      $delete = $this->siswa_model->delete_siswa();
      if ($delete) {
        $this->outputs['status']  = true;
        $this->outputs['message'] = "Data berhasil dihapus !";
      }

      echo json_encode($this->outputs);
    }
  }
}


Tahap#6 - Membuat Model Siswa_model.php

Ditahap ini kita akan membuat sebuah model dengan nama "Siswa_model.php". Untuk script lebih lengkapnya bisa kita buat seperti ini :

<?php

/**
 * Author     : Alfikri, M.Kom
 * Created By : Alfikri, M.Kom
 * E-Mail     : alfikri.name@gmail.com
 * No HP      : 081277337405
 * Class      : Daftar_kontrak_model.php
 */
defined('BASEPATH') or exit('No direct script access allowed');

class Siswa_model extends CI_Model
{
  private $table = 'siswa';

  public function save_siswa()
  {
    $data = [
      'nama_siswa' => $this->input->post('nama_siswa')
    ];

    $this->db->insert($this->table$data);
    return $this->db->affected_rows();
  }

  public function update_siswa()
  {
    $data = [
      'nama_siswa' => $this->input->post('nama_siswa')
    ];

    return $this->db->update($this->table$data, [
      'id_siswa' => $this->input->post('id_siswa')
    ]);
  }

  public function delete_siswa()
  {
    return $this->db->delete($this->table, [
      'id_siswa' => $this->input->post('id_siswa')
    ]);
  }

  public function get_siswa_by_id()
  {
    $data = [
      'id_siswa' => $this->input->get('id_siswa')
    ];

    return $this->db->get_where($this->table$data);
  }

  private function _get_datatables_query($table, $column_order, $column_search, $order)
  {
    $this->db->from($table);

    $i = 0;

    foreach ($column_search as $item) {
      if ($_POST['search']['value']) {

        if ($i === 0) {
          $this->db->group_start();
          $this->db->like($item$_POST['search']['value']);
        } else {
          $this->db->or_like($item$_POST['search']['value']);
        }

        if (count($column_search) - 1 == $i)
          $this->db->group_end();
      }
      $i++;
    }

    if (isset($_POST['order'])) {


      $this->db->order_by($column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
    } else if (isset($order)) {
      $order = $order;
      $this->db->order_by(key($order), $order[key($order)]);
    }
  }

  public function get_datatables($table, $column_order, $column_search, $order, $data = null)
  {
    $this->_get_datatables_query($table$column_order$column_search$order);
    if ($_POST['length'] != -1)
      $this->db->limit($_POST['length'], $_POST['start']);
    if (!empty($data)) {
      $this->db->where($data);
    }
    $query = $this->db->get();
    return $query->result();
  }

  public function count_filtered($table, $column_order, $column_search, $order, $data = null)
  {
    $this->_get_datatables_query($table$column_order$column_search$order);
    if (!empty($data)) {
      $this->db->where($data);
    }
    $query = $this->db->get();
    return $query->num_rows();
  }

  public function count_all($table, $data = null)
  {
    if (!empty($data)) {
      $this->db->where($data);
    }

    $this->db->from($table);
    return $this->db->count_all_results();
  }
}


Tahap#7 - Membuat View siswa.php

Ditahap ini kita akan membuat sebuah view dengan nama "siswa.php". Didalam script ini kita akan mendesain sebuah form CRUD yang bisa teman-teman lihat seperti gambar berikut ini :

Untuk penjelasan view siswa ini kita menggunakan html 5, bootstrap, jquery dan datatable. Untuk script lengkap bisa dibuat seperti ini :

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <!-- Datatable -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

  <title>Create, Read, Update, dan Delete (CRUD) Data Siswa</title>
</head>

<body>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div id="notifikasi">

            </div>
            <a href="javascript:;" onclick="tambah()" class="btn btn-primary mb-3">Tambah Data</a>
            <hr>
            <table id="tabel-siswa" class="display" style="width:100%">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Nama</th>
                  <th>Edit</th>
                  <th>Hapus</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="modal-siswa" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="form-siswa">
            <div class="form-group">
              <label for="nama_siswa">Nama Siswa</label>
              <input type="hidden" id="id_siswa" name="id_siswa">
              <input type="text" class="form-control" id="nama_siswa" name="nama_siswa" required="required">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="btn-proses" onclick="proses()">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <!-- My Script -->
  <script>
    let status// Menampung status "tambah, edit dan hapus"
    let url// Menampung url untuk save dan update
    let form_siswa = 'form-siswa';

    $(document).ready(function() {
      tampil_siswa();
    });

    // Fungsi untuk menampilkan data siswa
    function tampil_siswa() {
      $('#tabel-siswa').DataTable({
        processing: true,
        serverSide: true,
        bDestroy: true,
        responsive: true,
        ajax: {
          url: "<?= base_url('index.php/siswa/get_siswa'); ?>",
          type: "POST",
          data: {},
        },
        columnDefs: [{
            targets: [0, -1, -2],
            orderable: false,
          },
          {
            width: "1%",
            targets: [0, -1, -2],
          },
        ],
      });
    }

    // Check berdasarkan status yang aktif dan set button dan url
    function check_status() {
      switch (status) {
        case 'tambah':
          $('#btn-proses').text('Save Changes');
          url = "<?= base_url('index.php/siswa/save_siswa'); ?>";
          break;
        case 'edit':
          $('#btn-proses').text('Update Changes');
          url = "<?= base_url('index.php/siswa/update_siswa'); ?>";
          break;
        case 'hapus':
          url = "<?= base_url('index.php/siswa/delete_siswa'); ?>";
          break;
      }
    }
    // Clear form
    function clear_form() {
      $('#' + form_siswa)[0].reset();
    }
    // Fungsi untuk menampilkan modal tambah data
    function tambah() {
      status = 'tambah';
      clear_form();
      $('#modal-siswa').modal('show')
        .find('.modal-title').text('Tambah Data');
    }
    // Fungsi untuk menampilkan modal edit data
    function edit(id_siswa) {
      status = 'edit';
      $('#modal-siswa').modal('show')
        .find('.modal-title').text('Edit Data');
      clear_form();
      $.ajax({
        url: "<?= base_url('index.php/siswa/edit_siswa'); ?>",
        type: "GET",
        dataType: "JSON",
        data: {
          id_siswa: id_siswa
        },
        success: function(x) {
          if (x.status == true) {
            $('#id_siswa').val(x.data.id_siswa);
            $('#nama_siswa').val(x.data.nama_siswa);
          }
        }
      });
    }
    // Fungsi untuk proses simpan dan update data siswa
    function proses() {
      check_status();

      $.ajax({
        url: url,
        type: "POST",
        dataType: "JSON",
        data: $('#' + form_siswa).serialize(),
        success: function(x) {
          if (x.status == true) {
            $('#modal-siswa').modal('hide');
            $('#notifikasi').html('');
            $('#notifikasi').append(`<div class="alert alert-success" id="notif" role="alert">
              ${x.message}
            </div>`);
            tampil_siswa();
            $("#notif").fadeTo(2000500).slideUp(500function() {
              $("#notif").slideUp(500);
            });
          }
        }
      });
    }
    // Fungsi untuk proses hapus data siswa
    function hapus(id_siswa) {
      if (confirm('Yakin ?')) {
        status = 'hapus';

        check_status();

        $.ajax({
          url: url,
          type: "POST",
          dataType: "JSON",
          data: {
            id_siswa: id_siswa
          },
          success: function(x) {
            if (x.status == true) {
              $('#notifikasi').html('');
              $('#notifikasi').append(`<div class="alert alert-success" id="notif" role="alert">
                ${x.message}
              </div>`);
              tampil_siswa();
              $("#notif").fadeTo(2000500).slideUp(500function() {
                $("#notif").slideUp(500);
              });
            }
          }
        });
      }
    }
  </script>
</body>

</html>


Tahap#8 - Eksekusi

Setelah tahapan diatas dilakukan dengan benar dan tidak ada error, maka teman-teman bisa melihat hasilnya sebagai berikut :


Sekian tutorial dari saya kali ini, mudah-mudahan bermanfaat dan jika ada kritik, saran dan pertanyaan silahkan berkomentar dibawah ini.

Let's Coding...

Demo

About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.




Leave a Reply

Scroll to Top