Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.

Net

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery

Tutorial ini ditulis oleh Achmad S lichin dan sudah dipublikasikan di http://achmatim.net pada tanggal 2 September 2012

Dalam setiap kesempatan membahas mengenai aplikasi berbasis web (web application) baik di dalam sesi menga!ar matakuliah "emrograman #eb di !ni"er#ita# $udi %uhur& maupun sesi training terkait web sa$a selalu menekankan bahwa han$a ada % (empat) proses dasar dalam aplikasi berbasis web. &plikasi web $ang sederhana hingga kompleks selalu berkaitan dengann$a. 'eempat proses tersebut adalah proses entri (input) ubah (edit) hapus (delete) dan tampil (show). (stilah lain dari keempat proses tersebut adalah '(!D )'reate, (ead, !pdate and Delete* . )adi kuasailah keempatn$a maka selebihn$a han$a *ariasi dari keempat proses tersebut. Sebagai contoh dalam proses update status di situs !e!aring sosial +acebook merupakan proses ,ntri atau (nsert ke database saat memperbaiki +oto pro+il adalah proses edit (update) dan saat kita menghapus salah satu teman aalah proses delete. -engingat pentingn$a proses tersebut sa$a memberikan contoh khusus di bab terakhir dari buku Pemr graman +e, dengan PHP - .ySQ%/ berupa proses dasar entri edit delete dan tampil dengan "." dan -$S/0. Sebelum melan!utkan tutorial ini tidak ada salahn$a !ika &nda mencoba contoh tersebut terutama bagi &nda $ang belum pernah mencoba program serupa. Sa$a !uga pernah mempublikasikan artikel entri edit delete dan tampil "." $ang meman+aatkan -acromedia Dreamwea*er. %alu apa yang a0an dipelajari di dalam tut rial ini1 &pa $ang disampaikan dalam tutorial ini kurang lebih sama dengan tutorial sa$a sebelumn$a $aitu proses entri edit delete dan tampil data dengan "." dan -$S/0. 1amun kali ini sa$a ingin menambahkan konsep &!a2
1 2 http://budiluhur.ac.id http://achmatim.net/buku-gratis/pemrograman-web-dengan-php-dan-mysql/

Halaman & dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net (&s$ncronous )a*ascript and 3-0) dengan menggunakan librar$ )/uer$. Dengan konsep &!a2 maka proses entri edit delete dan tampil dapat dilakukan dengan lebih menarik.

