Membuat CRUD dengan DataGrid jQuery EasyUI PHP dan MySQL tidaklah rumit dan cukup terbilang mudah. Kamu hanya perlu mengikuti langkah sederhana dalam artikel ini agar dapat menggunakan DatGrid jQuery EasyUI.
Untuk memudahkan implementasi, studi kasus dalam tutorial ini adalah pengolahan data siswa sederhana. Yang harus kamu persiapkan:
- Web Server: wamp, xampp, dan lain-lain. Saya sendiri menggunakan wamp. Terserah kawan-kawan mau pakai yang mana karena pada intinya sama saja.
- Database: MySQL tentunya. Saya di sini menggunakan Navicat sebagai aplikasi manajemen basis datanya. Kamu bisa menggunakan phpmyadmin juga, tenang saja.
- Editor: Sublime 3.0, Notepad++, PhpStorm, dan lain-lain. Saya sendiri menggunakan Sublime 3.0.
- Library EasyUI. Kamu bisa unduh library tersebut di sini: tautan
Membuat Database Sekolah
Langkah pertama yang harus dilakukan adalah membuat database terlebih dahulu. Beri nama database kita kali ini dengan nama sekolah.
Membuat Tabel Siswa
Setelah database sekolah dibuat, langkah selanjutnya adalah membuat tabel siswa. Berikut strukturnya:
 |
| Gambar 1 - Struktur tabel siswa |
Atau kamu bisa unduh file sql beserta data dummy-nya di sini: tautan
Membuat File Index atau Halaman Depan
Setelah database sekolah dan tabel siswa dibuat, langkah selanjutnya adalah membuat file index atau halaman depan. Karena EasyUI ini biasanya single page application atau aplikasi satu halaman saja, maka tidak perlu membuat banyak halaman. Namun sebelum membuat file index tersebut, ekstrak berkas EasyUI yang sudah diunduh tadi ke dalam folder proyek kita kali ini.
Setelah mengekstrak dan meletakkan berkas-berkas EasyUI tersebut di folder proyek kita, selanjutnya adalah membuat file index. Berikut skrip untuk halaman depan dengan nama file index.html:
[<!DOCTYPE html>
<html>
<head>
<title>DataGrid - EasyUI</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo/demo.css">
</head>
<body>
<table id="tabelSiswa" class="easyui-datagrid" title="Data Siswa" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'data/datasiswa.php',method:'get'">
<thead>
<tr>
<th data-options="field:'no',width:40,align:'center'">No</th>
<th data-options="field:'nisn',width:100">NISN</th>
<th data-options="field:'nama_siswa',width:200">Nama Siswa</th>
<th data-options="field:'tanggal_lahir',width:150">Tanggal Lahir</th>
<th data-options="field:'jenis_kelamin',width:40,align:'center'">JK</th>
</tr>
</thead>
</table>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</body>
</html>]
Tampilan dari skrip di atas adalah sebagai berikut:
 |
| Gambar 2 - Tampilan datagrid siswa pada halaman depan |
Membuat File PHP Data Siswa
Setelah membuat tampilan datagrid siswa, langkah selanjutnya adalah membuat file PHP data siswa. Agar folder lebih terstruktur, silakan buat folder baru di folder proyek kita kali ini dengan nama data. Kemudian buatlah sebuah file dengan nama datasiswa.php dengan skrip sebagai berikut:
[<?php
$dbHost = 'localhost';
$dbUser = 'root';
$dbPass = '';
$dbName = 'sekolah';
$Koneksi = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
$retArr = array();
$no = 1;
$qry = mysqli_query($Koneksi, "SELECT * FROM siswa");
while ($item = mysqli_fetch_array($qry)){
$id = $no - 1;
$retArr[$id] = $item;
$retArr[$id]['no'] = $no;
$no++;
}
echo json_encode($retArr);
?>]
Silakan sesuaikan untuk setelan basis datanya dengan setelan komputer kawan-kawan.
Setelah membuat file data/datasiswa.php dan menyimpan skrip tersebut, silakan muat ulang halaman proyek kita tadi. Berikut tampilannya:
 |
