Entri, Edit, Delete, Tampil Dengan PHP Dan Ajax JQuery - Achmatim

3/11/2016 Entri,Edit,Delete,TampildenganPHPdanAjaxJQueryAchmatim.
Net
Search
ACHMATIM.NET
HOME ABOUT ME BUKU GRATIS DOWNLOADS MATERI KULIAH
TUTORIAL PUBLIKASI
GET UPDATES
TO YOUR
EMAIL
ENTRI, EDIT, DELETE, TAMPIL Masukkan
DENGAN PHP DAN AJAX JQUERY Alamat Email

Anda untuk
September 2, 2012 Achmad Solichin JQuery,
MySQL, PHP, Web Development 253 comments mendapatkan
informasi dan
tutorial terkini
dari
Achmatim.Net
. Gratis untuk
Anda
Subscribe
Dalam setiap kesempatan membahas mengenai

aplikasi berbasis web (web application), baik di
dalam sesi mengajar matakuliah Pemrograman
Web di Universitas Budi Luhur maupun sesi
training terkait web, saya selalu menekankan
bahwa hanya ada 4 (empat) proses dasar
http://achmatim.net/2012/09/02/entrieditdeletetampildenganphpdanajaxjquery/ 1/126
3/11/2016 Entri,Edit,Delete,TampildenganPHPdanAjaxJQueryAchmatim.Net
dalam aplikasi berbasis web. Aplikasi web yang TAGS

sederhana hingga kompleks selalu berkaitan
ALGORITMA
dengannya. Keempat proses tersebut adalah
BUDILUHUR
proses entri (input), ubah (edit), hapus
BUKU GRATIS
(delete) dan tampil (show). Istilah lain dari
CONTOH
keempat proses tersebut adalah CRUD (Create, PROGRAM
Read, Update and Delete). Jadi kuasailah CONTOH
keempatnya maka selebihnya hanya variasi dari PROGRAM PHP
keempat proses tersebut. Sebagai contoh dalam CSS DATABASE
proses update status di situs jejaring sosial DOWNLOAD
DPW2
facebook merupakan proses Entri atau Insert ke
DREAMWEAVER
database, saat memperbaiki foto prol adalah
EBOOK
proses edit (update) dan saat kita menghapus
ELEARNING
salah satu teman aalah proses delete.
GENERAL HTML
INTERNET ISTRI
Mengingat pentingnya proses tersebut, saya
JAVA JAVA SWING
memberikan contoh khusus di bab terakhir dari
JQUERY
buku Pemrograman Web dengan PHP &
KAMPUS BUDI
MySQL berupa proses dasar entri, edit, delete
LUHUR
dan tampil dengan PHP dan MySQL. Sebelum KEHAMILAN
melanjutkan tutorial ini, tidak ada salahnya jika KELAHIRAN
Anda mencoba contoh tersebut, terutama bagi KELUARGA
Anda yang belum pernah mencoba program MATERI MENU
serupa. Saya juga pernah mempublikasikan MOTIVASI MYSQL
artikel entri, edit, delete dan tampil PHP yang OTHERS
memanfaatkan Macromedia Dreamweaver. PERNAKPERNIK
PERSONAL PHP
PROGRAMMING
PTI PUISI PW2
Lalu apa yang akan dipelajari di dalam REKOMENDASI
tutorial ini? ROXY SQL
TUGAS & UJIAN
Apa yang disampaikan dalam tutorial ini kurang TUTORIAL UJIAN
lebih sama dengan tutorial saya sebelumnya, ULANG TAHUN
yaitu proses entri, edit, delete dan tampil data WEB
dengan PHP dan MySQL. Namun kali ini, saya WEB DESIGN
ingin menambahkan konsep Ajax (Asyncronous WORDPRESS
Javascript and XML) dengan menggunakan

library JQuery. Dengan konsep Ajax, maka
proses entri, edit, delete dan tampil dapat
dilakukan dengan lebih menarik. TOP POSTS
OVERALL
Tujuan atau Rancangan Akhir Buku
Program Gratis: MySQL
5, Dari Pemula
Untuk memberikan gambaran yang lebih jelas Hingga Mahir
mengenai hasil akhir contoh program yang (18881 views)
dibahas dalam tutorial ini, berikut beberapa hal Buku
penting: Gratis:
Pemrograman
Untuk memudahkan pemahaman, program Web dengan
hanya menangani 1 (satu) tabel MySQL yaitu PHP dan
tabel mahasiswa yang terdiri dari eld NIM, MySQL (16535
NAMA dan ALAMAT. views)
Program hanya terdiri dari 1 (satu) le utama Downloads
(tidak termasuk library yang digunakan) (15940 views)
Program menggunakan library Ajax JQuery. Perintah
Untuk penanganan form, digunakan plugin MySQL untuk
JQuery Form. Menampilkan
Untuk validasi form, digunakan plugin JQuery Data dari
Validation. Beberapa
Untuk menampilkan data dalam bentuk tabel, Tabel (15516
digunakan plugin JQuery Flexigrid views)
Proses EDIT dan DELETE dilakukan dengan
memilih dan klik pada data yang akan Pengenalan
diedit/didelete. Perintah Dasar
SQL di MySQL
Untuk memberikan gambaran yang lebih jelas, (11872 views)
silahkan lihat demo program terlebih dahulu. Buku
Gratis:
Langsung aja kita mulai step by step untuk
Pemrograman
membuatnya.
1. Siapkan Database dan Tabel Bahasa C

dengan Turbo
Langkah pertama tentu persiapkan database C (11767 views)
dan tabel yang diperlukan. Seperti sudah Contoh
disebutkan di rancangan akhir program di atas Program PHP-
bahwa kita akan menyederhanakan struktur MySQL untuk
data yang akan dibuat. Dalam hal ini, kita akan Data Pegawai
membuat database dengan nama demo dan (11352 views)
tabel dengan nama mahasiswa. Berikut ini
struktur dari tabel mahasiswa yang akan dibuat: Dreamweaver,
PHP dan
FIELD TYPE LENGTH DESCRIPTION
MySQL untuk
Aplikasi Data
nim VARCHAR 10 NIM Mahasiswa
Mahasiswa
nama VARCHAR 30 NAMA Mahasiswa
(9432 views)
alamat TEXT Alamat Mahasiswa
Dreamweaver,
Dan berikut ini perintah SQL untuk membuat PHP dan
database dan tabel di atas. Perintah dapat ditulis MySQL untuk

dan dijalankan di MySQLclient kesukaan Anda. Aplikasi Data
Mahasiswa
Code block (Bag 2) (8982

views)
Step by
1.CREATEDATABASEdemo;
Step PHP
2.CREATETABLEmahasiswa(
3.nimVARCHAR(10)NOTNULL, Membuat
4.namaVARCHAR(30)NOTNULL,
Laporan PDF
5.alamatTEXT,
6.PRIMARYKEY(nim) dengan FPDF
7.);
(8527 views)
2. Buat Halaman beserta Form Inputan

SHARE
Bagi Anda yang sudah belajar perintah-perintah
BUTTONS
HTML (Hypertext Mark up Language) tentunya
tidak akan kesulitan dalam membuat form
inputan untuk tabel mahasiswa di atas. Bentuk 0 5
dan tampilan dari form inputan dapat 0

disesuaikan sesuai keinginan Anda, namun yang
0
penting untuk diperhatikan bahwa pastikan
setiap inputan harus memiliki atribut name dan
id agar dapat diakses dengan mudah melalui
JQuery nantinya. Berikut ini source code HTML
LATEST
awal yang menampilkan form inputan data
mahasiswa. Simpan program berikut ini sebagai TWEETS
le index.php. (@ACHMATIM
)
Code block

Mengenal
1.<html> Karakter:
2. <head>
Anekdot
3. <title>Entri,Edit,Delete,TampilDatadenganPHPdanAjax
Harvardvs
4. <styletype="text/css">
Stanford
5. .labelfrm{
https://t.co/2
6. display:block;
TEKlJYNpv
7. fontsize:small;
8. margintop:5px;
#Motivasi
9. } 10hours
10. .error{
11. fontsize:small;
12. color:red;
13. }
14. </style>
15. </head>
16. <body>
17. <h1>DataMahasiswa</h1> SusahSekali
18. <formaction=""method="post"id="frm"
NyariBukuini
19. <labelfor="nim"class="labelfrm"
yah&#8230
20. <inputtype="text"name="nim"
https://t.co/vh
21. <labelfor="nama"class="labelfrm"
uluVEItv
22. <inputtype="text"name="nama"
23.
#Umum
24. <labelfor="alamat"class="labelfrm" 10hours
25. <textareaname="alamat"id="alamat"
26.
27. <labelfor="submit"class="labelfrm"
28. <inputtype="submit"name="Input"

29. <inputtype="submit"name="Edit"
30. <inputtype="submit"name="Delete"
31. <inputtype="reset"name="Clear"
32. </form> Belajar20
33. </body> TopikPenting
34.</html> Terkait
Browserdan
DuniaWeb
https://t.co/l3
y4eUzxw0
Pada program di atas terlihat bahwa terdapat #Edufiesta
#Umum
satu buah form dengan id frm, yang memiliki 3
#WebDevelop
(tiga) buah inputan text dan textarea serta 4 ment
(empat) buah tombol yaitu Input, Edit, Delete 10hours
dan Clear. Masing-masing inputan diberi nama

dan ID. Untuk inputan NIM, NAMA dan ALAMAT

juga ditambahkan atribut class dengan value
required yang berarti inputan harus diisi

(menggunakan plugin JQuery Validate).
Membuat
LaporanExcel
Berikut ini tampilan dari program sederhana di dengan#PHP
https://t.co/iv
atas. scmelfoj
#MySQL
16hours
1FAVORITE

LayananGratis
diInternet
sebagaiMedia
Belajar
Mengajar
https://t.co/V
MimqXHX70
Gambar 1: Tampilan Form Inputan Data #Edufiesta
Mahasiswa #PHP#Umum
16hours

3. Koneksikan ke Database MySQL
Karena program dirancang untuk berhubungan

dengan database MySQL, maka terlebih dahulu
harus dikoneksikan antara PHP dengan MySQL.

Untuk melakukan koneksi ke MySQL, dalam
tutorial ini dicontohkan dengan cara yang paling
mudah. Kita akan menggunakan fungsi
mysql_connect() dan mysql_select_db() dari
PHP. Pastikan Anda mengetahui informasi letak
hostname, username, password untuk masuk
ke server MySQL dan juga nama database yang
akan digunakan sudah disiapkan.
Berikut ini potongan program untuk melakukan

koneksi. Letakkan di awal le index.phpyang
telah dibuat di langkah sebelumnya atau dapat
juga dibuat di le khusus dan di-include-kan.
Code block
1.<?php
2./*koneksikedb*/
3.mysql_connect("localhost","root","qwerty")ordie(mysql_error
4.mysql_select_db("demo")ordie(mysql_error());
5./*akhirkoneksidb*/
6.?>
4. Program Input ke MySQL
Setelah program PHP terkoneksi dengan MySQL,

selanjutnya dibuat program untuk proses input
(insert) ke database. Secara umum, untuk
membuat program input ke database, kita ambil
dulu data yang dientri oleh user sesuai dengan
method dari form. Untuk me-refresh kembali
mengenai penanganan form di PHP, Anda dapat
mempelajari Bab 4 dari buku Pemrograman Web
dengan PHP & MySQLyang dapat didownload di
website saya. Setelah data dari form diambil,

susun string perintah query untuk INSERT ke
database. Bagaimana bentuk perintah INSERT
dan contoh penggunaannya juga dapat dipelajari
di buku saya tersebut, terutama di Bab 12 dan
13. Kurang lebih berikut ini, potongan program
untuk input / entri ke MySQL. Anda dapat
meletakkannya setelah baris perintah koneksi
database.
Code block
1./*penangananform*/
2.if(isset($_POST['Input'])){
3. $nim =strip_tags($_POST['nim']);
4. $nama=strip_tags($_POST['nama']);
5. $alamat=strip_tags($_POST['alamat']);
6.
7. //inputkedb
8. $query=sprintf("INSERTINTOmahasiswaVALUES('
9. mysql_escape_string($nim),
10. mysql_escape_string($nama),
11. mysql_escape_string($alamat)
12. );
13. $sql=mysql_query($query);
14. if($sql){
15. echo"Databerhasildisimpan";
16. }else{
17. echo"Datagagaldisimpan";
18. echomysql_error();
19. }
20.}
Berikut ini sedikit penjelasan dari potongan

program diatas:
Baris 2: memastikan tombol Input ditekan

oleh user menggunakan fungsi isset() yang
akan bernilai TRUE jika suatu variabel telah
terbentuk (jika user menekan suatu tombol

maka variabel akan terbentuk)
Baris 3-5: proses pengambilan data dari form.
Fungsi strip_tags() digunakan untuk
memastikan bahwa inputan tidak
mengandung tag-tag HTML atau javascript
yang mungkin berbahaya.
Baris 8-12: pembentukan perintah untuk
INSERT ke database. Fungsi
mysql_escape_string() digunakan untuk
menambahkan escape (backslashes, \ ) jika
terdapat karakter khusus seperti tanda kutip
dan dollar. Hal tersebut dilakukan sebagai
salah satu cara mencegah praktek SQL
Injection.
Baris 13: eksekusi perintah MySQL untuk
mengentri data ke database menggunakan
fungsi mysql_query().
Baris 14-19: notikasi apakah proses berhasil
atau gagal.
Pada tahap ini, sebaiknya Anda coba program

dengan menginput suatu data melalui form.
Pastikan tidak ada error dan data sudah masuk
ke database (untuk melihat data, langsung
gunakan tools MySQL yang Anda punya).
5. Sertakan Library JQuery dan Plugin

JQuery Form
Hingga langkah ke-4 di atas, kita masih belum

menggunakan konsep Ajax (Asynchronous
Javascript and XML). Apa itu Ajax? Secara
singkat, ajax merupakan konsep pengembangan
web yang memungkinkan antara client dan
server dapat berkomunikasi secara
asynchronous, suatu proses bisa saja berjalan di

belakang halaman. Contoh penerapannya saya
rasa dengan mudah kita temui di banyak web,
seperti pada situs Facebook, saat kita meng-
update status, hanya bagian status aja yang
berubah sedangkan keseluruhan halaman tidak
berubah (refresh). Lebih lengkap mengenai Ajax,
dapat Anda cari artikelnya di Google. Pada
tutorial ini, digunakan library utama JQuery yang
dapat didownload di situs
http://code.jquery.com. Sedangkan untuk
penanganan form dengan teknologi Ajax,
digunakan plugin JQuery Form yang dapat
didownload di situs
http://malsup.com/jquery/form/. Dengan plugin
ini, kita dapat mengubah proses penanganan
form secara klasik seperti pada langkah ke-4 di
atas, menjadi proses penanganan form dengan
gaya Ajax. Saya memilih plugin ini dengan
alasan kemudahan dalam penerapannya.
Untuk menyertakan library JQuery dan JQuery

Form ke dalam halaman yang sudah kita buat
sebelumnya, tambahkan dua baris perintah
berikut ini di antara tag <head>(diasumsikan
bahwa kedua plugin tersimpan di folder /libs).
Code block
1.<scripttype="text/javascript"src="libs/jquery.min.js"
2.<scripttype="text/javascript"src="libs/jquery.form.js"
Dan setelah library disertakan, kita dapat

memanggil plugin JQuery Form untuk
mengaktifkan proses Ajax di dalam form.

Pemanggilannya sangat mudah, cukup atur opsi
/ pilihan dan aktifkan berdasarkan selector dari
form yang akan dipanggil.
Berikut ini program lengkap yang sudah

ditambahkan pemanggilan plugin JQuery Form.
Code block
1.<?php
2./*koneksikedb*/
6.
12.
13. //inputkedb
18. );
20. $pesan="";
21. if($sql){
22. $pesan="Databerhasildisimpan";
23. }else{
24. $pesan="Datagagaldisimpan";
25. $pesan.=mysql_error();
26. }
27. $response=array('pesan'=>$pesan,'data'=>$_POST
28. echojson_encode($response);
29. exit;
30.}
31.?>
32.<html>
33. <head>
34. <title>Entri,Edit,Delete,TampilDatadenganPHPdanAjax</title>
36. .labelfrm{
37. display:block;
38. fontsize:small;
39. margintop:5px;
40. }
41. .error{
42. fontsize:small;
43. color:red;
44. }
45. </style>
46. <scripttype="text/javascript"src="libs/jquery.min.js"></script>
47. <scripttype="text/javascript"src="libs/jquery.form.js"></script>
48. <scripttype="text/javascript">
49. $(document).ready(function(){
50. //aktifkanajaxdiform
51. varoptions={
52. success:showResponse,
53. resetForm:true,
54. clearForm:true,
55. dataType:'json'
56. };
57. $('#frm').ajaxForm(options);
58.
59. });
60. functionshowResponse(responseText,statusText){
61. vardata=responseText['data'];
62. varpesan=responseText['pesan'];
63. alert(pesan);
64. }
65. </script>
66. </head>
67. <body>
68. <h1>DataMahasiswa</h1>
69. <formaction=""method="post"id="frm">
70. <labelfor="nim"class="labelfrm">NIM:</label>
71. <inputtype="text"name="nim"id="nim"maxlength="10"class="required"size
72.
73. <labelfor="nama"class="labelfrm">NAMA:</label>
74. <inputtype="text"name="nama"id="nama"size="30"class="required"/>
75.
76. <labelfor="alamat"class="labelfrm">ALAMAT:</label>
77. <textareaname="alamat"id="alamat"cols="40"rows="4"class="required"></t
78.
79. <labelfor="submit"class="labelfrm"> </label>
80. <inputtype="submit"name="Input"value="Input"id="input"/>
81. <inputtype="submit"name="Edit"value="Edit"id="edit"/>
82. <inputtype="submit"name="Delete"value="Delete"id="delete"/>
83. <inputtype="reset"name="Clear"value="Clear"id="clear"/>
84. </form>
85. </body>
86.</html>
Setelah library JQuery dan plugin JQuery Form

