BAB III DESAIN DAN PERANCANGAN

Transkripsi

1 BAB III DESAIN DAN PERANCANGAN 3. Desain dan Perancangan Sebelum melakukan pembuatan aplikasi hal yang harus dilakukan terlebih dahulu adalah merancang aplikasi. Rancangan dimulai dengan pembuatan struktur navigasi dan pembuatan storyboard yang diikuti oleh perancangan tampilan halaman aplikasi serta Use Case Diagram dan Actity Diagram Perencanaan Aplikasi Dalam penulisan tugas akhir ini, penulis berencana untuk membuat sebuah aplikasi informasi museum di Jakarta Selatan berbasis mobile. Aplikasi ini menampilkan informasi museum khususnya di daerah Jakarta Selatan dan dapat berjalan pada perangkat mobile yang memiliki sistem operasi Android, agar dapat memudahkan pengguna dalam mencari informasi museum di Jakarta. Aplikasi ini dimulai dengan menampilkan sebuah halaman Splash Screen yang kemudian di ikuti munculnya halaman seperti menu utama yang berisi daftar menu pilihan. utama dibagi menjadi lima bagian yaitu : sekilas, wisata museum, tujuan, penulis dan petunjuk Struktur Navigasi Navigasi merupakan struktur yang terpenting dalam pembuatan rancangan aplikasi ini. Penulis merancang struktur navigasi yang berfungsi untuk mempermudah dalam pembuatan aplikasi, sehingga pembuatan program aplikasi dapat dilakukan secara terurut. Struktur navigasi yang digunakan pada aplikasi ini berupa struktur navigasi hirarki yang sering disebut juga struktur navigasi bercabang, yaitu suatu struktur yang mengandalkan percabangan untuk menampilkan data atau gambar pada layar dengan kriteria tertentu. Tampilan pada menu utama di sebut master page (halaman utama sat), halaman tersebut mempunyai halaman percabangan yang di sebut slave page (halaman pendukung) dan jika dipilih akan menjadi halaman kedua, begitu seterusnya. Adapun struktur navigasi hirarki yang dibuat akan dijelaskan pada gambar 3. 44

2 STRUKTUR NAVIGASI HIRARKI Layar Utama Utama Sekilas Wisata Museum Tujuan Tentang Penulis Petunjuk Keluar Museum Polri Lokasi Informasi Museum Satria Mandala Foto Museum Reksa Artha Waktu Buka Harga Tanda Masuk Gambar 3 Struktur Navigasi Hirarki 45

3 3.3. Storyboard Storyboad adalah visualisasi ide dari aplikasi yang akan dibangun, sehingga dapat memberikan gambaran dari aplikasi yang akan di hasilkan. Storyboard dapat dikatakan juga visual script yang akan di jadikan ouline merupakan hal yang penting dalam pembuatan rancangan aplikasi dikarenakan adanya hubungan rantai kerja dari proyek, ditampilkan shot by shot yang biasa disebut dengan istilah scene. Storyboard merupakan urutan untuk mengakses dari halaman satu ke halaman berikutnya. Adapun storyboard yang dibuat akan dijelaskan pada gambar 5. Pertama-tama kita akan buka progam Eclipse kemudian jalankan program tersebut (1), nanti akan muncul gambar berupa splash screen yang mana terdapat dua buah tombol yaitu dan (2). Setelah muncul splash screen kita akan memilih tombol, didalam tombol menu tersebut tercantum pilihan menu diantaranya adalah Sekilas sejarah museum, Wisata Museum, Tujuan, Penulis, Petunjuk dan Keluar (3). Apabila kita memilih menu wisata nanti akan muncul informasi mengenai sejarah museum (4). Untuk kembali ke menu utama tinggal tekan tombol menu lagi nanti akan muncul pilihan utama (5). Ketika kita memilih menu Wisata Museum akan tampil 3 menu museum yaitu Museum Polri, Museum Satria Mandala dan Museum Reksa Artha (6) untuk kembali ke menu utama kita tekan tombol menu (7). Apabila kita memilih salah satu museum akan didapat informasi mengenai informasi museum tersebut, gambar dari koleksi museum, lokasi tempat museum, alamat web museum beserta harga tanda masuk ke museum (8), untuk kembali ke menu wisata museum tinggal tekan tombol menu back (9). Untuk memilih menu tujuan akan di cantumkan informasi mengenai tujuan pembuatana aplikasi tersebut. (10) dan untuk kembali kemenu sebelum nya tekan tombol menu dan akan muncul pilihan menu wisata museum (11). Penulis berisikan tentang biodata si penulis (12) sedangkan untuk kembali ke menu utama (13). Untuk selanjutnya jika memilih menu petunjuk akan muncul informasi mengenai tata cara penggunaan aplikasi ini (14) apabila mau kembali ke menu utama tinggal tekan tombol menu (15). Yang terakhir adalah tombol exit apabila memilih menu ini, aplikasi akan menampilkan warning yang bertuliskan Apakah anda benar-benar ingin keluar dan button Ya dan Tidak (16). Itulah storyboard mengenai aplikasi ini. 46

