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

By Achmad Solichin On 2 September 2012 In JQuery, mysql, PHP, web development

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. mysql_select_db("demo") or die(mysql_error());
  5. /* akhir koneksi db */
  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.

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

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. 	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 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. 			mysql_escape_string($nama), 
  9. 			mysql_escape_string($alamat),
  10. 			mysql_escape_string($nim)
  11. 		);
  12. 	$sql = mysql_query($query);
  13. 	$pesan = "";
  14. 	if ($sql) {
  15. 		$pesan = "Data berhasil disimpan";
  16. 	} else {
  17. 		$pesan = "Data gagal disimpan ";
  18. 		$pesan .= mysql_error();
  19. 	}
  20. 	$response = array('pesan'=>$pesan, 'data'=>$_POST);
  21. 	echo json_encode($response);
  22. 	exit;
  23. } else if (isset($_POST['Delete'])) {
  24. 	$nim  	= strip_tags($_POST['nim']);
  25.  
  26. 	//delete data
  27. 	$query = sprintf("DELETE FROM mahasiswa WHERE nim='%s'", 
  28. 			mysql_escape_string($nim)
  29. 		);
  30. 	$sql = mysql_query($query);
  31. 	$pesan = "";
  32. 	if ($sql) {
  33. 		$pesan = "Data berhasil dihapus";
  34. 	} else {
  35. 		$pesan = "Data gagal dihapus ";
  36. 		$pesan .= mysql_error();
  37. 	}
  38. 	$response = array('pesan'=>$pesan, 'data'=>$_POST);
  39. 	echo json_encode($response);
  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.

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

 

Tags:, , , , , ,

Related Posts

About Author

Achmad Solichin | Website | Twitter

Telah menjadi staff pengajar di Universitas Budi Luhur (Jakarta) sejak tahun 2005. Selain mengajar, dia juga menyusun berbagai tutorial praktis di bidang komputer dan sempat menulis beberapa buku gratis, semua dipublikasikan di situs resminya, Achmatim.Net

Comments
  1. 263 days ago
    AMIR SANTOSO

    MANTABBSS…pak terima kasih atas penjelasannya

    Reply
  2. 263 days ago
    mumu

    mmm… sudah pernah coba deh!! tapi kok lupa lg sekarang :D
    //coba lgi deh

    Reply
  3. 263 days ago
    umar danny

    izin belajar pak…mudah2an ga lupa2 lagi kayak mumu..heheee

    Reply
  4. 262 days ago
    rachmat

    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 :D

    Reply
  5. 262 days ago
    Lee

    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.

    Reply
  6. 262 days ago
    ridha

    keren abis pak… mantab banget tutorx.. :)

    Reply
  7. 262 days ago
    kumizcribs

    terima kasih pak tutorialnya

    Reply
  8. 260 days ago
    arfan

    Pak klo untuk upload gambar gmn tuh penambahannya?

    mohon bantuaanya

    Reply
  9. 250 days ago
    Obat Herbal Kanker Getah Bening

    koneksi ke MySQL nya cepet ga ya? kadang kang klo via IP Protokol / IP Virtual suka loading lama

    Reply
  10. 237 days ago
    eko

    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
  11. 232 days ago
    qadir

    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

    Reply
    • 232 days ago
      Achmad Solichin

      boleh liat source inputan / HTML-nya? sepertinya lebih nyaman jika code-nya dikirimkan via email. salam

      Reply
  12. 231 days ago
    lirik yes

    wah ini mantap gan, ane mau coba dulu dech klo gitu belajar ajax makasi gan

    Reply
  13. 230 days ago
    HG11

    Pak, kalo download mysqlna dimana ya? pernah download koh malah mysql “Command Line Client” .
    Thanks

    Reply
  14. 222 days ago
    qadir

    Assalamualaikum wr.wb

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

    Reply
  15. 218 days ago
    Rahman

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

    Reply
  16. 206 days ago
    Joka

    tararengkyu ya…
    hatur nuhun pak/kak

    saya emang lagi butuh bgt ini
    makasih udah bagi ilmunya XD

    Reply
  17. 201 days ago
    wahyu

    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 :)

    Reply
  18. 201 days ago
    Achmad Solichin

    kemungkinannya sih gitu, kolomnya ga sesuai antara yg di flexigrid dgn record yg di-select. kalo mau, coba kirim ke email code-nya dan errornya dimana. thx

    Reply
  19. 198 days ago
    johan

    semoga amal ibadah ilmunya di ridhoi allah swt,, hehehe :D

    Reply
  20. 195 days ago
    Lastri

    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
  21. 191 days ago
    rjal

    mantap tutorial yang sangat membantu,….

    Reply
  22. 189 days ago
    rahmats

    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
    • 174 days ago
      Sylvie Yunjae

      itu pilihan laki2 ama perempuannya pake radio button ngga ??

      klo pake radio button di scriptnya ditambah if :)

      Reply
  23. 185 days ago
    restu

    keren… makasih :D

    Reply
  24. 181 days ago
    yoet

    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
  25. 178 days ago
    alex

    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
  26. 175 days ago
    kakang

    om, kalau untuk syntak operasi cari data gimana ? mohon penjelasnya, mohon kirim via email

    Reply
  27. 174 days ago
    Sylvie Yunjae

    Panggil apa nie ?? Om boleh ya ?? :D

    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… :D

    Reply
    • 174 days ago
      Achmad Solichin

      bukannya di flexigrid itu sudah ada searchingnya, kenapa harus bikin searching lagi? :D

      mau pake 2 page atau 1 page ya tergantung programmer, ga masalah kok kalo antara halaman untuk menampilkan dgn untuk penyimpanan dipisah.

      Reply
      • 129 days ago
        Dameanzs

        Numpang tanya pak,, kalo dalam textfield tanpa submit bisa cari data d flexgrid… gmn tuch pak? tq

        Reply
        • 126 days ago
          Achmad Solichin

          sebenarnya tetap dengan submit, hanya saja action submit yg biasanya berupa tombol digantikan dengan tombol “enter”

          Reply
  28. 172 days ago
    simpleman

    Pak solihin , gmana ya caranny nampilin image di flegrid. kalau bisa syntax jos nya dikasih tau ya …… :)

    Reply
  29. 167 days ago
    Lius Alpandi

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

    Reply
  30. 167 days ago
    nyoman kardila

    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
  31. 165 days ago
    Jefry

    saya baru tahu ni kalau script2nya sangat banyak dan bejibun
    terima kasih ulmunya

    Reply
  32. 165 days ago
    agung setiawan

    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']);

    Reply
    • 165 days ago
      Achmad Solichin

      sudah jelas, di baris tersebut kelebihan kurung siku buka –> [

      Reply
      • 165 days ago
        agung setiawan

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

        Reply
        • 164 days ago
          Achmad Solichin

          jika masih kesulitan, silahkan kirimkan code-nya via email saya.

          Reply
          • 164 days ago
            Agung Setiawan

            maaf pak, alamat emailnya apa?

  33. 164 days ago
    Problem flexgrid

    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

    Reply
    • 164 days ago
      Achmad Solichin

      jika masih bingung, silahkan kirimkan source code yang sudah dibuat via email dan ceritakan kesulitannya.

      Reply
  34. 164 days ago
    Problem flexgrid

    sudah saya kirim mas, ke email mas achmatim@yahoo.com

    Reply
  35. 164 days ago
    Problem flexgrid

    mas, sudah saya kirim ke achmatim@gmail.com,, makasih mas…

    Reply
  36. 164 days ago
    Agung Setiawan

    pak saya sudah kirim kan source code punya saya ke email yang yahoo dan gmail, saya tunggu pak responenya :D terimakasih

    Reply
  37. 161 days ago
    rahmi

    pak, saya nyoba codingnya bapak. tapi, tampilan data di flexgridnya gak tampil. gimana solusinya pak?

    Reply
  38. 161 days ago
    Indra Rukmana

    Command Edit sama Delete nya ada pak,?? Untuk melengkapi..
    Terima Kasih..

    Reply
  39. 161 days ago
    Indra Rukmana

    Oh, Maaf saya baru ngerti cara pakenya programnya sekarang.. Terima kasih atas infonya..

    Reply
  40. 161 days ago
    alundra00

    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
    • 161 days ago
      Achmad Solichin

      atribut action pada tag form kosong itu artinya form akan diproses di halaman yang sama.

      Reply
  41. 160 days ago
    Topan Setiawan

    mantab pa cuma tapi knp gx ada pencarian data pa.’???

    Reply
  42. 160 days ago
    Topan Setiawan

    eh ternyata ada pencariannya juga yo.’ mantab dah pa. banyak. mau saya pelajarin nich. :) makasih

    Reply
  43. 160 days ago
    alundra00

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

    Reply
    • 160 days ago
      Achmad Solichin

      biasanya karena perintah SELECT yang ga tepat atau error. silahkan share via email jika masih kesulitan.

      Reply
  44. 159 days ago
    Topan Setiawan

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

    Reply
    • 153 days ago
      Achmad Solichin

      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
  45. 158 days ago
    and

    jujur saja ini sangat bermanfaat, terimakasih bang mau berbagi :)

    Reply
  46. 157 days ago
    juna

    terimakasih banget masbro tutorialnya

    Reply
  47. 157 days ago
    Muh. Yudha

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

    Reply
  48. 153 days ago
    lunglun

    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

    Reply
  49. 153 days ago
    Lius Alpandi

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

    Reply
  50. 151 days ago
    Nur Hamzah

    Bermanfaat sekali Pak ,
    Saya Download Dulu pak

    Terima Kasih

    Reply
  51. 150 days ago
    Obat Tradisional Asli

    jadi pengen belajar bahasa pemograman nih…kayaknya asyik apalagi bisa digabungin dengan website..makasih kang udh mau berbagi…ditunggu ya kunjungan baliknya..hee

    Reply
  52. 149 days ago
    triedaritri

    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
    • 148 days ago
      Achmad Solichin

      koneksi ke databasenya disesuaikan atuh dengan kondisi di komputer kamu :)

      Reply
  53. 148 days ago
    Isbat Usman

    saya pendatang baru di internet kalau ada scrip bagus bagi dong ke link email saya, salam hangat online

    Reply
  54. 146 days ago
    lela

    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 :D

    Reply
    • 145 days ago
      Achmad Solichin

      kemungkinan perintah SELECT-nya yang error, silahkan kirimkan source-code beserta databasenya via email, semoga saya bisa bantu cek.

      Reply
  55. 145 days ago
    Hikmat

    kalo pengimputan gan berhasil, tp d dlm flexgrid knp hasilnya ga tampil ya gan, . .

    Reply
    • 145 days ago
      Achmad Solichin

      kemungkinan perintah SELECT-nya yang error, silahkan kirimkan source-code beserta databasenya via email, semoga saya bisa bantu cek.

      Reply
  56. 137 days ago
    lula

    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

    Reply
    • 137 days ago
      Achmad Solichin

      library jquery-nya dapat dipake berulang kali, tapi pemanggilan dan konfigurasi flexigridnya ya harus dilakukan di setiap kita akan menampilkan data di flexigrid

      Reply
  57. 137 days ago
    lula

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

    Reply
    • 136 days ago
      Achmad Solichin

      Ya umumnya kesalahan terjadi karena perintah querynya yang salah. Jika masih kesulitan, silahan share code dan db-nya ke email saya.

      Reply
      • 136 days ago
        lula

        saya sudahg kirim email, code dan db nya ,, mohon bantuannya

        Reply
  58. 135 days ago
    Gilank

    bang mau kalau koneksinya pake sql server 2005 gimna ? bisa ngga ?

    Reply
  59. 130 days ago
    gigink

    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.

    Reply
    • 130 days ago
      Achmad Solichin

      kemungkinan karena ada perintah javascript yg error. coba dicek kembali. kalo kesulitan, silahkan share code-nya ke email atau pastebin :)

      Reply
      • 130 days ago
        gigink

        $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:

         

        Reply
  60. 130 days ago
    gigink

    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

    Reply
    • 126 days ago
      Achmad Solichin

      kemungkinan ada javascript yg error, kalo scriptnya belum ada perubahan harusnya bisa, krn itu sudah saya coba dan ga ada masalah.

      Reply
  61. 129 days ago
    WizQi

    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
    • 126 days ago
      Achmad Solichin

      biasanya ada perintah SELECT data yang error, coba dicek. kalo masih belum ketemu, bisa kirim sourcenya via email saya.

      Reply
  62. 128 days ago
    Mocku

    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?

    Reply
    • 126 days ago
      Achmad Solichin

      konsepnya sebenarnya sama seperti insert ke tabel tunggal, untuk tabel banyak ya insertnya beberapa kali dan bergantian/berurutan.

      Reply
  63. 127 days ago
    Dameanzs

    pak,,, kalo buat master detail ada ngak ya pak contohnya

    Reply
    • 126 days ago
      Achmad Solichin

      belum ada contohnya, tapi udah masuk waiting-list tutorial yg akan dibuat :)

      Reply
      • 125 days ago
        Dameanzs

        OK pak di tunggu ya pak,,,, heheh bermanfaat banget ilmu yang bapak berikan

        Reply
  64. 127 days ago
    fenda

    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
    • 126 days ago
      Achmad Solichin

      kemungkinan ada javascript yg error. kalo mau boleh saya dikirimi (attach) sourcenya via email. salam

      Reply
      • 124 days ago
        fenda

        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 :D

        Reply
  65. 126 days ago
    phia

    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
  66. 124 days ago
    WizQi

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

    Reply
  67. 123 days ago
    Firda

    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
    • 122 days ago
      WizQi

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

      Reply
  68. 122 days ago
    guntur agasti

    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
    • 122 days ago
      Dameanzs

      resetForm : true, rubah jadi resetForm : false
      coba pake cara itu pak

      Reply
  69. 121 days ago
    billy

    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.

    Reply
    • 120 days ago
      Achmad Solichin

      ada banyak faktor yg mungkin bagi penyebab, kalo mau silahkan share code-nya via email.

      Reply
  70. 121 days ago
    fajrul

    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
  71. 121 days ago
    Lius Alpandi

    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
    • 120 days ago
      Achmad Solichin

      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’)

      Reply
  72. 120 days ago
    tazsa

    permisi pak.
    klo mau membuat coding search nya gmn ?

    Reply
  73. 120 days ago
    Solihin

    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
  74. 120 days ago
    Dotpixel

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

    Reply
  75. 117 days ago
    Aiiko

    OM Kalo mw ngecilin font flexigrid dimana ya

    Reply
  76. 116 days ago
    Heru Hidayat

    Muantaappp pak ….:)

    Reply
  77. 113 days ago
    dika

    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
  78. 113 days ago
    hendra sriwijaya

    Ijin coba, Brada.
    - 39 -

    Reply
  79. 113 days ago
    Aiiko

    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%’ “;

    Reply
    • 110 days ago
      Achmad Solichin

      bisa dikirimkan source code lengkapnya? $ket itu harus dikirim dan diterima oleh flexigrid. Nah trigger filteringnya apa? pas tekan tombol atau apa? :)

      Reply
  80. 110 days ago
    Aiiko

    sudah dikirm om.. mohon pencerahannya om

    Reply
  81. 110 days ago
    nurjanah

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

    Reply
  82. 106 days ago
    jagooweb

    keren….cuy

    Reply
  83. 105 days ago
    herizal

    Sangat… Sangat….. Sangat bermanfaat mas,
    terus bagi ilmunya mas,
    may Allah Bless U

    Reply
  84. 105 days ago
    herizal

    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
  85. 102 days ago
    wati

    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
  86. 102 days ago
    Bahrudin

    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
  87. 102 days ago
    Hendry

    suwun mas bro

    Reply
  88. 101 days ago
    joe sandai

    mungkin bisagak ditambah validai tidak boleh kosong dan pada nim tidak boleh huruf serta tidak boleh diawali dengan huruf nol……

    Reply
    • 101 days ago
      Aiiko

      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
      • 101 days ago
        Aiiko

        untuk function ok_email(eform) untuk validasi email.. :D

        Reply
  89. 101 days ago
    Topan Setiawan

    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.

    Reply
  90. 100 days ago
    Achmad Solichin

    maaf ga ada :)

    Reply
  91. 100 days ago
    Rudy Herwaman

    Thank’s banget gan Membantu Ane banget :D

    Reply
  92. 100 days ago
    Rudy Herwaman

    HohO … Makasih Gan :D

    Reply
  93. 98 days ago
    septian

    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

    Reply
    • 97 days ago
      Achmad Solichin

      apa yang dimaksud memunculkan file dari database? apakah maksudnya membaca file text (.txt) atau sejenisnya yang disimpan di db?

      Reply
  94. 97 days ago
    ray

    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
    • 96 days ago
      Achmad Solichin

      tinggal pake fungsi now() dan pastikan field-nya bertipe date atau datetime.

      Reply
  95. 97 days ago
    Anda Hebat

    Wahh… jarang nih kasih tutor lengkap gini.. thanks pak sudah berbagi… :)

    Reply
  96. 96 days ago
    justin agan

    pak kalo mau buat upload gambar gimana ya pak?

    Reply
  97. 96 days ago
    cinta2maret

    wah lagi nyari CRUD ajax php nih kebetulan. makasih pak

    Reply
  98. 96 days ago
    andy

    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…

    Reply
    • 96 days ago
      Achmad Solichin

      silahkan kirim source code lengkapnya ke email, sepertinya ada proses query yang salah. apakah databasenya beda?

      Reply
      • 96 days ago
        andy

        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”

        Reply
  99. 95 days ago
    septian

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

    Reply
    • 94 days ago
      Andy

      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

      Reply
      • 93 days ago
        septian

        mas coba minta sourcenya dong.. saya masih tetet tidak bisa nih ..pake source dari link diatas.

        Reply
  100. 94 days ago
    Andy

    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="”>

    Reply
    • 93 days ago
      Achmad Solichin

      untuk kasus pertama bisa lihat tutorial http://stackoverflow.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
      • 93 days ago
        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

        Reply
  101. 93 days ago
    atiek

    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.

    Reply
  102. 93 days ago
    andy

    sudah bisa maslah tanggalnya…
    hanya tinymce nya dengan flexigridnya yang belum
    bermasalah textareanya

    Reply
  103. 91 days ago
    gie

    Luar Biasa !!!
    sangat bermanfaat

    Reply
  104. 91 days ago
    ariz

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

    Reply
    • 90 days ago
      Achmad Solichin

      bisa ditambahkan di fungsi beforeSubmit, pada bagian opsi plugin jquery form. dibuat agar memunculkan konfirmasi jika yang ditekan adalah tombol edit/delete.

      Reply
  105. 88 days ago
    Eva

    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

    Reply
  106. 88 days ago
    WizQi

    klo mau buat form ini untuk joomla 2.5 gmn cara ny om,..??
    thx

    Reply
  107. 88 days ago
    umam

    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
  108. 75 days ago
    Wiji

    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
  109. 73 days ago
    april

    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
    • 63 days ago
      Achmad Solichin

      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

      Reply
  110. 63 days ago
    bayu

    Permisi pak mau bertanya, apakah bisa dalam 1 form terdapat 2 flxigrid (2 tabel)
    saya sudah coba tapi belum bisa saja nii
    hehe

    Reply
  111. 63 days ago
    Achmad Solichin

    Bisa banget. Tinggal dibedakan ID dari masing2 flexigrid

    Reply
  112. 63 days ago
    Obat Kuat Dijamin Bikin Tahan Lama

    Joss Banget Tutorialnya Mas..

    Reply
  113. 62 days ago
    akbar

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

    trims.
    salam

    Reply
  114. 62 days ago
    bayu

    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

    Reply
  115. 40 days ago
    ojan

    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
    • 35 days ago
      Achmad Solichin

      ya baca2 dulu mengenai konsep ajax, trus banyak2 coba program berhubungan dengan ajax

      Reply
  116. 13 days ago
    antok

    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
  117. 7 days ago
    umar hamdan

    mas kenapa ya ditempt saya grid nya ad informasi ” processing,,,please wait”

    mhon infonya,mkasih.

    Reply
    • 4 days ago
      Achmad Solichin

      kemungkinan querynya ada yang salah / kurang tepat. silahkan dicek, dan boleh share via email kalo masih kesulitan.

      Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>