Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan 1 WEB Mobile (Jquery)

    Diunggah oleh

    muhaqilsafaat
    12 tayangan4 halaman

    Judul Asli

    Pertemuan 1 WEB Mobile (jQuery)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    12 tayangan4 halaman

    Pertemuan 1 WEB Mobile (Jquery)

    Diunggah oleh

    muhaqilsafaat

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    PEMROGRAMAN APLIKASI WEB MOBILE DENGAN JQUERY MOBILE

    Aturan Penilaian

    Nilai Akhir = 10%*Absen + 30%*Tugas + 20%*UTS + 40%*UAS

    NILAI AKHIR HURUF MUTU

    85 >= NA <= 100 A

    70 >= NA < 85 B

    60 >= NA < 70 C

    45 >= NA < 60 D

    NA < 45 E

    Gambaran Umum Pemrograman Web Mobile Dengan Jquery Mobile

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

    Tool Development
    1. Web Server menggunakan XAMPP atau AppServ.

    2. Web Browser menggunakan Google Chrome atau yang lainnya.

    3. Editor menggunakan DreamWeaver, Notepad++, atau Sublime text.

    4. Emulator, jika menggunakan Chrome bisa menggunakan Web Browser Emulator atau Ripple
    Emulator untuk melihat preview web app di browser mobile. Emulator berguna untuk mencoba
    webapp dari berbagai platform. Untuk Plugin Web Browser Emulator bisa download atau mencari
    di Crome webstore untuk extention.

    https://chrome.google.com/webstore/detail/mobile-browser-emulator/lbofcampnkjmiomohpbaihdcbjhbfepf?hl=id
    5. Framework menggunakan Jquery Mobile yang diletakkan pada root web-server
    (htdocs atau www), setelah di Download dari http://jquerymobile.com/download

    Membuat Web Mobile

    Untuk membuat web mobile menggunakan jQuery Mobile, diperlukan minimal beberapa file berikut :
    1. jQuery
    2. jQuery Mobile
    3. jQuery Mobile CSS

    Ketiga file tersebut bisa didownload, kemudian diletakkan dalam folder kerja pada root web-server.
    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>

    Persiapan berikutnya adalah emulator perangkat mobile, yang nanti akan terlihat seolah-olah kita
    sedang menggunakan perangkat mobile. Kita akan menggunakan plugin atau extension dari browser
    (browser yang dipakai misalnya Google Chrome) yaitu Browser Emulator atau Ripple Emulator.
    Contoh 1

    <html>
    <head>
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <h3>Pertemuan 1</h3>
    <p>Aplikasi WEB Mobile</p>
    </body>
    </html>

    Contoh 2
    <html>
    <head>
    <title>Pengetahuan Dasar Web Mobile</title>
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <body>
    <div data-role="page" id="index">
    <header data-role="header">
    <h1>WEB Mobile</h1>
    </header>
    <div data-role="content">
    <h3>Ketekunan dan Ketelitian Kunci Keberhasilan </h3>
    <p>Semester Baru, Materi Kuliah Baru, Semangat Baru
    Tantangan Baru</p>
    </div>
    <footer data-role="footer">
    <h2>Lab. Komputer </h2>
    </footer>
    </div>
    </body>
    </html>
    </body>
    </html>
    Soal Latihan
    Membuat WEB Mobile dengan tampilan seperti pada gambar berikut ini.

    Anda mungkin juga menyukai