61
2. Tampilan yang dirancang mudah digunakan user
friendly dan
menarik, sehingga
memudahkan pengguna untuk dapat menggunakan fitur-fitur yang
ada.
4.1.2 Workshop Design
Setelah identifikasi fitur-fitur yang ada, tahap selanjutnya adalah mendesain sistem yang dikembangkan agar dapat
berjalan dengan baik dan diharapkan dapat mengatasi masalah yang ada
Pada tahapan workshop design ini, penulis akan merancang sistem guna menyelesaikan masalah yang ada.
Adapun rancangan sistem yang penulis buat meliputi rancangan penentuan actor, perancangan usecase, perancangan usecase
scenario atau narasi usecase, activity diagram, sequence diagram, dan design interface.
4.1.2.1 Penentuan Actor
Adapun aktor yang terlibat pada aplikasi ini adalah user. User adalah actor yang menggunakan handphone
berbasis smartphone android. User hanya bisa melihat data yang terdapat pada aplikasi ini.
62
Tabel 4.1 Penentuan Actor
No Actor
Description 1
User User adalah pengguna yang menggunakan smartphone
berbasis android.
Tabel 4.2
Daftar Diagram Use Case No
Use Case Name Description
Actor
1 Tentang Dishub
Tangsel Use case menggambarkan profil dari
DiSHUB Tangsel. User
2 Rute Angkutan
Umum Use case menggambarkan kegiatan
menampilkan info
tentang trayek
angkutan umum, jam operasional, tariff, dan gambar angkutan umum.
User
3 Keluar
Use case menggambarkan kegiatan keluar aplikasi
User
63
4.1.2.2 Perancangan Use Case
Gambar 4.1 Use Case Diagram
Keterangan : Dalam Use Case diagram diatas, user atau pengguna
sebagai actor yang mempunyai Use Case Enter System, tentang dishub, rute angkutan umum, dan keluar
4.1.2.3 Perancangan Usecase Scenario
Usecase scenario merupakan penjelasan yang lebih terperinci mengenai masing-masing usecase yang
terjadi di dalam sistem. Usecase diagram terdiri dari : a.
Nama usecase : nama usecase yang
dideskripsikan b.
Actor : yang terlibat
c. Deskripsi
: deskripsi usecase
64
d. Pre Condition
: syarat penting bagi usecase untuk mengulang
e. Action
: kegiatan yang dilakukan oleh
usecase f.
Post Condition : kegiatan setelah usecase
Dilaksanakan
Berikut adalah usecase scenario dari diagram usecase di atas:
4.1.2.3.1 Perancangan Usecase Scenario Enter
System Tabel 4.3
Usecase Enter System
Usecase Name Enter System
Usecase Id 1
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan menu
splash screen pada halaman utama pada aplikasi android, kemudian user menekan
tombol enter masuk. Jika yang sudah di tekan, maka user akan masuk ke halaman
menu utama
65
Pre condition User harus sudah meng-install Adobe Air
di handphone android. Typical
Course of
Event Actor Action
System Respons 1.
Menekan tombol
Enter masuk
2. Menampilk
an menu
utama
Post condition User berhasil mengakses sistem aplikasi
ini dan tampil halaman utama aplikasi ini
4.1.2.3.2 Use Case scenario Tentang DISHUB
Tabel 4.4 Usecase Tentang DISHUB
Usecase Name Tentang DISHUB
Usecase Id 2
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan profil
DISHUB Tangerang Selatan Pre condition
User harus sudah masuk halaman menu utama
Typical Course
of Event
Actor Action System Respons
1. Menekan
tombol 2.
Menampian menu
66
masuk DISHUB
Post condition User berhasil mengakses menu masuk
dan melihat isi tampilan mengenai profil DISHUB Tangerang Selatan
4.1.2.3.3 Use Case scenario Tugas Pokok
Tabel 4.5 Usecase Tugas Pokok
Usecase Name Tugas Pokok
Usecase Id 2
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan tugas
pokok DISHUB Tangerang Selatan Pre condition
User harus sudah masuk halaman menu dishub
Typical Course
of Event
Actor Action System Respons
1. Memilih
pilihan tugas pokok
2. Menampilk
an menu
DISHUB tentang
tugas pokok
67
Post condition User berhasil mengakses menu dishub
dan melihat isi tampilan mengenai tugas pokok dishub Tangerang Selatan
4.1.2.3.4 Use Case scenario Fungsi
Tabel 4.6 Usecase Fungsi
Usecase Name Fungsi
Usecase Id 2
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan fungsi
dishub Tangerang Selatan Pre condition
User harus sudah masuk halaman menu dishub
Typical Course
of Event
Actor Action System Respons
1 Memilih
pilihan fungsi
dishub tangsel
2 Menampilk
an menu
DISHUB tentang
fungsi dishub
tangsel Post condition
User berhasil mengakses menu dishub
68
dan melihat isi tampilan mengenai fungsi dishub Tangerang Selatan\
4.1.2.3.5 Use Case scenario Visi
Tabel 4.7 Usecase Visi
Usecase Name Visi
Usecase Id 2
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan visi
dishub Tangerang Selatan Pre condition
User harus sudah masuk halaman menu dishub
Typical Course
of Event
Actor Action System Respons
1. Memilih
pilihan visi dishub
tangsel 2.
Menampilk an
menu DISHUB
tentang visi dishub
tangsel Post condition
User berhasil mengakses menu dishub dan melihat isi tampilan mengenai visi
dishub Tangerang Selatan
69
4.1.2.3.6 Use Case scenario Misi
Tabel 4.8 Usecase Misi
Usecase Name Misi
Usecase Id 2
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan misi
dishub Tangerang Selatan Pre condition
User harus sudah masuk halaman menu dishub
Typical Course
of Event
Actor Action System Respons
1. Memilih
pilihan misi
dishub tangsel
2. Menampilka
n tentang
misi tentang dishub
tangsel Post condition
User berhasil mengakses menu dishub dan melihat isi tampilan mengenai misi
dishub Tangerang Selatan
70
4.1.2.3.7 Use Case scenario Kontak
Tabel 4.9 Usecase Kontak
Usecase Name Kontak
Usecase Id 2
Actor User
Description Proses
ini menggambarkan
sistem aplikasi yang akan menampilkan kontak
dishub Tangerang Selatan Pre condition
User harus sudah masuk halaman menu dishub
Typical Course
of Event
Actor Action System Respons
1. Memilih
pilihan kontak
dishub tangsel
2. Menampil
kan menu DISHUB
tentang kontak
dishub tangsel
Post condition User berhasil mengakses menu dishub
dan melihat isi tampilan mengenai fungsi dishub Tangerang Selatan
71
4.1.2.3.8 Use Case scenario Lihat Peta Tabel 4.10
Usecase Lihat Peta Usecase Name
Lihat Peta Usecase Id
3 Actor
User Description
Proses ini
menggambarkan sistem
aplikasi yang akan menampilkan menu rute
angkot, melihatkan
peta rute
angkutan umum. Pre condition
User berada pada tampilan menu rute angkot
Typical Course
of Event
Actor Action System Respons
1. Menekan
tombol pilihan lihat
peta 2.
Sistem merespon
untuk menampilkan
peta yang
dimaksud Post condition
User masuk ke data rute angkutan umum
72
4.1.2.3.9 Use Case scenario Rute Angkutan Tabel 4.11
Usecase Rute Angkutan Umum Usecase Name
Rute Angkutan Umum Usecase Id
3 Actor
User Description
Proses ini
menggambarkan sistem
aplikasi yang akan menampilkan menu rute
angkutan umum,
menjelaskan mengenai rute angkutan , jam oprasional
dan tariff penumpang. Pre condition
User berada pada tampilan menu rute angkutan umum
Typical Course
of Event
Actor Action System Respons
1. Memilih
trayek angkutan
umum yang diinginkan
2. Sistem
merespon untuk masuk
ke pencarian yang
dimaksud Post condition
User masuk ke data rute angkutan umum
73
4.1.2.3.10 Use Case Keluar Tabel 4.12
Usecase Keluar Usecase Name
Keluar Usecase Id
4 Actor
User Description
Proses untuk keluar dari aplikasi Pre condition
User berada pada tampilan menu utama aplikasi
Typical Course
of Event
Actor Action System Respons
3. Memilih
menu keluar 4.
Sistem merespin
untuk keluar dari aplikasi
Post condition User keluar dari aplikasi
4.1.2.4 Membuat Activity Diagram
Activity diagram
menggambarkan aktifitas-
aktifitas yang terjadi dalam aplikasi ini dari aktifitas dimulai sampai aktifitas berhenti.
74
1. Activity Diagram Use Case Enter System
Gambar 4.2 Activity Diagram Enter System
Keterangan Gambar : Di dalam activity diagram Use Case Enter
System, hal pertama yang user lakukan adalah membuka aplikasi. Apabila telah terbuka maka
sistem akan menampilkan halaman utama.
75
2. Activity Diagram Use Case Menu Utama
Gambar 4.3
Activity Diagram Menu Utama Keterangan Gambar :
Di dalam activity diagram Use Case Menu Utama, user dapat memilih sub menu yang
diinginkan. Disana terdapat sub menu seperti menu tentang dishub tangsel, rute angkutan umum, dan
keluar. Jika user memilih salah satu sub menu tersebut maka user akan beralih ke menu selanjutnya
76
3. Activity Diagram Use Case Menu Dishub
Gambar 4.4
Activity Diagram Tentang Dishub Tangsel
Keterangan Gambar : Di dalam activity diagram Use Case Menu
dishub tangsel hal yang pertama user lakukan adalah memilih menu tentang dishub pada menu utama,
kemudian sistem merespon dengan menampilkan informasi tentang profil dishub tangsel.
77
4. Activity Diagram Use Case Menu Rute Angkot
Gambar 4.5
Activity Diagram Rute Angkot Keterangan Gambar :
Di dalam activity diagram Use Case Menu rute angkot hal yang pertama user lakukan adalah
memilih Trayek tujujan yang dimaksud pada menu rute angkot, kemudian sistem merespon dengan
menampilkan informasi informasi trayek angkutan umum tersebut.
78
5. Activity Diagram Use Case Map Peta
Gambar 4.6 Activity Diagram Map Peta
Keterangan Gambar : Di dalam activity diagram Use Case map peta
hal yang pertama user lakukan adalah memilih menu gambar mappeta pada menu utama, kemudian
sistem merespon dengan menampilkan informasi jalur angkutan umum pada peta.
6. Activity Diagram Use Case Keluar
79
Gambar 4.7 Activity Keluar
Keterangan Gambar : Di dalam activity diagram Use Case
keluar hal yang pertama user lakukan adalah dengan memilih menu keluar pada menu
utama, kemudian sistem merespon untuk keluar dari aplikasi ini
4.1.2.5 Membuat Sequence Diagram
Sequence diagram merupakan diagram interaksi yang dinyatakan dengan waktu, atau dapat dikatakan
dengan diagram dari atas kebawah. Setiap sequence diagram menyatakan salah satu dari beberapa aliran
yang memulai sebuah Use Case.
80
a. Diagram Sequence Splash Screen
Gambar 4.8 Diagram Sequence Halaman
Utama
Keterangan gambar : Pada diagram diatas, terlihat proses dimulai
dari user membuka aplikasi di android, lalu sistem akan menampilkan metode halaman utama dimana
sistem memberi output berupa halaman utama.
81
b. Diagram Sequence Menu Utama
Gambar 4.9 Diagram Sequence Menu
Utama Keterangan gambar :
Pada diagram diatas, terlihat keseluruhan proses dari halaman utama dimana proses dimulai
dari user membuka aplikasi, kemudian pengguna menjalankan metode hamalan_utama kemudian
sistem menampilkan menu yang ada.
82
c. Diagram Sequence Menu Tentang Dishub
Gambar 4.10 Diagram Sequence Menu Dishub
Keterangan Gambar : Pada diagram diatas, terlihat keseluruhan
proses dari menu dishub dimana proses dimulai dari user memasuki menu tentang dishub, kemudian
sistem menampilkan informasi yang di maksud.
83
d. Diagram Sequence Menu Rute Angkot
Gambar 4.11 Diagram Sequence Menu Rute
Angkot Keterangan Gambar :
Pada diagram diatas, terlihat keseluruhan proses dari menu rute angkot dimana proses dimulai
dari user masuk ke menu rute angkutan umum, kemudian sistem menampilkan seluruh trayek
angkutan umum di wilayah tangerang selatan.
84
4.1.2.6 Perancangan User Interface
Pada tahap ini, peneliti merancang user interface atau tampilan antarmuka dari aplikasi.
a. Tampilan Halaman Menu Utama
Gambar 4.12 Menu Utama
85
b. Tampilan Tentang Dishub
Gambar 4.13 Menu Dishub
c. Tampilan Menu Rute Angkot
Gambar 4.14 Menu Rute Angkot
86
d. Tampilan Peta
