• Tidak ada hasil yang ditemukan

BAB III ANALISA DAN PERANCANGAN SOFTWARE

N/A
N/A
Protected

Academic year: 2024

Membagikan "BAB III ANALISA DAN PERANCANGAN SOFTWARE"

Copied!
43
0
0

Teks penuh

(1)

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.

(2)

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

(3)

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

(4)

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.

(5)

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

(6)

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

(7)

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

(8)

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

(9)

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

(10)

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

(11)

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

(12)

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

(13)

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

(14)

38 c) Activity Diagram Minuman Betawi

Gambar III.12. Activity Diagram Minuman Betawi

c) Activity Diagram Kuis

Gambar III.13. Activity Diagram Kuis

(15)

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

(16)

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

(17)

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

(18)

42 d) Sequence Diagram Minuman Betawi

Gambar III.20 Sequence Diagram Minuman Betawi

e) Sequence Diagram Kuis

Gambar III.21 Sequence Diagram Kuis

(19)

43 f) Sequence Diagram Info Aplikasi

Gambar III.22 Sequence Diagram Info Aplikasi

g) Sequence Diagram Keluar

Gambar III.23 Sequence Diagram Keluar

(20)

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

(21)

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

(22)

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

(23)

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

(24)

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

(25)

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

(26)

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

(27)

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

(28)

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

(29)

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

(30)

54

Gambar III.35. Skema Diagram Alir

(31)

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.

(32)

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

(33)

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>

(34)

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" />

(35)

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>

(36)

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>

(37)

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"

(38)

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"

(39)

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>

(40)

64 3.4.8. Tampilan Menu Kuis

Gambar III.42. Tampilan Menu Kuis

(41)

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="&lt;&lt;" />

<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

(42)

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"/>

(43)

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.

Referensi

Dokumen terkait