Anda di halaman 1dari 10

Pengantar jQuery Mobile

Yudi Wibisono (yudi@upi.edu)


Ilmu Komputer Universitas Pendidikan Indonesia (cs.upi.edu)
versi (BETA): Mar 2013

http://creativecommons.org/licenses/by-nc-sa/3.0/
Modul ini bebas dicopy, didistribusikan, ditransmit dan diadaptasi/dimodifikasi/diremix dengan syarat tidak untuk komersial, pembuat asal tetap
dicantumkan dan hasil modifikasi dishare dengan lisensi yang sama.

Pengantar Modul
Modul praktikum ini dibuat untuk mendukung praktikum matakuliah Mobile Computing di
Ilmu Komputer Universitas Pendidikan Indonesia (UPI) (cs.upi.edu). Diasumsikan pengguna
modul ini telah mengenal dasar-dasar HTML, CSS dan Javascript.

Mengapa web app?


Sejalan dengan semakin tingginya kemampuan smartphone (memori dan prosesor), maka
kemampuan mobile browser juga semakin meningkat. Web app yang menggunakan browser
mempunyai beberapa kelebihan dibandingkan native app diantaranya:

1. Menggunakan teknologi standard: HTML, CSS dan Javascript.


2. Dapat dijalankan di platform yang berbeda (iOS, Android, Windows Phone, Blackberry)
3. Tidak membutuhkan proses kompilasi, ubah code, reload di browser (development
lifecycle lebih cepat)
4. Proses publikasi dan diseminasi app lebih cepat, tidak membutuhkan persetujuan untuk
masuk ke store (app store atau Google play)

Tetapi tentu saja ada kelemahan web app dibandingkan native, diantaranya:
1. Membutuhkan koneksi internet.
2. Tidak dapat mengakses hardware termasuk sensor dengan mudah.
3. Aplikasi berjalan lebih lambat, terutama untuk aplikasi yang membutuhkan banyak
resources .

1
4. Proses mendapatkan uang lebih sulit karena harus ditangani sendiri.

Sekilas jQuery Mobile


jQuery Mobile adalah framework berbasis jQuery yang memudahkan kita untuk membuat web
app untuk mobile. Selain jQuery mobile sebenarnya banyak framework lain yang dapat
digunakan seperti Sencha, jTouch, DHTMLX Touch, Jo dan lainnya. Kelebihan jQuery adalah:
1. Support banyak platform: Webkit (Android, iOS, Opera, Chrome), Firefox mobile,
Windows Phone, Blackberry, Bada, Meego.
2. Berbasis JQuery yang populer.
3. Penggunanya banyak dan forum aktif.

jQuery Mobile menyediakan komponen UI widget seperti button, listview, header dan elemen
form dan navigasi.

Instalasi
Siapkan web server seperti XAMPP. Jika menggunakan Chrome, sebaiknya install Ripple
Emulator untuk melihat preview web app di browser mobile. Dengan Ripple, kita dapat
mencoba webapp untuk berbagai platform tanpa emulator.

https://chrome.google.com/webstore/detail/ripple-emulator-
beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en  http://bit.ly/10VCTsK

Gambar 1 Contoh Ripple

Download jQueryMobile di http://jquerymobile.com/download dan ekstrak ke localhost atau


target hosting.

2
File css dan js jQueryMobile sendiri sebenarnya tidak perlu di-download karena dapat
digunakan melalui CDN (Content Delivery Network). Contoh deklarasinya adalah sebagai
berikut:

Code 1

Kelebihan menggunakan CDN adalah jika browser telah memiliki cache file maka tidak perlu
lagi didownload sehingga lebih cepat. Tetapi jika anda mengembangkan web app secara lokal
dalam kondisi sering tidak terkoneksi dengan internet, maka library dapat di-download manual
di: code.jquery.com/jquery-1.8.2.min.js , code.jquery.com/mobile/1.2.0/jquery.mobile-
1.2.0.min.js dan http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css (buka
dibrowser dan pilih save-page-as) . Contoh deklarasi dengan lib diletakkan lokal di direktori
yang sama dengan file html-nya adalah sebagai berikut:

Code 2

Untuk code diatas, isi direktori akan tampak seperti berikut. Direktori images didapat dengan
mendownload di jQueryMobile.com/download

3
Gambar 2 Struktur File

UI Widget
UI widget yang dibahas dalam modul ini adalah ListView, Button dan Form.

Page dan ListView


Selanjutnya kita akan membuat web app pertama yang menampilkan tahun. Buat file
index.html dengan kode sebagai berikut, pastikan struktur direktori sudah seperti Gambar 2:

Code 3

Ada tiga atribut penting pada kode diatas yang sangat mudah dimengerti, pertama “page”,
“header”, “content” dan “listview”. Atribut data-inset=”true” menyatakan bentuk listview,
jika ini dihilangkan maka listview akan berbentuk kotak tidak bersudut. Detil tentang UI widget