disertakan (baris 42 dan 43), pada baris 45-55
diterapkan plugin JQuery Form pada form

inputan (id form = #frm) dengan beberapa
pengaturan (opsi). Opsi pada baris 48 berarti
pada saat form inputan berhasil disubmit maka
akan otomatis memanggil fungsi
showResponse() yang didenisikan pada baris
56-60. Opsi baris 49 dan 50 membuat form
kembali ke posisi awal (reset) setelah proses
submit terjadi, sedangkan opsi pada baris 51
merupakan pengaturan data yang dikirimkan
secara asynchronous dalam bentuk JSON
(Javascript Object Notation).
Gambar 2: Proses Entri setelah ditambahkan

plugin JQuery Form
Pada saat form disubmit (ditekan tombol Input),

data inputan tetap akan dikirim dan diproses
oleh PHP melalui action yang telah ditentukan
(baris 8-30). Namun pengiriman data tidak akan
me-refresh halaman karena dilakukan di
belakang halaman (asynchronous). Setelah
proses penyimpanan data ke database berhasil
dilakukan selanjutnya PHP akan mengirimkan
pesan dalam bentuk JSON ke javascript.

Perhatikan baris 27-29, yang mengubah variabel
array berisi pesan menjadi format JSON
menggunakan fungsi json_encode() dari PHP,
serta mengirimkannya ke fungsi javascript
showResponse() di baris 56-60. Hasil dari
program di atas, setelah ditambahkan plugin
JQuery Form tampak pada Gambar 2.
6. Validasi dengan plugin JQuery

Validation
Seperti sudah pernah dijelaskan dan

dicontohkan di tutorial saya berjudul Membuat
Validasi Form dengan JQuery Validation,
selanjutnya ditambahkan validasi form inputan
dengan aturan semua eld inputan yang harus
diisi (required) dan khusus untuk inputan NIM
hanya boleh diisi 10 digit angka (tidak boleh diisi
huruf).
Berikut ini source code program setelah

ditambahkan plugin JQuery Validation.
Code block
1.<?php
2./*koneksikedb*/
6.
12.
13. //inputkedb
18. );
20. $pesan="";
21. if($sql){
23. }else{
26. }
29. exit;
30.}
31.?>
32.<html>
33. <head>
36. .labelfrm{
37. display:block;
38. fontsize:small;
39. margintop:5px;
40. }
41. .error{
42. fontsize:small;
43. color:red;
44. }
45. </style>
48. <scripttype="text/javascript"src="libs/jquery.validate.min.js"></script>
51.//aktifkanajaxdiform
52.varoptions={
54. beforeSubmit:function(){
55. return$("#frm").valid();
56. },
57. resetForm:true,
58. clearForm:true,
59. dataType:'json'
60. };
62.
63. //validasiformdgnjqueryvalidate
64. $('#frm').validate({
65. rules:{
66. nim:{
67. digits:true,
68. minlength:10,
69. maxlength:10
70. }
71. },
72. messages:{
73. nim:{
74. required:"Kolomnimharusdiisi",
75. minlength:"Kolomnimharusterdiridari10digit",
76. maxlength:"Kolomnimharusterdiridari10digit",
77. digits:"NIMharusberupaangka"
78. },
79. nama:{
80. required:"Namaharusdiisidenganbenar"
81. }
82. }
83. });
84.});
85.functionshowResponse(responseText,statusText){
88. alert(pesan);
89. }
90. </script>
91. </head>
92. <body>
94. <formaction=""method="post"id="frm">
97.
100.
103.
109. </form>
110. </body>
111.</html>
Untuk menerapkan validasi di form inputan,

pertama-tama sertakan plugin JQuery Validate
seperti terlihat pada baris 44 program di atas.
Selanjutnya terapkan rule yang sudah ditetapkan
pada form sesuai dengan contoh pada baris 59
hingga 79. Dan untuk mengintegrasikan plugin

JQuery Validation dengan JQuery Form yang
sudah diterapkan sebelumnya, tambahkan opsi
beforeSubmit seperti pada baris 50-52 program
di atas.
6. Tampilkan Data dalam Bentuk Tabel

dengan Flexigrid
Untuk menampilkan data pada dasarnya banyak

pilihan bentuk, baik dalam bentuk list maupun
tabel. Kali ini kita akan memanfaatkan plugin
JQuery untuk menampilkan data dalam bentuk
tabel, yaitu Flexigrid. Kelebihan utama dari
plugin ini adalah kemudahan dan eksibilitas
dalam penerapannya. Kita tidak perlu membuat
tabel dengan perintah HTML, cukup dengan
menambahkan tag <table> dengan id tertentu,
selebihnya plugin Flexigrid yang akan mengatur
isinya. Kolom-kolom tabel dapat diatur dengan
eksibel sesuai kebutuhan, semua dilakukan
melalui perintah Javascript. Sementara itu, data
yang akan ditampilkan dalam tabel dapat
berasal dari berbagai bentuk data, antara lain
Array Javascript, XML, JSON maupun plain-text.
Dari sisi source data tentunya dapat berasal dari
halaman yang sama maupun halaman lain.
Kelebihan lainnya adalah kolom dapat digeser,
diurutkan dan diatur ukurannya on-the-y,
langsung di browser. Selain itu juga sudah
tersedia halaman (paging) dan pencarian data
(searching) berdasarkan kolom tertentu.
Untuk menampilkan data dengan Flexigrid

cukup dengan 4 (empat) langkah sederhana,
yaitu (1) sertakan library (Javascript & CSS) yang
diperlukan, (2) siapkan obyek tabel dengan tag

HTML <table>, (3) atur kolom yang akan
ditampilkan dan (4) siapkan potongan program
untuk menangani data.
Pada langkah pertama, kita sertakan library yang

diperlukan seperti terlihat pada potongan
program di bawah ini. Terdapat satu le CSS
yang akan mengatur tampilan tabel exigrid
(baris 1) dan terdapat library utama exigrid
(baris 3). Selain itu, pada versi terakhir exigrid
harus disertakan plugin JQuery Cookiebuatan
Klaus Hartl (baris 2).
Code block
1.<linkrel="stylesheet"type="text/css"href="libs/flexigrid/css/flexigrid.css"
2.<scripttype="text/javascript"src="libs/jquery.cookie.js"
3.<scripttype="text/javascript"src="libs/flexigrid/js/flexigrid.js"
Langkah kedua, siapkan obyek tabel beserta

atribut id-nya pada tempat dimana kita akan
menampilkan data. Gunakan perintah
sederhana sebagai berikut:
Code block
1.<tableid="flex1"style="display:none"></table>
Langkah ketiga adalah mengatur kolom-kolom

yang akan ditampilkan beserta beberapa opsi
atau properties dari tabel exigrid. Langsung
saja kita lihat contoh potongan program di

