LAPORAN RESMI

BENGKEL PEMROGRAMAN INTERNET

PRAKTIKUM 11

“PENGENALAN JQUERY MOBILE”

Oleh:

Shafira Zelinda ‘Ainiyatur Rohmah

2220610007

2 D4 PJJ Teknik Telekomunikasi

DEPARTEMEN TEKNIK ELEKTRO

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

2020
 MODUL 12

PENGENALAN JQUERY MOBILE

A. Tujuan :

1. Memahami jquery mobile

2. Memahami interkoneksi antar halaman

3. Memahami pembuatan aplikasi jquery

B. Dasar Teori

Beberapa aplikasi jquery seperti pada contoh berikut ini:

Gambar 1. Aplikasi Jquery

Teknologi JQuery untuk Web mobile, fitur ini menyediakan kerangka

kerja yang sangat mudah digunakan yang meliputi animasi, efek transisi, dan
otomatis CSS gaya untuk elemen HTML dasar. Kode ini dibangun oleh jQuery
dan terus dikembangkan oleh pengembangnya secara aktif untuk memperbaiki
bug-bug yang ada di aplikasi ini. Banyak fitur yang ditawarkan dalam framework
ini termasuk dukungan HTML5, Ajax-powered navigasi link, dan sentuhan/atau
navigasi gesekan. Berikut adalah Daftar OS yang mendukung untuk jquery
mobile.
 Gambar 2. Dukungan smartphone

Dukungan untuk framework ini bervariasi antara ponsel dan yang laianya secara
umum dibagi menjadi grafik dari 3 kategori dari A sampai C :

A adalah tingkat atas yang menawarkan dukungan penuh dari jQuery Mobile
B memiliki semuanya kecuali Ajax

C adalah HTML dasar dengan sedikit-untuk-tidak JavaScript

Beberapa merk smarthanphone sudah menggunakan tingkatan 3.
C. Percobaan
D.1. Latihan
Latihan 1: Membuat tampilan dalam satu layar
Latihan 2: Membuat 2 halaman

Latihan 3: Membuat button

 Latihan 4: Membuat navigasi

D.2. Permasalahan

Untuk permasalahan dalam praktikum, lakukan langkah-langkah berikut : Buatlah

aplikasi jquery mobile dengan persyaratan sebagai berikut: a. Terdiri dari 3 halaman, buat
dalam 1 file html (jquery) b. Halaman pertama berisi tentang informasi kampus anda,
gunakan link untuk menuju ke halaman yg kedua c. Halaman kedua berisi tentang
informasi prodi anda, gunakan button untuk menuju ke halaman 1 dan 3. d. Halaman
ketiga berisi tentang berisi informasi pribadi anda (gunakan collapsible>, untuk menuju
ke halaman 1 dan 2 gunakan navigasi bar.

D. Laporan Resmi

Analisa dari program yang telah anda buat diatas.

 LAPORAN SEMENTARA
Latihan 1: Membuat tampilan dalam satu layar

Latihan 2: Membuat 2 halaman

Latihan 3: Membuat button

Latihan 4: Membuat navigasi
LAPORAN RESMI
Halaman 1

Halaman 2
Halaman 3
ANALISA

Pada praktikum ini dilakukan beberapa percobaan untuk membuat program sederhana
menggunakan jQuery. Program pada jQuery ini hampir sama dengan HTML, bedanya hasil dari
program jQuery lebih menarik dan interaktif, penulisan programnya pun dapat dilakukan secara
mudah melalui teks editor seperti notepad, vscode, sublime text, dsb. Program jQuery ini dibuat
pada file dengan ekstensi html dengan memasukkan (mengakses) source code dari jQuery terlebih
dahulu pada head <script /> dan <link /> baik secara online (menggunakan link) maupun offline
(setelah mendownload lalu dituliskan lokasi filenya). Layouting pada jQuery yang digunakan
pada program ini terdapat header, content, footer yang dituliskan dalam div pada data-role
yang dibungkus dengan halaman yang dibuat melalui div data-role=”page” lalu diberi id
untuk menandai halaman keberapa, sehingga dalam satu program dapat dengan mudah untuk
berpindah ke halaman lain hanya tinggal memanggil id halaman. Untuk membuat button
pada jQuery dapat dilakukan dengan sintaks data-role="button", untuk mengatur modelnya
digunakan data-theme=" ", dan untuk mengatur panjang button yang full page digunakan
data-inline="true". Selain itudapat pula menggunakan tombol navigasi dengan menggunakan
sintaks data-role="navbar" data-iconpos="bottom"dalam div lalu <ul> dan <li>, untuk
menambahkan ikon dapat digunakan data-icon=”” diisi dengan nama icon yang diinginkan.

KESIMPULAN

Dari percobaan yang telah dilakukan dapat disimpulkan bahwa jQuery merupakan pemrograman
yang memiliki sintaks dan struktur yang hampir sama dengan HTML namun lebih menarik
karena lebih mudah dan interaktif. jQuery menyediakan kerangka kerja yang sangat mudah
digunakan yang meliputi animasi, efek transisi, dan otomatis CSS gaya untuk elemen HTML
dasar.