Salah satu fitur utama dalam aplikasi pengolahan berbasis web adalah melakukan operasi tampil,tambah,edit dan hapus data. Banyak tutorial yang mengajarkan cara melakukan operasi tersebut dengan metode biasa. Kali ini, saya akan menjelaskan teknik melakukan operasi pengolahan data menggunakan PHP, MySQL, jQuery dan library JeasyUI yang akan membuat halaman pengolahan data anda lebih menarik sekaligus responsive karena teknik ini sudah mengunakan ajax.

Tampilan Pengolahan data web dengan datagrid php dan ajax

Langkah pembuatannya
1. Buat tabel
2. Buat file koneksi
3. Buat halaman Front end (Tabel dan Form )
4. Buat fungsi new_user(), save_user(), edit_user(), save_user().
5. Buat file php untuk melakukan operasi data tambah,edit,hapus dan tampil data.

buat tabel

Contoh kali ini, kita akan membuat pengolahan data mahasiswa, berikut ini struktur tabelnya

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(5) NOT NULL,
  `nama` varchar(40) NOT NULL,
  `ipk` double NOT NULL,
  `jurusan` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

File koneksi database

Sesuaikan konfigurasi ini dengan database yang anda pakai. Namai file ini dengan nama config.php.

mysql_connect('localhost','usermysql','password');
	mysql_select_db('namadatabase');

Halaman Front end

Halaman ini berisi form dan tabel untuk menampilkan data.

	<table id="dg" title="My mahasiswa" class="easyui-datagrid" 
style="width:700px;height:250px"
		url="mahasiswa_crud.php?aksi=show"
		toolbar="#toolbar" pagination="true"
		rownumbers="true" fitColumns="true" singleSelect="true">
			<thead>
				<tr>
					<th field="nim" width="50">Nim</th>
					<th field="nama" width="50">nama </th>
					<th field="ipk" width="50">ipk</th>
					<th field="jurusan" width="50">jurusan</th>
				</tr>
			</thead>
		</table>
		<div id="toolbar">
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" 
plain="true" onclick="newUser()">New User</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" 
plain="true" onclick="editUser()">Edit User</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" 
plain="true" onclick="removeUser()">Remove User</a>
		</div>

		<div id="dlg" class="easyui-dialog" 
style="width:400px;height:280px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons">
			<div class="ftitle">
				Info Mahasiswa
			</div>
			<form id="fm" method="post" novalidate>
				<div class="fitem">
					<label>Nim:</label>
					<input name="nim" class="easyui-validatebox" required="true">
				</div>
				<div class="fitem">
					<label>Nama:</label>
					<input name="nama" class="easyui-validatebox" required="true">
				</div>
				<div class="fitem">
					<label>ipk:</label>
					<input name="ipk">
				</div>
				<div class="fitem">
					<label>jurusan:</label>
					<input name="jurusan" class="easyui-validatebox" >
				</div>
			</form>
		</div>
		<div id="dlg-buttons">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" 
onclick="saveUser()">Save</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" 
onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
		</div>

fungsi javascript crud ajax

	var url;
			function newUser() {
				$('#dlg').dialog('open').dialog('setTitle', 'Tambah User');
				$('#fm').form('clear');
				url = 'mahasiswa_crud.php?aksi=add';
			}

			function editUser() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$('#dlg').dialog('open').dialog('setTitle', 'Ubah User');
					$('#fm').form('load', row);
					url = 'mahasiswa_crud.php?aksi=edit&id=' + row.nim;
				}
				console.log(url);
			}

			function saveUser() {
				$('#fm').form('submit', {
					url : url,
					onSubmit : function() {
						return $(this).form('validate');
					},
					success : function(result) {
						var result = eval('(' + result + ')');
						if (result.success) {
							$('#dlg').dialog('close');
							// close the dialog
							$('#dg').datagrid('reload');
							// reload the user data
						} else {
							$.messager.show({
								title : 'Error',
								msg : result.msg
							});
						}
					}
				});
			}

			function removeUser() {
				var row = $('#dg').datagrid('getSelected');
				console.log(row);
				
				if (row) {
					$.messager.confirm('Confirm', 
'Yakin Mau menghapus data user?', function(r) {
						if (r) {
							$.post('mahasiswa_crud.php?aksi=hapus', {
								id : row.nim
							}, function(result) {
								if (result.success) {
									$('#dg').datagrid('reload');
									// reload the user data
								} else {
									$.messager.show({// show error message
										title : 'Error',
										msg : result.msg
									});
								}
							}, 'json');
						}
					});
				}
			}

php untuk melakukan operasi crud

namai file ini dengan nama mahasiswa_crud.php


include 'config.php';

$id = $_REQUEST['id'];
$nim = $_REQUEST['nim'];
$nama = $_REQUEST['nama'];
$ipk = $_REQUEST['ipk'];
$jurusan = $_REQUEST['jurusan'];
$aksi = $_REQUEST['aksi'];

