W2UI adalah salah satu Library UI jQuery yang sederhana dan mudah dipelajari. Bagi kamu yang berminat di web programming, tidak ada salahnya untuk mencoba library yang satu ini. :)
Artikel saya kali ini mengenai jQuery Library, W2UI. Awalnya, saya sedang mencari alternatif selain ExtJS untuk membuat aplikasi desktop-like hingga akhirnya tersasar pada sebuah jQuery UI Library yang satu ini.
Silakan periksa perubahannya di browser kesayangan kamu! ^^
Berikut adalah tampilan dari skrip di atas:
Kesan pertama, library ini terlihat tidak rumit atau tidak serumit ExtJS karena masih terasa struktur file programmer menengah ke bawah. Berbeda dengan ExtJS yang struktur filenya cukup terbilang rumit, Masya Allah. Selain karena sederhana, W2UI juga memiliki tampilan yang cukup bagus dan layak untuk dicoba hingga akhirnya pada saat yang sama, saya langsung membuat tutorial ini.
Berikut adalah tutorial persiapan membuat CRUD dengan W2UI dan MySQLi:
Unduh File Library W2UI
Ada beberapa opsi yang dapat kamu pilih untuk menggunakan file library W2UI: pertama, kamu bisa menggunakannya langsung dari situsnya W2UI; kedua, kamu bisa menggunakan file eksternal W2UI yang sudah kamu unduh dari laman resminya.
Buat File Index untuk Halaman Depan
Setelah kamu mengunduh file yang dibutuhkan untuk tutorial kita kali ini, selanjutnya adalah membuat file index untuk halaman depan kita nanti. Silakan salin skrip berikut sekalian pelajari juga dong dan simpan dengan nama index.php:
<!DOCTYPE html>
<html>
<head>
<title>Membuat CRUD dengan W2UI dan MySQLi</title>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
<body>
<div id="grid" style="width: 100%; height: 250px;"></div>
</body>
<script>
$(function () {
$('#grid').w2grid({
name: 'grid',
header: 'List of Names',
columns: [
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'lname', caption: 'Last Name', size: '30%' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' }
],
records: [
{ recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' },
{ recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' },
{ recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' },
{ recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' },
{ recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' },
{ recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' }
]
});
});
</script>
</html>
Silakan periksa perubahannya di browser kesayangan kamu! ^^
Berikut adalah tampilan dari skrip di atas:
 |
| Gambar 1: Tampilan dari file index.php yang tadi dibuat |
Membuat Tampilan CRUD
Setelah skrip yang kita buat tadi (sebenernya disalin sih) dan tampilan sudah sesuai dengan Gambar 1, langkah selanjutnya adalah membuat tampilan untuk CRUD. Silakan salin skrip berikut dan timpa (paste) di file index.php:
<!DOCTYPE html>
<html>
<head>
<title>Membuat CRUD dengan W2UI dan MySQLi</title>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.rc1.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.rc1.min.js"></script>
</head>
<body>
<div id="grid" style="width: 50%; height: 300px;"></div>
</body>
<script>
$(function () {
$('#grid').w2grid({
name: 'grid',
header: 'Daftar Pengguna',
show: {
header: true,
footer: true,
toolbar: true,
lineNumbers: true,
toolbarAdd: true,
toolbarDelete: true,
toolbarSave: true,
toolbarEdit: true
},
columns: [
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'lname', caption: 'Last Name', size: '30%' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' }
],
records: [
{ recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' },
{ recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' },
{ recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' },
{ recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' },
{ recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' },
{ recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' }
]
});
});
</script>
</html>
Keterangan
- Nama grid harus unik atau dengan kata lain jangan sampai digunakan untuk grid yang lain. Misalnya: ada dua tabel yang akan kita gunakan, yaitu tabel pengguna dan tabel pekerjaan. Kedua tabel tersebut tidak boleh menggunakan nama grid yang sama (misalnya: grid1 atau grid2), tetapi harus menggunakan nama grid yang berbeda. Kamu bisa menggunakan format seperti ini: gridPengguna atau gridPekerjaan agar berbeda.
- Jika kamu memiliki beberapa grid dalam satu modul, pastikan untuk tetap unik juga! Pokoknya jangan sampai memiliki nama grid yang sama. W2UI sudah menangani penggunaan grid dengan cara dipanggil atau include agar tidak terjadi bentrok nama grid.
- Pencarian yang tidak dideklarasikan indikatornya, maka pencariannya bersifat umum. Artinya, kita mencari di semua kolom.
Tampilan dari skrip di atas adalah sebagai berikut:
 |
| Gambar 2: Tampilan CRUD berdasarkan skrip di atas |
Kesimpulan
Hingga tahap ini, tampilan CRUD sudah selesai. Langkah selanjutnya adalah bagaimana tutorial kita kali ini dapat berhubungan dengan database sehingga terlihat keren. Hahaha...
Terima kasih sudah bergabung dan semoga bermanfaat. :)
COMMENTS