Anda di halaman 1dari 78

26

BAB III
ANALISIS DAN PEMBAHASAN

Dalam bab ini penulis akan membahas lebih dalam mengenai pembuatan
Aplikasi Pengenalan Budaya Betawi dengan menggunakan Framework PhoneGap,
editor Eclipse. Pembahasan dibagi menjadi dua tahapan, yaitu tahapan analisis dan
tahapan perancangan.
Pada tahapan analisis akan menjelaskan tentang gambaran umum aplikasi,
struktur navigasi, dan rancangan tampilan. Sedangkan pada tahapan perancangan
aplikasi akan dijelaskan tentang pembuatan interface aplikasi dan pengkodean pada
aplikasi.
3.1.

Gambaran Umum Aplikasi

Secara umum, aplikasi Pengenalan Budaya Betawi ini digunakan untuk


mengenalkan budaya Betawi berbasis mobile. Pembelajaran mengenai
pengenalan budaya ini biasanya hanya diterapkan di sekolah atau di instansiinstansi tertentu yang juga tentunya memerlukan seorang pengajar yang dapat
menguasai materi tentang budaya tersebut. Aplikasi ini dibuat untuk
mempermudah

pengajaran Budaya

Betawi kepada penggunanya

tanpa

memerlukan seorang pengajar khusus yang menguasai bidang tersebut. Aplikasi


ini dibuat dengan menggunakan Framework PhoneGap.
Pada pembuatan aplikasi Android dengan menggunakan Framework
PhoneGap ini menggunakan Emulator SDK Manager. Dengan emulator ini,
dapat membantu para pembuat aplikasi Android yang sama-sama menggunakan
Framework PhoneGap untuk mendapatkan tampilan aplikasi tersebut pada
telepon selular. Penggunaan emulator ini mudah digunakan, karena pada

27

dasarnya cara kerja emulator ini seperti halnya telepon selular pada umumnya.
User hanya perlu mengklik icon yang ada pada emulator maka aplikasi yang
dipilih akan muncul.
Aplikasi Pengenalan Budaya Betawi berbasis mobile ini akan menampilkan
menu yang dibutuhkan oleh user, dalam hal ini informasi mengenai pengenalan
budaya Betawi, cerita-cerita rakyat, Bela diri Betawi, Senjata tradisional,
masakan-masakan khas, dan, kesenian-kesenian dari Betawi.
3.2.

Struktur Navigasi
Pada aplikasi ini terdiri dari beberapa tampilan form yang masing-masing dari
form tersebut memiliki kegunaan dan fungsinya masing struktur navigasi yang
digunakan adalah struktur navigasi hirarki.
Berikut adalah struktur navigasi dari project aplikasi ini.

Gambar 3. 1 Struktur Navigasi Aplikasi

28

Penjelasan untuk struktur navigasi diatas adalah sebagai berikut :


1. Menu awal
Pada menu awal ini akan berisi pengenalan budaya, bantuan dan keluar.
2. Pengenalan budaya
Pada menu pengenalan budaya ini akan berisi menu budaya Betawi, kesenian
Betawi, bela diri Betawi, senjata tradisional, cerita rakyat, dan makanan khas dari
Betawi.
3. Bantuan
Berisi penjelasan mengenai hal-hal yang bersangkutan dengan aplikasi untuk
memudahkan pengguna dalam menggunakan aplikasi.
4. Budaya Betawi
Berisi informasi-informasi mengenai budaya Betawi.
5. Kesenian Betawi
Berisi informasi-informasi mengenai kesenian-kesenian asli Betawi.
6. Bela diri Betawi
Berisi tentang informasi-informasi mengenai bela diri Betawi dan sejarah bela diri
tersebut.
7. Senjata Tradisional
Berisi tentang informasi-informasi mengenai sejarah senjata tradisional Betawi.
8. Cerita rakyat
Berisi kumpulan cerita rakyat yang tokohnya merupakan tokoh asli Betawi.
9. Hidangan Khas Betawi
Berisi tentang informasi mengenai makanan dan Minuman khas dari Betawi.
10. Pengenalan Budaya
Berisi tentang informasi mengenai budaya Betawi.
11. Galeri Budaya Betawi
Berisi tentang galeri foto yang bersangkutan dengan budaya Betawi.

29

12. Tari Betawi


Berisi Informasi tentang jenis-jenis Tarian Betawi seperti Lenggang Nyai, Japin,
Topeng Betawi, Yapong dan Cokek Betawi.
13. Musik Betawi
Berisi tentang lirik lagu dan lagu Betawi seperti Jali-jali, Kicir-kicir, Ondel-ondel,
Lenggang Kangkung,Surilang Njot-njotan dan Sirih Kuning
14. Lenong Betawi
Berisi informasi tentang jenis-jenis lenong Betawi seperti Lenong Denes dan
Lenong Preman
15. Bela diri Beksi
Berisi informasi tentang Bela diri asli Betawi yaitu Beksi yang meliputi Sejarah
Beksi, Lambang Beksi dan Jurus-jurus Betawi
16. Cerita rakyat Betawi
Berisi cerita rakyat dari Betawi seperti cerita tentang Si Pitung, Si Jampang, Nyai
Dasima dan Jembatan Ancol.
17. Senjata Tradisional Betawi
Berisi informasi tentang Senjata Tradisional Betawi seperti Golok, Cundrik, Pisau
Raut, dan Trisula Betawi
18. Makanan Khas Betawi
Berisi informasi tentang makanan-makanan Betawi seperti Asinan Betawi, Soto
Betawi, Kue Talam, Kue Ape, Nasi uduk, Kue Putu, Kue Sagon, Kue Wajik, Roti
Gambang, Roti Buaya, Kue Rangi, Gado-gado, Kue Cente Manis,Kue kembang
Goyang, Getuk Lindri, Semur Jengkol, Kue Cincin,Kue Cubit, Kue Pancong, Kue
Leker, Kue Lupis dan Kue Bugis Betawi.
19. Minuman Khas Betawi
Berisi Informasi tentang minuman-minuman Betawi seperti Es Selendang
Mayang, Es Doger dan Bir Pletok.

30

3.3.

Rancangan Tampilan
Pada bagian ini penulis akan mencoba membahas tentang rancangan tampilan
pada aplikasi ini. Selain itu, juga disertai dengan penjelasan dari tampilan
tersebut.

3.3.1

Rancangan Tampilan Menu Utama


Pada saat aplikasi ini pertama dijalankan maka aplikasi ini akan menampilkan

sebuah menu yang menampilkan fasilitas-fasilitas yang terdapat pada aplikasi ini.
Berikut rancangan tampilannya.

Gambar 3. 2 Rancangan Tampilan Menu Utama


Pada rancangan diatas terdapat menu aplikasi yang terdiri dari : Pengenalan
Budaya, Bantuan, dan Keluar. Masing-masing merupakan tombol yang akan
membawa user untuk menuju tampilan dari masing-masng fasilitas tersebut.

31

3.3.2

Rancangan Menu Tampilan Form Pilihan


Pada menu ini akan menampilkan apa saja yang akan di perkenalkan kepada

user mengenai budaya Betawi.Berikut rancangan tampilannya.

Gambar 3. 3 Rancangan Tampilan Menu Pilihan


Pada rancangan diatas terdapat menu aplikasi yang terdiri dari : Budaya
Betawi, Kesenian,Bela diri,Cerita rakyat, Senjata tradisional dan Makanan Khas.
Masing-masing merupakan tombol yang akan membawa user untuk menuju
tampilan dari masing-masing fasilitas tersebut.
3.3.3

Rancangan Tampilan Menu Budaya Betawi

Pada menu ini akan menampilkan pilihan mengenai pengenalan Budaya Betawi .
Berikut rancangan tampilannya.

32

Gambar 3. 4 Rancangan tampilan menu Budaya Betawi


Pada rancangan diatas terdapat menu aplikasi yang terdiri dari :Pengenalan
Budaya Betawi dan galeri Budaya Betawi. Masing-masing merupakan tombol
yang akan membawa user untuk menuju tampilan dari masing-masing fasilitas
tersebut
3.3.4

Rancangan Tampilan Artikel Pengenalan Budaya

Pada tampilan halaman ini akan menampilkan


Budaya Betawi . Berikut rancangan tampilannya.

artikel mengenai Pengenalan

33

Gambar 3. 5 Rancangan tampilan artikel budaya Betawi


Pada rancangan tampilan artikel Pengenalan Budaya Betawi terdapat
informasi-informasi mengenai Budaya Betawi.
3.3.5

Rancangan Tampilan Galeri Foto Budaya

Pada tampilan halaman ini akan menampilkan Galeri foto mengenai Budaya
Betawi . Berikut rancangan tampilannya

34

Gambar 3. 6 Rancangan tampilan Galeri budaya Betawi


Pada rancangan tampilan Galeri Budaya Betawi terdapat beberapa foto
mengenai Budaya Betawi.
3.3.6

Rancangan Tampilan Slide Foto Budaya

Pada tampilan halaman ini akan menampilkan foto dengan ukuran lebih besar
mengenai Galeri Budaya Betawi . Berikut rancangan tampilannya

35

Gambar 3. 7 Rancangan tampilan Galeri budaya Betawi

3.3.7 Rancangan Tampilan Menu Kesenian Tari Betawi

Pada menu ini akan

menampilkan pilihan mengenai Kesenian Betawi .

Kesenian Betawi yang ditampilkan ada tiga yaitu,Tari, Musik dan Lenong.
Berikut rancangan tampilan untuk tampilan menu Kesenian Tari Betawi.

36

Gambar 3. 8 Rancangan tampilan menu pilihan kesenian Tari Betawi


Pada rancangan di atas akan disebutkan 5 macam Tari Betawi yaitu Lenggang
Nyai, Cokek Betawi, Japin, Topeng Betawi, Yapong.

3.3.8

Rancangan Tampilan Artikel Kesenian Tari Betawi

Pada tampilan halaman ini akan menampilkan

artikel mengenai

macam Tari Betawi yang telah disebutkan. Berikut rancangan tampilannya

kelima

37

Gambar 3. 9 Rancangan tampilan artikel menu kesenian Tari Betawi


Pada rancangan tampilan di atas akan terdapat informasi-informasi mengenai
macam-macam Tari Betawi tersebut.

3.3.9

Rancangan Tampilan Menu Kesenian Musik Betawi

Pada menu ini akan

menampilkan pilihan mengenai Kesenian Betawi .

Kesenian Betawi yang ditampilkan ada tiga yaitu,Tari, Musik dan Lenong.
Berikut rancangan tampilan untuk tampilan menu Kesenian Musik Betawi.

38

Gambar 3. 10 Rancangan tampilan menu pilihan kesenian musik Betawi


Pada rancangan di atas akan disebutkan 6 Lagu Betawi yaitu Jali-jali, Kicirkicir, Lenggang kangkung, Ondel-ondel, Sirih Kuning, dan Surilang Njot-Njotan.

3.3.10

Rancangan Tampilan Lagu Musik Daerah Betawi

Pada rancangan ini akan ditampilkan Lagu lagu Daerah Betawi, beserta
Lirik lagunya. Berikut adalah rancangan dari tampilannya.

39

Gambar 3. 11 Rancangan tampilan Lagu-lagu Betawi

3.3.11 Rancangan Tampilan Menu Kesenian Lenong Betawi


Pada menu ini akan

menampilkan pilihan mengenai Kesenian Betawi .

Kesenian Betawi yang ditampilkan ada tiga yaitu,Tari, Musik dan Lenong.
Berikut rancangan tampilan untuk tampilan menu Kesenian Lenong Betawi.

40

Gambar 3. 12 Rancangan tampilan menu pilhan kesenian lenong Betawi


Pada rancangan di atas akan disebutkan 2 Jenis Lenong Betawi yaitu Lenong
Denes dan lenong Preman.

3.3.12 Rancangan Tampilan Artikel Kesenian Lenong Betawi

Pada tampilan halaman ini akan menampilkan artikel mengenai kedua jenis
Lenong Betawi yang telah disebutkan. Berikut rancangan tampilannya

41

Gambar 3. 13 Rancangan tampilan artikel kesenian lenong Betawi


Pada rancangan tampilan di atas akan terdapat informasi-informasi mengenai
jenis-jenis Lenong Betawi tersebut.

3.3.13 Rancangan Tampilan Bela diri Betawi


Pada menu ini akan menampilkan pilihan mengenai Bela diri asal Betawi
yaitu Beksi. Berikut rancangan tampilannya.

42

Gambar 3. 14 Rancangan tampilan menu pilihan bela diri


Pada rancangan diatas terdapat menu aplikasi yang terdiri dari :Sejarah Beksi,
Lambang Beksi dan jurus-jurus Beksi. Masing-masing merupakan tombol yang
akan membawa user untuk menuju tampilan dari masing-masing fasilitas tersebut.

3.3.14 Rancangan Tampilan Artikel Bela Diri Betawi

Pada tampilan halaman ini akan menampilkan

artikel mengenai

ketiga

pilihan jenis Lenong Betawi yang telah disebutkan. Berikut rancangan


tampilannya.

43

Gambar 3. 15 Rancangan tampilan artikel bela diri


Pada rancangan tampilan di atas akan terdapat informasi-informasi mengenai
pilhan informasi bela diri tersebut.
3.3.15 Rancangan Tampilan Menu Cerita Rakyat Betawi

Pada menu ini akan menampilkan pilihan mengenai Cerita Rakyat asal
Betawi. Berikut rancangan tampilannya

44

Gambar 3. 16 Rancangan tampilan menu pilihan cerita rakyat


Pada rancangan diatas terdapat menu pilihan cerita rakyat yang terdiri dari : Si
Pitung, Si Jampang, Nyai Dasima, dan Jembatan Ancol .

Masing-masing

merupakan tombol yang akan membawa user untuk menuju tampilan dari
masing-masing fasilitas tersebut
3.3.16 Rancangan Tampilan Artikel Cerita Rakyat Betawi

Pada tampilan halaman ini akan menampilkan artikel mengenai keempat


pilihan Cerita Rakyat yang telah disebutkan. Berikut rancangan tampilannya.

45

Gambar 3. 17 Rancangan tampilan artikel cerita rakyat


Pada rancangan tampilan di atas akan terdapat Cerita Rakyat yang telah
dipilih oleh user tersebut.

3.3.17 Rancangan Tampilan Menu Senjata Tradisional Betawi

Pada menu ini akan menampilkan pilihan mengenai Senjata Tradisional asal
Betawi. Berikut rancangan tampilannya.

46

Gambar 3. 18 Rancangan tampilan menu pilihan senjata tradisional Betawi


Pada rancangan diatas terdapat menu pilihan Senjata Tradisional yang terdiri
dari Golok, Pisau Raut, Cundrik dan Trisula Betawi . Masing-masing merupakan
tombol yang akan membawa user untuk menuju tampilan dari masing-masing
fasilitas tersebut.
3.3.18 Rancangan Tampilan Artikel Senjata Tradisional Betawi

Pada tampilan halaman ini akan menampilkan

artikel mengenai

kelima

pilihan jenis Senjata Tradisional yang telah disebutkan. Berikut rancangan


tampilannya.

47

Gambar 3. 19 Rancangan tampilan artikel senjata tradisional Betawi


Pada rancangan tampilan di atas akan terdapat informasi mengenai Senjata
Tradisional Betawi yang telah dipilih oleh user tersebut.

3.3.19 Rancangan Tampilan Menu Hidangan Khas Betawi

Pada menu ini akan menampilkan pilihan mengenai Hidangan khas Betawi.
Berikut rancangan tampilannya.

48

Gambar 3. 20 Rancangan tampilan menu pilihan Hidangan khas Betawi


Pada rancangan diatas terdapat menu pilihan Hidangan khas Betawi yang
terdiri dari Makanan khas Betawi dan Minuman khas Betawi. Masing-masing
merupakan tombol yang akan membawa user untuk menuju tampilan dari
masing-masing fasilitas tersebut

3.3.20 Rancangan Tampilan Menu Makanan Khas Betawi


Pada rancangan ini akan ditampilkan pilihan makanan khas betawi dan
rancangannya adalah sebagai berikut

49

Gambar 3. 21 Rancangan tampilan menu pilihan makanan khas Betawi


Pada rancangan diatas akan disebutkan beberapa jenis Makanan khas Betawi,
pada pilihan terdapat 27 jenis makanan dari Betawi, dan terdapat konten filter
items sehingga user dapat mencari informasi jenis makanan yang akan dicari.
3.3.21 Rancangan Tampilan Artikel Makanan Khas Betawi

Pada tampilan halaman ini akan menampilkan artikel mengenai makanan


khas betawi yang telah dimasukkan oleh user. Berikut rancangan tampilannya.

50

Gambar 3. 22 Rancangan tampilan artikel makanan khas Betawi


Pada rancangan tampilan di atas akan terdapat informasi mengenai Makanan
khas Betawi yang telah dipilih oleh user tersebut.

3.3.22

Rancangan Tampilan Menu Minuman Khas Betawi

Pada menu ini akan ditampilkan pilihan Minuman khas Betawi dan
rancangannya adalah sebagai berikut.

51

Gambar 3. 23 Rancangan tampilan menu pilihan Minuman khas Betawi


Pada rancangan diatas akan disebutkan beberapa jenis Minuman khas Betawi,
pada pilihan terdapat 3 jenis Minuman dari Betawi, dan terdapat konten filter
items sehingga user dapat mencari informasi jenis minuman yang akan dicari

3.3.23 Rancangan Tampilan Artikel Minuman Khas Betawi

Pada tampilan halaman ini akan menampilkan artikel mengenai Minuman


khas Betawi yang telah dimasukkan oleh user. Berikut rancangan tampilannya.

52

Gambar 3. 24 Rancangan tampilan artikel minuman khas Betawi


Pada rancangan tampilan di atas akan terdapat informasi mengenai Minuman
khas Betawi yang telah dipilih oleh user tersebut.
3.3.24 Rancangan Tampilan Menu Bantuan
Pada menu ini akan menampilkan bantuan mengenai aplikasi ini. Berikut
rancangan tampilannya

53

Gambar 3. 25 Rancangan tampilan menu bantuan


Pada rancangan tampilan menu bantuan terdapat informasi-informasi mengenai
aplikasi ini.
3.4.

Pembuatan Aplikasi

3.4.1

Hardware dan Software yang Digunakan


Peralatan pendukung yang penulis gunakan untuk membuat aplikasi

Pengenalan Budaya Betawi Berbasis Android Menggunakan Framework


PhoneGap ini adalah sebuah laptop yang terdiri atas hardware dan software.
Hardware yang digunakan adalah sebagai berikut:

Processor Intel Core i3 2.10 GHz

RAM 4096 MB

500 GB Kapasitas Harddisk

54

Software yang digunakan penulis adalah sebagai berikut:

Microsoft Windows 7 Ultimate sebagai sistem operasi

Eclipse Juno

Plugins ADT Android

SDK Android

Plugins Phonegap versi 2.1

jQuery Mobile

3.4.2

Pembuatan Project Aplikasi


Untuk membuat sebuah project baru pada Aplikasi Android
menggunakan PhoneGap, jalankan IDE Eclipse, pilih File New Other,
sehingga muncul pilihan seperti berikut:

Gambar 3. 26 Tampilan new project


Kemudian isi nama aplikasinya dan tentukan minimum, target dan compile
untuk SDKnya untuk lebih jelasnya bisa dilihat pada gambar di bawah ini.

55

Gambar 3. 27 Tampilan new Android Application


Kemudian akan muncul tampilan icon yang akan digunakan untuk aplikasi ini,
kali ini penulis menggunakan gambar khusus yang berhubungan dengan Budaya
Betawi untuk aplikasi yang akan dibuat,untuk lebih jelasnya dapat dilihat pada
gambar dibawah ini.

Gambar 3. 28 Tampilan configure launcher Icon

56

Bila semua langkah telah dilakukan kemudian klik finish untuk mengakhiri.
Kemudian buka direktori PhoneGap 2.1 yang telah di download, kemudin buka folder
phonegap lalu buka folder lib, buka lagi folder android maka akan terlihat file file
Phonegap yang akan digunakan dalam project Android yang telah dibuat tadi. Uutuk
lebih jelasnya dapat dilihat pada gambar dibawah ini.

Gambar 3. 29 Tampilan isi folder PhoneGap versi 2.1


Kemudian klik kanan, pada folder assets, klik new, pilih folder kemudian beri
nama folder tersebut dengan www. Kemudian buka folder PhoneGap, cari file
cordova-2.1.0.jar, kemudian copy dan paste di folder libs pada project
Androidnya. Lalu

copy dan pastekan folder xml yang terdapat pada folder

PhoneGap ke folder res pada project androidnya .

Gambar 3. 30 Tampilan isi Project betawi pada Eclipse

57

Lalu klik kanan project androidnya, pilih properties. Maka akan muncul kotak
dialog seperti pada gambar di bawah ini.

Gambar 3. 31 Tampilan Pengaturan Properties pada Project Betawi di Eclipse


Kemudian klik java build path, pilih tab libraries klik add jar, dan cari file
cordova-2.1.0.jar kemudian klik OK. Kemudian buka folder src, dan

Manifestnya bukalah file java dalam folder src kemudian masukkan kodingan
seperti dibawah ini.
package com.example.betawi;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/budaya_jakarta.html");
}}}

Lalu kemudian buka lah Manifestnya, , lalu sesuaikan kodingannya dengan yang
seperti dibawah ini diantara uses sdk dan application.
supports-screens

58

android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Kemudian akhirnya framework Phonegap telah tertanam di project android


tersebut.

3.4.2.1 Pembuatan Tampilan Menu Utama


Pada tampilan awal ini yang biasanya disebut halaman awal,seperti
yang telah dijelaskan sebelumnya bahwa aplikasi menggunakan IBM
worklight ini, dibentuk menggunakan 3 buah bahasa pemrograman, yaitu
HTML5, CSS3 dan Javascript, file HTML dan CSS digunakan sebagai
tampilan dari aplikasi, dan Javascript. Pada pembuatan tampilan menu utama
ini penulis menggunakan sebuah file css jquery mobile versi 1.3.1. File CSS
kemudian di save ke dalam folder css yang ada pada project tersebut dan
penulis memberikan nama file CSS tersebut
1.3.1.min.css.

dengan jquery.mobile-

59

Kemudian proses pengerjaan dibuat pada menggunakan bahasa


pemrograman HTML5. Tampilan ini akan menampilkan background, dan
beberapa button. Seperti pada bagian perancangan tampilan sebelumnya.
Untuk dapat menambahkan objek-objek ini penulis akan bekerja pada sebuah
file html yang secara default telah diberikan pada saat membuat project yaitu
budaya_jkt.html yang terdapat pada folder common. Lalu gunakan skrip
berikut untuk menampilkan form pada menu utama.
Kemudian masuk pada kodingan HTMLnya pada file HTML ini berguna
untuk menampilkan tampilan yang ada pada form, pada sebelumnya telah
disebutkan bahwa pada file CSS digunakan untuk mendesain sebuah class
yang akan dipanggil pada file htmlnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah
didesain sebelumnya, dengan menggunakan kodingan src, akan diambil file
yang akan diambil pada projectnya, telah disebutkan file css telah disimpan
pada folder CSS.
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="e" data-role="header" data-position="fixed">
<h3>Budaya Betawi</h3>
</div>
<div data-role="content">
<div style="text-align: center">
<img style="width: 288px; height: 260px"
src="images/ondel-ondel1.jpg" />
</div>
<a data-role="button" data-transition="slide" data-theme="e"
href="formpilih-1.html"> Pengenalan Budaya </a>
<a data-role="button" data-transition="slide" data-theme="e"
href="#page2"> Bantuan </a>

60

<a data-role="button" data-transition="slide" data-theme="e"


onclick="WL.App.close()"> Keluar </a>
</div>
</div>
</div>
</body>

Pada potongan skrip di atas akan di buat 3 buah button, 1 buah image dan 1
buah header, button yang akan dibuat berisi kan Pengenalan Budaya, Info
Aplikasi dan Keluar.
3.4.2.2

Pembuatan Tampilan Menu Pilihan

Pada menu utama apabila user mengklik button Pengenalan Budaya maka
akan muncul sebuah form baru yang penulis beri nama menu pilihan. Kemudian
untuk membuat form pilihan ini penulis tambah dulu file htmlnya dengan cara
klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan nama
formpilih-1.html. Pada file ini masih menggunakan desain CSS yang telah dibuat
sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="content">
<div style="text-align: center">
<img style="width: 288px; height: 200px"
src="images/ondel-ondel.jpg" />
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="e" data-inset="true">
<li data-role="list-divider" role="heading">Pengenalan Budaya
Betawi</li>

