MULTI-PAGE PADA JQUERY MOBILE
Ada dua cara untuk menstruktur page aplikasi jquery mobile :
- Menyatukan semua page dalam satu file saja
- Membuat file terpisah untuk setiap page seprti aplikasi web pada umumnya
Anda bisa membuat aplikasi web mobile
dengan cara yang sama seperti membuat aplikasi desktop pada umumnya.
Cara ini mengharuskan Anda membuat satu file HTML untuk setiap halaman
aplikasi. Namun, Jquery menerapkan pendekatan yang agak berbeda untuk
menstruktur page aplikasi.
Pendekatan yang diterapkan yang
diterapkan oleh jquery mobile ini dikenal sebagai pendekatan multi-page,
yang berarti satu dokumen HTML. Anda dapat berisi satu atau banyak
page. Anda pun dapat menghubungkan setiap page internal dalam dokumen
HTML yang sama atau ke page eksternal yang ada pada dokumen HTML lain.
Meskipun tampak rumit, ada kelebihan
dari metode ini dibandingkan metode konvensional yang hanya memanfaatkan
satu dokumen untuk satu halaman. Dengan penanganan page sebagai area
konten yang terpisah dalam satu dokumen, Jquery mobile dapat membuat
transisi halaman yang lebih halus sehingga keseluruhan tampilannya lebih
bernuansa aplikasi natif.
Selain itu, pada manajemen navigasi,
Jquery mobile otomatis dapat menangani navigasi halaman dengan baik.
Jquery mobile menyediakan fitur seperti tombol Back dan mengelola
history hingga kedalaman tertentu. Kelebihan lainnya adalah alasan
efisiensi. Karena digabung menjadi satu file maka browser tidak perlu
mengakses server berulang kali untuk berganti halaman. ini akan
menanggulangi aplikasi yang terlalu lama loading dan juga menghemat
baterai perangkat.
Hal ini punya konsekunsi bahwa
aplikasi-apliasi berukuran sangat besar akan membutuhkan waktu download
yang tidak sebentar. Meski demikian, begitu file terunduh seluruhnya dan
sudah siap, performa aplikasi akan menjadi lebih cepat dan tidak
bergantu lagi pada koneksi internet.
Menambahkan Page pada Dokumen
Aplikasi Jquery mobile Anda yang
sebelumnya hanya memiliki sebuah page yang cukup memenuhi syarat sebuah
aplikasi. Aplikasi tersebut dapat diperluas lagi dengan menambahkan page
lainnya dalam dokumen yang sama.
Menambahkan page lain semudah salin dan
pasang kode Anda sebelumnya, menambahkan sedikit kode untuk
mengidentifikasi masing-masing page dan memperbaharui kontennya untuk
membedakan page baru dengan yang lama. Anda dapat menambahkan berapa pun
banyaknya yang diperlukan.
<div data-role=”page” id=”home”>
<div data-role=”header”>
<h1>ini Header</h1>
</div> <!–/heder–>
<div data-role=”content”>
<p> Tes Jquery Mobile brow</p>
</div><!–/content–>
<div data-role=”footer”>
<h1>Ini Footer</h1>
</div> <!–/footer–>
</div><!–/page–>
<div data-role=”page” id=”kedua”>
<div data-role=”header”>
<h1>page kedua</h1>
</div> <!–/heder–>
<div data-role=”content”>
<p> Konten untuk page kedua brow…!.</p>
</div><!–/content–>
<div data-role=”footer”>
<h1>Ini Footer</h1>
</div> <!–/footer–>
</div><!–/page–>
Setiap page memiliki struktur yang
mirip, yaitu memiliki header, content, dan footer. Maka, page baru yang
Anda tambahkan mempunyai struktur yang sama dengan struktur page awal
Anda atau dengan sedikit modifikasi.
Setiap page harus mempunyai id
masing-masing yang berlainan. Jquery Mobile membutuhkannya sebagai suatu
cara untuk membedakan setiap page yang ada dalam dokumen karena semua
dokumen page tersebut masih berada dalam file yang sama.
Secara default, page pertamalah yang
akan diproses dan ditamplkan pertama kali ketika dokumen multipage
dimuat, sedangkan yang lain disembunyikan. Page lainnya hanya akan
ditampilkan apabila di-request secara khusus. Pendekatan seperti ini
sangat ideal untuk menciptakan waktu respons yang cepat.
Misalnya page kode diatas, ketika
dokumennya di-request, blog page pertama (yang memiliki id=”home”) akan
ditampilkan karena merupakan yang tercantum pertama, Anggap saja seperti
tumpukan kartu, yang terataslah yang terlihat pertama kali.
Jika anda ingin page kedua dengan
id=”kedua” ditampilkan, Anda harus merequestn URL dokumen multipage
dengan tanda berikut: dokumen.html#kedua.
Berpindah ke Page Kedua
Berpindah dari satu page ke page lain
sangatlah mudah, dapat dilakukan dengan menambhakan sebuah link pada
bagian content page pertama Anda. Link yang anda berikan nantinya akan
menuju ke page kedua atau page yang anda inginkan. Pada contoh kali ini,
Page kedua dapat ditunjukan dengan menggunakan id-nya pada anchor text:
<div data-role=”page” id=”home”>
<div data-role=”header”>
<h1>ini Header</h1>
</div> <!–/heder–>
<div data-role=”content”>
<p> Pege pertama brow</p>
<p><a href=”#kedua”> Menuju page kedua, brow..! </a></p>
</div><!–/content–>
<div data-role=”footer”>
<h1>Ini Footer</h1>
</div> <!–/footer–>
</div><!–/page–>
Sekarang ketika me-refresh aplikasi,
Anda akan melihat link yang baru saja Anda tambhakan. Menge-tap link
akan melakukan transisi ke page yang dituju.
Menentukan Title Setiap Page
Title sangat berguna pada aplikasi web
berbasis browser karena beberapa browser akan menampilkan judul halaman
pada titlebar-nya. Disamping itu, ketiaka pengguna mem-bookmark, title
ini akan muncul sebagai judul bookmark-nya.
Jquery mobile memberikan cara kepada
Anda untuk selalu menyediakan title bagi setiap page yang ada. jika
ingin mengubah title ketika pengguna mengakses page baru, anda bisa
malakukannya dengan menambahkan atribut data-title. Dengan Atribut ini,
setiap page akan memiliki title masing-masing. Atribut ini dipasang pada
kontainer page seperti pada kode berikut :
<div data-role=”page”id=”home” data-title=”Title suatu page”>
Meskipun bersifat opsional, memberikan atribut data-title sangat disarankan untuk kenyamanan pengguna.
Apabila potongan-potongan kode diatas
dirangkai menjadi dokumen HTML utuh, kode aplikasi Jquery Mobile Anda
akan tampak seperti berikut:
<!doctype html>
<html>
<head>
<title>umulsalim</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1,maximum-scale=1″>
<link rel=”stylesheet” href=”jquery.mobile-1.2.0.min.css” />
<script src=”jquery-1.8.2.min.js”></script>
<script src=”jquery.mobile-1.2.0.min.js”></script>
</head>
<body>
<!–page pertama, atau home–>
<div data-role=”page” id=”home”>
<div data-role=”header”>
<h1>ini Header</h1>
</div> <!–/heder–>
<div data-role=”content”>
<p> Page pertama brow…!.</p>
<p>
<a href=”#kedua”> Menuju Halaman kedua, brow..! </a> <br>
<a href=”#ketiga”> Menuju Halaman ketiga, brow..! </a>
</p>
</div><!–/content–>
<div data-role=”footer”>
<h1>Ini Footer</h1>
</div> <!–/footer–>
</div><!–/page–>
<!–page kedua–>
<div data-role=”page” id=”kedua” data-title=”Title untuk page Kedua”>
<div data-role=”header”>
<h1>page kedua</h1>
<a href=”#home” data-rel=”back” data-role=”button”>Kembali</a>
</div> <!–/heder–>
<div data-role=”content”>
<p> Konten untuk page kedua brow…!.</p>
</div><!–/content–>
<div data-role=”footer”>
<h1>Ini Footer</h1>
</div> <!–/footer–>
</div><!–/page–>
<!–page ketiga–>
<div data-role=”page” id=”ketiga”>
<div data-role=”header”>
<h1>page ketiga</h1>
<a href=”#home” data-rel=”back” data-role=”button”>Kembali</a>
</div> <!–/heder–>
<div data-role=”content”>
<p> Konten untuk page ketiga brow…!.</p>
</div><!–/content–>
<div data-role=”footer”>
<h1>Ini Footer</h1>
</div> <!–/footer–>
</div><!–/page–>
</body>
</html>
Dari kode diatas menghasilkan hasil sebagai berikut :
gambar 1.1 page home
Jika link menju halaman kedua di klik maka akan tampak page kedua
gambar 1.2 page kedua
Begitu pula page ketiga akan tampak halaman seprti berikut :
gambar 1.3 page ketiga
download slidenya disini......
http://downloads.ziddu.com/download/25141706/multipage.pptx.html
Dosen Pengampuh Matakuliah
Nama : M.Ropianto, M.Kom
NIDN: : 1028067804
Status : Dosen Tetap YAPISTA / STT Ibnu Sina
Pengampuh Matakuliah : Pemrograman Mobile
Dosen Pengampuh Matakuliah
Nama : M.Ropianto, M.Kom
NIDN: : 1028067804
Status : Dosen Tetap YAPISTA / STT Ibnu Sina
Pengampuh Matakuliah : Pemrograman Mobile
STT IBNU SINA BATAM
