BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Pada tahap analisa dan perancangan sistem ini diperlukan tahapan sistematis agar aplikasi yang akan dibuat sesuai dengan kegunaan dan tujuannya, salah satunya adalah menggunakan model perangkat lunak yaitu model SDLC. maka pada bab ini akan dibahas tentang tahap-tahap dalam membangun perangkat lunak dengan menggunakan model SDLC. Proses analisis merupakan salah satu tahapan yang harus dilalui rekayasa perangkat lunak karena melalui analisis definisi masalah menjadi lebih jelas. Kebutuhan sistem dapat dispesifikasi sehingga kriteria yang harus dipenuhi dalam aplikasi dapat ditentukan agar aplikasi yang akan dihasilkan menjadi solusi dari masalah tersebut. 3.2 Perancangan Aplikasi Perancangan adalah suatu bagian dari metodologi pengembangan pembangunan suatu perangkat lunak yang dilakukan setelah tahapan untuk memberikan gambaran secara terperinci. Agar aplikasi mudah dipahami dalam perancangan aplikasi ini akan dibuat pemodelan Struktur Navigasi untuk rancangan alur program dimana desain harus mengenal dengan baik karena setiap model memberikan solusi untuk kebutuhan yang berbeda. Pemodelan Storyboard untuk gambaran dari scene yang hasil dari perancangan akan menjadi acuan dalam pembuatan tampilan pada tahap implementasi. Dan pemodelan storyline sebagai alur cerita dari Storyboard. 3.2.1 Gambaran Umum Sistem Yang Diusulkan Pembuatan aplikasi pengenalan jenis reptil dan tata cara pemeliharaan yang akan dibuat mampu menampilkan berupa teks dan visualisasi gambar pada layar smartphone android. 37

38 3.2.2 Perancangan Prosedur Yang Diusulkan Proses perancangan ini merupakan tahap awal dari perancangan aplikasi pengenalan jenis reptil dan tata cara pemeliharaan reptil yang dilakukan sebagai pemecahan masalah ketika digunakan. 3.2.2.1 Pemodelan Struktur Navigasi Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia. Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia mempunyai suatu pedoman dan arah informasi yang jelas. Dalam pembuatan aplikasi multimedia ini menggunakan struktur navigasi hirarki. Penjelasan secara garis besar. Tampilan awal aplikasi dimulai dengan loading/splash, dan ketika selesai akan muncul menu utama. Didalam menu utama terdapat 5 pilihan, yaitu menu pengenalan jenis reptil, menu tata cara pemeliharaan, menu alamat dokter hewan, dan menu tentang aplikasi. Gambar 3.1 Struktur Navigasi

39 3.2.3 Storyboard Setiap halaman yang ada di rancangan aplikasi pengenalan jenis reptil dan tata cara pemeliharaan reptil saling terhubung satu sama lain dan saling berkaitan. Sub-sub halaman dari pilihan menu utama hanya dapat di akses melalui sub-sub halaman menu masuk. Pada saat memasuki halaman menu pengenalan jenis reptil, tata cara pemeliharaan, alamat dokter hewan, dan tentang aplikasi maka akan menampilkan layout halaman tersebut dan halaman tersebut hanya terhubung dengan menu utama, Perancangan ini merupakan hasil transformasi dari analisa ke dalam perancangan yang nantinya akan diimplementasikan.

40 Gambar 3.2 Storyboard

41 3.2.3.1 Rancangan Storyline Menu Utama Perancangan pada halaman menu utama adalah bagian halaman depan dari semua halaman yang ada pada aplikasi, karena pada saat pertama aplikasi dibuka maka halaman inilah yang akan tampil sebelum ke halaman lainnya. Halaman ini terdapat tombol menu yang berisikan pengenalan jenis reptil, tata cara pemeliharaan, alamat dokter hewan, dan tentang aplikasi Reptil Zone PENGENALAN JENIS REPTIL TATA CARA PEMELIHARAAN ALAMAT DOKTER HEWAN TENTANG APLIKASI Gambar 3.3 Halaman Layar Menu Utama 3.2.3.2 Rancangan Storyline Halaman Pengenalan Jenis Reptil Perancangan pada halaman pengenalan jenis reptil terdapat button (tombol) yang akan menuju pada halaman Buaya, Ular, Iguana, Kura-Kura, dan Penyu. JENIS REPTIL BUAYA ULAR IGUANA KURA-KURA PENYU Gambar 3.4 Halaman Pengenalan Jenis Reptil

