Panduan Lengkap Membuat CRUD dengan AJAX dan Codeigniter

Panduan Lengkap Membuat CRUD dengan AJAX dan Codeigniter - Halo semua, setelah pada artikel sebelumnya kita telah belajar bagaimana membuat CRUD dengan codeigniter murni. Nah, pada artikel kali ini kita akan belajar bagaimana cara membuat CRUD dengan AJAX dan Codeigniter. CRUD (Create , Read , Update and Delete ) merupakan sebuah istilah dalam pemrograman khususnya untuk melakukan proses tambah, baca, perbarui dan menghapus data yang berada di database. Perbedaan dengan artikel CRUD sebelumnya, kali ini ktia menggunakan AJAX sebagai wadah Request post dan get kita ke database, atau gampangnya sebagai ‘jembatan’ penghubung View kita ke controller.

Perbedaan dengan artikel CRUD sebelumnya, kali ini ktia menggunakan AJAX sebagai wadah Request post dan get kita ke database, atau gampangnya sebagai ‘jembatan’ penghubung View kita ke controller.

AJAX (Asynchronous Javascript and XML) adalah suatu metode pada suatu laman web untuk melakukan proses pertukaran data di background. Karena prosesnya yang berada di background / latar belakang, ajax mempunyai beberapa keunggulan jika dibandingkan dengan request action pada form biasa.

Beberapa keunggulan ajax antara lain :

Proses pertukaran data tidak perlu mereload page / browser.
Request mengambil dan mengirim data dilakukan secara background.
Request mengambil dan mengirim data dapat dilakukan lebih dari 1 request tanpa harus menunggu antrian proses sebelumnya.

Melihat beberapa keunggulan ajax tadi, apa kalian merasa sudah saatnya untuk menggunakan AJAX?. Kalau iya. pada tutorial membuat crud dengan AJAX dan Codeigniter ini kita akan bahas secara detail bagaimana pengintegrasian AJAX dan Codeigniter 3.

Yuk, langsung aja ke tutorialnya.

Persiapan Projek

Di Bagian persiapan projek ini, kita akan menyiapkan mulai dari File Assets / resources yang akan kita gunakaan sampai pengkonfigurasian file – file konfigurasi codeigniter.

Install Codeigniter

Untuk langkah pertama, tentu saja kalian harus menginstall Codeigniter pada Direktori Web Server kalian, dan beri nama yang sesuai.

Siapkan Folder Assets

Pada folder assets ini kita akan gunakan sebagai wadah menampung file – file resources seperti :

Boostrap
Jquery

Kalian bisa download file – file nya di link ini. Saya sudah siapkan lengkap 🙂

Siapkan file – file nya kemudian atur seperti gambar di bawah :

Sip, file resources yang kita butuhkan sudah siap.

Konfigurasi .htaccess untuk menghapus index.php

Konfigurasi htaccess di langkah ini berguna untuk menghapus /index.php pada saat kita akan mengakses Controller.

Maka dari itu, pindahkan file .htaccess yang berada di /application ke bagian depan.

Pindahkan ke sini :

Kemudian isi dengan kode sebagai berikut :

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Menyiapkan Database

1. Masuk ke PHPmyAdmin kalian, kemudian import kan SQL berikut ini untuk membentuk database dan table baru

-- phpMyAdmin SQL Dump
-- version 4.5.2
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Nov 05, 2019 at 08:14 AM
-- Server version: 5.5.64-MariaDB-1ubuntu0.14.04.1
-- PHP Version: 5.6.23

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_siswa`
--

-- --------------------------------------------------------

--
-- Table structure for table `tb_siswa`
--

CREATE TABLE `tb_siswa` (
`noinduk` varchar(5) NOT NULL,
`nama` varchar(50) DEFAULT NULL,
`alamat` varchar(100) DEFAULT NULL,
`hobi` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_siswa`
--

