Press "Enter" to skip to content

jQuery Mobile (01): Pengantar Aplikasi Web Mobile

Published in jQuery Mobile, Tutorial and Web

jQuery Mobile adalah sebuah framework web berbasis mobile dan merupakan turunan dari jQuery. Dengan bantuan framework jQuery Mobile ini, maka kita bisa membuat halaman-halaman web yang khusus untuk ditampilkan pada perangkat mobile seperti smartphone, tablet dan sebagainya. Meski demikian, halaman web yang dibuat menggunakan jQuery Mobile juga tetap bisa diakses melalui browser versi desktop.

Persiapan

Logo jQuery Mobile

Oke langsung saja, untuk membuat web mobile menggunakan jQuery Mobile diperlukan minimal beberapa file berikut ini:

  • jQuery
  • jQuery Mobile
  • jQuery Mobile CSS

Ketiga file tersebut bisa didownload, kemudian diletakkan dalam folder kerja. Bisa juga menggunakan CDN (Content Delivery Network) yang tersedia secara online. Berikut kode untuk memuat ketiga file di atas menggunakan CDN:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Kekurangan dan kesulitan jika menggunakan CDN adalah kita harus selalu terkoneksi internet saat mengerjakan pembuatan web mobile ini. Saya sarankan untuk menggunakan versi offline saja sehingga tidak perlu selalu online saat membuat web.

Untuk versi offline silahkan download melalui link di bagian akhir tulisan ini ya 😎

Persiapan berikutnya adalah emulator perangkat mobile, yang nanti akan terlihat seolah-olah kita sedang menggunakan perangkat mobile. Pada tutorial ini kita akan gunakan plugin atau extension dari browser (dalam hal ini browser yang dipakai adalah Google Chrome) yaitu Ripple Emulator. Silahkan install extension ini di Chrome Anda.

Hal yang juga penting adalah setidaknya Anda sudah paham sedikit tentang HTML, jika belum mengenal HTML, ya kenalan dulu, oke 😀

Selanjutnya →

Halaman : 1 2

3 Comments

  1. […] Konsepnya sederhana, kita pasti sering menemukan gambar di halaman web dalam ukuran kecil, kemudian jika di-klik akan menampilkan gambar dalam ukuran besar, iya kan? Nah kita juga akan coba buat seperti demikian. Langsung saja, silakan ketik kode berikut ini ya, simpan di folder kerja dengan nama jqm_photolightbox.html. Sebelumnya, jangan lupa untuk memasukkan sebuah gambar di folder kerja, kemudian untuk kode nama gambarnya silakan disesuaikan sendiri. Kalau sudah lupa, bisa lihat lagi pengantar aplikasi Web Mobile. […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *