modul 6 jquery mobile

BAB VII

JQUERY MOBILE

7.1 Tujuan Praktikum

1. Praktikan dapat mengenal tentang Jquery Mobile

2. Praktikan mampu membuat aplikasi sederhana menggunakan Jquery Mobile

3. Praktikan mampu membuat mengcompile file html di dalam eclipse

7.2 Dasar teori

7.2.1. JQuery Mobile

adalah kerangka web sentuh dioptimalkan (tambahan dikenal sebagai

perpustakaan JavaScript atau kerangka mobile) saat ini sedang dikembangkan oleh tim

proyek jQuery. Pengembangan berfokus pada menciptakan kerangka kompatibel

dengan berbagai macam smartphone dan komputer tablet, dibuat perlu oleh tumbuh

tetapi heterogen tablet dan pasar smartphone. The jQuery kerangka Ponsel ini

kompatibel dengan kerangka aplikasi mobile lainnya dan platform seperti sebagai

PhoneGap, worklight dan banyak lagi.

7.2.2. HTML5

HTML5 adalah versi terbaru dari HTML yang dibuat oleh World Wide Web

Consortium (W3C). Konsep pertamanya sudah dipublikasikan pada tahun 2008, tetapi

tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011, HTML 5

diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya, namun

penerapannya pada masing-masing browser yang berbeda masih bisa dibilang buruk.

Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) dapat

mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan

sebaik-baiknya.

HTML 5 dapat bekerja dengan CSS3 dan masih dalam tahap pengembangan. Sejak

peluncurannya, HTML5 selalu mengalami pengembangan, W3C terus menambahkan

dan mengembangkan fitur-fitur pada HTML5 dan berencana meluncurkan versi

stable-nya di tahun 2014.

HTML5 adalah suksesor dari HTML 4.01 yang diterbitkan pertama kali tahun 1999.

Sejak saat itu, internet telah berubah secara signifikan dan kehadiran HTML5 terlihat

sangat diharapkan. HTML5 dikembangkan berdasarkan standard yang sudah diatur

sebelumnya :

Fitur-fitur baru harus berdasarkan HTML, CSS, DOM, dan JavaScript

Kebutuhan akan plugin external (seperti Flash) harus dikurangi

Penanganan error harus lebih mudah daripada versi sebelumnya

Scripting harus diganti dengan lebih banyak markup

HTML5 harus device-independent

Proses pengembangan harus dapat dilihat oleh publik

7.3 Praktikum

7.3.1 Membuat Halaman Awal

Pada awal praktikum ini kita akan membuat sebuah halaman awal.

1. Copykan file css dan js ke dalam folder localhost pada komputer kita

2. Lalu buat file html dengan nama index.html

3. Isikan dengan kode berikut

<html>

<head>

<meta name=viewport content="user-scalable=no,width=device-width" />

<title>Coba - coba</title>

</head>

<body>

</body>

</html>

4. Lalu tambahkan source javascript dan css dari jquery mobile, ini bisa

dilakukan dengan 2 cara, yaitu meng-include-kan dari local file

<link rel="stylesheet" href="css/font-awesome.min.css" />

<link rel="stylesheet" href="css/jquerymobile.css" />

<link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

</div>

</div>

6. Coba jalankan localhost di browser yang sudah terinstal ripple emulator

7.3.2 Pindah Halaman

1. Buat halaman baru dengan id “kedua” dan isikan listing berikut:

<div data-role="page" id ="kedua" data-theme='b'>

<div data-role="header" data-position="fixed" data-tap-toggle="false"

data-theme='b'>

<h1>Coba</h1>

</div>

<div data-role="content">

<ul data-role="listview">

<li><a href="#materi">Materi</a></li>

<li><a href="#tugas">Tugas</a></li>

<li><a href="#kuis">Kuis</a></li>

<li><a href="#nilai">Nilai</a></li>

</ul>

</div>

</div>

2. Lalu Masukan listing berikut pada halaman pertama untuk membuat tombol

masuk halaman 2

<div class="ui-block-a"><a href="#kedua"><button type="submit" data-

theme="d">LOGIN</button></a></div>

3. Coba jalankan di browser

7.3.3 Login

1. Masukkan listing berikut pada awal

<script>

function loginMhs(){

$.mobile.showPageLoadingMsg();

var user= $("#username").val();

var pass= $("#password").val();

if(user=="r"&&pass=="r"){

$.mobile.changePage("#kedua", "flip", true,

false);

}else{

}

}

</script>

2. Lalu masukkan listing pengganti listing tombol sebelumnya.

<input type="button" value="Sign In" data-icon="signin"

onclick="loginMhs()"/>

7.4 Tugas Praktikum

1. Buat Aplikasi Perkalian

2. Jalankan Aplikasi di Smartphone Android anda.

7.5 Kesimpulan

1. JQuery Mobile adalah kerangka web sentuh dioptimalkan (tambahan dikenal

sebagai perpustakaan JavaScript atau kerangka mobile) saat ini sedang

dikembangkan oleh tim proyek jQuery.

2. HTML5 adalah versi terbaru dari HTML yang dibuat oleh World Wide Web

Consortium (W3C).

3. Setiap code pada HTML5 akan mempunyai role masing-masing yang disesuaikan

dengan kebutuhan.

4. Diperlukan CSS dan JS untuk membuat aplikasi menggunakan Jquery Mobile

modul 6 jquery mobile

Documents