| Gambar 3 - Tampilan datagrid siswa di halaman depan yang sudah terhubung ke database |
Sekarang data siswa sudah muncul. Langkah selanjutnya adalah operasi CRUD. Mohon bersabar, ya. :)
Membuat Toolbar DataGrid
Setelah data siswa berhasil muncul, langkah selanjutnya adalah membuat toolbar untuk keperluan CRUD nanti. Tambahkan skrip berikut pada baris ke-24 pada file index.html yang telah kita buat sebelumnya:
[ <div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="siswaFormDialog()">Tambah</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="siswaUbah()">Ubah</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="siswaHapus()">Hapus</a>
</div>]
Kemudian ubah skrip pada baris ke-13 menjadi:
[ <table class="easyui-datagrid" title="Data Siswa" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'data/datasiswa.php',method:'get',toolbar:'#toolbar'">]
Yang saya bold pada skrip di atas menandakan skrip tambahan. Skrip tersebut berarti akan membuat toolbar pada element id toolbar yang sebelumnya sudah kita tambahkan skrip elemen toolbar tersebut.
Berikut tampilannya:
 |
| Gambar 4 - Tampilan datagrid siswa pada halaman depan dengan toolbar untuk proses CRUD |
Membuat Event jQuery untuk CRUD
Tombol-tombol pada toolbar tersebut belum berfungsi karena belum diberikan event. Tiga tombol tersebut berarti memiliki event-event yang berbeda.[lock]
Event Tambah
Jika tombol tambah diklik, maka akan muncul sebuah kotak dialog yang berisi formulir data siswa. Oleh karena itu, kita perlu menambahkan skrip formulir tersebut ke dalam file. Tambahkan skrip berikut pada baris ke-30:
[ <div id="siswaFormDialog" class="easyui-dialog" style="width: 500px; height: 300px; padding: 10px;" closed="true" buttons="#siswaFormDialog-buttons" data-options="modal:true">
<form id="formSiswa" method="post" style="width: 450px;">
<div style="margin-bottom: 10px;">
<input class="easyui-textbox" type="text" required="true" name="nisn" style="width: 100%;" data-options="label:'NISN'"></input>
</div>
<div style="margin-bottom: 10px;">
<input class="easyui-textbox" type="text" name="nama_siswa" style="width: 100%;" data-options="label:'Nama Siswa'"></input>
</div>
<div style="margin-bottom: 10px;">
<input class="easyui-datebox" name="tanggal_lahir" data-options="label: 'Tanggal Lahir'" style="width: 100%;"></input>
</div>
<div style="margin-bottom: 10px;">
<select class="easyui-combobox" id="jenis_kelamin" name="jenis_kelamin" data-options="label: 'Jenis Kelamin',editable: false" style="width:100%;">
<option value="L">L</option>
<option value="P">P</option>
</select>
</div>
</form>
<div id="siswaFormDialog-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="siswaSimpan()" style="width:90px">Save</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#siswaFormDialog').dialog('close')" style="width:90px">Cancel</a>
</div>
</div>]
Setelah skrip di atas ditambahkan, langkah selanjutnya adalah memberikan event saat tombol tambah pada toolbar diklik. Tambahkan skrip berikut pada baris ke-60:
[ <script type="text/javascript">
function siswaFormDialog(){
$('#siswaFormDialog').dialog('open').dialog('setTitle', 'Tambah Data Siswa Baru');
$('#formSiswa').form('clear');
url = 'data/datasiswa_simpan.php';
}
</script>]
Coba sekarang tombol tambah pada toolbar! Berikut tampilannya jika berhasil:
 |
| Gambar 5 - Tampilan kotak dialog formulir tambah data siswa baru |
Setelah kotak dialog formulir tambah data siswa berhasil muncul, langkah selanjutnya adalah membuat event saat tombol save diklik atau dengan kata lain proses penyimpanan data baru ke database.
Tambahkanlah skrip berikut pada baris ke-67 pada file index.html:
Tambahkanlah skrip berikut pada baris ke-67 pada file index.html:
[ function siswaSimpan(){
$('#formSiswa').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
if(result == "\"sukses\""){
$.messager.show({
title: 'Informasi',
msg: 'Berhasil mengeksekusi data siswa!'
});
} else {
$.messager.show({
title: 'Error',
msg: result
});
}
$('#siswaFormDialog').dialog('close');
$('#tabelSiswa').datagrid('reload');
}
});
}]
Kemudian buatlah sebuah file baru di folder data dengan nama datasiswa_simpan.php! Berikut skripnya:
[<?php
$dbHost = 'localhost';
$dbUser = 'root';
$dbPass = '';
$dbName = 'sekolah';
$Koneksi = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
$nisn = $_POST['nisn'];
$nama_siswa = $_POST['nama_siswa'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$tanggal_lahir = $_POST['tanggal_lahir'];
$tahun = substr($tanggal_lahir, 6, 4);
$bulan = substr($tanggal_lahir, 0, 2);
$tanggal = substr($tanggal_lahir, 3, 2);
$tanggal_lahir = $tahun . "-" . $bulan . "-" . $tanggal;
$qry = mysqli_query($Koneksi, "INSERT INTO siswa VALUES(NULL, '$nisn','$nama_siswa','$tanggal_lahir','$jenis_kelamin')");
if($qry){
$data = "sukses";
} else {
$data = $qry;
}
echo json_encode($data);
?>]
Sekarang cobalah untuk menambahkan data siswa baru!
Event Ubah
Setelah event tambah berhasil ditambahkan, selanjutnya adalah memberikan event saat tombol ubah pada toolbar diklik. Silakan tambahkan skrip berikut pada baris ke-92 pada file index.html:
[ function siswaUbah(){
var row = $('#tabelSiswa').datagrid('getSelected');
if(row){
$('#siswaFormDialog').dialog('open').dialog('setTitle', 'Ubah Data Siswa');
$('#formSiswa').form('load', row);
url = 'data/datasiswa_ubah.php?id_siswa=' + row.id_siswa;
} else {
$.messager.show({
title: 'Error',
msg: 'Silakan pilih satu baris!'
});
}
}]
Kemudian buatlah sebuah file baru di folder data dengan nama datasiswa_ubah.php! Berikut skripnya:
[<?php
$dbHost = 'localhost';
$dbUser = 'root';
$dbPass = '';
$dbName = 'sekolah';
$Koneksi = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
$id_siswa = $_GET['id_siswa'];
$nisn = $_POST['nisn'];
$nama_siswa = $_POST['nama_siswa'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$tanggal_lahir = $_POST['tanggal_lahir'];
$tahun = substr($tanggal_lahir, 6, 4);
$bulan = substr($tanggal_lahir, 0, 2);
$tanggal = substr($tanggal_lahir, 3, 2);
$tanggal_lahir = $tahun . "-" . $bulan . "-" . $tanggal;
$qry = mysqli_query($Koneksi, "UPDATE siswa SET nisn = '". $nisn. "', nama_siswa = '". $nama_siswa. "', tanggal_lahir = '". $tanggal_lahir. "', jenis_kelamin = '". $jenis_kelamin. "' WHERE id_siswa='". $id_siswa ."'");
if($qry){
$data = "sukses";
} else {
$data = $qry;
}
echo json_encode($data);
?>]
Cobalah untuk mengubah data siswa dalam datagrid untuk mengetahui hasilnya!
Event Hapus
Setelah event ubah berhasil ditambahkan, selanjutnya adalah memberikan event saat tombol hapus pada toolbar diklik. Silakan tambahkan skrip berikut pada baris ke-107 pada file index.html:
[ function siswaHapus(){
var row = $('#tabelSiswa').datagrid('getSelected');
if(row){
$.messager.confirm('Konfirmasi', 'Apakah Anda yakin ingin menghapus data tersebut?', function(action){
if(action){
$.post('data/datasiswa_hapus.php', {id:row.id_siswa}, function(result){
if(result.success){
$('#tabelSiswa').datagrid('reload');
$.messager.show({
title: 'Informasi',
msg: 'Berhasil menghapus data tersebut!'
});
} else {
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
}
}, 'json');
}
});
} else {
$.messager.show({
title: 'Error',
msg: 'Silakan pilih salah satu baris!'
});
}
}]
Kemudian buatlah sebuah file baru di folder data dengan nama datasiswa_hapus.php! Berikut skripnya:
[<?php
$dbHost = 'localhost';
$dbUser = 'root';
$dbPass = '';
$dbName = 'sekolah';
$Koneksi = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
$id_siswa = intval($_REQUEST['id']);
$qrySiswa = mysqli_query($Koneksi, "DELETE FROM siswa WHERE id_siswa = '$id_siswa'");
if($qrySiswa){
$data = array('success' => true);
} else {
$data = array('errorMsg' => $qrySiswa);
}
echo json_encode($data);
?>]
Cobalah untuk menghapus salah satu data siswa dalam datagrid untuk melihat hasilnya!
Unduh
Unduh proyek pada artikel ini di sini:
[Preview ##download##][/lock]
Penutup
Itulah tutorial dari saya mengenai bagaimana cara Membuat CRUD dengan DataGrid jQuery EasyUI PHP dan MySQL. Kamu bisa menyederhanakan skrip di atas sesuai dengan standar yang kalian miliki. Saya menyukai tampilan EasyUI karena tampak seperti aplikasi desktop dan single page application. Jadi kita tidak perlu memuat ulang halaman peramban (browser) kita setiap melakukan aksi.
Semoga bisa membantu kawan-kawan. Terima kasih. :)
COMMENTS