Tutorial CRUD Codeigniter Tanpa Reload Menggunakan AJAX dan Datatable Bootstrap 4

Assalamualaikum teman-teman. Kali ini saya akan membagikan tutorial Cara Membuat CRUD Codeigniter tanpa Reload Menggunakan AJAX dan Datatable Bootstrap 4 dari awal. Namun sebelum mengikuti tutorial ini, saya harap kalian sudah paham cara membuat CRUD Codeigniter tanpa Ajax. Jika belum silahkan ikuti tutorial yang telah kita buat sebelumnya Disini.

Perbedaannya, pada CRUD kali ini kita tidak perlu me-reload atau me-refresh halaman saat menambah, mengedit, dan menghapus data. Karena disini kita mendapat bantuan dari AJAX dan Datatable Bootstrap 4. Untuk Dokumentasi tentang Datatable Bootstrap 4, bisa kalian Lihat Disini.

Berikut ini tampilan aplikasi yang akan kita buat nanti, yakni User Management.

Langsung mari kita ikuti langkah-langkah berikut:

Langkah 1: Buat Tabel pada Database

Disini kita menggunakan MySQL. Buatlah struktur tabelnya kuranglebih seperti berikut:

Jangan lupa untuk mengatur konfigurasi database pada file database.php. Jika belum tahu cara konfigurasinya silahkan lihat DISINI.

Langkah 2: Buat Model untuk Data User

Buat file User_model.php pada folder application/models untuk menampung model-model CRUD User.

<?php

class User_model extends CI_Model
{
    public function getAllUser()
    {
        return $this->db->get('user')->result();
    }

    public function inputData()
    {
        $data = [
            "username" => $this->input->post('username', true), 
            "email" => $this->input->post('email', true),
            "password" => $this->input->post('password', true)
        ];
        return $this->db->insert('user', $data);
    }
    
    function updateData()
    {
        $id = $this->input->post('id'); 
        $username = $this->input->post('username', true);
        $email = $this->input->post('email', true);
        $this->db->set('username', $username);
        $this->db->set('email', $email);
        $this->db->where('id', $id);
        return $this->db->update('user');
    }
    
    public function hapusData()
    {
        $id = $this->input->post('id');
        $this->db->where('id', $id);
        return $this->db->delete('user');
    }
}

Langkah 3: Membuat User Controller

Buat file User.php pada folder application/controllers untuk menampung fungsi-fungsi CRUD User.

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

class User extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('User_model');
    }

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

    public function tampilkanData()
    {
        $data = $this->User_model->getAllUser();
        echo json_encode($data);
    }

    public function simpanData()
    {
        $data = $this->User_model->inputData();
        echo json_encode($data);
    }

    public function update()
    {
        $data = $this->User_model->updateData();
        echo json_encode($data);
    }

    public function hapus()
    {
        $data = $this->User_model->hapusData();
        echo json_encode($data);
    }
}

Langkah 4: Membuat View Tabel User

Pada folder views buat folder users kemudian buat file index.php untuk menampilkan datanya serta operasi CRUD nantinya. Ingat, agar Datatable bisa jalan, jangan lupa import javascript dan css Datatable Bootstrap 4 berikut:

Atau kalian dapat copas langsung dari Website-nya DISINI.

Berikut untuk kode tabelnya yang harus kalian tambahkan pada file index.php tadi. Lebih tepatnya di dalam tag body.

<div class="container mt-5">
     <h2>Data User</h2>
     <p>Anda dapat mengelola data user</p>
     <table class="table table-striped border" id="listUserTable">
        <thead>
           <tr>
              <th>No</th>
              <th>Username</th>
              <th>Email</th>
              <th style="text-align: right;">Action</th>
          </tr>
         </thead>
      <tbody id="listUser">
<!-- Untuk menampilkan datanya, menggunakan JQuery + AJAX -->
      </tbody>
    </table>
    <div><a href="javascript:void(0);" class="btn btn-success" data-toggle="modal" data-target="#addUserModal"><span class="fa fa-plus"></span> Add New</a></div><br>
