3.2 Perancangan Sistem
3.2.1 Rancangan Hirarki Menu 1) Aplikasi User
Pada Gambar 3.28 menggambarkan hirarki menu utama dimana terdapat dua menu utama, yaitu :
a. Produk. b. Perusahaan.
diperlihatkan animasi awal yang berfungsi sebagai intro pembukaan yang menggambarkan tentang Ancol secara keseluruhan.
Gambar 3.28 Hirarki Menu Utama Front-End
Gambar 3.29 Hirarki Menu Perusahaan Animasi Awal (Intro) Menu Utama Produk Perusahaan Perusahaan Sejarah
Inovasi / Kebijakan Kegiatan Sosial
Tentang Perusahaan Peristiwa
Gambar 3.30 Hirarki Menu Produk Produk Resor Perumahan Pencarian Bowling Ancol Padang Golf Hailai Gondola Ancol Taman dan Pantai
Pasar Seni Putri Duyung Marina Pulau Bidadari Puri Jimbaran Puri Jimbaran 2 Marina Coast Royal Residence
Puri Nusa Dua Tugu Permai Lain-lain Fasilitas
Gambar 3.31 Hirarki Menu Admin Login Home Edit Sejarah Edit Inovasi / Kebijakan Edit Peristiwa Edit Kegiatan Sosial Edit Tentang Perusahaan Edit Dunia Fantasi Edit Atlantis Water Adventure
Edit The Lost Kingdom Edit Bowling Ancol Edit Padang Golf Edit Hailai Edit Gondola Ancol Edit Taman dan Pantai
Edit Pasar Seni
Edit Putri Duyung Edit Marina Edit Pulau Bidadari Edit Puri Jimbaran Edit Puri Jimbaran II
Edit Marina Coast Royal Residence Edit Puri Nusa Dua Edit Tugu Permai Edit Fasilitas
Gambar 3.32 State Transition Diagram untuk Layar Menu Utama
Gambar 3.32 menggambarkan jalannya perubahan layar dari aplikasi mulai dijalankan. STD tersebut akan dilanjutkan dengan STD lainnya yang menggambarkan jalannya perubahan layar. Untuk halaman ini, dimulai dari Layar Intro yang kemudian dihubungkan dengan Layar Halaman Menu Utama dengan meng-klik SKIP untuk langsung terhubung dengan Layar Halaman Menu Utama, atau dapat juga menunggu hingga animasi Intro selesai. Pada Layar Halaman Menu Utama terdapat menu Produk yang menghubungkan kepada Layar Produk dan menu Perusahaan yang menghubungkan kepada Layar Perusahaan. Apabila tidak terjadi suatu action dari user selama 5 menit,
Menu Utama
Produk Intro
Perusahaan
Pilih halaman Produk Tampilkan produk
Pilih halaman Menu Utama Tampilkan menu utama Pilih halaman Perusahaan
Tampilkan perusahaan
Tampilkan screen saver
Selama tidak aktif Tampilkan screen saver
Skip Tampilkan
Menu Utama
Pilih halaman Menu Utama Tampilkan menu utama
b) STD Layar Menu Produk
Gambar 3.33 State Transition Diagram untuk Layar Produk
Pada Gambar 3.33 menjelaskan tentang STD pada menu Produk. Dalam menu produk ini terdapat tiga sub menu yaitu Rekreasi, Resor, Perumahan, dan Lain-lain. Sub-sub menu pada STD tersebut tidak digambarkan secara keseluruhan karena keterbatasan ruang gambar,
Menu Utama Produk Screen Saver Intro Rekreasi Resor Perumahan Pilih produk Tampilkan produk Saat aktif Tampilkan Intro
Selama tidak aktif Tampilkan screen saver
Pilih Perumahan Tampilkan isi perumahan Pilih halaman Resor
Tampilkan isi resor Pilih Rekreasi Tampilkan isi rekreasi Skip Tampilkan Menu Utama Peristiwa Pilih produk Tampilkan produk Lain-Lain Pilih Lain-Lain Tampilkan isi lain-lain
Pencarian
Pilih Pencarian Tampilkan hasil pencarian
c) STD Layar Menu Rekreasi
Gambar 3.34 State Transition Diagram untuk Layar Rekreasi
Menu Utama Intro Screen Saver
Produk Rekreasi Dunia Fantasi Atlantis Water Adventure The Lost Kingdom Sea World Bowling Ancol Padang Golf Hailai Gondola Ancol Taman dan Pantai Pasar Seni Skip Tampilkan Menu Utama Saat aktif Tampilkan Intro Pilih Produk
Tampilkan produk Selama tidak aktif
Tampilkan screen saver Pilih Menu Utama
Tampilkan menu utama
Pilih Dunia Fantasi Tampilkan dunia
fantasi
Pilih Atlantis Water Adventure Tampilkan atlantis
water adventure
Pilih The Lost Kingdom Tampilkan the lost
kingdom
Pilih Sea World Tampilkan sea world
Pilih Bowling Ancol Tampilkan bowling
Ancol
Pilih Padang Golf Tampilkan padang golf
Pilih Hailai Tampilkan hailai
Pilih Gondola Ancol Tampilkan gondola
ancol
Pilih Taman dan Pantai Tampilkan taman dan
pantai
Pilih Pasar Seni Tampilkan pasar seni
Pencarian Pilih Pencarian Tampilkan hasil pencarian
Water Adventure yang menghubungkan kepada Layar Atlantis Water Adventure, The Lost Kingdom yang menghubungkan kepada Layar The Lost Kingdom, Bowling Ancol yang menghubungkan kepada Layar Bowling Ancol, Padang Golf yang menghubungkan kepada Layar Padang Golf, Hailai yang menghubungkan kepada Layar Hailai, Gondola Ancol yang meghubungkan kepada Layar Gondola Ancol, Taman dan Pantai yang menghubungkan kepada Layar Taman dan Pantai, dan Pasar Seni yang menghubungkan kepada Layar Pasar Seni. Juga terdapat menu Pencarian yang akan menghubungkan dengan Layar Hasil Pencarian.
d) STD Layar Menu Resor
Gambar 3.35 State Transition Diagram untuk Layar Resor
Menu Utama Intro Screen Saver
Produk
Putri Duyung Marina Pulau Bidadari
Resor
Selama tidak aktif Tampilkan screen saver Pilih halaman Produk
Tampilkan produk Skip Tampilkan Menu Utama Saat aktif Tampilkan Intro Pilih Resor Tampilkan resor Pilih Menu Utama
Tampilkan menu utama
Pilih Pulau Bidadari Tampilkan pulau bidadari Pilih Marina
Tampilkan marina Pilih Putri Duyung
Tampilkan putri duyung Pilih halaman Produk
Tampilkan produk
Pencarian
Pilih Pencarian Tampilkan hasil pencarian
Pencarian yang akan menghubungkan dengan Layar Hasil Pencarian.
e) STD Layar Menu Perumahan
Gambar 3.36 State Transition Diagram untuk Layar Perumahan
Pada sub menu Perumahan terdapat lima sub menu yaitu Puri Jimbaran yang menghubungkan kepada Layar Puri Jimbaran, Puri
Menu Utama Intro Screen Saver
Produk
Perumahan
Puri Jimbaran
Marina Coast Royal Resindence
Puri Jimbaran II Tugu Permai Puri Nusa Dua
Skip Tampilkan Menu Utama
Saat aktif Tampilkan Intro
Selama tidak aktif Tampilkan screen saver
Pilih halaman Produk Tampilkan produk
Pilih Perumahan Tampilkan perumahan Pilih Menu Utama
Tampilkan menu utama
Pilih Puri Jimbaran Tampilkan puri jimbaran
Pilih Puri Jimbaran II Tampilkan puri
jimbaran II
Pilih Marina Coast Royal Residence Tampilkan marina coast royal residence
Pilih Puri Nusa Dua Tampilkan puri nusa dua
Pilih Tugu Permai Tampilkan tugu permai Pilih halaman Produk
Tampilkan produk
Pencarian
Pilih Pencarian Tampilkan hasil pencarian
Marina Coast Raya Residence, Puri Nusa Dua yang menghubungkan dengan Layar Puri Nusa Dua, dan Tugu Permai yang menghubungkan dengan Layar Tugu Permai. Pada Layar Menu Perumahan juga terdapat menu Pencarian yang akan menghubungkan dengan Layar Hasil Pencarian.
f) STD Layar Menu Lain-Lain
Gambar 3.37 State Transition Diagram untuk Layar Lain-Lain
Pada Gambar 3.37 menjelaskan tentang STD pada menu Lain-Lain. Dalam sub menu Lain-Lain ini terdapat dua sub menu yaitu sub menu Fasilitas yang menghubungkan dengan layar Fasilitas, dan sub menu Peta yang menghubungkan dengan layar Peta. Pada Layar ini juga
Menu Utama Intro Screen Saver
Lain-Lain Fasilitas
Skip Tampilkan Menu Utama
Saat aktif Tampilkan Intro
Pilih Lain-Lain Tampilkan isi lain-lain
Pilih Fasilitas Tampilkan fasilitas Pilih Menu Utama
Tampilkan Menu Utama
Selama tidak aktif Tampilkan screen saver
Pencarian Pilih Pencarian Tampilkan hasil pencarian Peta Pilih Peta Tampilkan peta
Gambar 3.38 State Transition Diagram untuk Layar Perusahaan
Pada Gambar 3.38 menjelaskan tentang STD pada menu Perusahaan. Dalam menu Perusahaan ini terdapat lima sub menu yaitu Sejarah yang menghubungkan kepada Layar Sejarah, Inovasi / Kebijakan yang menghubungkan kepada Layar Inovasi / Kebijakan, Kegiatan Sosial yang menghubungkan kepada Layar Kegiatan Sosial, Tentang perusahaan yang menghubungkan kepada Layar Tentang Perusahaan. Pada Layar Menu Perusahaan juga terdapat menu Pencarian yang akan menghubungkan dengan Layar Hasil Pencarian.
Menu Utama Intro Screen Saver
Perusahaan Sejarah Inovasi / Kebijakan Kegiatan Sosial Peristiwa Tentang Perusahaan Pilih Menu Utama
Tampilkan menu utama
Skip Tampilkan Menu Utama
Saat aktif Tampilkan Intro
Selama tidak aktif Tampilkan screensaver Pilih Perusahaan Tampilkan perusahaan Pilih Sejarah Tampilkan sejarah Pilih Perusahaan Tampilkan perusahaan Pilih Inovasi / Kebijakan Tampilkan inovasi / kebijakan
Pilih Kegiatan Sosial Tampilkan kegiatan sosial Pilih Sejarah Tampilkan sejarah Pilih Galeri Tampilkan galeri Pencarian Pilih Pencarian Tampilkan hasil pencarian
Gambar 3.39 State Transition Diagram untuk Layar Pencarian
Untuk halaman ini, terdapat menu Cari yang berfungsi untuk memulai pencarian dan menghubungkan kepada Layar Hasil Pencarian yang menampilkan hasil pencarian
Menu Utama Intro
Pencarian Hasil Pencarian
Skip Tampilkan Menu Utama
Saat aktif Tampilkan Intro
Pilih Pencarian Tampilkan Pencarian
Klik Cari Tampilkan Hasil Pencarian
Pilih Pencarian Tampilkan Pencarian Pilih Menu Utama
Tampilkan Menu Utama
Selama tidak aktif Tampilkan screen saver
Gambar 3.40 State Transition Diagram untuk Aplikasi Back-End Edit Kegiatan Sosial Edit Inovasi / Kebijakan Edit Sejarah Edit Peristiwa Edit Tentang Perusahaan Edit Dunia Fantasi Edit Atlantis Water Adventure
Edit The Lost Kingdom
Edit Sea World
Edit Bowling Ancol
Edit Padang Golf
Edit Hailai Edit Gondola Ancol Edit Taman dan Pantai Edit Pasar Seni Edit Puri Jimbaran Edit Puri Jimbaran II
Edit Marina Coast Royal Residence
Edit Puri Nusa Dua
Edit Tugu Permai Pilih Edit Sejarah
Tampilkan edit sejarah
Pilih Edit Inovasi / Kebijakan Tampilkan edit inovasi
/ kebijakan
Pilih Edit Kegiatan Sosial Tampilkan edit kegiatan
sosial Edit Putri Duyung Edit Pulau Bidadari Edit Marina
Pilih Edit Peristiwa Tampilkan edit peristiwa
Pilih Edit Tentang Perusahaan Tampilkan edit tentang
perusahaan
Pilih Edit Dunia Fantasi Tampilkan dunia fantasi
Pilih Edit Hailai Tampilkan edit hailai
Pilih Edit Pasar Seni Tampilkan edit pasar seni
Pilih Edit Atlantis Water Adventure Tampilkan edit atlantis water
adventure
Pilih Edit The Lost Kingdom Tampilkan edit the lost kingdom
Pilih Edit Sea World Tampilkan edit sea world
Pilih Edit Bowling Ancol Tampilkan edit bowling ancol
Pilih Edit Padang Golf Tampilkan edit padang golf
Pilih Edit Gondola Ancol Tampilkan edit gondola ancol
Pilih Edit Taman dan Pantai Tampilkan edit taman dan pantai
Pilih Edit Putri Duyung Tampilkan edit putri duyung
Pilih Edit Marina Tampilkan edit marina
Pilih Edit Pulau Bidadari Tampilkan edit pulau bidadari
Pilih Edit Puri Jimbaran Tampilkan edit puri jimbaran
Pilih Edit Puri Jimbaran II Tampilkan edit puri
jimbaran II
Pilih Edit Msrina Coast Royal Residence Tampilkan edit marina coast
royal residence
Pilih Edit Pui Nusa Dua Tampilkan edit puri nusa dua
Pilih Edit Tugu Permai Tampilkan edit tugu permai
Edit Fasilitas Pilih Edit Fasilitas Tampilkan edit fasilitas
Rancangan layar untuk aplikasi user adalah sebagai berikut: 1. Layar Intro
Animasi
Skip
Gambar 3.41 Rancangan layar Intro (Animasi Awal)
Setiap kali program dijalankan pertama kali akan muncul animasi awal sebagai pembukaan yang memperlihatkan kepada
user tentang Ancol secara keseluruhan. Rancangan layar
pembukaan dapat dilihat pada Gambar 3.41 di atas. Animasi yang akan ditampilkan adalah animasi dari gambar produk-produk yang ditawarkan oleh Ancol.
Selain itu, pada layar ini juga terdapat tombol SKIP yang teletak pada kanan bawah layar. Tombol ini berfungsi untuk langsung masuk ke halaman utama tanpa perlu menunggu layar pembuka untuk menyelesaikan segala kegiatannya. Setelah layar
Gambar 3.42 Rancangan Layar Menu Utama
Setelah layar pembukaan selesai dijalankan maka akan tampil menu utama yang dapat dilihat rancangan layarnya pada Gambar 3.42 di atas. Pada layar ini terdapat dua menu utama yaitu menu Produk dan menu Perusahaan. Jika user memilih tombol Produk, maka akan ditampilkan layar Produk, dan jika
user memilih tombol Perusahaan, maka akan ditampilkan layar
Perusahaan. Menu-menu tersebut berbentuk tombol yang direalisasikan dalam bentuk gambar-gambar yang dibuat beranimasi.
Gambar 3.43 Rancangan Layar Produk
Pada layar produk terdapat animasi peta Ancol dan jingle Dufan sebagai background musik. Musik dihalaman ini juga dapat dinyala-hidupkan lewat tombol “On-Off”. Di sebelah kiri terdapat link menuju layar produk-produk dan fasilitas-fasilitas yang ada di Ancol. Pada layar ini terdapat sistem pencarian data yang yaitu dengan cara mengetikkan kata yang ingin dicari pada
textfield yang telah disediakan kemudian tekan tombol bergambar
kaca pembesar yang terletak di sebelahnya, maka akan ditampilkan data-data sesuai hasil pencarian tersebut. Pada layar
Teks Pencarian Tombol Pencarian Rekreasi
Resor
Perumahan
Animasi Peta Ancol
Menu Utama Lain-lain
Dunia Fantasi
Atlantis Water Adventure
Putri Duyung
Puri Jimbaran
Fasilitas
Music On Off
Gambar 3.44 Rancangan Layar Perusahaan
Pada Layar Perusahaan terdapat animasi pintu lift yang dapat membuka dan menutup. Pada halaman ini terdapat tombol 1 untuk menuju ke Layar Sejarah Ancol, tombol 2 untuk menuju ke Layar Inovasi / Kebijakan, tombol 3 untuk menuju ke Layar Peristiwa, tombol 4 untuk menuju ke Layar Kegiatan Sosial, tombol 5 untuk menuju ke Layar Tentang Perusahaan, tombol ><
Teks Pencarian Tombol Pencarian
Menu Utama
Animasi Pintu Lift
1 2 3 4 5 >< <> Music On Off
dengan cara mengetikkan kata yang ingin dicari pada textfield yang telah disediakan kemudian tekan tombol Cari yang terletak di sebelahnya, maka akan ditampilkan data-data sesuai hasil pencarian tersebut. Pada layar ini juga terdapat sebuah tombol untuk kembali ke layar menu utama serta tombol ”On-Off” untuk musik.