17 BAB III METODOLOGI 3.1 Analisis Kebutuhan Analisis sistem didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasikan dan mengevaluasi permasalahan, kesempatan, hambatan yang terjadi dan kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan. Analisis ini bertujuan untuk memperlancar pengembangan dan proses desain aplikasi agar bisa mempermudah dan memperlancar proses pengembangan sistem Tahap analisis ini sangat penting dan kritis untuk dilakukan, oleh karena itu tahap ini harus dilakukan setelah tahap perencanaan sistem dan sebelum tahap desain sistem, sebab apabila terjadi kesalahan di dalam tahap ini akan menyebabkan kesalahan di bagian selanjutnya. Sistem yang dianalisis adalah sistem yang menginformasikan mengenai Aplikasi Peta Wisata Digital Kota Cilacap Berbasis Multimedia Flash berupa informasi teks, gambar, animasi, dan suara yang diaplikasikan dengan menggunakan komputer. Sistem ini menggunakan perancangan interface yang sederhana tapi didesain agar tetap menarik bagi user. Dihalaman utama ikon-ikon menu ditempatkan disudut kiri bawah karena pandangan mata bila pertama kali membuka suatu aplikasi pada sebuah perangkat tertuju pada sudut kiri bawah. Didesain dengan dominasi warna abu-abu tua agar tidak terlalu mencolok di mata. Metode analisis yang digunakan untuk menganalisis aplikasi ini adalah metode analisis terstruktur. Untuk melihat proses input output dalam aplikasi ini dinyatakan dengan diagram HIPO (Hierarchy Plus Input Process Output), yang menunjukkan hubungan antara modul dengan fungsi dalam suatu sistem.
18 3.2 Hasil Analisis Berdasarkan analisis yang telah dilakukan maka dapat diketahui apa saja yang menjadi masukan sistem, keluaran sistem, fungsi atau metode yang digunakan dalam sistem, kebutuhan perangkat keras, kebutuhan perangkat lunak serta antarmuka sistem yang akan dibuat, sehingga sistem yang dibuat nantinya sesuai dengan apa yang diharapkan. Beberapa hal yang perlu diperhatikan di antaranya adalah antarmuka (interface) yang menarik, dan navigasi menu yang mudah dijalankan dan dimengerti oleh pengguna. Berdasarkan hasil analisis ini pula didapat suatu gambaran sistem dari perangkat lunak yang akan dibuat yaitu suatu aplikasi yang dapat mempermudah wisatawan untuk menentukan tujuan wisata di kota Cilacap menggunakan multimedia flash. 3.2.1 Kebutuhan Antarmuka Antarmuka (interface) digunakan untuk menghubungkan antara sistem dengan user agar terjadi komunikasi antara user dengan sistem. Antarmuka dirancang semudah dan semenarik mungkin agar user dapat dengan mudah menggunakan sistem. Antarmuka yang sulit dipahami dan sulit digunakan akan membingungkan user dan menyebabkan sistem tidak dapat digunakan secara maksimal. Aplikasi peta wisata digital ini memiliki kebutuhan antarmuka sebagai berikut : a. Antarmuka Halaman Opening b. Antarmuka Halaman Home c. Antarmuka Halaman Peta Digital Kabupaten Cilacap d. Antarmuka Halaman Peta Interaktif e. Antarmuka Halaman Pariwisata f. Antarmuka Halaman Hotel g. Antarmuka Halaman Restaurant h. Antarmuka Halaman Sarana Publik i. Antarmuka Halaman Informasi Kota
19 3.2.2 Kebutuhan Input, Output, dan Proses 3.2.2.1 Kebutuhan Input Input adalah suatu bentuk masukan yang biasanya berupa data yang telah ada dan dibutuhkan oleh perangkat lunak untuk mencapai tujuan yang diinginkan. Dalam aplikasi ini input yang dibutuhkan adalah pilihan user menggunakan mouse dan keyboard untuk memilih pilihan menu yang ada. 3.2.2.2 Kebutuhan Output Output merupakan hasil dari suatu proses, baik berupa data maupun berbentuk informasi yang telah diolah. Output dari aplikasi ini adalah hasil pilihan dari user, yaitu berupa : peta digital administrasi Cilacap, peta digital interaktif, informasi tempat pariwisata, informasi tempat penginapan/hotel, informasi restaurant/tempat makan, informasi tempat sarana publik, informasi tentang pariwisata kota Cilacap, informasi tentang kota Cilacap. 3.2.2.3 Kebutuhan Proses Berdasarkan analisa yang telah dilakukan, proses proses yang akan dilakukan oleh sistem adalah proses menampilkan informasi berupa teks, gambar, musik, dan dan animasi. 3.2.3 Kebutuhan Perangkat Keras & Perangkat Lunak 3.2.3.1 Kebutuhan Perangkat Keras Perangkat keras adalah sekumpulan alat-alat elektronik yang mendukung sistem komputer. Perangkat keras secara umum dapat diraba atau dilihat secara kasat mata. Yang termasuk perangkat keras dalam komputer antara lain : monitor, pemroses data (processor), keyboard, mouse dan printer. Perangkat keras digunakan sebagai alat pengolah data yang bekerja secara otomatis mengolah data yang berbentuk teks, gambar, audio dan animasi. Dalam pembangunan aplikasi alat peta digital ini menggunakan Adobe Flash CS4 sebagai
20 editor animasi, dimana software ini membutuhkan spesifikasi yang cukup tinggi. Adapun spesifikasi komponen perangkat keras yang diperlukan untuk pembangunan aplikasi ini adalah sebagai berikut : 1. Piranti input berupa keyboard dan mouse. 2. Piranti output berupa monitor dengan resolusi minimal 1024x768 dan speaker. 3. Kartu grafis yang mendukung directx 9, dengan memori minimal 1 GB. 4. Processor minimal dual core dan memiliki kecepatan 2.0 GHz. 5. Memori RAM minimal 1 GB, rekomendasi 2 GB. 6. Harddisk yang memiliki ruang kosong minimal 10 GB. Sedangkan spesifikasi komponen perangkat keras yang diperlukan bagi user aplikasi ini adalah : 1. Piranti input berupa keyboard dan mouse. 2. Piranti output berupa monitor dengan resolusi minimal 800x600 dan speaker. 3. Kartu grafis dengan memori minimal 128 MB. 4. Processor yang memiliki kecepatan 1.6 GHz keatas. 5. Memori RAM minimal 512 MB, rekomendasi 1 GB 6. Harddisk yang memiliki ruang kosong minimal 100 MB. 3.2.3.2 Kebutuhan Perangkat Lunak Selain perangkat keras, perangkat lunak juga diperlukan dalam pembangunan aplikasi dan dalam menjalankan aplikasi. Perangkat lunak yang dibutuhkan akan dibagi menjadi dua sisi, pada sisi pembangunan aplikasi dan dari sisi user aplikasi. Perangkat lunak yang dibutuhkan pada pembangunan aplikasi adalah sebagai berikut :
21 1. Sistem Operasi Sistem operasi yang dibutuhkan dalam pembangunan aplikasi ini antara lain adalah Windows XP, Vista, atau 7. 2. Adobe Flash CS3 Adobe Flash CS3 adalah suatu perangkat lunak yang sering digunakan sebagai editor animasi. Untuk pembangunan aplikasi ini penulis menggunakan Adobe Flash CS3 karena software ini sudah mendukung ActionScript 2.0. 3. Adobe Photoshop CS3 Adobe Photoshop atau yang sering kita sebut Photoshop adalah perangkat lunak editor buatan Adobe System yang di khususkan untuk pengeditan foto / gambar dan pembuat efek. Dalam pengerjaan tugas akhir ini Adobe Photoshop digunakan untuk mempermudah memanipulasi dan membuat sebuah perancangan interface. Sedangkan perangkat lunak yang diperlukan oleh user aplikasi adalah sebagai berikut : 1. Sistem Operasi Sistem operasi yang dapat digunakan untuk menjalankan aplikasi peta digital ini antara lain Windows XP, Windows Vista, dan Windows 7. 2. Adobe Flash Player Adobe Flash Player adalah sebuah plugin yang digunakan untuk memainkan sebuah file script berupa ekstension.swf dan.flv, atau untuk lebih singkatnya Adobe Flash Player bisa kita sebut sebagai software pemutar video.
22 3.3 Perancangan Perangkat Lunak 3.3.1 Metode Perancangan Perancangan perangkat lunak untuk pembangunan sistem aplikasi ini menggunakan tipe perancangan yang sesuai dengan tahap pengembangan multimedia. Tipe perancangannya merupakan gabungan dari tipe perancangan berbasis multimedia dan struktur navigasi. Sesuai dengan perancangan berbasis multimedia, untuk struktur navigasi menggunakan metode perancangan HIPO yang memiliki banyak percabangan pada strukturnya. HIPO dapat menunjukkan hubungan antara modul dengan fungsi dalam suatu sistem. Dewasa ini HIPO juga digunakan sebagai alat bantu untuk merancang dan mendokumentasikan siklus pengembanagan sistem. HIPO telah dikembangkan dan dirancang secara khusus untuk menggambarkan suatu struktur bertingkat guna memahami fungsi dari modul-modul suatu sistem. Dengan menggunakan diagram HIPO kita dapat melihat bagaimana input dipindah ke dalam output. 3.3.1.1 HIPO (Hierarcy plus Input Process Output) Bagan HIPO (Hierarchy plus Input Process Output) yang dirancang berikut ini digunakan untuk mengetahui struktur sistem yang akan dibangun. Dengan menggunakan HIPO, akan diketahui struktur program induk dan program yang lebih rinci, yang terdiri dari berbagai bagian aplikasi. HIPO memiliki tujuan utama sebagai berikut : 1. Untuk memberikan struktur yang memungkinkan fungsi sistem dimengerti. 2. Untuk menguraikan fungsi-fungsi yang akan dikerjakan oleh suatu program, bukan mengkhususkan pernyataan program yang dipakai untuk melaksanakan fungsi. 3. Untuk memberikan deskripsi visual dari input yang akan dipakai serta output yang akan dihasilkan oleh masing-masing fungsi pada tiap-tiap tingkat diagram.
23 HIPO menggunakan tiga macam diagram untuk masing-masing tingkatannya, yaitu : 1. Visual Table of Contents (VTOC). Diagram ini menggambarkan hubungan dari modul-modul dalam suatu sistem secara berjenjang. 2. Overview Diagrams (OD). Diagram ini digunakan untuk menunjukkan secara garis besar hubungan dari input, proses dan output. 3. Detail Diagrams (DD). Detail Diagrams berisi elemen-elemen dasar dari paket yang menggambarkan secara rinci kerja dari fungsi atau modul. 3.3.1.2 Hirarki Proses Aplikasi Gambar 3.1 VTOC Proses Aplikasi
24 Berikut adalah penjelasan dari masing - masing menu utama serta sub sub menu dari menu utama yang ada pada aplikasi ini : 1. HALAMAN OPENING Merupakan halaman pertama bila membuka aplikasi ini. 2. HALAMAN HOME 0.0 Merupakan halaman utama dari aplikasi ini. Halaman ini berisi 5 tombol, yaitu 3 pilihan menu, 1 tombol fullscreen dan 1 tombol keluar. 3. HALAMAN PETA KOTA CILACAP 1.0 Merupakan halaman peta administratif kota Cilacap yang ditampilkan secara digital. Halaman ini berisi 3 tombol, yaitu 1 tombol untuk kembali ke menu utama, dan 2 tombol yang berfungsi untuk zoom in dan zoom out. 4. HALAMAN PETA INTERAKTIF 2.0 Merupakan halaman peta digital kota Cilacap dan link menuju menu lokasi wisata, lokasi penginapan, lokasi restaurant, dan lokasi sarana publik. Halaman ini berisi 7 tombol, 4 tombol pilihan lokasi yang diinginkan, 1 tombol untuk kembali ke menu utama, dan 2 tombol yang berfungsi untuk zoom in dan zoom out. 5. HALAMAN MENU LOKASI TEMPAT WISATA 2.1 Merupakan halaman lokasi tempat wisata. Halaman ini berisi 4 tombol pilihan, 2 tombol zoom in dan zoom out, dan 1 tombol untuk kembali ke menu utama. 6. HALAMAN LOKASI TEMPAT WISATA 2.1.1 Merupakan halaman lokasi tempat wisata yang berisi peta digital kota Cilacap yang dilengkapi icon-icon tempat wisata sesuai dengan lokasinya, bila user mendekatkan cursor maka akan muncul nama tempat, dan bila mengklik pada kolom deskripsi maka akan tampil deskripsi singkat tempat wisata tersebut.
25 7. HALAMAN MENU LOKASI HOTEL 2.2 Merupakan halaman lokasi hotel. Halaman ini berisi 4 tombol pilihan, 2 tombol zoom in dan zoom out, dan 1 tombol untuk kembali ke menu utama. 8. HALAMAN LOKASI HOTEL 2.2.1 Merupakan halaman lokasi hotel yang berisi peta digital kota Cilacap yang dilengkapi icon-icon tempat wisata sesuai dengan lokasinya, bila user mendekatkan cursor maka akan muncul nama tempat, dan bila mengklik pada kolom deskripsi maka akan tampil deskripsi singkat hotel tersebut. 9. HALAMAN MENU LOKASI RESTAURANT 2.3 Merupakan halaman lokasi restaurant. Halaman ini berisi 4 tombol pilihan, 2 tombol zoom in dan zoom out, dan 1 tombol untuk kembali ke menu utama. 10. HALAMAN LOKASI RESTAURANT 2.3.1 Merupakan halaman restaurant wisata yang berisi peta digital kota Cilacap yang dilengkapi icon-icon tempat wisata sesuai dengan lokasinya, bila user mendekatkan cursor maka akan muncul nama tempat, dan bila mengklik pada kolom deskripsi maka akan tampil deskripsi singkat restaurant tersebut. 11. HALAMAN MENU LOKASI SARANA PUBLIK 2.4 Merupakan halaman lokasi sarana publik. Halaman ini berisi 4 tombol pilihan, 2 tombol zoom in dan zoom out, dan 1 tombol untuk kembali ke menu utama. 12. HALAMAN INFORMASI KOTA CILACAP 3.0 Merupakan halaman tentang informasi umum sekilas mengenai kota Cilacap. Halaman ini berisi beberapa tombol tentang informasi umum kota Cilacap yang dapat dipilih untuk mengetahui informasi tersebut, dan 1 tombol kembali ke menu utama
26 Dari hirarki proses aplikasi tersebut ( Gambar 3.1 ) dapat diketahui bahwa halaman utama yang akan dikunjungi ketika user memulai aplikasi ini adalah halaman opening. Halaman opening ini berisi animasi pembuka sebelum user memasuki halaman home. Setelah animasi selesai diputar maka akan muncul halaman home. Pada halaman home ini terdapat tujuh menu yang dapat diakses apabila ingin menuju ke bagian sub menu dari menu-menu tersebut. 3.3.1.3 Hirarki Proses Halaman Home Halaman home merupakan merupakan menu utama dalam aplikasi ini. Dihalaman ini user dapat memilih ketujuh menu yang di tawarkan pada menu utama. Setelah user memilih salah satu dari ketujuh sub menu tersebut, sistem akan memulai proses untuk menuju kehalaman sub menu yang dipilih oleh user tersebut. Gambar 3.2 VTOC Proses Halaman Home Tabel 3.1 Overview dan Detail Diagram Home Halaman Input Process Output Home Sub Menu yang dipilih. Memutar suara back sound. Membaca sub menu yang dipilih Menuju halaman sub menu yang dipilih Halaman sub menu yang dipilih. Back sound.
27 3.3.1.4 Hirarki Proses Halaman Peta Interaktif Gambar 3.3 VTOC Proses Halaman Peta Interaktif Tabel 3.2 Overview dan Detail Diagram Halaman Peta Interaktif Halaman Input Process Output Peta Sub menu Peta Interaktif Interaktif yang dipilih Membaca sub menu Peta Interaktif yang dipilih Menuju halaman yang dipilih. Memutar Back sound Halaman sub menu Peta Interaktif yang dipilih. Back sound. 3.3.1.5 Hirarki Proses Menu Lokasi Tempat Wisata Gambar 3.4 VTOC Proses Menu Lokasi Tempat Wisata
28 Tabel 3.3 Overview dan Detail Diagram Menu Lokasi Tempat Wisata Halaman Input Process Output Menu Lokasi Tempat Pariwisata Sub menu lokasi tempat pariwisata Membaca sub menu lokasi tempat pariwisata yang dipilih. Memutar Back sound Lokasi tempat wisata yang diinginkan Deskripsi tempat pariwisata Halaman sub menu lokasi tempat pariwisata yang dipilih. Lokasi tempat wisata Deskripsi tempat wisata Back sound. 3.3.1.6 Hirarki Proses Menu Lokasi Hotel Gambar 3.5 VTOC Proses Menu Lokasi Hotel Tabel 3.4 Overview dan Detail Diagram Menu Lokasi Hotel Halaman Input Process Output Menu Lokasi Hotel Sub menu lokasi hotel Membaca sub menu lokasi hotel yang dipilih Memutar Back sound Lokasi hotel diinginkan Deskripsi hotel Halaman sub menu lokasi hotel yang dipilih. Lokasi hotel Deskripsi hotel Back sound.
29 3.3.1.7 Hirarki Proses Menu Lokasi Restaurant Gambar 3.6 VTOC Proses Menu Lokasi Restaurant Tabel 3.5 Overview dan Detail Diagram Menu Lokasi Restaurant Halaman Input Process Output Menu Lokasi Restaurant Sub menu lokasi restaurant Membaca sub menu lokasi restaurant yang dipilih Memutar Back sound Lokasi restaurant diinginkan Deskripsi restaurant Halaman sub menu lokasi hotel yang dipilih. Lokasi hotel Deskripsi hotel Back sound. 3.3.2 Perancangan Antarmuka Perancangan antarmuka (interface) merupakan bagian yang penting dalam sebuah pembangunan sistem karena antarmuka adalah bagian dimana terjadi komunikasi antar pengguna (user) dengan sistem. Antarmuka dirancang sebaik mungkin agar pengguna dapat dengan mudah memahami penggunaan sistem, sekalipun itu merupakan kali pertamanya menggunakan sistem. Antarmuka yang sulit dipahami akan menghambat pengguna untuk menggunakan sistem secara sempurna. Rancangan antarmuka digunakan untuk mempermudah dalam pembuatan program.
30 3.3.2.1 Rancangan Halaman Opening Halaman ini merupakan halaman yang tampil saat pertama kali aplikasi dijalankan. Pada halaman ini hanya menampilkan gambar intro, kemudian bila ingin menuju ke halaman selanjutnya user diharuskan menekan tombol spasi pada keyboard maupun klik kiri pada mouse. Rancangan antarmuka halaman opening dapat dilihat pada Gambar 3.7 Gambar 3.7 Rancangan Halaman Opening 3.3.2.2 Rancangan Halaman Home Halaman ini merupakan halaman utama yang tampil setelah halaman opening. Pada halaman ini user dapat memilih menu Peta Digital Kota Cilacap, Peta Interaktif, Pariwisata Cilacap, dan Informasi Kota Cilacap. Rancangan antarmuka halaman home dapat dilihat pada Gambar 3.8 Gambar 3.8 Rancangan Halaman Home
31 3.3.2.3 Rancangan Halaman Peta Digital Kabupaten Cilacap Halaman ini merupakan halaman yang berisi tentang peta digital kabupaten Cilacap. Halaman ini dibuat untuk mempermudah user mengetahui rute jalan-jalan di kota Cilacap. Rancangan antarmuka halaman peta kabupaten Cilacap dapat dilihat pada Gambar 3.9 Gambar 3.9 Rancangan Halaman Peta Digital Kabupaten Cilacap 3.3.2.4 Rancangan Halaman Peta Interaktif Halaman ini merupakan halaman yang berisi tentang peta digital interaktif dimana user dapat memilih menu pilihan lokasi tempat pariwisata, lokasi tempat penginapan/hotel, lokasi tempat makan/restaurant, dan lokasi tempat sarana publik. Rancangan antarmuka halaman peta interaktif dapat dilihat pada Gambar 3.10. Gambar 3.10 Rancangan Halaman Peta Interaktif
32 3.3.2.5 Rancangan Halaman Pariwisata Halaman ini merupakan halaman yang berisi nama-nama tempat pariwisata yang ada di Kota Cilacap beserta lokasinya. Halaman ini dibuat agar mempermudah user mengetahui letak tempat pariwisata yang akan dituju. Rancangan antarmuka halaman pariwisata dapat dilihat pada Gambar 3.11. Gambar 3.11 Rancangan Halaman Pariwisata 3.3.2.6 Rancangan Halaman Hotel Halaman ini merupakan halaman yang berisi nama-nama hotel/penginapan yang ada di Kota Cilacap beserta lokasinya. Halaman ini dibuat agar mempermudah user mengetahui letak hotel/penginapan yang akan dituju. Rancangan antarmuka halaman hotel/penginapan dapat dilihat pada Gambar 3.12. Gambar 3.12 Rancangan Halaman Hotel
33 3.3.2.7 Rancangan Halaman Restaurant Halaman ini merupakan halaman yang berisi nama-nama restaurant/tempat makan yang ada di Kota Cilacap beserta lokasinya. Halaman ini dibuat agar mempermudah user mengetahui letak restaurant/tempat makan yang akan dituju. Rancangan antarmuka halaman restaurant/tempat makan dapat dilihat pada Gambar 3.13 Gambar 3.13 Rancangan Halaman Restaurant/Tempat Makan 3.3.2.8 Rancangan Halaman Sarana Publik Halaman ini merupakan halaman yang berisi nama-nama sarana publik yang ada di Kota Cilacap beserta lokasinya. Halaman ini dibuat agar mempermudah user mengetahui letak sarana publik yang akan dituju. Rancangan antarmuka halaman sarana publik dapat dilihat pada Gambar 3.14. Gambar 3.14 Rancangan Halaman Sarana Publik
34 3.3.2.9 Rancangan Halaman Informasi Kota Cilacap Halaman ini merupakan halaman yang berisi tentang informasi sekilas kota Cilacap. Halaman ini dibuat agar user mengetahui sekilas tentang kota Cilacap. Rancangan antarmuka halaman informasi kota Cilacap dapat dilihat pada Gambar 3.15. Gambar 3.15 Rancangan Halaman Informasi Kota Cilacap 3.4 Perancangan Sistem Perancangan Sistem ini menjelaskan tentang bagaimana teknik dan tools yang digunakan dalam merancang aplikasi Peta Wisata Digital Kota Cilacap berbasis Multimedia a. Pembuatan Tampilan Dalam pembuatan tampilan disini menggunakan Adobe Photoshop CS 3. Pembuatan tampilan program menggunakan berbagai bentuk dan tools dasar yang telah disediakan, kemudian objek tersebut dapat dimodifikasi dengan penggunaan fx, filter, diperbesar atau diperkecil, menggunaan transform. Dan masih banyak tools lain yang disediakan. Berikut merupakan contoh pembuatan tampilan aplikasi Peta Wisata Digital Kota Cilacap berbasis Multimedia dapat dilihat pada gambar 3.16.
35 Gambar 3.16 Desain tampilan dengan Adobe Photoshop CS 3 b. Scripting Scripting dilakukan pada program Adobe Flash Profesional CS 3, dengan bahasa yang mudah dipahami berupa Action Script yang berisikan daftar script beserta penjelasannya dapat memberikan banyak pengetahuan dan kemudahan dalam scripting. Scripting dapat dilihat pada Gambar 3.17. Gambar 3.17 Scripting pada Adobe Flash Profesional CS 3
36 c. Animasi Agar aplikasi Peta Wisata Digital Kota Cilacap berbasis Multimedia tidak membosankan maka diberikan efek, animasi gerak pada icon atau gambar. Pembuatan animasi dapat dilihat pada gambar 3.18 Gambar 3.18 Animasi pada Adobe Flash CS 3