42 3.2.3.3 Rancangan Storyline Halaman Pengenalan Jenis Buaya Perancangan pada halaman Buaya berisikan penjelasan tentang buaya dan terdapat tombol yang akan menuju pada halaman suku jenis Buaya, yaitu Osteolaemus dan Crocodylus TENTANG BUAYA OSTEOLAEMUS CROCODYLUS Gambar 3.5 Halaman Menu Pengenalan Jenis Buaya 3.2.3.4 Rancangan Storyline Halaman Osteolaemus Perancangan pada halaman Osteolaemus berisikan penjelasan tentang jenis Buaya suku Osteolaemus dan terdapat gambar contoh buaya dari masing-masing jenis Buaya tersebut. TENTANG OSTEOLAEMUS Gambar 3.6 Halaman Menu Osteolaemus

43 3.2.3.5 Rancangan Storyline Halaman Crocodylus Perancangan pada halaman Crocodylus berisikan tentang jenis buaya dari suku Crocodylus. Gambar menunjukkan berupa foto hewan buaya dari suku Crocodylus. Teks deskripsi Crocodylus berisi tentang deskripsi dari jenis buaya Crocodylus. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis buaya Crocodylus. TEKS DESKRIPSI CROCODYLUS TOMBOL GESER (BERUPA ) Gambar 3.7 Halaman Menu Crocodylus 3.2.3.6 Rancangan Storyline Halaman Pengenalan Jenis Ular Perancangan pada halaman Ular berisikan penjelasan tentang Ular dan terdapat tombol yang akan menuju pada halaman famili jenis Ular, yaitu Henophidia, Typhlopoidea, dan Xenophidia. TENTANG ULAR HENOPHIDIA XENOPHIDIA TYPHLOPOIDEA Gambar 3.8 Halaman Menu Pengenalan Jenis Ular

44 3.2.3.7 Rancangan Storyline Halaman Henophidia Perancangan pada halaman Henophidia berisikan button yang akan menuju ke menuju ke halaman jenis ular Henophidia, yaitu halaman Aniliidae, Boidae, Tropidophiidae, Cylindrophiidae, Loxocemidae, Uropeltidae, Xenopeltidae, Pythonidae. ANILIIDAE BOIDAE TROPIDOPHIIDAE CYLINDROPIIDAE LOXOCEMIDAE UROPELTIDAE XENOPELTIDAE PYTHONIDAE Gambar 3.9 Halaman Menu Henophidia 3.2.3.8 Rancangan Storyline Halaman Aniliidae Perancangan pada halaman Aniliidae ini terdapat gambar yang menunjukkan foto ular Aniliidae dan teks penjelasan tentang deskripsi ular Aniliidae. TENTANG JENIS ULARNYA Gambar 3.10 Halaman Menu Aniliidae

45 3.2.3.9 Rancangan Storyline Halaman Boidae Perancangan pada halaman Boidae berisikan tentang jenis ular dari suku Boidae. Gambar menunjukkan berupa foto hewan ular dari suku Boidae. Teks deskripsi Boidae berisi tentang deskripsi dari jenis ular Boidae. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis ular Boidae. TEKS DESKRIPSI ULAR TOMBOL GESER (BERUPA ) Gambar 3.11 Halaman Menu Boidae 3.2.3.10 Rancangan Storyline Halaman Tropidophiidae Perancangan pada halaman Tropidophiidae ini terdapat gambar yang menunjukkan foto ular Tropidophiidae dan teks penjelasan tentang deskripsi ular Tropidophiidae. TENTANG JENIS ULARNYA Gambar 3.12 Halaman Menu Tropidophiidae

