aplikasi cordova dengan jquery mobile - tobuku.com cordova dengan jquery mobile.pdf · jquery...

www.tobuku.com

1

Aplikasi Cordova dengan jQuery Mobile

Juli 2015 Tingkat: √

Oleh : Feri Djuandi Pemula Menengah Mahir

Artikel kali ini akan menjelaskan cara membuat sebuah aplikasi sederhana menggunakan API Cordova.

Hasil yang ingin dicapai dengan aplikasi ini adalah:

Aplikasi menampilkan halaman web HTML yang dijalankan secara lokal di dalam perangkat

mobile (bukan mengakses halaman web dari server web luar)

Aplikasi dapat menampilkan halaman-halaman web yang berbeda menggunakan sebuah file

HTML. Hal ini disebut sebagai Single Page Application (SPA).

Untuk memperindah tampilan digunakan UI framework jQuery Mobile

Aplikasi menampilkan komponen menu dan tab dari jQuery Mobile

Untuk dapat membangun aplikasi Cordova, pastikan komputer kerja Anda telah dipersiapkan dengan

API Cordova dan software yang dibutuhkan lainnya. Untuk mempersiapkan perangkat pengembangan

Cordova, silakan membaca artikel “Memulai Cordova” yang dibuat penulis sebelumnya.

Catatan:

Pada artikel ini platform yang digunakan hanya Android, sehingga semua penjelasan yang diuraikan mengacu pada platform tersebut.

Kode program dari contoh aplikasi telah disertakan bersama artikel ini sehingga Anda bisa

menggunakannya sambil membaca penjelasan agar lebih mudah memahaminya.

Membuat projek baru 1. Buat sebuah folder kerja untuk projek Cordova. Pada contoh ini folder tersebut diletakkan pada

folder ..\Cordova\workshop. Anda bebas menentukan nama dan lokasi folder tersebut.

2. Buka sebuah command shell dan masuk ke dalam folder kerja di atas. Pada contoh ini akan

dibuat sebuah projek bernama animalworld.

3. Jalankan perintah berikut ini:

cordova create animalworld com.excercise.animalworld AnimalWorld

Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder

..\Cordova\workshop\animalworld. Silakan menuju folder tersebut dan melihat folder-folder

dan file-file apa saja yang sudah terbentuk.

http://www.tobuku.com/

www.tobuku.com

2

4. Tambahkan dukungan untuk platform Android. Silakan masuk ke flder ..\Cordova\workshop\

animalworld dan jalankan perintah:

cordova platforms add android

5. Tambahkan plugin dasar. Silakan masuk ke flder ..\Cordova\workshop\animalworld dan

jalankan perintah:

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-console

6. Sesuaikan versi API Android yang terinstal pada komputer kerja dengan versi target yang akan

dibuat.

Buka file project.properties di dalam folder ..\workshop\animalworld\platforms\android.

Ubah versi API pada bagian target dengan yang sesuai.

Buka file AndroidManifest.xml di dalam folder ..\workshop\animalworld\platforms\ android.

Ubah versi API pada bagian android:targetSdkVersion dengan yang sesuai.

Mempersiapkan jQuery jQuery dibutuhkan untuk digunakan bersama-sama jQuery Mobile. Versi jQuery yang digunakan pada

contoh program ini adalah jquery-1.11.3. Dianjurkan untuk tidak menggunakan jQuery 2.x karena

terbatasnya versi browser yang didukung oleh versi tersebut.

1. Silakan mengunduh jQuery dari situs beralamat:

https://jquery.com/download/

2. Silakan menyalin file jquery-1.11.3.js ke dalam folder ..\animalworld\www\js.

Mempersiapkan jQuery Mobile Pada contoh ini framework jQuery Mobile akan digunakan untuk memperindah tampilan antar muka

(User Interface= UI). jQuery Mobile adalah UI framework yang sangat populer dan cukup mudah

digunakan. Versi jQuery Mobile yang digunakan pada contoh program ini adalah jquery.mobile-1.4.5,

namun demikian tidak ada batasan untuk menggunakan versi yang lebih baru.

1. Silakan mengunduh jQuery Mobile dari situs beralamat:

https://jquerymobile.com/

2. Silakan menyalin file jquery.mobile-1.4.5.min.js ke dalam folder ..\animalworld\www\js.

3. Silakan menyalin file jquery.mobile-1.4.5.min.css ke dalam folder ..\animalworld\www\css.


www.tobuku.com

3