61

<li data-theme=""><a href="budaya.html" data-transition="slide">


Budaya Betawi </a></li>
<li data-theme=""><a href="kesenian-Tari.html"
data-transition="slide"> Kesenian Betawi </a></li>
<li data-theme=""><a href="bela_diri.html"
data-transition="slide"> Bela diri Betawi </a></li>
<li data-theme=""><a href="cerita_rakyat.html"
data-transition="slide"> Cerita rakyat </a></li>
<li data-theme=""><a href="senjata.html"
data-transition="slide"> Senjata Tradisional </a></li>
<li data-theme=""><a href="makanan.html" data transition="slide">
Hidangan khas Betawi </a>
</ul>
</div>

Pada potongan skrip diatas akan dimasukkan sebuah image dan list view yang
berisi 5 buah button, yang berisi Budaya Betawi, Kesenian Betawi, Bela diri
Betawi, Cerita Rakyat, Senjata Tradisional dan Makanan Khas dari Betawi.
3.4.2.3 Pembuatan Tampilan Menu Budaya Betawi

Apabila user mengklik button Budaya betawi maka akan muncul sebuah form
beru, kemudian penulis memberikan nama menu Budaya Betawi.
Kemudian untuk membuat form pilihan ini penulis tambah dulu file htmlnya
dengan cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi
dengan nama budaya.html. Pada file ini masih menggunakan desain CSS yang
telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="content">

62

<div style="text-align: center">


<img style="width: 288px; height: 260px"
src="images/dki/budaya.jpg" />
</div>
<a data-role="button" data-transition="slide" data-theme="e"
href="betawi.html"> Pengenalan Budaya Betawi </a> <a
data-role="button" data-transition="slide" data-theme="e"
href="galeri_betawi.html"> Galeri Budaya Betawi </a>

Pada potongan skrip di atas, akan di masukkan 2 buah button sebagai pilihan
yaitu button, pengenalan budaya betawi dan galeri budaya betawi. Button dapat
dimasukkan dengan memasukkan data-role = button, kodingan data-role
berguna sebagai penunjuk sifat suatu data yang akan dibuat. Lalu transisi yang
digunakan perpindahan form adalah slide, lalu kodingan href berfungsi sebagai
penunjuk sebuah file lain apabila file ini berpinda ke form lain. data-theme = e,
berarti warna yang digunakan untuk menghiasi button tersebut adalah warna
kuning.
3.4.2.4 Pembuatan Tampilan Artikel Budaya Betawi

Apabila user mengklik button Pengenalan Budaya betawi maka akan muncul
sebuah form baru, kemudian penulis memberikan nama menu Budaya Betawi.
Form artikel Budaya Betawi ini berisi tentang beberapa informasi yang dapat
dirangkum oleh penulis mengenai Budaya Betawi.
Kemudian untuk membuat form pilihan ini penulis tambah dulu file htmlnya
dengan cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi
dengan nama betawi.html. Pada file ini masih menggunakan desain CSS yang
telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

63

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div style="text-align: center">
<img style="width: 250px; height: 200 px"
src="images/dki/abang none.jpg" />
</div>

Pada potongan skrip di atas, akan dipanggil sebuah gambar menggunakan


sintaks <img dan src untuk memanggil lokasi dari gambar tersebut berada.
Kemudian akan ditentukan lebar dan tinggi dari gambar tersebut kali ini penulis
menentukan width (lebar) 250 px dan height(tinggi) 200px.
<h4>Budaya Betawi
<hr>
</h4>
<h5>
<p align="center">
<b>Asal mula budaya betawi</b>
</p>
<p align="justify">Budaya Jakarta merupakan budaya mestizo, atau
sebuah campuran budaya dari beragam etnis. Sejak zaman Belanda,
Jakarta merupakan ibu kota Indonesia yang menarik pendatang dari
dalam dan luar Nusantara. Suku-suku yang mendiami Jakarta antara
lain, Jawa, Sunda, Minang, Batak dan . Selain dari penduduk
Nusantara, budaya Jakarta juga banyak menyerap dari budaya luar,
seperti Budaya arab, Tiongkok, India, dan Portugis.
</p>

Pada potongan skrip di atas, akan di masukkan berupa artikel yang akan
menjelaskan tentang budaya betawi, artikel tersebut penulis beri align dari
paragrafnya yaitu justify. Kemudian dalam menulis artikel, penulis menggunakan
ukuran huruf heading 5 atau h5.

64

3.4.2.5 Pembuatan Tampilan Galeri Budaya Betawi

Apabila user mengklik button Galeri Budaya betawi maka akan muncul
sebuah form baru, kemudian penulis memberikan nama menu Galeri Budaya
Betawi. Form Galeri Budaya Betawi ini berisi tentang beberapa foto mengenai
Budaya Betawi.
Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
nama galeri_betawi.html. Pada file ini masih menggunakan desain CSS yang
telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>
Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="slide1.html" rel="external" data-transition="fade" data-theme=""
data-icon="" style= "max-height:512px">
<div style=" text-align:center">
<img style="width: 100px; height: 100px" src="images/galeri/1.JPG">
</div></a></li>

Pada potongan skrip diatas penulis membuat sebuah kotak sebagai tempat
menaruh tiap fotonya penulis menggunakan tool navigation button. Terdapat
beberapa buah foto yang dapat dikumpulkan oleh penulis yang kemudian
ditampilkan di galeri foto budaya Betawi.

65

3.4.2.6 Pembuatan Tampilan Slide Foto Budaya Betawi

Apabila user mengklik salah satu gambar pada Galeri Budaya betawi maka
akan muncul sebuah form baru, kemudian penulis memberikan nama menu Slide
Foto Budaya Betawi. Form Galeri Budaya Betawi ini berisi tentang beberapa foto
mengenai Budaya Betawi.
Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
nama slide1.html. Pada file ini masih menggunakan desain CSS yang telah dibuat
sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="content">
<div style=" text-align:center">
<a href ="slide2.html" data-transition="slide">
<img style="width: px; height: 380px" src="images/galeri/1.JPG"
alt="Image 001">
</a>
</div>
</div>

Pada potongan skrip di atas, penulis menampilkan gambar yang sama


seperti gambar yang sebelumnya ditekan oleh user namun dalam bentuk yang
lebih besar.
<div data-theme="e" data-role="footer" data-position="fixed">
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-role="button" href="slide8.html" data-icon="arrow-l" dataiconpos="left">

66

Sebelumnya
</a>
</div>
<div class="ui-block-b">
<a data-role="button" href="slide1.html" data-icon="arrow-r" dataiconpos="right" data-transition="slide">
Selanjutnya
</a>
</div>
</div></div>

Pada skrip di atas, penulis menggunakan efek slide untuk pertukaran


pergantian dari tiap fotonya.

3.4.2.7 Pembuatan Tampilan Menu Kesenian Betawi

Apabila user mengklik button Kesenian Betawi maka akan muncul sebuah
form baru. Pada form kesenian dibagi menjadi 3 bahan, yaitu Tari,musik dan
lenong Betawi, pertama penulis memberikan nama Menu Kesenian Tari Betawi..
Kemudian untuk membuat form pilihan ini penulis tambah dulu file htmlnya
dengan cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi
dengan nama kesenian-tari.html. Pada file ini masih menggunakan desain CSS
yang telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="kesenian-Tari.html" data-transition="fade"

67

data-theme="a" data-icon="Star"> TARI </a></li>


<li><a href="kesenian-musik.html" data-transition="fade"
data-theme="a" data-icon="Star"> MUSIK </a></li>
<li><a href="kesenian-drama.html" data-transition="fade"
data-theme="a" data-icon="Star"> LENONG </a></li>
</ul>
</div>