46 3.2.3.11 Rancangan Storyline Halaman Cylindrophiidae Perancangan pada halaman Cylindrophiidae ini terdapat gambar yang menunjukkan foto ular Cylindrophiidae dan teks penjelasan tentang deskripsi ular Cylindrophiidae. TENTANG JENIS ULARNYA Gambar 3.13 Halaman Menu Cylindrophiidae 3.2.3.12 Rancangan Storyline Halaman Loxocemidae Perancangan pada halaman Loxocemidae ini terdapat gambar yang menunjukkan foto ular Loxocemidae dan teks penjelasan tentang deskripsi ular Loxocemidae. TENTANG JENIS ULARNYA Gambar 3.14 Halaman Menu Loxocemidae

47 3.2.3.13 Rancangan Storyline Halaman Uropeltidae Perancangan pada halaman Uropeltidae ini terdapat gambar yang menunjukkan foto ular Uropeltidae dan teks penjelasan tentang deskripsi ular Uropeltidae. TENTANG JENIS ULARNYA Gambar 3.15 Halaman Menu Uropeltidae 3.2.3.14 Rancangan Storyline Halaman Xenopeltidae Perancangan pada halaman Xenopeltidae ini terdapat gambar yang menunjukkan foto ular Xenopeltidae dan teks penjelasan tentang deskripsi ular Xenopeltidae. TENTANG JENIS ULARNYA Gambar 3.16 Halaman Menu Xenopeltidae

48 3.2.3.15 Rancangan Storyline Halaman Pythonidae Perancangan pada halaman Pythonidae berisikan tentang jenis ular dari suku Pythonidae. Gambar menunjukkan berupa foto hewan ular dari suku Pythonidae. Teks deskripsi Pythonidae berisi tentang deskripsi dari jenis ular Pythonidae. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis ular Pythonidae. TEKS DESKRIPSI ULAR TOMBOL GESER (BERUPA ) Gambar 3.17 Halaman Menu Pythonidae 3.2.3.16 Rancangan Storyline Halaman Xenophidia Perancangan pada halaman Xenophidia berisikan tentang teks penjelasan Xenophidia button yang akan menuju ke menuju ke halaman jenis ular Xenophidia, yaitu halaman Acrochordidae, Colubridae, Elapidae, Viperidae. TENTANG XENOPHIDIA ACROCHODIDAE ELAPIDAE COLUBRIDAE VIPERIDAE Gambar 3.18 Halaman Menu Xenophidia

49 3.2.3.17 Rancangan Storyline Halaman Acrochordidae Perancangan pada halaman Acrochordidae ini terdapat gambar yang menunjukkan foto ular Acrochordidae dan teks penjelasan tentang deskripsi ular Acrochordidae. TENTANG JENIS ULARNYA. Gambar 3.19 Halaman Menu Acrochordidae 3.2.3.18 Rancangan Storyline Halaman Colubridae Perancangan pada halaman Colubridae berisikan tentang jenis ular dari suku Colubridae. Gambar menunjukkan berupa foto hewan ular dari suku Colubridae. Teks deskripsi Colubridae berisi tentang deskripsi dari jenis ular Colubridae. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis ular Colubridae. TEKS DESKRIPSI ULAR TOMBOL GESER (BERUPA ) Gambar 3.20 Halaman Menu Colubridae

50 3.2.3.19 Rancangan Storyline Halaman Elapidae Perancangan pada halaman Elapidae berisikan tentang jenis ular dari suku Elapidae. Gambar menunjukkan berupa foto hewan ular dari suku Elapidae. Teks deskripsi Elapidae berisi tentang deskripsi dari jenis ular Elapidae. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis ular Elapidae. TEKS DESKRIPSI ULAR TOMBOL GESER (BERUPA ) Gambar 3.21 Halaman Menu Elapidae 3.2.3.20 Rancangan Storyline Halaman Viperidae Perancangan pada halaman Viperidae berisikan tentang jenis ular dari suku Viperidae. Gambar menunjukkan berupa foto hewan ular dari suku Viperidae. Teks deskripsi Viperidae berisi tentang deskripsi dari jenis ular Viperidae. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis ular Viperidae. TEKS DESKRIPSI ULAR TOMBOL GESER (BERUPA ) Gambar 3.22 Halaman Menu Viperidae

