bab iii analisa dan perancangan softwareanalisa dan perancangan software 3.1. analisa kebutuhan...
TRANSCRIPT
25
BAB III
ANALISA DAN PERANCANGAN SOFTWARE
3.1. Analisa Kebutuhan Software
Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa
kebutuhan sistem yang meliputi Input, Proses dan Output:
1. Input
User membuka aplikasi selanjutnya aplikasi menampilkan layar halaman
awal aplikasi.
2. Proses
User memilih menu di dalam menu aplikasi seperti: Sejarah Kuliner,
Makanan Betawi, Minuman Betawi, dan Kuis.
3. Output
Menampilkan isi menu yang telah dipilih User.
3.1.1. Analisa Kebutuhan
Dibagian ini akan dibagi menjadi dua bagian yaitu:
1. Analisa Kebutuhan Fungsional
Analisa kebutuhan fungsional adalah jenis kebutuhan yang berisi proses-
proses apa saja yang nantinya dilakukan oleh sistem aplikasi. Dari analisa yang
telah dilakukan, maka aplikasi yang dibuat memiliki fitur-fitur sebagai berikut:
a. Aplikasi dapat menampilkan menu utama
b. Aplikasi menampilkan menu Sejarah Kuliner.
26
c. Aplikasi menampilkan menu makanan betawi dan setelah memilih makanan
betawi akan menampilkan daftar makanan betawi.
d. Aplikasi dapat menampilkan menu minuman betawi .
e. Aplikasi dilengkapi soal latihan atau kuis.
f. Aplikasi menampilkan menu tentang yang berisi profil penulis
g. Aplikasi menampilkan menu keluar untuk keluar dari aplikasi
2. Analisa Kebutuhan Non-Fungsional
Analisa kebutuhan non-fungsional ini dilakukan untuk mengetahui
spesifikasi kebutuhan sistem yang dilakukan dalam perancangan aplikasi budaya
betawi ini.
a. Kebutuhan Perangkat Keras (Hardware)
Kebutuhan perangkat keras (Hardware) merupakan kebutuhan akan perangkat
keras yang digunakan untuk membangun program aplikasi budaya betawi ini,
yaitu:
1) Personal Computer (PC)
Komputer yang digunakan penulis menggunakan spesifikasi sebagai
berikut:
Tabel III.1. Spesifikasi Komputer
Hardware Laptop ASUS A450c
HDD 500GB
RAM 2GB
Processor Intel(R) Core(TM) i3-3217U CPU @ 1.80GHz (4 CPUs),
~1.8GHz
27
2) Handphone
Adapun handphone yang digunakan penulis menggunakan spesifikasi
sebagai berikut:
Tabel III.2. Spesifikasi Handphone
Model Samsung GALAXY J5
Layar 5.0”
Memory 8 GB, 1,5 GB RAM
CPU Quad-Core 1.2 GHz
OS Android OS, v6.1. (Marshmallow)
b. Kebutuhan Perangkat Lunak
Kebutuhan perangkat lunak merupakan kebutuhan perangkat lunak yang akan
digunakan untuk membangun program aplikasi Budaya Betawi, yaitu:
1) Sistem Operasi Windows 7 Ultimate
2) Java Devlopment Kit
3) Android Studio
4) Adobe Dreamweaver CS6
5) Pain
6) Adobe Photoshop CS6
28
3.2. Desain
Sebelum aplikasi android ini diimplementasikan dalam bentuk
package.apk, maka perlu dirancang terlebih dahulu. Tahap perancangan bertujuan
untuk memenuhi kebutuhan pengguna dan memberikan gambaran yang jelas
mengenai aplikasi yang akan dibuat. Keseluruhan dari perancangan ini akan
diimplementasikan dalam smartphone berbasis android dengan menggunakan
software android studio.
3.2.1. Rancangan Algoritma
Algoritma yang digunakan adalah algoritma BruteForce yaitu pencocokan
string. Langkah-langkah yang dilakukan algoritma ini saat mencocokan string
adalah:
1. Algoritm Brute force mulai mencocokkan pattern pada awal teks.
2. Dari kiri ke kanan, algoritma ini akan mencocokkan karakter per karakter
pattern dengan karakter di teks yang bersesuaian, sampai salah satu kondisi
berikut dipenuhi:
a. Karakter di pattern dan di teks yang dibandingkan tidak cocok (mismatch).
b. Semua karakter di pattern cocok. Kemudian algoritma akan
memberitahukan penemuan di posisi ini.
3. Algoritma kemudian menggeser pattern berdasarkan tabel next, lalu
mengulangi langkah 2 sampai pattern berada di ujung teks.
29
3.2.2. Software Architecture
a. Pseudocode Algoritma
Pseudocode algoritma BruteForcepada fase pra-pencarian:
procedure BruteForceSearch(
input m, n : integer,
input P : array[0..n-1] of char,
input T : array[0..m-1] of char,
output ketemu : array[0..m-1] of boolean
)
Deklarasi:
i, j: integer
Algoritma:
for (i:=0 to m-n) do
j:=0
while (j < n and T[i+j] = P[j]) do
j:=j+1
endwhile
if(j >= n) then
ketemu[i]:=true;
endif
endfor
30
b. UML
Dalam merancang sebuah gambaran pembuatan suatu sistem penulis
menggunakan Unifield Modeling Language (UML), yaitu sebuah bahasa yang
telah menjadi standar dalam industri untuk visualisasi merancang dan
mendokumentasi sebuah sistem perangkat lunak.
1) Use Case Diagram
Use Case merupakan pemodelan untuk melakukan sistem informasi yang
akan dibuat.
a) Use Case Diagram Menu Utama
Gambar III.1. Use Case Diagram Menu Utama
Tabel III.3. Deskripsi Use Case Diagram Menu Utama
Identifikasi
Nama User Case Menu Utama
Aktor Pengguna
Tujuan Menampilkan halaman menu utama
Kondisi Awal Pengguna menjalankan aplikasi
31
Skenario Utama
Aktor Sistem
1. Menjalankan Aplikasi 2. Menampilkan Menu Utama
Kondisi Akhir Pengguna dapat melihat halaman Menu
Utama
b) Use Case Diagram Mulai
Gambar III.2. Use Case Diagram Mulai
Tabel III.4. Deskripsi Use Case Diagram Menu Mulai
Identifikasi
Nama User Case Mulai
Aktor Pengguna
Tujuan Menampilkan halaman mulai
Kondisi Awal Menampilkan halaman utama
Skenario Utama
Aktor Sistem
1. Menjalankan Aplikasi 2. Menampilkan menu utama
3. Memilih tombol mulai 4. Menampilkan menu mulai
Kondisi Akhir Menampilkan halaman mulai
32
c) Use Case Diagram Sejarah Kuliner
Gambar III.3. Use Case Diagram Sejarah kuliner
Tabel III.5. Deskripsi Use Case Diagram Sejarah kuliner
Identifikasi
Nama User Case Sejarah Kuliner
Aktor Pengguna
Tujuan Menampilkan halaman sejarah kuliner
Kondisi Awal Menampilkan halaman mulai
Skenario Utama
Aktor Sistem
1. Memilih Menu Sejarah Kuliner 2. Menampilkan halaman sejarah
kuliner
Kondisi akhir Menampilkan halaman sejarah kuliner
d) Use Case Diagram Makanan Betawi
Gambar III.4. Use Case Diagram Makanan Betawi
33
Tabel III.6. Deskripsi Use Case Diagram Makanan Betawi
Identifikasi
Nama User Case Makanan Betawi
Aktor Pengguna
Tujuan Menampilkan halaman makanan betawi
Kondisi Awal Menampilkan halaman mulai
Skenario Utama
Aktor Sistem
1. Memilih menu Makanan Betawi 2. Menampilkan Daftar Manakan
Betawi
3. Memilih tombol pencarian 4. Menemukan Makanan Betawi yang
di cari
5. Memilih Makanan Betawi 6. Menampilkan Makanan Betawi
Kondisi Akhir Menampilkan halaman Makanan
Betawi
e) Use Case Diagram Miniman Betawi
Gambar III.5. Use Case Diagram Minuman Betawi
34
Tabel III.7. Deskripsi Use Case Diagram Minuman Betawi
Identifikasi
Nama User Case Miniman Betawi
Aktor Pengguna
Tujuan Menampilkan halaman minuman
betawi
Kondisi Awal Menampilkan halaman mulai
Skenario Utama
Aktor Sistem
1. Memilih menu Minuman Betawi 2. Menampilkan Daftar
MinumanBetawi
3. Memilih salah satu Minuman Betawi 4.. Menampilkan Minuman Betawi
Kondisi Akhir Menampilkan halaman Minuan Betawi
f) Use Case Diagram Kuis
Gambar III.6. Use Case Diagram Kuis
Tabel III.8. Deskripsi Use Case Diagram Kuis
Identifikasi
Nama User Case Kuis
Aktor Pengguna
Tujuan Menampilkan halaman Kuis
Kondisi Awal Menampilkan halaman mulai
Skenario Utama
Aktor Sistem
1. Memilih menu Kuis 2.Memilih soal latihan
3. Memilih hasil atau jawaban 4.. Menampilkan hasil dari jawaban
pengguna
Kondisi Akhir Menampilkan hasil dari jawaban
35
g) Use Case Diagram Info Aplikasi
Gambar III.7. Use Case Diagram Info Aplikas
i
Tabel III.9. Deskripsi Use Case Info Aplikasi
Identifikasi
Nama User Case Info Apikasi
Aktor Pengguna
Tujuan Menampilkan halaman Info Aplikasi
Kondisi Awal Menampilkan halaman mulai
Skenario Utama
Aktor Sistem
1. Memilih menu Info Aplikasi 2.Menampilkan halaman profil Penulis
Kondisi Akhir Menampilkan halaman profil Penulis
h) Use Case Diagram Kuis
Gambar III.8. Use Case Diagram Keluar
36
Tabel III.10. Deskripsi Use Case Keluar
Identifikasi
Nama User Case Keluar
Aktor Pengguna
Tujuan Keluar dari aplikasi
Kondisi Awal Menampilkan Halaman Menu Utama
Skenario Utama
Aktor Sistem
1. Menjalankan Aplikasi 2. Menampilkan Menu Utama
3. Memilih menu Keluar 4. Menampilkan alert dialog “YA” atau
....“TIDAK”
5. Jika Memilih “TIDAK” 6. Menampilkan Menu Utama
7. Jika Memilih “YA” 8. Keluar dari Aplikasi
Kondisi Akhir Keluar Aplikasi
2) Class Diagram
Use Case menggambarkan struktur sistem dari segi pendefinisian kelas-
kelas yang akan dibuat untuk membangun sistem.
Gambar III.9. Class Diagram
37
3) Activity Diagram
Activity Diagram menggambarkan workflow (aliran kerja) atau aktivitas
dari sebuah sistem atau proses bisnis atau menu yang ada pada perangkat lunak.
a) Activity Diagram Sejarah Kuliner
Gambar III.10. Activity Diagram Sejarah Kuliner
b) Activity Diagram Makanan Betawi
Gambar III.11. Activity Diagram Makanan Betawi
38
c) Activity Diagram Minuman Betawi
Gambar III.12. Activity Diagram Minuman Betawi
c) Activity Diagram Kuis
Gambar III.13. Activity Diagram Kuis
39
d) Activity Diagram Info Aplikasi
Gambar III.14. Activity Diagram Info Aplikasi
e) Activity Diagram Keluar
Gambar III.15. Activity Diagram Keluar
4) Deployment Diagram
40
Gambar III.16. Deployment Diagram
5) Sequence Diagram
a) Sequence Diagram Menu Utama
Gambar III.17Sequence Diagram Menu Utama
Komputer
Smartphone
JDK
(Java
Development
Kit)
Software
Android
Studio
SDK
(Software
Development
Kit)
Android
Application
Android OS
41
b) Sequence Diagram Sejarah Kuliner
Gambar III.18 Sequence Diagram Sejarah Kuliner
c) Sequence Diagram Makanan Betawi
Gambar III.19 Sequence Diagram Makanan Betawi
42
d) Sequence Diagram Minuman Betawi
Gambar III.20 Sequence Diagram Minuman Betawi
e) Sequence Diagram Kuis
Gambar III.21 Sequence Diagram Kuis
43
f) Sequence Diagram Info Aplikasi
Gambar III.22 Sequence Diagram Info Aplikasi
g) Sequence Diagram Keluar
Gambar III.23 Sequence Diagram Keluar
44
3.2.3. User Interface
1. Menu Utama
Pada tampilan Menu Utama Aplikasi terdapat 2 ImageButton yang terdiri
dari Mulai, Keluar.
Gambar III.24. Desain Menu Utama
a. ImageButton1
Jika pengguna memilih ImageButton1 maka pengguna akan masuk ke menu
mulai.
b. ImageButton2
Jika pengguna memilih ImageButton2 maka pengguna akan keluar dari
aplikasi Budaya Betawi.
ImageButton1
ImageButton2
45
2. Menu Mulai
Pada tampilan Menu Utama Aplikasi terdapat 5 ImageButton yang terdiri
dari Sejarah Kuliner, Makanan Betawi, Minuman Betawi, Kuis, Info Aplikasi .
Gambar III.25. Desain Menu Mulai
a. ImageButton1
Jika pengguna memilih ImageButton1 maka pengguna akan masuk ke menu
Sejarah Kuliner.
b. ImageButton2
Jika pengguna memilih ImageButton1 maka pengguna akan masuk ke menu
Makanan Betawi.
c. ImageButton3
Jika pengguna memilih ImageButton1 maka pengguna akan masuk ke menu
Minuman Betawi.
ImageButton1
ImageButton2
ImageButton3
ImageButton4
ImageButton5
46
d. ImageButton4
Jika pengguna memilih ImageButton1 maka pengguna akan masuk ke menu
Kuis.
e. ImageButton5
Jika pengguna memilih ImageButton1 maka pengguna akan masuk ke menu
Info Aplikasi.
3. Halaman Sejarah Kuliner
Pada tampilan Halaman Sejarah Kuliner terdapat sebuah HTML yang
berupa halaman dari Sejarah Jakarta.
\
Gambar III.26. Desain Halaman Sejarah Jakarta
HTML
47
4. Menu Makanan Betawi
Pada tampilan menu Makanan Betawi terdapat sebuah ListView, dan
sebuah tombol SearchView.
Gambar III.27. Desain Menu Makanan Betawi
a. EditText
Jika pengguna memasukkan kata yang ingin di cari pada EditText maka akan
menemukan kata tersebut dalam ListView.
b. List View
Jika pengguna memilih Makanan Betawi yang di cari maka akan masuk ke
Halaman Makanan Betawi.
Edit Text
List View
48
5. Halaman Makanan Betawi
Pada tampilan Halaman Sejarah Kuliner terdapat sebuah HTML yang
berupa halaman dari Sejarah Jakarta.
Gambar III.28. Desain Halaman Makanan Betawi
6. Menu Minuman Betawi
Pada tampilan menu Minuman Betawi terdapat 7 ImageButton yang terdiri dari
masing-masing Minuman Betawi.
Gambar III.29. Desain Menu Minuman Betawi
HTML
ImageButton
ImageButton
ImageButton
ImageButton
ImageButton
ImageButton
ImageButton
49
a. ImageButton
Jika pengguna memilih ImageButton maka pengguna akan masuk ke Halaman
Minuman Betawi.
7. Halaman Minuman Betawi
Pada tampilan Halaman Minuman Betawi terdapat sebuah HTML yang
berupa halaman dari Minuman Betawi.
\
Gambar III.30. Desain Halaman Minuman Betawi
8. Menu Kuis
Pada tampilan menu Kuis pengguna harus mengisi nama untuk
melanjutkan ke halaman soal yang terdapat sebuah EditText dan Button.
HTML
50
Gambar III.31. Desain Isi Nama Kuis
a. EditText
Pada EditText pengguna harus mengisi nama yang akan di tampilkan di
halaman soal.
b. Button
Pada Button pengguna akan di alihkan ke halaman soal.
Pada tampilan menu Latihan Pengetahuan terdapat 3 TextView, 3 RadioButton, 3
Button.
Edit Text
Button
51
Gambar III.32. Desain Isi Latihan Kuis
a. TextView1
Pada TextView1 berisi nama pengguna.
b. TextView2
Pada TextView2 berisi posisi dari soal yang sedang di kerjakan pengguna.
c. TextView3
Pada TextView3 berisi soal dari halaman tersebut.
d. RadioButton1, RadioButton2 dan RadioButton3
Pengguna akan memilih satu jawaban pilihan ganda antara a, b atau c.
e. Button1
Jika Pengguna memilih tombol Button1 maka pengguna akan kembali ke
halaman soal sebelumnya.
Text View1 Text View2
Text View3
RadioButton1
RadioButton2
RadioButton3
Button1 Button2 Button3
52
f. Button2
Jika Pengguna memilih tombol Button2 maka pengguna akan menuju ke
halaman soal berikutnya.
g. Button3
Jika Pengguna memilih tombol Button3 maka pengguna akan menyelesaikan
latihan soal lalu keluar laporan jumlah jawaban dari pengguna, dan kembali ke
menu utama.
9. Menu Info Aplikasi
Pada tampilan menu Tentang hanya terdapat HTML yang terdiri dari
biodata penulis dan foto penulis.
\
Gambar III.33. Desain Menu Info Aplikasi
HTML
53
3.3. Testing
Metode yang di pakai untuk pengujian adalah White Box dan Black Box,
pengujian program yang dilakukan pengembang (programmer). Cara yang
dilakukan oleh penulis adalah dengan menjalankan aplikasi yang telah dibuat agar
bisa terlihat kekurangan dari program ini.
Berikut adalah gambar White Box Testing pada aplikasi Budaya Betawi.
1. Pengujian White Box
Gambar III.34. White Box Testing
54
Gambar III.35. Skema Diagram Alir
55
Dari skema diagram alir diatas dapat diperoleh kompleksitas siklomatis
dengan rumus sebagai berikut:
V(G) = E – N + 2
E = Jumlah Edge yang ditentukan dengan gambar panah
N = jumlah simpul grafik alir yang ditentukan dengan gambar lingkaran
V(G) = 21 – 17 + 2 = 6
V(G) < 10 berarti memenuhi syarat kekomplesitasi siklomatis dan baris set yang
dihasilkan dari jalur independent sebagai berikut:
a) 1–2–3–6–11–4
b) 1-2-3-7-12-16
c) 1-2-3-8-13-17
d) 1-2-3-9-14
e) 1-2-3-10-15
f) 1-2-4-5
Ketika aplikasi dijalankan, maka terlihat satu set baris yang dihasilkan
adalah 1–2–3–6–11–4-1-2-3-7-12-16-1-2-3-8-13-17-1-2-3-9-14-1-2-3-10-15-1-2-
4-5 dan terlihat bahwa simpul telah dieksekusi satu kali.
56
2. Pengujian Black Box
Pengujian black box dilakukan untuk memastikan bahwa suatu event atau
masukan menjelaskan proses yang tepat dan menghasilkan output yang sesuai
dengan rancangan. Berikut merupakan tabel pengujian black box:
No Skenario Test Case Hasil yang
diharapkan
Keterangan
1
Tampil Menu Utama
Menampilkan
halaman
Menu Utama
Tampil
halaman
Menu Utama
Berhasil
2 Memilih Mulai
Menampilkan
Halaman
Menu Mulai
Tampil
halaman
Menu Mulai
Berhasil
3 Memilih Sejarah
Kuliner
Menampilkan
Halaman
Sejarah
Kuliner
Tampil Info
Sejarah
Kliner
Berhasil
4 Memilih Makana
Betawi
Menampilkan
daftar
Makanan
Betawi
Tampil nama-
nama
Makanan
Betawi
Berhasil
5 Memilih daftar dari
Makanan Betawi
Menampilkan
Info Makanan
Betawi
Tampil Info
Makanan
Betawi
Berhasil
6 Memilih Minuman
Betawi
Menampilkan
daftar
Minuman
Betawi
Tampil nama-
nama
Minuman
Betawi
Berhasil
7 Memilih daftar dari
Minuman Betawi
Menampilkan
Info Miuman
Betawi
Tampil Info
Minumanan
Betawi
Berhasil
8 Memilih Kuis Menampilkan
Soal Kuis
Tampil Soal
Latihan Berhasil
9 Memilih Info Aplikasi
Menampilkan
halaman Info
Aplikasi
Tampil Info
Aplikasi Berhasil
10 Memilih Keluar Keluar dari
Menu Utama
Tampil
Halaman
Keluar
Berhasil
Tabel III.11. Black Box Testing
57
3.4. Implementasi
3.4.1. Tampilan Menu Utama
Gambar III.36. Tampilan Menu Utama
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/backgroundjakarta"
tools:context="com.example.weareunited.budayabetawi.MainActivity">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_mulai"
android:background="@drawable/mulai"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_keluar"
android:background="@drawable/keluarr"
android:layout_below="@+id/b_mulai"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp" />
</RelativeLayout>
58
3.4.2. Tampilan Menu Mulai
Gambar III.37. Tampilan Menu Mulai
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/bgmulai"
tools:context="com.example.weareunited.budayabetawi.Mulai">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_sejarah"
android:background="@drawable/bsejarahkuliner"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="90dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_makanan"
android:background="@drawable/bmakananbetawi"
android:layout_below="@+id/b_sejarah"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp" />
59
3.4.3. Tampilan Menu Sejarah Kuliner
Gambar III.38. Tampilan Menu Sejarah Kuliner
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.weareunited.budayabetawi.SejarahJakarta
">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webViewSejarah_Jakarta"
android:scrollbars="none">
</WebView>
</RelativeLayout>
60
3.4.4. Tampilan Menu Makanan Betawi
Gambar III.39. Tampilan Menu Makanan Betawi
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/kotakpencari"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Cari Makanan"
android:layout_margin="5dp"
android:padding="10dp"
android:textSize="21dp"
android:textStyle="italic"/>
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
61
3.4.5. Tampilan Halaman Minuman Betawi
Gambar III.40. Tampilan Halaman Makanan Betawi
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bgminumanbetawi"
android:orientation="horizontal"
tools:context=".MinumanBetawi">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_bir"
android:background="@drawable/b_birpletok"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp" />
<ImageButton
android:layout_width="wrap_content"
62
3.4.6. Tampilan Menu Minuman Betawi
Gambar III.41. Tampilan Menu Minuman Betawi
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bgminumanbetawi"
android:orientation="horizontal"
tools:context=".MinumanBetawi">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_bir"
android:background="@drawable/b_birpletok"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/b_escampur"
63
3.4.7. Tampilan Halaman Minuman Betawi
Gambar III.42. Tampilan Halaman Makanan Betawi
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.weareunited.budayabetawi.BuburAse">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webViewbubur"
android:scrollbars="none">
</WebView>
</RelativeLayout>
64
3.4.8. Tampilan Menu Kuis
Gambar III.42. Tampilan Menu Kuis
65
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bgminumanbetawi">
<Button
android:id="@+id/buttonPrev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="<<" />
<Button
android:id="@+id/buttonSelesai"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Selesai" />
<Button
android:id="@+id/buttonNext"
3.4.9. Tampilan Halaman Info Aplikasi
Gambar III.43. Tampilan Halaman Info Aplikasi
66
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.weareunited.budayabetawi.InfoAplikasi">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:textSize="25sp"
android:textStyle="bold"
android:id="@+id/satu"
android:textColor="#6FC3A8"
android:text="Skripsi Program Science" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:textStyle="bold"
android:id="@+id/dua"
android:textColor="#6FC3A8"
android:layout_below="@+id/satu"
android:text="STMIK Nusa Mandiri"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:textStyle="italic"
android:id="@+id/tiga"
android:textColor="#6FC3A8"
android:layout_below="@+id/dua"
android:textAlignment="center"
android:text="PERANCANGAN APLIKASI PENGENALAN KULINER
BUDAYA BETAWI BERBASIS ANDROID DENGAN METODE RAD"/>
67
3.5. Support
Untuk memasang aplikasi ini digunakan perangkat atau smartphone
berbasis android minimal 4.1.1 (Jelly Bean) – API Level 16, RAM 512MB
resolution QVGA 3.3.