35
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.
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:
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:
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 terkait.
Informasi tampil.
Menyimpan (save) perubahan. Update informasi.
USER
Update Info Akomodasi
Update Info Rute
Update Info StaTer
Update Info Transportasi Pergi ke Bromo Informasi Gn. Gunung Bromo, Jelajahi dan Tips&Trik Login Intro Vodeo ADMIN
Tabel 3.3 Use Case Skenario Login
IDENTIFIKASI
Nama Login
Deskripsi Proses untuk masuk halaman admin.
Aktor Admin
Pre-condition Aktor mengakses halaman admin.
Post-condition User name dan password dikenali.
SKENARIO
Aksi Aktor Reaksi Sistem
Mengisi form login Verifikasi user name dan password. Tampil pilihan menu yang akan di-update.
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
menyimpan data akomodasi terkini.
Tabel 3.5 Use Case Skenario Update Info Rute
IDENTIFIKASI
Nama Update info Rute.
Deskripsi Proses tambah, edit dan delete.
Aktor Admin
Pre-condition Data rute terkini.
Post-condition Update data rute.
SKENARIO
Aksi Aktor Reaksi Sistem
Aktor memilih menu Rute. Menyediakan menu tambah, edit, dan delete data rute terikini.
Aktor menambah, edit dan menyimpan data rute terkini.
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 Terminal.
Menyediakan menu tambah, edit, dan delete data stasiun dan terminal terikini
Aktor menambah, edit dan
menyimpan data stasiun dan terminal terkini.
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
menyimpan data transportasi terkini.
Perubahan tersimpan.
Tabel 3.8 Use Case Skenario Info Gunung Bromo, Jelajahi, dan Tips&Trik
IDENTIFIKASI
Nama Informasi Gunung Bromo.
Deskripsi Melihat informasi umum tentang Gunung Bromo, Jelajahi, dan Tips&Trik.
Aktor User
Pre-condition Admin telah melakukan update
informasi Gunung Bromo, Jelajahi, dan Tips&Trik.
Post-condition Memulai melihat informasi Gunung Bromo, Jelajahi, dan Tips&Trik.
SKENARIO
Aksi Aktor Reaksi Sistem
Mengakses aplikasi Menampilkan halaman intro video. Klik tombil Skip Intro Masuk ke halaman utama.
Klik menu Gunung Bromo, Jelajahi, atau Tips&Trik.
Menu (Gunung Bromo, Jelajahi, dan Tips&Trik) menampilkan dropdown submenu masing-masing.
Klik submenu Gunung Bromo, Jelajahi, atau Tips&Trik.
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.
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.
Gambar 3.2 Sequence Diagram Update Info Akomodasi
Gambar 3.3 Sequence Diagram Update Info Akomodasi
Aplikasi Data
1 : Buka Aplikasi 2 : Display awal Aplikasi
3 : Pilih Rute 4 : Display data rute
6 : Update Data 5 : Update Data Rute
(add dan edit)
7 : Display Update Berhasil akomodasi
ADMIN
Aplikasi Data
1 : Buka Aplikasi 2 : Display awal Aplikasi
3 : Pilih Akomodasi 4 : Display data akomodasi
6 : Update Data 5 : Update Data komodasi
(add dan edit)
7 : Display Update Berhasil akomodasi
Gambar 3.4 Sequence Diagram Update Info StaTer
Gambar 3.5 Sequence Diagram Update Info Transportasi
Aplikasi Data
1 : Buka Aplikasi 2 : Display awal Aplikasi
3 : Pilih Transportasi 4 : Display data transportasi
6 : Update Data 5 : Update Data Transportasi
(add dan edit)
7 : Display Update Berhasil akomodasi
ADMIN
Aplikasi Data
1 : Buka Aplikasi 2 : Display awal Aplikasi
3 : Pilih Stasiun/Terminal 4 : Display data stasiun/terminal
6 : Update Data 5 : Update Data Stasiun/terminal
(add dan edit)
7 : Display Update Berhasil akomodasi
Gambar 3.6 Sequence Diagram Informasi Gunung Bromo, Jelajahi dan Tips & Trik
Gambar 3.7 Sequence Diagram Pergi ke Bromo
Aplikasi Data
1 : Buka Aplikasi 2 : Display awal Aplikasi
3 : Skip Intro 4 : Display Menu Utama
6 : Kirim Data 5 : Request Data Pergi ke
Bromo 7 : Display Informasi akomodasi USER Aplikasi Data 1 : Buka Aplikasi 2 : Display awal Aplikasi
3 : Skip Intro 4 : Display Menu Utama
6 : Kirim Data 5 : Request Data Informasi
7 : Display Informasi akomodasi USER
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.
Gambar 3.8 Perancangan Antarmuka Halaman Intro Video video
Tombol skip Header/Logo
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.
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
<Background Gunung Bromo>
Informasi Header/Logo Pergi ke Bromo Home Jelajahi Tips&Trik Gn.Bromo
<Background Gunung Bromo>
Informasi
Header/Logo
Pergi ke Bromo Narator
3 Masyarakat 4 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
Gambar 3.11 Perancangan Tampilan Dropdown Menu pada Menu Jelajahi
Tips & Trik
1 Waktu Kunjungan 2 Waktu Pendakian 3 Perlengkapan 4 Akomodasi Jelajahi Tips&Trik Gn.Bromo Kaldera Tengger Goa/Gunung Widodaren Gunung Batok Gunung Pananjakan Jelajahi Tips&Trik Gn.Bromo Sekilas Gn Bromo Lokasi Masyarakat Upacara Adat
5 Kuliner
Gambar 3.12 Perancangan Tampilan Dropdown Menu pada Menu Tips &Trik
Gambar 3.12 Perancangan Tampilan Dropdown Menu pada Menu Tips &Trik
Gambar 3.13 Perancangan Antarmuka Animasi pada submenu Waktu Pendakian
<background hotel>
<kuda> <mobil jeep>
<background kaki gunung> <background puncak gunung> <kuda> Jelajahi Tips&Trik Gn.Bromo Waktu Kunjungan Waktu Pendakian Perlengkapan Akomodasi Jelajahi Tips&Trik Gn.Bromo Waktu Kunjungan Waktu Pendakian Perlengkapan Akomodasi
Gambar 3.14 Perancangan Antarmuka Halaman Pergi ke Bromo2
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.
<Background Gunung Bromo> Informasi Header/Logo Pergi ke Bromo Home Trans2 Trans3 Trans1
<Background Gunung Bromo>
Informasi Header/Logo Pergi ke Bromo Home StaTer2 1 StaTer3 StaTer1
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.
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.
Informasi
Menu Utama
Pergi ke Bromo
Jelajahi Tips & Trik Gunung Bromo Sekilas Gunung Bromo Lokasi Masyarakat Upacara Adat Kaldera Tengger Goa/Gunung Widodaren Gunung Batok Gunung Pananjakan Waktu Kunjungan Sunrise Perlengkapan Akomodasi Kuliner Rute Stasiun/Terminal Transportasi
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
Informasi Pergi ke Bromo
Gunung Bromo Jelajahi Tips & Trik Halaman Utama Intro Ya Tidak keluar Keluar keluar Ya Tidak keluar Ya Tidak
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.