4
ini dan lainnya dapat dilihat di: http://localhost/jquery.mobile-1.2.0/demos/docs/lists/index.html
(ekstrak download dari jQuerymobile.com ke localhost)

tampilan tanpa menggunakan Ripple di Browser akan seperti ini

Gambar 3

Tapi jika Ripple diaktifkan (jika belum diinstall download di http://bit.ly/10VCTsK)

Gambar 4

Maka hasilnya akan seperti ini:

Gambar 5

Selanjutnya kita akan membuat daftar_mhs.html yang akan dipanggil saat tahun diklik. Untuk
setiap baris, akan ditampilkan foto setiap mahasiswa. Buat dua image berukuran sekitar 128x128
beri nama mhs1.jpg dan mhs2.jpg dan letakkan di direktori yang sama dengan index.htm. Lalu
buat code berikut:

5
Code 4

Bagian yang dilingkari adalah tambahan dari code sebelumnya. Atribut data-add-back-btn
menambahkan tombol “back” pada header untuk kembali ke page sebelumya. data-filter untuk
menambahkan fasilitas filter isi dari listview (bukan search). Sedangkan <img> untuk
menambahkan foto mahasiswa di dalam listview. Preview dapat dilihat pada gambar berikut:

6
Gambar 6

Grid Layout & Button

Selanjutnya saat seorang mahasiswa diklik, kita ingin data mahasiswa tersebut ditampilkan.
Berikut adalah code untuk menampilkan data.

<!DOCTYPE HTML>
<html>
<head>
... sama dengan sebelumnya ....
</head>
<body>
<div data-role="page" id="mhs1" data-add-back-btn="true" >
<div data-role="header">
<h1>Info Mhs Wali</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-grid-a" id="info_penting">
<div class="ui-block-a">
<h1>Budi Martami</h1>
<p><strong>NIM: 080033 </strong></p>
<p>Prestasi</p>
<ul>
<li>Mahasiswa Teladan</li>
<li>Ketua Himpunan</li>
</ul>
</div>
<div class="ui-block-b">
<p><img src="mhs1.jpg" alt="Foto Yudi Wibisono"/></p>
<p><a href="http://yudiwbs.wordpress.com" rel="external"
data-role="button"> Blog Mhs</a></p>
</div>
</div>
<div id="alamat">
<h3>Alamat Rumah:</h3>
<p>Sarijadi Blok 23</p>
<h3>Alamat Ortu:</h3>

7
<p>Jl. Dukuhsalam, Tegal, Jateng</p>
</div>
<div id="kontak">
<a href="https://maps.google.com/maps?ll=-
6.862072,107.594862&spn=0.006956,0.011362&sll=-
6.193424,106.839147&sspn=0.006965,0.011362&z=17"
data-role="button" data-icon="maps"> Alamat Rumah
</a>
<a href="tel:022201213123" data-role="button" data-icon="tel">
Telp HP
</a>
</div>
</div> <!-- /content -->
</div><!-- /page -->
</body>
</html>

Code 5

Hasil dari code tersebut adalah sebagai berikut:

Gambar 7

Grid layout digunakan untuk menampilkan informasi teks disebelah kolom kiri dan foto di
kolom kanan. Dapat dilihat penggunaan atribut ui-grid-a untuk menyatakan layout dengan dua

8
kolom dan ui-block-a dan ui-block-b untuk menyatakan bagian kolom pertama dan kedua. Jika
yang diinginkan adalah layout dengan 3 kolom gunakan ui-grid-b, ui-grid-c untuk 4 kolom dan
ui-grid-d untuk 5 kolom.

Untuk menampilkan button, gunakan atribut “data-role=button”. Pada bagian bawah ada dua
button untuk peta dan telepon. Menggunakan browser biasa dengan emulator Ripple jika tombol
ini diklik maka tidak akan muncul hasil apapun. Tetapi jika menggunakan emulator android.
Maka saat tombol tersebut ditekan akan muncul peta dan dial-pad

Gambar 8

Untuk menjalankan emulator Android, download Android SDK di


http://developer.android.com/sdk . Untuk mengakses localhost, gunakan alamat 10.0.2.2
Browser pada emulator tentunya lebih lambat daripada menggunakan browser desktop.

9
Latihan:
Buatlah web app statik untuk informasi kuliah. Mulai dari pilih matakuliah. Lalu ada pilihan
berikutnya yaitu pengajar, silabus dan jadwal. Jika dipilih menu pengajar akan ditampilkan page
berisi data dosen (nama, nip, email kontak). Untuk silabus akan ditampilkan page berisi isi
pertemuan minggu ke-1 sd minggu ke-12. Sedangkan untuk jadwal tampilkan hari, jam dan
ruangan.

Form
<TBD>

10

Anda mungkin juga menyukai