w2ui: library jQuery UI membuat aplikasi web menjadi lebih mudah

Hermanto. Beberapa minggu terakhir saya lagi mencoba beberapa jquery ui (user interface) untuk membangun aplikasi database medical record. Saya tertarik untuk mengembangkan dengan menggunakan php dan jquery. Awalnya saya kesulitan dalam mencari framework javascript yang cocok untuk membangun tampilan aplikasi nantinya. Saya sudah mencoba beberapa widgets seperti extjs dari sencha dan beberapa widgets yang dibangun dengan jquery tapi rata-rata berbayar dengan harga yang cukup tinggi. Dengan alasan mencari yang gratis dan open source maka saya menemukan akhirnya menemukan library yang cukup baik untuk menampilkan data pada aplikasi medical records nanti. W2ui memang tidak selengkap dengan jquery ui yang berbayar tapi saya rasa cukup seperti apa yang saya butuhkan. Kamu bisa download w2ui dengan MIT license.

Terdapat beberapa widgets yang nanti sangat dibutuhkan untuk membangun aplikasi yaitu:

Layout
Grid
Toolbar
Sidebar
Tabs
Form
Popup
Utilities

Langkah-langkah membuatnya:

1. Masukkan jquery javascript dan w2ui javascript di halaman web kamu

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="w2ui.min.js"></script>

2. Masukkan w2ui stylesheet yang dibutuhkan untuk tampilan widgets

<link rel="stylesheet" type="text/css" media="screen" href="w2ui.min.css" />

3. Buatlah tampilan grid sederhana untuk menampilkan data sari JSON file

<div id="grid""></div>
<script type="text/javascript">
$(function () {
$('#grid').w2grid({ 
name: 'grid', 
url: 'list.json',
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' }
]
});
});
</script>

4. list.json

{
"total": 4,
"records": [
{ "recid": 1, "fname": "Hermanto", "lname": "Manto", "email": "info@hermanto.com", "sdate": "4/3/2012" },
{ "recid": 2, "fname": "Eka Jumarni Fithri", "lname": "Eka", "email": "info@eka.com", "sdate": "4/3/2012" },
{ "recid": 3, "fname": "Safirah Masturah Ekman", "lname": "Fira", "email": "info@fira.com", "sdate": "4/3/2012" },
{ "recid": 4, "fname": "Muhammad Fikriansyah Ekaman", "lname": "Fikri", "email": "info@fikri.com", "sdate": "4/3/2012" }
]
}

Untuk lebih jelas kamu bisa mengunjungi halaman demo websitenya.

Selamat mencoba, semoga bermanfaat.

tags: jquery, widgets, library, w2ui