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.