35 BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Konsep Aplikasi Interaktif Panduan Pengguna TransJakarta Pada tahap konsep, penulis menentukan kebutuhan dasar pengguna (user), menentukan tujuan pembuatan aplikasi serta mengidentifikasi pemakai aplikasi interaktif panduan pengguna TransJakarta. 3.1.1 Menentukan Kebutuhan Dasar Pengguna Transjakarta atau umum disebut dengan Busway adalah sebuah sistem transportasi bus cepat atau Bus Rapid Transit di Jakarta. Maka dari itu pemerintah DKI Jakarta membangun alat transportasi alternatif yang dikenal dengan Transjakarta. Semakin hari koridor transjakarta semakin bertambah, dan jangkauannya pun semakin luas. Tentu hal ini menjadi masalah bagi pengguna transjakarta yang masih baru untuk melakukan perjalanan, dikarenakan adanya perpindahan koridor untuk tujuan tertentu. Oleh karena itu penulis mengajukan konsep dengan membangun sebuah aplikasi yang dapat memandu dengan efektif dan efisien pengguna jasa Transjakarta dalam melakukan perjalanan. 3.1.2 Menentukan Tujuan Pembuatan Aplikasi Setelah menentukan kebutuhan dasar pengguna (user), tahap selanjutnya yang dilakukan oleh penulis adalah menentukan tujuan atau manfaat dari pembuatan aplikasi interaktif panduan pengguna TransJakarta antara lain yaitu : 1. Media aplikasi ini dibuat dengan tampilan yang menarik dan interaktif sehingga mudah digunakan. 2. Desain yang dinamis disertai dengan sound di setiap tampilan aplikasi sehingga dapat merangsang minat pengguna TransJakarta untuk menggunakan media aplikasi ini dalam mendapatkan informasi perjalanannya.
36 3. Membantu memudahkan pengguna TransJakarta dalam mendapatkan informasi perjalananya. 3.1.3 Mengidentifikasi Pemakai (user) Aplikasi interaktif panduan pengguna TransJakarta) ini dirancang dengan tampilan yang menarik untuk membantu memudahkan pengguna TransJakarta dalam mendapatkan informasi perjalananya. Aplikasi ini digunakan oleh setiap orang dengan segala kalangan dan segala usia yang ingin mendapatkan informasi perjalanan TransJakarta. 3.2 Analisa Sistem Pemahaman tentang sistem yang akan dirancang sangat diperlukan sebelum sebuah perangkat lunak dibangun, menganalisa perangkat lunak merupakan salah satu bagian penting dari sistem pembangunan perangkat lunak dimulai dari tahap analisis yang kemudian dilanjutkan dengan tahap perancangan. Pada Aplikasi Interaktif Panduan Penggunaan TransJakarta terdiri dari beberapa menu yaitu: 1. Pembuka (Opening) Pada menu halaman pembuka terdapat tulisan Selamat Datang dengan text animasi, terdapat judul aplikasi, tombol teks bertuliskan mulai untuk masuk ke menu utama dan tombol teks bertuliskan keluar untuk keluar dari aplikasi. 2. Menu Utama Pada menu halaman Menu Utama terdapat tombol untuk masuk ke Sejarah, Rute dan Profil Penulis. Selain itu, terdapat pula tombol keluar untuk menuju halaman pembuka (Opening). 3. Sejarah Rancangan halaman ini untuk menampilkan Sejarah dari Transjakarta. Sejarah TransJakarta dengan text animasi. Selain itu terdapat pula tombol kembali untuk menuju halaman pembuka (Opening).
37 4. Rute Pada rancangan halaman ini menampilkan rute TransJakarta terdapat 11 tombol koridor yang digambarkan dengan koridor 1, koridor 2, koridor 3, koridor 4, koridor 5, koridor 6, koridor 7, koridor 8, koridor 9, koridor 10 dan koridor 11 disertai gambar animasi koridor yang menampilkan peta setiap koridornya dan halte transfer. Selain itu terdapat tombol kembali untuk kembali. 5. Profil Pada rancangan halaman profil ini bertujuan untuk menampilkan profil penulis. Didalam halaman ini terdapat foto dan biodata penulis dan tombol kembali untuk kembali ke menu pembuka (opening). 3.3 Perancangan Aplikasi Tahap perancangan adalah tahap untuk membuat spesifikasi secara rinci mengenai aplikasi interaktif panduan pengguna TransJakarta yang akan di buat oleh penulis, spesifikasi dibuat cukup rinci sehingga pada tahap berikutnya yaitu pengumpulan bahan dan pembuatan aplikasi, tetapi menggunakan apa yang sudah ditentukan pada tahap desigen. Namun demikian sering terjadi penambahan atau bagian aplikasi yang ditambah, dihilangkan atau diubah pada awal pengerjaan proyek. Pada tahapan ini, proses perancangan menterjemahkan segala kebutuhan kedalam suatu perangkat lunak yang dapat diperkirakan kualitasnya sebelum dimulai pemrograman. 3.3.1 Perancangan Struktur Navigasi Perancangan struktur navigasi ini sangat penting didalam membuat suatu animasi. Struktur navigasi ini merupakan arah dari perjalanan aplikasi animasi ini, struktur navigasi ini dibuat untuk dapat membantu penulis menentukan alur perjalanan serta acuan pembuatan aplikasi dari awal hingga akhir. Sebuah movie flash dapat dibagi dalam berbagai scene. Biasanya suatu scene menampilkan suatu adegan. Pembagian movie ke dalam scene berguna untuk memudahkan dalam
38 mengorganisasikan movie, program ini terdiri dari beberapa scene yaitu : scene opening, scene menu utama, scene sejarah, scene Rute dan yang terakhir adalah scene profil. Struktur navigasi yang penulis buat menggunakan struktur navigasi hirarki. Opening Menu Utama Sejarah Rute Profil Keluar 1 2 3 4 5 6 7 8 9 10 11 Gambar 3.1 Struktur Navigasi Hierarki 3.3.2 Perancangan Storyboard Storyboard adalah rancangan umum suatu aplikasi yang disusun secara berurutan layer demi layer serta dilengkapi dengan penjelasan dan spesifikasi dari setiap gambar, layer, dan teks merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan pencantuman semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat.
39 Dalam perancangan tampilan ini penulis menjelaskan rancangan tampilan Aplikasi Interaktif Panduan Penggunaan TransJakarta pada setiap masing-masing menu. 1. Storyboard Halaman Pembuka (Opening) Modul : Pembuka Nama File : Pembuka Frame No : 1 Gambar : Busway Animasi : - Text Animasi Selamat Datang Aplikasi Interaktif Panduan Penggunaan TransJakarta Audio : Musik Keluar Keluar Mulai Navigasi : Mulai menuju ke halaman utama Gambar 3.2 Storyboard Halaman Pembuka (Opening) Pada scene halaman pembuka ini menampilkan animasi gambar teks, dan suara. Halaman pembuka ini bertujuan untuk menampilakan judul dari aplikasi scene halaman pembuka ini masuk ke halaman menu utama dengan tombol mulai untuk keluar dengan tombol keluar.
40 2. Storyboard Halaman Menu Utama Modul : Menu Utama Nama File : Menu Utama Frame No : 1 Gambar : Shelter Sejarah Rute MENU UTAMA Gambar Animasi : - Audio Navigasi : Musik : Menuju ke halaman utama Gambar 3.3 Storyboard Halaman Menu Utama Pada halaman menu utama terdiri dari beberapa tombol seperti sejarah, rute, profil dan tombol keluar untuk kembali ke menu opening. 3. Storyboard Halaman Sejarah Profil Keluar Modul : Sejarah Nama File : Sejarah Frame No : 1 Gambar : Busway Animasi : - SEJARAH Text animasi sejarah TransJakarta Audio Navigasi : Musik : Menuju ke halaman utama Kembali Gambar 3.4 Storyboard Halaman Sejarah.
41 Pada halaman ini untuk menampilkan sejarah dari TransJakarta. Pada halaman ini hanya menampilkan sejarah TransJakarta dan tombol kembali untuk ke halaman menu utama. 4. Storyboard Halaman Rute Modul : Rute Nama File : Rute Frame No : 1 Koridor 1 Koridor 2 RUTE Gambar : Busway Koridor 3 Animasi Audio : Peta Koridor : Musik Koridor 4 Koridor 5 Koridor 6 Animasi Koridor Navigasi : Menuju ke halaman utama Koridor 7 Koridor 8 Koridor 9 Koridor 10 Koridor 11 Kembali Gambar 3.5 Storyboard Halaman Rute Halaman ini akan digunakan untuk menampilkan rute perjalanan/koridor akan ditampilkan dalam bentuk peta perjalanan TransJakarta, gambar animasi koridor dan tombol kembali untuk menuju ke menu utama.
42 5. Storyboard Halaman Profil Modul : Profil Nama File : Profil PROFIL Frame No : 1 Gambar : Ombak Hijau Animasi : - foto Biodata Penulis Audio Navigasi : Musik : Menuju ke halaman menu utama Kembali Gambar 3.6 Storyboard Halaman Profil. Halaman ini untuk menampilkan profil dari penulis dan tombol kembali untuk ke menu utama. 3.3.3 Diagram Use Case Diagram Use case menjelaskan manfaat system jika dilihat dari sudut pandang orang yang berada di luar sistem (aktor). Diagram use case juga menunjukkan fungsionalisasi suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Aktor dan use case ditentukan atas dasar kebutuhan sistem. Kebutuhan sistem ini diakomodir di use case. Selanjutnya aplikasi ini didefinisikan 3 (tiga) use case yaitu:
43 1. Melihat menu utama 2. Melihat sejarah dari TransJakarta 3. Melihat rute dari TransJakarta berdasarkan koridor 4. Menampilkan profil penulis Atas dasar spesifikasi diatas ada satu aktor yaitu pengguna aplikasi untuk mendeskripsikan use case apa saja dan aktor yang terlibat dalam use case tersebut dapat dilihat pada gambar 3.8 Melihat Menu Opening Utama Melihat Sejarah dari TransJakarta Pengguna Melihat Rute dari Transjakarta berdasarkan koridor Menampilkan profil Gambar 3.7 Diagram Use Case Use case : Melihat Menu Utama Deskripsi singkat : Use case ini memungkinkan pengguna untuk melakukan proses melihat menu utama.
44 Aktor : Pengguna (User) Skenario : 1. Pengguna masuk ke tombol menu yang terdiri dari tombol sejarah, rute, profil dan keluar. 2. Apabila pengguna memilih tombol salah satu, maka sistem akan menampilkan penjelasan dari tombol masing-masing. 3. Maka pengguna akan memahami penjelasan dari tombol menu utama. Kondisi awal : Pengguna menerima halaman informasi yang berisi dari menu utama. Konsisi akhir : Pengguna dapat melihat halaman menu utama, mengetahui sejarah TransJakarta, rute dan melanjutkan ke profil. Use case : Melihat Sejarah dari TransJakarta Deskripsi singkat : Use case ini memungkinkan pengguna untuk melakukan proses melihat sejarah dari TransJakarta. Aktor : Pengguna (User) Skenario : 1. Pengguna masuk ke tombol menu yang terdiri dari tombol sejarah. 2. Apabila pengguna memilih tombol sejarah, maka sistem akan menampilkan penjelasan sejarah dari TransJakarta melalui teks animasi. 3. Maka pengguna akan memahami penjelasan dari tombol sejarah. Kondisi awal : Pengguna menerima halaman informasi yang berisi penjelasan tentang sejarah TransJakarta
45 Konsisi akhir : Pengguna dapat melihat halaman menu utama, mengetahui sejarah TransJakarta, dan melanjutkan ke menu rute. Use case : Melihat Rute dari TransJakarta berdasarkan Koridor Deskripsi singkat : Use case ini memungkinkan pengguna untuk melakukan proses melihat rute perjalanan dari TransJakarta. Aktor : Pengguna (User) Skenario : 1. Pengguna masuk ke tombol menu rute yang terdiri dari 11 koridor. 2. Apabila pengguna memilih salah satu tombol koridor, maka sistem akan menampilkan animasi koridor yang berisi keterangan peta TransJakarta berdasarkan koridor dan transfer ke koridor lain yang menampilkan penjelasan dari masing-masing tombol tersebut. 3. Maka pengguna akan melihat dan memahami penjelasan dari animasi peta TransJakarta berdasarkan koridor. Kondisi awal : Pengguna menerima halaman informasi yang berisi penjelasan animasi koridor peta TransJakarta dari masingmasing koridor. Konsisi akhir : Pengguna dapat melihat halaman menu rute, detail rute untuk animasi koridor peta TransJakarta dari masing-masing koridor, dan melanjutkan ke menu utama. Use case : Menampilkan profil penulis Deskripsi singkat Aktor : Use case ini memungkinkan pengguna untuk melihat profil dari penulis. : Pengguna (User)
46 Skenario : 1. Pengguna masuk ke tombol profil yang terdiri dari foto dan biodata penulis. 2. Pengguna memilih tombol kembali untuk kembali ke menu utama Kondisi awal : Pengguna menerima halaman informasi yang berisi penjelasan tentang profil dari penulis. Konsisi akhir : Pengguna dapat melihat halaman menu utama, melanjutkan ke menu berikutnya atau keluar dari aplikasi. 3.3.4 Diagram Aktifitas Diagram adalah teknik untuk mendeskripsikan logika prosedural, proses bisnis dan aliran kerja dalam banyak kasus. Dalam beberapa hal diagram ini memainkan peran mirip sebuah diagram alir. Atas dasar aktifitas tersebut, selanjutnya dibuat diagram aktifitas dimana diagram ini menunjukkan transisi di antara aktifitas. 1. Perancangan Activity diagram untuk halaman Menu Utama Aktifitas dimulai ketika pengguna memilih tombol mulai, kemudian sistem menampilkan menu utama, aktifitas selanjutnya adalah memilih menu yang terdiri dari sejarah, rute, profil dan keluar. Kemudian sistem akan menampilkan halaman yang akan dipilih.
47 Berikut ini gambar Activity diagram yang telah digambarkan diatas: Pengguna (User) Sistem Membuka aplikasi Menampilkan salam pembuka dan tombol mulai Memilih tombol mulai Menampilkan menu utama Memilih combo button Menampilkan menu yang diinginkan Gambar 3.8 Activity Diagram Halaman Menu Utama 2. Perancangan Activity diagram untuk halaman Sejarah Pada Aktifitas sejarah, pengguna dipermudah hanya dengan memilih teks sejarah dari combo button dan keluar. Untuk lebih jelasnya Activity diagram untuk halaman sejarah akan digambarkan berikut ini :
48 Pengguna (User) Sistem Memilih sejarah pada tampilan menu utama Menampilkan teks animasi sejarah Memilih tombol kembali Menampilkan menu utama Gambar 3.9 Activity Diagram Halaman Sejarah 3. Perancangan Activity diagram untuk halaman Rute Pada proses halaman rute pengguna memilih rute berdasarkan koridor, kemudian sistem menampilkan menu koridor, aktifitas selanjutnya adalah memilih salah satu koridor dari 11 koridor kemudian sistem akan menampilkan animasi koridor dan keluar. Kemudian sistem akan menampilkan halaman yang akan dipilih, akan digambarkan berikut ini :
49 Pengguna (User) Sistem Memilih rute pada tampilan menu utama Menampilkan rute berdasarkan koridor Memilih salah satu koridor Menampilkan Animasi Koridor Memilih tombol kembali Menampilkan menu utama Gambar 3.10 Activity Diagram Halaman Rute 4. Perancangan Activity diagram untuk halaman Profil Pada Aktifitas halaman profil, pengguna hanya dengan memilih profil dari penulis dari combo button dan keluar. Untuk lebih jelasnya Activity diagram untuk halaman profil akan digambarkan berikut ini :
50 Pengguna (User) Sistem Memilih profil pada tampilan menu utama Menampilkan profil Memilih tombol kembali Menampilkan menu utama Gambar 3.11 Activity Diagram Halaman Profil 3.3.5 Diagram Sekuensial Dari tahapan analisis kebutuhan yang dilakukan sebelumnya maka dapat dibentuk sequence diagram untuk menunjukkan urutan-urutan proses dari masingmasing use case, yaitu: 1. Perancangan untuk halaman sejarah Diagram sequensial untuk rancangan halaman sejarah menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk aplikasi, setelah pengguna menekan tombol mulai, kemudian sistem menampilkan
51 menu utama, selanjutnya pengguna dapat memilih menu sejarah, kemudian sistem menampilkan teks animasi dari sejarah TransJakarta. Dapat dilihat pada gambar 3.12 Halaman menu utama Halaman menu sejarah End Pengguna 1. Masuk halaman menu utama 2. Masuk halaman sejarah 3. Tampilkan sejarah 4. Kembali Gambar 3.12 Diagram Sequential Halaman Sejarah 2. Perancangan untuk halaman Rute Diagram sequensial untuk rancangan halaman rute skenario atau langkahlangkah yang dilakukan pengguna hingga pengguna selesai dan keluar. Pertama pengguna harus memilih menu rute, setelah pengguna menekan tombol untuk masuk ke tampilan utama rute maka akan muncul combo button yang berisi koridor 1, koridor 2, koridor 3, koridor 4, koridor 5, koridor 6, koridor 7, koridor 8, koridor 9,
52 koridor 10, dan koridor 11. Pengguna dapat memilih menu rute yang diinginkan dengan cara ditekan tombol koridor. Setelah ditekan maka akan langsung ke frame animasi koridor yang berisi peta TransJakarta dan transfer antar koridor. Setelah selesai pengguna dapat memilih tombol kembali untuk kembali ke menu rute Dapat dilihat pada gambar 3.13 Halaman menu utama Halaman rute End Pengguna 1. Masuk halaman menu utama 2. Masuk rute 3.Tampilkan koridor 4. Kembali Gambar 3.13 Diagram Sequential Halaman Rute
53 3. Perancangan untuk halaman Profil Diagram sequensial untuk rancangan halaman profil menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk aplikasi, setelah pengguna menekan tombol mulai, kemudian sistem menampilkan menu utama, selanjutnya pengguna dapat memilih menu profil, kemudian sistem menampilkan foto dan biodata penulis. Dapat dilihat pada gambar 3.14 Halaman menu utama Halaman menu profil End Pengguna 1. Masuk halaman utama 2. Masuk halaman profil 3. Tampilkan profil 4. Kembali Gambar 3.14 Diagram Sequential Halaman Profil
54 3.4 Pengumpulan Bahan Pengumpulan bahan (material collecting) dapat dikerjakan paralel dengan tahap pembuatan (assembly). Pada tahap ini dilakukan pengumpulan bahan seperti clipart image, animasi, audio, dan lain-lain yang diperlukan dalam multimedia. bersumber dari media internet yaitu http://id.wikipedia.org/wiki/transjakarta dan www.rutebusway.com. Bahan yg diambil penulis hanya sebatas untuk kebutuhan dalam penulisan skripsi saja, bukan untuk hal yang komersial.