bawah ini.
Code block
1.//flexigridhandling
2.$('#flex1').flexigrid
3.(
4. {
5. url:'index.php?action=getdata',
6. dataType:'json',
7.
8. colModel:[
9. {display:'NIM',name:'nim',width:
10. {display:'Nama',name:'nama',width
11. {display:'Alamat',name:'alamat',width
12. ],
13. searchitems:[
14. {display:'NIM',name:'nim'},
15. {display:'Nama',name:'nama',isdefault
16. ],
17.
18. sortname:'nama',//defaulturutkolomnama
19. sortorder:'asc',//defaulturutascending
20. usepager:true,//tambahkanpaging
21. title:'DataMahasiswa',//judulflexigrid
22. useRp:true,
23. rp:15,
24. showTableToggleBtn:true,
25. width:700,//lebartabel
26. height:400//tinggitabel
27. }
28.);
Sedikit penjelasan mengenai potongan program

di atas.
Baris 2: Pemanggilan library exigrid diawali

dengan memanggil fungsi exigrid() dan
diterapkan pada tabel dengan id #ex1
sesuai dengan tabel yang sudah dibuat di
langkah sebelumnya.
Baris 5-6: Opsi url dapat diisi dengan alamat

source data yang akan ditampilkan di tabel.
Alamat source data dapat berasal dari
halaman yang sama seperti pada contoh di
atas, dapat juga dari halaman berbeda.
Format datanya harus sesuai dengan opsi
yang dipilih pada baris 6 yaitu dataType
(dalam hal ini menggunakan JSON).
Baris 8-12: Pengaturan kolom-kolom yang
akan ditampilkan di tabel. Urutan dari kolom
harus sesuai dengan urutan data source-nya,
jika tidak isi data bisa saja tidak sesuai. Pada
setiap kolom terdapat beberapa pengaturan
seperti judul kolom (display), nama kolom
(name) sebagai identitas kolom, lebar kolom
(width), dapat diurutkan atau tidak (sortable)
dan perataan kolom (align). Pada contoh di
atas, terdapat 3 kolom yaitu nim, nama dan
alamat.
Baris 13-16: Menambahkan tur pencarian
dimana pencarian dapat dilakukan
berdasarkan kolom nim dan nama.
Baris 18-27: Beberapa pengaturan lainnya
yang dapat dilakukan seperti pengaturan
pengurutan, pengaturan halaman (paging)
serta lebar dan tinggi tabel.
Langkah keempat atau yang terakhir untuk

menampilkan data ke exigrid adalah
menyiapkan potongan program PHP untuk
menangani data. Jika data berasal dari database
maka tugas bagian ini adalah melakukan
pengambilan data (SELECT) untuk selanjutnya
diformat sesuai dengan standar exigrid dan
dikirimkan ke library exigrid untuk ditampilkan.
Dalam contoh ini, data diformat dalam bentuk

JSON.
Berikut ini potongan program PHP untuk

menangani data exigrid.
Code block
1.if(isset($_GET['action'])&&$_GET['action']=='getdata'
2. $page=(isset($_POST['page']))?$_POST['page']
3. $rp=(isset($_POST['rp']))?$_POST['rp']:10;
4. $sortname=(isset($_POST['sortname']))?$_POST
5. $sortorder=(isset($_POST['sortorder']))?$_POST
6.
7. $sort="ORDERBY$sortname$sortorder";
8. $start=(($page1)*$rp);
9. $limit="LIMIT$start,$rp";
10.
11. $query=(isset($_POST['query']))?$_POST['query'
12. $qtype=(isset($_POST['qtype']))?$_POST['qtype'
13.
14. $where="";
15. if($query)$where.="WHERE$qtypeLIKE'%$query
16.
17. $query="SELECTnim,nama,alamat";
18. $query_from="FROMmahasiswa";
19.
20. $query.=$query_from."$where$sort$limit"
21.
22. $query_total="SELECTCOUNT(*)".$query_from.
23.
24. $sql=mysql_query($query)ordie($query);
25. $sql_total=mysql_query($query_total)ordie(
26. $total=mysql_fetch_row($sql_total);
27. $data=$_POST;
28. $data['total']=$total[0];
29. $datax=array();
30. $datax_r=array();
31. while($row=mysql_fetch_row($sql)){
32. $rows['id']=$row[0];
33. $datax['cell']=$row;
34. array_push($datax_r,$datax);
35. }
36. $data['rows']=$datax_r;
37. echojson_encode($data);
38. exit;
39.}
Gambar 3 berikut ini tampilan halaman setelah

ditambahkan tabel exigrid.
Gambar 3. Tampilan Flexigrid
7. Tampilkan Data di Form saat Baris

Fexigrid Dipilih
Data sudah ditampilkan di dalam grid,

selanjutnya akan dilakukan proses Edit dan
Delete. Untuk keperluan proses tersebut, setiap
baris data di dalam exigrid dipilih akan
ditampilkan di form yang sudah dibuat. Jadi
untuk sebelum melakukan proses EDIT dan
DELETE, perlu memilih data yang akan diproses
dengan mengklik pada baris data di exigrid.
Untuk menambahkan action saat baris exigrid

diklik, cukup menambahkan atribut process
pada pendenisian colModel. Perhatikan contoh
sebagai berikut dimana doaction merupakan
fungsi javascript yang akan dipanggil saat suatu

baris diklik / dipilih.
Code block
1.colModel:[
2. {display:'NIM',name:'nim',width:100,sortable
3. {display:'Nama',name:'nama',width:200,sortable
4. {display:'Alamat',name:'alamat',width:400
5.],
Dan berikut ini contoh fungsi doaction yang

akan menangani proses saat baris data di
exigrid dipilih.
Code block
1.functiondoaction(celDiv,id){
2. $(celDiv).click(function(){
3. varnim=$(this).parent().parent().children
4. $.getJSON('index.php',{action:'get_mhs'
5. $('#nim').val(json.nim);
6. $('#nama').val(json.nama);
7. $('#alamat').val(json.alamat);
8. });
9. $('#nim').attr('readonly','readonly');
10. $('#input').attr('disabled','disabled'
11. $('#edit,#delete').removeAttr('disabled'
12. });
13.}
Perhatikan fungsi doaction di atas. Pertama

fungsi akan melakukan pengecekan apakah
terdapat suatu cell (kolom baris) data diklik (lihat
baris 2). Jika terdapat cell yang diklik, maka ambil
nilai dari cell pada kolom pertama baris tersebut,
yaitu cell yang berisi NIM sebagai primary key-
nya (lihat baris 3). Tentunya baris 3 harus

disesuaikan dengan struktur data yang ada, jika
lebih dari satu primary key, ya tinggal
tambahkan variabel lainnya. Lanjut, setelah NIM
dari baris didapatkan, kita perlu mendapatkan
data lengkap dari database sehingga nim
tersebut dikirimkan ke halaman index.php
secara asynchronous (baris 4). Dengan perintah
baris 4, seolah-olah kita mengakses browser
dengan alamat http://namaserver/index.php?
action=get_mhs&nim=nim, namun dilakukan
oleh Javascript sehingga tidak kelihatan secara
kasat mata. Sementara itu, karena
memanfaatkan fungsi $.getJSON, sehingga
balikan data harus dalam format JSON. Pada
baris 5-7, data balikan yang berupa JSON
ditampilkan di form melalui fungsi $.val() dari
JQuery. Untuk melengkapi proses, pada baris 9-
12 diatur agar form inputan NIM tidak dapat
diedit (readonly), aktifkan tombol EDIT dan
DELETE, serta disable tombol INPUT.
Berikut ini potongan program PHP untuk

mengambil data berdasarkan NIM yang dipilih.
Data dikembalikan dalam format JSON
(Javascript Object Notation) seperti terlihat pada
baris 6.
Code block
1.if(isset($_GET['action'])&&$_GET['action']=='get_mhs'
2. $nim=$_GET['nim'];
3. $query="SELECT*FROMmahasiswaWHEREnim='$nim
5. $row=mysql_fetch_assoc($sql);
6. echojson_encode($row);
7. exit;
8.}
8. Proses Edit dan Delete
Setelah data dipilih dan ditampilkan di dalam

form inputan, dapat dengan mudah dilakukan
proses EDIT dan DELETE. Seperti halnya proses
INPUT, pada dasarnya proses EDIT dan DELETE
akan mengambil data dari form dan
menjalankan perintah query UPDATE atau
DELETE ke tabel. Karena form sudah diaktifkan
sebagai form Ajax (lihat kembali langkah 5) dan
juga sudah otomatis dilakukan validasi (lihat
langkah 6), maka kita tinggal mendenisikan
potongan program PHP untuk EDIT dan DELETE.
Lihat potongan program di bawah ini.
Code block
1.if(isset($_POST['Edit'])){
5.
6. //updatedb
7. $query=sprintf("UPDATEmahasiswaSETnama='%s
9. mysql_escape_string($alamat),
10. mysql_escape_string($nim)
11. );
13. $pesan="";
14. if($sql){
16. }else{
19. }
22. exit;
23.}elseif(isset($_POST['Delete'])){
25.
26. //deletedata
27. $query=sprintf("DELETEFROMmahasiswaWHEREnim='
29. );
31. $pesan="";
32. if($sql){
33. $pesan="Databerhasildihapus";
34. }else{
35. $pesan="Datagagaldihapus";
37. }
40. exit;
41.}
9. Program Lengkap Ada di sini!
Bagian demi bagian sudah dibahas, semoga

cukup jelas dan dapat dipahami. Di bawah ini
program lengkap dan hasil akhir dari tutorial
kita. Anda dapat mencobanya di komputer Anda,
tentunya dengan menyertakan library yang
diperlukan. Di bawah ini juga tersedia tautan
untuk mencoba contoh program ini secara
langsung (live demo) dan juga tautan untuk
mendownload program lengkap beserta library
yang diperlukan.
Code block
1.<?php
2./*koneksikedb*/
6.
12.
13. //inputkedb
18. );
20. $pesan="";
21. if($sql){
23. }else{
26. }
29. exit;
30.}elseif(isset($_POST['Edit'])){
34.
35. //updatedata
36. $query=sprintf("UPDATEmahasiswaSETnama='%s
38. mysql_escape_string($alamat),
40. );
42. $pesan="";
43. if($sql){
45. }else{
48. }
51. exit;
52.}elseif(isset($_POST['Delete'])){
54.
55. //deletedata
56. $query=sprintf("DELETEFROMmahasiswaWHEREnim='
58. );
60. $pesan="";
61. if($sql){
62. $pesan="Databerhasildihapus";
63. }else{
64. $pesan="Datagagaldihapus";
66. }
69. exit;
70.}elseif(isset($_GET['action'])&&$_GET['action']==
71.
72. $page=(isset($_POST['page']))?$_POST['page']
73. $rp=(isset($_POST['rp']))?$_POST['rp']:10;
74. $sortname=(isset($_POST['sortname']))?$_POST
75. $sortorder=(isset($_POST['sortorder']))?$_POST
76.
77. $sort="ORDERBY$sortname$sortorder";
78. $start=(($page1)*$rp);
79. $limit="LIMIT$start,$rp";
80.
81. $query=(isset($_POST['query']))?$_POST['query'
82. $qtype=(isset($_POST['qtype']))?$_POST['qtype'
83.
84. $where="";
85. if($query)$where.="WHERE$qtypeLIKE'%$query
86.
87. $query="SELECTnim,nama,alamat";
88. $query_from="FROMmahasiswa";
89.
90. $query.=$query_from."$where$sort$limit"
91.
92. $query_total="SELECTCOUNT(*)".$query_from.
93.
94. $sql=mysql_query($query)ordie($query);
95. $sql_total=mysql_query($query_total)ordie(
96. $total=mysql_fetch_row($sql_total);
97. $data=$_POST;
98. $data['total']=$total[0];
99. $datax=array();
100. $datax_r=array();
101. while($row=mysql_fetch_row($sql)){
102. $rows['id']=$row[0];
103. $datax['cell']=$row;
104. array_push($datax_r,$datax);
105. }
106. $data['rows']=$datax_r;
107. echojson_encode($data);
108. exit;
109.}elseif(isset($_GET['action'])&&$_GET['action']==
110. $nim=$_GET['nim'];
111. $query="SELECT*FROMmahasiswaWHEREnim='$nim
113. $row=mysql_fetch_assoc($sql);
114. echojson_encode($row);
115. exit;
116.}
117.?>
118.<html>
119. <head>
122. .labelfrm{
123. display:block;
124. fontsize:small;
125. margintop:5px;
126. }
127. .error{
128. fontsize:small;
129. color:red;
130. }
131. </style>
134. <scripttype="text/javascript"src="libs/jquery.validate.min.js"></script>
135. <linkrel="stylesheet"type="text/css"href="libs/flexigrid/css/flexigrid.css">
136. <scripttype="text/javascript"src="libs/jquery.cookie.js"></script>
137. <scripttype="text/javascript"src="libs/flexigrid/js/flexigrid.js"></script>
140. resetForm();
141.//aktifkanajaxdiform
142.varoptions={
144. beforeSubmit:function(){
145. return$("#frm").valid();
146. },
147. resetForm:true,
148. clearForm:true,
149. dataType:'json'
150. };
152.
153. //validasiformdgnjqueryvalidate
154. $('#frm').validate({
155. rules:{
156. nim:{
157. digits:true,
158. minlength:10,
159. maxlength:10
160. }
161. },
162. messages:{
163. nim:{
164. required:"Kolomnimharusdiisi",
165. minlength:"Kolomnimharusterdiridari10digit",
166. maxlength:"Kolomnimharusterdiridari10digit",
167. digits:"NIMharusberupaangka"
168. },
169. nama:{
170. required:"Namaharusdiisidenganbenar"
171. }
172. }
173. });
174.
175. //flexigridhandling
176. $('#flex1').flexigrid
177. (
178. {
179. url:'index.php?action=getdata',
180. dataType:'json',
181.
182. colModel:[
183. {display:'NIM',name:'nim',width:100,sortable:true
184. {display:'Nama',name:'nama',width:200,sortable:tr
185. {display:'Alamat',name:'alamat',width:400,sortable
186. ],
187. searchitems:[
188. {display:'NIM',name:'nim'},
189. {display:'Nama',name:'nama',isdefault:true}
190. ],
191.
192. sortname:'nama',
193. sortorder:'asc',
194. usepager:true,
195. title:'DataMahasiswa',
196. useRp:true,
197. rp:15,
198. width:700,
199. height:400
200. }
201. );
202.
203.});
204.functiondoaction(celDiv,id){
205. $(celDiv).click(function(){
206. varnim=$(this).parent().parent().children('td').eq(0).text();
207. $.getJSON('index.php',{action:'get_mhs',nim:nim},function(json)
208. $('#nim').val(json.nim);
209. $('#nama').val(json.nama);
210. $('#alamat').val(json.alamat);
211. });
212. $('#nim').attr('readonly','readonly');
213. $('#input').attr('disabled','disabled');
214. $('#edit,#delete').removeAttr('disabled');
215. });
216. }
217.functionshowResponse(responseText,statusText){
220. alert(pesan);
221. resetForm();
222. $('#flex1').flexReload();
223. }
224. functionresetForm(){
225. $('#input').removeAttr('disabled');
226. $('#edit,#delete').attr('disabled','disabled');
227. $('#nim').removeAttr('readonly');
228. }
229. </script>
230. </head>
231. <body>
233. <formaction=""method="post"id="frm"onReset="resetForm()">
236.
239.
242.
248. </form>
249.
250. <tableid="flex1"style="display:none"></table>
251. </body>
252.</html>
Demo dan Download
Hasil akhir dari program ini dapat dilihat di

halaman demo program.
Download source program lengkap beserta
library yang dibutuhkan klik disini.
Download tutorial ini dalam format PDF klik
di
Entri, Edit, Delete, Tampil dengan PHP dan
Ajax JQuery (396.7 KiB, 45,278 hits)
Kesimpulan
Berdasarkan penjelasan di atas, dapat

disimpulkan bahwa penerapan konsep Ajax di
dalam program PHP dapat dilakukan dengan
mudah dengan memanfaatkan library JQuery.
Penggunaan JQuery juga dapat menghasilkan
tampilan yang baik serta membuat pengguna
lebih mudah dan nyaman dalam menggunakan

aplikasi kita. Sebagai contoh dalam tutorial ini,
untuk melakukan proses Entri, Edit, Delete dan
Tampil Data hanya disajikan satu halaman serta
semua proses tidak memerlukan refresh
keseluruhan halaman. Proses terjadi secara
asynchronous di belakang halaman. Dengan
demikian, penerapan konsep Ajax akan
membuat aplikasi lebih kaya dan menarik (Rich
Internet Application).
Semoga tutorial ini bermanfaat untuk kita

semua dan mari kobarkan terus semangat
berbagi!
Berbagi itu indah... 0 5 0
AJAX CONTOH PROGRAM CRUD FLEXIGRID JQUERY PHP
MYSQL
Pengumuman Pemenang Kontes Menulis Tutorial
Useful JavaScript Libraries and jQuery Plugins
253 COMMENTS
AMIR SANTOSO says:

September 4, 2012 at 18:12
MANTABBSSpak terima kasih atas

penjelasannya
Reply
mumu says:
mmm sudah pernah coba deh!! tapi kok lupa lg

sekarang
//coba lgi deh
Reply
umar danny says:

izin belajar pakmudah2an ga lupa2 lagi kayak

mumu..heheee
Reply
rachmat says:
bang lihin, bukannya klo submit masih tetap me-

refresh halaman ya? kecuali fungsi
insert,update,delete yg php di lenya di pisah,
jadi jika disumbit di js merespon le lain
tersebut, bukan php dalam satu le? mohon
koreksi klo salah, maklum newbie
Reply
Achmad Solichin says:

bisa ga refresh. coba dulu demonya di

http://achmatim.net/_demo/crud-php-
ajax/index.php
Reply
rachmat says:
October 30, 2012 at 12:24
iya ngak refresh.. cuma alert :D, baru tau

bang. hehehe
Reply
Mojain says:
March 4, 2014 at 18:17
Artikel nya bagus sob, kebetulan saya juga

ada artikel tentang ajax, mungkin
membantu buat teman teman ini linknya :
http://tutorcollection.com/tutorial-input-
data-dengan-ajax-php-mysql/
Reply
Lee says:
oot dari ajax, form bisa gak merefresh apabila

event onsubmit diberikan handler yang bernilai
false. atau apabila tidak disubmit sama sekali.
bisa dicek dengan tools seperti rebug atau
chrome developer tools.
Reply
ridha says:
keren abis pak mantab banget tutorx..
Reply
kumizcribs says:
terima kasih pak tutorialnya
Reply
arfan says:
Pak klo untuk upload gambar gmn tuh

penambahannya?
mohon bantuaanya
Reply
Obat Herbal Kanker Getah Bening

says:
koneksi ke MySQL nya cepet ga ya? kadang kang

klo via IP Protokol / IP Virtual suka loading lama
Reply
eko says:
pak kalau membuat web dari dreamweaver

(tambah,tampil,ubah dan hapus) dengan PHP
lengkap dengan css, javascrip dan jquery, dan
data basenya buat dari PHPmyadmin tutorialnya
boleh minta pak?yang berbahasa indonesia,
trima kasih
Reply
odong says:
Ah..Loe,, sekalian saja minta duit itu bukan

belajar bego,, itu mau yau jadi saja
Reply
qadir says:
October 5, 2012 at 09:51
Assalamualaikum wr.wb
mohon pencerahan pada terhadap kasus saya
ini :
bentuk database
1 id_petugas varchar(18)
2 nama varchar(30)
3 jenkel varchar(9)
4 tmplahir varchar(30)
5 tgllahir date
6 kode_des varchar(10)
7 jalan varchar(50)
8 hp varchar(12)
if (isset($_POST[Input])) {
$idpetugas = strip_tags($_POST[id_petugas]);
$nama = strip_tags($_POST[nama]);
$jenkel = strip_tags($_POST[jenkel]);
$tmplahir = strip_tags($_POST[tmplahir]);
$tgllahir = strip_tags ($_POST[tgllahir]);
$gampong = strip_tags($_POST[kode_des]);
$jalan = strip_tags($_POST[jalan]);
$hp = strip_tags($_POST[hp]);
$query = sprintf(INSERT INTO petugas

VALUES(%s, %s,%s, %s,%s, %s, %s,%s),
mysql_escape_string($idpetugas),
mysql_escape_string($nama),
mysql_escape_string($jenkel),
mysql_escape_string($tmplahir),
mysql_escape_string($tgllahir),
mysql_escape_string($gampong),
mysql_escape_string($jalan),
mysql_escape_string($hp)
);
bagaimana agar data ini dapat tersimpan, dan

selama ini data tanggalnya masih kosong pada
saat penyimpanan, terima kasih
Reply

October 5, 2012 at 15:03
boleh liat source inputan / HTML-nya?

sepertinya lebih nyaman jika code-nya
dikirimkan via email. salam
Reply
lirik yes says:

October 6, 2012 at 14:54
wah ini mantap gan, ane mau coba dulu dech klo
gitu belajar ajax makasi gan
Reply
HG11 says:
October 7, 2012 at 00:05
Pak, kalo download mysqlna dimana ya? pernah

download koh malah mysql Command Line
Client .
Thanks
Reply

October 8, 2012 at 09:16
Download mysql di situsnya mysql:

http://www.mysql.com/downloads/
Reply
qadir says:
October 15, 2012 at 11:23
Assalamualaikum wr.wb
Dengan izin allah sudah terjawab pak, cuma saya

menghilangkan mysql_escape_string($tgllahir)
menjadi $tgllahir, atau ada cara lain pak ?
Reply
Rahman says:
October 18, 2012 at 22:02
Asaalamualaikum Warahmatullah Wabarakatuh
Salam Kenal Pak..
Bisa kasih contoh yang pakai combobox gak

pak?
Data yang ada di database bisa ditampilkan
dalam combobox terssebut, misalnya NIM
tesebut diganti dengan combobox, jadi ketika
kita pilih nim langsung keluar nama di textbox di
bawah nya..
Reply
Joka says:
October 31, 2012 at 20:53
tararengkyu ya
hatur nuhun pak/kak
saya emang lagi butuh bgt ini

makasih udah bagi ilmunya XD
Reply
wahyu says:
November 5, 2012 at 16:38
mantap pak tuts nya, saya coba buat ulang tetapi

ditambahin beberapa eld tabelnya. kenapa ga
bisa ya pak? untuk input ke database bisa, tetapi
munculin di //exigrid handling nya ga bisa?
mohon infonya pak?
terima kasih banyak sebelumnya
Reply

kemungkinannya sih gitu, kolomnya ga sesuai

antara yg di exigrid dgn record yg di-select. kalo
mau, coba kirim ke email code-nya dan errornya
dimana. thx
Reply
johan says:
semoga amal ibadah ilmunya di ridhoi allah swt,,

hehehe
Reply
Lastri says:
November 11, 2012 at 12:59
Tutorial yang bagus Pak. Saya nyoba buat, dan

mengalami masalah yang sama dengan Mas
Wahyu. Ketidaksesuaian kolomnya itu disebelah
mananya ya Pak? Mohon pencerahannya Pak,
terimakasih
Reply
rjal says:
November 15, 2012 at 09:33
mantap tutorial yang sangat membantu,.
Reply
rahmats says:
November 17, 2012 at 16:24
Assalam, pak Achmad sya udah cuba praktekkan

alhamdulillah bisa, cuman sekrang saya cba tabh
input option, saat input bisa, dan kita mau sya
edit datanya dgn cra klik di grit tp isi dri
optionnya tidak tmpil ke input option, script yang
saya pake
Laki-laki
Perempuan
kira2 script apa yg harus sya tambh lagi, mhon
pencerhannya Pak.
makasih sebelumnya.
Reply
Sylvie Yunjae says:

December 1, 2012 at 23:03
itu pilihan laki2 ama perempuannya pake

radio button ngga ??
klo pake radio button di scriptnya ditambah if
Reply
restu says:
November 21, 2012 at 08:44
keren makasih
Reply
yoet says:
November 25, 2012 at 13:04
wah.. top markotop dah.. baru ngeh kalo tutorial

komplit dibuka abis disini.. mantap pak.. thanks
for your share step by step this tutorial.. jadi
rada paham skrg..
Reply
alex says:
November 28, 2012 at 10:22
1. pak, saya sedang membuat aplikasi skripsi

dan saya bingung tentang cara koneksi jquery
Google docs plugin berinteraksi dengan php dan
mysql. mohon bantuannya pak,,,
2. tolong beritahu saya bagaimana cara
membuat tempat untuk melihat coding2 yang
bapak tulis diatas (yang bisa discoll)

terimakasih sebelumnya,,,
Reply
kakang says:
om, kalau untuk syntak operasi cari data gimana

? mohon penjelasnya, mohon kirim via email
Reply
Sylvie Yunjae says:

Panggil apa nie ?? Om boleh ya ??
Om., nanya donk

Ini kan inputan yg hasilnya lgsg ditampilin n
dimasukin tabel exgrid itu..
Nha.. kalo diganti pencarian gitu bisa ngga ya ??
Jadi di tampilan itu cuma ada text eld buat
masukin keyword pencarian, ntar hasilnya
lgsung ditmpilin di exgrid itu.
kan ntar query-nya pake
select * from blablabla where nama like

%$cari%
Uda coba aku edit2 scriptnya, tapi malah data2

yg uda ada di mysql pun ngga muncul sama
sekali,,
Kayaknya aq masih bingung ama fungsi

penanganan form-nya
atau mungkin penyimpanan di format json-nya
salah ya ?
saoalnya biasanya klo penyimpanan di json aq
pke 2 form
1 form misalnya page1.php itu buat query +
penyimpanan ke json, trus form ke 2 , misalnya
page2.php itu buat nampilin data dimana
AjaxSource-nya ntar page1.php tadi
Onegai
Tolong bantuin
Uda berhari2 galau script nie
Terima kasih sebelumnya
Reply

bukannya di exigrid itu sudah ada

searchingnya, kenapa harus bikin searching
lagi?
mau pake 2 page atau 1 page ya tergantung

programmer, ga masalah kok kalo antara
halaman untuk menampilkan dgn untuk
penyimpanan dipisah.
Reply
Dameanzs says:
January 16, 2013 at 11:22
Numpang tanya pak,, kalo dalam texteld

tanpa submit bisa cari data d exgrid
gmn tuch pak? tq
Reply

January 19, 2013 at 04:29
sebenarnya tetap dengan submit, hanya

saja action submit yg biasanya berupa
tombol digantikan dengan tombol
enter
Reply
simpleman says:
Pak solihin , gmana ya caranny nampilin image di

egrid. kalau bisa syntax jos nya dikasih tau ya

Reply
Lius Alpandi says:

Mantabb abisss . . . .
kalau bisa sharing truz donk soal JQuery . . . .
n lw bsa jg bgi2 mslah penggolahan data dlm
skala bsar . . . .
Reply
nyoman kardila says:

maaf bos disaya ada masalah niii

dimasukan kedatabase mau tapi kok gak muncul
pesannya ya??
terus di data mahasiwa kok gak ada hasil
Inputnya
tolong pencerahannya. terimaksih
Reply
Jefry says:
December 11, 2012 at 11:44
saya baru tahu ni kalau script2nya sangat

banyak dan bejibun
terima kasih ulmunya
Reply
agung setiawan says:

December 11, 2012 at 15:33
pak saya coba kembangin, muncul error kyk gini

>
Parse error: syntax error, unexpected ),

expecting ] in
C:\xampp\htdocs\CRUD\index.php on line 42
saya cek di lenya di line 42 itu ini >
$isp = strip_tags($_POST[[isp]);
Reply

December 11, 2012 at 16:45
sudah jelas, di baris tersebut kelebihan

kurung siku buka > [
Reply
agung setiawan says:

December 11, 2012 at 17:33
yes, sudah bisa tapi saat di input kok gak

masuk di DB, dan gak muncul di tables
bawahnya pak? mohon pencerahannya
Reply

December 12, 2012 at 03:41
jika masih kesulitan, silahkan kirimkan

code-nya via email saya.
Reply
Agung Setiawan says:

December 12, 2012 at 10:57
maaf pak, alamat emailnya apa?
Problem exgrid says:
December 12, 2012 at 01:33
mas, gmana ya kalau misalnya exgrid

dimodikasi dengan diberikan event
select+image, saya sudah coba cuma kenapa
colom tidak bisa menampilkan image dan fungsi
select tidak berjalan ketika action edit data
atas jawabannya terimakasih ya mas,,,, dan
terima kasih kalau mas mau kirim scriptnya ke
email saya
Reply

December 12, 2012 at 03:49
jika masih bingung, silahkan kirimkan source

code yang sudah dibuat via email dan
ceritakan kesulitannya.
Reply

December 12, 2012 at 11:32
sudah saya kirim mas, ke email mas

achmatim@yahoo.com
Reply

December 12, 2012 at 12:04
email saya achmatim@gmail.com, yahoo.com

jarang dibuka
Reply

December 12, 2012 at 15:02
mas, sudah saya kirim ke achmatim@gmail.com,,

makasih mas
Reply
Agung Setiawan says:

December 12, 2012 at 16:54
pak saya sudah kirim kan source code punya

saya ke email yang yahoo dan gmail, saya tunggu
pak responenya terimakasih
Reply
rahmi says:
December 14, 2012 at 21:41
pak, saya nyoba codingnya bapak. tapi, tampilan

data di exgridnya gak tampil. gimana solusinya
pak?
Reply
Indra Rukmana says:

December 14, 2012 at 21:57
Command Edit sama Delete nya ada pak,??

Untuk melengkapi..
Terima Kasih..
Reply
Indra Rukmana says:

December 14, 2012 at 22:31
Oh, Maaf saya baru ngerti cara pakenya

programnya sekarang.. Terima kasih atas
infonya..
Reply
alundra00 says:
December 15, 2012 at 19:12
maaf pak kok form action ny kosong y?? berarti

belum d proses dong inputan data ny??
puny saya gag muncul data di kotak data
mahasiwa walaupun saya udh input kan di form
sama di databse ny??
mohon petunjuk ny pak
Reply

December 15, 2012 at 21:35
atribut action pada tag form kosong itu

artinya form akan diproses di halaman yang
sama.
Reply
Topan Setiawan says:

December 16, 2012 at 02:48
mantab pa cuma tapi knp gx ada pencarian data

pa.???
Reply

December 16, 2012 at 03:02
eh ternyata ada pencariannya juga yo. mantab

dah pa. banyak. mau saya pelajarin nich.
makasih
Reply
alundra00 says:
December 16, 2012 at 10:06
maaf pak melanjutkan problem saya yg blm d

jawab..knp data saya tidak masuk ke eldgrid
ny???
walaupun saya telah mengisi data di form
ataupun di databse secara langsung,tetap saja
tidak muncul??
emang menurut pak achmad,apa saja yg harus
di perhatikan jika ingin menampilkan data di
ledgrid???
Reply

December 16, 2012 at 21:30
biasanya karena perintah SELECT yang ga

tepat atau error. silahkan share via email jika
masih kesulitan.
Reply

December 17, 2012 at 20:09
pa maaf saya mau minta penjelasan sedikit, saya

kan mempunyai 2 tabel. tabel yg.
pertama : kategori dg eld
kd_kategori
nm_kategori
harga
kedua : kamar dg eld

no_kamar
kd_kategori (foreign key dari tabel kategori)
nah saya mau nampilin ke gridnya menjadi

no_kamar, nm_kategori, harga.
ini source kodenya pa.
if (isset($_GET[action]) && $_GET[action] ==

getdata)
{
$page=(isset($_POST[page]))?$_POST[page]: 1;
$rp=(isset($_POST[rp]))?$_POST[rp] : 10;
$sortname=(isset($_POST[sortname]))?
$_POST[sortname] : no_kamar;
$sortorder=(isset($_POST[sortorder]))?
$_POST[sortorder] : asc;
$sort=order by $sortname $sortorder;

$start=(($page-1) * $rp);
$limit=limit $start, $rp;
$query=(isset($_POST[query]))? $_POST[query] :
;
$qtype=(isset($_POST[qtype]))? $_POST[qtype] :
;
$where=;
if ($query) $where .= where $qtype like $query
;
$query=select * ;
$query_from= from kamar ;
$query.=$query_from . $where $sort $limit;
$query_total=select count(*). $query_from.

.$where;
$sql=mysql_query($query) or die($query);
$sql_total=mysql_query($query_total) or
die($query_total);
$total=mysql_fetch_row($sql_total);
$data=$_POST;
$data[total] = $total[0];
$datax=array();
$datax_r=array();
while ($row=mysql_fetch_row($sql))
{
$rows[id]=$row[0];
$datax[cell]=$row;
array_push($datax_r, $datax);
}
$data[rows]=$datax_r;
echo json_encode($data);
exit;
}
else
if (isset($_GET[action]) && $_GET[action] ==
get_data)
{
$no_kamar=$_GET[no_kamar];
$query=select * from kamar where
no_kamar=$no_kamar';
$sql=mysql_query($query);
$row=mysql_fetch_assoc($sql);
echo json_encode ($row);
exit;
}
kira yang harus saya ganti sebelah mana pa.?

mohon penjelsannya pa and maaf saya jadi
ngerepotin.
Reply

December 23, 2012 at 04:19
yang perlu diganti ya ini:
$where=;
if ($query) $where .= where $qtype like
$query ;
$query=select * ;
$query_from= from kamar ;
silahkan belajar dulu gimana perintah join

antar-tabel.
Reply
and says:
December 17, 2012 at 23:33
jujur saja ini sangat bermanfaat, terimakasih

bang mau berbagi
Reply
juna says:
December 19, 2012 at 08:39
terimakasih banget masbro tutorialnya
Reply
Muh. Yudha says:

December 19, 2012 at 10:05
Mas Achmad Solichin, terimakasih atas ilmunya.

Saya mau tanya bagaimana caranya agar query
yang tampil dilter
dari form input dengan metode $_POST, seperti
ini:

-
1. lter.html

2. exigrid.php

...$d=$_POST['divisi'];
$t=$_POST['tahun'];
$sort="ORDERBY$sortname$sortorder";
$start=(($page1)*$rp);
$limit="LIMIT$start,$rp";
$query=(isset($_POST['query']))?
$_POST['query']:'';
$qtype=(isset($_POST['qtype']))?
$_POST['qtype']:'';
$where="WHEREdivisi='$d'ANDtahun=$t";
if($query)$where.="WHERE$qtypeLIKE
'%$query%'";
pada $where saya buat lternya. tapi data malah

tidak tampil ya? kira2 seharusnya seperti apa ya
Mas Mohon pencerahannya, Terimakasih..
Reply

December 23, 2012 at 04:17
sudah saya bales via email
Reply
lunglun says:
December 23, 2012 at 10:52
Pak mau tanyakira punya source code & bisa

ajari gak tentang cara menampilkan sebagian
data pada form.kasusya registrasi
siswa..pengenya kalou diketikkan NIS nya data
siswa yang sudah tersimpan bisa muncul di form
isian registrasi secara langsungtolong ajari ya
kalo ada source code bisa di kirim ke email
saya.makasih sebelumnya
Reply
kristiyono says:
January 15, 2013 at 14:07
wah..saya boleh minta juga nggak souce code

yang ini. saya lagi butuh nihthx
kristiyono.2@gmail.com
Reply

January 19, 2013 at 04:36
kan bisa download diatas sourcenya
Reply
Lius Alpandi says:

December 23, 2012 at 16:24
Bang mohon maaf sebelumnya saya masih

kebinggungan dari tahapan keempat yaitu
potongan perintah php untuk menampilkan data
ke exigrid mohon pencerahanya untuk sedikit
menjelaskan perbaris dari program tersebut . .
Terima Kasih sebelumnya . .
Reply
Nur Hamzah says:

December 25, 2012 at 05:56
Bermanfaat sekali Pak ,

Saya Download Dulu pak
Terima Kasih
Reply
Obat Tradisional Asli says:

December 25, 2012 at 23:08
jadi pengen belajar bahasa pemograman nih

kayaknya asyik apalagi bisa digabungin dengan
website..makasih kang udh mau berbagi
ditunggu ya kunjungan baliknya..hee
Reply
triedaritri says:
December 27, 2012 at 20:49
Warning: mysql_connect(): Access denied for

user root@localhost (using password: YES) in
C:\xampp\htdocs\demo\index.php on line 3
Access denied for user root@localhost (using
password: YES)
ini yang salah apanya ya pak
Reply

December 28, 2012 at 13:44
koneksi ke databasenya disesuaikan atuh

dengan kondisi di komputer kamu
Reply
Isbat Usman says:

December 28, 2012 at 16:01
saya pendatang baru di internet kalau ada scrip

bagus bagi dong ke link email saya, salam hangat
online
Reply
lela says:
December 30, 2012 at 06:40
semuanya berhasil namun ketika dijalankan

loading terus, datanya ga tampil di exigrid nya
tapi kalo di database nya sudah tersimpan
hmmm,,,kenapa ya pak sampe bisa loading
kayak gtu???? kira-kira penyebab nya apa ya
pak??
makasih sebelumnya
Reply

December 31, 2012 at 20:13
kemungkinan perintah SELECT-nya yang error,

silahkan kirimkan source-code beserta
databasenya via email, semoga saya bisa
bantu cek.
Reply
Hikmat says:
December 31, 2012 at 15:40
kalo pengimputan gan berhasil, tp d dlm exgrid

knp hasilnya ga tampil ya gan, . .
Reply

December 31, 2012 at 20:14
kemungkinan perintah SELECT-nya yang error,

silahkan kirimkan source-code beserta
databasenya via email, semoga saya bisa
bantu cek.
Reply
lula says:
January 8, 2013 at 14:18
pk library java scripnya bisa dipake di banyak

form di dalam satu folder web ??
kenapa setiap kali mau membuat form baru , isi
exygridnya tidak mau keluar ya ?
terimakasih
Reply

January 8, 2013 at 15:43
library jquery-nya dapat dipake berulang kali,

tapi pemanggilan dan kongurasi exigridnya
ya harus dilakukan di setiap kita akan

menampilkan data di exigrid
Reply
lula says:
January 8, 2013 at 19:05
saya sudah mencoba 2 form, alhamdulilah

berhasil, tapi form-form yg lain exygridnya
hanya meload data, tanpa menampilkan
apapun, sudah saya coba dari semalam, tapi
belum berhasil, kira2 kesalahan apa yg saya
lakukan ?
betul2 bingung dan butuh pencerahan
trimakasih bnyk ,,
Reply

January 9, 2013 at 04:06
Ya umumnya kesalahan terjadi karena

perintah querynya yang salah. Jika masih
kesulitan, silahan share code dan db-nya ke
email saya.
Reply
lula says:
January 9, 2013 at 16:52
saya sudahg kirim email, code dan db nya ,,

mohon bantuannya
Reply
Gilank says:
January 10, 2013 at 02:34
bang mau kalau koneksinya pake sql server 2005

gimna ? bisa ngga ?
Reply
gigink says:
January 15, 2013 at 13:06
assalamualaikum.
sebelumnya terima kasih atas shared tutorialnya

yang bisa di manfaatkan oleh saya dan
semuanya. selebihnya saya minta petunjuk
karena di localhost saya yang menggunakan
wamp server 2.2 dan dijalankan di refox versi
18.0 untuk konrmasi input,delete berupa
popup window tidak muncul bahkan untuk clear
otomatis setelah input tidak muncul juga.
mohon pencerahannya.
Terima kasih.
Reply

January 15, 2013 at 13:53
kemungkinan karena ada perintah javascript

yg error. coba dicek kembali. kalo kesulitan,
silahkan share code-nya ke email atau

pastebin
Reply
gigink says:
January 15, 2013 at 15:12
$pesan, data =>$_POST);

echo json_encode($response);
exit;
} else if (isset($_POST[Edit ])) {
$nim = strip_tags($_POST[nim ]);
$nama = strip_tags($_POST[nama ]);
$alamat = strip_tags($_POST[alamat ]);
//update data
$query = sprintf(UPDATE mahasiswa SET
nama=%s, alamat=%s WHERE nim=%s',
mysql_escape_string($nama),
mysql_escape_string($alamat),
mysql_escape_string($nim)
);
$sql = mysql_query($query);
$pesan = ;
if ($sql) {
$pesan = Data berhasil disimpan;
} else {
$pesan = Data gagal disimpan ;
$pesan .= mysql_error();
}
$response = array(pesan =>$pesan, data
=>$_POST);
exit;
} else if (isset($_POST[Delete ])) {

$nim = strip_tags($_POST[nim ]);
//delete data
$query = sprintf(DELETE FROM mahasiswa
WHERE nim=%s',
mysql_escape_string($nim)
);
$pesan = ;
if ($sql) {
$pesan = Data berhasil dihapus;
} else {
$pesan = Data gagal dihapus ;
$pesan .= mysql_error();
}
$response = array(pesan =>$pesan, data
=>$_POST);
exit;
} else if (isset($_GET[action ]) &&
$_GET[action ] == getdata ) {
$page = (isset($_POST[page ]))?

$_POST[page ]: 1;
$rp = (isset($_POST[rp ]))?$_POST[rp ] : 10;
$sortname = (isset($_POST[sortname ]))?
$_POST[sortname ] : nama ;
$sortorder = (isset($_POST[sortorder ]))?
$_POST[sortorder ] : asc ;
$sort = ORDER BY $sortname $sortorder;

$start = (($page-1) * $rp);
$limit = LIMIT $start, $rp;
$query = (isset($_POST[query ]))?

$_POST[query ] : ;
$qtype = (isset($_POST[qtype ]))?
$_POST[qtype ] : ;
$where = ;
if ($query) $where .= WHERE $qtype LIKE
%$query% ;
$query = SELECT nim, nama, alamat ;

$query_from = FROM mahasiswa ;
$query .= $query_from . $where $sort

$limit;
$query_total = SELECT COUNT(*).

$query_from. .$where;
$sql = mysql_query($query) or die($query);

$sql_total = mysql_query($query_total) or
die($query_total);
$total = mysql_fetch_row($sql_total);
$data = $_POST;
$data[total ] = $total[0];
$datax = array();
$datax_r = array();
while ($row = mysql_fetch_row($sql)) {
$rows[id ] = $row[0];
$datax[cell ] = $row;
}
$data[rows ] = $datax_r;
exit;
} else if (isset($_GET[action ]) &&
$_GET[action ] == get_mhs ) {
$nim = $_GET[nim ];
$query = SELECT * FROM mahasiswa
WHERE nim=$nim';
$row = mysql_fetch_assoc($sql);
echo json_encode ($row);
exit;
}
?>
Entri, Edit, Delete, Tampil Data dengan PHP

dan Ajax
.labelfrm {
display:block;
font-size:small;
margin-top:5px;
}
.error {
font-size:small;
color:red;
}
$(document).ready(function() {
resetForm();
//aktifkan ajax di form
var options = {
success : showResponse,
beforeSubmit: function(){
return $(#frm).valid();
},
resetForm : true,
clearForm : true,
dataType : json
};
$(#frm).ajaxForm(options);
//validasi form dgn jquery validate

$(#frm).validate({
rules: {
nim : {
digits: true,
minlength:10,
maxlength:10
}
},
messages: {
nim: {
required: Kolom nim harus diisi,
minlength: Kolom nim harus terdiri dari 10
digit,
maxlength: Kolom nim harus terdiri dari
10 digit,
digits: NIM harus berupa angka
},
nama: {
required: Nama harus diisi dengan benar
}
}
});
//exigrid handling
$(#ex1).exigrid
(
{
url: index.php?action=getdata,
dataType: json,
colModel : [
{display: NIM, name : nim, width : 100,
sortable : true, align: left, process:
doaction},
{display: Nama, name : nama, width : 200,
sortable : true, align: left, process:

doaction},
{display: Alamat, name : alamat, width :
400, sortable : true, align: left, process:
doaction}
],
searchitems : [
{display: NIM, name : nim},
{display: Nama, name : nama, isdefault:
true}
],
sortname: nama,
sortorder: asc,
usepager: true,
title: Data Mahasiswa,
useRp: true,
rp: 15,
width: 700,
height: 400
}
);
});
function doaction( celDiv, id ) {
$( celDiv ).click( function() {
var nim =
$(this).parent().parent().children(td).eq(0).t
ext();
$.getJSON (index.php,
{action:get_mhs,nim:nim}, function (json) {
$(#nim).val(json.nim);
$(#nama).val(json.nama);
$(#alamat).val(json.alamat);
});
$(#nim).attr(readonly,readonly);
$(#input).attr(disabled,disabled);
$(#edit, #delete).removeAttr(disabled);
});
}
function showResponse(responseText,
statusText) {
var data = responseText[data];
var pesan = responseText[pesan];
alert(pesan);
resetForm();
$(#ex1).exReload();
}
function resetForm() {
$(#input).removeAttr(disabled);
$(#edit, #delete).attr(disabled,disabled);
$(#nim).removeAttr(readonly);
}
Data Mahasiswa
NIM:
NAMA:
ALAMAT:
Reply
gigink says:
January 15, 2013 at 15:15
masih ikut script yang saya download dari bapak,

namun setelah saya install dan coba script satu
demi satu tetapi setelah dijalankan fungsi alert
tersebut belum aktifmohon petunjuknya,

terima kasih
Reply

January 19, 2013 at 04:34
kemungkinan ada javascript yg error, kalo

scriptnya belum ada perubahan harusnya
bisa, krn itu sudah saya coba dan ga ada
masalah.
Reply
WizQi says:
January 16, 2013 at 13:26
mas,.mau tanya dong,..

setelah input data,..data bisa masuk ke
database,..
tp di table ny ga mau tampil data ny,..n terus
loading,..
mohon bantuan ny mas,..makasih,..
Reply

January 19, 2013 at 04:28
biasanya ada perintah SELECT data yang

error, coba dicek. kalo masih belum ketemu,
bisa kirim sourcenya via email saya.
Reply
Mocku says:
January 17, 2013 at 17:58
saya mau nanya pak, kalo mau insert, edit, dan

delete dari tabel berbeda dengan php dan mysql
itu gimana ya pak?? misalnya saya punya tabel
mhs : npm, nama, jurusan, dan angkatan; dan
tabel nilai : id_nilai, nama, dan nilai. yang mana
eld nama di tabel mhs sama dengan eld nama
di tabel nilai.
boleh kasih contohnya kayak gimana ga pak?
Reply

January 19, 2013 at 04:27
konsepnya sebenarnya sama seperti insert ke

tabel tunggal, untuk tabel banyak ya insertnya
beberapa kali dan bergantian/berurutan.
Reply
Dameanzs says:
January 18, 2013 at 11:40
pak,,, kalo buat master detail ada ngak ya pak

contohnya
Reply

January 19, 2013 at 04:25
belum ada contohnya, tapi udah masuk

waiting-list tutorial yg akan dibuat
Reply
Dameanzs says:
January 20, 2013 at 14:52
OK pak di tunggu ya pak,,,, heheh

bermanfaat banget ilmu yang bapak
berikan
Reply
fenda says:
January 18, 2013 at 14:14
salam kenal pak, guide yg bapak buat sangat

bermanfaat bagi saya, sudah sy coba dan
berhasil, tapi ketika konten dari bapak saya pake
model include index.php; kok waktu
input/edit/delete tidak bisa muncul alert dari
javascriptnya pak, gmn solusinya pak, terima
kasih
Reply

January 19, 2013 at 04:24
kemungkinan ada javascript yg error. kalo

mau boleh saya dikirimi (attach) sourcenya via
email. salam
Reply
fenda says:
January 21, 2013 at 10:58
tidak ada yg error kok pak di javascriptnya

waktu sy coba include biasa, sy coba liat2
artikel di net, ternyata hubungannya
dengan DOM jd structure site sy masih
belum benar untuk me-load javascript alert
nya, trus ini pak ada pertanyaan lain ketika
di exgrid searchnya sy tambah trus ketika
sy search kok loading lama banget padahal
database dan script sudah saya masukkan
dengan benar saya cek berulang ulang
juga tetep sama loading lama
Reply
phia says:
January 19, 2013 at 12:29
Mas untuk menambah image dan menampilkan

di tabel grid gimana ya caranya, saya sudah
insert image nya ke database udah bisa cuma
menampilkannya gak bisa, mohon solusinya
mas..
Reply
WizQi says:
January 21, 2013 at 12:27
sudah bisa mas,..buat nampilin data yg di input,..

ternyata script php ny harus berada diposisi
atas,..
n url ny harus sesuai dengan le yg kita save,..
cuma saya mau tnya lg nih mas,..

knp saat kita tekan tombol sumbit
save/edit/delete,..
pesan ny ga kluar ya mas,..
trima kasih sebelumnya,..tutor ny sngt

membantu saya,..
Reply

January 25, 2013 at 15:29
mungkin javascriptnya ada yang error
Reply
Firda says:
January 22, 2013 at 10:29
pagi , pak kalau cara bikin combobox yang kita

klik dan muncul kalender, itu sintaknya seperti
apa ya ? tetapi tanggalnya pun bisa masuk
kedatabase ,.
tolong dibantu ya pak ..
trimakasih ..
Reply
WizQi says:
January 23, 2013 at 17:22
coba bantu jawab ya om,..

datepicker jquery ny bs tanya google ,..type
data base ny bs dibuat varchar aja,..
sedikit modikasi dari tutor ini yg om Achmad
Solichin bikin,..
cos yg saya buat jg seperti itu,..
skalian ikut tanya lagi ya om,..

klo mau bikin validasi angka gmn ya,..misal :
angka awal harus berawalan 123,..
makasih,..mohon maaf klo jawaban saya msh

bnyk kekurangan,..maklum pemula,.
Reply

January 25, 2013 at 15:22
terima kasih atas bantuan jawabannya, tapi

menurut saya tipe data unt menyimpan
tanggal tetep harus bertipe DATE. Plugin
jquery datepicker bisa diatur format
datanya kok. Kalo validasi angka bisa aja,
diatur formatnya aja, kayaknya hampir
mirip dgn format no telp contohnya:
http://jquerybyexample.blogspot.com/2012
/05/validate-phone-numbers-using-
jquery.html
salam
Reply
guntur agasti says:

January 23, 2013 at 10:18
gan gimana caranya kalo misalnya saya

ngimputkan data terus error, la tulisan yang kita
inputkan dikotak pengisiannya tadi harus tetep
ada waktu error itu, jadi gak usah ngetik dari
awal lagi tinggal ganti aja perintah errornya
gmna, misal perintah errornya no tlp harus di isi
angka la itu saya tinggal ganti aja no tlp dengan
angka gak usah ngetik dari awal lagi
Reply
Dameanzs says:
January 23, 2013 at 13:29
resetForm : true, rubah jadi resetForm : false

coba pake cara itu pak
Reply
billy says:
January 24, 2013 at 09:25
Thanks sebelumnya mas, tapi setelah saya

download dan coba di komputer saya kok
gridnya gak muncul, untuk diketahui nama
lenya saya ubah jadi crude.php dibagian
exgrid handlingnya nama lenya sudah saya
ubah juga tapi data nggak mucul digridnya.
mohon pencerahannya. trims.
Reply

January 25, 2013 at 15:13
ada banyak faktor yg mungkin bagi penyebab,

kalo mau silahkan share code-nya via email.
Reply
fajrul says:
January 24, 2013 at 14:05
pak.. sebelumnya terima kasih sudah mau

melihat n membaca.. ini gan.. saya punya
masalah di score delet
<?php
include_once('koneksi.php');
$perintah="DELETE FROM data_tel WHERE
NO='$_GET[id]'";
$hasil=mysql_query($perintah);
if($hasil){
echo "alert(Berhasil); history.go(-1);
} else {
echo alert(Gagal); history.go(-1);
}
?>
la saya belum paham di score yang where
setelahnya where itu di buat apa gan.. ini saya
coba tulisannya berhasil.. tp 1 data pun tidak
terhapus gmn qw bingung makasih atas
perhatiannya gan..
Reply
Lius Alpandi says:

January 24, 2013 at 17:27
Maaf pak mau nanya ni . . ??

pada langkah ke 7 yaitu masalah Tampilkan
Data di Form saat Baris Fexigrid Dipilih
bapak menjelaskan jika lebih dari satu primary
key, ya tinggal tambahkan variabel lainnya.
bisa gak pak kasih pencerahanya bagaimana
menambahkan variabel lainya jika saya
mempunyai 2 primary key dalam satu tabel . .
terima kasih . .
Reply

January 25, 2013 at 15:04
Tinggal modikasi baris perintah pada fungsi

doaction(), contohnya sbb:
var nim =
$(this).parent().parent().children(td).eq(0).text
(); //PK ada di kolom 1
var kode =
$(this).parent().parent().children(td).eq(1).text
(); //PK ada di kolom 2
$.getJSON (index.php,
{action:get_mhs,nim:nim, kode:kode},
function (json) {
$(#nama).val(json.nama);
});
Lalu modikasi juga program PHP untuk

handling datanya (action=get_mhs)
Reply
tazsa says:
January 25, 2013 at 10:08
permisi pak.
klo mau membuat coding search nya gmn ?
Reply

January 25, 2013 at 15:01
Coding search pada dasarnya SELECT aja,

hanya menggunakan kondisi berdasarkan
keyword yang diinputkan. Biasanya querynya
SELECT WHERE LIKE %$keyword%
Kalo buat dengan dreamweaver, coba cek
tutorial ini:
http://achmatim.net/2009/07/30/dreamweave
r-untuk-pencarian-data-mahasiswa/
Reply
Solihin says:
January 25, 2013 at 16:07
Mas saya mau tanya,

Saya punya masalah dengan perhitungan tgl dan
jam
Contoh
Tgl masuk : 12-01-2012 (format date bukan
datetime)
Jam masuk : 23:35 (format varchar)
Pertanyaannya :
1.Jika ditambah 1 hari 3 Jam , maka rumusnya
bagaimana secara php.
2.Tanggal keluar = Tgl.masuk + jam masuk
3.Jam keluarnyanya jam berapa
Terima kasih mas
Reply
Dotpixel says:
January 25, 2013 at 17:55
Mas mau tanya!!

klo mau nampilin beserta gambar dengan type
data mediumblob di tabel itu setinganx gimna
ya??
pemula ni thanks
Reply
Aiiko says:
January 28, 2013 at 15:59
OM Kalo mw ngecilin font exigrid dimana ya
Reply

January 29, 2013 at 15:18
tinggal atur css-nya, ada di le

/exigrid/css/exigrid.css
Reply
Aiiko says:
January 30, 2013 at 14:56
makasih om udah bisa. he
om kalo mw inner joi table gmana
Reply

January 30, 2013 at 20:27
inner join silahkan pelajari perintahnya

di
http://achmatim.net/2010/01/18/perinta
h-mysql-untuk-menampilkan-data-dari-
beberapa-tabel/
Reply
Heru Hidayat says:

January 29, 2013 at 07:07
Muantaappp pak .:)
Reply
dika says:
February 1, 2013 at 00:43
om kira kira buat judul skripsi aplikasi berbasis

web dengan AJAX tentang apa yaa om?
yang ada unsur CRUD nya yg kira kira simple tapi

ngena .
Reply
hendra sriwijaya says:

Ijin coba, Brada.

39
Reply
Aiiko says:
om kalo exigridnya dibuat kondisi where saat

mw ditampilkan sesuai dengan texteld kok
ngak ngaruh ya?
contohnya
$query = SELECT aa, bb ;

$query_from =FROM tes where aa LIKE %$ket%
;
Reply

bisa dikirimkan source code lengkapnya? $ket

itu harus dikirim dan diterima oleh exigrid.
Nah trigger lteringnya apa? pas tekan tombol
atau apa?
Reply
Aiiko says:
sudah dikirm om.. mohon pencerahannya om
Reply
nurjanah says:
maaf pak, saya mau tanya, kalau menampilkan

table berdasarkan nama table dalam 1 page
seperti apa ya sintaknya..?
modelnya seperti ini :
nm_le keterangan
table1.dbf lihat data/hapus

mohon bantuannya ya pak.. !!!!!
Reply
jagooweb says:
keren.cuy
Reply
herizal says:
Sangat Sangat.. Sangat bermanfaat mas,

terus bagi ilmunya mas,
may Allah Bless U
Reply
herizal says:
mau tanya nih mas,

bagaimana kalo kita mau menampilkan data
hanya menginput Nim pada textbox, lalu
menekan Enter maka pada textbox mahasiswa
dan alamat bisa langsung tampil datanya,
makasih atas bantuannya.
Reply

February 10, 2013 at 05:34
Secara konsep sebenarnya sama seperti

tutorial ini,
http://achmatim.net/2013/01/15/manipulasi-
combobox-dengan-ajax-jquery-studi-kasus-
data-propinsi-kabupaten/, hanya saja
actionnya adalah saat ditekan tombol enter.
Reply
wati says:
February 12, 2013 at 11:02
aku mau coba buat database yang sederhana

tapi menggunakan qwerty.dua table yaitu table
mahasiswa dan table
dosen.gimanaya.caranya?apa caranya sana
a.ja dengan yang diatas?tolong jawaban anda
di kirim lewat email saya ya kalau anda
memiliki waktu.
Reply

February 14, 2013 at 12:28
tinggal ganti aja querynya, caranya sama
Reply
Bahrudin says:
February 12, 2013 at 15:19
Pak punya contoh Tugas Akhir buat jurusan TKJ

(Teknik Komputer dan Jaringan), klo ada mnta
link websitenya donk, soalnya saya pusing cari
judul buat TA nya. klo bs kirimnya ke email aja ya
pak. makasih sebelumnya. ditunggu ya!!
Reply
Hendry says:
February 12, 2013 at 17:41
suwun mas bro
Reply
joe sandai says:

February 13, 2013 at 00:57
mungkin bisagak ditambah validai tidak boleh

kosong dan pada nim tidak boleh huruf serta
tidak boleh diawali dengan huruf nol
Reply
Aiiko says:
February 13, 2013 at 11:44
function harusangka(jumlah){
var karakter = (jumlah.which) ? jumlah.which :
event.keyCode
if (karakter > 31 && (karakter 57))
return false;
return true;
}
function ok_email(eform){
var regex = /^(([\-\w]+)\.?)+@(([\-\w]+)\.?)+\.[a-
zA-Z]{2,4}$/;
if(regex.test(eform.email.value)){
return true;
}
else { alert(email tidak valid);
return false;
}
}
saya bantu ya om solihin
ini coding biar ngak bisa huruf
nah pas di input kasih perintah ini

onKeyPress=return harusangka(event)
Reply
Aiiko says:
February 13, 2013 at 11:47
untuk function ok_email(eform) untuk

validasi email..
Reply

February 14, 2013 at 12:38
Untuk validasi silahkan liat di tutorial

http://achmatim.net/2012/05/22/membuat-
validasi-form-dengan-jquery-validation/
Reply

February 13, 2013 at 19:36
pa, mau tanya untuk source code ini kan untuk

menampilkan data ke text eld
$(#nama).val(json.name);
nah kalau menampilkan datanya ingin ke label

caranya gimana ya pa.? trimakasih.
Reply

February 14, 2013 at 12:24
Tinggal pake $(#id).text(json.variabel);
Reply

February 14, 2013 at 12:29
maaf ga ada
Reply
Rudy Herwaman says:

February 14, 2013 at 19:30
Thanks banget gan Membantu Ane banget
Reply
Rudy Herwaman says:

February 14, 2013 at 19:34
HohO Makasih Gan
Reply
septian says:
February 16, 2013 at 13:29
permisi pak,
saya mau tanya jika textarea alamatnya saya
tambahkan niceditor kenapa tidak mau
memunculkan le dari databasenya yah pada

saat saya memilih le yang saya ingin edit.
terima kasih
Reply

February 17, 2013 at 03:55
apa yang dimaksud memunculkan le dari

database? apakah maksudnya membaca le
text (.txt) atau sejenisnya yang disimpan di
db?
Reply
ray says:
February 17, 2013 at 09:09
mass..
kl ketika kita simpan data ke data base
gmn syntax php untuk memasukan jam ke
database sesuai dgn JAM komputer kita,
tanpa input ..
Reply

February 18, 2013 at 15:59
tinggal pake fungsi now() dan pastikan eld-

nya bertipe date atau datetime.
Reply
Anda Hebat says:

February 17, 2013 at 12:41
Wahh jarang nih kasih tutor lengkap gini..

thanks pak sudah berbagi
Reply
justin agan says:

February 18, 2013 at 08:26
pak kalo mau buat upload gambar gimana ya

pak?
Reply
cinta2maret says:
February 18, 2013 at 19:12
wah lagi nyari CRUD ajax php nih kebetulan.

makasih pak
Reply
andy says:
February 18, 2013 at 21:07
Dalam kasus saya : le index.php (dari source ini)

saya include kedalam le lain.
kongurasi direktori sudah saya rubah.. exigird
nya juga tampil.
proses simpannya berhasil akan tetapi datanya
kenapa tidak tampil di exigird tersebut. di
refresh juga gak tampil dan terjadi proses reload
yang tak berhenti terus menerus.. tolong donk

bisa bantu kan
intinya le index.php didalam folder crud dan
saya include dari le yang diluar dari folder crud
tersebut.
tolong pencerahannya klo bisa kirim ke email ya
pak
Reply

February 18, 2013 at 21:17
silahkan kirim source code lengkapnya ke

email, sepertinya ada proses query yang
salah. apakah databasenya beda?
Reply
andy says:
February 18, 2013 at 21:28
hanya connection databasenya saya

rubah.. tapi tabelnya tidak saya rubah..
jika langsung dipanggil :
localhost/latihan/crud/index.php .. data-
datanya tampil ke exigridnya tapi jika le
nya saya include kedalam le lain datanya
tidak tampil ke exigridnya..
Cth : nama le ini home.php didalam folder
latihan
jadi panggil localhost/latihan/home.php

source javascriptnya sudah saya ganti juga
tidak tampil
src=crud/libs/jquery.min.js
Reply

February 18, 2013 at 22:42
sudah saya balas ke email
Reply
Pluie says:
July 25, 2013 at 12:30
Saya memiliki error yang sama

dengan ANDY, solusinya bagaimana
pak??
Mohon bantuannya, terima kasih.

July 28, 2013 at 05:54
silahkan kirim source lengkapnya via

email
septian says:
February 19, 2013 at 09:08
yup betul txt di textarea tidak muncul pada saat

le di Tabel dengan Flexigrid di select ..kejadian
ini terjadi setelah textareanya saya beri script
niceditor (WYSIWYG) ..
Reply
Andy says:
February 20, 2013 at 14:29
Sudah bisa mas..

Tp seperti punya SEPTIAN
saya juga menggunakan plugin TinyMCE
dan saat di klik di exigrid nya data yang dari
database tidak tampil kedalam textarea..
jika ke texbox lain tampil datanya.. hanya ke
textarea yang pakai pluggin TinyMCE
Ada solusinya..
atau harus mengalah salah satunya
Reply
septian says:
February 21, 2013 at 10:26
mas coba minta sourcenya dong.. saya

masih tetet tidak bisa nih ..pake source dari
link diatas.
Reply
Andy says:
February 20, 2013 at 14:39
Kasus saya seperti punya SEPTIAN

saya juga menggunakan plugin TinyMCE
dan saat di klik di exigrid nya data yang dari
database tidak tampil kedalam textarea.. jika
ke texbox lain tampil datanya.. hanya ke textarea
yang pakai pluggin TinyMCE databasenya tidak

muncul ke textarea.
Ada solusinya.. atau harus mengalah salah
satunya..
Satu lagi :
Tanggal yang dari database bisa tidak dipisahkan
dari json..
saya mau letakkan
tanggal dari tanggal database kedalam input text
dgn name=tgl
bulan dari tanggal database ke select dgn
name=bln
tahun dari tanggal database kedalam input text
dgn name=thn
seperti explode :
$tanggal = explode(-,$data[tanggal]);
$tgl=$tanggal[2];
$bln=$tanggal[1];
$thn=$tanggal[0];
<input name="tgl" value=">
<input name="thn" value=">
Reply

February 20, 2013 at 23:58
untuk kasus pertama bisa lihat tutorial

http://stackoverow.com/questions/1582251/
how-to-load-html-using-jquery-into-a-tinymce-
textarea. Untuk kasus kedua tinggal
menggunakan split() di javascript untuk
memisahkan tanggal, bulan dan tahun
berdasarkan delimiter tertentu.
Reply
andy says:
February 21, 2013 at 10:31
maaf pak untuk kasus kedua bisa lebih

detail lagi
fungsi json dari bapak kan sprti ini :
function (json) {
$(#legalitas).val(json.legalitas);
$(#nomor).val(json.nomor);
$(#tgl).val(json.tanggl);
$(#bln).val(json.tanggal);
$(#thn).val(json.tanggal);
});
#tgl,#bln,#thn adalah textbox dan
combobox
jadi memisahkan (mengexplode )
json.tanggal bagaimana?
saya mau mengambil tanggal, bulan,tahun
dari json.tanggal tersebut.
mohon bantuannya pak
Reply
atiek says:
February 21, 2013 at 10:09
Bapak saya mau tanya, bagaimana kalau

sebelum nim itu dikasih nomor urut. Nomor urut
juga akan munculk berdasarkan hasil
pencarian/lter yang dilakukan pengguna.
Terima kasih atas jawabannya.
Reply
andy says:
February 21, 2013 at 11:17
sudah bisa maslah tanggalnya

hanya tinymce nya dengan exigridnya yang
belum
bermasalah textareanya
Reply
gie says:
February 23, 2013 at 19:04
Luar Biasa !!!

sangat bermanfaat
Reply
ariz says:
February 23, 2013 at 20:25
Bapak saya mau tanya, bagaimana caranya

untuk menambahkan fungsi konrmasi saat kita
klik tombol edit/delete?
Terima kasih atas jawabannya.
Reply

February 24, 2013 at 03:37
bisa ditambahkan di fungsi beforeSubmit,

pada bagian opsi plugin jquery form. dibuat
agar memunculkan konrmasi jika yang
ditekan adalah tombol edit/delete.
Reply
Eva says:
February 25, 2013 at 22:15
Pak, Kalo di exigridnya menampilkan nomor

berurutan dari 1 sampe sekian2, gmn ya pak?
ini source saya coba2
$i=$start;
while ($row = mysql_fetch_row($sql)) {
$i++;
$rows[id] = $row[0];
$datax[cell] = $row;
}
$data[rows] = $datax_r;
exit;
tapi masih bingung pak..?
makasih atas jawabannya
Reply
WizQi says:
February 26, 2013 at 12:11
klo mau buat form ini untuk joomla 2.5 gmn cara
ny om,..??
thx
Reply
umam says:
February 26, 2013 at 17:00
Pak, kasus saya persis dengan punya Pak Andi,

yang seperti ini ;
andy
maaf pak untuk kasus kedua bisa lebih detail

lagi
fungsi json dari bapak kan sprti ini :
function (json) {
$(#legalitas).val(json.legalitas);
$(#nomor).val(json.nomor);
$(#tgl).val(json.tanggl);
$(#bln).val(json.tanggal);
$(#thn).val(json.tanggal);
});
#tgl,#bln,#thn adalah textbox dan combobox
jadi memisahkan (mengexplode ) json.tanggal
bagaimana?
saya mau mengambil tanggal, bulan,tahun dari
json.tanggal tersebut.
mohon bantuannya pak
Itu solusinya seperti gimana ya, Pak? minta

pencerahannya, Pak.
suwun
Reply

March 8, 2013 at 05:05
pake fungsi split() di javascript. coba cek:

http://www.w3schools.com/jsref/jsref_split.as
p
salam
Reply
Wiji says:
March 11, 2013 at 16:25
permisi pak
setelah saya buat dan saya sesuaikan dengan
data base saya
kenapa pesan setelah submit tidak keluar ya pak
begitu juga edit dan delete nya
mohon bantuan ny pak
script nya sudah pernah saya kirim beberapa

hari yang lalu ke email achmatim@gmail.com
Reply

March 11, 2013 at 18:54
sudah saya balas via email. cek lagi ya
Reply
april says:
March 13, 2013 at 11:20
pak saya mau tanya kalo mengubah data dari

dropdown ke database gimana ya ? tapi pilihan
yg sebelumnya kita pilih tuh tampil
jadi datanya diambil dulu ke database lalu
diubah dengan menggunakan dropdown lalu
setelah diubah dimasukkan legi ke database.
contohnya saat saya ingin mengubah jenis
kelamin(menggunakan drop down)
Reply

March 23, 2013 at 09:18
caranya sama saja spt text eld, untuk

mengambil nilai dropdown dgn php gunakan
$_POST, untuk memilih nilai dropdown dari
JQuery gunakan $(#idnya).val(nilainya). Salam
Reply
Pingback: CRUD dengan PHP dan JQuery | Opik

Blog
bayu says:
March 23, 2013 at 08:50
Permisi pak mau bertanya, apakah bisa dalam 1

form terdapat 2 xigrid (2 tabel)
saya sudah coba tapi belum bisa saja nii
hehe
Reply

March 23, 2013 at 09:22
Bisa banget. Tinggal dibedakan ID dari masing2

exigrid
Reply
Obat Kuat Dijamin Bikin Tahan Lama

says:
March 23, 2013 at 13:03
Joss Banget Tutorialnya Mas..
Reply
akbar says:
March 23, 2013 at 21:39
salam pak, saya coba download langsung

scriptnya tanpa ada yang di rubah. tapi alert
variabel $pesan itu ga keluar. kenapa ya?
trims.
salam
Reply
bayu says:
March 24, 2013 at 19:21
Oh ia pak satu lag I, says lag I mencoba

menampilkan data hassil join table, syntax SQL
nya sih sudah bear kalo says test langsung di
MySQL nya, cuma Yang jadi masalah datanya

masih tidak tampil di exigridnya
Reply
ojan says:
April 15, 2013 at 16:08
alhamdulillah, makasih pa achmad udah share

ilmunya..
sekalian mau tanya tahapan untuk memahami
menggunakan ajax.. karena saya sementara
belajar dan masih sulit untuk memahami..
terutama penggunaan ajax dan javascript..
terimakasih
Reply

April 20, 2013 at 10:57
ya baca2 dulu mengenai konsep ajax, trus

banyak2 coba program berhubungan dengan
ajax
Reply
antok says:
May 12, 2013 at 07:18
terima kasih sebelumnya untuk tutorialnya.pak

tapi saya mau nanyak gimana cara pecarian
tersebut menggunakan 1 textbox kemudian hasil
pencarian di tampilkan di text box yang lain,
misalnya user mengetikan kode barang
kemudian jika kode barangnya ketemu maka

ditampikan nama barangnya di tekbox
lainnya,jika tidak ketemu muncul pesan. data
tidak ada
terima kasih
Reply
umar hamdan says:

May 18, 2013 at 11:31
mas kenapa ya ditempt saya grid nya ad

informasi processing,,,please wait
mhon infonya,mkasih.
Reply

May 21, 2013 at 05:56
kemungkinan querynya ada yang salah /

kurang tepat. silahkan dicek, dan boleh share
via email kalo masih kesulitan.
Reply
eko pranoto says:

May 27, 2013 at 10:55
pak kalo ingin menampilkan tabel nya saja

bagaimana ?
terima kasih
Reply

June 1, 2013 at 03:22
ya bisa aja, tinggal buang bagian yang form
Reply
koprilia says:
May 31, 2013 at 15:55
{pesan:Data gagal disimpan Column count

doesnt match value count at row 1,data:
{nim:123456789789,nama:ernawati,angka
tan:2000,kelas:A1,hp:0812222222,emai
l:koprilia@gmail.com,judul:aku,permasalah
an:aku,Input:Input}}
Reply

June 1, 2013 at 03:27
perhatikan perintah insert-nya, jumlah kolom

yg di-insert dgn jumlah kolom di db ga sama.
Reply
Jafar Sidiq says:

May 31, 2013 at 21:37
Saya mengalami masalah pada saat input

data.NIM berapapun yang diinputkan akan
menjadi 2147483647 alias duplocate entry.
Mohon bimbingannya. btw tutorial disini sangat

membantu saya, apalagi dengan penjelasan
yang rinci dan jelas. Terimakasih
Reply

June 1, 2013 at 03:28
silahkan cek tipe eld dari kolom nim di tabel-

nya, apakah sudah bener? trus cek perintah
insert-nya juga.
Reply
andre says:
June 2, 2013 at 21:57
pak kenapa ya koq nama database di ubah g

bisa tampil data yang di input padahal sukses
dan masuk ke database mysql tpi tidak tampil
Reply

June 7, 2013 at 04:26
kalo nama tabel berubah ya di bagian view /

select data harus diubah juga dong.
Reply
koprilia says:
June 4, 2013 at 12:53
mau tanya mas, kalau misal saya udah buat form

input dan database yang sudah jadi, trus untuk
memblok/menolak inputan data yang sama itu
scriptnya gimana mas?
Reply

June 7, 2013 at 04:27
sebelum input, lakukan pemeriksaan (select)

ke database dulu. jika ternyata datanya sudah
ada, ya ditolak. kalo belum ada lanjutkan
proses input.
Reply
Preh Hatmoko says:

July 1, 2013 at 12:00
selamat siang,,
mau tanya pak, saya sudah coba form ini dan
alhamdulillah bisa berjalan lancar, kemudian
saya menambahkan editor tinymce 4.0 proses
input berhasil, tetapi proses doaction (saat data
ditabel klik) pada bagian textarea tinymce tidak
terload? mohon pencerahannya, terima kasih
Reply
Dadot says:
July 3, 2013 at 10:02
Preh Hatmoko Itu karena le js inti dari tinymce

gagal ter-load. Hati-hati, tidak semua
permasalahan efektif ditangani oleh ajax. Coba
cek kembali hasil load saat doaction tinymce,
apakah koding HTML nya sudah benar. Dan
anehnya, disitus ini terutama halaman ini tidak
memakai ajax untuk proses submit komentar,
jadi kalau terjadi kesalahan seperti kesalahan
CAPTCHA harus load ulang laman, kan berat
disisi client? Saran buat moderator, ito posisi
CAPTCHA kok nyempil disebelah gitu posisinya,
coba perbaiki lagi CSS nya min. CMIIW newbie
Reply
Preh Hatmoko says:

July 5, 2013 at 10:20
DADOT Thanks untuk masukannya nnti saya

coba untuk cek lagi kestabilan program, untuk
kasus kemarin alhamdulillah browsing2
ketemu untuk proses doactionnya dan juga
bisa terload kembali di tinymce Keep
coding
Reply
julianm says:
July 8, 2013 at 17:06
Pak Gmna ya saya buat udah jadi tapi waktu

mau nambahin ke desain web yang saya buat
malah input data nya gak mau menyimpan , tapi
waktu gak ngegunain desain malah mau .tolong
ya pak soal nya buat Tugas Akhir saya, terima

kasih
Reply

July 20, 2013 at 01:16
biasanya ada kesalahan pada penulisan code

html atau yg lainnya. silahkan kirim email jika
belum bisa juga.
Reply
diantriah says:
July 24, 2013 at 20:01
pak, saya coba buat ulang tutorial ini, dengan

menambahkan beberapa eld. saat memasukan
data dan berhasil pesannya tidak keluar sebagai
form, dan juga tidak terlihat daftar tabelnya pak..
mohon bantuannya pak, sedang latihan untuk
uas.. terimakasih pak
Reply

July 28, 2013 at 05:41
sudah solved via email
Reply
choir says:
July 25, 2013 at 02:33
pak kalo PHP nya gini
$page = isset($_POST[page]) ? $_POST[page] : 1;

$rp = isset($_POST[rp]) ? $_POST[rp] : 10;
$sortname = isset($_POST[sortname]) ?
$_POST[sortname] : a.kdBarang;
$sortorder = isset($_POST[sortorder]) ?
$_POST[sortorder] : asc;
$query = isset($_POST[query]) ? $_POST[query]
: false;
$qtype = isset($_POST[qtype]) ? $_POST[qtype] :
false;
$usingSQL = true;
function runSQL($rsql) {
include ../inc/koneksi.php;
$result = mysql_query($rsql) or die ($rsql);

return $result;
mysql_close($connect);
}
function countRec($fname,$tname) {
$sql = SELECT count($fname) FROM $tname ;
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)) {
return $row[0];
}
}
$sort = ORDER BY $sortname $sortorder;

$start = (($page-1) * $rp);
$limit = LIMIT $start, $rp;

$where = WHERE a.kdBarang = b.kdBarang and

a.idPegawai = c.idPegawai ;
if ($query) $where = WHERE $qtype LIKE
%.str_replace(,\',$query).% ;
$sql = SELECT a.kdBarang, b.nmBarang,

a.idPegawai, c.nmPegawai, a.harga FROM
hargaJualpeg a, Barang b, Pegawai c $where
$sort $limit;
$result = runSQL($sql);
$total = countRec(a.kdBarang,hargaJualpeg a,
Barang b, Pegawai c $where);
header(Content-type: application/json);
$responce->page = $page;
$responce->total = $total;
$responce->records = $total;
$i=$start;
while($line = mysql_fetch_array($result)){
$i++;
$responce->rows[$i][id] = $line[kdBarang];
$responce->rows[$i][cell] =
array($line[kdBarang],$line[nmBarang],$line[
idPegawai],$line[nmPegawai],$line[harga]);
}
echo json_encode($responce);
Tombol Searchnya Kenapa Error ya?
Reply

July 28, 2013 at 05:50
silahkan kirim source code lengkapnya via

email agar bisa dianalisis
Reply
azisazka says:
July 26, 2013 at 19:22
pak bro saya punya data base tentang

penjualann yang isinya
-tanggal
-nama barang
-harga
-hpp
-rugi laba
saya ingin menampilkan jumlah rugi laba, lap
menurut nama barang, laporan perperiode
barang yang terjual, dan total rugi laba per
periode(hari,minggu, bulan,) tolong scripnya
terimakasih jika berkenan membantu
Reply

July 28, 2013 at 05:53
busyet, ini mah bikin semua laporan

penjualan nih. pada dasarnya semua laporan
hanya masalah query select yang berbeda.
pelajari query select di mysql.
Reply
Stevannus says:
July 26, 2013 at 20:43
baik banget bapaknya

kereeenn
Reply
anwar says:
August 12, 2013 at 17:51
mantab pak.
tolong pak posting.. tutorial2.. yang lebih ok

pakk.. tolong pak.. link ke gmail sya setiap ada
tutorial baru
makasih . salam
Reply
rillo says:
August 22, 2013 at 12:57
pak bagaimana jika koneksinya dengan mssql?

tolong dijawab secepatnya ya pak, makasih
Reply
Ari says:
mau tanya. bagaimana caranya jika mau dikasih

fungsi untuk pindah halaman dengan javascript
pada tabel gridnya ?
misalnya: function open()

{
open.window(master.php,height:300px,width:30
0px);
}
Reply
jimmy says:
untuk menambahkan tombol cari (search)

bagaimana
Reply
Jama' says:
Pagi pak,, saya baru coba combine source ini ke

dalam source pny saya. Dengan tabel yg
berbeda, masalah yang muncul :
1. Data di Grid tidak muncul,,karena skrip url :
di exigrid belum nyambung.
2. Skrip Simpan berhasil ke database, tapi
message Data Berhasil Di simpan tidak muncul.
3. Javascript untuk tanggal tidak keluar,,mungkin
karena tabrakan sama CSS exigrid.
Mohon penjelasannya pak, terima kasih.

Kalo boleh mau saya kirimkan ke email bapak.
Reply
Ryo says:
October 13, 2013 at 18:42
Makasih pak tutorialnya .. bermanfaat sekali dan

saya sudah coba berhasil
Reply
Dwi W says:
October 28, 2013 at 23:24
Makasih Pak, ud sy coba dan berhasil. Tampilan

kolom sy tambah mjadi 7. Unt kode
mysql_escape_string() sekarang mjadi
mysql_real_escape_string()
Reply
Jualtutorialku.com says:
December 19, 2013 at 14:55
Makasih atas tutorialnya gan, tapi mau tanya ni,

dengan menggunakan tabel yang agan sarankan
itu, apakah kita bisa edit tabelnya sesuai
keinginan kita ?
Reply

December 19, 2013 at 15:38
bisa banget.
Reply
eno says:
December 23, 2013 at 09:31
nice ,tanks
Reply
Ilkomunived says:
March 25, 2014 at 18:02
Terima kasih pak, saya akan coba ini
Reply
#tanya says:
April 3, 2014 at 13:05
mau tanya, kalo edit, input, delete datanya

seperti ms.excell gimana ?
jadi tinggal klik 2x eld tabel nya bisa edit,
delete, update data di situ langsung, tanpa klik
tombol input, update, delete
#terima-kasih
Reply
Dede Irvan S says:

May 3, 2014 at 09:00
terimakasih pa. ada postingan tntang

Perancangan dan Pemodelan untuk WEB gk pa?
Reply
mardhie says:
June 25, 2014 at 20:35
klu bikin website seperti

http://www.traveloka.com itu menggunakan
komponen JQuery apa aja ya ? ada yg bisa
bantu utorialnya ?
Reply
sulton says:
August 19, 2014 at 14:35
Mas sy mau tanya, ko exigrid nya ga bsa

nampilin data ya loading terus mas, pdahal
coding nya udh sama persis, kira-kira
ksalahannya dimana ya mas,mohn
pencerahannya trimakasih
Reply
topan says:
dear mas Achmad Solichin,
saat ini saya sedang belajar CRUD seperti tutorial

diatas.
saya memiliki masalah untuk pindah
halaman/form dengan cara menekan
button/submit
kira2 bisa bantu script nya atau tidak ya mas
Rgrds,
Topan
Reply
Muly says:
October 17, 2014 at 16:57
Terima Kasih sudah membagi ilmu yang sangat

bermanfaat untuk para pemula
Reply
iink says:
October 24, 2014 at 08:55
assalamualaikum
bpk jka pgen harga suatu brg muncul sndri
ketika mengklick brg tesebut gmn crany?
syukron
Reply
idham kholid says:

January 29, 2015 at 15:02
Bang,
Di Tabel Fleksi grid nya g mau tampil kenapa
ya,,?
padahal simpan udah bisa
Reply
Fikar says:
Mas , gimana caranya ,kalo di tambah pagination

di bawahnya
Reply
emoundt says:
gan sipzzzz
gan tolong post tentang cara membuat cms
sendiri gan please thankz (Y)
Reply
mia says:
May 11, 2015 at 19:23
Assalamualaikum mas, maaf saya mau tanya,

kan itu nim harus diisi dengan angka, bagaimana
caranya agar bisa diisi dengan karakter lain?
saya nyoba digit=false, tapi pas input , data yang
masuk angka 0, padahal saya input huruf ,
tolong di jawab yah,
penjelasannya sangat membantu
Reply
#harlen says:
May 19, 2015 at 13:31
permisi pak solichin..

saya mau nanya ni..
gmna sih membuat tabel temporer atau tabel
sementara di php..
tidak menggunakan database..
dan ketika button kirim di klik datanya terkirim

ke database
mohon bantuannya pak..
terimah kasih
Reply
khairil says:
July 19, 2015 at 10:57
pak, mau nanya kalau kasusnya mengupload le

atau gambar itu gimana ya ?
apa perlu edit juga di jquery nya ?
Reply

July 26, 2015 at 02:10
Upload gambar bisa pake plugin jquery

seperti http://www.uploadify.com/
Reply
Khairil says:
July 27, 2015 at 10:06
oh ya pak, saya kan programnya menggunakan

pdo.
kira2 bagian mana saja yang harus saya ubah
programnya pak
selain koneksi database ?
Reply

July 31, 2015 at 07:02
Yang jelas bagian yang ada query ke

databasenya.
Reply
great saiyaman says:

August 17, 2015 at 15:16
Terimakasih Pak Solichin Tutorialnya,

Saya mau tanya, mulai line 139 sampai 228 saya
mau pindahkan di le lain dlm bntuk js.
misal saya simpan di
libs/exigrid/js/nama_le_baru.js. lalu saya
hapus line 138 229 diubah dengan :
Kenapa ya setelah dipanggil tablenya dgn code

table gk berhasil muncul. Mohon penjelasannya
Reply

August 18, 2015 at 02:41
seharusnya ga masalah kalo perintah

javascript itu mau dipisah ke dalam le js
tersendiri. pastikan le js di-include setelah
library jquery -nya ya.
Reply
great saiyaman says:

August 21, 2015 at 14:09
Siap Pak ternyata bisa,.

tapi exigridnya muter2 ya, saya coba dgn
struktur database berbeda..
bagaimana ya cara debuging nya biar bisa
tau code nya mengambil variable mana.?
Reply
ADRIAN KURNIAWAN says:

October 30, 2015 at 20:50
selamat malam pak,

tutorialnya sangat bermanfaat pak, terutama
bagi saya anak kuliah yg masih awam. Semoga
perbuatan baiknya membawa berkah
saya ada nemu problem nih pak,

program befungsi dengan baik, tetapi bila saya
saya include di halaman depan (kulitnya suatu
menu) maka hanya loading saja tada tidak
muncul,
D:\xampp\xampp\htdocs\PROPERTY2\crud <
kulitnya untuk memanggil isi yg berada pada
folder pages, dimana kulitnya ini terdiri dari
header, sider dan footer.. isi utamanya saya
include dari folder pages
D:\xampp\xampp\htdocs\PROPERTY2\pages\KO
NTRAKTOR\crud < nah ini isinya ada
dihalaman pages
kemungkinan jquery yg bentrok. padahal sudah

saya pakai jquer noConict tetap saja tidak bisa..
mohon sarannya.. thanks
Reply
abdi says:
November 11, 2015 at 11:13
Selamat siang pak
Salam kenal saya abdi, saya baru saja membaca

tentang entri edit tampil dengan php dan ajaz
jquery, ini adalah program standart yang sudah
saya ketahui, saya sangat penasaran sekali
bagaimana cara menyimpan(upload) le gambar
dan setelah berhasil disimpan, selanjutnya
menampilkan link dimana gambar tersebut saya
simpan.
Untuk upload le saya menggunakan
move_uploaded_le, nah cara untuk
menampilkan link menggunakan apa ya pak?
Mohon pencerahannya, terima kasih.
Reply
asep says:
January 7, 2016 at 16:39
saya coba gabung dengan session start, tapi

tidak berhasil, tidak ada data yang tampil di
eksigridnya? mohon sarannya pak? trims
Reply
Irawan M says:
April 14, 2016 at 11:45
Makasih banyak atas panduannya,

bermanfaat sekali, Jazakallah
Reply
sam says:
May 30, 2016 at 18:35
terima kasih pak, semoga berkah ilmunya
Reply
baim says:
June 1, 2016 at 19:45
gan, databases nya ngak ada ?
Reply
nur says:
July 9, 2016 at 19:56
Assalamuakaikum. Makasih gan. Tutornya saya

crosscheck dlu ya. Hatur nuhun
Wassalmualaikum.
Reply
Arief says:
July 11, 2016 at 15:39
Artikel bagus nih sudah lama mudah2an masih

di pantau oleh admin.
saya mau tanya dikit aja saya gak pahan magsud

kode yg ini
(isset($_GET[action]) && $_GET[action] ==

getdata)
itu magsudnya bagian control action yang mana

yang di klik ya ?
thanks
Reply

July 15, 2016 at 04:11
maksud dari bagian itu adl untuk me-load

seluruh data ke tabel, proses dilakukan dg ajax.
perhatikan juga baris ke 179.
Reply
Arief says:
July 15, 2016 at 08:32
Jadi magsudnya opsi itu di pakai untuk meload

semua data yang akan di tampilkan utuh di tabel
exigid supaya bisa di paging, sorting dll dan
meload data di lakukan via ajax dengan magsud
supaya page tidak refress ya?
wah selain artikel bagus juga masih di pantau

juga hehe,
thanks admin
Reply
badria says:
artikel tutorialnya bagus pak, jelas dan detail.

tapi sy punya pertanyaan, sy udh ikutin langkah
diatas,
tapi data.n tidak tersimpan di database, selain
itu exigrid.n jg tidak tampil.
mhn pencerahannya kira2 dmna letak
kesalahan.n?
Reply

berarti tutorial belum diikuti / dipahami

dengan baik silahkan periksa kembali,
mungkin ada langkah yg kelewat
Reply
LEAVE A REPLY
Your email address will not be published.

Required elds are marked *
Comment
Name *
Email *
Website
I'm not a robot

reCAPTCHA
Privacy - Terms
Post Comment
Powered by WordPress and Tortuga.

Entri, Edit, Delete, Tampil Dengan PHP Dan Ajax JQuery - Achmatim

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Entri, Edit, Delete, Tampil Dengan PHP Dan Ajax JQuery - Achmatim

Uploaded by

Copyright:

Available Formats

3/11/2016 Entri,Edit,Delete,TampildenganPHPdanAjaxJQueryAchmatim.

HOME ABOUT ME BUKU GRATIS DOWNLOADS MATERI KULIAH

ENTRI, EDIT, DELETE, TAMPIL Masukkan

DENGAN PHP DAN AJAX JQUERY Alamat Email

Dalam setiap kesempatan membahas mengenai

dalam aplikasi berbasis web. Aplikasi web yang TAGS

keempat proses tersebut. Sebagai contoh dalam CSS DATABASE

proses update status di situs jejaring sosial DOWNLOAD

Anda yang belum pernah mencoba program MATERI MENU

serupa. Saya juga pernah mempublikasikan MOTIVASI MYSQL

artikel entri, edit, delete dan tampil PHP yang OTHERS

memanfaatkan Macromedia Dreamweaver. PERNAKPERNIK

PTI PUISI PW2

Lalu apa yang akan dipelajari di dalam REKOMENDASI

tutorial ini? ROXY SQL

TUGAS & UJIAN

Apa yang disampaikan dalam tutorial ini kurang TUTORIAL UJIAN

lebih sama dengan tutorial saya sebelumnya, ULANG TAHUN

yaitu proses entri, edit, delete dan tampil data WEB

ingin menambahkan konsep Ajax (Asyncronous WORDPRESS

Javascript and XML) dengan menggunakan

1. Siapkan Database dan Tabel Bahasa C

database dan tabel di atas. Perintah dapat ditulis MySQL untuk

Code block (Bag 2) (8982

2. Buat Halaman beserta Form Inputan

inputan untuk tabel mahasiswa di atas. Bentuk 0 5

dan tampilan dari form inputan dapat 0

Karena program dirancang untuk berhubungan

harus dikoneksikan antara PHP dengan MySQL.

Berikut ini potongan program untuk melakukan

4. Program Input ke MySQL

Setelah program PHP terkoneksi dengan MySQL,

website saya. Setelah data dari form diambil,

Berikut ini sedikit penjelasan dari potongan

Baris 2: memastikan tombol Input ditekan

terbentuk (jika user menekan suatu tombol

Pada tahap ini, sebaiknya Anda coba program

5. Sertakan Library JQuery dan Plugin

Hingga langkah ke-4 di atas, kita masih belum

asynchronous, suatu proses bisa saja berjalan di

Untuk menyertakan library JQuery dan JQuery

Dan setelah library disertakan, kita dapat

mengaktifkan proses Ajax di dalam form.

Berikut ini program lengkap yang sudah

Setelah library JQuery dan plugin JQuery Form

diterapkan plugin JQuery Form pada form

Gambar 2: Proses Entri setelah ditambahkan

Pada saat form disubmit (ditekan tombol Input),

pesan dalam bentuk JSON ke javascript.

6. Validasi dengan plugin JQuery

Seperti sudah pernah dijelaskan dan

Berikut ini source code program setelah

Untuk menerapkan validasi di form inputan,

hingga 79. Dan untuk mengintegrasikan plugin

6. Tampilkan Data dalam Bentuk Tabel

Untuk menampilkan data pada dasarnya banyak

Untuk menampilkan data dengan Flexigrid

diperlukan, (2) siapkan obyek tabel dengan tag

Pada langkah pertama, kita sertakan library yang

Langkah kedua, siapkan obyek tabel beserta

Langkah ketiga adalah mengatur kolom-kolom

saja kita lihat contoh potongan program di

Sedikit penjelasan mengenai potongan program

Baris 2: Pemanggilan library exigrid diawali