Pada potongan skrip di atas, pada form ini akan dibuat sebuah navigator, cara
memasukkan dengan cara mengetik sintaks data-role=navbar sintaks tersebut
berfungsi menyatakan bahwa sifat dari data yang akan dibuat adalah sebuah
navbar, pada navbar terbuat penulis masukkan 3 buah listitem yang dengan
menggunakan bahasa html digunakan sintaks <li>, list itemnya adalah Tari,
Musik dan Lenong.
<div data-role="collapsible-set" data-theme="a">
<div data-role="collapsible" data-collapsed="false">
<h3>Macam-macam Tari Betawi</h3>
<a data-role="button" data-theme="e" href="Tari-lenggang-nyai.html"
data-transition="slide" data-icon="star" data-iconpos="left">
LENGGANG NYAI </a>
<a data-role="button" data-theme="e" href="Tari-cokek-betawi.html" datatransition="slide" data-icon="star" data-iconpos="left"> COKEK BETAWI </a> <a
data-role="button" data-theme="e" href="Tari-japin.html"
data-transition="slide" data-icon="star" data-iconpos="left">
JAPIN </a>
<a data-role="button" data-theme="e" href="Tari-topeng-betawi.html" datatransition="slide"data-icon="star" data-iconpos="left"> TOPENG BETAWI </a>
<adata-role="button" data-theme="e" href="Tari-yapong.html" datatransition="slide" data-icon="star" data-iconpos="left">
YAPONG </a>
</div> </div>

Pada potongan skrip di atas, pada form Tari ini akan disebutkan macammacam Tari yang berasal dari Betawi, lalu penulis membuat 5 buah button yang
berada di dalam collapsible ini, diantaranya Lenggang Nyai, Cokek Betawi,Japin,
Topeng Betawi dan Yapong.

68

Pada pembuatan form kesenian Tari ini sama dengan pembuatan untuk form
Musik dan Lenong betawi, hanya berbeda jumlah buttonnya saja.
Kemudian berapa banyak button yang dibuat itu tergantung dengan materi
atau informasi apa yang akan ditampilkan, seperti pada Kesenian Musik Betawi,
dibuat 6 buah button yang diataranya berisi Jali-jali, Kicir-kicir, Lenggang
Kangkung, Sirih kuning, Ondel-ondel, dan Surilang Njot-njotan, lalu pada form
Kesenian Lenong berisi 2 buah button yaitu Lenong Denes dan Lenong Preman.
3.4.2.8 Pembuatan Tampilan Artikel Kesenian Tari Betawi dan Lenong Betawi

Apabila user mengklik button Lenggang Nyai pada form kesenian Tari Betawi
maka akan muncul sebuah form baru, kemudian penulis memberikan nama menu
Budaya Betawi. Form artikel Budaya Betawi ini berisi tentang beberapa informasi
yang dapat dirangkum oleh penulis mengenai Budaya Betawi.
Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
nama lenggang_nyai.html. Pada file ini masih menggunakan desain CSS yang
telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div style="text-align: center">
<img style="width: 250px; height: 200 px"
src="images/dki/abang none.jpg" /><div>

69

Pada potongan skrip di atas, akan dipanggil sebuah gambar menggunakan


sintaks <img dan src untuk memanggil lokasi dari gambar tersebut berada.
h4>
Tari Langgeng Nyai
<hr>
</h4>
<h5>
<p align="justify">Setiap seni Tari tradisonal memiliki pesan yang ingin
disampaikan dalam setiap gerakannya. Ada cerita yang mengispirasi seorang
koreografer dalam mencipta gerak Tariannya, semisal cinta, gairah, perjuangan dan
sebagainya. Salah satu Tarian yang terinspirasi dari hal-hal tersebut adalah Tari
Lenggang Nyai, Tarian yang berasal dari tanah Betawi yang menceritakan kisah Nyai
Dasimah.</p>

Pada skrip di atas, digunakan untuk mengatur artikel agar tampak terlihat
lebih rapih dengan menggunakan align justify. Format pembuatan artikel dari
macam-macam Tari Betawi sama, baik dari diantaranya Lenggang Nyai, Cokek
Betawi,Japin, Topeng Betawi dan Yapong. Lalu juga dalam pembuatan artikel
Kesenian Lenong Betawi memilik format yang sama, artikel Kesenian Lenong
Betawi, dapat terlihat dengan cara user mengklik Lenong pada navigasi, lalu
memilih salah satu button baik itu Lenong Denes.
Kemudian juga dalam pembuatan artikel Kesenian Lenong Betawi memiliki
format yang sama, artikel Kesenian Lenong Betawi, dapat terlihat dengan cara
user mengklik Lenong pada navigasi, lalu memilih salah satu button baik itu
Lenong Denes.
3.4.2.9 Pembuatan Tampilan Lagu Daerah Betawi

Apabila user mengklik button salah satu lagu dari pilihan yang berada di form
kesenian Musik Betawi maka akan muncul sebuah form baru, kemudian penulis
memberikan nama menu form tampilan lagu daerah. Format form ini sama untuk
semua lagu daerah yang ditampilkan. Form tampilan lagu daerah Betawi ini
berisikan Lirik lagu dan pemutar musik lagu tersebut.

70

Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
judul lagu tersebut seperti contohnya jail-jali.html. Pada file ini masih
menggunakan desain CSS yang telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div style="text-align: center">
<img style="width: 293px; height: 375px"
src="images/lagu/jali-jali.jpg" /></div>

Sebelumnya lirik dari lagu Jali-jali ini telah dibuat menjadi sebuah gambar
oleh penulis, kemudian gambar tersebut akan di gunakan pada form ini, sebagai
tampilan lirik lagu tersebut. Pada potongan skrip di atas akan di panggil gambar
tersebut.
<audio controls>
<source src="musik/jali-jali.mp3" type="audio/mpeg"></source>
</audio>

Pada potongan skrip di atas, akan ditampilkan pemutar musik untuk


menampilkan lagu tersebut, format yang digunakan penulis untuk lagu tersebut
adalah mp3.
3.4.2.10 Pembuatan Tampilan Menu Bela diri Betawi, Cerita Rakyat Betawi
dan Senjata Tradisional Betawi

Form Bela diri Betawi, Cerita Rakyat Betawi, Senjata Tradisional memiliki
format yang sama dalam penampilannya. Form Bela diri Betawi akan aktif
apabila user mengklik Bela diri Betawi pada form menu pilihan. Form Cerita
rakyat Betawi akan aktif apabila user mengklik pilihan Cerita rakyat Betawi pada

71

form menu pilihan. Form Senjata Tradisional Betawi akan aktif apabila user
mengklik Senjata Tradisional pada form menu pilihan. Form Bela diri betawi
berisikan tentang informasi-informasi mengenai Bela diri asli Betawi yaitu beksi
meliputi Sejarah Beksi, Lambang Beksi, dan Jurus-jurus Beksi. Form Cerita
Rakyat Betawi berisikan tentang cerita-cerita rakyat yang berasal dari Betawi,
seperti Si Pitung, Si Jampang, Nyai Dasima dan Jembatan Ancol. Form Senjata
Tradisional Betawi berisikan tentang informasi-informasi mengenai Senjata
tradisional Betawi seperti Golok, Cundrik,Pisau Raut dan Trisula Betawi
Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
judul lagu tersebut seperti contohnya bela_diri.html. Pada file ini masih
menggunakan desain CSS yang telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS
<div style="text-align: center">
<img style="width: 250px; height: 190px src="images/dki/logo_beksi.jpg">
<div>

Pada potongan skrip di atas, akan dipanggil sebuah gambar menggunakan


sintaks <img dan src untuk memanggil lokasi dari gambar tersebut berada.
<div data-role="collapsible-set" data-theme="a" data-content-theme="b">
<div data-role="collapsible" data-collapsed="false">
<h3>Beladiri Beksi</h3>
<a data-role="button" data-theme="e" href="sejarah_beksi.html"
data-transition="slide" data-icon="star" data-iconpos="left">
Sejarah Beksi </a>
<a data-role="button" data-theme="e" href="lambang_beksi.html" datatransition="slide" data-icon="star" data-iconpos="left"> Lambang Beksi </a>

72

<a data-role="button" data-theme="e" href="jurus_beksi.html" datatransition="slide" data-icon="star" data-iconpos="left"> Jurus - Jurus Beksi </a>
</div></div>

