Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Mudahnya Membangun Mobile Site dengan jQuery Framework Mobile

Populasi dan perkembangan teknologi ponsel, berdampak cukup besar pada dunia programming. Yang tadinya kita hanya berkutat memikirkan pemenuhan kebutuhan di web yang diakses dengan komputer maupun laptop saja, kini kita harus memikirkan bagaimana agar website yang kita buat juga dengan mudahnya bisa diakses secara mobile. Untuk website yang memiliki banyak content tulisan, gambar serta video rasanya akan sangat sulit untuk 'memaksakan' agar website yang kita miliki saat ini bisa kompatibel bila diakses dengan ponsel manapun. Salah satu alasannya karena keterbatasan yang ada pada perangkat mobile akan menghambat loading halaman tersebut. Alhasil, website yang tadinya loadingnya cepat diakses melalui komputer, malah akan sangat lambat atau malah tidak bisa dibuka di mobile saking lambatnya, sekalipun yang mengakses tersebut merupakan 'jajaran ponsel pintar'.

Ada solusi untuk masalah ini? Tentu saja. Kenapa tidak membuat website berbasis mobile? Tidak punya banyak waktu untuk pengerjaannya? Serahkan saja keluhan Anda pada jQuery Framework Mobile yang mana akan membantu Anda menghemat waktu dalam mengerjakannya, sekaligus Anda bisa membuat animasi-animasi agar website mobile terlihat lebih ciamik. Dalam tutorial kali ini, kita akan belajar bagaimana menggunakan framework tersebut dengan langkah-langkah yang sangat mudah diikuti. Yuk simak lebih lanjut.

Langkah 1

Buatlah HTML sederhana yang mana di bagian Head, tambahkan link ke source JS dan CSS-nya seperti berikut ini

Langkah 2

Framework jQuery Mobile ini memungkinkan Anda untuk mendesain web dengan tag HTML biasa maupun HTML5, namun Anda harus mengingat bahwa penggunaannya harus disertakan atribut data seperti data-role, data-theme dan lain sebagainya. Selanjutnya tambahkan kode berikut ini pada bagian Body HTML.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile Framework</title>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css' />
<script src='http://code.jquery.com/jquery-1.4.4.min.js' ></script>
<script src='http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js' ></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>WWW.DISKUSIWEB.COM</h1>
</div>
 
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li><a href="#" data-transition="flip"><h2>Mengenal MongoDB, Open Source Database NoSQL Document-Oriented</h2>
<li><a href="#" data-transition="flip"><h2>7 Plugin Firefox yang Wajib Dimiliki Para Web Developer</h2></a></li>
<li><a href="#" data-transition="flip"><h2>Membuat SpreadSheet Online Dengan dhtmlxSpreadSheet</h2></a></li>
<li><a href="#" data-transition="flip"><h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a></li>
<li><a href="#" data-transition="flip"><h2>Membuat Pretty URL Sederhana Pada ASP.NET 4.0</h2></a></li>
<li><a href="#" data-transition="flip"><h2>Deteksi Perangkat Mobile Dengan Javascript Sederhana</h2></a></li>
</ul>
</div>
 
<div data-role="footer" data-theme="a">
<h3>Komunitas Teknologi Indonesia</h3>
</div>
</div>
</body>
</html>

Maka nantinya halaman web mobile yang Anda buat, akan tampil seperti ini.

image

Langkah 3

Untuk mempercantik menu navigasi halamannya, akan lebih bagus kalau kita menambahkan descripsi dan juga counter semisalnya untuk jumlah komentar atau page view. Untuk mencobanya silahkan edit kembali salah satu judul menu di atas dengan menambahkan kode berikut ini.

<li>
<a href="#" data-transition="flip">
<h2>Kendo UI, Framework HTML5 Dibundel JQuery dan CSS3</h2></a>
<p>Ini dia framework HTML5 yang sudah diintegrasikan dengan jQuery dan dirancang dengan CSS3</p>
<span class="ui-li-count">17</span>
</li>

Setelah Anda tambahkan, maka akan tampil seperti berikut.

image

Langkah 4

Anda bisa memilih theme yang sudah ada pada jQuery Mobile misalnya dengan meletakkan elemen data-theme yang diisi dengan value a,b,c,d,e. Kabarnya ke depannya akan ditambahkan pula theme sehingga Anda bisa memilih lebih banyak theme berurutan dari a-z. Untuk mengetahui theme yang sesuai, Anda bisa melihat gambar berikut ini.

image

Langkah 5

Untuk dapat membuat animasi dari setiap perpindahan halaman, akan lebih bagus kalau Anda tambahkan animasi menggunakan elemen data-transition yang mana sudah terdapat pilihan jenis animasinya yaitu seperti slide, slidedown, slideup, flip, pop serta fade. Cara menambahkannya cukuplah mudah hanya dengan langkah seperti ini.

<a href="#slide" data-transition="slide">Deteksi Perangkat Mobile Dengan Javascript Sederhana</a>

Nah, cukup sederhana bukan? Sudah ada themenya juga tinggal dimodifikasi sesuai kebutuhan Anda. Selamat mencoba :)


(thePinkFighter)

Tanggapan

  • Bisa juga menggunakan Sencha Touch. Cuman si Sencha berfondasi dari ExtJS. Facebook mobile menggunakan Sencha :)
  • mantap mantap mantap
  • Mantabbbb bgt
    may belajar, dong. Bisa tambahi trik2 lainya again sekaliam aja dijadiin topik baru di DW.
  • thank's.. :-)
  • Belum ngerti nih maksutnya, apa maksutnya ini tinggal generate aja gt ya? Terus web bisa otomatis tampil mobile view pas di akses pake hp,kalo buat toko online bisa juga ga??(Sori newbie)
  • wah keren...thaks pelajarannya...
  • keren ...",-

    ad tutornya g buat gabungin di android mas ...? (newbie)

    salam ...
  • mmm.. masih bingung
    guna jquery mobile sebenarnya membuat website khusus untuk mobile mulai dari 0 ato semacam converter website pc ke bentuk mobile ya

    moon pencerahanya

    thx from nubi kelas kakap before
  • tapi pengaturan layoutnya susah ya mas.. ada referensi ngga ?
  • edited May 2013
    Mantaaaaap tipsnya mas bro  :)
  • Mantab Bro tutorial & tekniknya, i like it


    :-* keep smiling
  • layouting mobile site dengan menggunakan jquery mobile lebih gampang, g perlu pusing2 lg mikirin design  ;)
  • ane malah make jquerymobile buat mainsite..... jadi, cukup satu untuk semua, Hahaha....
    soale lumayan ribet klo mau ngedetect client ngakses dari browser PC or mobile...
  • ane malah make jquerymobile buat mainsite..... jadi, cukup satu untuk semua, Hahaha....
    soale lumayan ribet klo mau ngedetect client ngakses dari browser PC or mobile...
    jadi misal main sitenya pake PHP biasa, trus tinggal ditambahin jquery mobile, gitu langsung jadi website mobile ya gan?
  • edited March 2014
    ane malah make jquerymobile buat mainsite..... jadi, cukup satu untuk semua, Hahaha....
    soale lumayan ribet klo mau ngedetect client ngakses dari browser PC or mobile...
    jadi misal main sitenya pake PHP biasa, trus tinggal ditambahin jquery mobile, gitu langsung jadi website mobile ya gan?
    Betul gan ...
    tinggal masukin script PHP ke dalam tutorial seperti kata Om PinkPanther diatas,...

    XD
Sign In or Register to comment.