jQuery Mobile
jQuery adalah library javascript (kumpulan kode javascript) yang
menyederhanakan document traversing, event handling, animating dan
AJAX interactions untuk pengembangan web secara cepat.
L Dalam mempelajari Jquery
Mobile sebaiknya Anda sudah
jQuery Mobile adalah sebuah framework (kerangka kerja) mengetahui hal-hal dasar dari :
yang dibangun atas jQuery yang menyediakan elemen-elemen user • HyperText Markup Language (HTML)
interface (antarmuka) dan fitur-fitur untuk aplikasi web mobile yang • Cascade Style Sheet (CSS)
dapat berjalan di berbagai perangkat mobile maupun desktop (Cross • Javascript
flatform). • Hypertext Preprocessing (PHP)
jQuery dirilis pada tahun 2006 oleh John Resig di BarCamp
berlisensi dibawah MIT dan GPL.
jQuery/jQuery Mobile memiliki semboyan "Write Less, Do ] Untuk melihat galeri web mobile
More", yaitu dengan mengetikkan sedikit kode dapat melakukan yang menggunakan jQuery Mobile Anda
banyak hal, sehingga Anda dapat lebih cepat dan mudah dalam dapat mengunjungi situs :
mengembangkan sebuah aplikasi web mobile yang canggih, dinamis [Link]
dan interaktif.
Beberapa hal yang dapat dilakukan dengan menggunakan framework jQuery Mobile:
• Dapat membuat seluruh interface dasar dalam HTML, tanpa perlu menulis satu baris JavaScript.
• Mendeteksi events mobile device dan touchscreen seperti tap, tap-and-hold, swipe, dan orientation change.
• Memastikan bahwa user-interace bekerja pada web browser.
• Menggunakan theme (tema) yang dapat memudahkan dalam mengatur tampilan aplikasi web mobile.
Kelebihan aplikasi web yang menggunakan framework jQuery Mobile, yaitu :
1. Universal Access, maksudnya aplikasi web mobile dapat diakses secara universal dari berbagai platform
(Android, iOS, Blackberry, dsb).
2. Unified User Interface Across Platform, maksudnya tampilan antarmuka yang seragam di berbagai platform.
3. Responsive Design, maksudnya tampilan aplikasi web mobile akan menyesuaikan dengan berbagai
ukuran screen dari berbagai perangkat mobile secara otomatis.
4. Build Once Run Anywhere, maksudnya dengan hanya membuat sebuah aplikasi sudah dapat dijalankan
di berbagai platform. Lain halnya dengan aplikasi native yang harus dibuat tersendiri untuk platform
yang berbeda-beda.
Untuk informasi supported flatform yang terupdate Anda dapat mengunjungi [Link]
Cara menyisipkan jQuery Mobile
Untuk menyisipkan jQuery Mobile pada project aplikasi web
mobile ada dua cara yang digunakan, yaitu :
b Tools yang harus disiapkan dalam
membuat web mobile diantaranya :
1. Menggunakan CDN • Text Editor/Web Editor (Notepad++
CDN (Content Delivery Network) digunakan untuk atau Adobe Dreamweaver)
mendistribusikan file-file yang sering digunakan pada web. • Web Browser (Google Chrome dan
Untuk menyisipkan jQuery Mobile menggunakan CDN Opera Mobile Emulator)
cukup menyertakan link stylesheet (.css) dan library javascript • jQuery dan jQuery Mobile
(.js) pada file web (HTML, PHP, dsb). (download di [Link]
Untuk menggunakan CDN, harus terhubung dengan com/
internet. Kode yang harus diketikkan diantara tag header PRAKTEK
<head> pada file web adalah sebagai berikut: 4 Simpan file jQuery dan jQuery
kedalam folder project, kemudian
1. <link rel="stylesheet" href="[Link]
mobile/1.4.5/[Link]"> sisipkan kode dibawah diantara tag
2. <script src="[Link] <head> file HTML :
1. <meta name="viewport"
js"></script>
content="width=device-width,
3. <script src="[Link]
height=device-height, initial-
[Link]"></script> scale=1, maximum-scale=1" />
2. Local atau Offline 2. <link rel="stylesheet" type="text/
Untuk menyisipkan jQuery Mobile secara offline, css" href="latihan_web_mobile/
terlebih dahulu file jQuery harus didownload melalui http:// [Link]-1.3.2/jquery.
[Link]" />
[Link]/ kemudian diletakkan di dalam direktori
3. <script src="latihan_web_mobile/
yang sama dengan project. Kode yang harus diketikkan diantara jquery/[Link]"></
tag header <head> pada file web adalah sebagai berikut: script>
1. <link rel="stylesheet" href="[Link]. 4. <script src="latihan_web_mobile/
[Link]-1.3.2/jquery.
css">
[Link]"></script>
2. <script src="[Link]"></script>
3. <script src="[Link]"></script>
[Link] 1
Page (Halaman)
P
age (halaman) dalam jQuery Mobile terdiri dari
Dalam membuat page (halaman), jangan lupa
3 (tiga) jenis, yaitu Single Page, Multiple Page dan
dengan struktur HTML berikut :
Dialog Page.
1 <!DOCTYPE HTML>
1. Single Page; maksudnya adalah dalam sebuah file web
(html, php, dsb) hanya memuat satu halaman. Untuk 2 <html>
membuat sebuah page kita harus mendefinisikan 3 <head>
sebuah container yang memiliki attribut data- 4 <!-- tempat library css dan javascript -->
role=”page”. Sintaks dasar untuk membuat sebuah 5 </head>
single page sebagaimana kode berikut :
6 <body>
1 <div data-role="page">
7 <!-- isi halaman web -->
2 <div data-role="header">
8 </body>
3 <!-- definisi header disini -->
9 </html>
4 </div>
5 <div data-role="content"> Dalam membuat sebuah page (halaman), perlu
6 <!-- definisi content disini --> diperhatikan bahwa header, content dan footer
7 </div> berada di dalam elemen page. Karena hanya yang
berada di dalam elemen page yang akan tampil
8 <div data-role="footer"> pada browser.
9 <!-- definisi footer disini -->
10 </div> Dalam membuat sebuah multiple page, perlu
11 </div> diperhatikan hal-hal sebagai berikut :
• Jangan sampai ada id page yang sama.
2. Multiple Page; maksudnya adalah dalam sebuah • Banyaknya jumlah page dan content dari sebuah
file web (html, php, dsb) terdapat banyak halaman. halaman web akan mempengaruhi lamanya
Untuk membuat multiple page, setiap halaman pemrosesan halaman tsb. Untuk mengatasinya,
harus memiliki id yang berbeda-beda. Sintaks dasar kita dapat membuatnya terpisah menjadi
untuk membuat sebuah multiple page sebagaimana beberapa file dan untuk mengaksesnya gunakan
kode berikut : kode link berikut: <a href="halaman_lain"> ke
halaman lain </a>. Namun, file web harus berada
1 <div data-role="page" id="page1"> dalam satu folder atau berada di folder server.
2 <div data-role="header"></div>
3 <div data-role="content"></div> 3. Dialog Page; maksudnya halaman akan
ditampilkan dengan bentuk box seperti pop
4 <div data-role="footer"></div>
up window yang dapat digunakan untuk
5 </div> menampilkan informasi atau sebagai input
6 <div data-role="page" id="page2"> data. Untuk membuat dialog page pada
7 <div data-role="header"></div>
intinya sama dengan membuat single atau
multiple page, namun ketika link diklik
8 <div data-role="content"></div> maka page tersebut ditampilkan sebagai
9 <div data-role="footer"></div> sebuah dialog box. Untuk membuatnya
10 </div> tinggal ditambahkan attribut data-
rel=”dialog” pada sebuah link. Sintaks
dasar untuk membuat sebuah dialog page
sebagaimana kode berikut :
1 <a href="#dialog_page" data-
rel="dialog"> buka dialog </a>
Attribut Page
Dibawah ini adalah attribut-attribut lain yang dapat digunakan pada container yang menggunakan attribut
data-role="page".
No Attribut Nilai (value) Deskripsi
1 data-add-back-btn true | false Menambahkan tombol back secara otomatis, hanya pada header
2 data-back-btn-text kata text Menentukan text pada tombol Back
3 data-back-btn-theme huruf (a-z) Menentukan tema tombol Back
4 data-close-btn-text huruf (a-z) Menentukan text tombol Close pada dialog
Menentukan apakah menghapus cache jQuery DOM atau tidak untuk
5 data-dom-chace true | false setiap halaman (jika diatur true, Anda harus mengelola DOM sendiri
dan menguji secara menyeluruh pada semua perangkat mobile).
6 data-overlay-theme huruf (a-z) Menentukan warna overlay (background) dari dialog page.
7 data-theme huruf (a-z) Menentukan tema warna page. Defaultnya adalah "c".
8 data-title kata text Menentukan judul page.
2 [Link]
Praktek
Multiple Page Dialog Page
a. Buatlah file baru dengan nama multiple_page. a. Buatlah file baru dengan nama dialog_page.html
html b. Simpan file tersebut pada folder latihan yang
b. Simpan file tersebut pada folder latihan yang telah dibuat sebelumnya.
telah dibuat sebelumnya. c. Masukkan kode HTML berikut :
c. Masukkan kode HTML berikut :
1 <!DOCTYPE HTML>
1 <!DOCTYPE HTML> 2 <html>
2 <html> 3 <head>
3 <head> 4 <meta name="viewport" content="width=device-
4 <meta name="viewport" content="width=device- width, height=device-height, initial-scale=1,
width, height=device-height, initial-scale=1, maximum-scale=1" />
maximum-scale=1" /> 5 <link rel="stylesheet" type="text/css"
5 <link rel="stylesheet" type="text/css" href="[Link]-1.4.5/[Link]-
href="[Link]-1.4.5/[Link]- [Link]" />
[Link]" /> 6 <script src="jquery/[Link]"></script>
6 <script src="jquery/[Link]"></script> 7 <script src="[Link]-1.4.5/[Link]-
7 <script src="[Link]-1.4.5/[Link]- [Link]"></script>
[Link]"></script> 8 </head>
8 </head> 9 <body>
9 <body> 10 <div data-role="page" id="page1">
10 <div data-role="page" id="page1"> 11 <div data-role="header">
11 <div data-role="header"> 12 <h1>Dialog Page</h1>
12 <h1>Multiple Page [page 1]</h1> 13 </div>
13 </div> 14 <div data-role="content">
14 <div data-role="content"> 15 <p>Klik link untuk membuka dialog page<br />
15 <p>Ini adalah content/isi halaman multiple page 16 <a href="#dialog_page" data-rel="dialog">Buka
web mobile<br />Anda berada di page 1</p> dialog</a>
16 <a href="#page2">Ke Page 2</a> 17 </p>
17 </div> 18 </div>
18 <div data-role="footer"> 19 <div data-role="footer">
19 <h1>©Copyright 2017</h1> 20 <h1>©Copyright 2017</h1>
20 </div> 21 </div>
21 </div> 22 </div>
22 <div data-role="page" id="page2"> 23 <div data-role="page" id="dialog_page">
23 <div data-role="header"> 24 <div data-role="header">
24 <h1>Multiple Page [page 2]</h1> 25 <h1>Dialog Open</h1>
25 </div> 26 </div>
26 <div data-role="content"> 27 <div data-role="content">
27 <p>Ini adalah content/isi halaman multiple page 28 <p>Hai....!!<br /> Ini adalah sebuah dialog page
web mobile<br />Anda berada di page 2</p> </p>
28 <a href="#page1">Ke Page 1</a> 29 </div>
29 </div> 30 <div data-role="footer">
30 <div data-role="footer"> 31 <h1>©Copyright 2017</h1>
31 <h1>©Copyright 2017</h1> 32 </div>
32 </div> 33 </div>
33 </div> 34 </body>
34 </body> 35 </html>
35 </html>
Latihan
1. Dengan menggunakan multiple page dan dialog page, buatlah sebuah file yang memuat 4
halaman (page) berisi : hal. 1 pembuka, hal.2 biodata, hal. 3 quote/motto dan 4. dialog page
berisi ucapan terima kasih. (Gunakan link untuk menuju halaman tertentu)
2. Simpan file yang telah dibuat dengan nama multiple_page_with_dialog.html
3. Melalui akun masing-masing, kirimkan file tersebut melalui [Link].
[Link] 3
Transition (Transisi)
T
ransition atau efek transisi adalah efek yang 10 <div data-role="page" id="page1">
akan terlihat pada saat berpindah dari satu
11 <div data-role="header">
page ke page lain. Untuk mmenggunakan
efek transisi pada perpindahan page dalam jQuery 12 <h1>Transitions</h1>
Mobile, tambahkan attribut data-transition="nama_ 13 </div>
transisi" pada link. Contoh kode sebagai berikut: 14 <div data-role="content">
1 <a href="#nextpage" data-transition="flip"> flip ke 15 <p>Klik link untuk transisi</p>
halaman lain </a> 16 <a href="#page2" data-transition="flip">Flip </a>
17 </div>
Agar hasil maksimal, disarankan menggunakan web 18 <div data-role="footer">
browser yang mensupport efek transisi jQuery Mobile
19 <h1>©Copyright 2017</h1>
seperti : safari, firefox, chrome.
20 </div>
Efek Transisi jQuery mobile 21 </div>
Nama Transisi Deskripsi 22 <div data-role="page" id="page2">
Perlahan-lahan menghilang kemudian 23 <div data-role="header">
fade
tampil halaman berikutnya 24 <h1>Transitions</h1>
Membalik ke halaman selanjutnya 25 </div>
flip
dari belakang ke depan 26 <div data-role="content">
Melontarkan halaman ke samping lalu 27 <p>Klik link untuk transisi</p>
flow
tampil halaman berikutnya
28 <a href="#page3" data-transition="flow">Flow</
Menampilkan halaman berikutnya a>
pop
seperti sebuah pop up window 29 </div>
Menggeser ke halaman berikutnya 30 <div data-role="footer">
slide
dari kanan ke kiri
31 <h1>©Copyright 2017</h1>
Gabungan dari efek transisi slide dan
slidefade 32 </div>
fade
Menggeser ke halaman berikutnya 33 </div>
slideup
dari bawah keatas 34 <div data-role="page" id="page3">
Menggeser ke halaman berikutnya 35 <div data-role="header">
slidedown
dari atas kebawah 36 <h1>Transitions</h1>
turn Memutar ke halaman berikutnya 37 </div>
none Tidak ada efek transisi 38 <div data-role="content">
39 <p>Klik link untuk transisi</p>
Efek transisi fade adalah efek default (bawaan). Meskipun 40 <a href="#page1" data-transition="turn">Turn</a>
tidak menambahkan attribut data-transition, efek transisi
fade akan digunakan ketika berpindah halaman jika 41 </div>
browser yang digunakan mensupport. 42 <div data-role="footer">
43 <h1>©Copyright 2017</h1>
44 </div>
Praktek 45 </div>
a. Buatlah file baru beri nama [Link] 46 </body>
b. Simpan file tersebut pada folder latihan yang 47 </html>
telah dibuat sebelumnya.
c. Masukkan kode HTML berikut : Latihan
1 <!DOCTYPE HTML> 1. Dengan menggunakan efek transisi, buatlah
2 <html> sebuah file yang memuat efek transisi berikut:
3 <head>
pop, slide, slidefade, slideup, slidedown, dan turn.
2. Simpan file yang telah dibuat dengan nama
4 <meta name="viewport" content="width=device-
width, height=device-height, initial-scale=1, efek_transisi.html
maximum-scale=1" /> 3. Melalui akun masing-masing, kirimkan file
5 <link rel="stylesheet" type="text/css" tersebut melalui [Link].
href="[Link]-1.4.5/[Link]-
[Link]" />
6 <script src="jquery/[Link]"></script>
7 <script src="[Link]-1.4.5/[Link]-
[Link]"></script>
8 </head>
9 <body>
4 [Link]