MEMBUAT APLIKASI SEDERHANA DENGAN MENGGUNAKAN JQUERYMOBILE
Pada
kesempatan kali ini Saya ingin menjelaskan mengenai beberapa materi gabungan
matakuliah aplikasi mobile sehingga dapat di package menjadi sebuah aplikasi
sederhana..
Semoga
bermanfaat J
1. Pertama-tama kopikan file-file jquerymobile yang ada di folder jquerymobile 1.4.1 berikut ke dalam folder “menu makanan”
-
jquery.mobile.icons.min.css,
-
jquery.mobile.structure-1.4.1.min.css,
-
jquery.mobile-1.4.1.min.css,
-
jquery.mobile-1.4.1.min.js
-
jquery-1.10.1.min
-
folder
image
2.
Buat
file baru dengan nama index.php pada notepad++, simpan pada folder kelas A
(jadikan 1 dengan file jquerymobile).
3.
Masuk
pada tahap coding, buat bagian utama html
4.
Masukkan
script berikut pada bagian head,
5.
Pada
bagian body buat 3 buah page yang nanti akan digunakan sebagai link-link yang
berisi mengenai aplikasi ini yaitu page home, grid, form.
6.
Masuk
pada page home, ada 3 bagian penting pada sebuah page, yaitu header, content,
footer.
a.
Buat
sebuah panel
b.
Pada
header
c.
Pada
content
d.
Pada
Footer
7.
Masuk
pada page Grid,
a.
Buat
panel
b.
Pada
Header
c.
Pada
Content
d.
Pada
Footer
8.
Masuk
pada page form,
a.
Buat
panel
b.
Pada
Header
c.
Pada
Content
d.
Pada
Footer
Berikut
adalah script lengkap pada aplikasi ini.
<!DOCTYPE html>
<html>
<head>
<title>Kelas A</title>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<!--<link rel="stylesheet"
href="jquery.mobile-1.4.1.min.css">-->
<link rel="stylesheet"
href="politala.min.css">
<link rel="stylesheet" href="jquery.mobile.icons.min.css">
<link rel="stylesheet"
href="jquery.mobile.structure-1.4.1.min.css">
<script src="jquery-1.10.1.min.js"></script>
<script src="jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<!-- Page Home-->
<div data-role="page" id="home"
data-theme="c">
<!-- untuk membuat panel yang akan muncul pada sisi sebelah kanan
-->
<div data-role="panel" id="mypanel"
data-position="right">
<a href="#">Log Out</a>
</div>
<!-- akhir dari mypanel -->
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>Menu Masakan</h1>
<!-- Button untuk mypanel -->
<a href="#mypanel" class="ui-btn-right ui-btn
ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bullets ui-btn-icon-notext">Setting</a>
<!-- Akhir dari button untuk mypanel -->
<!-- navigasi bar -->
<div data-role="navbar">
<ul>
<li><a
href="#home" data-icon="home"
data-transition="slide">Home</a></li>
<li><a href="#grid"
data-icon="grid"
data-transition="slide">Grid</a></li>
<li><a
href="#form" data-icon="info"
data-transition="slide">Form</a></li>
</ul>
</div>
<!-- akhir dari navigasi bar -->
</div>
<!-- ini akhir dari header -->
<!-- untuk conten -->
<div data-role="content">
<!-- perhatikan atribut yang ada pada tag UL dibawah ini -->
<!-- untuk menampilkan search form menggunakan properti data-filter
-->
<ul data-role="listview"
class="ui-listview-outer" data-inset="true"
data-filter="true" data-filter-placeholder="Handak
Mencari...">
<li><a
href="#detail">Kelelepon <span
class="ui-li-count">12</span></a></li>
<li><a
href="#detail">Bingka <span
class="ui-li-count">12</span></a></li>
<li><a
href="#detail">Cucur <span
class="ui-li-count">12</span></a></li>
<li><a
href="#detail">Dodol Kandangan <span
class="ui-li-count">12</span></a></li>
<li><a href="#detail">Bingka
Berandam <span
class="ui-li-count">12</span></a></li>
<li><a
href="#detail">Kakicak <span
class="ui-li-count">1</span></a></li>
<li><a
href="#detail">Laksa <span
class="ui-li-count">10</span></a></li>
<li><a href="#detail">Gabin
Berandam <span
class="ui-li-count">12</span></a></li>
<li><a
href="#detail">Koleh Koleh <span
class="ui-li-count">12</span></a></li>
</ul>
</div>
<!-- akhir untuk content -->
<!-- untuk footer -->
<div data-role="footer" data-position="fixed">
<h4>Politala 2014</h4>
</div>
<!-- akhir dari footer -->
</div>
<!-- akhir dari page home -->
<!-- Page Grid-->
<div data-role="page"
id="grid" data-theme="c">
<!-- untuk membuat panel yang akan muncul pada sisi sebelah kanan
-->
<div data-role="panel" id="mypanel"
data-position="right">
<a href="#">Log Out</a>
</div>
<!-- akhir dari mypanel -->
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>Menu Masakan</h1>
<!-- Button untuk mypanel -->
<a href="#mypanel" class="ui-btn-right ui-btn
ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bullets
ui-btn-icon-notext">Setting</a>
<!-- Akhir dari button untuk
mypanel -->
<!-- navigasi bar -->
<div data-role="navbar">
<ul>
<li><a
href="#home" data-icon="home"
data-transition="slide">Home</a></li>
<li><a
href="#grid" data-icon="grid"
data-transition="slide">Grid</a></li>
<li><a
href="#form" data-icon="info"
data-transition="slide">Form</a></li>
</ul>
</div>
<!-- akhir dari navigasi bar -->
</div>
<!-- ini akhir dari header -->
<!-- untuk conten -->
<div data-role="content">
<!-- pemanfaatan fungsi dari grid -->
<div class="ui-grid-a">
<div
class="ui-block-a">Kolom A</div>
<div
class="ui-block-b">Kolom B</div>
</div>
<!-- untuk membuat 3 Kolom -->
<div class="ui-grid-b">
<div
class="ui-block-a">Kolom A</div>
<div
class="ui-block-b">Kolom B</div>
<div
class="ui-block-c">Kolom C</div>
</div>
<!-- untuk membuat 4 Kolom -->
<div class="ui-grid-c">
<div
class="ui-block-a">Kolom A</div>
<div
class="ui-block-b">Kolom B</div>
<div
class="ui-block-c">Kolom C</div>
<div class="ui-block-d">Kolom
D</div>
</div>
</div>
<!-- akhir untuk content -->
<!-- untuk footer -->
<div data-role="footer" data-position="fixed">
<h4>Politala 2014</h4>
</div>
<!-- akhir dari footer -->
</div>
<!-- akhir dari page Grid -->
<!-- Page Form-->
<div data-role="page"
id="form" data-theme="c">
<!-- untuk membuat panel yang akan muncul pada sisi sebelah kanan
-->
<div data-role="panel" id="mypanel"
data-position="right">
<a href="#">Log Out</a>
</div>
<!-- akhir dari mypanel -->
<!-- Header -->
<div data-role="header" data-position="fixed">
<h1>Menu Masakan</h1>
<!-- Button untuk mypanel -->
<a href="#mypanel" class="ui-btn-right ui-btn
ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bullets
ui-btn-icon-notext">Setting</a>
<!-- Akhir dari button untuk mypanel -->
<!-- navigasi bar -->
<div data-role="navbar">
<ul>
<li><a
href="#home" data-icon="home"
data-transition="slide">Home</a></li>
<li><a
href="#grid" data-icon="grid"
data-transition="slide">Grid</a></li>
<li><a
href="#form" data-icon="info"
data-transition="slide">Form</a></li>
</ul>
</div>
<!-- akhir dari navigasi bar -->
</div>
<!-- ini akhir dari header -->
<!-- untuk conten -->
<div data-role="content">
<!-- Membuat Form Input dengan JQM -->
<label>Nama Lengkap</label>
<input type="text" name="nama-lengkap"
id="nama-lengkap">
<label>Username</label>
<input type="text" name="username"
id="username">
<label>Password</label>
<input type="password" name="password"
id="password">
<textarea
cols="40" rows="8" name="alamat"
id="alamat"></textarea>
<label>Jenis Kelamin</label>
<select name="jk" id="jk"
data-role="slider">
<option
value="laki">Pria</option>
<option
value="bini">Wanita</option>
</select>
<label>Usia</label>
<input type="range" name="usia"
id="usia" value="1" min="1"
max="100">
<fieldset data-role="controlgroup">
<legend>Hobi
Anda</legend>
<input type="checkbox"
name="belajar" id="belajar">
<label
for="belajar">Belajar</label>
<input type="checkbox"
name="makan" id="makan">
<label
for="makan">Makan</label>
<input type="checkbox"
name="tidur" id="tidur">
<label
for="tidur">Tidur</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>Kepercayaan
Anda</legend>
<input type="radio"
name="setan" id="kuyang" value="kuyang">
<label
for="kuyang">Kuyang</label>
<input type="radio"
name="setan" id="tuyul" value="tuyul">
<label
for="tuyul">Tuyul</label>
<input type="radio"
name="setan" id="jailangkung"
value="jailangkung">
<label for="jailangkung">Jailangkung</label>
</fieldset>
<fieldset data-role="controlgroup"
data-type="horizontal">
<legend>Status
Anda</legend>
<input type="radio"
name="status" id="jomblo" value="jomblo">
<label
for="jomblo">Jomblo</label>
<input type="radio"
name="status" id="pacaran" value="pacaran">
<label
for="pacaran">Pacaran</label>
<input type="radio"
name="status" id="nikah" value="nikah">
<label
for="nikah">Nikah</label>
</fieldset>
<label>Asal Anda</label>
<select name="asal" id="asal">
<option>Pilih Salah
Satu</option>
<option
value="akherat">Akherat</option>
<option value="bumi">Bumi</option>
<option
value="kayangan">Kayangan</option>
<option
value="neraka">Neraka</option>
</select>
<button>Submit</button>
</div>
<!-- akhir untuk content -->
<!-- untuk footer -->
<div data-role="footer" data-position="fixed">
<h4>Politala 2014</h4>
</div>
<!-- akhir dari Form -->
</div>
<!-- akhir dari page Grid -->
</body>
</html>
Komentar
Posting Komentar