## ISSN 2085-4579

## Rancang Bangun Client-Side Mobile Web App Menggunakan JQuery Mobile
Seng Hansun
Program Studi Teknik Informatika, Universitas Multimedia Nusantara, Tangerang, Indonesia hansun@umn.ac.id
Diterima 6 Desember 2013 Disetujui 23 Desember 2013
Abstrak—Mobile operating system market shares always grow from year to year. The issue to make a mobile application in an easy, fast, and reliable way had arisen. Therefore, many UI framework to create mobile web application have been introduced, one of them is jQuery Mobile. jQuery Mobile with its’ ‘write less, do more’ slogan become popular among web mobile developers. In this paper, the author tries to build a stand-alone mobile application using jQuery Mobile as a prototype of Universitas Multimedia Nusantara mobile application. It can be concluded that jQuery Mobile can be used to make a simple application in a fast and rapid changing environment.
Kata kunci — jQuery Mobile, web mobile app, HTML, CSS, JavaScript
I. P endahuluan Pangsa pasar sistem operasi mobile dari tahun ke tahun terus berkembang dengan pesat. Beberapa sistem operasi yang paling populer, seperti Android, iOS, dan Windows Phone, saling bersaing dengan menawarkan beragam fitur yang menarik dan target sasaran yang makin meluas. Gambar 1 memperlihatkan pangsa pasar setiap sistem operasi yang populer di akhir tahun 2011 [1].
Gambar 1. Pangsa pasar sistem operasi mobile [1]
Dalam engadget.com [2], disajikan data perubahan pergerakan pangsa pasar global sistem operasi smartphone di kuartal ke-3 2012 dan kuartal ke-3 2013. Pada data tersebut terlihat dengan jelas sistem operasi Android mengungguli sistem operasi mobile lainnya dengan memegang 81,3% dari keseluruhan pangsa pasar dunia.
Salah satu UI framework yang dapat digunakan untuk mengembangkan aplikasi pada sistem operasi Android adalah jQuery Mobile. Bahkan, tidak hanya sistem operasi Android, jQuery Mobile juga dapat digunakan untuk mengembangkan aplikasi pada platform mobile lainnya, seperti iOS, BlackBerry, Windows Phone, Symbian, dan sebagainya. Dengan menggunakan jQuery Mobile, mobile developer dimudahkan dengan cukup mengembangkan aplikasi satu kali dan dapat digunakan di berbagai platform yang berbeda tanpa harus melakukan pemrograman ulang. Oleh sebab itu, pemanfaatan dan penerapan jQuery Mobile untuk membangun suatu aplikasi mobile semakin banyak ditemukan.
Pada paper ini akan dijabarkan dengan singkat pemanfaatan jQuery Mobile, kebutuhan yang diperlukan, dan cara penerapannya. Selanjutnya, penulis mencoba untuk membangun suatu web mobile application yang berjalan di sisi client dengan menggunakan jQuery Mobile.
II. j Q uery M obile
jQuery Mobile adalah suatu sistem user interface berbasis HTML5 yang didesain untuk membuat situs web dan aplikasi yang dapat diakses oleh semua perangkat smartphone , tablet , dan desktop [3]. Dengan demikian, web mobile developer cukup menulis program sekali untuk membangun aplikasi atau situs web yang diinginkannya, dan aplikasi atau situs web tersebut dapat berjalan dengan lancar di hampir
seluruh platform yang ada, seperti Android, BlackBerry, Windows, Bada, Symbian, iOS, MeeGo, bahkan platform HTML5 yang baru, seperti Boot2Gecko dan Tizen.
jQuery Mobile dibangun dengan menggunakan HTML5, CSS3, dan library JavaScript jQuery yang sangat populer [4]. Dengan demikian, pengetahuan dasar akan ketiga hal tersebut mutlak diperlukan oleh seorang developer yang tertarik untuk memanfaatkan jQuery Mobile ini.
A. Mengapa jQuery Mobile? Broulik [5] menjelaskan beberapa alasan mengapa jQuery Mobile populer digunakan oleh para developer saat ini:
1.  Memiliki akses yang universal
Aplikasi jQuery Mobile dapat diakses secara universal oleh seluruh perangkat melalui web browser . Bahkan jika ingin dijadikan sebagai aplikasi stand-alone yang berjalan di sisi client , hal ini dimungkinkan dengan berbagai IDE ( Integrated Development Environment ) yang ada.
2.  UI yang seragam di seluruh platform mobile
jQuery Mobile menyediakan suatu antarmuka pengguna yang seragam dengan memanfaatkan standar-standar HTML5 dan CSS3.
3.  Pengembangan berbasis Markup yang disederhanakan
Laman-laman jQuery Mobile diatur dengan menggunakan HTML5 markup .
4. Perbaikan yang signifikan
jQuery Mobile akan me- render tampilan dengan pengalaman user yang paling baik yang dimungkinkan bagi suatu perangkat.
5.  Desain dan form yang responsif jQuery Mobile UI akan me- render tampilan secara responsif berdasar pada ukuran layar yang berbeda-beda.
6.  Build Once, Run Anywhere
Cukup mengembangkan satu aplikasi, dan aplikasi tersebut dapat berjalan di seluruh perangkat pelanggan.
7.  Tematik
jQuery Mobile mendukung suatu desain yang tematik yang memungkinkan desainer untuk mengganti style UI aplikasi secara bebas.
8.  Akses bagi para penderita cacat tubuh Seluruh aplikasi jQuery Mobile mengikuti 508 Compliant (yang berarti aplikasi dapat diakses oleh para penderita cacat) secara default .
B. Atribut-Atribut jQuery Mobile Sebelum dapat memanfaatkan dan membangun aplikasi dengan jQuery Mobile, library-library yang dibutuhkan harus diunduh atau dirujuk terlebih dahulu melalui laman code. jquery.com [6]. Setelah itu, berbagai atribut dan fitur yang ditawarkan jQuery Mobile dapat digunakan.  Beberapa  atribut  dan  fitur  tersebut diantaranya sebagai berikut [7]:
1.  jQuery Mobile Pages
2.  jQuery Mobile Transitions
3.  jQuery Mobile Buttons
4.  jQuery Mobile Icons
5.  jQuery Mobile Popups
6.  jQuery Mobile Toolbars
7.  jQuery Mobile Navbars
8.  jQuery Mobile Panels
9.  jQuery Mobile Collapsibles
10.  jQuery Mobile Tables
11.  jQuery Mobile Grids
12.  jQuery Mobile List Views 13.  jQuery Mobile List Content 14.  jQuery Mobile Filter Items
15.  jQuery Mobile Form Basic 16.  jQuery Mobile Form Inputs
17.  jQuery Mobile Form Select
18.  jQuery Mobile Form Sliders
19.  jQuery Mobile Themes
20.  jQuery Mobile Events
21.  jQuery Mobile Touch 22.  jQuery Mobile Scroll 23.  jQuery Mobile Orientation 24.  jQuery Mobile Page Events
Penjelasan lebih lengkap disertai contoh- contoh pemanfaatan tiap elemen yang disebutkan di atas dapat dipelajari lebih lanjut dalam