switch($aksi) {

	case 'show' :
		{

			//get user
			$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
			$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
			$offset = ($page - 1) * $rows;
			$result = array();

			$rs = mysql_query("select count(*) from mahasiswa");
			$row = mysql_fetch_row($rs);
			$result["total"] = $row[0];
			$rs = mysql_query("select * from mahasiswa limit $offset,$rows");

			$items = array();
			while ($row = mysql_fetch_object($rs)) {
				array_push($items, $row);
			}
			$result["rows"] = $items;

			echo json_encode($result);

		}
		break;
	case 'add' :
		{
			//save user

			$sql = "insert into mahasiswa(nim,nama,ipk,jurusan) 
			values('$nim','$nama','$ipk','$jurusan')";
			$result = @mysql_query($sql);
			if ($result) {
				echo json_encode(array('success' => true));
			} else {
				echo json_encode(array('msg' => 'Terjadi kesalahan .'));
			}
		}//end of save
		break;
		
	case 'edit' :
		{
			//update user

			$sql = "update mahasiswa set nim='$nim',nama='$nama',
			ipk='$ipk',jurusan='$jurusan' where nim='$id'";
			$result = @mysql_query($sql);
			if ($result) {
				echo json_encode(array('success' => true));
			} else {
				echo json_encode(array('msg' => 'Terjadi kesalahan .'));
			}
		}
		break;

	case 'hapus' : {
		//remove user ;

		$sql = "delete from mahasiswa where nim='$id'";
		$result = @mysql_query($sql);
		if ($result) {
			echo json_encode(array('success' => true));
		} else {
			echo json_encode(array('msg' => 'Terjadi kesalahan .'));
		}
	}
}//end of switch

Demo dan source code

Mau mencobanya langsung? klik disini, mau mendapatkan source codenya? klik disini.

Categories: jQueryPHP

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

26 Comments

Abigail Rental · 29 August , 2016 at 2:18 pm

om kalo mau inline editing gmana? bikinin tutorialnya dong :)

Arif Agunso · 25 November , 2014 at 9:07 am

mas chandra, mau tanya. kalok mau buat pencarian dari Datagrid berbasis Ajax gimana ya?
mohon bantuannya mas, sekalian ulasan contohnya.

andre · 3 September , 2014 at 10:14 am

terima kasih mas, sangat membantu sekali,, :D

novita sari (Nichi) · 25 June , 2014 at 7:33 pm

kenapa gak bisa tampil datanya yang baru di save iah?

novita sari (Nichi) · 25 June , 2014 at 7:31 pm

koq gak bisa tampil di grid iah data yang baru di save

anwr rawk · 10 March , 2014 at 11:53 am

ini sih yang ada di demo jeasyui tinggal table nya aja di ganti :D

Isnu Arief Darmawan · 20 November , 2013 at 9:10 am

Kok gak jalan ya, apli’a?

ferdi ardianto · 30 October , 2013 at 6:54 pm

gan ?
kalo mau cetak laporan berdasarkan data yang diatas, gimana ya ?

rifky · 29 October , 2013 at 11:12 pm

Gan.. kok g bisa dihapus ya? fungsi yang lain bisa. hapus aj yg g bisa

    Candra Adi Putra · 30 October , 2013 at 10:47 am

    bisa kok, mungkin kamu aja yang salah, cek demonya

Ghozalli Mashan · 17 July , 2013 at 5:27 pm

baguss.. makasih gan.

julian · 8 July , 2013 at 10:50 pm

gan gmna cara kalau menambahkan tombol search engine nya mohon bantuannya ya ?

Ndie · 12 June , 2013 at 4:26 pm

gan, minta tutor yang ini tapi menggunakan database sql server 2008 r2

    Candra Adi Putra · 14 June , 2013 at 1:05 am

    ga ada. kalo pake sqlserver mending pake PDO aja… biar kodenya portabel. saya sendiri tidak mendalami sql server

Anonymous · 11 June , 2013 at 12:08 am

mantap

Anonymous · 20 May , 2013 at 9:24 am

bisa save tapi datanya ga tampil dalam tabel, saat disave form boxnya juga ga ilang ya?

    Candra Adi Putra · 21 May , 2013 at 11:10 pm

    itu udah kesave, tapi mungkin tampil ga keliatan, itu kan ada pagingnya, cek aja…

Anonymous · 9 May , 2013 at 1:57 pm

ini bbrp gambarnya ngga lengkap ya dalem paket source codenya? trus datanya juga tidak bisa keluar

twipp3herry · 29 April , 2013 at 10:03 am

bos data kok gak muncul di tabel ya?

    Candra Adi Putra · 29 April , 2013 at 2:40 pm

    buka lewat chrome, ketik CTRL+SHIT+J cek ada merahnya ga….biasanya cuman salah peletakan jquery

Handytechplus · 20 April , 2013 at 6:06 pm

thanks atas sharingnya bro.

angga · 2 April , 2013 at 1:52 pm

Berhasil…berhasil…makasih y seneeng ane bisa dapet ilmu melalui anda……

Anonymous · 28 March , 2013 at 11:06 pm

datanya kok gak muncul kedalam tabel ya???

ihsan · 26 March , 2013 at 10:47 pm

thx ganj… berguna bgt bwat ane nyang newbie sma bginianj… !!!

Abdulatif Rokhman · 24 March , 2013 at 4:52 pm

Trim atas dedikasi dalam menulis, semoga cita-cita mulianya tercapai
saya banyak mendapat manfaat dari blog ini

Comments are closed.