Mengedit file html Buka file index.html yang ada di dalam folder ..\animalworld\www. Hapus semua skrip HTML yang asli dang anti dengan skrip yang baru

berikut ini.

<!DOCTYPE html>

<html>

<head>

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">



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

<script src="js/jquery-1.11.3.js"></script>

<script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>



<div data-role="page" id="splash" style="background:#fec11b">

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

<div id="deviceready" class="blink">

<p> <p>

<center><h1>Animal World</h1></center>

<p align="center"><img src="img/logo.png"></p>

<p align="center"><a href="#pageone" data-ajax="false" data-role="button" data-icon="carat-r" data-

iconpos="right" data-inline="true" data-theme="b">Click to enter</a></p>



</div>

</div>

</div>



<div data-role="page" data-dialog="true" id="about">

<div data-role="header">

<h1>About</h1>

</div>


<p>This is an Apache Cordova sample application.</p>

Author: Feri Djuandi

<br>Email: [email protected]

</div>

www.tobuku.com

4

</div>



<div data-role="page" id="pageone" class="ui-responsive-panel">


<h1>Animal World</h1>

<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>

<a href="#about" data-icon="info" data-iconpos="notext">About</a>

</div>


<h1>Welcome!</h1>

<h2>Wildlife Tourism</h2>

Wildlife tourism can be an eco and animal friendly tourism, usually showing animals in their natural habitat. Wildlife

tourism, in its simplest sense, is watching wild animals in their natural habitat. Wildlife tourism is an important part of the

tourism industries in many countries including many African and South American countries, Australia, India, Canada, Indonesia,

Bangladesh, Malaysia, Sri Lanka and Maldives among many.

<p align="center"><img src="img/splash.png"></p>

It has experienced a dramatic and rapid growth in recent years world wide and is closely aligned to eco-tourism and

sustainable-tourism.

<blockquote>

<p>Wildlife tourism is also a multi-million dollar industry offering customized tour packages and safaris.

</blockquote>

<p align="center"><a href="#pagetwo" data-ajax="false" data-role="button" data-icon="carat-r" data-iconpos="right"

data-inline="true" data-theme="b">Learn more</a></p>

</div>

<div data-role="footer">

<p align="center">Footer text here</p>

</div>

<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">

<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">

<li data-icon="delete" style="background-color:#111;">

<a href="#" data-rel="close">Close menu</a>

</li>

<li data-filtertext="link url"><a href="#" data-ajax="false">Link</a></li>


<li style="margin-left:-16px;margin-right:-16px;" data-role="collapsible" data-enhanced="true" data-collapsed-

icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false" class="ui-collapsible ui-collapsible-themed-

content ui-collapsible-collapsed">

<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">

<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-carat-

d">

Submenu<span class="ui-collapsible-heading-status"> click to expand contents</span>

</a>

</h3>

<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">

<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;"

www.tobuku.com

5

class="nav-search">

<li data-filtertext="action do"><a href="#" data-ajax="false">Action</a></li>

<li data-filtertext="action do"><a href="#" data-ajax="false">Another action</a></li>

</ul>

</div>

</li>



<li style="margin-left:-16px;margin-right:-16px;" data-role="collapsible" data-enhanced="true" data-collapsed-

icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false" class="ui-collapsible ui-collapsible-themed-

content ui-collapsible-collapsed">

<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">

<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-carat-

d">

Another submenu<span class="ui-collapsible-heading-status"> click to expand contents</span>

</a>

</h3>

<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">

<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;"

class="nav-search">

<li data-filtertext="action do"><a href="#" data-ajax="false">Action</a></li>

<li data-filtertext="action do"><a href="#" data-ajax="false">Another action</a></li>

</ul>

</div>

</li>

</ul>



</div>

</div>



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


<h1>Animals</h1>

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

<div data-role="navbar">

<ul>

<li><a href="#" class="ui-btn-active ui-state-persist">Giraffe</a></li>

<li><a href="#pagethree">Hippopotamus</a></li>

<li><a href="#pagefour">Lion</a></li>

<li><a href="#pagefive">Zebra</a></li>

</ul>

</div>

</div>


<h3>Giraffe</h3>

<p>The giraffe (Giraffa camelopardalis) is an African even-toed ungulate mammal, the tallest living terrestrial animal and the

www.tobuku.com

6

largest ruminant. Its species name refers to its camel-like shape and its leopard-like coloring. Its chief distinguishing

characteristics are its extremely long neck and legs, its horn-like ossicones, and its distinctive coat patterns. It is classified

