Contoh Aplikasi CRUD Sederhana Dengan CodeIgniter + AJAX

Saking asiknya begadang sambil nyobain buat aplikasi CodeIgniter+Ajax, tak terasa udah jam 5 pagi. Yaw, begitulah saya kalau udah keasikan dengan sesuatu, semua langsung lupa (kecuali bernafas). Di postingan yang sebelumnya, saya sudah memaparkan tentang plugin CRUD yang bernama Grocery CRUD. Dan kembali di postingan kali ini, saya akan membahas tentang aplikasi CRUD dengan CodeIgniter+Ajax. Dengan bantuan library jQuery dan tambahan beberapa syntax javascript, maka jadilah sebuah aplikasi CRUD sederhana. Terus terang, saya juga baru-baru ini paham sedikit tentang Ajax. Padahal saya sudah mempelajarinya sejak 1 tahun yang lalu (udah agak lola nie otak -_-). Gak tau kenapa, tadi malem setelah pulang dari kampus saya langsung ingin mempelajari Ajax. Sekalian saja, langsung saya implementasikan dengan CodeIgniter. Dengan dokumentasinya yang lengkap, ternyata jQuery cukup mudah untuk dipahami dan dipelajari.

Untuk mencoba jQuery, silahkan download dahulu library jQuery yang terakhir di http://jquery.com. Mungkin sambil menunggu proses download (bagi yang koneksinya lemot), boleh juga dilihat-lihat sedikit dokumentasinya. Nah, untuk controller-nya saya buat seperti ini :

class Ajax extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->model(‘ajax_model’);
}

function index() {
$halaman = $this->uri->segment(3,0);
$data[‘user’] = $this->ajax_model->get_jumlah_user($halaman);
$num = $this->ajax_model->get_jumlah_user(”,true); //konfigurasi paging ajax
if($halaman==0) {
$data[‘no_prev’] = true;
}
if($halaman==$num-1 || $num==0) {
$data[‘no_next’] = true;
}
$data[‘next’] = “<a href=’javascript:void(0)’ onclick=’load_no_loading(\”ajax/index/”.($halaman+1).”\”,\”#content\”)’ >Next >></a>”;
$data[‘prev’] = “<a href=’javascript:void(0)’ onclick=’load_no_loading(\”ajax/index/”.($halaman-1).”\”,\”#content\”)’ ><< Previous</a>”;
$this->load->view(‘home’,$data);
}

function simpan() {
$data[‘nim’]=$this->input->post(‘nim’);
$data[‘nama_mhs’]=$this->input->post(‘nama_mhs’);
$data[‘jurusan’]=$this->input->post(‘jurusan’);
$data[‘angkatan’]=$this->input->post(‘angkatan’);
$this->ajax_model->simpan($data); $this->index();
}

function hapus() {
$id = $this->input->post(‘id’);
$this->db->delete(‘tbl_mahasiswa’, array(‘nim’ => $id));
}

}

Hehe,,coding-nya masih acak-acakan. Maklumlah, saya baru kali ini menggabungkan CodeIgniter dengan Ajax. Pada controller, terdapat kode seperti ini :

$data[‘next’] = “<a href=’javascript:void(0)’ onclick=’load_no_loading(\”ajax/index/”.($halaman+1).”\”,\”#content\”)’ >Next >></a>”;
$data[‘prev’] = “<a href=’javascript:void(0)’ onclick=’load_no_loading(\”ajax/index/”.($halaman-1).”\”,\”#content\”)’ ><< Previous</a>

Baris kode tersebut berfungsi untuk membuat paging ajax. Karena menurut saya agak ruwet untuk menggunakan library paging yang sudah disediakan oleh CI, maka saya buatkan saja paging-nya secara manual.

Dan untuk model-nya, saya buat seperti dibawah ini :

Class ajax_model extends CI_Model{
function __construct()
{
parent::__construct();
}

function get_jumlah_user($halaman,$num=false) {
$batas = 5; $this->db->from(‘tbl_mahasiswa’);
if($num) {
$r = $this->db->get();
$n = $r->num_rows();
return ceil($n/$batas); }
$this->db->limit($batas,$halaman*$batas);
$this->db->order_by(‘nim’,’desc’);
return $this->db->get();
}

function simpan($data) {
if($data[‘nim’] != ”) {
$this->db->where(‘nim’,$data[‘nim’]);
$this->db->update(‘tbl_mahasiswa’,$data);
}
else {
$this->db->insert(‘tbl_mahasiswa’,$data);
}
}

}

Nah, kalau masih bingung dibawah ini sudah saya sediakan link download source kode-nya. Mungkin rekan-rekan bisa mempelajarinya, walaupun coding-nya masih hancur-hancur’an :D. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan juga sedang belajar CodeIgniter+Ajax.

Happy Blogging and Keep Coding…
Cheers..!!!

Download Aplikasi

8 comments

  1. sisco Reply

    mas punya contoh aplikasi perpustakaan yg berbasis PHP gk…
    kalau ada tolong shar dong…aku lg butuh banget nih….

  2. fakhrurrozi Reply

    mas broo…
    boleh minta db nya gag??
    :))
    console nya aja kalo bisa..
    hehe..

  3. slamet_riyadi Reply

    gan, help help
    untuk fungsi ini onLoad=’loadContent();
    bisa ga di selain tag body.??

    terimakasih :)’