4 1 Launch Application 2 Splash Screen 9 Penjelasan Image Text View 8 Wisata Museum Museum Polri Museum Satria Mandala Museum Reksa Artha Utama Sekilas Wisata Museum Tujuan Penulis Petunjuk Keluar Sekilas Penjelasan Sekilas Penjelasan Penulis Image Text View Keluar Text View 14 Petunjuk Penjelasan Gambar 4 Storyboard Aplikasi 47

5 3.4. Rancangan Use Case Diagram Pada use case diagram menggambarkan bagaimana alur interaksi antara user dengan sistem. Interaksi antara pengguna dengan system ada 3 case utama : buka aplikasi, menu aplikasi dan keluar. Use case diagram dapat dilihat pada gambar dibawah. menu system exit buka aplikasi sekilas user menu aplikasi keluar wisata museum petunjuk tujuan penulis Gambar 5 Use Case diagram 3.5. Rancangan Activity Diagram Pada sistem aplikasi ini, di jelaskan bahwa terdapat beberapa alir aktifitas dalam rancangan aplikasi informasi museum di Jakarta selatan berbasis mobile. Alir berawal dari aktifitas awal aplikasi. Setelah itu alir memiliki aktifitas parallel yang mungkin terjadi pada beberapa eksekusi, diantaranya aktifitas dan. Aktifitas keluar dari Aplikasi, sedangkan aktifitas akan menampilkan beberapa aktifitas diantaranya sekilas, wisata museum, tujuan, penulis dan petunjuk. Pada menu utama jika pengguna memilih option sekilas maka tampilan yang akan muncul mengenai penjelasan informasi sejarah museum. 48

6 Aktifitas wisata museum akan menuju pada aktifitas menu. Pada ini terdapat decision untuk memeriksa apa saja pilihan yang terdaftar pada aplikasi ini, apabila pengguna memilih Option Wisata maka pengguna akan masuk ke halaman list wisata museum yang didalam ada tiga buah museum yaitu Museum Polri, Museum Satria Mandala dan Museum Reksa Artha. Setelah aktifitas informasi, gambar, lokasi dan harga tiket terdapat decision untuk menanyakan kepada pengguna apakah ingin memilih lagi. Jika ya maka pengguna dapat kembali pada aktifitas atau jika tidak maka pengguna dapat keluar dari aplikasi dan alur aktifitas akan berakhir di sini. Untuk menu tujuan, penulis dan petunjuk hampir sama dengan alirnya dengan sekilas. ( Gambar 6 Activity Diagram). 49

7 Halaman Awal Sekilas Wisata Museum Tujuan Penulis Petunjuk Penjelasan Sejarah Option Wisata Penjelasan Tujuan Image Text View Tidak Ya Pilih Wisata Museum? Text View Informasi, Gambar, Lokasi & Harga Tiket Tidak Pilih Lagi? Ya 50