under the family Giraffidae, along with its closest extant relative, the okapi. The nine subspecies are distinguished by their coat

patterns.

<p align="center"><img src="img/giraffe.png"></p>

<p>The giraffe's scattered range extends from Chad in the north to South Africa in the south, and from Niger in the west to

Somalia in the east. Giraffes usually inhabit savannas, grasslands, and open woodlands. Their primary food source is acacia leaves,

which they browse at heights most other herbivores cannot reach. Giraffes are preyed on by lions; their calves are also targeted by

leopards, spotted hyenas, and wild dogs. Adult giraffes do not have strong social bonds, though they do gather in loose aggregations

if they happen to be moving in the same general direction. Males establish social hierarchies through "necking", which are combat

bouts where the neck is used as a weapon. Dominant males gain mating access to females, which bear the sole responsibility for raising

the young.

<p>The giraffe has intrigued various cultures, both ancient and modern, for its peculiar appearance, and has

often been featured in paintings, books, and cartoons. It is classified by the International Union for Conservation of Nature as Least

Concern, but has been extirpated from many parts of its former range, and some subspecies are classified as Endangered. Nevertheless,

giraffes are still found in numerous national parks and game reserves.

<p align="center"><a href="#pagetwo" data-ajax="false" data-role="button" data-icon="carat-u" data-inline="true"

data-theme="b">Back to top</a></p>

</div>



</div>

</div>



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


<h1>Animals</h1>



<ul>

<li><a href="#pagetwo">Giraffe</a></li>

<li><a href="#" class="ui-btn-active ui-state-persist">Hippopotamus</a></li>



</ul>

</div>

</div>


<a name="top3"></a>

<h3>Hippopotamus</h3>

<p>The common hippopotamus (Hippopotamus amphibius), or hippo, is a large, mostly herbivorous mammal in sub-

Saharan Africa, and one of only two extant species in the family Hippopotamidae, the other being the pygmy hippopotamus (Choeropsis

liberiensis or Hexaprotodon liberiensis). The name comes from the ancient Greek for "river horse". After the elephant and rhinoceros,

the common hippopotamus is the third-largest type of land mammal and the heaviest extant artiodactyl.

<p align="center"><img src="img/hypo.png"></p>

<p>Despite their physical resemblance to pigs and other terrestrial even-toed ungulates, their closest living

www.tobuku.com

7

relatives are cetaceans (whales, porpoises, etc.) from which they diverged about 55 million years ago. The common ancestor of whales

and hippos split from other even-toed ungulates around 60 million years ago. The earliest known hippopotamus fossils, belonging to the

genus Kenyapotamus in Africa, date to around 16 million years ago.

<p>Common hippos are recognizable by their barrel-shaped torsos, wide-opening mouths revealing large canine

tusks, nearly hairless bodies, columnar-like legs and large size; adults average 1,500 kg (3,300 lb) and 1,300 kg (2,900 lb) for males

and females respectively, making them the largest species of land mammal after the 3 species of elephants and the white and Indian

rhinoceros. Despite its stocky shape and short legs, it is capable of running 30 km/h (19 mph) over short distances. The hippopotamus

is a highly aggressive and unpredictable animal and is ranked among the most dangerous animals in Africa. Nevertheless, they are still

threatened by habitat loss and poaching for their meat and ivory canine teeth.

<p align="center"><a href="#pagethree" data-ajax="false" data-role="button" data-icon="carat-u" data-

inline="true" data-theme="b">Back to top</a></p>

</div>



</div>

</div>



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


<h1>Animals</h1>



<ul>



<li><a href="#pagefour" class="ui-btn-active ui-state-persist">Lion</a></li>


</ul>

</div>

</div>


<a name="top4"></a>

<h3>Lion</h3>

<p>The lion (Panthera leo) is one of the five big cats in the genus Panthera and a member of the family Felidae.

The commonly used term African lion collectively denotes the several subspecies found in Africa. With some males exceeding 250 kg (550

lb) in weight, it is the second-largest living cat after the tiger. Wild lions currently exist in sub-Saharan Africa and in Asia

(where an endangered remnant population resides in Gir Forest National Park in India) while other types of lions have disappeared from

North Africa and Southwest Asia in historic times.

<p align="center"><img src="img/lion.png"></p>

<p>Until the late Pleistocene, about 10,000 years ago, the lion was the most widespread large land mammal after

humans. They were found in most of Africa, across Eurasia from western Europe to India, and in the Americas from the Yukon to Peru.

