Aplikasi Cordova Dengan Bootstrap

www.tobuku.
com
Aplikasi Cordova dengan Bootstrap

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)
Untuk memperindah tampilan digunakan UI framework JQuery dan Bootstrap
Aplikasi menampilkan komponen menu dan tab dari Bootstrap
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 animalkingdom.
3. Jalankan perintah berikut ini:
cordova create animalkingdom com.excercise.animalkingdom Animal

Kingdom
Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder
..\Cordova\workshop\ animalkingdom. Silakan menuju folder tersebut dan melihat folder-folder
dan file-file apa saja yang sudah terbentuk.
1
www.tobuku.com
4. Tambahkan dukungan untuk platform Android. Silakan masuk ke flder ..\Cordova\workshop\

animalkingdom dan jalankan perintah:
cordova platforms add android
5. Tambahkan plugin dasar. Silakan masuk ke flder ..\Cordova\workshop\animalkingdom 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\animalkingdom\platforms\android.

Ubah versi API pada bagian target dengan yang sesuai.
Buka file AndroidManifest.xml di dalam folder ..\workshop\animalkingdom\platforms\

android. Ubah versi API pada bagian android:targetSdkVersion dengan yang sesuai.
Mempersiapkan JQuery
JQuery dibutuhkan untuk digunakan bersama-sama Bootstrap. 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 ..\animalkingdom\www\js.
Mempersiapkan Bootstrap
Pada contoh ini framework Bootstrap akan digunakan untuk memperindah tampilan antar muka (User
Interface= UI). Bootstrap adalah UI framework yang sangat popular dan cukup mudah digunakan. Versi
Bootstrap yang digunakan pada contoh program ini adalah 3.3.4, namun demikian tidak ada batasan
untuk menggunakan versi yang lebih baru.
1. Silakan mengunduh JQuery dari situs beralamat:
http://getbootstrap.com/
2. Silakan menyalin file bootstrap.min.js ke dalam folder ..\animalkingdom\www\js.

3. Silakan menyalin semua file bootstrap*.css ke dalam folder ..\animalkingdom\www\css.
2
www.tobuku.com
Mengedit file html

1. Buka file index.html yang ada di dalam folder ..\animalkingdom\www. Hapus semua skrip HTML yang asli dang anti dengan skrip yang
baru berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src
'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<title>Animal Kingdom</title>
</head>
<body>
<nav class="navbar navbar-inverse">

<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Animal Kingdom</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
3
www.tobuku.com
<li role="separator" class="divider"></li>

<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>Welcome!</h1>
<div class="panel panel-primary">
<div class="panel-heading"><h2>Wildlife Tourism</h2></div>
<div class="panel-body">
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.
</div>
</div>
<blockquote>
<p>Wildlife tourism is also a multi-million dollar industry offering customized tour packages and safaris.
</blockquote>
<p align="center"><a class="btn btn-primary btn-lg" href="animals.html" role="button">Learn more</a></p>
4
www.tobuku.com
</div>
<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
2. Buat sebuah file HTML baru bernama animals.html di dalam folder www yang sama. Salin skrip HTML berikut ini ke dalamnya.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src
'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<title>Animal Kingdom</title>
</head>
<body>
<a name="top"></a>
<nav class="navbar navbar-inverse">
<div class="container-fluid">

<div class="navbar-header">
<a class="navbar-brand" href="index.html"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>Back</a>
</div>
</div>
</nav>
<div class="container">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#giraffe" data-toggle="tab">
<strong>Giraffe</strong>
</a>
</li>
<li><a href="#hippo" data-toggle="tab"><strong>Hippopotamus</strong></a></li>
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown"><strong>Other</strong>
5
www.tobuku.com
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#lion" tabindex="-1" data-toggle="tab"><strong>Lion</strong></a></li>
<li><a href="#zebra" tabindex="-1" data-toggle="tab"><strong>Zebra</strong></a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="giraffe">
<h3>Giraffe</h3>
<p>The giraffe (Giraffa camelopardalis) is an African even-toed ungulate mammal, the tallest living terrestrial animal and the
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.
</div>
<div class="tab-pane fade" id="hippo">
<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
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.
</div>
<div class="tab-pane fade" id="lion">
<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
6
www.tobuku.com
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 3050% 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 1014 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.
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.
</div>
<div class="tab-pane fade" id="zebra">
<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 Grvy's zebra and the mountain zebra. The plains
zebra and the mountain zebra belong to the subgenus Hippotigris, but Grvy'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. Grvy'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.
</div>
</div>
<p><a href="#top"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Back to top</a>

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

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
7
www.tobuku.com
Mempersiapkan file-file gambar

File-file gambar ada di dalam folder ..\animalkingdom\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.
8
www.tobuku.com
Menjalankan aplikasi
1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android
terdeteksi oleh komputer.
2. Masuk ke dalam folder ..\Cordova\workshop\animalkingdom dan jalankan perintah:
cordova run android
Beberapa tampilan aplikasi diperlihatkan pada gambar di bawah ini.
Tampilan awal index.html Menu pull-down menggunakan Bootstrap
9
www.tobuku.com
Komponen Tab pada animals.html menggunakan

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

Aplikasi Cordova Dengan Bootstrap

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Aplikasi Cordova Dengan Bootstrap

Diunggah oleh

Hak Cipta:

Format Tersedia

www.tobuku.

Aplikasi Cordova dengan Bootstrap

Membuat projek baru

3. Jalankan perintah berikut ini:

cordova create animalkingdom com.excercise.animalkingdom Animal

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

cordova platforms add android

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

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-console

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

Buka file AndroidManifest.xml di dalam folder ..\workshop\animalkingdom\platforms\

1. Silakan mengunduh JQuery dari situs beralamat:

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

1. Silakan mengunduh JQuery dari situs beralamat:

2. Silakan menyalin file bootstrap.min.js ke dalam folder ..\animalkingdom\www\js.

Mengedit file html

<nav class="navbar navbar-inverse">

<li role="separator" class="divider"></li>

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

<p><a href="#top"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;Back to top</a>

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

Mempersiapkan file-file gambar

Mempersiapkan file icon

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

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

cordova run android

Beberapa tampilan aplikasi diperlihatkan pada gambar di bawah ini.

Tampilan awal index.html Menu pull-down menggunakan Bootstrap

Komponen Tab pada animals.html menggunakan

Anda mungkin juga menyukai

<p><a href="#top"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Back to top</a>