8 Gambar 6 Activity Diagram 3.6. Diagram Alur (Flowchart) Alur aplikasi dimulai dengan user mengakses menu utama aplikasi. Aplikasi akan menampilkan menu utama yang kemudian diikuti dengan pilihan menu, seperti Sekilas, Wisata Museum, Tujuan, Penulis dan Petunjuk. Apabila kita memilih Wisata Museum akan terlihat 3 pilihan Wisata Museum diantaranya Museum Polri, Museum Satria Mandala dan Museum Reksa Artha. Ketika kita memilih salah satu museum akan terlihat beberapa informasi seperti Informasi Wisata Museum, Lokasi Wisata, Foto Museum, Waktu Buka Museum serta Harga Tiket. Apabila kita klik Tujuan akan terlihat Tujuan dari Wisata Museum. Selanjutnya Penulis dan Petunjuk. Untuk mengakhiri kita bisa menekan tombol yang berada di atas sebelah kiri. Diagram alur dapat dilihat pada gambar 7. 51

9 FLOWCHART Start Buka Aplikasi Pilihan Sekilas Wisata Museum Tujuan Penulis Petunjuk Output Sekilas Sejarah Museum TIDAK Pilih YA Output Informasi, Lokasi, Foto dan Harga Tiket Output Penjelasan Tujuan Output Penulis Output Petunjuk End Gambar 7 Diagram Alur (Flowchart) 52

10 3.7. Perancangan Database Perancangan database untuk pembuatan aplikasi informasi museum di Jakarta Selatan berbasis mobile menggunakan SQLite database, detail rancangan tabel di tunjukan pada tabel dibawah ini : Tabel : tbl_m_museum Nama Field Tipe Data Keterangan Id Integer Primary key, autoincrement Judul Varchar Lokasi Text Informasi Text Image1 Text Image2 Text Image3 Text Image4 Text Tabel 2 (tbl_m_museum) Tabel : android_metadata Locale En_US Tabel 3 (android_metadata) Tabel : sqlite_sequence Name seq Tbl_m_museum 3 Tabel 4 (sqlite_sequence) 53

11 3.8. Perancangan Tampilan Tampilan merupakan salah satu hal yang penting dalam merancang sebuah aplikasi dikarenakan dengan membuat sebuah perancangan tampilan, pembuat aplikasi tidak akan mengalami kesulitan untuk membuat desain interface dari suatu aplikasi yang dibuatnya Rancangan Tampilan Halaman Pembuka / Layar Utama Halaman ini merupakan layar pertama yang dimunculkan pertama kali pada saat aplikasi dijalankan. Rancangan ini terdapat menu, exit dan image view. Apabila kita menekan itu berarti akan muncul halaman berikutnya, sedangkan ketika kita akan mengakhiri atau keluar dari Aplikasi. Image view merupakan gambar yang akan di tampilkan pada saat aplikasi dibuka. Rancangan tampilan halaman layar utama dapat dilihat pada gambar 8. Image Gambar 8 Rancangan Tampilan Halaman Pembuka / Layar Utama 54

12 3.8.2 Rancangan Tampilan Halaman Utama Halaman menu utama akan tampil apabila kita menekan tombol menu. Halaman ini berupa tombol-tombol yang mewakili menu yang dapat dipilih pengguna. Pada halaman ini terdapat dua buah text view yaitu, pilihan menu dan exit dan button-button untuk memilih menu serta navigasi ke halaman berikutnya atau keluar dari aplikasi. Tombol-tombol yang terdapat dalam halaman menu utama ini ada 5 (lima) tombol dan satu tombol untuk keluar dari aplikasi dan tombol menu untuk kembali ke asal. Rancangan tampilan halaman menu utama dapat di lihat pada gambar 9. Pilihan Sekilas Wisata Museum Tujuan Penulis Petunjuk Gambar 9 Rancangan Tampilan Halaman Utama Rancangan Tampilan Halaman Sekilas Sejarah Museum Halaman sekilas sejarah museum akan ditampilkan jika pada halaman menu utama pengguna memilih pilihan tersebut. Halaman ini berisi sekilas tentang sejarah museum yang ada di Jakarta. Rancangan tampilan halaman sekilas sejarah museum dapat dilihat pada gambar

