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