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
1
Rute
2
3
4
5
Profil
6
7
8
Keluar
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
Text Animasi Selamat Datang
Frame No : 1 Gambar
: Busway
Animasi
:-
Audio
: Musik
Navigasi
: Mulai menuju
Aplikasi Interaktif Panduan Penggunaan TransJakarta
Keluar Keluar
Mulai
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 MENU UTAMA
Nama File : Menu Utama Sejarah
Frame No : 1 Gambar
: Shelter
Animasi
:-
Audio
: Musik
Navigasi
: Menuju ke halaman utama
Gambar
Rute Profil
Keluar
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
Modul
: Sejarah
Nama File : Sejarah
SEJARAH
Frame No : 1 Gambar
: Busway
Animasi
:-
Audio
: Musik
Navigasi
: Menuju ke halaman utama
Text animasi sejarah TransJakarta 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
RUTE Koridor 1 Koridor 2
Gambar
: Busway
Koridor 3
Animasi
: Peta Koridor
Koridor 4
Audio
: Musik
Navigasi
: Menuju ke halaman utama
Animasi Koridor
Koridor 5 Koridor 6 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
:-
Audio
: Musik
Navigasi
: Menuju ke halaman menu utama
foto
Biodata Penulis
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 Menu Melihat Utama Opening
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
penjelasan tentang sejarah TransJakarta
yang
berisi
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
: Use case ini memungkinkan pengguna untuk melihat profil dari penulis.
Aktor
: 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)
Membuka aplikasi
Sistem
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
Menampilkan Animasi Koridor
Memilih salah satu 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 langkah-
langkah 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
Pengguna
1. Masuk halaman menu utama 2. Masuk rute
3.Tampilkan koridor
4. Kembali
Gambar 3.13 Diagram Sequential Halaman Rute
End
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
Pengguna 1. Masuk halaman utama 2. Masuk halaman profil
3. Tampilkan profil
4. Kembali
Gambar 3.14 Diagram Sequential Halaman Profil
End
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.
