Membuat CRUD Ajax-Codeigniter-Swal-

Datatables
Oke guys kali ini gua akan sharing tutorial untuk membuat crud sederhana dengan
menggunakan konsep ajax dengan framework codeigniter. keuntungan menggunakan ajax
yaitu kita tidak perlu merefresh halaman web page saat sedang memproses data, pada tahap
kali ini minimal lu udah tau apa konsep crud secara PHP native, klo lu belon tau, ada kala
baiknya belajar crud php secara native dulu, oke langsung saja hal yang harus lu persiapkan
adalah lu harus sudah mempunyai beberapa library seperti

1. Codeigniter
2. Bootstrap,Jquery,Datatables,Swal Js

untuk point library nomor 2 gua menggunakan CDN secara online(menurut gua lebih
simple), kalo lu pada mau download secara manual it’s okay,

sebelumnya kita akan membuat sebuah database yaitu database ‘tutorial_ajaxci’ dengan nama
table mahasiswa, gua harap kalian sudah bisa membuat database dan table sendiri, oke gua
akan kasih fieldnya dengan

 id (int autoincrement)
 nama_mahasiswa (varchar 50)
 alamat (varchar 50)

cukup sederhana field databasenya nah disini gua hanya akan sharing hal yang basic saja jadi
nanti jika kalian sudah paham ini nanti tinggal kalian kembangkan saja sesuka kalian

pastikan kalian setting pada application/config/database.php ini adalah contoh settingan

database gua

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'tutorial_ajaxci',
'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
);

Ada beberapa setinggan yang harus diketahui

yang pertama yaitu application/config/autoload.php

$autoload['model'] = array('datamahasiswa_model');
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

dan setelah itu buka halaman application/config/config.php

pada source code

$config['base_url']='';
ubah menjadi
$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] ==
"on") ? "https" : "http");
$config['base_url'] .= "://".$_SERVER['HTTP_HOST'];
$config['base_url'] .=
str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

Menampilkan Data

pertama kita buat file pada application/controller/Home.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index()
{
$this->load->view('tampildata');
$this->load->view('ajaxcrud');
}
}
/* End of file Home.php */

Oke pada selanjutnya buat sebuah file tampildata.php pada application/views/

na itu adalah beberapa library yang gua gunain, klo mau download manual yang silakan aja
bro, lalu lu buat 1 file lagi untuk ajaxcrud.php disini intinya adalah kita akan menggunakan
konsep ajax pada codeigniter

<!-- Modal untuk tambah data mahasiswa -->

<div class="modal fade" id="tambahmahasiswa" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Tambah Mahasiswa</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="formtambahdatamhs">
<div class="form-group row">
<label for="inputnama" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="nama" placeholder="nama">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Alamat</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="alamat"
placeholder="alamat">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Tambah Data
Mahasiswa</button>
</div>
</form>
</div>
</div>
</div>

<script>
$(document).ready(function () {
var datamahasiswa = $('#datamahasiswa').DataTable({})
});
</script>

nah klo uda jadi lu coba da tu, klo gua jalanin dengan cara nulis url kaya gini
http://localhost/tutorial/tutorialajax/index.php/home

outputnya kaya gini broo

Kedua file itu untuk part 1 adalah tempalte (tampilan) untuk membuat aplikasi crud tersebut
selanjutnya di part 2 gua akan sharing bagaimana cara menginsert data dengan menggunakan
ajax yang manisin (anjayyy di manisin ) oleh sweet alert.
Menampilkan data mahasiswa serta insert data dari form

setelah kalian setting kedua file tersebut buatlah file pada models/Datamahasiswa_model.php
yaitu dimana untuk memanipulasi database

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Datamahasiswa_model extends CI_Model {
// untuk menampilkan datamahasiswa
public function getdatamahasiswa()
{
$this->db->select('*');
$this->db->from('mahasiswa');
$query = $this->db->get();
return $query->result_array();
}
// untuk insert datamahasiswa
public function insertmahasiswa($data)
{
return $this->db->insert('mahasiswa', $data);

}
}
/* End of file Datamahasiswa_model.php */

ini adalah 2 fungsi untuk menampilkan data mahasiswa dan untuk menginsert data
mahasiswa. oke setelah itu kita tambahkan beberapa function di application/Home.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index()
{
$this->load->view('tampildata');
$this->load->view('ajaxcrud');
}
public function datamahasiswa()
{

$datamahasiswa = $this->datamahasiswa_model->getdatamahasiswa();
$no =1;
foreach ($datamahasiswa as $value) {
$tbody = array();
$tbody[] = $no++;
$tbody[] = $value['nama_mahasiswa'];
$tbody[] = $value['alamat'];
$aksi= "<button class='btn btn-success ubah-mahasiswa' data-
toggle='modal' data-id=".$value['id'].">Ubah</button>".' '."<button class='btn btn-
danger hapus-mahasiswa' id='id' data-toggle='modal' data-
id=".$value['id'].">Hapus</button>";
$tbody[] = $aksi;
$data[] = $tbody;
}
if ($datamahasiswa) {
echo json_encode(array('data'=> $data));
}else{
echo json_encode(array('data'=>0));
}
}
public function tambahmhs()
 {
// didapat dari ajax yang dimana data{nama:nama,alamat:alamat}
$nama = $this->input->post('nama');
$alamat = $this->input->post('alamat');
$tambahmhs = array (
'nama_mahasiswa'=>$nama,
'alamat' => $alamat
);
$data = $this->datamahasiswa_model->insertmahasiswa($tambahmhs);
echo json_encode($data);
}
}
/* End of file Home.php */

oke setelah melalui tahap sebelumnya selanjutnya untuk menjalakan ajaxnya elu harus
menambahkan script pada ajaxcrud.php

$(document).ready(function () {
// ini adalah fungsi untuk mengambil data mahasiswa dan di incluce ke dalam
datatable
var datamahasiswa = $('#datamahasiswa').DataTable({
"processing": true,
"ajax": "<?=base_url("index.php/home/datamahasiswa")?>",
stateSave: true,
"order": []
})

// fungsi untuk menambah data

// pilih selector dari yang id formtambahdatamhs
$('#formtambahdatamhs').on('submit', function () {
var nama = $('#nama').val(); // diambil dari id nama yang ada diform
modal
var alamat = $('#alamat').val(); // diambil dari id alamat yanag ada di
form modal

$.ajax({
type: "post",
url: "<?=base_url('index.php/home/tambahmhs')?>",
beforeSend :function () {
swal({
title: 'Menunggu',
html: 'Memproses data',
onOpen: () => {
swal.showLoading()
}
})
},
data: {nama:nama,alamat:alamat}, // ambil datanya dari form yang ada di
variabel
dataType: "JSON",
success: function (data) {
datamahasiswa.ajax.reload(null,false);
swal({
type: 'success',
title: 'Tambah Mahasiswa',
text: 'Anda Berhasil Menambah Mahasiswa'
})
// bersihkan form pada modal
$('#tambahmahasiswa').modal('hide');
// tutup modal
$('#nama').val('');
$('#alamat').val('');

}
})
return false;
 });
});

setelah lu menulis kode ini maka tahap untuk tambah data dan tampil data sudah bisa kalian
jalankan

Nah ini adalah hasil untuk

oke gua rasa itu adalah cara untuk menampilkan data dan menampilkan data mahasiswa
menggunakan konsep ajax jika kalian coba maka pada saat proses menambahkan data, maka
website tidak akan load (merefresh).

Membuat fungsi untuk update/ubah data

pertama hal yang harus hal yang elu buat adalah elu harus membuat form secara dinamis
untuk menampilkan data yang akan diubah

tambahkan form modal pada file ajaxcrud.php seperti menambahkan form modal tambah data
pada part2 sebelumnnya

<!-- Modal untuk edit data mahasiswa -->

<div class="modal fade" id="editmahasiswa" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Data Mahasiswa</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 id="formdatamahasiswa">

</div>
</div>
</div>
</div>
setelah membuat form modal tersebut mari script ajax untuk mendapat data mahasiswa yang
ingin kita edit, masih dalam ajaxcrud.php