The lion is a vulnerable species, having seen a major population decline in its African range of 30–50% per two decades during the

second half of the 20th century. Lion populations are untenable outside designated reserves and national parks. Although the cause of

the decline is not fully understood, habitat loss and conflicts with humans are currently the greatest causes of concern. Within

Africa, the West African lion population is particularly endangered.

<p>Lions live for 10–14 years in the wild, although in captivity they can live more than 20 years. In the wild,

males seldom live longer than 10 years, as injuries sustained from continual fighting with rival males greatly reduce their longevity.

www.tobuku.com

8

They typically inhabit savanna and grassland, although they may take to bush and forest. Lions are unusually social compared to other

cats. A pride of lions consists of related females and offspring and a small number of adult males. Groups of female lions typically

hunt together, preying mostly on large ungulates. Lions are apex and keystone predators, although they are also expert scavengers

obtaining over 50 percent of their food by scavenging as opportunity allows. While lions do not typically hunt humans, some have.

Sleeping mainly during the day, lions are primarily nocturnal, although bordering on crepuscular in nature.

<p align="center"><a href="#pagefour" data-ajax="false" data-role="button" data-icon="carat-u" data-

inline="true" data-theme="b">Back to top</a></p>

</div>



</div>

</div>



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


<h1>Animals</h1>



<ul>




<li><a href="#pagefive" class="ui-btn-active ui-state-persist">Zebra</a></li>

</ul>

</div>

</div>


<a name="top5"></a>

<h3>Zebra</h3>

<p>Zebras are several species of African equids (horse family) united by their distinctive black and white

striped coats. Their stripes come in different patterns, unique to each individual. They are generally social animals that live in

small harems to large herds. Unlike their closest relatives, horses and donkeys, zebras have never been truly domesticated.

<p align="center"><img src="img/zebra.png"></p>

<p>There are three species of zebras: the plains zebra, the Grévy's zebra and the mountain zebra. The plains

zebra and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus Dolichohippus. The

latter resembles an ass, to which it is closely related, while the former two are more horse-like. All three belong to the genus

Equus, along with other living equids.

<p>The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of

habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. However, various anthropogenic

factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the

mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late

19th century – though there is currently a plan, called the Quagga Project, that aims to breed zebras that are phenotypically similar

to the quagga in a process called breeding back.

<p align="center"><a href="#pagefive" data-ajax="false" data-role="button" data-icon="carat-u" data-inline="true" data-

theme="b">Back to top</a></p>

</div>

www.tobuku.com

9



</div>

</div>

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/index.js"></script>

</body>

</html>


www.tobuku.com

10

Mempersiapkan file-file gambar File-file gambar ada di dalam folder ..\animalworld\www\img.

Mempersiapkan file icon Sebuah icon baru telah dipersiapkan untuk menggantikan icon standar dari aplikasi Cordova.

1. Siapkan sebuah gambar dengan format PNG dan berukuran 96 x 96 pixel.

2. Pada folder projek aplikasi Cordova, silakan masuk ke sub-folder ..\platforms\android\res. Di

situ akan dijumpai beberapa folder drawable dan drawable-xxx seperti pada gambar berikut

ini.

3. Hapus semua folder drawable-xxx dan tinggalkan sebuah folder bernama drawable. Dengan

dihapusnya folder-folder drawable-xxx maka perangkat mobile selalu akan mencari gambar icon

di dalam folder drawable.

4. Di dalam folder drawable terdapat file bernama icon.png. File inilah yang dapat diganti dengan

gambar lain supaya icon aplikasi berubah sesuai dengan gambar yang diinginkan. Silakan

mengambil gambar icon yang baru dan salin ke dalam folder ini dengan nama file yang sama

(hapus file icon.png yang asli). Pastikan resolusinya sama dengan gambar yang asli.


www.tobuku.com

11

Menjalankan aplikasi 1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android

terdeteksi oleh komputer.

2. Masuk ke dalam folder ..\Cordova\workshop\animalworld dan jalankan perintah:

cordova run android

Beberapa tampilan aplikasi diperlihatkan pada gambar di bawah ini.

Tampilan awal index.html

Tampilan berikutnya


www.tobuku.com

12

Menu menggunakan jQuery Mobile

Komponen Tab menggunakan jQuery Mobile

Proverbs 1:7. The fear of the LORD is the beginning of knowledge: but fools despise wisdom and

instruction.


aplikasi cordova dengan jquery mobile - tobuku.com cordova dengan jquery mobile.pdf · jquery...

Documents