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

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 dalam aplikasi berbasis web. Aplikasi web yang sederhana hingga kompleks selalu berkaitan dengannya. Keempat proses tersebut adalah proses entri (input), ubah (edit), hapus (delete) dan tampil (show). Istilah lain dari keempat proses tersebut adalah CRUD (Create, Read, Update and Delete). Jadi kuasailah keempatnya maka selebihnya hanya variasi dari keempat proses tersebut. Sebagai contoh dalam proses update status di situs jejaring sosial facebook merupakan proses Entri atau Insert ke database, saat memperbaiki foto profil adalah proses edit (update) dan saat kita menghapus salah satu teman aalah proses delete.

Mengingat pentingnya proses tersebut, saya memberikan contoh khusus di bab terakhir dari buku Pemrograman Web dengan PHP & MySQL berupa proses dasar entri, edit, delete dan tampil dengan PHP dan MySQL. Sebelum melanjutkan tutorial ini, tidak ada salahnya jika Anda mencoba contoh tersebut, terutama bagi Anda yang belum pernah mencoba program serupa. Saya juga pernah mempublikasikan artikel entri, edit, delete dan tampil PHP yang memanfaatkan Macromedia Dreamweaver.


Lalu apa yang akan dipelajari di dalam tutorial ini?

Apa yang disampaikan dalam tutorial ini kurang lebih sama dengan tutorial saya sebelumnya, yaitu proses entri, edit, delete dan tampil data dengan PHP dan MySQL. Namun kali ini, saya ingin menambahkan konsep Ajax (Asyncronous Javascript and XML) dengan menggunakan library JQuery. Dengan konsep Ajax, maka proses entri, edit, delete dan tampil dapat dilakukan dengan lebih menarik.

Tujuan atau Rancangan Akhir Program

Untuk memberikan gambaran yang lebih jelas mengenai hasil akhir contoh program yang dibahas dalam tutorial ini, berikut beberapa hal penting:

  • Untuk memudahkan pemahaman, program hanya menangani 1 (satu) tabel MySQL yaitu tabel “mahasiswa” yang terdiri dari field NIM, NAMA dan ALAMAT.
  • Program hanya terdiri dari 1 (satu) file utama (tidak termasuk library yang digunakan)
  • Program menggunakan library Ajax JQuery.
  • Untuk penanganan form, digunakan plugin JQuery Form.
  • Untuk validasi form, digunakan plugin JQuery Validation.
  • Untuk menampilkan data dalam bentuk tabel, digunakan plugin JQuery Flexigrid
  • Proses EDIT dan DELETE dilakukan dengan memilih dan klik pada data yang akan diedit/didelete.
Untuk memberikan gambaran yang lebih jelas, silahkan lihat demo program terlebih dahulu.

Langsung aja kita mulai step by step untuk membuatnya.

1. Siapkan Database dan Tabel

Langkah pertama tentu persiapkan database dan tabel yang diperlukan. Seperti sudah disebutkan di rancangan akhir program di atas bahwa kita akan menyederhanakan struktur data yang akan dibuat. Dalam hal ini, kita akan membuat database dengan nama “demo” dan tabel dengan nama “mahasiswa”. Berikut ini struktur dari tabel mahasiswa yang akan dibuat:

FIELD TYPE LENGTH DESCRIPTION
nim VARCHAR 10 NIM Mahasiswa
nama VARCHAR 30 NAMA Mahasiswa
alamat TEXT Alamat Mahasiswa

Dan berikut ini perintah SQL untuk membuat database dan tabel di atas. Perintah dapat ditulis dan dijalankan di MySQLclient kesukaan Anda.

  1. CREATE DATABASE demo;
  2. CREATE TABLE mahasiswa (
  3. nim VARCHAR(10) NOT NULL,
  4. nama VARCHAR(30) NOT NULL,
  5. alamat TEXT,
  6. PRIMARY KEY(nim)
  7. );

2. Buat Halaman beserta Form Inputan

Bagi Anda yang sudah belajar perintah-perintah HTML (Hypertext Mark up Language) tentunya tidak akan kesulitan dalam membuat form inputan untuk tabel mahasiswa di atas. Bentuk dan tampilan dari form inputan dapat disesuaikan sesuai keinginan Anda, namun yang 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 awal yang menampilkan form inputan data mahasiswa. Simpan program berikut ini sebagai file “index.php”.

  1. <html>
  2. <head>
  3. <title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
  4. <style type="text/css">
  5. .labelfrm {
  6. display:block;
  7. font-size:small;
  8. margin-top:5px;
  9. }
  10. .error {
  11. font-size:small;
  12. color:red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <h1>Data Mahasiswa</h1>
  18. <form action="" method="post" id="frm">
  19. <label for="nim" class="labelfrm">NIM: </label>
  20. <input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
  21. <label for="nama" class="labelfrm">NAMA: </label>
  22. <input type="text" name="nama" id="nama" size="30" class="required"/>
  23.  
  24. <label for="alamat" class="labelfrm">ALAMAT: </label>
  25. <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
  26.  
  27. <label for="submit" class="labelfrm">&nbsp;</label>
  28. <input type="submit" name="Input" value="Input" id="input"/>
  29. <input type="submit" name="Edit" value="Edit" id="edit"/>
  30. <input type="submit" name="Delete" value="Delete" id="delete"/>
  31. <input type="reset" name="Clear" value="Clear" id="clear"/>
  32. </form>
  33. </body>
  34. </html>

Pada program di atas terlihat bahwa terdapat satu buah form dengan id frm, yang memiliki 3 (tiga) buah inputan text dan textarea serta 4 (empat) buah tombol yaitu Input, Edit, Delete 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).

