Pengantar Jquery Mobile
Pengantar Jquery Mobile
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.
Tetapi tentu saja ada kelemahan web app dibandingkan native, diantaranya:
1. Membutuhkan koneksi internet.
2. Tidak dapat mengakses hardware termasuk sensor dengan mudah.
1
3. Aplikasi berjalan lebih lambat, terutama untuk aplikasi yang membutuhkan banyak
resources .
4. Proses mendapatkan uang lebih sulit karena harus ditangani sendiri.
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 mobile browser. Dengan Ripple, kita dapat
mencoba webapp untuk berbagai platform tanpa emulator. Buka URL di bawah ini dalam
Chrome:
https://chrome.google.com/webstore/detail/ripple-emulator-
beta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en http://bit.ly/10VCTsK
2
Gambar 1 Contoh Ripple
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
ada proses download sehingga lebih cepat. Tetapi jika anda mengembangkan web app secara
lokal dalam kondisi sering tidak terkoneksi dengan internet, maka copy jquery.mobile-
1.2.0.min.js, jquery.mobile-1.2.0.min.css dan direktori /image hasil download ke direktori tempat
web app. Sedangkan untuk lib jquery-nya sendiri dapat diperoleh di code.jquery.com/jquery-
1.8.2.min.js (buka dibrowser dan pilih save-page-as). Contoh deklarasi dengan file lib diletakkan
pada direktori yang sama dengan file html-nya adalah sebagai berikut:
3
Code 2
4
Untuk code diatas, isi direktori akan tampak seperti berikut
UI Widget
UI widget yang dibahas dalam modul ini adalah ListView, Button dan Form.
Code 3
Ada tiga atribut penting pada kode diatas, 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 ini dan lainnya dapat dilihat di:
5
http://localhost/jquery.mobile-1.2.0/demos/docs/lists/index.html (ekstrak download dari
jQuerymobile.com ke localhost)
Gambar 3
Gambar 4
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:
6
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 listview (bukan search). Sedangkan <img> untuk menambahkan
foto mahasiswa di dalam listview. Preview dapat dilihat pada gambar berikut:
7
Gambar 6
Selanjutnya saat seorang mahasiswa di-klik, kita ingin data mahasiswa tersebut ditampilkan.
Berikut adalah code untuk menampilkan data. Grid layout dapat digunakan untuk lebih
memudahkan menampilkan komponen informasi. Sebagai contoh code dibawah menggunakan
layout dengan dua kolom (ui-grid-a)
<!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>
8
<div id="alamat">
<h3>Alamat Rumah:</h3>
<p>Sarijadi Blok 23</p>
<h3>Alamat Ortu:</h3>
<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
Gambar 7
9
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
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; 4 kolom adalah ui-grid-c dan
5 kolom adalah ui-grid-d.
Untuk menampilkan button, gunakan atribut “data-role=button”. Pada bagian bawah ada dua
button untuk peta dan telepon. Jika tombol ini diklik dalam Chrome dengan emulator Ripple
maka tidak akan muncul hasil apapun. Tetapi jika menggunakan emulator android. Maka saat
tombol tersebut ditekan akan muncul peta dan dial-pad
Gambar 8
10
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.
Tab
Misalnya kita ingin membuat tiga tab untuk data mahasiswa seperti gambar di bawah.
Gambar 9
Untuk menambahkan tab, gunakan “data-role=navbar”, tambahkan setelah header dan sebelum
content. Nantinya sesuaikan isi href dengan link sesunguhnya.
Code 6
11
Form
Form pada jquery mobile mengikuti standard HTML, yang perlu dipastikan adalah atribut id
pada elemen form harus unik, tidak hanya untuk page, tetapi untuk seluruh web-app.
12
Sekarang kita akan menambahkan flipbutton, tambahkan kode berikut di bawah elemen slider
(bagian yang dilingkari).
hasilnya
JQM menyediakan element dengan ukuran yang lebih kecil. Tambahkan atribut data-
mini="true" pada elemen. Sebagai contoh jika kode diatas ditambahkan atribut data-mini=true
Hasilnya dapat dilihat pada gambar bagian kanan di bawah, perhatikan ukurannya yang lebih
kecil dibandingkan ukuran normal pada gambar bagian kiri.
13
Field Container
Gunakan div dengan atribut data-role=”field-contain” untuk format label yang lebih rapi pada
device dengan ukuran yang lebih besar. Pada code berikut ditambahkan div field-container untuk
setiap elemen form.
Perhatikan efeknya, disebelah kiri tidak menggunakan field-contain sedangkan disebelah kanan
menggunakan field-contain.
14
CheckBox
Checkbox memungkinkan pengguna untuk memilih lebih dari satu pilihan. Contoh codenya
adalah sebagai berikut (tambahkan pada kode sebelumnya).
Tambahkan atribut data-type="horizontal" agar posisi checkbox menjadi satu baris (gambar
dibawah)
15
Radio Button
Berbeda dengan checkbox, pada radiobutton pengguna hanya dapat memilih satu pilihan.
Seperti halnya checkbox, dapat ditambahkan data-type =”horizontal” untuk membuat semua
pilihan ada dalam satu baris.
Text
Selain type=”text” dapat digunakan juga type lain seperti “password”, “date” dan lainnya
(standard HTML5). Code dibawah memperlihatkan contoh penggunaan text, date dan textarea.
16
Hasilnya akan seperti ini:
Select Menu
Fungsi select mirip seperti radiobutton, pengguna hanya dapat memilih satu pilihan. Select cocok
untuk kasus jawaban dengan pilihan yang banyak sehingga lebih sedikit menggunakan tempat.
17
dan hasilnya sebagai berikut
Catatan:
Jika menggunakan PHP, anda dapat menambahkan atribut data-ajax="false" pada tag <form>
agar lebih mudah didebug. Jika tidak, maka error yang keluar hanya "undefined" saja.
Latihan:
Buatlah web app dinamik untuk memasukkan data mahasiswa berisi NIM, NAMA, jalur masuk
(hanya satu), hobi (bisa lebih dari satu). Program terdiri dari dua page, page pertama
menampilkan data mahasiswa dalam bentuk tabel (satu mhs satu baris), page kedua untuk
memasukkan data. Gunakan PHP+MySQL.
18