CRUD DataGrid dengan jQuery UI + Ajax

Hallo, Assalamualaikum Sobat :D

Jujur :

1. Ngantuk (mana besok mesti ke Utara Jakarta).
2. Lapar pula.
3. Mau share simple coding aja.
4. Apalah-apalah, wkwkwk.

Dah lama banget gak nulis dimari, saking sibuknya kali, ya kali bang. Abang kan sibuk tidur, eh kerja maksudnya wkwkw.

Entah 1-2 minggu ke belakang, pas refreshing ke kampus, ada beberapa orang yang menanyakan gimana dan apa itu AJAX. Zzzz dalam hati saya : 'kan ada google, dia lebih pintar lho daripada saya' :)

Dan disini pun saya gak bakalan ngebahas detail AJAX, karena saya cuma mau share dan kasih contoh sederhana bagaimana sebuah function dipanggil melalui AJAX dan direturn kembali menjadi data olahan, bisa berupa XML, JSON, dll.

Pada dasarnya, kalian hampir tiap hari menggunakan facebook, twitter, instagram, dll. Oke ambil contoh facebook, saat kalian login dan membukanya lewat device Laptop/ Mobile, dan kalian hendak update status. Ketika teks sudah selesai diketik, maka system FB akan mempost hasil entry-an kalian dan diolah lagi menjadi value teks lagi.

Nih lah abang kasih screenshoot buat nge-twit.

Gambar 1. Ketika Pertama Kali Buka Twitter

Gambar 2. Ketika Nge-Twit.

Gambar 3. Setelah Nge-Twit.

1. Gambar 1 : pada saat ngebuka itu medsos, si twitter sebenarnya butuh action request AJAX yang akan menampilkan twit dari teman atau sponsor die ke page akun kita liat gambarnye.
2. Gambar 2 : noh, pada saat mau nge-twit die kan muncul kotak, kita sih taunya muncul aja, padahal die juga sama nge request AJAX. Nama function-nya COMPOSE.
3. Gambar 3 : pada saat telah di twit, maka request lagi, dan nama function kali ini adalah CREATE.

Yang paling menarik dari twitter adalah bahwa media sosial ini termasuk dari jutaan website yang sudah mengadopsi Konsep "Single Page Application". Apa itu ? ya sederhananya sih, ketika kalian menulis, menghapus, merefresh, kalian hanya butuh data yang kecil (sudah saya sebutkan diatas), yaitu berupa (misalkan) JSON. FB pula begitu, Instagram, many more.

Lalu, apa yang mau saya share ? Eng-Ing-Eng !! :D
Setali tiga uang, sambil menyelam buang air. wkwkw
Saya mau share bagaimana mengimplementasikan JQuery User-Interface dengan AJAX, maka kebentuklah CRUD sederhana seperti dibawah.

Gambar 4. Data Empty.

Gambar 5. Proses Tambah Data.

Gambar 6. Proses Edit data

1. Gambar 4 : pada saat ngebuka source pada browser, karena masih kosong, jadi ya kosong.
2. Gambar 5 : pada saat create data.
3. Gambar 6 : pada saat update data.

Oke, saya paparkan teknis supaya source-nya running as well.

1. Download dulu disini, iya disini :( 
2. Pastikan udah ada XAMPP, WAMPP, atau apapun lah yang penting running Apache sama MySQL.
3. Buka MySQL, create database dengan nama ajax_sample, lalu import dengan cara browse file location ajax_sample.sql pada folder yang tadi didownload.
4.  Taro semua core/ folder tadi pada direktori HTDOCS. Gausah dijelasin.
5. Buka dah index.html

Semoga Bermanfaat.
Oh iya, saya mau nyari orang yang peduli dan gemar berbagi hal-hal positif.
Untuk apa ? Untuk ikut jadi writter di blog ini dan kalo ada yang minat silakan kirim email aja ke sahidtrimbudi@gmail.com.

Wassalamualaikum wr. wb