Tujuan atau (ancangan A0hir Pr gram

4ntuk memberikan gambaran $ang lebih !elas mengenai hasil akhir contoh program $ang dibahas dalam tutorial ini berikut beberapa hal penting: 4ntuk memudahkan pemahaman program han$a menangani 1 (satu) tabel -$S/0 $aitu tabel 5mahasiswa6 $ang terdiri dari +ield 1(- 1&-& dan &0&-&T. "rogram han$a terdiri dari 1 (satu) +ile utama (tidak termasuk librar$ $ang digunakan) "rogram menggunakan librar$ &!a2 JQuery. 4ntuk penanganan +orm digunakan plugin JQuery 3 rm. 4ntuk *alidasi +orm digunakan plugin JQuery 4alidati n. 4ntuk menampilkan data dalam bentuk tabel digunakan plugin JQuery 3lexigrid "roses ,D(T dan D,0,T, dilakukan dengan memilih dan klik pada data $ang akan diedit/didelete. 0angsung a!a kita mulai #tep ,y #tep untuk membuatn$a.

&. Siap0an Data,a#e dan Ta,el

0angkah pertama tentu persiapkan database dan tabel $ang diperlukan. Seperti sudah disebutkan di rancangan akhir program di atas bahwa kita akan men$ederhanakan struktur data $ang akan dibuat. Dalam hal ini kita akan membuat database dengan nama 5 dem 6 dan tabel dengan nama 5maha#i#5a6. 7erikut ini struktur dari tabel mahasiswa $ang akan dibuat: 36E%D nim nama alamat T7PE 8&9:.&9 8&9:.&9 T,3T %EN8TH 10 ;0 < DES'(6PT69N 1(- -ahasiswa 1&-& -ahasiswa &lamat -ahasiswa

Dan berikut ini perintah S/0 untuk membuat database dan tabel di atas. "erintah dapat ditulis dan di!alankan di -$S/0 client kesukaan kita. Perintah SQ% untu0 '(EATE DATA$ASE dan '(EATE Ta,el
1 2 3 4 5 6 7 CREATE DATABASE demo; CREATE TABLE mahasiswa ( nim VARCHAR(1 ! "#T "$LL% nama VARCHAR(3 ! "#T "$LL% a&ama' TE(T% )R*+AR, -E,(nim! !; Halaman / dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net

/. $uat Halaman ,e#erta 3 rm 6nputan

7agi &nda $ang sudah bela!ar perintah<perintah .T-0 ( .$perte2t -ark up 0anguage) tentun$a tidak akan kesulitan dalam membuat +orm inputan untuk tabel mahasiswa di atas. 7entuk dan tampilan dari +orm inputan dapat disesuaikan sesuai keinginan &nda namun $ang penting untuk diperhatikan bahwa pastikan setiap inputan harus memiliki atribut name dan id agar dapat diakses dengan mudah melalui )/uer$ nantin$a. 7erikut ini source code .T-0 awal $ang menampilkan +orm inputan data mahasiswa. Simpan program berikut ini sebagai +ile 5inde2.php6. Perintah HT.% untu0 .em,uat 3 rm 6nputan
1 2 3 4 5 6 7 . / 1 11 12 13 14 15 16 17 1. 1/ 2 21 22 23 24 25 26 27 2. 2/ 0h'm&1 0head1 0'i'&e1En'2i% Edi'% De&e'e% Tam3i& Da'a den4an )H) dan A5a607'i'&e1 0s'8&e '83e9:'e6'7;ss:1 <&a=e&>2m ? dis3&a8@=&o;A; >on'BsiCe@sma&&; ma24inB'o3@536; D <e22o2 ? >on'BsiCe@sma&&; ;o&o2@2ed; D 07s'8&e1 07head1 0=od81 0h11Da'a +ahasiswa07h11 0>o2m a;'ion9:: me'hod9:3os': id9:>2m:1 0&a=e& >o29:nim: ;&ass9:&a=e&>2m:1"*+@ 07&a=e&1 0in3E' '83e9:'e6': name9:nim: id9:nim: ma6&en4'h9:1 : ;&ass9:2eFEi2ed: siCe9:15:71 0&a=e& >o29:nama: ;&ass9:&a=e&>2m:1"A+A@ 07&a=e&1 0in3E' '83e9:'e6': name9:nama: id9:nama: siCe9:3 : ;&ass9:2eFEi2ed:71 0&a=e& >o29:a&ama': ;&ass9:&a=e&>2m:1ALA+AT@ 07&a=e&1 0'e6'a2ea name9:a&ama': id9:a&ama': ;o&s9:4 : 2ows9:4: ;&ass9:2eFEi2ed:107'e6'a2ea1 0&a=e& >o29:sE=mi': ;&ass9:&a=e&>2m:1Gn=s3;07&a=e&1 0in3E' '83e9:sE=mi': name9:*n3E': Ha&Ee9:*n3E': id9:in3E':71 0in3E' '83e9:sE=mi': name9:Edi': Ha&Ee9:Edi': Halaman : dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
id9:edi':71 3 31 id9:de&e'e:71 0in3E' '83e9:sE=mi': name9:De&e'e: Ha&Ee9:De&e'e: 0in3E' '83e9:2ese': name9:C&ea2: Ha&Ee9:C&ea2: id9:;&ea2:71 32 07>o2m1 33 07=od81 34 07h'm&1

"ada program di atas terlihat bahwa terdapat satu buah +orm dengan id ;rm $ang memiliki ; (tiga) buah inputan te2t dan te2tarea serta % (empat) buah tombol $aitu 6nput Edit Delete dan 'lear. -asing<masing inputan diberi nama dan (D. 4ntuk inputan 1(- 1&-& dan &0&-&T !uga ditambahkan atribut class dengan *alue 5re=uired6 $ang berarti inputan harus diisi (menggunakan plugin )/uer$ 8alidate). 7erikut ini tampilan dari program sederhana di atas.

Gambar 1: Tampilan Form Inputan Data Mahasiswa

Halaman < dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net

:. = ne0#i0an 0e Data,a#e .ySQ%

'arena program dirancang untuk berhubungan dengan database -$S/0 maka terlebih dahulu harus dikoneksikan antara "." dengan -$S/0. 4ntuk melakukan koneksi ke -$S/0 dalam tutorial ini dicontohkan dengan cara $ang paling mudah. 'ita akan menggunakan +ungsi my#>l?c nnect)* dan my#>l?#elect?d,)* dari ".". "astikan &nda mengetahui in+ormasi letak hostname username password untuk masuk ke ser*er -$S/0 dan !uga nama database $ang akan digunakan sudah disiapkan. 7erikut ini potongan program untuk melakukan koneksi. 0etakkan di awal +ile inde2.php $ang telah dibuat di langkah sebelumn$a atau dapat !uga dibuat di +ile khusus dan di< include<kan. P t ngan Pr gram untu0 = ne0#i PHP dan .ySQ%
1 2 3 4 5 6 0I3h3 7J AoneAsi Ae d= J7 m8sF&K;onne;'(:&o;a&hos':% :2oo':% :Fwe2'8:! o2 die(m8sF&Ke22o2(!!; m8sF&Kse&e;'Kd=(:demo:! o2 die(m8sF&Ke22o2(!!; 7J aAhi2 AoneAsi d= J7 I1

<. Pr gram 6nput 0e .ySQ%

Setelah program "." terkoneksi dengan -$S/0 selan!utn$a dibuat program untuk proses input (insert) ke database. Secara umum untuk membuat program input ke database kita ambil dulu data $ang dientri oleh user sesuai dengan method dari +orm. 4ntuk me<re+resh kembali mengenai penanganan +orm di "." &nda dapat mempela!ari 7ab % dari buku Pemr graman +e, dengan PHP - .ySQ% ; $ang dapat didownload di website sa$a. Setelah data dari +orm diambil susun string perintah =uer$ untuk (1S,9T ke database. 7agaimana bentuk perintah (1S,9T dan contoh penggunaann$a !uga dapat dipela!ari di buku sa$a tersebut terutama di 7ab 12 dan 1;. 'urang lebih berikut ini potongan program untuk input / entri ke -$S/0. &nda dapat meletakkann$a setelah baris perintah koneksi database. P t ngan Pr gram untu0 Entri Data 0e Data,a#e
1 2 3 4 5 6 7
3

7J 3enan4anan >o2m J7 i> (isse'(LK)#STMN*n3E'NO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; Lnama 9 s'2i3K'a4s(LK)#STMNnamaNO!; La&ama' 9 s'2i3K'a4s(LK)#STMNa&ama'NO!; 77in3E' Ae d=

http://achmatim.net/buku-gratis/pemrograman-web-dengan-php-dan-mysql/

Halaman @ dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
. / 1 11 12 13 14 15 16 17 1. 1/ 2 LFEe28 9 s32in'>(:*"SERT *"T# mahasiswa VAL$ES(NPsN% NPsN% NPsN!:% m8sF&Kes;a3eKs'2in4(Lnim!% m8sF&Kes;a3eKs'2in4(Lnama!% m8sF&Kes;a3eKs'2in4(La&ama'! !; LsF& 9 m8sF&KFEe28(LFEe28!; i> (LsF&! ? e;ho :Da'a =e2hasi& disim3an:; D e&se ? e;ho :Da'a 4a4a& disim3an :; e;ho m8sF&Ke22o2(!; D D

7erikut ini sedikit pen!elasan dari potongan program diatas: 7aris 2: memastikan tombol 5(nput6 ditekan oleh user menggunakan +ungsi isset() $ang akan bernilai T94, !ika suatu *ariabel telah terbentuk (!ika user menekan suatu tombol maka *ariabel akan terbentuk) 7aris ;<>: proses pengambilan data dari +orm. ?ungsi strip@tags() digunakan untuk memastikan bahwa inputan tidak mengandung tag<tag .T-0 atau !a*ascript $ang mungkin 5berbaha$a6. 7aris A<12: pembentukan perintah untuk (1S,9T ke database. ?ungsi m$s=l@escape@string() digunakan untuk menambahkan escape (backslashes B ) !ika terdapat karakter khusus seperti tanda kutip dan dollar. .al tersebut dilakukan sebagai salah satu cara mencegah praktek S/0 (n!ection. 7aris 1;: eksekusi perintah -$S/0 untuk mengentri data ke database menggunakan +ungsi m$s=l@=uer$(). 7aris 1%<1C: noti+ikasi apakah proses berhasil atau gagal. "ada tahap ini sebaikn$a &nda coba program dengan menginput suatu data melalui +orm. "astikan tidak ada error dan data sudah masuk ke database (untuk melihat data langsung gunakan tools -$S/0 $ang &nda pun$a).

@. Serta0an %i,rary JQuery dan Plugin JQuery 3 rm

.ingga langkah ke<% di atas kita masih belum menggunakan konsep &!a2 (&s$nchronous )a*ascript and 3-0). &pa itu &!a2D Secara singkat a!a2 merupakan konsep pengembangan web $ang memungkinkan antara client dan ser*er dapat berkomunikasi secara as$nchronous suatu proses bisa sa!a ber!alan di belakang halaman. :ontoh penerapann$a sa$a rasa dengan mudah kita temui di ban$ak web seperti pada situs ?acebook saat kita meng<update status han$a bagian status a!a $ang berubah sedangkan keseluruhan halaman tidak berubah (re+resh). 0ebih lengkap mengenai &!a2 dapat &nda cari artikeln$a di Eoogle.
Halaman 2 dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net "ada tutorial ini digunakan librar$ utama JQuery $ang dapat didownload di situs http://code.!=uer$.com. Sedangkan untuk penanganan +orm dengan teknologi &!a2 digunakan plugin JQuery 3 rm $ang dapat didownload di situs http://malsup.com/!=uer$/+orm/. Dengan plugin ini kita dapat mengubah proses penanganan +orm secara klasik seperti pada langkah ke<% di atas men!adi proses penanganan +orm dengan 5ga$a6 &!a2. Sa$a memilih plugin ini dengan alasan kemudahan dalam penerapann$a. 4ntuk men$ertakan librar$ )/uer$ dan )/uer$ ?orm ke dalam halaman $ang sudah kita buat sebelumn$a tambahkan dua baris perintah berikut ini di antara tag FheadG (diasumsikan bahwa kedua plugin tersimpan di +older /libs). P t ngan Pr gram untu0 .enyerta0an %i,rary JQuery dan Plugin JQuery 3 rm
1 2 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<min<5s:107s;2i3'1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<>o2m<5s:107s;2i3'1

Dan setelah librar$ disertakan kita dapat memanggil plugin )/uer$ ?orm untuk mengakti+kan proses &!a2 di dalam +orm. "emanggilann$a sangat mudah cukup atur opsi / pilihan dan akti+kan berdasarkan selector dari +orm $ang akan dipanggil. 7erikut ini program lengkap $ang sudah ditambahkan pemanggilan plugin )/uer$ ?orm. Pr gram %eng0ap Setelah Ditam,ah0an %i,rary JQuery dan Plugin JQuery 3 rm
1 2 3 4 5 6 7 . / 1 11 12 13 14 15 16 17 1. 1/ 2 21 22 0I3h3 7J AoneAsi Ae d= J7 m8sF&K;onne;'(:&o;a&hos':% :2oo':% :Fwe2'8:! o2 die(m8sF&Ke22o2(!!; m8sF&Kse&e;'Kd=(:demo:! o2 die(m8sF&Ke22o2(!!; 7J aAhi2 AoneAsi d= J7 7J 3enan4anan >o2m J7 i> (isse'(LK)#STMN*n3E'NO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; Lnama 9 s'2i3K'a4s(LK)#STMNnamaNO!; La&ama' 9 s'2i3K'a4s(LK)#STMNa&ama'NO!; 77in3E' Ae d= LFEe289 s32in'>(:*"SERT *"T# mahasiswa VAL$ES(NPsN% NPsN% NPsN!:% m8sF&Kes;a3eKs'2in4(Lnim!% m8sF&Kes;a3eKs'2in4(Lnama!% m8sF&Kes;a3eKs'2in4(La&ama'! !; LsF& 9 m8sF&KFEe28(LFEe28!; L3esan 9 ::; i> (LsF&! ? L3esan 9 :Da'a =e2hasi& disim3an:; Halaman A dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
23 D e&se ? 24 L3esan 9 :Da'a 4a4a& disim3an :; 25 L3esan <9 m8sF&Ke22o2(!; 26 D 27 L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; 2. e;ho 5sonKen;ode(L2es3onse!; 2/ e6i'; 3 D 31 I1 32 0h'm&1 33 0head1 34 0'i'&e1En'2i% Edi'% De&e'e% Tam3i& Da'a den4an )H) dan A5a607'i'&e1 35 0s'8&e '83e9:'e6'7;ss:1 36 <&a=e&>2m ? 37 dis3&a8@=&o;A; 3. >on'BsiCe@sma&&; 35 ma24inB'o3@536; 36 D 37 <e22o2 ? 3. >on'BsiCe@sma&&; 3/ ;o&o2@2ed; 4 D 41 07s'8&e1 42 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<min<5s:107s;2i3'1 43 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<>o2m<5s:107s;2i3'1 44 0s;2i3' '83e9:'e6'75aHas;2i3':1 45 L(do;Emen'!<2ead8(>En;'ion(! ? 46 77aA'i>Aan a5a6 di >o2m 47 Ha2 o3'ions 9 ? 4. sE;;ess @ showRes3onse% 4/ 2ese'Qo2m @ '2Ee% 5 ;&ea2Qo2m @ '2Ee% 51 da'aT83e @ N5sonN 52 D; 53 L(NR>2mN!<a5a6Qo2m(o3'ions!; 54 55 D!; 56 >En;'ion showRes3onse(2es3onseTe6'% s'a'EsTe6'! ? 57 Ha2 da'a 9 2es3onseTe6'MNda'aNO; 5. Ha2 3esan 9 2es3onseTe6'MN3esanNO; 5/ a&e2'(3esan!; 6 D 61 07s;2i3'1 62 07head1 63 0=od81 64 0h11Da'a +ahasiswa07h11 Halaman B dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
65 66 67 6. 6/ 7 71 72 73 74 75 76 77 7. 7/ 0>o2m a;'ion9:: me'hod9:3os': id9:>2m:1 0&a=e& >o29:nim: ;&ass9:&a=e&>2m:1"*+@ 07&a=e&1 0in3E' '83e9:'e6': name9:nim: id9:nim: ma6&en4'h9:1 : ;&ass9:2eFEi2ed: siCe9:15:71 0&a=e& >o29:nama: ;&ass9:&a=e&>2m:1"A+A@ 07&a=e&1 0in3E' '83e9:'e6': name9:nama: id9:nama: siCe9:3 : ;&ass9:2eFEi2ed:71 0&a=e& >o29:a&ama': ;&ass9:&a=e&>2m:1ALA+AT@ 07&a=e&1 0'e6'a2ea name9:a&ama': id9:a&ama': ;o&s9:4 : 2ows9:4: ;&ass9:2eFEi2ed:107'e6'a2ea1 0&a=e& >o29:sE=mi': ;&ass9:&a=e&>2m:1Gn=s3;07&a=e&1 0in3E' '83e9:sE=mi': name9:*n3E': Ha&Ee9:*n3E': id9:in3E':71 id9:edi':71 id9:de&e'e:71 0in3E' '83e9:sE=mi': name9:Edi': Ha&Ee9:Edi': 0in3E' '83e9:sE=mi': name9:De&e'e: Ha&Ee9:De&e'e:

0in3E' '83e9:2ese': name9:C&ea2: Ha&Ee9:C&ea2: id9:;&ea2:71 . 07>o2m1 .1 07=od81 .2 07h'm&1

Setelah librar$ )/uer$ dan plugin )/uer$ ?orm disertakan (baris %2 dan %;) pada baris %><>> diterapkan plugin )/uer$ ?orm pada +orm inputan (id +orm H I+rm) dengan beberapa pengaturan (opsi). Jpsi pada baris %A berarti pada saat +orm inputan berhasil disubmit maka akan otomatis memanggil +ungsi #h 5(e#p n#e)* $ang dide+inisikan pada baris >K< K0. Jpsi baris %C dan >0 membuat +orm kembali ke posisi awal (reset) setelah proses submit ter!adi sedangkan opsi pada baris >1 merupakan pengaturan data $ang dikirimkan secara as$nchronous dalam bentuk )SJ1 ()a*ascript Jb!ect 1otation). "ada saat +orm disubmit (ditekan tombol (nput) data inputan tetap akan dikirim dan diproses oleh "." melalui action $ang telah ditentukan (baris A<;0). 1amun pengiriman data tidak akan me<re+resh halaman karena dilakukan di belakang halaman (as$nchronous). Setelah proses pen$impanan data ke database berhasil dilakukan selan!utn$a "." akan mengirimkan 5pesan6 dalam bentuk )SJ1 ke !a*ascript. "erhatikan baris 2L<2C $ang mengubah *ariabel arra$ berisi pesan men!adi +ormat )SJ1 menggunakan +ungsi j# n?enc de)* dari "." serta mengirimkann$a ke +ungsi !a*ascript #h 5(e#p n#e)* di baris >K<K0. .asil dari program di atas setelah ditambahkan plugin )/uer$ ?orm tampak pada Eambar 2.

Halaman C dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net

Gambar 2: Proses Entri setelah ditambahkan plugin J uer! Form

2. 4alida#i dengan plugin JQuery 4alidati n

Seperti sudah pernah di!elaskan dan dicontohkan di tutorial sa$a ber!udul .em,uat 4alida#i 3 rm dengan JQuery 4alidati n < selan!utn$a ditambahkan *alidasi +orm inputan dengan aturan semua +ield inputan $ang harus diisi (re=uired) dan khusus untuk inputan 1(- han$a boleh diisi 10 digit angka (tidak boleh diisi huru+). 7erikut ini source code program setelah ditambahkan plugin )/uer$ 8alidation. Pr gram %eng0ap Setelah Ditam,ah0an %i,rary JQuery dan Plugin JQuery 3 rm
1 2 3 4 5 6 7 . / 1 11 12 13 14 15 16
4

0I3h3 7J AoneAsi Ae d= J7 m8sF&K;onne;'(:&o;a&hos':% :2oo':% :Fwe2'8:! o2 die(m8sF&Ke22o2(!!; m8sF&Kse&e;'Kd=(:demo:! o2 die(m8sF&Ke22o2(!!; 7J aAhi2 AoneAsi d= J7 7J 3enan4anan >o2m J7 i> (isse'(LK)#STMN*n3E'NO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; Lnama 9 s'2i3K'a4s(LK)#STMNnamaNO!; La&ama' 9 s'2i3K'a4s(LK)#STMNa&ama'NO!; 77in3E' Ae d= LFEe289 s32in'>(:*"SERT *"T# mahasiswa VAL$ES(NPsN% NPsN% NPsN!:% m8sF&Kes;a3eKs'2in4(Lnim!% m8sF&Kes;a3eKs'2in4(Lnama!%

http://achmatim.net/2012/0 /22/membuat-!alidasi-"orm-dengan-#query-!alidation/

Halaman &D dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
17 m8sF&Kes;a3eKs'2in4(La&ama'! 1. !; 1/ LsF& 9 m8sF&KFEe28(LFEe28!; 2 L3esan 9 ::; 21 i> (LsF&! ? 22 L3esan 9 :Da'a =e2hasi& disim3an:; 23 D e&se ? 24 L3esan 9 :Da'a 4a4a& disim3an :; 25 L3esan <9 m8sF&Ke22o2(!; 26 D 27 L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; 2. e;ho 5sonKen;ode(L2es3onse!; 2/ e6i'; 3 D 31 I1 32 0h'm&1 33 0head1 34 0'i'&e1En'2i% Edi'% De&e'e% Tam3i& Da'a den4an )H) dan A5a607'i'&e1 35 0s'8&e '83e9:'e6'7;ss:1 36 <&a=e&>2m ? 37 dis3&a8@=&o;A; 3. >on'BsiCe@sma&&; 35 ma24inB'o3@536; 36 D 37 <e22o2 ? 3. >on'BsiCe@sma&&; 3/ ;o&o2@2ed; 4 D 41 07s'8&e1 42 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<min<5s:107s;2i3'1 43 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<>o2m<5s:107s;2i3'1 44 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<Ha&ida'e<min<5s:107s;2i3'1 45 0s;2i3' '83e9:'e6'75aHas;2i3':1 46 L(do;Emen'!<2ead8(>En;'ion(! ? 47 77aA'i>Aan a5a6 di >o2m 4. Ha2 o3'ions 9 ? 4/ sE;;ess @ showRes3onse% 5 =e>o2eSE=mi'@ >En;'ion(!? 51 2e'E2n L(:R>2m:!<Ha&id(!; 52 D% 53 2ese'Qo2m @ '2Ee% 54 ;&ea2Qo2m @ '2Ee% 55 da'aT83e @ N5sonN 56 D; 57 L(NR>2mN!<a5a6Qo2m(o3'ions!; Halaman && dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
5. 5/ 6 61 62 63 64 65 66 67 6. 6/ 7 71 72 73 74 75 76 77 7. 7/ . .1 .2 .3 .4 .5 .6 .7 .. ./ / /1 /2 /3 /4 /5 /6 /7 /. // 1 =ena2: D!; D 77Ha&idasi >o2m d4n 5FEe28 Ha&ida'e L(NR>2mN!<Ha&ida'e(? 2E&es@ ? nim @ ? di4i's@ '2Ee% min&en4'h@1 % ma6&en4'h@1 D D% messa4es@ ? nim@ ? 2eFEi2ed@ :-o&om nim ha2Es diisi:% min&en4'h@ :-o&om nim ha2Es 'e2di2i ma6&en4'h@ :-o&om nim ha2Es 'e2di2i di4i's@ :"*+ ha2Es =e2E3a an4Aa: D% nama@ ? 2eFEi2ed@ :"ama ha2Es diisi den4an D

da2i 1 da2i 1

di4i':% di4i':%

D!; >En;'ion showRes3onse(2es3onseTe6'% s'a'EsTe6'! ? Ha2 da'a 9 2es3onseTe6'MNda'aNO; Ha2 3esan 9 2es3onseTe6'MN3esanNO; a&e2'(3esan!; D 07s;2i3'1 07head1 0=od81 0h11Da'a +ahasiswa07h11 0>o2m a;'ion9:: me'hod9:3os': id9:>2m:1 0&a=e& >o29:nim: ;&ass9:&a=e&>2m:1"*+@ 07&a=e&1 0in3E' '83e9:'e6': name9:nim: id9:nim: ma6&en4'h9:1 : ;&ass9:2eFEi2ed: siCe9:15:71 0&a=e& >o29:nama: ;&ass9:&a=e&>2m:1"A+A@ 07&a=e&1 0in3E' '83e9:'e6': name9:nama: id9:nama: siCe9:3 : ;&ass9:2eFEi2ed:71 0&a=e& >o29:a&ama': ;&ass9:&a=e&>2m:1ALA+AT@ 07&a=e&1 0'e6'a2ea name9:a&ama': id9:a&ama': ;o&s9:4 : 2ows9:4: ;&ass9:2eFEi2ed:107'e6'a2ea1 0&a=e& >o29:sE=mi': ;&ass9:&a=e&>2m:1Gn=s3;07&a=e&1 Halaman &/ dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
1 1 1 2 1 3 1 4 id9:in3E':71 id9:edi':71 id9:de&e'e:71 0in3E' '83e9:sE=mi': name9:*n3E': Ha&Ee9:*n3E': 0in3E' '83e9:sE=mi': name9:Edi': Ha&Ee9:Edi': 0in3E' '83e9:sE=mi': name9:De&e'e: Ha&Ee9:De&e'e: 0in3E' '83e9:2ese': name9:C&ea2: Ha&Ee9:C&ea2:

id9:;&ea2:71 1 5 07>o2m1 1 6 07=od81 1 7 07h'm&1

4ntuk menerapkan *alidasi di +orm inputan pertama<tama sertakan plugin )/uer$ 8alidate seperti terlihat pada baris %% program di atas. Selan!utn$a terapkan rule $ang sudah ditetapkan pada +orm sesuai dengan contoh pada baris >C hingga LC. Dan untuk mengintegrasikan plugin )/uer$ 8alidation dengan )/uer$ ?orm $ang sudah diterapkan sebelumn$a tambahkan opsi ,e; reSu,mit seperti pada baris >0<>2 program di atas.

2. Tampil0an Data dalam $entu0 Ta,el dengan 3lexigrid

4ntuk menampilkan data pada dasarn$a ban$ak pilihan bentuk baik dalam bentuk list maupun tabel. 'ali ini kita akan meman+aatkan plugin )/uer$ untuk menampilkan data dalam bentuk tabel $aitu 3lexigrid >. 'elebihan utama dari plugin ini adalah kemudahan dan +leksibilitas dalam penerapann$a. 'ita tidak perlu membuat tabel dengan perintah .T-0 cukup dengan menambahkan tag FtableG dengan id tertentu selebihn$a plugin ?le2igrid $ang akan mengatur isin$a. 'olom<kolom tabel dapat diatur dengan +leksibel sesuai kebutuhan semua dilakukan melalui perintah )a*ascript. Sementara itu data $ang akan ditampilkan dalam tabel dapat berasal dari berbagai bentuk data antara lain &rra$ )a*ascript 3-0 )SJ1 maupun plain<te2t. Dari sisi source data tentun$a dapat berasal dari halaman $ang sama maupun halaman lain. 'elebihan lainn$a adalah kolom dapat digeser diurutkan dan diatur ukurann$a on<the<+l$ langsung di browser. Selain itu !uga sudah tersedia halaman (paging) dan pencarian data (searching) berdasarkan kolom tertentu. 4ntuk menampilkan data dengan ?le2igrid cukup dengan % (empat) langkah sederhana $aitu (1) sertakan librar$ (!a*ascript M :SS) $ang diperlukan (2) siapkan ob$ek tabel dengan tag .T-0 FtableG (;) atur kolom $ang akan ditampilkan dan (%) siapkan potongan program untuk menangani data. "ada langkah pertama kita sertakan librar$ $ang diperlukan seperti terlihat pada potongan program di bawah ini. Terdapat satu +ile :SS $ang akan mengatur tampilan tabel +le2igrid (baris 1) dan terdapat librar$ utama +le2igrid (baris ;). Selain itu pada *ersi terakhir +le2igrid harus disertakan plugin JQuery ' 0ie 2 buatan 'laus .artl (baris 2).

http://"le$igrid.in"o/ https://github.com/carhartl/#query-cookie

Halaman &: dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net P t ngan Pr gram untu0 .enyerta0an %i,rary 3lexigrid
1 2 3 0&inA 2e&9:s'8&eshee': '83e9:'e6'7;ss: h2e>9:&i=s7>&e6i42id7;ss7>&e6i42id<;ss:1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<;ooAie<5s:107s;2i3'1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s7>&e6i42id75s7>&e6i42id<5s:107s;2i3'1

0angkah kedua siapkan ob$ek tabel beserta atribut id<n$a pada tempat dimana kita akan menampilkan data. Eunakan perintah sederhana sebagai berikut: P t ngan Pr gram untu0 .enyiap0an 9,ye0 Ta,el
1 0'a=&e id9:>&e61: s'8&e9:dis3&a8@none:107'a=&e1

0angkah ketiga adalah mengatur kolom<kolom $ang akan ditampilkan beserta beberapa opsi atau properties dari tabel +le2igrid. 0angsung sa!a kita lihat contoh potongan program di bawah ini. P t ngan Pr gram untu0 .engatur = l m dan 9p#i Ta,el 3lexigrid
1 2 3 4 5 6 7 . / 1 11 12 13 14 15 16 17 1. 1/ 2 21 22 23 24 25 26 77>&e6i42id hand&in4 L(NR>&e61N!<>&e6i42id ( ? E2&@ Ninde6<3h3Ia;'ion94e'da'aN% da'aT83e@ N5sonN% ;o&+ode& @ M ?dis3&a8@ N"*+N% name @ NnimN% wid'h @ 1 % so2'a=&e @ '2Ee% a&i4n@ N&e>'ND% ?dis3&a8@ N"amaN% name @ NnamaN% wid'h @ 2 % so2'a=&e @ '2Ee% a&i4n@ N&e>'ND% ?dis3&a8@ NA&ama'N% name @ Na&ama'N% wid'h @ 4 % so2'a=&e @ '2Ee% a&i4n@ N&e>'ND O% sea2;hi'ems @ M ?dis3&a8@ N"*+N% name @ NnimND% ?dis3&a8@ N"amaN% name @ NnamaN% isde>aE&'@ '2EeD O% so2'name@ NnamaN% 77de>aE&' E2E' Ao&om nama so2'o2de2@ Nas;N% 77de>aE&' E2E' as;endin4 Ese3a4e2@ '2Ee% 77'am=ahAan 3a4in4 'i'&e@ NDa'a +ahasiswaN% 775EdE& >&e6i42id EseR3@ '2Ee% 23@ 15% showTa=&eTo44&eB'n@ '2Ee% wid'h@ 7 % 77&e=a2 'a=e& hei4h'@ 4 77'in44i 'a=e& Halaman &< dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
27 2. !; D

Sedikit pen!elasan mengenai potongan program di atas. 7aris 2: "emanggilan librar$ +le2igrid diawali dengan memanggil +ungsi ;lexigrid)* dan diterapkan pada tabel dengan id E;lex& sesuai dengan tabel $ang sudah dibuat di langkah sebelumn$a. 7aris ><K: Jpsi url dapat diisi dengan alamat source data $ang akan ditampilkan di tabel. &lamat source data dapat berasal dari halaman $ang sama seperti pada contoh di atas dapat !uga dari halaman berbeda. ?ormat datan$a harus sesuai dengan opsi $ang dipilih pada baris K $aitu dataType (dalam hal ini menggunakan )SJ1). 7aris A<12: "engaturan kolom<kolom $ang akan ditampilkan di tabel. 4rutan dari kolom harus sesuai dengan urutan data source<n$a !ika tidak isi data bisa sa!a tidak sesuai. "ada setiap kolom terdapat beberapa pengaturan seperti !udul kolom ( displa$) nama kolom (name) sebagai identitas kolom lebar kolom (width) dapat diurutkan atau tidak (sortable) dan perataan kolom (align). "ada contoh di atas terdapat ; kolom $aitu nim nama dan alamat. 7aris 1;<1K: -enambahkan +itur pencarian dimana pencarian dapat dilakukan berdasarkan kolom nim dan nama. 7aris 1A<2L: 7eberapa pengaturan lainn$a $ang dapat dilakukan seperti pengaturan pengurutan pengaturan halaman (paging) serta lebar dan tinggi tabel. 0angkah keempat atau $ang terakhir untuk menampilkan data ke +le2igrid adalah men$iapkan potongan program "." untuk menangani data. )ika data berasal dari database maka tugas bagian ini adalah melakukan pengambilan data (S,0,:T) untuk selan!utn$a di+ormat sesuai dengan standar +le2igrid dan dikirimkan ke librar$ +le2igrid untuk ditampilkan. Dalam contoh ini data di+ormat dalam bentuk )SJ1. 7erikut ini potongan program "." untuk menangani data +le2igrid. P t ngan Pr gram PHP untu0 .enangani Data yang A0an Tampil di 3lexigrid
1 2 3 4 5 6 7 . / 1 11 i> (isse'(LKSETMNa;'ionNO! GG LKSETMNa;'ionNO 99 N4e'da'aN! ? L3a4e 9 (isse'(LK)#STMN3a4eNO!!ILK)#STMN3a4eNO@ 1; L23 9 (isse'(LK)#STMN23NO!!ILK)#STMN23NO @ 1 ; Lso2'name 9 (isse'(LK)#STMNso2'nameNO!!I LK)#STMNso2'nameNO @ NnamaN; Lso2'o2de2 9 (isse'(LK)#STMNso2'o2de2NO!!I LK)#STMNso2'o2de2NO @ Nas;N; Lso2' 9 :#RDER B, Lso2'name Lso2'o2de2:; Ls'a2' 9 ((L3a4eB1! J L23!; L&imi' 9 :L*+*T Ls'a2'% L23:; LFEe28 9 (isse'(LK)#STMNFEe28NO!!I LK)#STMNFEe28NO @ NN; Halaman &@ dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
12 13 14 15 16 17 1. 1/ 2 21 22 23 24 25 26 27 2. 2/ 3 31 32 33 34 35 36 37 3. 3/ D LF'83e 9 (isse'(LK)#STMNF'83eNO!!I LK)#STMNF'83eNO @ NN; Lwhe2e 9 ::; i> (LFEe28! Lwhe2e <9 :THERE LF'83e L*-E NPLFEe28PN :; LFEe28 9 :SELECT nim% nama% a&ama' :; LFEe28K>2om 9: QR#+ mahasiswa :; LFEe28 <9 LFEe28K>2om < : Lwhe2e Lso2' L&imi':; LFEe28K'o'a& 9 :SELECT C#$"T(J!:< LFEe28K>2om<: :<Lwhe2e; LsF& 9 m8sF&KFEe28(LFEe28! o2 die(LFEe28!; LsF&K'o'a& 9 m8sF&KFEe28(LFEe28K'o'a&! o2 die(LFEe28K'o'a&!; L'o'a& 9 m8sF&K>e';hK2ow(LsF&K'o'a&!; Lda'a 9 LK)#ST; Lda'aMN'o'a&NO 9 L'o'a&M O; Lda'a6 9 a22a8(!; Lda'a6K2 9 a22a8(!; whi&e (L2ow 9 m8sF&K>e';hK2ow(LsF&!! ? L2owsMNidNO 9 L2owM O; Lda'a6MN;e&&NO 9 L2ow; a22a8K3Esh(Lda'a6K2% Lda'a6!; D Lda'aMN2owsNO 9 Lda'a6K2; e;ho 5sonKen;ode(Lda'a!; e6i';

Eambar ; berikut ini tampilan halaman setelah ditambahkan tabel +le2igrid.

Halaman &2 dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net

Gambar ": Tampilan Fle#igrid

A. Tampil0an Data di 3 rm #aat $ari# 3exigrid Dipilih

Data sudah ditampilkan di dalam grid selan!utn$a akan dilakukan proses ,dit dan Delete. 4ntuk keperluan proses tersebut setiap baris data di dalam +le2igrid dipilih akan ditampilkan di +orm $ang sudah dibuat. )adi untuk sebelum melakukan proses ,D(T dan D,0,T, perlu memilih data $ang akan diproses dengan mengklik pada baris data di +le2igrid. 4ntuk menambahkan action saat baris +le2igrid diklik cukup menambahkan atribut Npr ce##N pada pende+inisian c l. del. "erhatikan contoh sebagai berikut dimana d acti n merupakan +ungsi !a*ascript $ang akan dipanggil saat suatu baris diklik / dipilih. P t ngan Pr gram untu0 .enam,ah0an Acti n pada $ari# 3lexigrid
1 2 3 4 ;o&+ode& @ M ?dis3&a8@ N"*+N% name @ NnimN% wid'h @ 1 % so2'a=&e @ '2Ee% a&i4n@ N&e>'N% 32o;ess@ doa;'ionD% ?dis3&a8@ N"amaN% name @ NnamaN% wid'h @ 2 % so2'a=&e @ '2Ee% a&i4n@ N&e>'N% 32o;ess@ doa;'ionD% ?dis3&a8@ NA&ama'N% name @ Na&ama'N% wid'h @ 4 % so2'a=&e @ '2Ee% a&i4n@ N&e>'N% 32o;ess@ doa;'ionD

Halaman &A dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
5 O%

Dan berikut ini contoh +ungsi d acti n $ang akan menangani proses saat baris data di +le2igrid dipilih. 3ung#i Ja"a#cript d acti n)* untu0 .enangani Pr #e# =li0 $ari# 3lexigrid
>En;'ion doa;'ion( ;e&DiH% id ! ? L( ;e&DiH !<;&i;A( >En;'ion(! ? Ha2 nim 9 L ('his!<3a2en'(!<3a2en'(!<;hi&d2en(N'dN!<eF( !<'e6'(!; 4 L<4e'US#" (Ninde6<3h3N%?a;'ion@N4e'KmhsN%nim@nimD% >En;'ion (5son! ? 5 L(NRnimN!<Ha&(5son<nim!; 6 L(NRnamaN!<Ha&(5son<nama!; 7 L(NRa&ama'N!<Ha&(5son<a&ama'!; . D!; / L(NRnimN!<a''2(N2eadon&8N%N2eadon&8N!; 1 L(NRin3E'N!<a''2(Ndisa=&edN%Ndisa=&edN!; 11 L(NRedi'% Rde&e'eN!<2emoHeA''2(Ndisa=&edN!; 12 D!; 13 D 1 2 3

"erhatikan +ungsi d acti n di atas. "ertama +ungsi akan melakukan pengecekan apakah terdapat suatu cell (kolom baris) data diklik (lihat baris 2). )ika terdapat cell $ang diklik maka ambil nilai dari cell pada kolom pertama baris tersebut $aitu cell $ang berisi 1(- sebagai primar$ ke$<n$a (lihat baris ;). Tentun$a baris ; harus disesuaikan dengan struktur data $ang ada !ika lebih dari satu primar$ ke$ $a tinggal tambahkan *ariabel lainn$a. 0an!ut setelah 1(- dari baris didapatkan kita perlu mendapatkan data lengkap dari database sehingga nim tersebut dikirimkan ke halaman index.php secara as$nchronous (baris %). Dengan perintah baris % seolah<olah kita mengakses browser dengan alamat http://namaser*er/inde2.phpDactionHget@mhsMnimHnim namun dilakukan oleh )a*ascript sehingga tidak kelihatan secara kasat mata. Sementara itu karena meman+aatkan +ungsi F.getJS9N sehingga balikan data harus dalam +ormat )SJ1. "ada baris ><L data balikan $ang berupa )SJ1 ditampilkan di +orm melalui +ungsi F."al)* dari )/uer$. 4ntuk melengkapi proses pada baris C<12 diatur agar +orm inputan 1(- tidak dapat diedit (readonl$) akti+kan tombol ,D(T dan D,0,T, serta disable tombol (1"4T. 7erikut ini potongan program "." untuk mengambil data berdasarkan 1(- $ang dipilih. Data dikembalikan dalam +ormat )SJ1 ()a*ascript Jb!ect 1otation) seperti terlihat pada baris K.

Halaman &B dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net P t ngan Pr gram PHP untu0 .engam,il Data %eng0ap dari Data,a#e
1 2 3 4 5 6 7 . i> (isse'(LKSETMNa;'ionNO! GG LKSETMNa;'ionNO 99 N4e'KmhsN! ? Lnim 9 LKSETMNnimNO; LFEe28 9 :SELECT J QR#+ mahasiswa THERE nim9NLnimN:; LsF& 9 m8sF&KFEe28(LFEe28!; L2ow 9 m8sF&K>e';hKasso;(LsF&!; e;ho 5sonKen;ode (L2ow!; e6i'; D

B. Pr #e# Edit dan Delete

Setelah data dipilih dan ditampilkan di dalam +orm inputan dapat dengan mudah dilakukan proses ,D(T dan D,0,T,. Seperti haln$a proses (1"4T pada dasarn$a proses ,D(T dan D,0,T, akan mengambil data dari +orm dan men!alankan perintah =uer$ 4"D&T, atau D,0,T, ke tabel. 'arena +orm sudah diakti+kan sebagai +orm &!a2 (lihat kembali langkah >) dan !uga sudah otomatis dilakukan *alidasi (lihat langkah K) maka kita tinggal mende+inisikan potongan program "." untuk ,D(T dan D,0,T,. 0ihat potongan program di bawah ini. P t ngan Pr gram PHP untu0 .enangani Data yang A0an Tampil di 3lexigrid
1 2 3 4 5 6 7 . / 1 11 12 13 14 15 16 17 1. 1/ 2 21 22 23 24 25 i> (isse'(LK)#STMNEdi'NO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; Lnama 9 s'2i3K'a4s(LK)#STMNnamaNO!; La&ama' 9 s'2i3K'a4s(LK)#STMNa&ama'NO!; 77E3da'e d= LFEe28 9 s32in'>(:$)DATE mahasiswa SET nama9NPsN% a&ama'9NPsN THERE nim9NPsN:% m8sF&Kes;a3eKs'2in4(Lnama!% m8sF&Kes;a3eKs'2in4(La&ama'!% m8sF&Kes;a3eKs'2in4(Lnim! !; LsF& 9 m8sF&KFEe28(LFEe28!; L3esan 9 ::; i> (LsF&! ? L3esan 9 :Da'a =e2hasi& disim3an:; D e&se ? L3esan 9 :Da'a 4a4a& disim3an :; L3esan <9 m8sF&Ke22o2(!; D L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; e;ho 5sonKen;ode(L2es3onse!; e6i'; D e&se i> (isse'(LK)#STMNDe&e'eNO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!;

Halaman &C dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
26 27 2. 2/ 3 31 32 33 34 35 36 37 3. 3/ 4 41 D 77de&e'e da'a LFEe28 9 s32in'>(:DELETE QR#+ mahasiswa THERE nim9NPsN:% m8sF&Kes;a3eKs'2in4(Lnim! !; LsF& 9 m8sF&KFEe28(LFEe28!; L3esan 9 ::; i> (LsF&! ? L3esan 9 :Da'a =e2hasi& diha3Es:; D e&se ? L3esan 9 :Da'a 4a4a& diha3Es :; L3esan <9 m8sF&Ke22o2(!; D L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; e;ho 5sonKen;ode(L2es3onse!; e6i';

C. Pr gram %eng0ap Ada di #iniG

7agian demi bagian sudah dibahas semoga cukup !elas dan dapat dipahami. Di bawah ini program lengkap dan hasil akhir dari tutorial kita. &nda dapat mencoban$a di komputer &nda tentun$a dengan men$ertakan librar$ $ang diperlukan. Di bawah ini !uga tersedia tautan untuk mencoba contoh program ini secara langsung (li*e demo) dan !uga tautan untuk mendownload program lengkap beserta librar$ $ang diperlukan. Pr gram %eng0ap Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery
1 2 3 4 5 6 7 . / 1 11 12 13 14 15 16 17 1. 1/ 2 21 22 23 0I3h3 7J AoneAsi Ae d= J7 m8sF&K;onne;'(:&o;a&hos':% :2oo':% :Fwe2'8:! o2 die(m8sF&Ke22o2(!!; m8sF&Kse&e;'Kd=(:demo:! o2 die(m8sF&Ke22o2(!!; 7J aAhi2 AoneAsi d= J7 7J 3enan4anan >o2m J7 i> (isse'(LK)#STMN*n3E'NO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; Lnama 9 s'2i3K'a4s(LK)#STMNnamaNO!; La&ama' 9 s'2i3K'a4s(LK)#STMNa&ama'NO!; 77in3E' Ae d= LFEe28 9 s32in'>(:*"SERT *"T# mahasiswa VAL$ES(NPsN% NPsN% NPsN!:% m8sF&Kes;a3eKs'2in4(Lnim!% m8sF&Kes;a3eKs'2in4(Lnama!% m8sF&Kes;a3eKs'2in4(La&ama'! !; LsF& 9 m8sF&KFEe28(LFEe28!; L3esan 9 ::; i> (LsF&! ? L3esan 9 :Da'a =e2hasi& disim3an:; D e&se ?

Halaman /D dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
24 25 26 27 2. 2/ 3 31 32 33 34 35 36 37 3. 3/ 4 41 42 43 44 45 46 47 4. 4/ 5 51 52 53 54 55 56 57 5. 5/ 6 61 62 63 64 65 66 67 6. 6/ 7 71 72 73 74 75 76 L3esan 9 :Da'a 4a4a& disim3an :; L3esan <9 m8sF&Ke22o2(!;

D L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; e;ho 5sonKen;ode(L2es3onse!; e6i'; D e&se i> (isse'(LK)#STMNEdi'NO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; Lnama 9 s'2i3K'a4s(LK)#STMNnamaNO!; La&ama' 9 s'2i3K'a4s(LK)#STMNa&ama'NO!; 77E3da'e da'a LFEe28 9 s32in'>(:$)DATE mahasiswa SET nama9NPsN% a&ama'9NPsN THERE nim9NPsN:% m8sF&Kes;a3eKs'2in4(Lnama!% m8sF&Kes;a3eKs'2in4(La&ama'!% m8sF&Kes;a3eKs'2in4(Lnim! !; LsF& 9 m8sF&KFEe28(LFEe28!; L3esan 9 ::; i> (LsF&! ? L3esan 9 :Da'a =e2hasi& disim3an:; D e&se ? L3esan 9 :Da'a 4a4a& disim3an :; L3esan <9 m8sF&Ke22o2(!; D L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; e;ho 5sonKen;ode(L2es3onse!; e6i'; D e&se i> (isse'(LK)#STMNDe&e'eNO!! ? Lnim 9 s'2i3K'a4s(LK)#STMNnimNO!; 77de&e'e da'a LFEe28 9 s32in'>(:DELETE QR#+ mahasiswa THERE nim9NPsN:% m8sF&Kes;a3eKs'2in4(Lnim! !; LsF& 9 m8sF&KFEe28(LFEe28!; L3esan 9 ::; i> (LsF&! ? L3esan 9 :Da'a =e2hasi& diha3Es:; D e&se ? L3esan 9 :Da'a 4a4a& diha3Es :; L3esan <9 m8sF&Ke22o2(!; D L2es3onse 9 a22a8(N3esanN91L3esan% Nda'aN91LK)#ST!; e;ho 5sonKen;ode(L2es3onse!; e6i'; D e&se i> (isse'(LKSETMNa;'ionNO! GG LKSETMNa;'ionNO 99 N4e'da'aN! ? L3a4e 9 (isse'(LK)#STMN3a4eNO!!ILK)#STMN3a4eNO@ 1; L23 9 (isse'(LK)#STMN23NO!!ILK)#STMN23NO @ 1 ; Lso2'name 9 (isse'(LK)#STMNso2'nameNO!!I LK)#STMNso2'nameNO @ NnamaN; Lso2'o2de2 9 (isse'(LK)#STMNso2'o2de2NO!!I LK)#STMNso2'o2de2NO @ Nas;N;

Halaman /& dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
77 7. 7/ . .1 .2 .3 .4 .5 .6 .7 .. ./ / /1 /2 /3 /4 /5 /6 /7 /. // 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 . 1 / 11 111 112 113 114 115 116 117 11. 11/ 12 121 122 123 124 125 126 127 12. 12/ Lso2' 9 :#RDER B, Lso2'name Lso2'o2de2:; Ls'a2' 9 ((L3a4eB1! J L23!; L&imi' 9 :L*+*T Ls'a2'% L23:; LFEe28 9 (isse'(LK)#STMNFEe28NO!!I LK)#STMNFEe28NO @ NN; LF'83e 9 (isse'(LK)#STMNF'83eNO!!I LK)#STMNF'83eNO @ NN; Lwhe2e 9 ::; i> (LFEe28! Lwhe2e <9 :THERE LF'83e L*-E NPLFEe28PN :; LFEe28 9 :SELECT nim% nama% a&ama' :; LFEe28K>2om 9: QR#+ mahasiswa :; LFEe28 <9 LFEe28K>2om < : Lwhe2e Lso2' L&imi':; LFEe28K'o'a& 9 :SELECT C#$"T(J!:< LFEe28K>2om<: :<Lwhe2e; LsF& 9 m8sF&KFEe28(LFEe28! o2 die(LFEe28!; LsF&K'o'a& 9 m8sF&KFEe28(LFEe28K'o'a&! o2 die(LFEe28K'o'a&!; L'o'a& 9 m8sF&K>e';hK2ow(LsF&K'o'a&!; Lda'a 9 LK)#ST; Lda'aMN'o'a&NO 9 L'o'a&M O; Lda'a6 9 a22a8(!; Lda'a6K2 9 a22a8(!; whi&e (L2ow 9 m8sF&K>e';hK2ow(LsF&!! ? L2owsMNidNO 9 L2owM O; Lda'a6MN;e&&NO 9 L2ow; a22a8K3Esh(Lda'a6K2% Lda'a6!; D Lda'aMN2owsNO 9 Lda'a6K2; e;ho 5sonKen;ode(Lda'a!; e6i'; D e&se i> (isse'(LKSETMNa;'ionNO! GG LKSETMNa;'ionNO 99 N4e'KmhsN! ? Lnim 9 LKSETMNnimNO; LFEe28 9 :SELECT J QR#+ mahasiswa THERE nim9NLnimN:; LsF& 9 m8sF&KFEe28(LFEe28!; L2ow 9 m8sF&K>e';hKasso;(LsF&!; e;ho 5sonKen;ode (L2ow!; e6i'; D I1 0h'm&1 0head1 0'i'&e1En'2i% Edi'% De&e'e% Tam3i& Da'a den4an )H) dan A5a607'i'&e1 0s'8&e '83e9:'e6'7;ss:1 <&a=e&>2m ? dis3&a8@=&o;A; >on'BsiCe@sma&&; ma24inB'o3@536; D <e22o2 ? >on'BsiCe@sma&&; ;o&o2@2ed;

Halaman // dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
13 131 132 133 134 135 136 137 13. 13/ 14 141 142 143 144 145 146 147 14. 14/ 15 151 152 153 154 155 156 157 15. 15/ 16 161 162 163 164 165 166 167 16. 16/ 17 171 172 173 174 175 176 D 07s'8&e1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<min<5s:107s;2i3'1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<>o2m<5s:107s;2i3'1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<Ha&ida'e<min<5s:107s;2i3'1 0&inA 2e&9:s'8&eshee': '83e9:'e6'7;ss: h2e>9:&i=s7>&e6i42id7;ss7>&e6i42id<;ss:1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s75FEe28<;ooAie<5s:107s;2i3'1 0s;2i3' '83e9:'e6'75aHas;2i3': s2;9:&i=s7>&e6i42id75s7>&e6i42id<5s:107s;2i3'1 0s;2i3' '83e9:'e6'75aHas;2i3':1 L(do;Emen'!<2ead8(>En;'ion(! ? 2ese'Qo2m(!; 77aA'i>Aan a5a6 di >o2m Ha2 o3'ions 9 ? sE;;ess @ showRes3onse% =e>o2eSE=mi'@ >En;'ion(!? 2e'E2n L(:R>2m:!<Ha&id(!; D% 2ese'Qo2m @ '2Ee% ;&ea2Qo2m @ '2Ee% da'aT83e @ N5sonN D; L(NR>2mN!<a5a6Qo2m(o3'ions!; 77Ha&idasi >o2m d4n 5FEe28 Ha&ida'e L(NR>2mN!<Ha&ida'e(? 2E&es@ ? nim @ ? di4i's@ '2Ee% min&en4'h@1 % ma6&en4'h@1 D D% messa4es@ ? nim@ ? 2eFEi2ed@ :-o&om nim ha2Es diisi:% min&en4'h@ :-o&om nim ha2Es 'e2di2i da2i 1 1 di4i':% di4i':% ma6&en4'h@ :-o&om nim ha2Es 'e2di2i da2i di4i's@ :"*+ ha2Es =e2E3a an4Aa: D% nama@ ? 2eFEi2ed@ :"ama ha2Es diisi den4an =ena2: D D!; D

77>&e6i42id hand&in4 L(NR>&e61N!<>&e6i42id

Halaman /: dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
177 17. 17/ 1. 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.. 1./ 1/ 1/1 1/2 1/3 1/4 1/5 1/6 1/7 1/. 1// 2 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 . 2 / 21 211 212 213 214 215 216 217 21. 21/ 22 221 222 223 224 ( ? E2&@ Ninde6<3h3Ia;'ion94e'da'aN% da'aT83e@ N5sonN% ;o&+ode& @ M ?dis3&a8@ N"*+N% name @ NnimN% wid'h @ 1 % so2'a=&e @ '2Ee% a&i4n@ N&e>'N% 32o;ess@ doa;'ionD% ?dis3&a8@ N"amaN% name @ NnamaN% wid'h @ 2 % so2'a=&e @ '2Ee% a&i4n@ N&e>'N% 32o;ess@ doa;'ionD% ?dis3&a8@ NA&ama'N% name @ Na&ama'N% wid'h @ 4 % so2'a=&e @ '2Ee% a&i4n@ N&e>'N% 32o;ess@ doa;'ionD O% sea2;hi'ems @ M ?dis3&a8@ N"*+N% name @ NnimND% ?dis3&a8@ N"amaN% name @ NnamaN% isde>aE&'@ '2EeD O% so2'name@ NnamaN% so2'o2de2@ Nas;N% Ese3a4e2@ '2Ee% 'i'&e@ NDa'a +ahasiswaN% EseR3@ '2Ee% 23@ 15% wid'h@ 7 % hei4h'@ 4 D

!;

D!; >En;'ion doa;'ion( ;e&DiH% id ! ? L( ;e&DiH !<;&i;A( >En;'ion(! ? Ha2 nim 9 L ('his!<3a2en'(!<3a2en'(!<;hi&d2en(N'dN!<eF( !<'e6'(!; L<4e'US#" (Ninde6<3h3N%?a;'ion@N4e'KmhsN%nim@nimD% >En;'ion (5son! ? L(NRnimN!<Ha&(5son<nim!; L(NRnamaN!<Ha&(5son<nama!; L(NRa&ama'N!<Ha&(5son<a&ama'!; D!; L(NRnimN!<a''2(N2eadon&8N%N2eadon&8N!; L(NRin3E'N!<a''2(Ndisa=&edN%Ndisa=&edN!; L(NRedi'% Rde&e'eN!<2emoHeA''2(Ndisa=&edN!; D!; D >En;'ion showRes3onse(2es3onseTe6'% s'a'EsTe6'! ? Ha2 da'a 9 2es3onseTe6'MNda'aNO; Ha2 3esan 9 2es3onseTe6'MN3esanNO; a&e2'(3esan!; 2ese'Qo2m(!; L(NR>&e61N!<>&e6Re&oad(!; D >En;'ion 2ese'Qo2m(! ?

Halaman /< dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net
225 226 227 22. 22/ 23 231 232 233 234 235 236 237 23. 23/ 24 241 242 243 244 245 246 L(NRin3E'N!<2emoHeA''2(Ndisa=&edN!; L(NRedi'% Rde&e'eN!<a''2(Ndisa=&edN%Ndisa=&edN!; L(NRnimN!<2emoHeA''2(N2eadon&8N!; D 07s;2i3'1 07head1 0=od81 0h11Da'a +ahasiswa07h11 0>o2m a;'ion9:: me'hod9:3os': id9:>2m: onRese'9:2ese'Qo2m(!:1 0&a=e& >o29:nim: ;&ass9:&a=e&>2m:1"*+@ 07&a=e&1 0in3E' '83e9:'e6': name9:nim: id9:nim: ma6&en4'h9:1 : ;&ass9:2eFEi2ed: siCe9:15:71 0&a=e& >o29:nama: ;&ass9:&a=e&>2m:1"A+A@ 07&a=e&1 0in3E' '83e9:'e6': name9:nama: id9:nama: siCe9:3 : ;&ass9:2eFEi2ed:71 0&a=e& >o29:a&ama': ;&ass9:&a=e&>2m:1ALA+AT@ 07&a=e&1 0'e6'a2ea name9:a&ama': id9:a&ama': ;o&s9:4 : 2ows9:4: ;&ass9:2eFEi2ed:107'e6'a2ea1 0&a=e& >o29:sE=mi': ;&ass9:&a=e&>2m:1Gn=s3;07&a=e&1 0in3E' '83e9:sE=mi': name9:*n3E': Ha&Ee9:*n3E': id9:in3E':71 0in3E' '83e9:sE=mi': name9:Edi': Ha&Ee9:Edi': id9:edi':71 0in3E' '83e9:sE=mi': name9:De&e'e: Ha&Ee9:De&e'e:

id9:de&e'e:71 247 0in3E' '83e9:2ese': name9:C&ea2: Ha&Ee9:C&ea2: id9:;&ea2:71 24. 07>o2m1 24/ 25 0'a=&e id9:>&e61: s'8&e9:dis3&a8@none:107'a=&e1 251 07=od81 252 07h'm&1

=e#impulan
7erdasarkan pen!elasan di atas dapat disimpulkan bahwa penerapan konsep &!a2 di dalam program "." dapat dilakukan dengan mudah dengan meman+aatkan librar$ )/uer$. "enggunaan )/uer$ !uga dapat menghasilkan tampilan $ang baik serta membuat pengguna lebih mudah dan n$aman dalam menggunakan aplikasi kita. Sebagai contoh dalam tutorial ini untuk melakukan proses ,ntri ,dit Delete dan Tampil Data han$a disa!ikan satu halaman serta semua proses tidak memerlukan re+resh keseluruhan halaman. "roses ter!adi secara as$nchronous di 5belakang6 halaman. Dengan demikian penerapan konsep &!a2 akan membuat aplikasi lebih ka$a dan menarik (9ich (nternet &pplication). Semoga tutorial ini berman+aat untuk kita semua dan mari kobarkan terus semangat berbagiO

Halaman /@ dari /2

Entri, Edit, Delete, Tampil dengan PHP dan Ajax JQuery | Achmatim.Net

Dem dan D 5nl ad

Tutorial ini !uga dipublikasikan di http://achmatim.net/2012/0C/02/entri<edit<delete< tampil<dengan<php<dan<a!a2<!=uer$/ Demo program akhir dari tutorial ini dapat dilihat di http://achmatim.net/@demo/crud< php<a!a2/ Download source code program lengkap beserta librar$<n$a di alamat http://achmatim.net/@downloads/crud<php<a!a2.Pip

Tentang Penuli#
Achmad S lichin. &dalah 0ulusan Teknik (n+ormatika ?akultas Teknologi (n+ormasi 4ni*ersitas 7udi 0uhur )akarta (S1 200>) dan -agister Teknologi (n+ormasi 4ni*ersitas (ndonesia (S2 2010). Saat ini sedang menempuh program Doktoral dalam bidang (lmu 'omputer di 4ni*ersitas Ead!ah -ada )og!akarta. 'egiatan sehari<hari adalah sebagai Dosen di 4ni*ersitas 7udi 0uhur (http://www.budiluhur.ac.id). 'egiatan lain akti+ sebagai programmer web de*eloper s$stem anal$st konsultan dan memberikan pelatihan di berbagai bidang komputer serta membuat tutorial<tutorial praktis di bidang komputer. "enulis memiliki situs utama di http://achmatim.net $ang berisi berbagai tutorial praktis di bidang komputer serta men$ediakan buku gratis komputer. "enulis dapat dihubungi melalui email di achmad.solichinQbudiluhur.ac.id dan achmatimQgmail.com Rachmatim ?acebook achmatim dan Twitter Qachmatim.

%i#en#i D 0umen
Seluruh isi dalam dokumen ini dapat digunakan dimodi+ikasi dan disebarluaskan secara bebas untuk tu!uan pendidikan pembela!aran dan bukan komersial ( non pro+it) dengan s$arat tidak menghilangkan menghapus atau mengubah atribut penulis dokumen ini dan pern$ataan dalam lisensi dokumen $ang disertakan di setiap dokumen. Tidak diperbolehkan mengkomersialkan tutorial ini kecuali mendapatkan i!in terlebih dahulu dari penulis.

Halaman /2 dari /2