Hallo sahabat, berjumpa lagi di website Dumetschool yang membahas seputar kegiatan pemograman website. Dalam kesempatan ini kita akan Belajar CRUD Dengan jQuery EasyUI. nah CRUD yaitu kita akan melakukan Create, Read, Update dan Delete.
Dalam persiapan Belajar CRUD Dengan jQuery EasyUIÂ yang perlu disiapkan hal pertama buat sebuah table dalam database phpmysql seperti contoh tampilan dibawah ini:
Jika sudah membuat table coba isikan beberapa data sesuai field yang ada dalam table data_siswa berikut contoh yang saya buat:
Baiklah untuk langkah selanjutnya buat file untuk konfigurasi ke databasenya (conn.php)
Jika sudah membuat akses koneksi ke database,lalu kita menampilkan data yang berisi dari table database tadi. Tentu membuat struktur tampilan dengan HTML, coba kita perlahan mengetikkan setiap bagiannya. Sekarang membuat bagian head atau title seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Membuat CRUD Menggunakan jQuery EasyUI</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> |
Jadi jika sudah mengetikkan link css maupun plugin JQuery lalu buat tampilan datagrid yang ada didalam JQuery EasyUI bisa dilihat code dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<body> <div class="container my-5"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <h2 class="text-center">Membuat CRUD Dengan jQuery EasyUI</h2> <p class="text-center">Silahkan Pilih Button Yang Tersedia</p> <table id="dg" title="Data Siswa" class="easyui-datagrid" style="width:600px;height:100%" url="get_siswa.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="nis" width="50">NIS</th> <th field="nama" width="50">Nama</th> <th field="alamat" width="50">Alamat</th> <th field="telpon" width="50">No.Telp</th> </tr> </thead> </table> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Tambah Data</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Data</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Hapus Data</a> </div> <div id="dlg" class="easyui-dialog" style="width:500px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <div class="ftitle">Silahkan Isi Data Anda</div> <form id="fm" method="post" novalidate> <div class="fitem"> <label>NIS:</label> <input name="nis" class="easyui-textbox" required="true"> </div> <div class="fitem"> <label>Nama Siswa:</label> <input name="nama" class="easyui-textbox" required="true"> </div> <div class="fitem"> <label>Alamat:</label> <input name="alamat" class="easyui-textbox"> </div> <div class="fitem"> <label>No.Telp:</label> <input name="telpon" class="easyui-textbox"> </div> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a> </div> </div> <div class="col-md-3"></div> </div> </div> |
Bisa sahabat perhatikan pada tag table, didalam tag th berisi property field. Lalu value dari field harus sesuai yang ada didalam field name table database.
Apabila sahabat sudah selesai mengetikkan code diatas, lanjut step berikutnya buat file untuk menampung perintah query sql tampilkan data. Jangan lupa untuk code dibawah ini saya simpan dengan nama get_siswa.php. Jadi harus sama seperti url yang terdapat pada bagian table code diatas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $page = isset($_POST['page']) ? intval($_POST['page']) : 1; $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10; $offset = ($page-1)*$rows; $result = array(); include 'conn.php'; $rs = mysql_query("select count(*) from data_siswa"); $row = mysql_fetch_row($rs); $result["total"] = $row[0]; $rs = mysql_query("select * from data_siswa limit $offset,$rows"); $items = array(); while($row = mysql_fetch_object($rs)){ array_push($items, $row); } $result["rows"] = $items; echo json_encode($result); ?> |
Maka yang perlu dilakukan selanjutnya sahabat buka pada browser akses folder projectnya ,tentu tidak lupakan harus ada didalm folder xampp/htdocs/folder_project:
Apabila sudah benar maka akan seperti tampilan dibawah ini sesuai dengan yang ada di database table data_siswa.
Saya kira pembahasan artikel kali ini cukup disini karena kita sudah melakukan langkah membuat database serta menambahkan isi tablenya manual dan menampilkan data yang berada di table database.
Maka akan kita lanjutkan pada pembahasan artikel selanjutnya untuk melakukan Insert data melalui form, Edit data dan Delete data.Terima kasih.