Pada potongan skrip di atas, akan dibuat 3 buah button pada form Bela diri
Betawi, yang terdiri dari Sejarah Beksi, Lambang Beksi dan Jurus-Jurus Beksi.
Kemudian pada form Cerita rakyat dapat dibuat 4 buah button yang terdiri dari Si
Pitung, Si Jampang, Nyai Dasima dan Jembatan Ancol. Kemudian pada form
Senjata Tradisional Betawi akan terisi 4 buah button yang diantaranya Golok,
Cundrik, Pisau Raut,dan Trisula Betawi Berikut merupakan tampilan dari form
Bela diri Betawi.
3.4.2.11

Pembuatan Tampilan Artikel Bela diri Betawi, Artikel Cerita Rakyat


Betawi, dan Artikel Senjata Tradisional Betawi

Form artikel Bela diri Betawi dan artikel Cerita Rakyat memiliki format
tampilan yang sama. Artikel Bela diri Betawi berisikan tentang informasiinformasi tentang Bela diri Beksi yang meliputi Sejarah Beksi, Lambang Beksi
dan Jurus-jurus Beksi. Form ini akan aktif apabila user mengklik salah satu
button pilihan informasi yang terdapat dalam form tampilan Bela diri Betawi.
Setiap artikel memiliki format yang sama.
Artikel Cerita Rakyat Betawi berisikan tentang cerita-cerita rakyat asal
Betawi seperti Si Pitung, Si Jampang, Nyai Dasima, Jembatan Ancol. Form ini
akan aktif apabila user mengklik salah satu button

pilihan informasi yang

terdapat dalam form tampilan Cerita Rakyat Betawi. Setiap artikel memiliki
format yang sama.
Artikel Senjata Tradisional Betawi berisikan tentang informasi-informasi
tentang jenis-jenis Senjata Tradisional Betawi seperti Golok, Cundrik, Pisau
Raut,dan Trisula Betawi. Form ini akan aktif apabila user mengklik salah satu

73

button pilihan informasi yang terdapat dalam form tampilan Senjata tradisional
Betawi. Setiap artikel memiliki format yang sama
Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
nama sejarah_beksi.html. Pada file ini masih menggunakan desain CSS yang
telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div style="text-align: center">
<img style="width: 250px; height: 200 px" src="images/dki/pesilat.jpg" /></div>

Pada potongan skrip di atas, akan dipanggil sebuah gambar menggunakan


sintaks <img dan src untuk memanggil lokasi dari gambar tersebut berada.
<h4>Sejarah Bela Diri Beksi <hr> </h4> <h5>
<p align="justify">Sejak dahulu kala, masyarakat Betawi selalu dikenal dan
diidentikan dengan pencak silat dan pengajiannya. Kabarnya, sejak zaman kompeni
Belanda, remaja Betawi selalu dituntut untuk rajin beribadah dan mampu menjaga diri
dengan mempelajari ilmu beladiri pencak silat..</p>

Pada potongan skrip di atas, digunakan untuk mengatur artikel agar tampak
terlihat lebih rapih dengan menggunakan align justify.
3.4.2.12

Pembuatan Tampilan Menu Hidangan Khas Betawi

Form tampilan hidangan Khas Betawi ini akan aktif apabila user mengklik
button Hidangan Khas Betawi pada menu pilihan.Kemudian untuk membuat form

74

pilihan ini penulis tambah dulu file htmlnya dengan cara klik kanan file
budaya_jkt kemudian pilih new klik HTML file. Isi dengan nama makanan.html.
Pada file ini masih menggunakan desain CSS yang telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>
Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="content">
<div style="text-align: center">
<img style="width: 288px; height: 260px"
src="images/dki/Asinan_Betawi.jpg" /></div>
<a data-role="button" data-transition="slide" data-theme="e"
href="makanan_betawi.html"> Makanan khas Betawi </a> <a
data-role="button" data-transition="slide" data-theme="e"
href="minuman_betawi.html"> Minuman Khas Betawi </a>
</div>
Pada potongan skrip di atas, akan di masukkan 2 buah button sebagai pilihan
yaitu button, pengenalan budaya betawi dan galeri budaya betawi. Button dapat
dimasukkan dengan memasukkan data-role = button, kodingan data-role berguna
sebagai penunjuk sifat suatu data yang akan dibuat. Lalu transisi yang digunakan
perpindahan form adalah slide, lalu kodingan href berfungsi sebagai penunjuk
sebuah file lain apabila file ini berpinda ke form lain. data-theme = e, berarti warna
yang digunakan untuk menghiasi button tersebut adalah warna kuning. Berikut
adalah tampilan form budaya.

75

3.4.2.13

Pembuatan Tampilan Menu Makanan Khas Betawi dan Minuman


Khas Betawi

Form tampilan Makanan Khas Betawi, dan Minuman Khas Betawi memiliki
format tampilan yang sama. Form tampilan Makanan Khas Betawi dapat aktif
apabila user mengklik button Makanan Khas Betawi pada tampilan menu
Hidangan Khas Betawi. Pada form tampilan ini akan menampilkan beberapa
Makanan Khas Betawi diantaranya Asinan Betawi, Soto Betawi, Kue Talam, Kue
Ape, Nasi uduk, Kue Putu, Kue Sagon, Kue Wajik, Roti Gambang, Roti Buaya,
Kue Rangi, Gado-gado, Kue Cente Manis,Kue kembang Goyang, Getuk Lindri,
Semur Jengkol, Kue Cincin,Kue Cubit, Kue Pancong, Kue Leker, Kue Lupis dan
Kue Bugis Betawi.
Form tampilan Minuman Khas Betawi dapat aktif apabila user mengklik
button Minuman Khas Betawi pada tampilan menu Hidangan Khas Betawi. Pada
form tampilan ini akan menampilkan beberapa Minuman Khas Betawi
diantaranya Es Selendang Mayang, Es Doger dan Bir Pletok.
Kemudian untuk membuat form pilihan ini penulis tambah dulu file htmlnya
dengan cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi
dengan nama minuman_betawi.html. Pada file ini masih menggunakan desain
CSS yang telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>
Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<ul data-role="listview" data-divider-theme="b" data-inset="true"
data-filter="true" >
<li data-theme="c">
<a href="es_mayang.html" data-transition="slide">

76

Es Selendang Mayang </a></li>


<li data-theme="c">
<a href="bir_pletok.html" data-transition="slide">
Bir Pletok</a></li>
<li data-theme="c">
<a href="es_doger.html" data-transition="slide">
Es Doger</a></li>
</ul>
Pada potongan skrip di atas digunakan sebuah listview untuk menampilkan
beberapa macam Minuman Khas Betawi pada listview dapat ditulis tiga buah list
items diantaranya Es Selendang Mayang, Es Doger dan Bir Pletok. Pada list view
juga di aktifkan data filter untuk memudahkan user untuk mencari informasi
mengenai jenis Minuman khas betawi yang diinginkan, dengan cara mengetik
nama minuman pada tab filternya .
3.4.2.14

Pembuatan Tampilan Artikel Makanan Khas Betawi, dan Artikel


Minuman Betawi

Form artikel Makanan khas Betawi dan artikel Minuman Khas Betawi
memiliki format tampilan yang sama. Artikel Makanan Betawi berisikan tentang
informasi-informasi tentang Makanan Khas Betawi diantaranya Asinan Betawi,
Soto Betawi, Kue Talam, Kue Ape, Nasi uduk, Kue Putu, Kue Sagon, Kue Wajik,
Roti Gambang, Roti Buaya, Kue Rangi, Gado-gado, Kue Cente Manis,Kue
kembang Goyang, Getuk Lindri, Semur Jengkol, Kue Cincin,Kue Cubit, Kue
Pancong, Kue Leker, Kue Lupis dan Kue Bugis Betawi. Form ini akan aktif
apabila user mengklik salah satu button pilihan informasi yang terdapat dalam
form tampilan Makahan Khas Betawi. Setiap artikel memiliki format yang sama.
Artikel Minuman Khas Betawi berisikan tentang informasi-informasi tentang
Minuman Khas Betawi diantaranya Es Selendang Mayang, Es Doger dan Bir
Pletok.. Form ini akan aktif apabila user mengklik salah satu button pilihan

77

