127
3.2.2.2 Storyboard Interaksi
Tabel 3.56 Storyboard
Scene Menu
Halaman Aksi Aktor
GUI
1 Beranda
Utama Sistem
Menampilkan halaman utama sistem.
Jika klik menu
“Beranda”, akan menuju scene 1.
Jika klik menu
“Bantuan”, akan menuju scene 2.
Jika klik menu “Materi”, akan menuju scene 68.
2 Bantuan Bantuan
Menampilkan halaman Bantuan yang berisi
menu pencarian Jika klik menu
“Beranda”, akan menuju ke halaman Utama
Sistem scene 1 Jika klik jenis materi
“Rambu Jenis”, akan menuju ke halaman
Rambu Cari Jenis Utama scene 3
Jika klik gamba
r “User Manual” akan menuju ke
halaman User Manual scene 66
3 Rambu
Jenis Menampilkan halaman
Rambu Cari Jenis Utama yang berisi form
pencarian data Rambu berdasarkan jenis
Rambu. Jika klik menu
“Beranda” di halaman Rambu Cari Jenis Utama
maka akan menuju ke halaman Utama Sistem
scene 1
128 Jika klik menu
“Bantuan” di halaman Rambu Cari Jenis Utama
maka akan menuju ke halaman Bantuan scene
2
4 Rambu
Nama Menampilkan halaman
Rambu Cari Nama Utama yang berisi form
pencarian data Rambu berdasarkan nama
Rambu. Jika klik menu
“Beranda” di halaman Rambu Cari Nama
Utama maka akan menuju ke halaman
Utama Sistem scene 1 Jika klik menu
“Bantuan” di halaman Rambu Cari Nama
Utama maka akan menuju ke halaman
Bantuan scene 2
5 Marka
Jenis Menampilkan halaman
Marka Cari Jenis Utama yang berisi form
pencarian data Marka berdasarkan jenis Marka.
Jika klik menu
“Beranda” di halaman Marka Cari Jenis Utama
maka akan menuju ke halaman Utama Sistem
scene 1 Jika klik menu
“Bantuan” di halaman Marka Cari Jenis Utama
maka akan menuju ke halaman Bantuan scene
2
129 6
Marka Nama
Menampilkan halaman Marka Cari Nama
Utama yang berisi form pencarian data Marka
berdasarkan nama Marka.
Jika klik menu
“Beranda” di halaman Marka Cari Nama
Utama maka akan menuju ke halaman
Utama Sistem scene 1 Jika klik menu
“Bantuan” di halaman Marka Cari Nama
Utama maka akan menuju ke halaman
Bantuan scene 2
7 Isyarat
Bunyi Nama
Menampilkan halaman Bunyi Cari Nama Utama
yang berisi form pencarian data Bunyi
berdasarkan nama Bunyi.
Jika klik menu
“Beranda” di halaman Bunyi Cari Nama Utama
maka akan menuju ke halaman Utama Sistem
scene 1 Jika klik menu
“Bantuan” di halaman Bunyi Cari Nama Utama
maka akan menuju ke halaman Bantuan scene
2
8 Isyarat
Gerakan Nama
Menampilkan halaman Gerakan Cari Nama
Utama yang berisi form pencarian data Gerakan
berdasarkan nama gerakan.
Jika klik menu
“Beranda” di halaman Gerakan Cari Nama
130 Utama maka akan
menuju ke halaman Utama Sistem scene 1
Jika klik menu
“Bantuan” di halaman Gerakan Cari Nama
Utama maka akan menuju ke halaman
Bantuan scene 2
Scene Menu
Halaman Aksi Aktor
GUI
9 Materi
Utama Materi
Menampilkan halaman utama materi yang berisi
menu jenis materi yaitu Lalu Lintas dan Patroli
Keamanan Sekolah
Jika klik button “Lalu Lintas” maka akan masuk
ke halaman utama lalu lintas scene 10
Jika klik button “Patroli Keamanan Sekolah”
makaakan masuk ke halaman utama pks scene
26
10 Lalu
Lintas Utama LL
Menampilkan halaman Utama LL yang berisi
menu materi Lalu Lintas dan pengertian Lalu
Lintas. Jika klik menu
“Pengertian”, akan menuju halaman Utama LL scene
10.
Jika klik menu “Tata Cara Tertib”, akan menuju
halaman Tata Cara Tertib scene 11.
Jila klik menu “Alat Pengaturan”, akan menuju
ke halaman Alat Pengaturan scene 12
131 Jika klik menu “Galeri”,
akan menuju ke halaman Galeri Lalu Lintas scene
25
11 Tata
Cara Tertib
Tata Cara Tertip
Menampilkan halaman Tata Cara Tertib yang
berisi materi tata cara tertib berlalu lintas.
12 Alat
Pengatu ran
Menampilkan halaman Alat Pengaturan yang
berisi jenis alat pengaturan Rambu, Marka, Isyarat
Jika klik macam alat
pengaturan “Rambu”, akan menuju halaman Teori
Rambu scene 13. Jika klik macam alat
pengaturan “Marka”, akan menuju halaman Teori
Marka scene 15.
13 Rambu
Teori Rambu
Menampilkan halaman Teori Rambu yang berisi
jenis pengertian Rambu dan macam
– macam Rambu.
Jika klik macam Rambu “Larangan”, akan menuju
halaman Tampil Larangan scene 14 .
14 Tampil
Larangan Menampilkan halaman
Tampil Larangan yang berisi pengertian Rambu
Larangan dan macam –
macam Rambu Larangan. Jika klik tombol
“Kembali”, akan menuju ke halaman Teori Rambu
scene 13 Jika klik gambar rambu,
132 akan menuju ke halaman
Rambu Detail scene 15 15
Rambu Detail
Menampilkan halaman Rambu Detail yang berisi
detail data rambu yang dipilih.
Jika klik ikon “Back”, akan menuju ke halaman
tampil larangan scene 14
16 Marka
Teori Marka
Menampilkan halaman Teori Marka yang berisi
jenis pengertian Marka dan macam
– macam Marka.
Jika klik macam Marka “Membujur”, akan menuju
halaman Tampil Membujur scene 17
17 Tampil
Membujur Menampilkan halaman
Tampil Membujur yang berisi pengertian Marra
Membujue dan macam –
macam Marka Membujur. Jika klik tombol “Go
Back”, akan menuju ke halaman Teori Marka
scene 16 Jika klik gambar rambu,
akan menuju ke halaman Marka Detail scene 18
18 Marka
Detail Menampilkan halaman
Marka Detail yang berisi detail data marka yang
dipilih.
Jika klik ikon “Back”, akan menuju ke halaman
tampil membujur scene 17
133 19
Isyarat Utama
Isyarat Menampilkan halaman
Utama Isyarat yang berisi pengertian isyarat, macam
isyarat isyarat lampu, isyarat bunyi dan isyarat
gerakan Jika klik macam isyarat
“isyarat lampu”, akan menuju ke halaman isyarat
lampu scene 20 Jika klik macam isyarat
“isyarat bunyi”, akan menuju ke halaman isyarat
bunyi scene 21 Jika klik macam isyarat
“isyarat gerakan”, akan menuju ke halaman isyarat
gerak scene 23
20 Isyarat
Lampu Menampilkan halaman
Isyarat Lampu yang berisi penjelasan materi isyarat
lampu. Jika klik tombol
“Kembali”, akan menuju ke halaman Utama
Isyaratscene 19.
21 Isyarat
Bunyi Menampilkan halaman
Isyarat Bunyi yang berisi penjelasan dan macam
isyarat bunyi Jika klik gambar audio
pada data, akan menuju ke halaman Bunyi Detail
scene 22. Jika klik tombol
“Kembali”, akan menuju ke halaman Utama
Isyaratscene 19.
134 22
Bunyi Detail
Menampilkan halaman Bunyi Detail yang berisi
detail bunyi yang dipilih.
Jika klik ikon “Back”, akan menuju ke halaman
Isyarat Bunyi scene 21
23 Isyarat
Gerak Menampilkan halaman
Isyarat Gerakan yang berisi penjelasan dan
macam isyarat gerakan Jika klik gambar video
pada data, akan menuju ke halaman Video Detail
scene 24. Jika klik tombol
“Kembali”, akan menuju ke halaman Utama
Isyaratscene 19.
24 Video
Detail Menampilkan halaman
Video Detail yang berisi detail video yang dipilih.
Jika klik ikon “Back”, akan menuju ke halaman
Isyarat Gerakan scene 23
25 Galeri
Galeri Lalu
Lintas Menampilkan halaman
Galeri Lalu Lintas yang berisi video berkendara
hal yang berkaitan dengan lalu lintas.
Jika klik gambar video pada data, akan menuju ke
halaman Video Detail scene 24.
Jika klik ikon “Back”, akan menuju ke halaman
Galeri Lalu Lintas scene 25
135 26
Patroli Keaman
an Sekolah
Utama PKS
Menampilkan halaman Utama PKS yang berisi
menu materi PKS dan pengertian PKS.
Jika klik menu
“Pengertian”, akan menuju halaman Utama PKS
scene 26. Jika klik menu
“Kemampuan”, akan menuju halaman
Kemampuan PKS scene 27.
Jila klik menu
“Pengaturan”, akan menuju ke halaman
Pengaturan PKS scene 27 Jika klik menu
“Kelengkapan PKS”, akan menuju ke halaman
Kelengkapan PKS scene 28
27 Kemam
puan Kemampu
an PKS Menampilkan halaman
Kemampuan PKS yang berisi materi kemampuan
PKS
28 Pengatu
ran Pengatura
n PKS Menampilkan halaman
Pengaturan PKS yang berisi materi pengertian,
tujuan, macam pengaturan.
Jika klik link “Lihat” pada macam pengaturan maka
akan tampil halaman Isyarat Gerak scene 23.
136 29
Kelengk apan
Kelengkap an PKS
Menampilkan halaman Kelengkapan PKS yang
berisi materi kelengkapan PKS.
Scene Menu
Halaman Aksi Aktor
GUI
30 Admin Login
Admin Menampilkan halaman
Login Admin yang berisi form untuk menginputkan
username dan password.
Jika klik “Login” dan berhasil, masuk ke
halaman Utama Admin scene 31.
Jika klik”Login” dan tidak berhasil, masuk ke
halaman Login Admin scene 30.
31 Kelola
Materi Utama
Admin Menampilkan halaman
Utama Admin yang berisi panduan kelola materi dan
jenis materi yang di kelola Rambu, Marka, Isyarat,
Teori, Galeri Jika klik menu jenis materi
“Rambu”, akan masuk ke halaman Rambu Tambah
Form scene 32. Jika klik menu jenis materi
“Marka”, akan masuk ke halaman Marka Tambah
Form scene 38 Jika klik menu jenis materi
“Isyarat”, akan masuk ke halaman Utama Isyarat
scene 44 Jika klik menu materi
“Teori”, akan masuk ke halaman Teori Form
137 scene 60
Jika klik menu materi “Galeri”, akan masuk ke
halaman Galeri Tambah Proses scene56
Jika klik menu Logout, akan masuk ke halaman
Login Admin scene 30
32 Rambu Rambu
Tambah Form
Menampilkan halaman Rambu Tambah Form
yang berisi form untuk menginputkan data
rambu, melihat data rambu.
Jika klik button
“Simpan”, maka data akan tersimpan dan
masuk ke halaman Rambu Tambah Proses
scene 33
Jika klik link “Lihat Data Rambu”, akan
masuk ke halaman Rambu Tampil scene
34
33 Rambu
Tambah Proses
Menampilkan halaman Rambu Tambah Proses
yang berisi proses tambah data Rambu.
Jika proses tambah berhasil atau tidak
berhasil, akan tampil pesan di halaman
Rambu Tambah Proses scene 33
138
34 Rambu
Tampil Menampilkan halaman
Rambu Tampil yang berisi tampilan data
Rambu. Jika klik data gambar,
akan masuk ke halaman Rambu Detail scene
13. Jika klik gambar edit
pada data, akan masuk ke halaman Rambu Edit
Form scene 35 Jika klik gambar hapus
pada data, akan masuk ke halaman Rambu
Hapus scene 37 dan data terhapus.
Jika klik button
“Kembali”, akan masuk ke halaman Rambu
Tambah Proses scene 34.
35 Rambu
Edit Form
Menampilkan halaman Rambu Edit Form yang
berisi form edit data yang berisikan data
yang dipilih. Jika klik button edit,
akan masuk ke halaman Rambu Edit Proses dan
menjalankan proses edit.
Jika klik link “Lihat Data Rambu”, akan
masuk ke halaman Rambu Tampil scene
34. Jika berhasil edit data,
akan tampil halaman Rambu Edit Pesan
139
scene 36. Jika klik link “Lihat
Data Rambu”, akan masuk ke halaman
Rambu Tampil scene 34
36 Rambu
Edit Pesan
Menampilkan halaman Rambu Edit Pesan yang
berisi pesan bahwa data rambu berhasil diedit.
37 Rambu
Hapus Menampilkan halaman
Rambu Hapus yang berisi pesan bahwa data
rambu berhasil dihapus.
38 Marka
Marka Tambah
Form Menampilkan halaman
Marka Tambah Form yang berisi form untuk
menginputkan data marka, melihat data
marka. Jika klik button
“Simpan”, maka data akan tersimpan dan
masuk ke halaman Marka Tambah Proses
scene 39
Jika klik link “Lihat Data Marka”, akan
masuk ke halaman Marka Tampil scene
40 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
140
39 Marka
Tambah Proses
Menampilkan halaman Marka Tambah Proses
yang berisi proses tambah data Marka.
Jika proses tambah berhasil atau tidak
berhasil, akan tampil pesan di halaman Marka
Tambah Proses scene 39
40 Marka
Tampil Menampilkan halaman
Marka Tampil yang berisi tampilan data
Marka. Jika klik data gambar,
akan masuk ke halaman Marka Detail scene
17. Jika klik gambar edit
pada data, akan masuk ke halaman Marka Edit
Form scene 41 Jika klik gambar hapus
pada data, akan masuk ke halaman Marka
Hapus scene 43 dan data terhapus.
Jika klik button
“Kembali”, akan masuk ke halaman Marka
Tambah Proses scene 39.
41 Marka
Edit Form
Menampilkan halaman Marka Edit Form yang
berisi form edit data yang berisikan data
yang dipilih. Jika klik button edit,
akan masuk ke halaman Marka Edit Proses dan
141
menjalankan proses edit.
Jika klik link “Lihat
Data Marka”, akan masuk ke halaman
Marka Tampil scene 40.
Jika berhasil edit data, akan tampil halaman
Rambu Edit Pesan scene 42.
Jika klik link “Lihat Data Marka”, akan
masuk ke halaman Marka Tampil scene
40
42 Marka
Edit Pesan
Menampilkan halaman Marka Edit Pesan yang
berisi pesan bahwa data marka berhasil diedit.
43 Marka
Hapus Menampilkan halaman
Marka Hapus yang berisi pesan bahwa data
marka berhasil dihapus.
44 Isyarat
Utama Isyarat
Menampilkan halaman Utama Isyarat yang
berisi jenis materi isyarat isyarat bunyi,
isyarat gerakan yang dapat di kelola.
Jika klik menu jenis
materi “Isyarat Bunyi”, akan masuk ke halaman
Bunyi Tambah Form scene 45
142
Jika klik menu jenis materi “Isyarat
Gerakan”, akan masuk ke halaman Gerak
Tambah Form scene 56
45 Isyarat
Bunyi Bunyi
Tambah Form
Menampilkan halaman Bunyi Tambah Form
yang berisi form untuk menginputkan data
bunyi, melihat data bunyi.
Jika klik button
“Simpan”, maka data akan tersimpan dan
masuk ke halaman Bunyi Tambah Proses
scene 46
Jika klik link “Lihat Data Bunyi”, akan
masuk ke halaman Bunyi Tampil scene
47
46 Bunyi
Tambah Proses
Menampilkan halaman Bunyi Tambah Proses
yang berisi proses tambah data Bunyi.
Jika proses tambah berhasil atau tidak
berhasil, akan tampil pesan di halaman Bunyi
Tambah Proses scene 46
47 Bunyi
Tampil Menampilkan halaman
Bunyi Tampil yang berisi tampilan data
Bunyi. Jika klik data audio,
akan masuk ke halaman Bunyi Detail scene 23.
Jika klik gambar edit pada data, akan masuk
143
ke halaman Bunyi Edit Form scene 48
Jika klik gambar hapus pada data, akan masuk
ke halaman Marka Hapus scene 50 dan
data terhapus. Jika klik button
“Kembali”, akan masuk ke halaman Bunyi
Tambah Proses scene 46.
48 Bunyi
Edit Form
Menampilkan halaman Bunyi Edit Form yang
berisi form edit data yang berisikan data
yang dipilih.
Jika klik button “Edit”, akan masuk ke halaman
Bunyi Edit Proses dan menjalankan proses
edit.
Jika klik link “Lihat Data Isyarat Bunyi”,
akan masuk ke halaman Bunyi Tampil scene
47. Jika berhasil edit data,
akan tampil halaman Bunyi Edit Pesan scene
49.
49 Bunyi
Edit Pesan
Menampilkan halaman Bunyi Edit Pesan yang
berisi pesan bahwa data marka berhasil diedit.
144
50 Bunyi
Hapus Menampilkan halaman
Bunyi Hapus yang berisi pesan bahwa data
marka berhasil dihapus.
51 Isyarat
Geraka n
Gerak Tambah
Form Menampilkan halaman
Gerak Tambah Form yang berisi form untuk
menginputkan data gerak, melihat data
gerak. Jika klik button
“Simpan”, maka data akan tersimpan dan
masuk ke halaman Gerak Tambah Proses
scene 52
Jika klik link “Lihat Data Gerak”, akan
masuk ke halaman Gerak Tampil scene
53
52 Gerak
Tambah Proses
Menampilkan halaman Gerak Tambah Proses
yang berisi proses tambah data Gerak.
Jika proses tambah berhasil atau tidak
berhasil, akan tampil pesan di halaman Gerak
Tambah Form scene 51
53 Gerak
Tampil Menampilkan halaman
Gerak Tampil yang berisi tampilan data
Gerak. Jika klik data video,
akan masuk ke halaman Video Detail scene 24.
145
Jika klik gambar edit pada data, akan masuk
ke halaman Gerak Edit Form scene 54
Jika klik gambar hapus pada data, akan masuk
ke halaman Gerak Hapus scene 56 dan
data terhapus. Jika klik button
“Kembali”, akan masuk ke halaman Gerak
Tambah Proses scene 52.
54 Gerak
Edit Form
Menampilkan halaman Gerak Edit Form yang
berisi form edit data yang berisikan data
yang dipilih.
Jika klik button “Edit”, akan masuk ke halaman
Gerak Edit Proses dan menjalankan proses
edit.
Jika klik link “Lihat Dat
a Isyarat Gerak”, akan masuk ke halaman
Gerak Tampil scene 53.
Jika berhasil edit data, akan tampil halaman
Gerak Edit Pesan scene 55.
55 Gerak
Edit Pesan
Menampilkan halaman Bunyi Edit Pesan yang
berisi pesan bahwa data marka berhasil diedit.
146
56 Gerak
Hapus Menampilkan halaman
Gerak Hapus yang berisi pesan bahwa data
marka berhasil dihapus.
57 Galeri
Tambah Form
Menampilkan halaman Galeri Tambah Form
yang berisi form untuk menginputkan data
galeri, melihat data galeri.
Jika klik button
“Simpan”, maka data akan tersimpan dan
masuk ke halaman Galeri Tambah Proses
scene 58
Jika klik link “Lihat Data Galeri”, akan
masuk ke halaman Galeri Tampil scene
59
58 Galeri
Tambah Proses
Menampilkan halaman Galeri Tambah Proses
yang berisi proses tambah data Galeri.
Jika proses tambah berhasil atau tidak
berhasil, akan tampil pesan di halaman Galeri
Tambah Proses scene 58
59 Galeri
Tampil Menampilkan halaman
Galeri Tampil yang berisi tampilan data
Galeri. Jika klik data video,
akan masuk ke halaman Video Detail scene 24.
147
Jika klik gambar hapus pada data, akan masuk
ke halaman Galeri Hapus scene 59 dan
data terhapus. Jika klik button
“Kembali”, akan masuk ke halaman Galeri
Tambah Proses scene 57.
60 Galeri
Hapus Menampilkan halaman
Galeri Hapus yang berisi pesan bahwa data
marka berhasil dihapus.
61 Teori
Teori Form
Menampilkan halaman Teori Form yang berisi
form untuk menginputkan data
teori, melihat data teori. Jika klik button
“Simpan”, maka data akan tersimpan dan
masuk ke halaman Teori Proses scene 61
Jika klik link “Lihat Data Teori”, akan
masuk ke halaman Teori Tampil scene 62
62 Teori
Proses Menampilkan halaman
Teori Proses yang berisi proses tambah
data Teori. Jika proses tambah
berhasil, akan tampil pesan di halaman Teori
Proses scene 61 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
148
63 Teori
Tampil Menampilkan halaman
Teori Tampil yang berisi tampilan data
Teori. Jika klik gambar edit
pada data, akan masuk ke halaman Teori Edit
Form scene 63 Jika klik gambar hapus
pada data, akan masuk ke halaman Teori Hapus
scene 65 dan data terhapus.
Jika klik button
“Kembali”, akan masuk ke halaman Teori Form
scene 60.
64 Teori
Edit Form
Menampilkan halaman Teori Edit Form yang
berisi form edit data yang berisikan data
yang dipilih.
Jika klik button “Edit”, akan masuk ke halaman
Teori Edit Proses dan menjalankan proses
edit.
Jika klik link “Lihat Data Teori”, akan
masuk ke halaman Gerak Tampil scene
62. Jika berhasil edit data,
akan tampil halaman Teori Edit Pesan scene
64. PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
149
65 Teori
Edit Pesan
Menampilkan halaman Teori Edit Pesan yang
berisi pesan bahwa data marka berhasil diedit.
66 Teori
Hapus Menampilkan halaman
Teori Hapus yang berisi pesan bahwa data marka
berhasil dihapus.
67 User
Manual Menampilkan halaman
file manual.pdf panduan user manual
Jika klik “Back” akan menuju ke halaman
Bantuan scene 2
68 UU
Menampilkan halaman file uu.pdf undang
– undang lalu lintas dan
angkutan jalan Jika klik “Back” akan
menuju ke halaman Utama Sistem menu
Beranda scene 1
69 Materi
Utama Materi
Menampilkan halaman utama materi yang
berisi menu jenis materi yaitu Lalu Lintas dan
Patroli Keamanan Sekolah
Jika klik button “Lalu Lintas” maka akan
masuk ke halaman utama lalu lintas scene
9 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
150
Jika klik button “Patroli Keamanan Sekolah”
makaakan masuk ke halaman utama pks
scene 26
3.2.3 Desain Elemen