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.

CSS.min. Sejak saat itu. Copykan file css dan js ke dalam folder localhost pada komputer kita 2.01 yang diterbitkan pertama kali tahun 1999.css" /> <link rel="stylesheet" href="css/jquerymobile. Isikan dengan kode berikut <html> <head> <meta name=viewport content="user-scalable=no. Lalu tambahkan source javascript dan css dari jquery mobile.html 3.nativedroid. ini bisa dilakukan dengan 2 cara. yaitu meng-include-kan dari local file <link rel="stylesheet" href="css/font-awesome.css" /> . DOM.HTML5 adalah suksesor dari HTML 4. 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. internet telah berubah secara signifikan dan kehadiran HTML5 terlihat sangat diharapkan.3 Praktikum 7.width=device-width" /> <title>Coba .css" /> <link rel="stylesheet" href="css/jquerymobile.1 Membuat Halaman Awal Pada awal praktikum ini kita akan membuat sebuah halaman awal. Lalu buat file html dengan nama index. HTML5 dikembangkan berdasarkan standard yang sudah diatur sebelumnya :       Fitur-fitur baru harus berdasarkan HTML.3.coba</title> </head> <body> </body> </html> 4. 1.

js"></script> <script src="js/jquery.1.min.js"></script> 5.3.<link rel="stylesheet" href="css/jquerymobile.css" id='jQMnDTheme' /> <link rel="stylesheet" href="css/jquerymobile.html" data-ajax="false"><i class='icon-ellipsisvertical'></i></a> <h1>Login</h1> </div> <div data-role="content"> <form> <ul data-role="listview" data-inset="true"> <li data-role="fieldcontain"> <label for="nip">NIP :</label> <input type="text" name="nip2" id="nip" value=""placeholder="Masukkan NIP"> </li> <li data-role="fieldcontain"> <label for="pass">Password :</label> <input type="text" name="pass2" id="pass" value=""placeholder="Masukkan Password"> </li> </ul> </form> .color.9.mobile-1. Tambahkan elemen berikut <div data-role="page" id="login"data-theme='b'> <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'> <a href="index.nativedroid.2.nativedroid.dark.css" id='jQMnDColor' /> <script src="js/jquery-1.yellow.min.

</div> </div> 6.3. 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> . Coba jalankan localhost di browser yang sudah terinstal ripple emulator 7.2 Pindah Halaman 1.

showPageLoadingMsg(). var user= $("#username").mobile. }else{ } } .val().</div> </div> 2.3 Login 1. false). Masukkan listing berikut pada awal <script> function loginMhs(){ $. if(user=="r"&&pass=="r"){ $. Lalu Masukan listing berikut pada halaman pertama untuk membuat tombol masuk halaman 2 <div class="ui-block-a"><a href="#kedua"><button type="submit" datatheme="d">LOGIN</button></a></div> 3. var pass= $("#password"). Coba jalankan di browser 7. "flip". true.mobile.3.val().changePage("#kedua".

Lalu masukkan listing pengganti listing tombol sebelumnya. HTML5 adalah versi terbaru dari HTML yang dibuat oleh World Wide Web Consortium (W3C). Jalankan Aplikasi di Smartphone Android anda.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.4 Tugas Praktikum 1. <input type="button" value="Sign In" data-icon="signin" onclick="loginMhs()"/> 7. 7. 2. Setiap code pada HTML5 akan mempunyai role masing-masing yang disesuaikan dengan kebutuhan. Buat Aplikasi Perkalian 2. Diperlukan CSS dan JS untuk membuat aplikasi menggunakan Jquery Mobile . 3. 4.</script> 2.