BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Analisa adalah suatu tahap pemahaman terhadap aplikasi yang dibuat atau dapat juga didefinisikan sebagai penguraian dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud untuk mengidentifikasi dan mengevaluasi masalah-masalah, hambatan-hambatan yang terjadi serta kebutuhan yang diharapkan sehingga dapat dilakukan perbaikan. Pada tahap ini bertujuan untuk mengetahui mekanisme hubungan antar proses dalam aplikasi ini, sebelum dilakukan perancangan terhadap sistem yang akan dibuat. 3.1.1 Analisis Masalah Analisis merupakan tahap awal pembuatan Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi. Analisis ini bertujuan untuk mengetahui hal-hal yang diperlukan dalam pembuatan aplikasi ini sehingga dapat dijadikan acuan teknis dalam perancangannya. Analisis kebutuhan merupakan tahap identifikasi terhadap pengguna. 3.1.2 Deskripsi Umum Aplikasi Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi ini memungkinkan pengguna mendapatkan informasi secara umum tentang objek wisata Gunung Bromo dan informasi pilihan rute perjalanan termasuk transportasi dan akomodasinya. 3.2 Analisis Kebutuhan Non Fungsional Analisis kebutuhan non fungsional dilakukan untuk mengetahui spesifikasi kebutuhan untuk sistem. Spesifikasi kebutuhan melibatkan analisis perangkat keras/hardware, analisis perangkat lunak/software, analisis pengguna/user. 35
36 3.2.1 Analisis Perangkat Keras/Hardware Perangkat keras/hardware yang digunakan mulai dari perancangan sampai dengan implementasi aplikasi multimedia ini adalah sebagai berikut: 1 Processor : Intel Pentium IV 3.00 GHz2. DDR2 1 GB 2 RAM : DDR2 1 GB 3 Harddisk : 80GB 4 Layar Monitor : Resolusi 1024 x 768 5 Audio : Speaker 6 Pointing Device : Mouse dan Keyboard 3.2.2 Analisis Perangkat Lunak/Software Perangkat lunak/software yang digunakan mulai dari perancangan sampai dengan implementasi aplikasi multimedia ini adalah sebagai berikut: 1 Operating System : Intel Pentium IV 3.00 GHz2. DDR2 1 GB 2 Web Browser : Mozilla Firefox 3.6, Google Chrome 8.0, Safari 4.0, Opera 10.0, Internet Explorer 9.0 3 Code Editor : Notepad ++ 4 Web Server : WampServer Version 2.0 5 Database : MySQL 6 Aplikasi Desain : Adobe Creative Suite CS3(Adobe Photoshop CS3, dan Adobe Flash CS3) 3.2.3 Analisis Pengguna/User Untuk menggunakan aplikasi multimedia ini dibutuhkan spesifikasi user yang dapat menjalankan aplikasi ini, dalam hal ini user tersebut terdiri dari client sebagai orang yang mengakses informasi, maupun administrator yang melakukan maintenance aplikasi ini dari segi update data informasi. Hal tersebut dimaksudkan agar optimalisasi sistem Adapun spesifikasi user yang dibutuhkan:
37 Tabel 3.1 Spesifikasi User Syarat Admin Client Mengerti Internet Mengerti Database Menguasai aplikasi multimedia Komputer 3.3 Analisis Kebutuhan Fungsional Aplikasi akan dimodelkan prosesnya menggunakan Activity Diagram, Use Case Diagram, Squence Diagram dan Class Diagram, penjelasannya sebagai berikut: 3.3.1 Activity Diagram Activity Diagram adalah diagram yang menggambarkan sequence dari aktivitas-aktivitas dalam sebuah proses, termasuk sekuensial dan paralel aktivitas, dan tujuan yang telah dibuat. Activity diagram pada Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi ini dibuat untuk memperlihatkan perbedaan skenario-skenario yang memungkinkan. 3.3.2 Use Case Diagram Use Case Diagram menjelaskan sistem secara fungsional yang terlihat user dalam hal informasi yang disediakan oleh sistem tersebut dan administrator dalam manajemen data informasi tersebut. Pada Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi ini, Use Case berisi proses-proses yang ada dalam aplikasi tersebut, antara lain skenario- skenario sistem yang dapat diidentifikasi dari aktor yang menjalankan skenario tersebut hingga detail tahapan yang dilakukan actor tersbut sampai scenario terhadapp sistem berhasil. Skenario dari use case pada Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi ini, akan dijelaskan lewat tabel berikut:
38 Login Intro Vodeo ADMIN USER Update Info Akomodasi Update Info Rute Update Info StaTer Informasi Gn. Gunung Bromo, Jelajahi dan Tips&Trik Pergi ke Bromo Update Info Transportasi Gambar 3.1 Use Case Diagram Tabel 3.2 Use Case Skenario Update Informasi Gn. Bromo, Jelajahi dan Tips&Trik IDENTIFIKASI Nama Update Informasi Gn. Bromo, Jelajahi dan Tips&Trik. Deskripsi Proses update Informasi Gn. Bromo, Jelajahi dan Tips&Trik. Aktor Admin Pre-condition Aktor membuka source aplikasi. Post-condition Proses update informasi dilakukan. SKENARIO Aksi Aktor Reaksi Sistem Masuk kedalam movie clip berisi Informasi tampil. informasi terkait. Menyimpan (save) perubahan. Update informasi.
39 Tabel 3.3 Use Case Skenario Login Nama Deskripsi Aktor Pre-condition Post-condition Aksi Aktor Mengisi form login IDENTIFIKASI Login Proses untuk masuk halaman admin. Admin Aktor mengakses halaman admin. User name dan password dikenali. SKENARIO Reaksi Sistem Verifikasi user name dan password. Tampil pilihan menu yang akan diupdate. Tabel 3.4 Use Case Skenario Update info Akomodasi IDENTIFIKASI Nama Update info Akomodasi. Deskripsi Proses tambah, edit dan delete. Aktor Admin Pre-condition Data akomodasi terkini. Post-condition Update data akomodasi. SKENARIO Aksi Aktor Reaksi Sistem Aktor memilih menu akomodasi. Menyediakan menu tambah, edit, dan delete data akomodasi terikini. Aktor menambah, edit dan Perubahan tersimpan. menyimpan data akomodasi terkini.
40 Tabel 3.5 Use Case Skenario Update Info Rute Nama Deskripsi Aktor Pre-condition Post-condition Aksi Aktor Aktor memilih menu Rute. Aktor menambah, edit dan menyimpan data rute terkini. IDENTIFIKASI Update info Rute. Proses tambah, edit dan delete. Admin Data rute terkini. Update data rute. SKENARIO Reaksi Sistem Menyediakan menu tambah, edit, dan delete data rute terikini. Perubahan tersimpan. Tabel 3.6 Use Case Skenario Update info StaTer IDENTIFIKASI Nama Update info StaTer. Deskripsi Proses tambah, edit dan delete. Aktor Admin Pre-condition Data stasiun dan terminal terkini. Post-condition Update data stasiun dan terminal. SKENARIO Aksi Aktor Reaksi Sistem Aktor memilih menu Stasiun dan Menyediakan menu tambah, edit, dan Terminal. delete data stasiun dan terminal terikini Aktor menambah, edit dan Perubahan tersimpan. menyimpan data stasiun dan terminal terkini.
41 Tabel 3.7 Use Case Skenario Update info Transportasi IDENTIFIKASI Nama Update info Transportasi. Deskripsi Proses tambah, edit dan delete. Aktor Admin Pre-condition Data transportasi terkini. Post-condition Update data transportasi. SKENARIO Aksi Aktor Reaksi Sistem Aktor memilih menu Transportasi. Menyediakan menu tambah, edit, dan delete data transportasi terikini. Aktor menambah, edit dan Perubahan tersimpan. menyimpan data transportasi terkini. Tabel 3.8 Use Case Skenario Info Gunung Bromo, Jelajahi, dan Tips&Trik Nama Deskripsi Aktor Pre-condition Post-condition Aksi Aktor Mengakses aplikasi Klik tombil Skip Intro IDENTIFIKASI Informasi Gunung Bromo. Melihat informasi umum tentang Gunung Bromo, Jelajahi, dan Tips&Trik. User Admin telah melakukan update informasi Gunung Bromo, Jelajahi, dan Tips&Trik. Memulai melihat informasi Gunung Bromo, Jelajahi, dan Tips&Trik. SKENARIO Reaksi Sistem Menampilkan halaman intro video. Masuk ke halaman utama.
42 Klik menu Gunung Bromo, Jelajahi, atau Tips&Trik. Klik submenu Gunung Bromo, Jelajahi, atau Tips&Trik. Menu (Gunung Bromo, Jelajahi, dan Tips&Trik) menampilkan dropdown submenu masing-masing. Menampilkan informasi. Tabel 3.9 Use Case Skenario Pergi ke Bromo IDENTIFIKASI Nama Pergi ke Bromo Deskripsi Melihat rute, Stasiun/terminal dari rute terpilih dan meliahat transportasi yang tersedia di stasiun/terminal terpilih tersebut. Aktor User Pre-condition Admin telah melakukan update informasi rute, stasiun atau terminal, dan transportasi. Post-condition Memulai melihat informasi rute, stasiun atau terminal, dan transportasi. SKENARIO Aksi Aktor Reaksi Sistem Mengakses aplikasi Menampilkan halaman intro video Klik tombil Skip Intro Masuk ke halaman utama Klik menu Pergi ke Bromo Menampilkan informasi rute keberangkatan yang tersedia. Klik salah satu rute Menampilkan informasi stasiun atau terminal yang tersedia di rute tersebut. Klik salah satu stasiun atau terminal Menampilkan informasi transportasi yang tersedia di stasiun atau terminal tersebut.
43 3.3.3 Sequence Diagram Sequence Diagram bisa memperlihatkan sebuah ilustrasi yang sukses dari interaksi-interaksi class atau objek. Sequence diagram digunakan untuk mengilustrasikan proses-proses dalam usecase skenario. Aplikasi Data ADMIN 1 : Buka Aplikasi 2 : Display awal Aplikasi 3 : Pilih Akomodasi 4 : Display data akomodasi 5 : Update Data komodasi (add dan edit) 6 : Update Data 7 : Display Update Berhasil Gambar 3.2 Sequence Diagram Update Info Akomodasi Aplikasi Data ADMIN 1 : Buka Aplikasi 2 : Display awal Aplikasi 3 : Pilih Rute 4 : Display data rute 5 : Update Data Rute (add dan edit) 6 : Update Data 7 : Display Update Berhasil Gambar 3.3 Sequence Diagram Update Info Akomodasi
44 Aplikasi Data ADMIN 1 : Buka Aplikasi 2 : Display awal Aplikasi 3 : Pilih Stasiun/Terminal 4 : Display data stasiun/terminal 5 : Update Data Stasiun/terminal (add dan edit) 6 : Update Data 7 : Display Update Berhasil Gambar 3.4 Sequence Diagram Update Info StaTer Aplikasi Data ADMIN 1 : Buka Aplikasi 2 : Display awal Aplikasi 3 : Pilih Transportasi 4 : Display data transportasi 5 : Update Data Transportasi (add dan edit) 6 : Update Data 7 : Display Update Berhasil Gambar 3.5 Sequence Diagram Update Info Transportasi
45 Aplikasi Data USER 1 : Buka Aplikasi 2 : Display awal Aplikasi 3 : Skip Intro 4 : Display Menu Utama 5 : Request Data Informasi 6 : Kirim Data 7 : Display Informasi Gambar 3.6 Sequence Diagram Informasi Gunung Bromo, Jelajahi dan Tips & Trik Aplikasi Data USER 1 : Buka Aplikasi 2 : Display awal Aplikasi 3 : Skip Intro 4 : Display Menu Utama 5 : Request Data Pergi ke Bromo 6 : Kirim Data 7 : Display Informasi Gambar 3.7 Sequence Diagram Pergi ke Bromo
46 3.3.4 Class Diagram Class Diagram adalah sebuah spesifikasi yang jika diinstansiasi akan menghasilkan sebuah objek dan merupakan inti dari pengembangan desain berorientasi objek. Class menggambarkan keadaan (atribut/properti) suatu sistem, sekaligus menawarkan layanan untuk memanipulasi keadaan tersebut (metode/fungsi). 3.4 Perancangan Sistem Perancangan dimulai setelah tahap analisis terhadap sistem selesai dilakukan. Perancangan dapat didefinisikan sebagai proses aplikasi dengan berbagai teknik dan prinsip bagi tujuan pendefinisian atau detail yang memadai untuk memungkinkan realisasi fisiknya. Perancangan digambarkan sebagai proses beberapa langkah dengan struktur program, dan karekteristik antarmuka dalam penyajian informasi aplikasi wisata Gunung Bromo ini. 3.6.1 Perancangan Antarmuka Perancangan tampilan Aplikasi Penyebaran Informasi Wisata Gunung Bromo ini menampilkan informasi yang dibutuhkan wisatawan dalam mencari informasi umum tentang Gunung Bromo serta rute, stasiun/terminal dan transportasi menuju Gunung Bromo. Informasi yang disajikan dirancang seinteraktif mungkin dan memudahkan pengguna dalam menggunakannya. Berikut ini adalah rangcangan tampilan aplikasinya. Header/Logo video Tombol skip Gambar 3.8 Perancangan Antarmuka Halaman Intro Video
47 Header/Logo <Background Gunung Bromo> Narator Informasi Pergi ke Bromo Gambar 3.9 Perancangan Antarmuka Halaman Utama Pada saat pertama mengakses aplikasi ini, akan tampil menu intro berupa video yang isi nya pemandangan Gunung Bromo pada saat matahari terbit. User dapat abaikan intro video tersebut dan langsung menuju halaman utama dengan menekan tombol Skip Intro, maka akan muncul animasi berupa transisi menuju halaman utama dari aplikasi ini seperti yang ditunjukan oleh Gambar 3.9. Header/Logo Gn.Bromo Jelajahi Tips&Trik <Background Gunung Bromo> Home Informasi Pergi ke Bromo Gambar 3.9 Perancangan Antarmuka Halaman Informasi Menu informasi berisi tiga menu utama lagi, yaitu Gunung Bromo, Jelajahi, dan Tips & Trik. Tiga menu tersebut memiliki submenu. Submenu tersebut berbentuk dropdown pada saat mouse melakukan rollover pada salah satu dari tiga menu tersebut. Submenu tersebut antara lain: Menu Gunung Bromo 1 Sekilas Gunung Bromo 2 Lokasi
48 3 Masyarakat 4 Upacara Adat Gn.Bromo Sekilas Gn Bromo Lokasi Jelajahi Tips&Trik Masyarakat Upacara Adat Gambar 3.10 Perancangan Tampilan Dropdown Menu pada Menu Gunung Bromo Jelajahi 1 Kaldera Tengger 2 Goa/Gunung Widodaren 3 Gunung Batok 4 Gunung Pananjakan Gn.Bromo Jelajahi Kaldera Tengger Goa/Gunung Widodaren Tips&Trik Gunung Batok Gunung Pananjakan Gambar 3.11 Perancangan Tampilan Dropdown Menu pada Menu Jelajahi Tips & Trik 1 Waktu Kunjungan 2 Waktu Pendakian 3 Perlengkapan 4 Akomodasi
49 5 Kuliner Gn.Bromo Jelajahi Tips&Trik Waktu Kunjungan Waktu Pendakian Perlengkapan Akomodasi Gambar 3.12 Perancangan Tampilan Dropdown Menu pada Menu Tips &Trik Gn.Bromo Jelajahi Tips&Trik Waktu Kunjungan Waktu Pendakian Perlengkapan Akomodasi Gambar 3.12 Perancangan Tampilan Dropdown Menu pada Menu Tips &Trik <background hotel> <background kaki gunung> <background puncak gunung> <kuda> <mobil jeep> <kuda> Gambar 3.13 Perancangan Antarmuka Animasi pada submenu Waktu Pendakian
50 Header/Logo StaTer1 StaTer2 1 StaTer3 <Background Gunung Bromo> Home Informasi Pergi ke Bromo Gambar 3.14 Perancangan Antarmuka Halaman Pergi ke Bromo2 Header/Logo Trans1 Trans2 Trans3 <Background Gunung Bromo> Home Informasi Pergi ke Bromo Gambar 3.15 Perancangan Antarmuka Halaman Pergi ke Bromo3 Menu Pergi ke Bromo berisi informasi rute pada saat pertama kali kita mengaksesnya, selanjutnya akan tampil informasi stasiun dan terminal berdasarkan rute yang telah kita pilih tersebut, dilanjutkan dengan informasi transportasi yang tersedia bedasarkan stasiun atau terminal yang dipilih. Pada tampilan informasi terakhir yaitu transportasi berdasarkan stasiun atau terminal yang kita pilih, makan akan ditampilkan pula detail tentang transportasi tersebut, seperti nama kereta atau bus, harga dan transportasi lanjutan sesampainya di stasiun pemberhentian sesuai dengan rute yang telah dipilih pada awal mengakses menu ini.
51 3.6.2 Struktur Menu Berikut ini adalah rancangan menu yang terstruktur membentuk suatu navigasi antar menu tersebut. Navigasi tersebut selanjutnya akan menjadi acuan pada saat implementasi Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi ini. Menu Utama Informasi Pergi ke Bromo Gunung Bromo Jelajahi Tips & Trik Rute Sekilas Gunung Bromo Kaldera Tengger Waktu Kunjungan Stasiun/Terminal Lokasi Goa/Gunung Widodaren Sunrise Transportasi Masyarakat Gunung Batok Perlengkapan Upacara Adat Gunung Pananjakan Akomodasi Kuliner Gambar 3.12 Perancangan Menu 3.5 Flowchart Pembuatan flowchart dilakukan untuk memberikan acuan sehingga tedapat gambaran terhadap terhadap navigasi yang ada pada Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi ini. Berikut ini adalah flowchart aplikasi pada Aplikasi Penyebaran Informasi Wisata Gunung Bromo Berbasis Animasi.
52 Intro keluar Tidak Halaman Utama Informasi Pergi ke Bromo Ya Gunung Bromo Jelajahi Tips & Trik keluar Tidak keluar Tidak Ya Ya Keluar Gambar 3.13 Flowchart Aplikasi 3.6 Koneksi Flash dengan MySQL via PHP Koneksi database MySQL dengan pada aplikasi Adobe Flash memerlukan PHP sebagai penghubungnya. PHP melakukan inisialisasi data mulai dari query dari database yang ada hingga menggenerate sutau sintak XML yang selanjutnya XML tersebut dikenali oleh Flash teresbut berupa node-node sebagai representasi tag XML tersebut. Gambar 3.14 Ilustrasi Koneksi Adobe Flash terhadap Database MySQL
53 3.6.1 PHP dalam Koneksi Adobe Flash terhadap MySQL PHP diperlukan dalam melakukan koneksi terhadap database MySQL. PHP menyediakan fungsi yang didalamnya terjadi proses query, generate XML, juga menjadi server untuk proses permintaan data dari Flash. Gambar 3.15 Salah Satu Tabel dari Database Bromotrip Gambar 3.16 (Kiri) Fungsi pada PHP, (Kanan) Server 3.6.2 Adobe Flash meminta data dari Proses PHP PHP melakukan inisialisasi data mulai dari query dari database yang ada hingga menggenerate sutau sintak XML yang selanjutnya XML tersebut dikenali oleh Flash teresbut berupa node-node sebagai representasi tag XML tersebut. Gambar 3.17 Sintak Proses Meminta Data dari Fungsi yang Ada di PHP