51 3.2.3.21 Rancangan Storyline Halaman Typhlopoidea Perancangan pada halaman Typhlopoidea berisikan tentang teks penjelasan Typhlopoidea button yang akan menuju ke menuju ke halaman jenis ular Typhlopoidea, yaitu halaman Typhlopidae dan Leptotyphlopidae. TENTANG TYPHLOPOIDEA TYPHLOPIDAE LEPTOTYPHLOPIDAE Gambar 3.23 Halaman Menu Typhlopoidea 3.2.3.22 Rancangan Storyline Halaman Typhlopidae Perancangan pada halaman Typhlopidae ini terdapat gambar yang menunjukkan foto ular Typhlopidae dan teks penjelasan tentang deskripsi ular Typhlopidae. TENTANG JENIS ULARNYA Gambar 3.24 Halaman Menu Typhlopidae

52 3.2.3.23 Rancangan Storyline Halaman Leptotyphlopidae Perancangan pada halaman Leptotyphlopidae ini terdapat gambar yang menunjukkan foto ular Leptotyphlopidae dan teks penjelasan tentang deskripsi ular Leptotyphlopidae. TENTANG JENIS ULARNYA Gambar 3.25 Halaman Menu Leptotyphlopidae 3.2.3.24 Rancangan Storyline Halaman Iguana Perancangan pada halaman Iguana berisikan tentang jenis Iguana. Gambar menunjukkan berupa foto hewan Iguana. Teks deskripsi Iguana berisi tentang deskripsi dari jenis Iguana. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis Iguana. TEKS DESKRIPSI IGUANA TOMBOL GESER (BERUPA ) Gambar 3.26 Halaman Menu Iguana

53 3.2.3.25 Rancangan Storyline Halaman Pengenalan Jenis Kura-Kura Perancangan pada halaman Kura-Kura berisikan penjelasan tentang Kura-Kura dan terdapat tombol yang akan menuju pada halaman jenis Kura-Kura, yaitu Pleurodira dan Cryptodira TENTANG KURA-KURA PLEURODIRA CRYPTODIRA Gambar 3.27 Halaman Menu Pengenalan Jenis Kura-Kura 3.2.3.26 Rancangan Storyline Halaman Pleurodira Perancangan pada halaman Pleurodira berisikan tentang jenis kura-kura dari suku Pleurodira. Gambar menunjukkan berupa foto hewan kura-kura dari suku Pleurodira. Teks deskripsi Pleurodira berisi tentang deskripsi dari jenis kura-kura Pleurodira. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis kura-kura Pleurodira. TEKS DESKRIPSI KURA- KURA TOMBOL GESER (BERUPA ) Gambar 3.28 Halaman Menu Pleurodira

54 3.2.3.27 Rancangan Storyline Halaman Cryptodira Perancangan pada halaman Cryptodira berisikan tentang jenis kura-kura dari suku Cryptodira. Gambar menunjukkan berupa foto hewan kura-kura dari suku Cryptodira. Teks deskripsi Cryptodira berisi tentang deskripsi dari jenis kura-kura Cryptodira. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis kura-kura Cryptodira. TEKS DESKRIPSI KURA- KURA TOMBOL GESER (BERUPA ) Gambar 3.29 Halaman Menu Cryptodira 3.2.3.28 Rancangan Storyline Halaman Penyu Perancangan pada halaman Penyu berisikan tentang jenis Penyu. Gambar menunjukkan berupa foto hewan Penyu. Teks deskripsi Penyu berisi tentang deskripsi dari jenis Penyu. Tombol geser berfungsi sebagai button yang ketika di klik akan muncul gambar dan deskripsi dari masing-masing jenis Penyu. TEKS DESKRIPSI PENYU TOMBOL GESER (BERUPA ) Gambar 3.30 Halaman Menu Penyu

