bab iii analisa dan perancangan software · 25 bab iii analisa dan perancangan software 3.1....

43
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.

Upload: others

Post on 13-Nov-2020

12 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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.

Page 2: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 3: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 4: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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.

Page 5: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 6: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 7: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 8: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 9: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 10: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 11: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 12: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 13: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 14: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

38

c) Activity Diagram Minuman Betawi

Gambar III.12. Activity Diagram Minuman Betawi

c) Activity Diagram Kuis

Gambar III.13. Activity Diagram Kuis

Page 15: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 16: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 17: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 18: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

42

d) Sequence Diagram Minuman Betawi

Gambar III.20 Sequence Diagram Minuman Betawi

e) Sequence Diagram Kuis

Gambar III.21 Sequence Diagram Kuis

Page 19: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

43

f) Sequence Diagram Info Aplikasi

Gambar III.22 Sequence Diagram Info Aplikasi

g) Sequence Diagram Keluar

Gambar III.23 Sequence Diagram Keluar

Page 20: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 21: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 22: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 23: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 24: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 25: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 26: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 27: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 28: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 29: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 30: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

54

Gambar III.35. Skema Diagram Alir

Page 31: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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.

Page 32: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 33: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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>

Page 34: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 35: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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>

Page 36: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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>

Page 37: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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"

Page 38: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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"

Page 39: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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>

Page 40: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

64

3.4.8. Tampilan Menu Kuis

Gambar III.42. Tampilan Menu Kuis

Page 41: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 42: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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

Page 43: BAB III ANALISA DAN PERANCANGAN SOFTWARE · 25 BAB III ANALISA DAN PERANCANGAN SOFTWARE 3.1. Analisa Kebutuhan Software Dalam pembuatan aplikasi Budaya Betawi ini dibutuhkan analisa

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.