$('#datamahasiswa').on('click','.ubah-mahasiswa', function () {
// ambil element id pada saat klik ubah
var id = $(this).data('id');

$.ajax({
type: "post",
url: "<?=base_url('index.php/home/formedit')?>",
beforeSend :function () {
swal({
title: 'Menunggu',
html: 'Memproses data',
onOpen: () => {
swal.showLoading()
}
})
},
data: {id:id},
success: function (data) {
swal.close();
$('#editmahasiswa').modal('show');
$('#formdatamahasiswa').html(data);

}
});
});

nah pada script tersebut, yaitu pada saat klik ubah dalam table dengan id #datamahasiswa dan
class .ubah-mahasiswa maka akan terjadi proses pemanggilan data form modal dengan
menggunakan ajax yang mengarah pada controller home dengan function formedit kemudian
tambahkan script pada Home.php dengan function formedit

public function formedit()

{
// id yang telah diparsing pada ajax ajaxcrud.php data{id:id}
$id = $this->input->post('id');

$data['datapermahasiswa'] = $this->datamahasiswa_model-
>datamahasiswaedit($id);
$this->load->view('formeditmhs',$data);
}

pada function formedit untuk pemangilan data mahasiswa yang akan di edit menggunakan
parameter id yang telah diambil dari script ajaxcrud.php yang ada diatas, lalu kemuadian
panggil data yang akan segera diubah dengan menggunakan model dari
datamahasiswa_model dengan function datamahasiswaedit. tambahkan function pada
Datamahasiswa_model.php dengan script seperti ini

public function datamahasiswaedit($id)

{
$this->db->select('*');
$this->db->from('mahasiswa');
$this->db->where('id',$id);
$query = $this->db->get();
return $query->row_array();
}
dan setelah itu gua akan membuat view baru dengan file baru yaitu
application/views/formeditmhs.php inget ini file baru broo

<form id="formubahdatamhs" method="post">

<div class="form-group row">
<label for="inputnama" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="editnama"
value="<?=$datapermahasiswa['nama_mahasiswa']?>" placeholder="editnama" required>
<input type="hidden" name="id" id="idmhs"
value="<?=$datapermahasiswa['id']?>">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Alamat</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="editalamat"
value="<?=$datapermahasiswa['alamat']?>" placeholder="editalamat" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Ubah Data Mahasiswa</button>
</div>
</form>

Form untuk data yang akan diubah

jika berhasil maka akan muncul form data seperti gambar diatas, klo masih belum bisa berati
ada yang salah nah coba elu cek lagi da tu hahahaha. setelah itu masih ada 1 step lagi yaitu
membuat fungsi untuk mengubah data tersebut sampai tersimpan didalam database
tambahkan script pada ajaxcrud.php pada lanjutan ajax #datamahasiswa dan class .ubah-
mahasiswa seperti ini

$('#datamahasiswa').on('click','.ubah-mahasiswa', function () {
// ambil element id pada saat klik ubah
var id = $(this).data('id');

$.ajax({
type: "post",
url: "<?=base_url('index.php/home/formedit')?>",
beforeSend :function () {
swal({
 title: 'Menunggu',
html: 'Memproses data',
onOpen: () => {
swal.showLoading()
}
})
},
data: {id:id},
success: function (data) {
swal.close();
$('#editmahasiswa').modal('show');
$('#formdatamahasiswa').html(data);

// proses untuk mengubah data

$('#formubahdatamhs').on('submit', function () {
var editnama = $('#editnama').val(); // diambil dari id nama
yang ada diform modal
var editalamat = $('#editalamat').val(); // diambil dari id
alamat yanag ada di form modal
var id = $('#idmhs').val(); //diambil dari id yang ada di form
modal
$.ajax({
type: "post",
url: "<?=base_url('index.php/home/ubahmahasiswa')?>",
beforeSend :function () {
swal({
title: 'Menunggu',
html: 'Memproses data',
onOpen: () => {
swal.showLoading()
}
})
},
data: {editnama:editnama,editalamat:editalamat,id:id}, //
ambil datanya dari form yang ada di variabel

success: function (data) {

datamahasiswa.ajax.reload(null,false);
swal({
type: 'success',
title: 'Update Mahasiswa',
text: 'Anda Berhasil Mengubah Data Mahasiswa'
})
// tutup form pada modal
$('#editmahasiswa').modal('hide');
}
})
return false;
});
}
});
});