Berikut ini tampilan dari program sederhana di atas.

Gambar 1: Tampilan Form Inputan Data Mahasiswa

 

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 file index.phpyang telah dibuat di langkah sebelumnya atau dapat juga dibuat di file khusus dan di-include-kan.

  1. <?php
  2. /* koneksi ke db */
  3. mysql_connect("localhost", "root", "qwerty") or die(mysql_error());
  4. /* akhir koneksi db */
  5. ?>

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.

  1. /* penanganan form */
  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. //input ke db
  8. $query = sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
  9. );
  10. $sql = mysql_query($query);
  11. if ($sql) {
  12. echo "Data berhasil disimpan";
  13. } else {
  14. echo "Data gagal disimpan ";
  15. echo mysql_error();
  16. }
  17. }
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: notifikasi 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).

  1. <script type="text/javascript" src="libs/jquery.min.js"></script>
  2. <script type="text/javascript" src="libs/jquery.form.js"></script>

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.

  1. <?php
  2. /* koneksi ke db */
  3. mysql_connect("localhost", "root", "qwerty") or die(mysql_error());
  4. /* akhir koneksi db */
  5.  
  6. /* penanganan form */
  7. if (isset($_POST['Input'])) {
  8. $nim = strip_tags($_POST['nim']);
  9. $nama = strip_tags($_POST['nama']);
  10. $alamat = strip_tags($_POST['alamat']);
  11.  
  12. //input ke db
  13. $query= sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
  14. );
  15. $sql = mysql_query($query);
  16. $pesan = "";
  17. if ($sql) {
  18. $pesan = "Data berhasil disimpan";
  19. } else {
  20. $pesan = "Data gagal disimpan ";
  21. $pesan .= mysql_error();
  22. }
  23. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  24. echo json_encode($response);
  25. }
  26. ?>
  27. <html>
  28. <head>
  29. <title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
  30. <style type="text/css">
  31. .labelfrm {
  32. display:block;
  33. font-size:small;
  34. margin-top:5px;
  35. }
  36. .error {
  37. font-size:small;
  38. color:red;
  39. }
  40. </style>
  41. <script type="text/javascript" src="libs/jquery.min.js"></script>
  42. <script type="text/javascript" src="libs/jquery.form.js"></script>
  43. <script type="text/javascript">
  44. $(document).ready(function() {
  45. //aktifkan ajax di form
  46. var options = {
  47. success : showResponse,
  48. resetForm : true,
  49. clearForm : true,
  50. dataType : 'json'
  51. };
  52. $('#frm').ajaxForm(options);
  53.  
  54. });
  55. function showResponse(responseText, statusText) {
  56. var data = responseText['data'];
  57. var pesan = responseText['pesan'];
  58. alert(pesan);
  59. }
  60. </script>
  61. </head>
  62. <body>
  63. <h1>Data Mahasiswa</h1>
  64. <form action="" method="post" id="frm">
  65. <label for="nim" class="labelfrm">NIM: </label>
  66. <input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
  67.  
  68. <label for="nama" class="labelfrm">NAMA: </label>
  69. <input type="text" name="nama" id="nama" size="30" class="required"/>
  70.  
  71. <label for="alamat" class="labelfrm">ALAMAT: </label>
  72. <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
  73.  
  74. <label for="submit" class="labelfrm">&nbsp;</label>
  75. <input type="submit" name="Input" value="Input" id="input"/>
  76. <input type="submit" name="Edit" value="Edit" id="edit"/>
  77. <input type="submit" name="Delete" value="Delete" id="delete"/>
  78. <input type="reset" name="Clear" value="Clear" id="clear"/>
  79. </form>
  80. </body>
  81. </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 didefinisikan 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
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 field 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.

  1. <?php
  2. /* koneksi ke db */
  3. mysql_connect("localhost", "root", "qwerty") or die(mysql_error());
  4. /* akhir koneksi db */
  5.  
  6. /* penanganan form */
  7. if (isset($_POST['Input'])) {
  8. $nim = strip_tags($_POST['nim']);
  9. $nama = strip_tags($_POST['nama']);
  10. $alamat = strip_tags($_POST['alamat']);
  11.  
  12. //input ke db
  13. $query= sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
  14. );
  15. $sql = mysql_query($query);
  16. $pesan = "";
  17. if ($sql) {
  18. $pesan = "Data berhasil disimpan";
  19. } else {
  20. $pesan = "Data gagal disimpan ";
  21. $pesan .= mysql_error();
  22. }
  23. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  24. echo json_encode($response);
  25. }
  26. ?>
  27. <html>
  28. <head>
  29. <title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
  30. <style type="text/css">
  31. .labelfrm {
  32. display:block;
  33. font-size:small;
  34. margin-top:5px;
  35. }
  36. .error {
  37. font-size:small;
  38. color:red;
  39. }
  40. </style>
  41. <script type="text/javascript" src="libs/jquery.min.js"></script>
  42. <script type="text/javascript" src="libs/jquery.form.js"></script>
  43. <script type="text/javascript" src="libs/jquery.validate.min.js"></script>
  44. <script type="text/javascript">
  45. $(document).ready(function() {
  46. //aktifkan ajax di form
  47. var options = {
  48. success : showResponse,
  49. beforeSubmit: function(){
  50. return $("#frm").valid();
  51. },
  52. resetForm : true,
  53. clearForm : true,
  54. dataType : 'json'
  55. };
  56. $('#frm').ajaxForm(options);
  57.  
  58. //validasi form dgn jquery validate
  59. $('#frm').validate({
  60. rules: {
  61. nim : {
  62. digits: true,
  63. minlength:10,
  64. maxlength:10
  65. }
  66. },
  67. messages: {
  68. nim: {
  69. required: "Kolom nim harus diisi",
  70. minlength: "Kolom nim harus terdiri dari 10 digit",
  71. maxlength: "Kolom nim harus terdiri dari 10 digit",
  72. digits: "NIM harus berupa angka"
  73. },
  74. nama: {
  75. required: "Nama harus diisi dengan benar"
  76. }
  77. }
  78. });
  79. });
  80. function showResponse(responseText, statusText) {
  81. var data = responseText['data'];
  82. var pesan = responseText['pesan'];
  83. alert(pesan);
  84. }
  85. </script>
  86. </head>
  87. <body>
  88. <h1>Data Mahasiswa</h1>
  89. <form action="" method="post" id="frm">
  90. <label for="nim" class="labelfrm">NIM: </label>
  91. <input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
  92.  
  93. <label for="nama" class="labelfrm">NAMA: </label>
  94. <input type="text" name="nama" id="nama" size="30" class="required"/>
  95.  
  96. <label for="alamat" class="labelfrm">ALAMAT: </label>
  97. <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
  98.  
  99. <label for="submit" class="labelfrm">&nbsp;</label>
  100. <input type="submit" name="Input" value="Input" id="input"/>
  101. <input type="submit" name="Edit" value="Edit" id="edit"/>
  102. <input type="submit" name="Delete" value="Delete" id="delete"/>
  103. <input type="reset" name="Clear" value="Clear" id="clear"/>
  104. </form>
  105. </body>
  106. </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 fleksibilitas 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 fleksibel 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-fly, 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 file CSS yang akan mengatur tampilan tabel flexigrid (baris 1) dan terdapat library utama flexigrid (baris 3). Selain itu, pada versi terakhir flexigrid harus disertakan plugin JQuery Cookie buatan Klaus Hartl (baris 2).

  1. <link rel="stylesheet" type="text/css" href="libs/flexigrid/css/flexigrid.css">
  2. <script type="text/javascript" src="libs/jquery.cookie.js"></script>
  3. <script type="text/javascript" src="libs/flexigrid/js/flexigrid.js"></script>