55 3.2.3.29 Rancangan Storyline Halaman Tata Cara Pemeliharaan Perancangan pada halaman tata cara pemeliharaan terdapat button yang menuju ke halaman Cara Pemeliharaan Iguana, Ular, dan Kura-kura. JENIS REPTIL IGUANA ULAR KURA-KURA Gambar 3.31 Halaman Menu Tata Cara Pemeliharaan 3.2.3.30 Rancangan Storyline Halaman Cara Pemeliharaan Ular Perancangan pada halaman cara pemeliharaan ular adalah teks yang berisikan tata cara pemeliharaan. Di halaman ini hanya terdapat TextView yang berisikan tata cara pemeliharaan ular. TEKS TATA CARA PEMELIHARAAN Gambar 3.32 Halaman Cara Pemeliharaan Ular 3.2.3.31 Rancangan Storyline Halaman Cara Pemeliharaan Iguana Perancangan pada halaman cara pemeliharaan iguana adalah teks yang berisikan tata cara pemeliharaan. Di halaman ini hanya terdapat TextView yang berisikan tata cara pemeliharaan iguana.

56 TEKS TATA CARA PEMELIHARAAN Gambar 3.33 Halaman Cara Pemeliharaan Iguana 3.2.3.32 Rancangan Storyline Halaman Cara Pemeliharaan Kura-Kura Perancangan pada halaman cara pemeliharaan kura-kura adalah teks yang berisikan tata cara pemeliharaan. Di halaman ini hanya terdapat TextView yang berisikan tata cara pemeliharaan kura-kura. TEKS TATA CARA PEMELIHARAAN Gambar 3.34 Halaman Cara Pemeliharaan Kura-Kura 3.2.3.33 Rancangan Storyline Halaman Alamat Dokter Hewan Perancangan pada halaman alamat dokter hewan adalah teks yang berisikan alamat dokter hewan yang terdapat di daerah DKI Jakarta. Di halaman ini hanya terdapat TextView yang berisikan alamat dokter hewan. ALAMAT DOKTER HEWAN Gambar 3.35 Halaman Alamat Dokter Hewan

57 3.2.3.34 Rancangan Storyline Halaman Tentang Aplikasi Perancangan pada halaman tentang aplikasi adalah teks yang berisikan tentang aplikasi. Di halaman ini hanya terdapat TextView yang berisikan info tentang aplikasi. TENTANG APLIKASI Gambar 3.36 Halaman Tentang Aplikasi 3.3 Perancangan Bagian Alir (Flowchart) Sistem flowchart menggunakan tahapan proses dari suatu sistem, termasuk sistem multimedia. Start Tampilan Layar Menu Utama Pilih Menu Pilih Menu Pengenalan Jenis Reptil Ya Tampil Layar Pengenalan Jenis Reptil A Tidak Pilih Menu Tata Cara Pemeliharaan Ya Tampil Layar Tata Cara Pemeliharaan B Tidak Pilih Menu Alamat Dokter Hewan Ya Tampil Layar Alamat Dokter Hewan Tidak Pilih Menu Tentang Aplikasi Ya Tampil Layar Tentang Aplikasi Tidak End Gambar 3.37 Rancangan Flowchart Menu Utama

58 Gambar 3.38 Rancangan Flowchart Menu Pengenalan Jenis Reptil

59 Gambar 3.39 Rancangan Flowchart Menu Tata Cara Pemeliharaan Gambar 3.40 Rancangan Flowchart Menu Pengenalan Jenis Buaya

60 Gambar 3.41 Rancangan Flowchart Pengenalan Jenis Ular Gambar 3.42 Rancangan Flowchart Pengenalan Jenis Kura-Kura

61 Gambar 3.43 Rancangan Flowchart Henophidia

62 Gambar 3.44 Rancangan Flowchart Xenophidia Gambar 3.45 Rancangan Flowchart Typhlopoidea