13 Sekilas Sejarah Museum Text Gambar 10 Rancangan Tampilan Halaman Sekilas Sejarah Museum Rancangan Tampilan Halaman Wisata Museum Halaman wisata museum akan di tampilkan jika pada halaman menu utama pengguna memilih menu tersebut. Halaman ini akan menampilkan beberapa Museum di Jakarta khususnya daerah selatan, seperti Museum Polri, Museum Satria Mandala dan Museum Reksa Artha. Rancangan tampilan halaman wisata museum dapat dilihat pada gambar 11. Daftar Wisata Museum Museum Polri Museum Satria Mandala Museum Reksa Artha Gambar 11 Rancangan Tampilan Daftar Wisata Museum 56

14 3.8.5 Rancangan Tampilan Halaman Wisata Museum Polri Halaman wisata museum Polri akan di tampilkan jika pada halaman menu utama pengguna memilih menu wisata museum. Halaman ini akan menampilkan informasi museum, lokasi, foto waktu buka museum dan harga tanda masuk. Rancangan tampilan halaman wisata museum polri dapat dilihat pada gambar 12. Informasi Museum Polri Lokasi Foto Waktu Buka Museum Harga Tanda Masuk Gambar 12 Rancangan Tampilan Halaman Wisata Museum Polri Rancangan Tampilan Halaman Wisata Museum Satria Mandala Halaman wisata museum Satria Mandala akan di tampilkan jika pada halaman menu utama pengguna memilih menu wisata museum. Halaman ini akan menampilkan informasi museum, lokasi, foto waktu buka museum dan harga tanda masuk. Rancangan tampilan halaman wisata museum polri dapat dilihat pada gambar

15 Informasi Museum Satria Mandala Lokasi Foto Waktu Buka Museum Harga Tanda Masuk Gambar 13 Rancangan Tampilan Halaman Wisata Museum Satria Mandala Rancangan Tampilan Halaman Wisata Museum Reksa Artha Halaman wisata museum Reksa Artha akan di tampilkan jika pada halaman menu utama pengguna memilih menu wisata museum. Halaman ini akan menampilkan informasi museum, lokasi, foto waktu buka museum dan harga tanda masuk. Rancangan tampilan halaman wisata museum reksa artha dapat dilihat pada gambar 14. Informasi Museum Reksa Artha Lokasi Foto Waktu Buka Museum Harga Tanda Masuk 58

16 Gambar 14 Rancangan Tampilan Halaman Wisata Museum Reksa Artha Rancangan Tampilan Halaman Tujuan Halaman tujuan akan di tampilkan jika pada halaman menu utama pengguna memilih menu tujuan. Halaman ini akan menampilkan informasi tujuan dari pembuatan aplikasi ini. Rancangan tampilan halaman tujuan dapat dilihat pada gambar 15. Tujuan Text Gambar 15 Rancangan Tampilan Halaman Tujuan Rancangan Tampilan Halaman Penulis Halaman penulis akan di tampilkan jika pada halaman menu utama pengguna memilih menu penulis. Halaman ini akan menampilkan informasi mengenai penulis berikut gambar. Rancangan tampilan halaman penulis dapat dilihat pada gambar 16. Tentang Penulis Image Text 59

17 Gambar 16 Rancangan Tampilan Halaman Penulis Rancangan Tampilan Halaman Petunjuk Halaman petunjuk akan di tampilkan jika pada halaman menu utama pengguna memilih menu petunjuk. Halaman ini akan menampilkan informasi mengenai petunjuk pengguna dari aplikasi ini. Rancangan tampilan halaman petunjuk dapat dilihat pada gambar 17. Petunjuk Text Gambar 17 Rancangan Tampilan Halaman Petunjuk Rancangan Tampilan Halaman Halaman exit akan di tampilkan jika pada halaman menu utama pengguna memilih menu exit. Halaman ini akan menampilkan jika pengguna akan keluar dari aplikasi ini. Rancangan tampilan halaman exit dapat dilihat pada gambar

18 Apakah Anda Benar-Benar ingin keluar? Ya Tidak Gambar 18 Rancangan Tampilan Halaman 61