</div>

Langkah 5: Menampilkan Data User dengan AJAX

Sekarang mari kita buat file dengan nama crud_operation.js pada folder assets/js/ dan jangan untuk meng-include-kan pada file index.php tadi.

1	<script type="text/javascript" src="<?php echo base_url() . 'assets/js/crud_operation.js' ?>"></script>

Kemudian kita buat fungsi listUsers() yang me-request data ke user/tampilkanData yang sudah kita buat pada Controller User tadi.

$(document).ready(function () {
    listUsers();
    $('#listUserTable').dataTable({
       "bPaginate": false,
       "bInfo": false,
       "bFilter": false,
       "bLengthChange": false,
       "pageLength": 5
    });
 // list all user in datatable
    function listUsers() {
       $.ajax({
          type: 'ajax',
          url: 'user/tampilkanData',
          async: false,
          dataType: 'json',
          success: function (data) {
             var html = '';
             var i;
             var no = 1;
          for (i = 0; i < data.length; i++) {
              html += '<tr id="' + data[i].id + '">' +
                '<td>' + no++ + '</td>' +
                '<td>' + data[i].username + '</td>' +
                '<td>' + data[i].email + '</td>' +
                '<td style="text-align:right;">' +
                '<a href="javascript:void(0);" class="btn btn-info btn-sm editRecord" data-id="' + data[i].id + '" data-username="' + data[i].username + '"data-email="' + data[i].email + '">Edit</a>' + ' ' +
                '<a href="javascript:void(0);" class="btn btn-danger btn-sm deleteRecord" data-id="' + data[i].id + '">Delete</a>' +
                '</td>' +
                '</tr>';
    }
    $('#listUser').html(html);
  }

 });
}

Langkah 6: Membuat Modal untuk Menambah Data User

Selanjutnya kita buat modal untuk menambahkan data user. Tambahkan kode berikut pada file index.php tadi. Letakkan setelah kode tabel data tadi.

<form id="saveUserForm" method="post">
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add New User</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group row">
               <label class="col-md-2 col-form-label">Username*</label>
               <div class="col-md-10">
                   <input type="text" name="username" id="username" class="form-control" required>
               </div>
          </div>
          <div class="form-group row">
              <label class="col-md-2 col-form-label">Email*</label>
              <div class="col-md-10">
                 <input type="text" name="email" id="email" class="form-control" required>
              </div>
          </div>
          <div class="form-group row">
               <label class="col-md-2 col-form-label">Password*</label>
               <div class="col-md-10">
                  <input type="text" name="password" id="password" class="form-control" required>
               </div>
          </div>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </div>
   </div>
  </div>
</form>

Langkah 7: Simpan Data User dengan AJAX

Kembali lagi ke file crud_operation.js, kemudian tambahkan kode berikut untuk meng-handle penyimpanan data.

// save new user record
$('#saveUserForm').submit('click', function () {
    var Username = $('#username').val();
    var UserEmail = $('#email').val();
    var UserPassword = $('#password').val();
    $.ajax({
        type: "POST",
        url: "user/simpanData",
        dataType: "JSON",
        data: { username: Username, email: UserEmail, password: UserPassword },
        success: function (data) {
           $('#username').val("");
           $('#email').val("");
           $('#password').val("");
           $('#addUserModal').modal('hide');
           listUsers();
     }
   });
   return false;
});

Langkah 8: Membuat Modal untuk Edit Data User

Buka file index.php dan tambahkan kode berikut setelah kode modal untuk menambahkan data user tadi.

<form id="editUserForm" method="post">
    <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editModalLabel">Edit Data User</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group row">
              <label class="col-md-2 col-form-label">Username*</label>
            <div class="col-md-10">
              <input type="text" name="usernameEdit" id="usernameEdit" class="form-control" required>
            </div>
         </div>
         <div class="form-group row">
           <label class="col-md-2 col-form-label">Email*</label>
         <div class="col-md-10">
           <input type="text" name="emailEdit" id="emailEdit" class="form-control" required>
         </div>
       </div>
     </div>
     <div class="modal-footer">
        <input type="hidden" name="userId" id="userId" class="form-control">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
        <button type="submit" class="btn btn-primary">Yes</button>
     </div>
    </div>
   </div>
  </div>
</form>

Langkah 9: Tampilkan Modal Edit dan Update Data User dengan AJAX

Kembali lagi pada file crud_operation.js, tambahkan kode berikut untuk menampilkan modal edit ketika ingin mengedit salah satu data user, kemudian dilanjutkan dengan meng-update data user tersebut.

// show edit modal form with user data
$('#listUser').on('click', '.editRecord', function () {
    $('#editUserModal').modal('show');
    $("#userId").val($(this).data('id'));
    $("#usernameEdit").val($(this).data('username'));
    $("#emailEdit").val($(this).data('email'));
});
// save edit record
$('#editUserForm').on('submit', function () {
    var id = $('#userId').val();
    var username = $('#usernameEdit').val();
    var email = $('#emailEdit').val();
    $.ajax({
       type: "POST",
       url: "user/update",
       dataType: "JSON",
       data: { id: id, username: username, email: email },
       success: function (data) {
          $("#userId").val("");
          $("#usernameEdit").val("");
          $('#emailEdit').val("");
          $('#editUserModal').modal('hide');
          listUsers();
    }
  });
  return false;
});

Langkah 10: Membuat Modal untuk Delete Data User

Pada file index.php tambahkan kode berikut untuk membuat modal konfirmasi penghapusan data user.

<form id="deleteUserForm" method="post">
    <div class="modal fade" id="deleteUserModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteModalLabel">Delete User</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
          </div>
        <div class="modal-body">
           <p>Are you sure to delete this record?</p>
        </div>
        <div class="modal-footer">
          <input type="hidden" name="deleteUserId" id="deleteUserId" class="form-control">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
          <button type="submit" class="btn btn-primary">Yes</button>
        </div>
      </div>
    </div>
  </div>
</form>

Langkah 11: Tampilkan Modal dan Delete Data User Menggunakan AJAX

Terakhir, tambahkan kode berikut pada file crud_operation.js untuk menghapus data user.

// show delete modal
$('#listUser').on('click', '.deleteRecord', function () {
    var UserId = $(this).data('id');
    $('#deleteUserModal').modal('show');
    $('#deleteUserId').val(UserId);
});
// delete user record
$('#deleteUserForm').on('submit', function () {
    var UserId = $('#deleteUserId').val();
    $.ajax({
       type: "POST",
       url: "user/hapus",
       dataType: "JSON",
       data: { id: UserId },
       success: function (data) {
       $("#" + UserId).remove();
       $('#deleteUserId').val("");
       $('#deleteUserModal').modal('hide');
       listUsers();
    }
  });
  return false;
 });
});

Nah sekian untuk tutorial kali ini, buat kalian yang ingin mendownload projek ini, silahkan DOWNLOAD DISINI atau kalau kalian sudah terbiasa menggunakan git, bisa langsung kalian clone.

7 Komentar

iqbal khairuddin s14 September 2020 pukul 17.00
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
ist15 November 2020 pukul 10.06
min kalo kasih flash message nambah dicontroler sama view aja ato gmn ya?
BalasHapus
Balasan
tagarpedia20 Desember 2020 pukul 09.03
kalau data nya diinput di phpmyadmin apakah masih bisa otomatis tampil data nya di dalam tabel nya
BalasHapus
Balasan
Didi prasetyo25 Juni 2021 pukul 10.36
makasih atas informasinya min
saya mau tanya ada error "internal server error" apakah admin pernah mengalaminya?
BalasHapus
Balasan

Tambahkan komentar