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
√
Mengerti Internet Mengerti Database
√
Menguasai aplikasi multimedia Komputer
√
3.3
Client
√
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 Informasi Gn. Gunung Bromo, Jelajahi dan Tips&Trik
Update Info Akomodasi
Update Info Rute Pergi ke Bromo
Update Info StaTer
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 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 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 menyimpan data akomodasi terkini.
Perubahan tersimpan.
40
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
Perubahan tersimpan.
menyimpan data rute terkini.
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 menyimpan data stasiun dan terminal terkini.
Perubahan tersimpan.
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 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.
42
Klik menu Gunung Bromo, Jelajahi,
Menu (Gunung Bromo, Jelajahi, dan
atau Tips&Trik.
Tips&Trik) menampilkan dropdown submenu masing-masing.
Klik submenu Gunung Bromo,
Menampilkan informasi.
Jelajahi, atau Tips&Trik.
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 akomodasi
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 akomodasi
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 akomodasi
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 akomodasi
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 akomodasi
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 akomodasi
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
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
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
Jelajahi
Tips&Trik
Sekilas Gn Bromo Lokasi 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
Tips&Trik
Kaldera Tengger Goa/Gunung Widodaren 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
<mobil jeep>
Gambar 3.13 Perancangan Antarmuka Animasi pada submenu Waktu Pendakian
50
Header/Logo
StaTer1
StaTer2 1
StaTer3
Home
Informasi
Pergi ke Bromo
Gambar 3.14 Perancangan Antarmuka Halaman Pergi ke Bromo2
Header/Logo
Trans1
Trans2
Trans3
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
Pergi ke Bromo
Informasi
Gunung Bromo
Jelajahi
Tips & Trik
Sekilas Gunung Bromo
Kaldera Tengger
Waktu Kunjungan
Lokasi
Goa/Gunung Widodaren
Sunrise
Masyarakat
Rute
Stasiun/Terminal
Transportasi Perlengkapan
Gunung Batok Upacara Adat
Akomodasi Gunung Pananjakan 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
Tidak
keluar
Halaman Utama
Informasi
Pergi ke Bromo
Ya Gunung Bromo
Jelajahi
Tips & Trik keluar
keluar
Tidak
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