Langkah kedua, siapkan obyek tabel beserta atribut id-nya pada tempat dimana kita akan menampilkan data. Gunakan perintah sederhana sebagai berikut:

  1. <table id="flex1" style="display:none"></table>

Langkah ketiga adalah mengatur kolom-kolom yang akan ditampilkan beserta beberapa opsi atau properties dari tabel flexigrid. Langsung saja kita lihat contoh potongan program di bawah ini.

  1. //flexigrid handling
  2. $('#flex1').flexigrid
  3. (
  4. {
  5. url: 'index.php?action=getdata',
  6. dataType: 'json',
  7.  
  8. colModel : [
  9. {display: 'NIM', name : 'nim', width : 100, sortable : true, align: 'left'},
  10. {display: 'Nama', name : 'nama', width : 200, sortable : true, align: 'left'},
  11. {display: 'Alamat', name : 'alamat', width : 400, sortable : true, align: 'left'}
  12. ],
  13. searchitems : [
  14. {display: 'NIM', name : 'nim'},
  15. {display: 'Nama', name : 'nama', isdefault: true}
  16. ],
  17.  
  18. sortname: 'nama', //default urut kolom nama
  19. sortorder: 'asc', //default urut ascending
  20. usepager: true, //tambahkan paging
  21. title: 'Data Mahasiswa', //judul flexigrid
  22. useRp: true,
  23. rp: 15,
  24. showTableToggleBtn: true,
  25. width: 700, //lebar tabel
  26. height: 400 //tinggi tabel
  27. }
  28. );

Sedikit penjelasan mengenai potongan program di atas.

  • Baris 2: Pemanggilan library flexigrid diawali dengan memanggil fungsi flexigrid() dan diterapkan pada tabel dengan id #flex1 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 fitur 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 flexigrid 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 flexigrid dan dikirimkan ke library flexigrid untuk ditampilkan. Dalam contoh ini, data diformat dalam bentuk JSON.

