1 of 25

BAB 9�JQUERY MOBILE NAVBARS�(Perbaikan Slide dan Program)��� �

RAHMAD HIDAYAT

1610128262026

SEKOLAH TINGGI TEKNIK (STT) IBNU SINA

PROGRAM STUDI TEKNIK INFORMATIKA

BATAM 2016

2 of 25

​

Navigasi Bar merupakan sekelompok link sejajar atau horizontal yang biasanya terdapat pada bagian header atau footer.pembuatan navbar ditulis dengan menggunakan kode <ul><li> yang dibungkus dengan <div> yakni elemen yang berisi atribut data-role=“navbar”

JQUERY MOBILE TOOLBAR

​

3 of 25

Berikut source untuk membuat halaman homepage yang dibungkus dalam elemen <div>dan memiliki data-peran = "navbar"

​

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

​

<body>

<div data-role="page" id="pageone">

<div data-role="header">

<h1>Welcome To My Homepage</h1>

<div data-role="navbar" data-iconpos="top">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

<div data-role="main" class="ui-content">

<p>Rahmad Hidayat</p>

<p>Kota Batam <b>

</div>

<div data-role="footer">

<h1>My Footer</h1>

</div>

</div>

​

</body>

</html>

​

4 of 25

Hasil Tampilan Navbar

5 of 25

Untuk menambahkan ikon untuk tombol navigasi, kita akan menggunakan atribut data-icon:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

​

<div data-role="page" id="pageone">

<div data-role="header">

<h1>Welcome To My Homepage</h1>

<div data-role="navbar">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>ini hanyalah permulaan membuat icon</p>

</div>

​

<div data-role="footer">

<h1>My Footer</h1>

</div>

</div>

​

</body>

6 of 25

Hasil Tampilan Pembuatan Icon

7 of 25

Pengenalan Active Button

Active Button : Yaitu Tombol perintah yang terletak pada taskbar yang akan muncul jika sebuah perintah harus dieksekusi. Dalam materi ini saya akan memberikan contoh kerja active button pada Icon Home dan Page Two, yang mana fungsinya adalah disaat kita melakukan eksekusi atau klik pada salah satu tombolnya, maka akan menampilkan informasi baru sesuai informasi yang kita masukkan pada script program

​

8 of 25

Coding button Halaman Active Home

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

​

<div data-role="page" id="pageone">

<div data-role="header">

<h1>Welcome To My Homepage</h1>

<div data-role="navbar">

<ul>

<li><a href="#" class="ui-btn-active" data-icon="home">Home</a></li>

<li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>ini adalah halaman home, jika kita klik pada icon Page Two</p>

<p> otomatis halaman Page Two akan menampilkan text yang berbeda

</p>

</div>

​

​

9 of 25

Halaman Tampilan Active Button Home

10 of 25

Coding button Halaman Active Page Two

​

<div data-role="footer">

<h1>My Footer</h1>

</div>

</div>

​

<div data-role="page" id="pagetwo">

<div data-role="header">

<h1>Welcome To My Homepage</h1>

<div data-role="navbar">

<ul>

<li><a href="#pageone" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>saat kita tekan Icon Page Two..</p>

<p>maka text baru yang akan muncul sesuai yang kita buat pada source code</p>

</div>

​

<div data-role="footer">

<h1>My Footer</h1>

</div>

</div>

​

</body>

</html>

11 of 25

Halaman Tampilan Active Button Page Two

12 of 25

Membuat Posisi Icon di bar navigasi di dalam Header

<div data-role="navbar" data-iconpos="top">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>Contoh posisi ikon di bar navigasi di dalam header.</p>

<p>Posisi Icon tetap berada diatas Text, baik HOME, PAGE TWO dan SEARCH.</p>

</div>

13 of 25

Posisi Icon di bar navigasi di dalam Header

14 of 25

Memposisikan ICON diatasText (TOP)

<div data-role="navbar" data-iconpos="top">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>Memposisikan ICON pada POSISI Atas Text HOME, PAGE TWO dan SEARCH</p>

</div>

15 of 25

Posisi Icon diatas text

16 of 25

Memposisikan ICON disebelah kanan Text (RIGHT)

<div data-role="navbar" data-iconpos="right">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>Memposisikan ICON pada POSISI bawah Text HOME, PAGE TWO dan SEARCH</p>

</div>

17 of 25

Posisi Icon dibawah text

18 of 25

Memposisikan ICON dibawah Text (BOTTOM)

<div data-role="navbar" data-iconpos="bottom">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>Memposisikan ICON pada POSISI kanan Text HOME, PAGE TWO dan SEARCH</p>

</div>

​

19 of 25

Posisi Icon disamping kanan text

20 of 25

Memposisikan ICON dikiri Text (LEFT)

<div data-role="navbar" data-iconpos="left">

<ul>

<li><a href="#" data-icon="home">Home</a></li>

<li><a href="#" data-icon="arrow-r">Page Two</a></li>

<li><a href="#" data-icon="search">Search</a></li>

</ul>

</div>

</div>

​

<div data-role="main" class="ui-content">

<p>Memposisikan ICON pada POSISI Kiri Text HOME, PAGE TWO dan SEARCH</p>

</div>

​

21 of 25

Posisi Icon disamping kiri text

22 of 25

Percobaan Akses Dari Laptop

  1. http://localhost/tes/index.php

​

​

​

​

​

​

​

​

​

​

​

​

23 of 25

Percobaan Akses Dari Laptop Melalui Handphone

  1. Koneksikan Laptop dan Handphone dalam satu jaringan yang sama
  2. Lihat IP Laptop dengan melalui Network Detail

​

​

​

​

​

​

​

​

​

​

​

​

​

24 of 25

3. Lalu ketikan/panggil alamat ip laptop/nama folder web kita di browser handphone android kita

192.168.43.86/tes

25 of 25

Demikian

Terimakasih