lalu kita buat model untuk proses query update pada Datamahasiswa_model.php seperti ini

public function ubahmahasiswa($data,$id)

{
$this->db->where('id',$id);
return $this->db->update('mahasiswa',$data);

setelah membuat model tersebut gua akan membuat fungsi untuk mengubah data pada
Home.php dengan menambahkan function ubahmahasiswa seperti ini
public function ubahmahasiswa()
{
$objdata = array(
'nama_mahasiswa'=>$this->input->post('editnama'),
'alamat'=>$this->input->post('editalamat')
);

$id = $this->input->post('id');
$data = $this->datamahasiswa_model->ubahmahasiswa($objdata,$id);

echo json_encode($data);
}

jika sudah seperti ini maka kita sudah selesai untuk membuat fungsi ubah data mahasiswa
dengan menggunakan ajax dan variasi sweet alert maka hasilnya akan seperti ini

data yang akan diedit

notifikasi data berhaasil di update
data setelah diedit

Menghapus Data

delete dimana logic itu kita hanya membutuhkan 1 parameter data yaitu id dan dimana id itu
akan menjadi acuan untuk menghapus salah 1 data yang akan dihapus oke langsung saja
tambahkan pada file ajaxcrud.php dengan script seperti ini

// fungsi untuk hapus data

//pilih selector dari table id datamahasiswa dengan class .hapus-
mahasiswa
$('#datamahasiswa').on('click','.hapus-mahasiswa', function () {
var id = $(this).data('id');
swal({
title: 'Konfirmasi',
text: "Anda ingin menghapus ",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Hapus',
confirmButtonColor: '#d33',
cancelButtonColor: '#3085d6',
cancelButtonText: 'Tidak',
reverseButtons: true
}).then((result) => {
if (result.value) {
$.ajax({
url:"<?=base_url('index.php/home/hapusmahasiswa')?>",
method:"post",
beforeSend :function () {
swal({
title: 'Menunggu',
html: 'Memproses data',
onOpen: () => {
swal.showLoading()
}
})
},
data:{id:id},
success:function(data){
swal(
'Hapus',
'Berhasil Terhapus',
'success'
)
 datamahasiswa.ajax.reload(null, false)
}
})
} else if (result.dismiss === swal.DismissReason.cancel) {
swal(
'Batal',
'Anda membatalkan penghapusan',
'error'
)
}
})
});

pada script yang diatas yaitu fungsi event ketika melakukan klik hapus pada table data
mahasiswa kemudian akan memunculkan konfirmasi penghapusan data

fungsi konfirmasi

jika kita pilih button hapus maka akan terjadilah proses penghapusan data nah untuk
controllernya buat tambahkan pada file Home.php tambah function hapusmahasiswa() seperti
ini

public function hapusmahasiswa() {

// id yang telah diparsing pada ajax ajaxcrud.php data{id:id}
$id = $this->input->post('id');

$data = $this->datamahasiswa_model->hapusdatamahasiswa($id);
echo json_encode($data);
}

untuk fungsi model penghapusan data sangat simpel sekali kita tambahkan pada file
Datamahasiswa_model.php seperti ini

public function hapusdatamahasiswa($id) {

$this->db->where('id',$id);
return $this->db->delete('mahasiswa');

nah itu untuk fungsi hapusnya jika berhasil maka akan tampil seperti ini guys
berhasil menghapus data

nah itu lah tutorial untuk membuat aplikasi CRUD sederhana menggunakan konsep ajax
gimana cukup simple kah? tenang broo ni gua ada source code secara lengkapnya di sini
mungkin nanti akan kalian bisa kembangkan nah mungkin itu aja yang gua share, semoga
bermanfaat thanks guys