Pengantar jQuery Mobile

Yudi Wibisono (yudi@upi.edu) Ilmu Komputer Universitas Pendidikan Indonesia (cs.upi.edu) versi (BETA): 17 Mar 2013
Cek versi terakhir di: http://yuliadi.com/ilkom

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 . 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 berbasis touch untuk mobile platform. Selain jQuery mobile sebenarnya ada 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 dengan forum yang 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 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-emulatorbeta/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en http://bit.ly/10VCTsK

Gambar 1 Contoh Ripple

Download jQueryMobile di http://jquerymobile.com/download target hosting. File css dan js

dan ekstrak ke localhost atau

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.mobile1.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/jquery1.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:

Code 2

Untuk code diatas, isi direktori akan tampak seperti berikut

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 pilihan 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, 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 jQuerymobile.com ke localhost)

(ekstrak download dari

tampilan tanpa menggunakan Ripple di browser Chrome 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:

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:

Gambar 6

Grid Layout & Button

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>

<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

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 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

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 browser desktop.

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. Slider dan Flipbutton Berikut adalah contoh form yang menggunakan elemen slider

12

Sekarang kita akan menambahkan flipbutton, tambahkan kode berikut di bawah elemen slider (bagian yang dilingkari).

hasilnya

Elemen Ukuran Mini JQM menyediakan element dengan ukuran yang lebih kecil. Tambahkan atribut datamini="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).

Hasilnya akan seperti ini:

Tambahkan atribut data-type="horizontal" agar posisi checkbox menjadi satu baris (gambar dibawah)

Codenya adalah sebagai berikut:

15

Radio Button Berbeda dengan checkbox, pada radiobutton pengguna hanya dapat memilih satu pilihan. Contoh code-nya adalah seperti berikut:

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. Contoh codenya adalah sebagai berikut:

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. Catatan: contoh penggunaan PHP dengan Jquerymobile dapat dilihat di http://yuliadi.com/m dan source codenya dapat didownload di: http://yuliadi.com/file/index.php?dir=mobcomp%2F&file=mobile-si-wali_versilengkap.zip

AJAX untuk mengisi data

[TBD]

18