Berikut ini potongan program PHP untuk menangani data flexigrid.

  1. if (isset($_GET['action']) && $_GET['action'] == 'getdata') {
  2. $page = (isset($_POST['page']))?$_POST['page']: 1;
  3. $rp = (isset($_POST['rp']))?$_POST['rp'] : 10;
  4. $sortname = (isset($_POST['sortname']))? $_POST['sortname'] : 'nama';
  5. $sortorder = (isset($_POST['sortorder']))? $_POST['sortorder'] : 'asc';
  6.  
  7. $sort = "ORDER BY $sortname $sortorder";
  8. $start = (($page-1) * $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 $qtype LIKE '%$query%' ";
  16.  
  17. $query = "SELECT nim, nama, alamat ";
  18. $query_from =" FROM mahasiswa ";
  19.  
  20. $query .= $query_from . " $where $sort $limit";
  21.  
  22. $query_total = "SELECT COUNT(*)". $query_from." ".$where;
  23.  
  24. $sql = mysql_query($query) or die($query);
  25. $sql_total = mysql_query($query_total) or die($query_total);
  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. echo json_encode($data);
  38. }

Gambar 3 berikut ini tampilan halaman setelah ditambahkan tabel flexigrid.

Tampilan Flexigrid
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 flexigrid 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 flexigrid.

Untuk menambahkan action saat baris flexigrid diklik, cukup menambahkan atribut ‘process’ pada pendefinisian colModel. Perhatikan contoh sebagai berikut dimana doaction merupakan fungsi javascript yang akan dipanggil saat suatu baris diklik / dipilih.

  1. colModel : [
  2. {display: 'NIM', name : 'nim', width : 100, sortable : true, align: 'left', process: doaction},
  3. {display: 'Nama', name : 'nama', width : 200, sortable : true, align: 'left', process: doaction},
  4. {display: 'Alamat', name : 'alamat', width : 400, sortable : true, align: 'left', process: doaction}
  5. ],

Dan berikut ini contoh fungsi doaction yang akan menangani proses saat baris data di flexigrid dipilih.

  1. function doaction( celDiv, id ) {
  2. $( celDiv ).click( function() {
  3. var nim = $(this).parent().parent().children('td').eq(0).text();
  4. $.getJSON ('index.php',{action:'get_mhs',nim:nim}, function (json) {
  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.

  1. if (isset($_GET['action']) && $_GET['action'] == 'get_mhs') {
  2. $nim = $_GET['nim'];
  3. $query = "SELECT * FROM mahasiswa WHERE nim='$nim'";
  4. $sql = mysql_query($query);
  5. $row = mysql_fetch_assoc($sql);
  6. echo json_encode ($row);
  7. }

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 mendefinisikan potongan program PHP untuk EDIT dan DELETE. Lihat potongan program di bawah ini.

  1. if (isset($_POST['Edit'])) {
  2. $nim = strip_tags($_POST['nim']);
  3. $nama = strip_tags($_POST['nama']);
  4. $alamat = strip_tags($_POST['alamat']);
  5.  
  6. //update db
  7. $query = sprintf("UPDATE mahasiswa SET nama='%s', alamat='%s' WHERE nim='%s'",
  8. );
  9. $sql = mysql_query($query);
  10. $pesan = "";
  11. if ($sql) {
  12. $pesan = "Data berhasil disimpan";
  13. } else {
  14. $pesan = "Data gagal disimpan ";
  15. $pesan .= mysql_error();
  16. }
  17. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  18. echo json_encode($response);
  19. } else if (isset($_POST['Delete'])) {
  20. $nim = strip_tags($_POST['nim']);
  21.  
  22. //delete data
  23. $query = sprintf("DELETE FROM mahasiswa WHERE nim='%s'",
  24. );
  25. $sql = mysql_query($query);
  26. $pesan = "";
  27. if ($sql) {
  28. $pesan = "Data berhasil dihapus";
  29. } else {
  30. $pesan = "Data gagal dihapus ";
  31. $pesan .= mysql_error();
  32. }
  33. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  34. echo json_encode($response);
  35. }

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.

  1. <?php
  2. /* koneksi ke db */
  3. mysql_connect("localhost", "root", "qwerty") or die(mysql_error());
  4. /* akhir koneksi db */
  5.  
  6. /* penanganan form */
  7. if (isset($_POST['Input'])) {
  8. $nim = strip_tags($_POST['nim']);
  9. $nama = strip_tags($_POST['nama']);
  10. $alamat = strip_tags($_POST['alamat']);
  11.  
  12. //input ke db
  13. $query = sprintf("INSERT INTO mahasiswa VALUES('%s', '%s', '%s')",
  14. );
  15. $sql = mysql_query($query);
  16. $pesan = "";
  17. if ($sql) {
  18. $pesan = "Data berhasil disimpan";
  19. } else {
  20. $pesan = "Data gagal disimpan ";
  21. $pesan .= mysql_error();
  22. }
  23. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  24. echo json_encode($response);
  25. } else if (isset($_POST['Edit'])) {
  26. $nim = strip_tags($_POST['nim']);
  27. $nama = strip_tags($_POST['nama']);
  28. $alamat = strip_tags($_POST['alamat']);
  29.  
  30. //update data
  31. $query = sprintf("UPDATE mahasiswa SET nama='%s', alamat='%s' WHERE nim='%s'",
  32. );
  33. $sql = mysql_query($query);
  34. $pesan = "";
  35. if ($sql) {
  36. $pesan = "Data berhasil disimpan";
  37. } else {
  38. $pesan = "Data gagal disimpan ";
  39. $pesan .= mysql_error();
  40. }
  41. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  42. echo json_encode($response);
  43. } else if (isset($_POST['Delete'])) {
  44. $nim = strip_tags($_POST['nim']);
  45.  
  46. //delete data
  47. $query = sprintf("DELETE FROM mahasiswa WHERE nim='%s'",
  48. );
  49. $sql = mysql_query($query);
  50. $pesan = "";
  51. if ($sql) {
  52. $pesan = "Data berhasil dihapus";
  53. } else {
  54. $pesan = "Data gagal dihapus ";
  55. $pesan .= mysql_error();
  56. }
  57. $response = array('pesan'=>$pesan, 'data'=>$_POST);
  58. echo json_encode($response);
  59. } else if (isset($_GET['action']) && $_GET['action'] == 'getdata') {
  60.  
  61. $page = (isset($_POST['page']))?$_POST['page']: 1;
  62. $rp = (isset($_POST['rp']))?$_POST['rp'] : 10;
  63. $sortname = (isset($_POST['sortname']))? $_POST['sortname'] : 'nama';
  64. $sortorder = (isset($_POST['sortorder']))? $_POST['sortorder'] : 'asc';
  65.  
  66. $sort = "ORDER BY $sortname $sortorder";
  67. $start = (($page-1) * $rp);
  68. $limit = "LIMIT $start, $rp";
  69.  
  70. $query = (isset($_POST['query']))? $_POST['query'] : '';
  71. $qtype = (isset($_POST['qtype']))? $_POST['qtype'] : '';
  72.  
  73. $where = "";
  74. if ($query) $where .= "WHERE $qtype LIKE '%$query%' ";
  75.  
  76. $query = "SELECT nim, nama, alamat ";
  77. $query_from =" FROM mahasiswa ";
  78.  
  79. $query .= $query_from . " $where $sort $limit";
  80.  
  81. $query_total = "SELECT COUNT(*)". $query_from." ".$where;
  82.  
  83. $sql = mysql_query($query) or die($query);
  84. $sql_total = mysql_query($query_total) or die($query_total);
  85. $total = mysql_fetch_row($sql_total);
  86. $data = $_POST;
  87. $data['total'] = $total[0];
  88. $datax = array();
  89. $datax_r = array();
  90. while ($row = mysql_fetch_row($sql)) {
  91. $rows['id'] = $row[0];
  92. $datax['cell'] = $row;
  93. array_push($datax_r, $datax);
  94. }
  95. $data['rows'] = $datax_r;
  96. echo json_encode($data);
  97. } else if (isset($_GET['action']) && $_GET['action'] == 'get_mhs') {
  98. $nim = $_GET['nim'];
  99. $query = "SELECT * FROM mahasiswa WHERE nim='$nim'";
  100. $sql = mysql_query($query);
  101. $row = mysql_fetch_assoc($sql);
  102. echo json_encode ($row);
  103. }
  104. ?>
  105. <html>
  106. <head>
  107. <title>Entri, Edit, Delete, Tampil Data dengan PHP dan Ajax</title>
  108. <style type="text/css">
  109. .labelfrm {
  110. display:block;
  111. font-size:small;
  112. margin-top:5px;
  113. }
  114. .error {
  115. font-size:small;
  116. color:red;
  117. }
  118. </style>
  119. <script type="text/javascript" src="libs/jquery.min.js"></script>
  120. <script type="text/javascript" src="libs/jquery.form.js"></script>
  121. <script type="text/javascript" src="libs/jquery.validate.min.js"></script>
  122. <link rel="stylesheet" type="text/css" href="libs/flexigrid/css/flexigrid.css">
  123. <script type="text/javascript" src="libs/jquery.cookie.js"></script>
  124. <script type="text/javascript" src="libs/flexigrid/js/flexigrid.js"></script>
  125. <script type="text/javascript">
  126. $(document).ready(function() {
  127. resetForm();
  128. //aktifkan ajax di form
  129. var options = {
  130. success : showResponse,
  131. beforeSubmit: function(){
  132. return $("#frm").valid();
  133. },
  134. resetForm : true,
  135. clearForm : true,
  136. dataType : 'json'
  137. };
  138. $('#frm').ajaxForm(options);
  139.  
  140. //validasi form dgn jquery validate
  141. $('#frm').validate({
  142. rules: {
  143. nim : {
  144. digits: true,
  145. minlength:10,
  146. maxlength:10
  147. }
  148. },
  149. messages: {
  150. nim: {
  151. required: "Kolom nim harus diisi",
  152. minlength: "Kolom nim harus terdiri dari 10 digit",
  153. maxlength: "Kolom nim harus terdiri dari 10 digit",
  154. digits: "NIM harus berupa angka"
  155. },
  156. nama: {
  157. required: "Nama harus diisi dengan benar"
  158. }
  159. }
  160. });
  161.  
  162. //flexigrid handling
  163. $('#flex1').flexigrid
  164. (
  165. {
  166. url: 'index.php?action=getdata',
  167. dataType: 'json',
  168.  
  169. colModel : [
  170. {display: 'NIM', name : 'nim', width : 100, sortable : true, align: 'left', process: doaction},
  171. {display: 'Nama', name : 'nama', width : 200, sortable : true, align: 'left', process: doaction},
  172. {display: 'Alamat', name : 'alamat', width : 400, sortable : true, align: 'left', process: doaction}
  173. ],
  174. searchitems : [
  175. {display: 'NIM', name : 'nim'},
  176. {display: 'Nama', name : 'nama', isdefault: true}
  177. ],
  178.  
  179. sortname: 'nama',
  180. sortorder: 'asc',
  181. usepager: true,
  182. title: 'Data Mahasiswa',
  183. useRp: true,
  184. rp: 15,
  185. width: 700,
  186. height: 400
  187. }
  188. );
  189.  
  190. });
  191. function doaction( celDiv, id ) {
  192. $( celDiv ).click( function() {
  193. var nim = $(this).parent().parent().children('td').eq(0).text();
  194. $.getJSON ('index.php',{action:'get_mhs',nim:nim}, function (json) {
  195. $('#nim').val(json.nim);
  196. $('#nama').val(json.nama);
  197. $('#alamat').val(json.alamat);
  198. });
  199. $('#nim').attr('readonly','readonly');
  200. $('#input').attr('disabled','disabled');
  201. $('#edit, #delete').removeAttr('disabled');
  202. });
  203. }
  204. function showResponse(responseText, statusText) {
  205. var data = responseText['data'];
  206. var pesan = responseText['pesan'];
  207. alert(pesan);
  208. resetForm();
  209. $('#flex1').flexReload();
  210. }
  211. function resetForm() {
  212. $('#input').removeAttr('disabled');
  213. $('#edit, #delete').attr('disabled','disabled');
  214. $('#nim').removeAttr('readonly');
  215. }
  216. </script>
  217. </head>
  218. <body>
  219. <h1>Data Mahasiswa</h1>
  220. <form action="" method="post" id="frm" onReset="resetForm()">
  221. <label for="nim" class="labelfrm">NIM: </label>
  222. <input type="text" name="nim" id="nim" maxlength="10" class="required" size="15"/>
  223.  
  224. <label for="nama" class="labelfrm">NAMA: </label>
  225. <input type="text" name="nama" id="nama" size="30" class="required"/>
  226.  
  227. <label for="alamat" class="labelfrm">ALAMAT: </label>
  228. <textarea name="alamat" id="alamat" cols="40" rows="4" class="required"></textarea>
  229.  
  230. <label for="submit" class="labelfrm">&nbsp;</label>
  231. <input type="submit" name="Input" value="Input" id="input"/>
  232. <input type="submit" name="Edit" value="Edit" id="edit"/>
  233. <input type="submit" name="Delete" value="Delete" id="delete"/>
  234. <input type="reset" name="Clear" value="Clear" id="clear"/>
  235. </form>
  236.  
  237. <table id="flex1" style="display:none"></table>
  238. </body>
  239. </html>

Demo dan Download

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...Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

255 comments

  1. bang lihin, bukannya klo submit masih tetap me-refresh halaman ya? kecuali fungsi insert,update,delete yg php di filenya di pisah, jadi jika disumbit di js merespon file lain tersebut, bukan php dalam satu file? mohon koreksi klo salah, maklum newbie 😀

  2. 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 firebug atau chrome developer tools.

  3. 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

  4. Assalamu’alaikum 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

  5. Assalamualaikum wr.wb

    Dengan izin allah sudah terjawab pak, cuma saya menghilangkan mysql_escape_string($tgllahir) menjadi $tgllahir, atau ada cara lain pak ?

  6. Asaalamu’alaikum 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..

  7. mantap pak tuts nya, saya coba buat ulang tetapi ditambahin beberapa field tabelnya. kenapa ga bisa ya pak? untuk input ke database bisa, tetapi munculin di //flexigrid handling nya ga bisa?
    mohon infonya pak?

    terima kasih banyak sebelumnya 🙂

  8. 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 🙂

  9. 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. 🙂

    1. itu pilihan laki2 ama perempuannya pake radio button ngga ??

      klo pake radio button di scriptnya ditambah if 🙂

  10. 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..

  11. 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,,,

  12. Panggil apa nie ?? Om boleh ya ?? 😀

    Om., nanya donk…
    Ini kan inputan yg hasilnya lgsg ditampilin n’ dimasukin tabel flexgrid itu..
    Nha.. kalo diganti pencarian gitu bisa ngga ya ??
    Jadi di tampilan itu cuma ada text field buat masukin keyword pencarian, ntar hasilnya lgsung ditmpilin di flexgrid 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… 😀

    1. bukannya di flexigrid 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.

  13. 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

  14. 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 filenya di line 42 itu ini >

    $isp = strip_tags($_POST[[‘isp’]);

      1. yes, sudah bisa tapi saat di input kok gak masuk di DB, dan gak muncul di tables bawahnya pak? mohon pencerahannya

  15. mas, gmana ya kalau misalnya flexgrid dimodifikasi 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

  16. pak saya sudah kirim kan source code punya saya ke email yang yahoo dan gmail, saya tunggu pak responenya 😀 terimakasih

  17. 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

  18. maaf pak melanjutkan problem saya yg blm d jawab..knp data saya tidak masuk ke fieldgrid 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 filedgrid???

  19. pa maaf saya mau minta penjelasan sedikit, saya kan mempunyai 2 tabel. tabel yg.
    pertama : kategori dg field”
    kd_kategori
    nm_kategori
    harga

    kedua : kamar dg field”
    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. 🙂

    1. 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. 🙂

  20. Mas Achmad Solichin, terimakasih atas ilmunya.
    Saya mau tanya bagaimana caranya agar query yang tampil difilter
    dari form input dengan metode $_POST, seperti ini:
    ———————————————————————-
    1. filter.html


    ———————————————————————–
    2. flexigrid.php

    ... $d = $_POST['divisi'];
    $t = $_POST['tahun'];

    $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 = " WHERE divisi='$d' AND tahun=$t";
    if ($query) $where .= " WHERE $qtype LIKE '%$query%' ";

    pada $where saya buat filternya. tapi data malah tidak tampil ya? kira2 seharusnya seperti apa ya Mas… Mohon pencerahannya, Terimakasih..

  21. Pak mau tanya…kira” 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 langsung…tolong ajari ya…kalo ada source code bisa di kirim ke email saya….makasih sebelumnya

  22. Bang mohon maaf sebelumnya saya masih kebinggungan dari tahapan keempat yaitu potongan perintah php untuk menampilkan data ke flexigrid mohon pencerahanya untuk sedikit menjelaskan perbaris dari program tersebut . .
    Terima Kasih sebelumnya . .

  23. 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…

  24. semuanya berhasil namun ketika dijalankan loading terus, datanya ga tampil di flexigrid 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 😀

  25. pk library java scripnya bisa dipake di banyak form di dalam satu folder web ??
    kenapa setiap kali mau membuat form baru , isi flexygridnya tidak mau keluar ya ?
    terimakasih

  26. saya sudah mencoba 2 form, alhamdulilah berhasil, tapi form-form yg lain flexygridnya 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 ,,

  27. 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 firefox versi 18.0 untuk konfirmasi input,delete berupa popup window tidak muncul bahkan untuk clear otomatis setelah input tidak muncul juga. mohon pencerahannya.

    Terima kasih.

      1. $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);
        echo json_encode($response);
        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)
        );
        $sql = mysql_query($query);
        $pesan = “”;
        if ($sql) {
        $pesan = “Data berhasil dihapus”;
        } else {
        $pesan = “Data gagal dihapus “;
        $pesan .= mysql_error();
        }
        $response = array(‘pesan’ =>$pesan, ‘data’ =>$_POST);
        echo json_encode($response);
        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;
        array_push($datax_r, $datax);
        }
        $data[‘rows’ ] = $datax_r;
        echo json_encode($data);
        exit;
        } else if (isset($_GET[‘action’ ]) && $_GET[‘action’ ] == ‘get_mhs’ ) {
        $nim = $_GET[‘nim’ ];
        $query = “SELECT * FROM mahasiswa WHERE nim=’$nim'”;
        $sql = mysql_query($query);
        $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”
        }
        }
        });

        //flexigrid handling
        $(‘#flex1’).flexigrid
        (
        {
        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).text();
        $.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();
        $(‘#flex1’).flexReload();
        }
        function resetForm() {
        $(‘#input’).removeAttr(‘disabled’);
        $(‘#edit, #delete’).attr(‘disabled’,’disabled’);
        $(‘#nim’).removeAttr(‘readonly’);
        }

        Data Mahasiswa

        NIM:

        NAMA:

        ALAMAT:

         

  28. 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 aktif…mohon petunjuknya, terima kasih

  29. 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,..

  30. 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 field nama di tabel mhs sama dengan field nama di tabel nilai.
    boleh kasih contohnya kayak gimana ga pak?

  31. 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

      1. 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 flexgrid 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 😀

  32. 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…..

  33. sudah bisa mas,..buat nampilin data yg di input,..
    ternyata script php ny harus berada diposisi atas,..
    n url ny harus sesuai dengan file 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,..

  34. 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 ..

    1. coba bantu jawab ya om,..
      datepicker jquery ny bs tanya google ,..type data base ny bs dibuat varchar aja,..
      sedikit modifikasi 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,.

  35. 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

  36. Thanks sebelumnya mas, tapi setelah saya download dan coba di komputer saya kok gridnya gak muncul, untuk diketahui nama filenya saya ubah jadi “crude.php” dibagian flexgrid handlingnya nama filenya sudah saya ubah juga tapi data nggak mucul digridnya. mohon pencerahannya. trims.

  37. 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..

  38. 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 . .

    1. Tinggal modifikasi 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) {
      $(‘#nim’).val(json.nim);
      $(‘#nama’).val(json.nama);
      $(‘#alamat’).val(json.alamat);
      });

      Lalu modifikasi juga program PHP untuk handling datanya (action=’get_mhs’)

  39. 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

  40. Mas’ mau tanya!!
    klo mau nampilin beserta gambar dengan type data mediumblob di tabel itu setinganx gimna ya??
    pemula ni…… thanks

  41. 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 ….

  42. om… kalo flexigridnya dibuat kondisi where saat mw ditampilkan sesuai dengan textfield kok ngak ngaruh ya?

    contohnya

    $query = “SELECT aa, bb “;
    $query_from =”FROM tes where aa LIKE ‘%$ket%’ “;

  43. maaf pak, saya mau tanya, kalau menampilkan table berdasarkan nama table dalam 1 page seperti apa ya sintaknya..?
    modelnya seperti ini :

    nm_file keterangan

    table1.dbf lihat data/hapus
    table2.dbf lihat data/hapus
    table3.dbf lihat data/hapus

    mohon bantuannya ya pak.. !!!!!

  44. 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.

  45. 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.

  46. 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!!

    1. 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)”

  47. pa, mau tanya untuk source code ini kan untuk menampilkan data ke text field
    $(‘#nim).val(json.nim);
    $(‘#nama’).val(json.name);
    $(‘#alamat’).val(json.alamat);

    nah kalau menampilkan datanya ingin ke label caranya gimana ya pa.’? trimakasih.

  48. permisi pak,
    saya mau tanya jika textarea alamatnya saya tambahkan niceditor kenapa tidak mau memunculkan file dari databasenya yah pada saat saya memilih file yang saya ingin edit.

    terima kasih

  49. mass..
    kl ketika kita simpan data ke data base …
    gmn syntax php untuk memasukan jam ke database sesuai dgn JAM komputer kita,
    tanpa input ..

  50. Dalam kasus saya : file index.php (dari source ini) saya include kedalam file lain.
    konfigurasi direktori sudah saya rubah.. flexigird nya juga tampil.
    proses simpannya berhasil akan tetapi datanya kenapa tidak tampil di flexigird tersebut. di refresh juga gak tampil dan terjadi proses reload yang tak berhenti terus menerus.. tolong donk bisa bantu kan
    intinya file index.php didalam folder crud dan saya include dari file yang diluar dari folder crud tersebut.
    tolong pencerahannya klo bisa kirim ke email ya pak…

      1. hanya connection databasenya saya rubah.. tapi tabelnya tidak saya rubah..
        jika langsung dipanggil : localhost/latihan/crud/index.php .. data-datanya tampil ke flexigridnya… tapi jika file nya saya include kedalam file lain datanya tidak tampil ke flexigridnya..
        Cth : nama file 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”

          1. Saya memiliki error yang sama dengan ANDY, solusinya bagaimana pak??
            Mohon bantuannya, terima kasih.

  51. yup betul txt di textarea tidak muncul pada saat file di Tabel dengan Flexigrid di select ..kejadian ini terjadi setelah textareanya saya beri script niceditor (WYSIWYG) ..

    1. Sudah bisa mas..
      Tp seperti punya SEPTIAN
      saya juga menggunakan plugin TinyMCE…
      dan saat di klik di flexigrid 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

  52. Kasus saya seperti punya SEPTIAN
    saya juga menggunakan plugin TinyMCE…
    dan saat di klik di flexigrid 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="”>

      1. 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

  53. Bapak saya mau tanya, bagaimana kalau sebelum nim itu dikasih nomor urut. Nomor urut juga akan munculk berdasarkan hasil pencarian/filter yang dilakukan pengguna.
    Terima kasih atas jawabannya.

  54. Bapak saya mau tanya, bagaimana caranya untuk menambahkan fungsi konfirmasi saat kita klik tombol edit/delete?
    Terima kasih atas jawabannya.

  55. Pak, Kalo di flexigridnya 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;
    array_push($datax_r, $datax);
    }
    $data[‘rows’] = $datax_r;
    echo json_encode($data);
    exit;

    tapi masih bingung pak..? 🙁

    makasih atas jawabannya

  56. 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

  57. 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

  58. 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)

    1. caranya sama saja spt text field, untuk mengambil nilai dropdown dgn php gunakan $_POST, untuk memilih nilai dropdown dari JQuery gunakan $(‘#idnya’).val(nilainya). Salam

  59. salam pak, saya coba download langsung scriptnya tanpa ada yang di rubah. tapi alert variabel $pesan itu ga keluar. kenapa ya?

    trims.
    salam

  60. 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 flexigridnya

  61. 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

  62. 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

  63. {“pesan”:”Data gagal disimpan Column count doesn’t match value count at row 1″,”data”:{“nim”:”123456789789″,”nama”:”ernawati”,”angkatan”:”2000″,”kelas”:”A1″,”hp”:”0812222222″,”email”:”koprilia@gmail.com”,”judul”:”aku”,”permasalahan”:”aku”,”Input”:”Input”}}

  64. 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

  65. 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

  66. 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?

  67. 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…

  68. Preh Hatmoko Itu karena file 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

    1. 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…

  69. 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

  70. pak, saya coba buat ulang tutorial ini, dengan menambahkan beberapa field. 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

  71. 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?

  72. 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

  73. mantab… pak….

    tolong pak posting.. tutorial2.. yang lebih ok pakk.. tolong pak.. link ke gmail sya setiap ada tutorial baru…

    makasih . salam

  74. 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:300px);
    }

  75. 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 flexigrid 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 flexigrid.

    Mohon penjelasannya pak, terima kasih.
    Kalo boleh mau saya kirimkan ke email bapak.

  76. Makasih Pak, ud sy coba dan berhasil. Tampilan kolom sy tambah mjadi 7. Unt kode mysql_escape_string() sekarang mjadi mysql_real_escape_string()

  77. mau tanya, kalo edit, input, delete datanya seperti ms.excell gimana ?
    jadi tinggal klik 2x field tabel nya bisa edit, delete, update data di situ langsung, tanpa klik tombol input, update, delete

    #terima-kasih

  78. Mas sy mau tanya, ko flexigrid nya ga bsa nampilin data ya loading terus mas, pdahal coding nya udh sama persis, kira-kira ksalahannya dimana ya mas,mohn pencerahannya trimakasih

  79. 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

  80. assalamualaikum…………
    bpk jka pgen harga suatu brg muncul sndri ketika mengklick brg tesebut gmn crany…………?
    syukron

  81. 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

  82. 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…

  83. pak, mau nanya kalau kasusnya mengupload file atau gambar itu gimana ya ?
    apa perlu edit juga di jquery nya ?

  84. oh ya pak, saya kan programnya menggunakan pdo.
    kira2 bagian mana saja yang harus saya ubah programnya pak

    selain koneksi database ?

  85. Terimakasih Pak Solichin Tutorialnya,
    Saya mau tanya, mulai line 139 sampai 228 saya mau pindahkan di file lain dlm bntuk js.
    misal saya simpan di libs/flexigrid/js/nama_file_baru.js. lalu saya hapus line 138 – 229 diubah dengan :

    Kenapa ya setelah dipanggil tablenya dgn code
    table gk berhasil muncul. Mohon penjelasannya

      1. Siap Pak ternyata bisa,.
        tapi flexigridnya muter2 ya, saya coba dgn struktur database berbeda..
        bagaimana ya cara debuging nya biar bisa tau code nya mengambil variable mana.?

  86. 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\KONTRAKTOR\crud <— nah ini isinya ada dihalaman pages

    kemungkinan jquery yg bentrok. padahal sudah saya pakai jquer noConflict tetap saja tidak bisa.. mohon sarannya.. thanks

  87. 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) file gambar dan setelah berhasil disimpan, selanjutnya menampilkan link dimana gambar tersebut saya simpan.
    Untuk upload file saya menggunakan move_uploaded_file, nah cara untuk menampilkan link menggunakan apa ya pak?
    Mohon pencerahannya, terima kasih.

  88. saya coba gabung dengan session start, tapi tidak berhasil, tidak ada data yang tampil di fleksigridnya? mohon sarannya pak? trims

  89. 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

  90. Jadi magsudnya opsi itu di pakai untuk meload semua data yang akan di tampilkan utuh di tabel flexigid 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

  91. 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 flexigrid.n jg tidak tampil.
    mhn pencerahannya kira2 dmna letak kesalahan.n?

  92. pak aku lgi butu program web , menggunakan php dan sql ini gimna caranya inputnya dri sql dan tampilan atau outputnya di hph bgtu pak.. tolong penjelasannya..

  93. bagus sih mas tutorial nya detail, tapi kalau bisa jangan terlalu melebar cukup ke pokok pembahasan nya sehingga tutorial nya jauh lebih mudah di pahami

Leave a Reply

Your email address will not be published. Required fields are marked *