BAB III ANALISA DAN PERANCANGAN

(1)

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.

(2)

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.

(3)

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.

(4)

(5)

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

PENGENALAN JENIS REPTIL TATA CARA PEMELIHARAAN ALAMAT DOKTER HEWAN

TENTANG APLIKASI

Reptil Zone

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.

BUAYA IGUANA

ULAR KURA-KURA PENYU

JENIS REPTIL

(6)

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.

TEKS PENJELASAN TENTANG OSTEOLAEMUS

GAMBAR

(7)

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

GAMBAR

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

(8)

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 TROPIDOPHIIDAE BOIDAE 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.

TEKS PENJELASAN TENTANG JENIS

ULARNYA GAMBAR

(9)

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

ULARNYA GAMBAR

(10)

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.

ULARNYA GAMBAR

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.

ULARNYA GAMBAR

(11)

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.

ULARNYA GAMBAR

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.

ULARNYA GAMBAR

(12)

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

(13)

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. TEKS PENJELASAN TENTANG JENIS ULARNYA GAMBAR .

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.

(14)

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

(15)

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.

ULARNYA GAMBAR

(16)

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.

ULARNYA GAMBAR

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 GAMBAR

(17)

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.

TEKS DESKRIPSI KURA-KURA GAMBAR

(18)

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

TEKS DESKRIPSI PENYU GAMBAR

(19)

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.

IGUANA

ULAR KURA-KURA

JENIS REPTIL

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.

(20)

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.

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

(21)

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

Pilih Menu Tata Cara Pemeliharaan

Pilih Menu Alamat Dokter Hewan

Pilih Menu Tentang Aplikasi

End Tidak

Tidak