Storyboard Interaksi Desain Interaksi

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