## ISSN 2085-4579
w3schools.com.
C. jQuery Mobile IDE IDE ( Integrated Development Environment ) yang dapat digunakan untuk mengembangkan aplikasi jQuery Mobile sangatlah beragam, mulai dari Notepad, Adobe Dreamweaver, hingga JS Bin. JS Bin sendiri merupakan suatu aplikasi web open source yang dibangun oleh Remy Sharp, yang memungkinkan user untuk memasukkan code HTML, CSS, dan JavaScript secara online , serta menyisipkan library-library jQuery dan  jQuery  Mobile  [4].  Beberapa  fitur  yang ditawarkan oleh JS Bin, diantaranya adalah [8]:

## 1.  Saving
Seluruh code HTML, CSS, dan JavaScript yang diketik akan di- render dan disimpan secara otomatis.
2.  History
Jika user melakukan register dan logged in , seluruh data user akan disimpan dan dapat digunakan kembali dengan daftar preview yang lengkap.
3.  Sharing
User dapat melakukan share data bins , juga dapat menyisipkan dan melakukan hal-hal lainnya.
III. r ancang b angun c lient - side M obile W eb a PP dengan j Q uery M obile Penulis mencoba untuk membangun suatu mobile web application yang berjalan secara stand-alone di sisi client dengan menggunakan jQuery  Mobile.  Beberapa  fitur  yang  ada diterapkan dengan memanfaatkan kemudahan user interface yang responsif. Tampilan utama aplikasi yang dibuat dapat dilihat pada gambar 2.
Gambar 2. Laman utama aplikasi
Pada laman utama ini, terdapat beberapa button dan icon yang diletakkan di bagian navigation bar . Pada bagian badan laman, terdapat beberapa gambar yang bila diklik akan menampilkan popup box seperti yang ditampilkan pada gambar 3.
Gambar 3. Tampilan jika salah satu gambar di badan laman utama diklik
Pilihan menu yang ditampilkan dalam navigation bar, diantaranya adalah UMN Profile, Our Programme, Campus Facilities, dan Contact Us. Menu UMN Profile dan Contact Us menerapkan cara yang sama seperti pada saat gambar-gambar di badan laman utama diklik, yakni dengan memanfaatkan popup box , seperti yang ditunjukkan pada gambar 4 dan 5 di bawah.
Gambar 4. Popup box UMN Profile saat menu UMN Profile diklik
Gambar 5. Popup box Contact Us
Selanjutnya pada menu Our Programme, dimanfaatkan fitur list views untuk menampilkan beberapa program studi yang ditawarkan di UMN (gambar 6). Jika salah satu item diklik, maka akan ditampilkan informasi yang lebih detail terkait item yang dipilih tersebut dalam bentuk popup box , seperti yang diperlihatkan oleh gambar 7 selanjutnya.
Gambar 6. Tampilan saat menu Our Programme dipilih
Gambar 7. Tampilan saat salah satu item dipilih
Sementara, pada menu Campus Facilities diterapkan  salah  satu  fitur  unggulan  lainnya dalam jQuery Mobile, yakni collapsibles . Gambar 8 memperlihatkan tampilan awal saat menu Campus Facilities diklik.
Gambar 8. Tampilan saat menu Campus Facilities dipilih
Jika salah satu item dipilih, maka akan dimunculkan dalam urutan ke bawah, dan menutup item yang telah dimunculkan sebelumnya secara otomatis.
Gambar 9. Tampilan saat salah satu item dipilih
IV. s iMPulan jQuery Mobile sebagai salah satu UI framework yang populer digunakan dalam membangun suatu aplikasi web mobile menawarkan beragam kemudahan  dan  fitur  yang  menarik.  Dengan pemahaman konsep dasar mengenai HTML, CSS, dan JavaScript, seorang mobile web programmer dapat membuat aplikasi mobile web yang menarik dengan cepat dan mudah. Pada percobaan ini, penulis berhasil memanfaatkan jQuery Mobile untuk membuat suatu aplikasi mobile Android yang berjalan secara stand-alone di sisi client .
d aFtar P ustaka
[1] Hadlock, K., 2012, jQuery Mobile: Develop and Design, Peachpit Press, Berkeley, USA.
[2] Engadget. http://www.engadget.

## ISSN 2085-4579
com/2013/10/31/strategy-analytics-q3-2013- phone-share/, diakses 3 November 2013.
[3] jQuery Mobile. http://jquerymobile.com/, diakses 23 November 2013.
[4] Jain, C. K., 2012, jQuery Mobile Cookbook, Packt Publishing, Birmingham, UK.
[5] Broulik, B., 2011, Pro JQuery Mobile, Apress, New York.
[6] jQuery. http://code.jquery.com/, diakses 23 November 2013.
[7] w3schools.com. http://www.w3schools. com/jquerymobile/jquerymobile_install.asp, diakses 30 November 2013.
[8] JS Bin. http://jsbin.com/welcome/1/edit, diakses 5 Desember 2013.