INSERT INTO `tb_siswa` (`noinduk`, `nama`, `alamat`, `hobi`) VALUES
('1001', 'Wawan Pesugihan', 'Jalan Angker', 'Bermain Bola'),
('1002', 'Iman Alim', 'Jalan. Dekat Masjid', 'Ibadah'),
('1003', 'Febi November', 'Jalan Kebangkitan', 'Bernyanyi'),
('1004', 'Jajang Suranjang', 'Jalan Tubagus Ismail', 'Gulat'),
('1006', 'Gugun Setyawan', 'Jalan Jagakarsa', 'Berenang di Sungai'),
('1007', 'Dadang Suradang', 'Jalan Kebaktian', 'Berburu');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_siswa`
--
ALTER TABLE `tb_siswa`
ADD UNIQUE KEY `noinduk` (`noinduk`);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Akan terbentuk table yang sudah berisi data sebagai berikut :

Mengkonfigurasi File Config Codeigniter

Pada bagian ini, kita akan mengatur file – file konfigurasi codeigniter sesuai dengan projek kita kali ini. File – file yang akan kita atur dapat ditemukan di /application/config .

File yang akan kita atur antara lain :

Autoload.php
Routes.php
Database.php
Config.php

Baca lebih lengkap tentang file – file konfigurasi codeigniter di artikel sebelumnya.

Autoload.php

Pada autoload, cari dan ubah kode berikut ini menjadi seperti ini :

$autoload['libraries'] = array();

Ubah Menjadi,

$autoload['libraries'] = array('database');

Selanjutnya,

$autoload['helper'] = array();

Ubah Menjadi,

$autoload['helper'] = array('url');

Config.php

Pada config.php, kita akan mengisi bagian base_url :

$config['base_url'] = 'http://localhost/ajax_funtechsy/'; //isi sesuai nama folder projek kalian

Routes.php

Isi dengan kode sebagai berikut :

$route['default_controller'] = 'C_Index'; //Controller Default
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['C_Index/(:any)'] = 'C_Index/$1';
$route['C_Index/(:any)/(:any)'] = 'C_Index/$1/$2';

Pada bagian routes ini, kita mengatur bagaimana suatu controller atau fungsi dapat diakses.

Database.php

Nah, di bagian ini kita mengkoneksikan Codeigniter dengan database. Isi sesuai pengaturan database kalian ya

$db['default'] = array(
'dsn' => '',
'hostname' => '127.0.0.1',
'username' => 'root',
'password' => '123',
'database' => 'db_siswa',
'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
);

Controller, Model, dan View

Pada tahap ini, kita akan membuat dan mengatur Controller, model, dan Views yang akan kita gunakan pada projek membuat crud dengan ajax dan codeigniter.

Controller

Pertama – tama, kita ke bagian controller. Buatlah File baru di /controller kemudian beri nama C_Index.php,.

Setelah itu, isikan dengan kode sebagai berikut :

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

class C_Index extends CI_Controller {

function __construct(){
parent::__construct();
$this->load->model('M_Index'); // Auto load model M_Index pada fungsi construct
}

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

function ambilData(){
$data = $this->M_Index->getData(); // Menampung value return dari fungsi getData ke variabel data
echo json_encode($data); // Mengencode variabel data menjadi json format
}

function ambilDataByNoinduk(){
$noinduk = $this->input->post('noinduk'); //Menangkap inputan no induk
$data = $this->M_Index->getDataByNoinduk($noinduk); // Menampung value return dari fungsi getDataByNoinduk ke variabel data
echo json_encode($data); // Mengencode variabel data menjadi json format
}

function hapusData(){
$noinduk = $this->input->post('noinduk');
$data = $this->M_Index->deleteData($noinduk);
echo json_encode($data); // Mengencode variabel data menjadi json format
}

function tambahData(){
$noinduk = $this->input->post('noinduk'); //Menangkap inputan no induk
$nama = $this->input->post('nama'); //Menangkap inputan nama
$alamat = $this->input->post('alamat'); //Menangkap inputan alamat
$hobi = $this->input->post('hobi'); //Menangkap inputan hobi

$data = ['noinduk' => $noinduk, 'nama' => $nama, 'hobi' => $hobi , 'alamat' => $alamat];
$data = $this->M_Index->insertData($data);
echo json_encode($data); // Mengencode variabel data menjadi json format
}

function perbaruiData(){
$noinduk = $this->input->post('noinduk');
$nama = $this->input->post('nama');
$alamat = $this->input->post('alamat');
$hobi = $this->input->post('hobi');

$data = ['noinduk' => $noinduk, 'nama' => $nama, 'hobi' => $hobi , 'alamat' => $alamat];

$data = $this->M_Index->updateData($noinduk,$data);

echo json_encode($data); // Mengencode variabel data menjadi json format
}
}

Penjelasan masing – masing kode dapat dilihat di bagian komen ya 🙂 sudah saya sisipkan beberapa penjelasan. Jika kurang jelas dan kurang paham bisa tanyakan di kolom komentar.

Model

Buatlah file baru pada /model kemudian beri nama M_Index.php.

Setelah itu, isikan dengan kode sebagai berikut :

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

class M_Index extends CI_Model {

function getData(){
return $this->db->get('tb_siswa')->result(); // me-return hasil dari get tb_siswa
}

function getDataByNoinduk($noinduk){
$this->db->where('noinduk',$noinduk); // where no induk
return $this->db->get('tb_siswa')->result(); // me-return hasil dari get tb_siswa
}

function deleteData($noinduk){
$this->db->where('noinduk',$noinduk); // where no induk
$this->db->delete('tb_siswa'); // mendelete tb_siswa sesuai kondisi di atas
}

function insertData($data){
$this->db->insert('tb_siswa',$data); // menginsert pada tb_siswa dengan variabel data
}

function updateData($noinduk,$data){
$this->db->where('noinduk',$noinduk); // where no induk
$this->db->update('tb_siswa',$data); //mengupdate tb_siswa sesuai kondisi di atas
}
}

View

Buatlah File baru pada /view , Kemudian beri nama V_Index.php

Lalu, isikan dengan kode sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>Ajax KompiKaleng</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css'); ?>">
<script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.3.1.min.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js'); ?>"></script>
</head>
<body style="margin: 20px;">
<div class="panel panel-primary">
<div class="panel-heading">
<b class="col-md-10">CRUD Ajax Codeigniter KompiKaleng</b>
<center><button data-toggle="modal" data-target="#addModal" class="btn btn-success">Tambah Data</button></center>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>No.induk</th>
<th>Nama</th>
<th>Alamat</th>
<th>Hobi</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbl_data">

</tbody>
</table>
</div>
</div>
</div>
</body>


<div id="addModal" class="modal fade" role="dialog">
<div class="modal-dialog">


<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Tambah Data</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="noinduk">No.Induk</label>
<input type="text" name="noinduk" class="form-control"></input>
</div>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama" class="form-control"></input>
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<input type="text" name="alamat" class="form-control"></input>
</div>
<div class="form-group">
<label for="hobi">Hobi</label>
<input type="text" name="hobi" class="form-control"></input>
</div>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btn_add_data">Simpan</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>


<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">


<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="noinduk">No.Induk</label>
<input type="text" name="noinduk_edit" class="form-control"></input>
</div>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" name="nama_edit" class="form-control"></input>
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<input type="text" name="alamat_edit" class="form-control"></input>
</div>
<div class="form-group">
<label for="hobi">Hobi</label>
<input type="text" name="hobi_edit" class="form-control"></input>
</div>

</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btn_update_data">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

</html>
<script type="text/javascript">
$(document).ready(function(){
tampil_data();
//Menampilkan Data di tabel
function tampil_data(){
$.ajax({
url: '<?php echo base_url(); ?>C_Index/ambilData',
type: 'POST',
dataType: 'json',
success: function(response){
console.log(response);
var i;
var no = 0;
var html = "";
for(i=0;i < response.length ; i++){
no++;
html = html + '<tr>'
+ '<td>' + no + '</td>'
+ '<td>' + response[i].noinduk + '</td>'
+ '<td>' + response[i].nama + '</td>'
+ '<td>' + response[i].alamat + '</td>'
+ '<td>' + response[i].hobi + '</td>'
+ '<td style="width: 16.66%;">' + '<span><button data-id="'+response[i].noinduk+'" class="btn btn-primary btn_edit">Edit</button><button style="margin-left: 5px;" data-id="'+response[i].noinduk+'" class="btn btn-danger btn_hapus">Hapus</button></span>' + '</td>'
+ '</tr>';
}
$("#tbl_data").html(html);
}

});
}
//Hapus Data dengan konfirmasi
$("#tbl_data").on('click','.btn_hapus',function(){
var noinduk = $(this).attr('data-id');
var status = confirm('Yakin ingin menghapus?');
if(status){
$.ajax({
url: '<?php echo base_url(); ?>C_Index/hapusData',
type: 'POST',
data: {noinduk:noinduk},
success: function(response){
tampil_data();
}
})
}
})
//Menambahkan Data ke database
$("#btn_add_data").on('click',function(){
var noinduk = $('input[name="noinduk"]').val();
var nama = $('input[name="nama"]').val();
var alamat = $('input[name="alamat"]').val();
var hobi = $('input[name="hobi"]').val();
$.ajax({
url: '<?php echo base_url(); ?>C_Index/tambahData',
type: 'POST',
data: {noinduk:noinduk,nama:nama,alamat:alamat,hobi:hobi},
success: function(response){
$('input[name="noinduk"]').val("");
$('input[name="nama"]').val("");
$('input[name="alamat"]').val("");
$('input[name="hobi"]').val("");
$("#addModal").modal('hide');
tampil_data();
}
})

});
//Memunculkan modal edit
$("#tbl_data").on('click','.btn_edit',function(){
var noinduk = $(this).attr('data-id');
$.ajax({
url: '<?php echo base_url(); ?>C_Index/ambilDataByNoinduk',
type: 'POST',
data: {noinduk:noinduk},
dataType: 'json',
success: function(response){
console.log(response);
$("#editModal").modal('show');
$('input[name="noinduk_edit"]').val(response[0].noinduk);
$('input[name="nama_edit"]').val(response[0].nama);
$('input[name="alamat_edit"]').val(response[0].alamat);
$('input[name="hobi_edit"]').val(response[0].hobi);
}
})
});

//Meng-Update Data
$("#btn_update_data").on('click',function(){
var noinduk = $('input[name="noinduk_edit"]').val();
var nama = $('input[name="nama_edit"]').val();
var alamat = $('input[name="alamat_edit"]').val();
var hobi = $('input[name="hobi_edit"]').val();
$.ajax({
url: '<?php echo base_url(); ?>C_Index/perbaruiData',
type: 'POST',
data: {noinduk:noinduk,nama:nama,alamat:alamat,hobi:hobi},
success: function(response){
$('input[name="noinduk_edit"]').val("");
$('input[name="nama_edit"]').val("");
$('input[name="alamat_edit"]').val("");
$('input[name="hobi_edit"]').val("");
$("#editModal").modal('hide');
tampil_data();
}
})

});
});
</script>

Nah, pada bagian view ini disisipkan script Ajaxnya, kalau kalian kurang paham atau kurang jelas dapat ditanyakan di kolom komentar ya 🙂 .

Karena memang untuk paham script di atas, minimal kalian sudah paham struktur dasar jQuery.

Screenshot

Source Code

Download Source Codenya disini ya gan.

Bagaimana? apakah tutorial Cara Membuat CRUD dengan Ajax dan Codeigniter kali ini berhasil? Kalau belum berhasil, perhatikan langkah – langkahnya sekali lagi ya.

Kalau kalian merasa artikel ini bermanfaat, jangan lupa tinggalkan komentar ya 🙂 terima kasih.

Panduan Lengkap Membuat CRUD dengan AJAX dan Codeigniter