Bab 4 HASIL DAN PEMBAHASAN
4.4 Desain Antarmuka Sistem
Perancangan antarmuka menjelaskan bagaimana rutinitas program yang akan dijalankan oleh sebuah system yang telah terkomputerisasi untuk menjelaskan bagaimana interaksi antara pengguna ( user ) dengan program yang akan dibuat nantinya. Dengan dibuatnya desain antarmuka sistem ini guna untuk membuat suatu interaksi dalam penggunaan sistem aplikasi Ensklopedia Wayang seefektif dan seefisien mungkin. Selain itu, juga dapat menjadi gambaran kasar istilahnya, dimana gambaran tersebut menggambarkan bagaimana model sistem aplikasi Ensiklopedi Wayang sebelum aplikasi tersebut benar-benar telah selesai dan siap digunakan oleh pengguna smartphone berbasis android
4.4.1 Desain Tampilan Splash Screen
Desain berikut merupakan gambaran tampilan awal pada saat pengguna (user) membuka apliksai Ensiklopedi Wayang. Pada tampilan ini nantinya hanya akan tampil gambar yang merupakan background tetap yang digunakan sebagai ciri khas dari aplikasi Ensiklopedi Wayang. Yang dimaksud gambaran tetap dan sebagai ciri khas dari sistem aplikasi Ensiklopedi Wayang yaitu gambaran tetap dan tidak berubah-ubah walaupun ketika kita masuk kedalam sub-sub menu yang ditampilkan ( Splash Screen, Menu Utama dan About). Walalupun telah masuk
kedalam sub-sub menu, gambaran atau background dari aplikasi ini tidak akan berubah-ubah. Jadi telah menjadi gambaran atau background yang khas dari aplikasi Ensiklopedi Wayang. Tampilan Splash Screen tersebut hanya akan tampil selama 3 detik, setelah itu akan masuk ke dalam tampilan menu utama.
Gambar 4.5 Desain Splash Screen Ensiklopedi Wayang
4.4.2 Desain Halaman Utama
Gambar 4.6 Desain Menu Utama Aplikasi Ensiklopedi Wayang
Gambar background Gambar background Pengertian Wayang Pandawa Lima Jenis Wayang About Keluar
30
Gambar diatas merupakan desain menu utama aplikasi, menu utama ini akan otomatis muncul setelah Splash Screen. Dalam menu utama ini terdapat beberapa tombol yang akan menuju pada masing – masing kelas pada aplikasi.
1. Pengertian Wayang : Tombol untuk menuju pada tampilan bagaimana Pengertian Wayang
2. Pandawa Lima : Tombol untuk menuju pada tampilan pada list Pandawa Lima.
3. Jenis Wayang : Tombol untuk menuju pada tampilan pada list Jenis – jenis Wayang.
4. About : Tombol untuk menuju pada tampilan tentang Pembuat aplikasi Ensiklopedi Wayang. 5. Keluar : Tombol untuk keluar dari aplikasi.
4.4.3 Desain List Menu Pandawa Lima
Gambar 4.7 Desain List Menu Pandawa Lima
Gambar diatas merupakan desain tampilan list menu Pandawa Lima. Tampilan tersebut akan muncul ketika user menekan tombol Pandawa Lima pada menu utama.
gambar Nama Pandawa
gambar Nama Pandawa
gambar Nama Pandawa Header
Pada tampilan List menu Pandawa Lima akan ditampilkan dalam bentuk listview yang terdapat beberapa bagian, yaitu :
1. Header : Logo dan nama menu
2. Gambar : Gambar wayang yang diambil dari database yang disesuaikan dengan id Pandawa.
3. Nama Pandawa : Nama Pandawa yang diambil dari database yang disesuaikan dengan id Pandawa.
Dan jika salah satu listmenu disentuh atau dipilih maka akan dialihkan pada tampilan menu detail Pandawa yang dipilih oleh user.
4.4.4 Desain List Menu Jenis Wayang
Gambar 4.8 Desain List Menu Jenis Wayang
Gambar diatas merupakan desain tampilan list menu Jenis Wayang. Tampilan tersebut akan muncul ketika user menekan tombol Jenis Wayang pada menu utama.
Pada tampilan List menu Jenis Wayang akan ditampilkan dalam bentuk listview yang terdapat beberapa bagian, yaitu :
1. Header : Logo dan nama menu gambar JenisWayang
gambar JenisWayang
gambar JenisWayang Header
32
2. Gambar : Gambar wayang yang diambil dari database yang disesuaikan dengan id Wayang
3. Jenis Wayang : Jenis Wayang yang diambil dari database yang disesuaikan dengan id Wayang.
Dan jika salah satu menu disentuh atau dipilih maka akan dialihkan pada tampilan menu detail pandawa yang dipilih oleh user.
4.4.5 Desain Detail Pandawa Lima
Gambar 4.9 Desain Tampilan Detail Pandawa Lima
Gambar diatas merupakan desain tampilan detail Pandawa Lima. Tampilan tersebut akan muncul ketika user menekan tombol List tokoh Pandawa Lima pada menu list Pandawa Lima.
Pada tampilan detail Pandawa Lima terdapat beberapa bagian, yaitu : 1. Header : Logo dan nama menu
2. Gambar : Gambar wayang yang diambil dari database yang disesuaikan dengan id Wayang
3. Detail Wayang : Detail Wayang yang diambil dari database yang disesuaikan dengan id Wayang.
4. Back : Tombol untuk kembali ketampilan List Pandawa lima. Nama Pandawa
Detail wayang, description, sejarah, cerita
Header
4.4.6 Desain Detail Jenis Wayang
Gambar 4.10 Desain tampilan Detail Jenis Wayang
Gambar diatas merupakan desain tampilan detail jenis wayang. Tampilan tersebut akan muncul ketika user menekan tombol List jenis wayang. Nantinya akan dijelaskan bagaimana sejarah dan asal usul dari Jenis Wayang yang telah dipilih oleh user.
Pada tampilan detail jenis wayang terdapat beberapa bagian, yaitu : 1. Header : Logo dan nama menu
2. Gambar : Gambar wayang yang diambil dari database yang disesuaikan dengan id Wayang
3. Detail Jenis : Detail Jenis yang diambil dari database yang disesuaikan dengan id jenis wayang.
4. Back : Tombol untuk kembali ketampilan List Jenis Wayang. description, sejarah
Header
Nama jenis wayang
34
4.4.7 Desain Tampilan Tentang
Gambar 4.11 Desain tampilan Tentang
Gambar diatas merupakan desain tampilan dari About atau tentang. Gambar diatas berisi tentang bagaimana aplikasi Ensiklopedi Wayang ini dibuat, atas dasar apa dalam pembuatan aplikasi tersebut. Tak lupa juga penulis juga mencantumkan email penulis yang nantinya berguna untuk menerima masukan yang berupa kritikan dan saran tentang bagaimana sistem aplikasi Ensiklopedi Wayang guna untuk pengembangan aplikasi yang dibuat.
Pada tampilan detail Pandawa Lima terdapat beberapa bagian, yaitu : 1. Header : Logo dan nama menu
2. Foto : Foto pengembang 3. Description : Tentang pengembang
Description tentang pengembang
Header
4.4.8 Desain Tampilan Keluar
Gambar 4.12 Desain tampilan Keluar aplikasi Ensiklopedia Wayang
Gambar diatas merupakan tampilan desain pada menu keluar. Pada saat tombol keluar dipilih maka akan menampilkan opsi pilihan pertanyaan apakah user yakin untuk keluar dari program aplikasi Ensiklopedi Wayang apa tidak, opsi yang disuguhkan yaitu pilihan “Tidak dan Ya”. Jika pada opsi Tidak dipilih maka aplikasi akan tetap menampilkan kembali menu utama pada aplikasi Ensiklopedi Wayang, dan jika opsi Ya maka akan keluar dari aplikasi yang telah berjalan.