informasi yang terdapat dalam form tampilan Minuman Khas Betawi. Setiap
artikel memiliki format yang sama.
Kemudian untuk membuat form ini penulis tambah dulu file htmlnya dengan
cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi dengan
nama kue_talam.html. Pada file ini masih menggunakan desain CSS yang telah
dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>
Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div style="text-align: center">
<img style="width: 250px; height: 200px" src="images/makanan/kuetalam.jpg" /></div>
Pada potongan skrip di atas, akan dipanggil sebuah gambar menggunakan
sintaks <img dan src untuk memanggil lokasi dari gambar tersebut berada.
h4>Kue Talam<hr></h4>
<h5><p align="justify"> Kue ini terbuat dari tepung beras ketan yang dimasak
dengan santai dan gula lalu dikukus. Setelah jadi rada-rada lengket memang
tapi enak banget. </p>

Pada skrip di atas, digunakan untuk mengatur artikel agar tampak terlihat
lebih rapih dengan menggunakan align justify.

78

3.4.2.15

Pembuatan Tampilan Menu Info Aplikasi

Apabila user mengklik button info aplikasi makan akan muncul sebuah form
beru, kemudian penulis memberikan nama menu Info Aplikasi.
Kemudian untuk membuat form pilihan ini penulis tambah dulu file htmlnya
dengan cara klik kanan file budaya_jkt kemudian pilih new klik HTML file. Isi
dengan nama formpilih-1.html. Pada file ini masih menggunakan desain CSS
yang telah dibuat sebelumnya.
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<skrip src="js/jquery-1.9.1.min.js"></skrip>
<skrip src="js/jquery.mobile-1.3.1.min.js"></skrip>

Pada potongan skrip di atas, akan dipanggil file CSS yang telah didesain
sebelumnya, dengan menggunakan kodingan src, akan di ambil file yang akan
diambil pada projectnya, telah disebutkan file css telah disimpan pada folder CSS.
<div data-role="content">
<div style="text-align: center">
<img style="width: 288px; height: 450px"
src="images/bantuan.jpg" />
</div>
</div>

Pada potongan skrip di atas, pada form ini dalam menjelaskan info dari
aplikasi ini, penulis membuat sebuah gambar yang kemudian gambar tersebut
akan di panggil dan ditampilkan dalam form ini, dalam memasukkan sebuah
gambar dapat menggunakan sebuah sintaks program yang <img dan src yang
akan digunakan sebagai pemaggilan gambar tersebut.

79

3.5

Implementasi

Implementasi dilakukan untuk menguji aplikasi yang telah dikembangkan.


Beberapa hal yang perlu dilakukan pengujian adaah tampilan antarmuka dan basis
pengetahuan. Aplikasi ini memiliki beberapa menu, yaitu Pengenalan Budaya,
Kesenian Betawi, Bela diri Betawi, Cerita Rakyat Betawi, Senjata Tradisional
Betawi, Hidangan Khas Betawi. Untuk menguji aplikasi Pengenalan Budaya
Betawi, pastikan ponsel telah mendukung Android versi 2.2 (Froyo).
Untuk menjalankan aplikasi pada emulator, pada tahap awal klik kanan pada
project aplikasi Budaya_betawi pada IDE Eclipse dan pilih Run as Android
Application

Gambar 3. 32 Menjalankan Aplikasi


Jika berhasil maka Console akan membuat virtual device baru dengan android
versi 2.2. Untuk menjalankan emulator dibutuhkan waktu yang cukup lama
hingga OS Android melewati tahap loading. Setelah selesai, maka aplikasi
Budaya betawi akan muncul pada emulator.

80

Gambar 3. 33 Tampilan pada emulator


3.5.1

Halaman Menu Utama

Halaman awal adalah tampilan ketika aplikasi ini pertama kali


dijalankan. Halaman ini terdiri daari beberapa menu, yaitu Pengenalan
Budaya, Info Aplikasi dan Keluar.

Gambar 3. 34 Tampilan Menu Utama

81

3.5.2

Halaman Menu Pilihan

Pada halaman menu pilihan ini akan menampilkan konten menu


Pengenalan Budaya Betawi, Kesenian Betawi, Bela diri Betawi, Cerita Rakyat
Betawi, Senjata Tradisional dan Hidangan Khas Betawi. Untuk melihat
konten ini user hanya perlu mengklik menu pengenalan Budaya pada menu
utama.Kemudian pada menu ini akan menampilkan konten button kembali
agar user bisa kembali ke menu utama.

Gambar 3. 35 Tampilan Menu pilihan


3.5.3

Halaman Menu Budaya Betawi

Pada halaman menu budaya betawi ini akan menampilkan dua bu ah


menu yaitu pengenalan budaya Betawi dan menu Galeri Budaya Betawi.
Untuk melihat konten ini user hanya perlu mengklik menu pengenalan

82

Budaya pada menu pilihan.Kemudian pada menu ini akan menampilkan


konten button kembali agar user bisa kembali ke menu pilihan.

Gambar 3. 36 Tampilan Menu Budaya Betawi


3.5.4 Halaman artikel Budaya Betawi

Pada halaman ini menampilkan artikel mengenai budaya Betawi.


Untuk melihat konten ini user hanya perlu mengklik menu pengenalan
Budaya pada menu Budaya Betawi.Kemudian pada menu ini akan
menampilkan konten button kembali agar user bisa kembali ke menu Budaya
Betawi.

83

Gambar 3. 37 Tampilan artikel Budaya Betawi


3.5.5

Halaman Galeri Budaya Betawi

Pada halaman ini akan menampilkan galeri foto mengenai budaya


betawi yang berhasil dikumpulkan oleh penulis. Untuk melihat konten ini user
hanya perlu mengklik menu Galeri Budaya Betawi pada menu Budaya
Betawi. Kemudian pada menu ini akan menampilkan konten button kembali
agar user bisa kembali ke menu Budaya Betawi.

84

Gambar 3. 38 Tampilan Galeri Budaya Betawi


3.5.6

Halaman Tampilan Slide Foto Galeri Budaya Betawi

Pada halaman ini akan menampilkan slide foto dari galeri foto budaya
Betawi. Untuk melihat konten ini user hanya perlu mengklik salah satu foto
pada Galeri Budaya Betawi pada menu Budaya Betawi. Kemudian pada menu
ini akan menampilkan konten button kembali agar user bisa kembali ke menu
Galeri Budaya Betawi

85

Gambar 3. 39 Tampilan Slide foto Budaya Betawi


3.5.7

Halaman artikel Budaya Betawi

Pada halaman ini menampilkan artikel mengenai budaya Betawi. Untuk


melihat konten ini user hanya perlu mengklik menu pengenalan Budaya pada
menu Budaya Betawi.Kemudian pada menu ini akan menampilkan konten button
kembali agar user bisa kembali ke menu Budaya Betawi

86

Gambar 3. 40 Tampilan form Kesenian Tari Betawi


3.5.8

Halaman artikel Tari Betawi

Pada halaman ini menampilkan artikel mengenai tari Betawi. Untuk


melihat konten ini user hanya perlu mengklik salah satu Button pada menu
kesenian Tari Betawi.Kemudian pada menu ini akan menampilkan konten
button kembali agar user bisa kembali ke menu Kesenian Tari Betawi.

87

Gambar 3. 41 Tampilan form artikel Kesenian Lenong Betawi

3.5.9

Halaman menu Kesenian Musik Betawi

Pada halaman ini akan menampilkan konten menu macam-macam


lagu Daerah Betawi diantaranya Jali-jali, Kicir-kicir, Lenggang kangkung,
Ondel-ondel, Sirih Kuning, dan Surilang Njot-Njotan. Untuk melihat konten
ini user perlu mengklik menu Kesenian Betawi pada menu pilihan, lalu user
mengklik tab Musik .Kemudian pada menu ini akan menampilkan konten
button kembali agar user bisa kembali ke menu pilihan

88

Gambar 3. 42 Tampilan Kesenian Musik Betawi


3.5.10

Halaman Lagu daerah Betawi

Pada halaman Lagu daerah Betawi ini akan menampilkan berupa lirik
dari lagu tersebut, dan menyediakan pemutar musiknya untuk dapat
mendengarkan lagu daerahnya. Untuk melihat konten ini user hanya perlu
mengklik salah satu Button pada menu Kesenian Musik Betawi.Kemudian
pada menu ini akan menampilkan konten button kembali agar user bisa
kembali ke menu Kesenian Musik Betawi.

89

Gambar 3. 43 Tampilan form lagu daerah Betawi


3.5.11

Halaman menu Kesenian Lenong Betawi

Pada halaman ini akan menampilkan konten menu jenis jenis


