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
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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.
http://digilib.mercubuana.ac.id/
40
Gambar 3.2 Storyboard
http://digilib.mercubuana.ac.id/
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
IGUANA
ULAR
KURA-KURA PENYU
Gambar 3.4 Halaman Pengenalan Jenis Reptil
http://digilib.mercubuana.ac.id/
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
TEKS PENJELASAN 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.
GAMBAR
TEKS PENJELASAN TENTANG OSTEOLAEMUS
Gambar 3.6 Halaman Menu Osteolaemus
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS DESKRIPSI CROCODYLUS
TOMBOL GESER (BERUPA GAMBAR)
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.
TEKS PENJELASAN TENTANG ULAR
HENOPHIDIA
XENOPHIDIA
TYPHLOPOIDEA
Gambar 3.8 Halaman Menu Pengenalan Jenis Ular
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS PENJELASAN TENTANG JENIS ULARNYA
Gambar 3.10 Halaman Menu Aniliidae
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS DESKRIPSI ULAR
TOMBOL GESER (BERUPA GAMBAR)
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.
GAMBAR
TEKS PENJELASAN TENTANG JENIS ULARNYA
Gambar 3.12 Halaman Menu Tropidophiidae
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS PENJELASAN 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.
GAMBAR
TEKS PENJELASAN TENTANG JENIS ULARNYA
Gambar 3.14 Halaman Menu Loxocemidae
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS PENJELASAN 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.
GAMBAR
TEKS PENJELASAN TENTANG JENIS ULARNYA
Gambar 3.16 Halaman Menu Xenopeltidae
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS DESKRIPSI ULAR
TOMBOL GESER (BERUPA GAMBAR)
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.
TEKS PENJELASAN TENTANG XENOPHIDIA
ACROCHODIDAE
COLUBRIDAE
ELAPIDAE
VIPERIDAE
Gambar 3.18 Halaman Menu Xenophidia
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS PENJELASAN 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.
GAMBAR
TEKS DESKRIPSI ULAR
TOMBOL GESER (BERUPA GAMBAR)
Gambar 3.20 Halaman Menu Colubridae
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS DESKRIPSI ULAR
TOMBOL GESER (BERUPA GAMBAR)
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.
GAMBAR
TEKS DESKRIPSI ULAR
TOMBOL GESER (BERUPA GAMBAR)
Gambar 3.22 Halaman Menu Viperidae
http://digilib.mercubuana.ac.id/
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.
TEKS PENJELASAN 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.
GAMBAR
TEKS PENJELASAN TENTANG JENIS ULARNYA
Gambar 3.24 Halaman Menu Typhlopidae
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS PENJELASAN 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.
GAMBAR
TEKS DESKRIPSI IGUANA
TOMBOL GESER (BERUPA GAMBAR)
Gambar 3.26 Halaman Menu Iguana
http://digilib.mercubuana.ac.id/
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
TEKS PENJELASAN 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.
GAMBAR
TEKS DESKRIPSI KURAKURA
TOMBOL GESER (BERUPA GAMBAR)
Gambar 3.28 Halaman Menu Pleurodira
http://digilib.mercubuana.ac.id/
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.
GAMBAR
TEKS DESKRIPSI KURAKURA
TOMBOL GESER (BERUPA GAMBAR)
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.
GAMBAR
TEKS DESKRIPSI PENYU
TOMBOL GESER (BERUPA GAMBAR)
Gambar 3.30 Halaman Menu Penyu
http://digilib.mercubuana.ac.id/
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.
http://digilib.mercubuana.ac.id/
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
http://digilib.mercubuana.ac.id/
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
Ya
Tampil Layar Tata Cara Pemeliharaan
B
Ya
Tampil Layar Alamat Dokter Hewan
Tidak Pilih Menu Tata Cara Pemeliharaan Tidak Pilih Menu Alamat Dokter Hewan
Tidak Pilih Menu Tentang Aplikasi
Tidak
Ya
Tampil Layar Tentang Aplikasi
End
Gambar 3.37 Rancangan Flowchart Menu Utama
http://digilib.mercubuana.ac.id/
58
Gambar 3.38 Rancangan Flowchart Menu Pengenalan Jenis Reptil
http://digilib.mercubuana.ac.id/
59
Gambar 3.39 Rancangan Flowchart Menu Tata Cara Pemeliharaan
Gambar 3.40 Rancangan Flowchart Menu Pengenalan Jenis Buaya
http://digilib.mercubuana.ac.id/
60
Gambar 3.41 Rancangan Flowchart Pengenalan Jenis Ular
Gambar 3.42 Rancangan Flowchart Pengenalan Jenis Kura-Kura
http://digilib.mercubuana.ac.id/
61
Gambar 3.43 Rancangan Flowchart Henophidia
http://digilib.mercubuana.ac.id/
62
Gambar 3.44 Rancangan Flowchart Xenophidia
Gambar 3.45 Rancangan Flowchart Typhlopoidea
http://digilib.mercubuana.ac.id/