Lenong Betawi yang diantaranya Lenong Denes dan Lenong Preman. Untuk
melihat konten ini user perlu mengklik menu Kesenian Betawi pada menu
pilihan, lalu user mengklik tab Lenong .Kemudian pada menu ini akan
menampilkan konten button kembali agar user bisa kembali ke menu pilihan.

90

Gambar 3. 44

3.5.12

Tampilan form Kesenian Lenong

Halaman artikel Lenong Betawi

Pada halaman ini menampilkan artikel mengenai Lenong Betawi.


Untuk melihat konten ini user hanya perlu mengklik salah satu button pada
menu Kesenian Lenong Betawi.Kemudian pada menu ini akan menampilkan
konten button kembali agar user bisa kembali ke menu Kesenian Lenong
Betawi.
Berikut merupakan salah satu contoh dari artikel Kesenian Lenong Denes.

91

Gambar 3. 45 Tampilan form artikel Kesenian Lenong Betawi


3.5.13

Halaman menu Bela diri Betawi

Pada halaman ini akan menampilkan konten menu Bela diri Betawi
yaitu Beksi yang diantaranya Sejarah Beksi, Lambang Beksi dan Jurus-jurus
Beksi. Untuk melihat konten ini user perlu mengklik menu Bela diri Betawi
pada menu pilihan. Kemudian pada menu ini akan menampilkan konten
button kembali agar user bisa kembali ke menu pilihan. Berikut merupakan
tampilan dari form Bela diri Betawi.

92

Gambar 3. 46 Tampilan form Bela diri Betawi


3.5.14

Halaman artikel Bela diri Beksi

Pada halaman ini menampilkan artikel mengenai Bela diri Beksi.


Untuk melihat konten ini user hanya perlu mengklik salah satu button pada
menu Bela diri Betawi.Kemudian pada menu ini akan menampilkan konten
button kembali agar user bisa kembali ke menu Bela diri Betawi.
Berikut merupakan tampilan salah satu dari artikel Bela diri Betawi.

93

Gambar 3. 47 Tampilan form Artikel Bela diri Betawi


3.5.15

Halaman menu Cerita Rakyat Betawi

Pada halaman ini akan menampilkan konten menu Cerita Rakyat


Betawi yang diantaranya Si Pitung, Si Jampang, Nyai Dasima, Jembatan
Ancol. Untuk melihat konten ini user perlu mengklik menu Cerita Rakyat
Betawi pada menu pilihan. Kemudian pada menu ini akan menampilkan
konten button kembali agar user bisa kembali ke menu pilihan. Berikut
merupakan tampilan dari form Cerita Rakyat Betawi.

94

Gambar 3. 48 Tampilan form Cerita Rakyat Betawi


3.5.16

Halaman artikel Cerita Rakyat Betawi

Pada halaman ini menampilkan artikel mengenai Cerita Rakyat


Betawi. Untuk melihat konten ini user hanya perlu mengklik salah satu button
pada menu Cerita Rakyat Betawi.Kemudian pada menu ini akan menampilkan
konten button kembali agar user bisa kembali ke menu Cerita Rakyat Betawi.
Berikut merupakan tampilan salah satu dari artikel Cerita Rakyat Betawi.

95

Gambar 3. 49 Tampilan form Artikel Cerita Rakyat Betawi


3.5.17 Halaman menu Senjata Tradisional Betawi

Pada halaman ini akan menampilkan konten menu Senjata Tradisional


Betawi yang diantaranya Golok, Cundrik, Pisau Raut,Trisula Betawi . Untuk
melihat konten ini user perlu mengklik menu Senjata Tradisional Betawi pada
menu pilihan. Kemudian pada menu ini akan menampilkan konten button
kembali agar user bisa kembali ke menu pilihan. Berikut merupakan tampilan
dari form Senjata Tradisional Betawi.

96

Gambar 3. 50 Tampilan form Artikel Cerita Rakyat Betawi


3.5.18

Halaman artikel Senjata Tradisional Betawi

Pada halaman ini menampilkan artikel mengenai Senjata Tradisional


Betawi. Untuk melihat konten ini user hanya perlu mengklik salah satu button
pada menu Senjata Tradisional Betawi.Kemudian pada menu ini akan
menampilkan konten button kembali agar user bisa kembali ke menu Senjata
Tradisional Betawi. Berikut merupakan tampilan salah satu dari artikel
Senjata Tradisional Betawi.

97

Gambar 3. 51 Tampilan form Artikel Senjata Tradisional Betawi


3.5.19 Halaman menu Hidangan Khas Betawi

Pada halaman ini akan menampilkan konten menu Hidangan Khas Betawi
yang diantaranya Makanan Khas Betawi dan Minuman Khas Betawi. Untuk
melihat konten ini user perlu mengklik menu Hidangan Khas Betawi pada
menu pilihan. Kemudian pada menu ini akan menampilkan konten button
kembali agar user bisa kembali ke menu pilihan.

98

Gambar 3. 52 Tampilan form Hidangan Khas Betawi

3.5.20 Halaman menu Makanan Khas Betawi

Pada halaman ini akan menampilkan konten menu Makanan Khas Betawi
yang diantaranya Asinan Betawi, Soto Betawi, Kue Talam, Kue Ape, Nasi
uduk, Kue Putu, Kue Sagon, Kue Wajik, Roti Gambang, Roti Buaya, Kue
Rangi, Gado-gado, Kue Cente Manis,Kue kembang Goyang, Getuk Lindri,
Semur Jengkol, Kue Cincin,Kue Cubit, Kue Pancong, Kue Leker, Kue Lupis
dan Kue Bugis Betawi.. Untuk melihat konten ini user perlu mengklik menu
Makanan Khas Betawi pada Hidangan Khas Betawi. Kemudian pada menu ini
akan menampilkan konten button kembali agar user bisa kembali ke menu
pilihan. User dapat menggunakan fasilitas filter items guna untuk
mempermudah pencarian informasi dari beberapa makanan khas Betawi
tersebut.

99

Misalnya user menginput : kue maka tampilannya akan seperti gambar di


bawah ini.

Gambar 3. 53 Tampilan form Minuman Khas Betawi

3.5.21 Halaman artikel Makanan Khas Betawi

Pada halaman ini menampilkan artikel mengenai Makanan Khas Betawi.


Untuk melihat konten ini user hanya perlu mengklik salah satu button pada
menu Makanan Khas Betawi. Kemudian pada menu ini akan menampilkan
konten button kembali agar user bisa kembali ke menu Makanan Khas
Betawi. Berikut merupakan tampilan salah satu dari artikel Makanan Khas
Betawi.

100

Gambar 3. 54 Tampilan artikel Makanan Khas Betawi


3.5.22 Halaman menu Minuman Khas Betawi

Pada halaman ini akan menampilkan konten menu Minuman Khas Betawi
yang diantaranya Es Selendang Mayang, Es Doger dan Bir Pletok... Untuk
melihat konten ini user perlu mengklik menu Minuman Khas Betawi pada
menu Hidangan Khas Betawi. Kemudian pada menu ini akan menampilkan
konten button kembali agar user bisa kembali ke menu pilihan. User dapat
menggunakan fasilitas filter items guna untuk mempermudah pencarian
informasi dari beberapa Minuman Khas Betawi tersebut.
Misalnya user menginput : es maka tampilannya akan seperti gambar
di bawah ini.

101

Gambar 3. 55 Tampilan form Minuman Khas Betawi


3.5.23 Halaman artikel Makanan Khas Betawi

Pada halaman ini menampilkan artikel mengenai Minuman Khas


Betawi. Untuk melihat konten ini user hanya perlu mengklik salah satu button
pada menu Minuman Khas Betawi. Kemudian pada menu ini akan
menampilkan konten button kembali agar user bisa kembali ke menu
Minuman Khas Betawi.
Berikut merupakan tampilan salah satu dari artikel Minuman Khas Betawi

102

Gambar 3. 56 Tampilan artikel Minuman Khas Betawi


3.5.24 Halaman Info Aplikasi

Halaman ini akan menampilkan konten yang berisi Info Aplikasi.


Untuk Melihat konten ini, Pengguna hanya perlu mengklik pada menu info
aplikasi yang ada pada tampilan awal.

103

Gambar 3. 57 Tampilan Info Aplikasi