ALAT BANTU PENGAJARAN LALU LINTAS DAN PATROLI KEAMANAN SEKOLAH (PKS) DIKEMBANGKAN DENGAN METODE BINANTO

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI

ALAT BANTU PENGAJARAN LALU LINTAS DAN PATROLI KEAMANAN SEKOLAH (PKS) DIKEMBANGKAN DENGAN METODE BINANTO

Skripsi Diajukan untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer Program Studi Teknik Informatika

Oleh : Dessy Yunita Kusumaningrum 125314012

PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA YOGYAKARTA 2016

i


DEVELOPMENT OF LEARNING TOOL FOR TRAFFIC AND PATROLI KEAMANAN SEKOLAH (PKS) UTILIZING BINANTO’S METHOD

Tesis Presented as Partial Fulfillment of the Requirements To Obtain the Sarjana Komputer Degree In Department of Informatics Engineering

By : Dessy Yunita Kusumaningrum 125314012

INFORMATICS ENGINEERING STUDY PROGRAM DEPARTMENT OF INFORMATICS ENGINEERING THE FACULTY OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY 2016 ii


HALAMAN PERSETUJUAN

iii


HALAMAN PENGESAHAN

iv


HALAMAN PERSEMBAHAN

Bismillahirrahmanirrahim Karena sesungguhnya sesudah kesulitan itu ada kemudahan, sesungguhnya sesudah kesulitan itu ada kemudahan. Maka apabila kamu telah selesai (dari sesuatu urusan), kerjakanlah dengan sungguh - sungguh (urusan) yang lain dan hanya kepada Tuhanmulah hendaknya kamu berharap. (QS (Al-'Asyr) 94:5-8)

Ku persembahkan karya sederhana ini untuk : Allah SWT yang selalu memberikan karunianya Alm Bapak Bambang, Ibu Mur, Ezra, Lea, Mbak Dewi, Mas Pras, Bude Nani. Terimakasih Kasih untuk semua doa, motivasi, kasih sayang, serta bantuan yang kalian berikan. Kalianlah sumber semangat ku. Dosen dan Teman – teman TI 12 yang telah membantu selama aku berproses. Akhir kata, semoga skripsi ini membawa manfaat bagi semua orang. Aamiin

v


HALAMAN MOTTO

“ Berusaha, Berdoa, Bertawakal ”

- Dessy Yunita Kusumaningrum -

vi


HALAMAN PERNYATAAN KEASLIAN KARYA

Saya menyatakan dengan sesungguhnya bahwa di dalam skripsi yang saya tulis ini tidak membuat karya atau bagian karya orang lain, kecuali yang telah disebutkan dalam kutipan dan daftar pustaka, sebagaimanan layaknya karya ilmiah.

Yogyakarta, 11 Oktober 2016 Penulis

Dessy Yunita Kusumaningrum

vii


ABSTRAK

Unit Dikyasa Polres Gunungkidul sebagai mitra kepolisian melakukan pembelajaran mengenai Lalu Lintas dan Patroli Keamanan Sekolah (PKS) kepada pelajar saat ini masih menggunakan media power poin. Adanya penyimpanan data berupa gambar, audio, dan video yang terpisah - pisah, tentunya menganggu pengajar dalam menyampaikan materi. Dengan adanya Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) yang menyajikan materi pembelajaran secara multimedia yang dapat ditampilkan secara visual sehingga bermanfaat serta memudahkan pengajar dalam menyampaikan materi, sehingga pelajar akan lebih tertarik. Aplikasi ini dibangun dengan menggunakan bahasa pemrograman JSP dan pengolahan data menggunakan Oracle 11g. Aplikasi ini juga memanfaatkan teori pengembangan sistem menggunakan metode Binanto, Basisdata Multimedia untuk dapat memanipulasi data multimedia baik data gambar, audio, dan video. Hasil akhir yang diperoleh adalah Alat Bantu Pengajaran Lalu Lintas dan PKS berbasis web yang memiliki kemampuan melihat, mencari materi Lalu Lintas dan PKS secara detail. Selain itu terdapat halaman utama Admin yang memiliki kemampuan untuk kelola materi baik menambah, mengubah, menghapus materi. Berdasarkan pengujian Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) berbasis web memiliki tingkat kegunaan yang sangat tinggi dan memiliki tingkat kemudahan yang sangat tinggi.

viii


ABSTRACT

Police Unit Dikyasa in Gunungkidul as police partners do teach about Traffic and Patroli Keamanan Sekolah (PKS) to students, currently they still use media "power poin". Their data storage in the form of images, audio, and video are separate - separate, of course disturb teachers in presenting the material. With the Development of Learning Tool for Traffic and Patroli Keamanan Sekolah (PKS) use multimedia learning, materials can be displayed visually, so helpful and facilitate teachers in presenting the material, so that students will be more interested. The application is developer using JSP programming language and data management (DBMS) using Oracle 11g. The system also utilizes development theory of systems using the method Binanto, multimedia database to be able to manupulate multimedia data image, audio, and video for inclusion in the system. The final result obtained is the Development of Learning Tool for Traffic and Patroli Keamanan Sekolah (PKS) web-based has the ability to see, looking material Traffic and PKS in detail. In addition there is the main page of the Admin has the ability to manage material either to add, modify, delete the material. Based on the testing of the Development of Learning Tool for Traffic and Patroli Keamanan Sekolah (PKS) web-based have a usability degree of very high and have a ease degree of very high.

ix


LEMBAR PUBLIKASI PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Yang bertanda tangan di bawah ini, saya mahasiswa Universitas Sanata Dharma : Nama : Dessy Yunita Kusumaningrum NIM

: 125314012

Demi pengembangan ilmu pengetahuan, saya memberikan kepada Perpustakaan Universitas Sanata Dharrna karya ilmiah saya yang berjudul : Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) Dikembangkan dengan Metode Binanto Dengan demikian saya memberikan kepada Universitas Sanata Dharma hak untuk menyiapkan, mengalihkan dalam bentuk media lain, mengelola dalam bentuk pengakalan data, mendistribusikan secara terbatas, dan mempublikasikan di internet atau media lain untuk kepentingan akademis. Demikian pernyataan ini saya buat dengan sebenarnya. Dibuat di Yogyakarta Pada Tanggal : 11 Oktober 2016 Yang menyatakan,

(Dessy Yunita Kusumaningrum)

x


KATA PENGANTAR Puji syukur penulis panjatkan kepada Tuhan Yang Maha Esa, atas berkat dan kasih-Nya, penulis dapat menyelesaikan skripsi yang berjudul : “Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) Dikembangkan dengan Metode Binanto” Pada kesempatan ini penulis juga inigin mengucapkan terimakasih kepada: 1. Bapak Iwan Binanto, M.Cs., selaku dosen pembimbing yang telah meluangkan waktu dan dengan sabar membimbing dan memberikan pengarahan serta saran bagi penulis, sehingga ini dapat diselesaikan dengan baik. 2. Ibu, Kakak, Keponakan, Bude yang selalu memberikan kasih sayang, doa dan dukungan yang sangat besar kepada penulis. 3. Unit Dikyasa Satuan Lalu Lintas Polres Gunungkidul yang telah berkerja sama dalam penyelesain skripsi. 4. Sudi Mungkasi S.Si., M. Math.Sc.,Ph.D selaku Dekan Fakultas Sains dan Teknologi, Universitas Sanata Dharma Yogyakarta. 5. Dr. Anastasia Rita selaku Ketua Program Studi Teknik Informatika, Universitas Sanata Dharma Yogyakarta. 6. Seluruh Dosen yang telah mendidik dan memberikan ilmu pengetahuan selama penulis menjalani studi di Universitas Sanata Dharma Yogyakarta. 7. Teman – teman program studi Teknik Informatika angkatan 2012 Universitas Sanata Dharma atas dukungan, masukkan dan doanya. 8. Pihak sekretariat dan Laboran yang turut membantu penulis menyelesaikan skripsi ini. 9. Semua pihak yang yang tidak dapat disebutkan satu persatu yang telah membantu penulis dalam proses penyelesain skripsi. xi


Dalam penulisan skripsi ini, masih banyak kekurangan dan hal yang perlu diperbaiki. Oleh karena itu penulis menerima kritik dan saran yang membangun dari pembaca. Akhirnya, penulis berharap semoga skripsi ini dapat berguna bagi pembaca. Yogyakarta, 11 Oktober 2016

Dessy Yunita Kusumaningrum

xii


DAFTAR ISI

HALAMAN PERSETUJUAN ........................................................................................... iii HALAMAN PENGESAHAN ............................................................................................ iv HALAMAN PERSEMBAHAN.......................................................................................... v HALAMAN MOTTO ........................................................................................................ vi HALAMAN PERNYATAAN KEASLIAN KARYA ...................................................... vii ABSTRAK ....................................................................................................................... viii ABSTRACT ....................................................................................................................... ix LEMBAR PUBLIKASI PERSETUJUAN .......................................................................... x KATA PENGANTAR ....................................................................................................... xi DAFTAR ISI .................................................................................................................... xiii DAFTAR GAMBAR ........................................................................................................ xx DAFTAR TABEL .......................................................................................................... xxiii BAB I .................................................................................................................................. 1 1.1

Latar Belakang .................................................................................................... 1

1.2

Rumusan Masalah ............................................................................................... 2

1.3

Batasan Masalah ................................................................................................. 2

1.4

Tujuan dan Manfaat Penelitian ........................................................................... 2

1.4.1

Tujuan ......................................................................................................... 2

1.4.2

Manfaat ....................................................................................................... 3

1.5

Metodologi Penelitian ......................................................................................... 3

1.6

Sistematika Penelitian ......................................................................................... 5

BAB II ................................................................................................................................. 7 2.1

Alat Bantu Pengajaran......................................................................................... 7

2.1.1

Definisi Alat Bantu Pengajaran ................................................................... 7

2.1.2

Pembelajaran Berbasis Web ........................................................................ 7

2.2

Lalu Lintas .......................................................................................................... 9

2.2.1

Definisi Lalu lintas atau Lalu Lintas Jalan ................................................. 9 xiii


2.2.2

Rambu Lalu Lintas ...................................................................................... 9

2.2.3

Marka Jalan ............................................................................................... 10

2.2.4

Alat Pemberi Isyarat .................................................................................. 12

2.3

Patroli Keamanan Sekolah (PKS) ..................................................................... 13

2.3.1

Definisi Patroli Keamanan Sekolah .......................................................... 13

2.3.2

Pengaturan Lalu Lintas ............................................................................. 13

2.3.3

Kelengkapan PKS ..................................................................................... 14

2.4

RPL Multimedia ................................................................................................ 14

2.4.1 2.5

Definisi Multimedia .................................................................................. 14 Metode Binanto ................................................................................................. 15

2.5.1 2.6

Tahapan Metode Binanto .......................................................................... 15

Basisdata Multimedia ........................................................................................ 19

2.6.1

Oracle InterMedia ..................................................................................... 19

2.6.2

Teknologi Object Relasional ..................................................................... 19

2.6.3

Kapasitas InterMedia ................................................................................ 20

2.6.4

Method – method Basis Data Multimedia................................................. 20

2.8

Bahasa Pemrograman Java Server Pages (JSP) ................................................ 22

2.8.1

Definisi Java Server Pages (JSP) .............................................................. 22

2.8.2

Kode JSP ................................................................................................... 22

2.8.3

Bentuk Menyisipkan Kode Java ................................................................ 23

2.8.4

Arsitektur JSP............................................................................................ 24

2.8.5

Kelebihan dan Kekurangan JSP ................................................................ 24

2.9

Oracle ................................................................................................................ 25

2.9.1 2.10

Definisi Oracle .......................................................................................... 25

Notasi Pemodelan Sistem.................................................................................. 26

2.10.1

PIECES ..................................................................................................... 26

2.10.2

Use Case Diagram ..................................................................................... 29

2.10.3

Diagram Konteks ...................................................................................... 30

2.10.4

Diagram Activity....................................................................................... 31

2.10.5

Diagram Squence ...................................................................................... 32 xiv


2.11

Pengujian Perangkat Lunak............................................................................... 33

2.11.1

Pengertian Pengujian Perangkat Lunak..................................................... 33

2.11.2

Implementasi Pengujian ............................................................................ 34

BAB III ............................................................................................................................. 39 3.1

Analisa Sistem................................................................................................... 39

3.1.1

Analsisi Sistem Pembelajaran ................................................................... 39

3.1.2

Use Case .................................................................................................... 44

3.1.3

Definisi Aktor............................................................................................ 44

3.1.4

Definisi Usecase ........................................................................................ 45

3.1.5

Skenario Usecase ...................................................................................... 46

3.2

Desain................................................................................................................ 95

3.2.1

Desain Perangkat Lunak ........................................................................... 95

3.2.2

Desain Interaksi ....................................................................................... 114

3.2.3

Desain Elemen ........................................................................................ 150

3.3

Pengumpulan Bahan........................................................................................ 153

BAB IV ........................................................................................................................... 154 4.1

Authoring / Produksi Prototyping ................................................................... 154

4.1.1

Spesifikasi Perangkat Keras dan Perangkat Lunak ................................. 154

4.1.2

Implementasi Basis Data ......................................................................... 155

4.1.3

Implementasi Sistem ............................................................................... 157

4.2

Pengujian Sistem ............................................................................................. 158

4.2.1

Pengujian Alpha ...................................................................................... 158

4.2.2

Modifikasi Kuisioner .............................................................................. 171

4.2.3

Pengujian Beta ........................................................................................ 174

4.2.4

Hasil Pengujian ....................................................................................... 181

4.2.5

Analisa Hasil Perangkat Lunak ............................................................... 181

BAB V ............................................................................................................................ 183 6.1

Distribusi ......................................................................................................... 183

6.2

Pemeliharaan ................................................................................................... 183

BAB VI ........................................................................................................................... 184 xv


7.1

Data Hasil Responden ..................................................................................... 184

7.2

Interprestasi Skor ............................................................................................ 184

BAB VII .......................................................................................................................... 187 8.1

Kesimpulan ..................................................................................................... 187

8.2

Saran................................................................................................................ 187

DAFTAR PUSTAKA ..................................................................................................... 188 LAMPIRAN .................................................................................................................... 190 LAMPIRAN 1 : Desain Diagram ................................................................................ 190 1.1

Tambah Materi ............................................................................................ 190

1.2

Hapus Materi ............................................................................................... 197

1.3

Lihat Materi................................................................................................. 205

1.4

Cari Materi .................................................................................................. 209

1.5

Edit Materi .................................................................................................. 215

LAMPIRAN 2 : Implementasi Sistem ........................................................................ 230 2.1

Bantuan ....................................................................................................... 230

2.2

Rambu Cari Jenis Utama ............................................................................. 231

2.3

Rambu Cari Jenis ........................................................................................ 231

2.4

Rambu Cari Nama Utama ........................................................................... 233

2.5

Rambu Cari Nama ....................................................................................... 234

2.6

Marka Cari Jenis Utama .............................................................................. 236

2.7

Marka Cari Jenis ......................................................................................... 236

2.8

Marka Cari Nama Utama ............................................................................ 239

2.9

Marka Cari Nama ........................................................................................ 239

2.10

Bunyi Cari Nama Utama ............................................................................. 241

2.11

Bunyi Cari Nama......................................................................................... 242

2.12

Gerakan Cari Nama Utama ......................................................................... 243

2.13

Gerakan Cari Nama ..................................................................................... 244

2.14

Utama Materi .............................................................................................. 246

2.15

Utama LL .................................................................................................... 247

2.16

Tata Cara Tertib .......................................................................................... 248 xvi


2.17

Alat Pengaturan ........................................................................................... 249

2.18

Teori Rambu................................................................................................ 250

2.19

Tampil Larangan ......................................................................................... 251

2.20

Teori Marka................................................................................................. 252

2.21

Tampil Membujur ....................................................................................... 253

2.22

Teori Isyarat ................................................................................................ 255

2.23

Isyarat Lampu.............................................................................................. 256

2.24

Isyarat Bunyi ............................................................................................... 257

2.25

Isyarat Gerak ............................................................................................... 258

2.26

Galeri Lalu Lintas ....................................................................................... 259

2.27

Utama PKS .................................................................................................. 261

2.28

Kemampuan PKS ........................................................................................ 262

2.29

Pengaturan PKS .......................................................................................... 263

2.30

Kelengkapan PKS ....................................................................................... 265

2.31

Login Admin ............................................................................................... 266

2.32

Utama Admin .............................................................................................. 267

2.33

Rambu Tambah Form ................................................................................. 268

2.34

Rambu Tambah Proses ................................................................................ 270

2.35

Rambu Tampil............................................................................................. 272

2.36

Rambu Detail .............................................................................................. 274

2.37

Rambu Perbesar .......................................................................................... 276

2.38

Rambu Hapus .............................................................................................. 276

2.39

Rambu Edit Form ........................................................................................ 277

2.40

Rambu Edit Proses ...................................................................................... 279

2.41

Rambu Edit Pesan ....................................................................................... 281

2.42

Marka Tambah Form................................................................................... 281

2.43

Marka Tambah Proses ................................................................................. 283

2.44

Marka Tampil .............................................................................................. 286

2.45

Marka Detail................................................................................................ 288

2.46

Marka Perbesar............................................................................................ 289 xvii


2.47

Marka Hapus ............................................................................................... 289

2.48

Marka Edit Form ......................................................................................... 290

2.49

Marka Edit Proses ....................................................................................... 292

2.50

Marka Edit Pesan ........................................................................................ 294

2.51

Teori Form .................................................................................................. 295

2.52

Teori Poses .................................................................................................. 296

2.53

Teori Tampil................................................................................................ 297

2.54

Teori Hapus ................................................................................................. 298

2.55

Teori Edit Form ........................................................................................... 299

2.56

Teori Edit Proses ......................................................................................... 300

2.57

Teori Edit Pesan .......................................................................................... 301

2.58

Utama Isyarat .............................................................................................. 302

2.59

Bunyi Tambah Form ................................................................................... 302

2.60

Bunyi Tambah Proses ................................................................................. 304

2.61

Bunyi Tampil .............................................................................................. 306

2.62

Bunyi Hapus ................................................................................................ 308

2.63

Bunyi Detail ................................................................................................ 309

2.64

Bunyi Perbesar ............................................................................................ 310

2.65

Bunyi Edit Form.......................................................................................... 311

2.66

Bunyi Edit Proses ........................................................................................ 312

2.67

Bunyi Edit Pesan ......................................................................................... 314

2.68

Gerak Tambah Form ................................................................................... 314

2.69

Gerak Tambah Proses ................................................................................. 316

2.70

Gerak Tampil .............................................................................................. 319

2.71

Gerak Hapus ................................................................................................ 321

2.72

Video Detail ................................................................................................ 322

2.73

Video Perbesar ............................................................................................ 323

2.74

Gerak Edit Form.......................................................................................... 324

2.75

Gerak Edit Proses ........................................................................................ 325

2.76

Gerak Edit Pesan ......................................................................................... 328 xviii


2.77

Galeri Tambah Form ................................................................................... 328

2.78

Galeri Tambah Proses ................................................................................. 329

2.79

Galeri Tampil .............................................................................................. 331

2.80

Galeri Hapus................................................................................................ 333

2.81

User Manual ................................................................................................ 334

2.82

UU ............................................................................................................... 334

LAMPIRAN 3 : Kuisioner .......................................................................................... 335 LAMPIRAN 4 : Kuisioner .......................................................................................... 337 LAMPIRAN 5 : User Manual ..................................................................................... 338

xix


DAFTAR GAMBAR

Gambar 2.1 Definisi Multimedia ...................................................................................... 14 Gambar 2.2 Metodologi .................................................................................................... 15 Gambar 2.3 Contoh Kode JSP .......................................................................................... 22 Gambar 2.4 Arsitektur JSP................................................................................................ 24 Gambar 2.5 Arsitektur Database ....................................................................................... 25

Gambar 3.1 Usecase .......................................................................................................... 44 Gambar 3.2 Diagram Organisasi ....................................................................................... 95 Gambar 3.3 Diagram Konteks........................................................................................... 96 Gambar 3.4 Diagram Activity Login ................................................................................ 96 Gambar 3.5 Diagram Sequence Login .............................................................................. 97 Gambar 3.6 Diagram Activity Tambah Rambu ................................................................ 97 Gambar 3.7 Diagram Sequence Tambah Rambu .............................................................. 98 Gambar 3.8 Diagram Activity Hapus Rambu ................................................................... 99 Gambar 3.9 Diagram Sequence Hapus Rambu ............................................................... 100 Gambar 3.10 Diagram Activity Lihat Teori .................................................................... 100 Gambar 3.11 Diagram Sequence Lihat Teori ................................................................. 101 Gambar 3.12 Diagram Activity Lihat Gambar................................................................ 101 Gambar 3.13 Diagram Sequence Lihat Gambar ............................................................. 102 Gambar 3.14 Diagram Activity Cari Rambu Berdasaekan Jenis .................................... 103 Gambar 3.15 Diagram Sequence Cari Rambu Berdasaekan Jenis .................................. 104 Gambar 3.16 Diagram Activity Cari Rambu Berdasaekan Nama................................... 104 Gambar 3.17 Diagram Sequence Cari Rambu Berdasaekan Nama ................................ 105 Gambar 3.18 Diagram Activity Edit Identitas Rambu .................................................... 106 Gambar 3.19 Diagram Activity Edit Gambar Rambu ..................................................... 107 xx


Gambar 3.20 Diagram Activity Edit Identitas dan Gambar Rambu ............................... 108 Gambar 3.21 Diagram Sequence Edit Identitas Rambu .................................................. 109 Gambar 3.22 Diagram Sequence Edit Gambar Rambu................................................... 109 Gambar 3.23 Diagram Sequence Edit Identitas dan Gambar Rambu ............................. 109 Gambar 3.24 Diagram Activity Logout .......................................................................... 110 Gambar 3.25 Diagram Sequence Logout ........................................................................ 110 Gambar 3.26 Perancangan Basisdata .............................................................................. 111 Gambar 3.27 Antarmuka Beranda / Utama Sistem ......................................................... 114 Gambar 3.28 Antarmuka Bantuan................................................................................... 114 Gambar 3.29 Antarmuka Rambu Cari Jenis Utama, Marka Cari Jenis Utama ............... 114 Gambar 3.30 Antarmuka Rambu Cari Jenis, Marka Cari Jenis ...................................... 115 Gambar 3.31 Antarmuka Rambu Cari Nama Utama, Marka Cari Nama Utama ............ 115 Gambar 3.32 Antarmuka Rambu Cari Nama, Marka Cari Nama ................................... 115 Gambar 3.33 Antarmuka Utama LL, Tata Cara Tertib ................................................... 116 Gambar 3.34 Antarmuka Utama PKS, Kemampuan PKS, Kelengkapan PKS ............... 116 Gambar 3.35 Antarmuka Alat Pengaturan ...................................................................... 116 Gambar 3.36 Antarmuka Galeri Lalu Lintas................................................................... 117 Gambar 3.37 Antarmuka Isyarat Gerak .......................................................................... 117 Gambar 3.38 Antarmuka Pengaturan PKS...................................................................... 117 Gambar 3.39 Antarmuka Login Admin .......................................................................... 118 Gambar 3.40 Antarmuka Utama Admin ......................................................................... 118 Gambar 3.41 Antarmuka Rambu Tambah Form............................................................. 118 Gambar 3.42 Antarmuka Rambu Tampil, Marka Tampil ............................................... 119 Gambar 3.43 Antarmuka Rambu Detail, Marka Detail .................................................. 119 Gambar 3.44 Antarmuka Bunyi Detail ........................................................................... 119 Gambar 3.45 Antarmuka Video Detail ........................................................................... 120 Gambar 3.46 Antarmuka Rambu Hapus, Marka Hapus, dll ........................................... 120 xxi


Gambar 3.47 Antarmuka Tambah Form ......................................................................... 120 Gambar 3.48 Antarmuka Utama Isyarat ......................................................................... 121 Gambar 3.49 Antarmuka Bunyi Tambah Form .............................................................. 121 Gambar 3.50 Antarmuka Bunyi Tampil.......................................................................... 121 Gambar 3.51 Antarmuka Gerakan Tambah Form........................................................... 122 Gambar 3.52 Antarmuka Gerakan Tampil ...................................................................... 122 Gambar 3.53 Antarmuka Galeri Tambah Form .............................................................. 122 Gambar 3.54 Antarmuka Galeri Tampil ......................................................................... 123 Gambar 3.55 Antarmuka Materi Form............................................................................ 123 Gambar 3.56 Antarmuka Materi Tampil ......................................................................... 123 Gambar 3.57 Antarmuka Rambu Edit Form ................................................................... 124 Gambar 3.58 Antarmuka Marka Edit Form .................................................................... 124 Gambar 3.59 Antarmuka Bunyi Edit Form ..................................................................... 124 Gambar 3.60 Antarmuka Gerak Edit Form ..................................................................... 125 Gambar 3.61 Antarmuka User Manual ........................................................................... 125 Gambar 3.62 Antarmuka Utama Materi.......................................................................... 125 Gambar 3.63 Antarmuka Teori Rambu ........................................................................... 126 Gambar 3.64 Antarmuka Teori Marka ............................................................................ 126 Gambar 3.64 Antarmuka Utama Isyarat ......................................................................... 126 Gambar 4.1 Utama Sistem .............................................................................................. 157 Gambar 4.2 Grafik Kemudahan Pernyataan 1 ................................................................ 175 Gambar 4.3 Grafik Kemudahan Pernyataan 2 ................................................................ 176 Gambar 4.4 Grafik Kemudahan Pernyataan 3 ................................................................ 177 Gambar 4.5 Grafik Kemudahan Pernyataan 4 ................................................................ 178 Gambar 4.6 Grafik Kemudahan Pernyataan 5 ................................................................ 179 Gambar 4.7 Grafik Kemudahan Pernyataan 6 ................................................................ 180 Gambar 5.1 Button User Manual .................................................................................... 183 xxii


DAFTAR TABEL

Tabel 2.1 Jenis dan Fungsi Rambu ..................................................................................... 9 Tabel 2.2 Jenis dan Fungsi Marka..................................................................................... 11 Tabel 2.3 Jenis dan Fungsi Isyarat Lampu ........................................................................ 12 Tabel 2.4 Jenis dan Fungsi Isyarat Bunyi ......................................................................... 12 Tabel 2.5 Jenis dan Fungsi Isyarat Gerakan ...................................................................... 13 Tabel 2.6 Method Basis Data Multimedia ........................................................................ 20 Tabel 2.7 Notasi Diagram Use Case ................................................................................. 29 Tabel 2.8 Notasi Diagram Konteks ................................................................................... 30 Tabel 2.9 Notasi Diagram Activity ................................................................................... 31 Tabel 2.10 Notasi Kelas Analisis ...................................................................................... 32 Tabel 2.11 Notasi Diagram Sequence ............................................................................... 33 Tabel 2.12 Poin Kuisioner Fred F.Davis ........................................................................... 35 Tabel 2.13 Kategori Reliabilitas ....................................................................................... 38

Tabel 3.1 Analisis Dengan Konsep PIECES..................................................................... 41 Tabel 3.2 Definisi Aktor ................................................................................................... 44 Tabel 3.3 Definisi Usecase................................................................................................ 45 Tabel 3.4 Skenario Login .................................................................................................. 46 Tabel 3.5 Skenario Tambah Rambu .................................................................................. 47 Tabel 3.6 Skenario Tambah Marka ................................................................................... 48 Tabel 3.7 Skenario Tambah Bunyi.................................................................................... 49 Tabel 3.8 Skenario Tambah Gerakan ................................................................................ 50 Tabel 3.9 Skenario Tambah Teori ..................................................................................... 51 Tabel 3.10 Skenario Tambah Galeri ................................................................................. 52 Tabel 3.11 Skenario Hapus Rambu ................................................................................... 53 xxiii


Tabel 3.12 Skenario Hapus Marka .................................................................................... 54 Tabel 3.13 Skenario Hapus Bunyi .................................................................................... 55 Tabel 3.14 Skenario Hapus Gerakan ................................................................................. 56 Tabel 3.15 Skenario Hapus Galeri .................................................................................... 57 Tabel 3.16 Skenario Hapus Teori...................................................................................... 58 Tabel 3.17 Skenario Lihat Teori ....................................................................................... 59 Tabel 3.18 Skenario Lihat Materi Gambar ....................................................................... 60 Tabel 3.19 Skenario Lihat Materi Bunyi........................................................................... 61 Tabel 3.20 Skenario Lihat Materi Video........................................................................... 62 Tabel 3.21 Skenario Cari Rambu Berdasarkan Jenis ........................................................ 63 Tabel 3.22 Skenario Cari Rambu Berdasarkan Nama....................................................... 64 Tabel 3.23 Skenario Cari Marka Berdasarkan Jenis ......................................................... 65 Tabel 3.24 Skenario Cari Marka Berdasarkan Nama ........................................................ 66 Tabel 3.25 Skenario Cari Bunyi Berdasarkan Nama ........................................................ 67 Tabel 3.26 Skenario Cari Gerakan Berdasarkan Nama..................................................... 68 Tabel 3.27 Skenario Edit Data Identitas Rambu ............................................................... 69 Tabel 3.28 Skenario Edit Data Gambar Rambu ................................................................ 71 Tabel 3.29 Skenario Edit Data Identitas dan Gambar Rambu .......................................... 73 Tabel 3.30 Skenario Edit Data Identitas Marka ................................................................ 75 Tabel 3.31 Skenario Edit Data Gambar Marka ................................................................. 77 Tabel 3.32 Skenario Edit Data Identitas dan Gambar Marka ........................................... 79 Tabel 3.33 Skenario Edit Data Identitas Bunyi ................................................................. 81 Tabel 3.34 Skenario Edit Data Audio Bunyi .................................................................... 83 Tabel 3.35 Skenario Edit Data Identitas dan Audio Bunyi ............................................... 85 Tabel 3.36 Skenario Edit Data Identitas Gerakan ............................................................. 87 Tabel 3.37 Skenario Edit Data Video Gerakan ................................................................. 89 Tabel 3.38 Skenario Edit Data Identitas dan Video Gerakan ........................................... 91 xxiv


Tabel 3.39 Skenario Edit Data Teori................................................................................. 93 Tabel 3.40 Skenario Logout .............................................................................................. 94 Tabel 3.41 Kelas Analisis Login ....................................................................................... 96 Tabel 3.42 Kelas Analisis Tambah Rambu ....................................................................... 98 Tabel 3.43 Kelas Analisis Hapus Rambu .......................................................................... 99 Tabel 3.44 Kelas Analisis Lihat Teori ............................................................................ 100 Tabel 3.45 Kelas Analisis Lihat Gambar ........................................................................ 102 Tabel 3.46 Kelas Analisis Cari Rambu Berdasaekan Jenis ............................................. 103 Tabel 3.47 Kelas Analisis Cari Rambu Berdasaekan Nama ........................................... 105 Tabel 3.48 Kelas Analisis Edit Rambu ........................................................................... 108 Tabel 3.49 Kelas Analisis Logout ................................................................................... 108 Tabel 3.50 Atribut Rambu............................................................................................... 111 Tabel 3.51 Atribut Marka ................................................................................................ 112 Tabel 3.52 Atribut Bunyi ................................................................................................ 112 Tabel 3.53 Atribut Video ................................................................................................ 112 Tabel 3.54 Atribut Teori ................................................................................................. 113 Tabel 3.55 Atribut Data Admin ...................................................................................... 113 Tabel 3.56 Storyboard ..................................................................................................... 127 Tabel 3.57 Desain Gambar Rambu ................................................................................. 150 Tabel 3.58 Desain Audio Bunyi ..................................................................................... 151 Tabel 3.59 Desain Video Gerakan ................................................................................. 151

Tabel 4.1 Create Tabel Rambu....................................................................................... 155 Tabel 4.2 Create Tabel Marka ........................................................................................ 155 Tabel 4.3 Create Tabel Bunyi ........................................................................................ 156

xxv


Tabel 4.4 Create Tabel Teori ......................................................................................... 155 Tabel 4.5 Create Tabel Data_Admin ............................................................................. 157 Tabel 4.6 Pengujian Menu Beranda ................................................................................ 158 Tabel 4.7 Pengujian Menu Bantuan ................................................................................ 158 Tabel 4.8 Pengujian Menu Materi ................................................................................... 160 Tabel 4.9 Pengujian Menu Admin .................................................................................. 165 Tabel 4.10 Pengujian Menu Kelola Materi ..................................................................... 165 Tabel 4.11 Pengujian Menu Logout ................................................................................ 170 Tabel 4.12 Modifikasi Kuisioner .................................................................................... 171 Tabel 4.13 Hasil Uji Validitas Kemudahan .................................................................... 172 Tabel 4.14 Hasil Uji Reliabilitas Kemudahan................................................................. 173 Tabel 4.15 Data Kemudahan ........................................................................................... 174 Tabel 4.16 Hasil Kuisioner Kemudahan Pernyataan 1 ................................................... 175 Tabel 4.17 Hasil Kuisioner Kemudahan Pernyataan 2 ................................................... 176 Tabel 4.18 Hasil Kuisioner Kemudahan Pernyataan 3 ................................................... 177 Tabel 4.19 Hasil Kuisioner Kemudahan Pernyataan 4 ................................................... 178 Tabel 4.20 Hasil Kuisioner Kemudahan Pernyataan 5 ................................................... 179 Tabel 4.21 Hasil Kuisioner Kemudahan Pernyataan6 .................................................... 180

Tabel 6.1 Data Kemanfaatan ........................................................................................... 184 Tabel 6.2 Data Kemudahan ............................................................................................. 185 Tabel 6.3 Interprestasi Skor Presepsi Kemanfaatan ........................................................ 185 Tabel 6.4 Interprestasi Skor Presepsi Kemudahan .......................................................... 186

xxvi


BAB I PENDAHULUAN 1.1

Latar Belakang Indonesia merupakan bangsa yang sangat mementingkan keamanan dan ketertiban dalam segala hal. Keamanan dan ketertiban masyarakat salah satunya adalah ketertiban berlalu lintas. Ketertiban berlalu lintas di kalangan pelajar memberikan perhatian tersendiri. Tahun 2015 di Kabupaten Gunungkidul, tercatat kasus kecelakaan lalu lintas yang melibatkan pelajar selama kurun waktu 8 bulan dari Januari hingga Agustus mencapai 82 kasus dengan 4 korban jiwa (gunungkidulpost, 2015). Kasus kecelakaan lalu lintas dikalangan pelajar memanggil pihak Kepolisian, khususnya Unit Dikyasa untuk melakukan pembelajaran akan tertib dalam berkendara dengan membentuk Patroli Keamanan Sekolah (PKS) yang melibatkan para pelajar didalamnya. Pembelajaran ini dimaksudkan untuk membentuk polisi di lingkup sekolah dan memberikan penyuluhan lalu lintas dengan harapan, nantinya seluruh pelajar bisa menjadi pelopor keselamatan berlalu lintas. Pembelajaran yang dilakukan dengan cara memberikan pengetahuan berupa teori dan contoh praktek di sekolah melalui media persentasi power point. Dalam pembelajaran menggunakan media persentasi power point, pengajar mengalami kesulitan dalam mengelola data pembelajaran karena penyimpanan materi yang berbeda. Dari latar belakang tersebut, penulis tertarik membuat alat bantu pengajaran secara visual dan auditory mengenai materi Lalu Lintas dan Patroli Keamanan Sekolah (PKS), agar nantinya pengelolaan materi akan lebih mudah sehingga kinerja pengajar menjadi terbantu dan siswa lebih tertarik pada materi yang disampaikan.

1


1.2

Rumusan Masalah Berdasarkan latar belakang diatas, maka rumusan masalah yang akan diselesaikan, yaitu : a. Bagaimana

membangun

alat

bantu

pengajaran

untuk

memperkenalkan pengetahuan Lalu Lintas dan Patroli Keamanan Sekolah (PKS) yang mudah digunakan dan bermanfaat bagi pengajar menggunakan metode Binanto? 1.3

Batasan Masalah Pada penelitian ini terdapat beberapa batasan masalah yang terdiri dari : a. Materi pembelajaran yang digunakan dalam sistem adalah materi Lalu Lintas dan Patroli Keamanan Sekolah (PKS). b. Sistem ini digunakan untuk media pembelajaran oleh Unit Dikyasa Polres Gunungkidul. c. Data materi yang digunakan berupa data teks, data gambar, data video, dan data suara. d. Bahasa pemrograman yang digunakan adalah Java dengan media penyimpanan data Oracle 11g. e. Dalam penulisan ini alat bantu pengajaran dituliskan sebagai sistem.

1.4

Tujuan dan Manfaat Penelitian 1.4.1

Tujuan Tujuan penelitian ini untuk membuat alat bantu pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) yang mudah digunakan dan bermanfaat untuk pembelajaran menggunakan metode Binanto.

2


1.4.2

Manfaat Sistem yang dirancang dapat bermanfaat bagi pengajar dan pelajar. Sistem pembelajaran ini diharapkan dapat membuat pelajar lebih tertarik, sehingga materi dapat diterima dengan maksimal.

1.5

Metodologi Penelitian Metodelogi penelitian yang dilakukan untuk menyelesaikan maslah adalah sebagai berikut : a

Survei awal Penulisan melakukan observasi ke Unit Dikyasa Polres Gunungkidul. Pada proses ini penulis mengumpulkan informasi mengenai materi Lalu Lintas dan Patroli Keamanan Sekolah (PKS) yang dikhususkan untuk pelajar.

b

Studi pustaka Pada tahap ini dilakukan pencarian dan pendayagunaan sumber – sumber tulisan yang berhubungan dengan materi Lalu Lintas dan Patroli

Keamanan

Sekolah

(PKS),

serta

literature

terkait

penggunaan komputer guna peningkatan alat bantu pengajaran. c

Pengembangan alat atau sistem Pengembangan Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah menggunakan metode Binanto. Tahap – tahap dalam metode tersebut antaralain :

1. Tahap Analisis Tahap

analisis

adalah

tahapan

yang

dapat

dijelaskan

menggunakan PIECES Problem – Solving Framework (Whitten et. Al., 2000) sehingga dapat dideskripsikan dengan mudah.

3


2. Tahap Desain Tahap desain adalah tahap pembuatan desain perangkat lunak, desain interaksi dan desain elemen. 3. Tahap Pengumpulan Bahan Tahap pengumpulan bahan adalah tahap mengumpulkan data data yang sesuai dengan kebutuhan yang dikerjakan. Bahan tersebut antara lain gambar, suara, teks, video. 4. Tahap Authoring / Produksi Prototyping Tahap authoring / produksi prototyping adalah pengabungan bahan yang sudah dikumpulkan untuk menghasilkan prototype dari perangkat lunak yang sedang dikembangkan. 5. Tahap Pengujian Tahap pengujian adalah tahap untuk menemukan bugs dan/atau kemudahan penggunaan bagi pengguna. Pengujian diperlukan agar produk yang dihasilkan tidak mengalami kegagalan ketika digunakan oleh pengguna akhir. 6. Tahap Distribusi Tahap distribusi adalah tahapan yang akan mempengaruhi bagaimana perangkat lunak akan didistribusikan sehingga file – file perangkat lunak disiapkan supaya mudah ditransfer dari media distribusi yang digunakan ke komputer pengguna. 7. Tahap Pemeliharaan Tahap pemeliharaan adalah sebagai tahapan dukungan pada pengguna pemula yang belum mahir menggunakan perangkat lunak multimedia yang dihasilkan.

4


1.6

Sistematika Penelitian a

BAB I : Pendahuluan Bab ini menjelaskan mengenai latar belakang masalah, rumusan masalah, batasan masalah, tujuan dan manfaat penelitian, metode penelitian, sistematika penulisan untuk mempermudah pemahaman pembaca skripsi ini.

b

BAB II : Landasan Teori Bab ini membahas teori dan teknik dasar mengenai pembuatan sistem pembelajaran berbasis web, yaitu memberi gambaran umum mengenai alat bantu pengajaran, pembelajaran berbasis web, lalu lintas, patroli keamanan sekolah, multimedia, basisdata, metode Binanto, bahasa pemrograman JSP, oracle, notasi pemodelan sistem, pengujian.

c

BAB III : Analisis dan Desain Bab ini berisi penjelasan tahap analisis dan desain yaitu analisis sistem, desain sistem, pengumpulan bahan dari alat yang akan diimplementasikan, dan perancangan database.

d

BAB IV : Implementasi Bab ini berisi penjelasan tahap implementasi yaitu proses authoring / produksi prototyping dan pengujian dari sistem yang dibuat.

e

BAB V : Distribusi dan Pemeliharaan Bab ini berisi penjelasan tahap distribusi yaitu cara distribusi dan pemeliharaan sistem yang dibuat.

f

BAB VI : Uji Kemanfaatan dan Kemudahan Bab ini berisi pengujian kemanfaatan dan kemudahan dari sistem bantu pengajaran yang dibuat.

5


g

BAB VII : Penutup Bab ini berisi kesimpulan yang diambil dari analisa, desain dan implementasi serta prngujian yang telah dilakukan. Selain itu bab ini juga berisi saran yang bermanfaat dalam pengembangan alat bantu pengajaran di waktu mendatang.

6


BAB II LANDASAN TEORI 2.1

Alat Bantu Pengajaran 2.1.1

Definisi Alat Bantu Pengajaran Menurut kamus bahasa Indonesia, Alat adalah benda yang dipakai untuk mengerjakan sesuatu. Bantu pengajaran adalah alat peraga untuk memperjelas pengajaran yang dapat berupa gambar, film, dan lain – lain. Jadi Alat Bantu Pengajaran adalah benda yang dipakai sebagai alat peraga untuk memperjelas pengajaran.

2.1.2

Pembelajaran Berbasis Web

2.1.2.1 Definisi Pembelajaran Berbasis Web Pembelajaran berbasis web atau yang popular dengan sebutan web-based education (WBE) atau kadang disebut e-learning (electronic learning) dapat didefinisikan sebagai aplikasi teknologi web dalam dunia pembelajaran untuk sebuah proses pendidikan. Secara sederhana dapat dikatakan bahwa semua

pembelajaran

dilakukan

dengan

memanfaatkan

teknologi internet dan selama proses belajar dirasakan terjadi oleh yang mengikutinya, maka kegiatan itu dapat disebut sebagai pembelajaran berbasis web (Rusman, 2012). 2.1.2.2 Fungsi dan Manfaat Pembelajaran Berbasis Web Menurut Kevin Kruse (2004) dalam salah satu tulisannya yang berjudul “Using the Web for Learning” yang dimuat dalam situs web e-learningguru.com mengemukakan bahwa pembelajaran berbasis web seringkali memiliki manfaat yang banyak bagi para peserta didiknya. Bila dirancang dengan baik dan tepat, maka pembelajaran berbasis web bisa menjadi pembelajaran, serta mengurangi biaya – biaya operasional yang biasanya dikeluarkan oleh peserta didik untuk mengikuti pembelajaran. 7


2.1.2.3 Kelebihan dan Kekurangan Pembelajaran Berbasis Web Menurut Rusman (2012), sebagai media pembelajaran pada umumnya, pembelajaran berbasis web pun memiliki berbagai kelebihan dan kekurangan : a. Kelebihan 1. Memungkinkan

setiap

orang

dimanapun,

untuk

mempelajari apapun. 2. Kemampuan untuk membuat tautan (link), sehingga peserta dapat mengakses informasi dari berbagai sumber, baik di dalam maupun luar lingkungan belajar. 3. Isi dan materi pelajaran dapat di-update dengan mudah. Dan lain – lain b. Kekurangan 1. Dibutuhkan panduan bagi pembelajar untuk mencari informasi yang relevan, karena informasi yang terdapat di dalam web sangat beragam. 2. Dengan menggunakan pembelajaran berbasis web, pembelajaran terkadang merasa terisolasi terutama jika terdaat keterbatasan dan fasilitas komunikasi. Dan lain – lain.

8


2.2

Lalu Lintas 2.2.1

Definisi Lalu lintas atau Lalu Lintas Jalan Lalu lintas jalan adalah gerak pindah dengan atau tanpa alat penggerak dari satu tempat ketempat lain dengan menggunakan jalan sebagai ruang penggeraknya (Panduan Lalu Lintas,2015).

2.2.2

Rambu Lalu Lintas

2.2.2.1 Definisi Rambu Lalu Lintas Rambu lalu lintas adalah salah satu dari perangkat jalan yang berupa lambang, huruf, angka kalimat atau perpaduan diantaranya sebagai peringatan, larangan, perintah atau petunjuk bagi pemakai jalan. 2.2.2.2 Jenis dan Fungsi Rambu Tabel 2.1 Jenis dan Fungsi Rambu

No

Nama

Penjelasan

1

Peringatan

2

Larangan

3

Perintah

4

Petunjuk

5

Tambahan

Rambu yang digunakan untuk peringatan kemungkinan adanya bahaya atau tempat berbahaya dibagian jalan di depannya. Rambu yang digunakan untuk menyatakan perbuatan yang dilarang dilakukan oleh pemakai jalan. Rambu yang digunakan untuk menyatakan perintah yang wajib dilakukan oleh pemakai jalan. Rambu yang digunakan untuk menyatakan petunjuk jurusan, jalan, situasi, kota, tempat pengaturan, fasilitas dan lain – lain bagi pemakai jalan. Rambu yang digunakan untuk memuat keterangan yang diperlukan untuk menyatakan hanya berlaku untuk waktu – waktu tertentu jaran dan jenis kendaraan tertentu ataupun perihal lainnya. 9

Contoh Rambu


Sementara

7

Nomor Rute Jalan

2.2.3

6

Rambu yang tidak dipasang tetap dan digunakan dalam keadaan dan kegiatan tertentu. Rambu yang digunakan untuk menyatakan petunjuk nomor rute jalan.

Marka Jalan

2.2.3.1 Definisi Marka Jalan Marka jalan adalah suatu tanda yang berada dipermukaan jalan atau diatas yang berfungsi untuk mengarahkan arus lalu lintas yang membatasi daerah kepentingan lalu lintas. 2.2.3.2 Jenis dan Fungsi Marka Jalan a. Marka Membujur adalah tanda yang sejajar dengan sumbu jalan. b. Marka Melintang adalah lurus terhadap sumbu jalan, seperti pada garis henti di Zebra cross atau di persimpangan. c. Marka Sorong adalah tanda yang membentuk garis utuh yang tidak termasuk dalam pengertian marka membujur atau marka melintang, untuk menyatakan suatu daerah permukaan jalan yang bukan merupakan jalur lalu lintas kendaraan. d. Marka Lambang adalah tanda yang mengandung arti tertentu untuk menyatakan peringatan, perintah dan larangan untuk melengkapi atau menegaskan maksud yang telah disampaikan oleh rambu lalu lintas atau tanda lalu lintas lainnya.

10


Tabel 2.2 Jenis dan Fungsi Marka

No Jenis Marka Nama Marka 1 Membujur Tidak terputus / utuh Putus – putus

2

Melintang

Putus – putus dan utuh / garis ganda Putus – putus menjelang marka utuh Garis henti pada persimpangan jalan 2 arah Garis henti pada persimpangan jalan 1 arah Garis henti pada persimpangan jalan 1 arah dan dengan 3 jalur

3

Serong

Garis henti pada penyebrangan orang (zebra cross) Serong (chevron)

4

Lambang

Panah Tulisan (tanda zona selamat sekolah) Ruang henti (lambang pada Ruang Henti Khusus Sepeda Motor)

11

Gambar


2.2.4

Alat Pemberi Isyarat

2.2.4.1 Fungsi Alat Pemberi Isyarat Berfungsi untuk mengatur kendaraan atau pejalan kaki. 2.2.4.2 Bentuk Isyarat a. Lampu Tabel 2.3 Isyarat Lampu

No

Nama Lampu

Gambar

Keterangan

1

Lampu 3 warna (merah, kuning, hijau)

Isyarat lampu untuk mengatur kendaraan.

2

Lampu 2 warna (merah, kuning)

Isyarat lampu untuk mengatur pejalan kaki.

3

Lampu 2 warna (merah, kuning)

Isyarat lampu yang berkedip bersama, untuk memberi peringatan bahaya.

b. Bunyi Peluit Tabel 2.4 Isyarat Bunyi

No

Nama

1

Tanda peringatan perhatian

2

Keterangan / Tiga kali pendek.

tiupan

Tanda berhenti

Satu kali panjang.

tiupan

3

Tanda maju

Dua kali tiupan pendek.

4

Tanda minggir

Tiga kali tiupan sedang.

12


c. Gerakan Pengaturan Lalu Lintas Tabel 2.5 Isyarat Gerakan

No 1 2 3 4 5 6 7 8 9 10 11 12 2.3

Nama Stop depan arah tertentu Stop semua jurusan Stop belakang Stop depan Stop depan dan belakang Jalan kanan Jalan kiri Jalan kanan jalan kiri Percepat kanan Percepat kiri Perlambat depan Perlambat belakang

Patroli Keamanan Sekolah (PKS) 2.3.1

Definisi Patroli Keamanan Sekolah Patroli Keamanan Sekolah merupakan wadah belajar bagi para siswa dalam mencari akar masalah, keamanan, kesepakatan maupun solusi guna membangun jiwa solidaritas dan sosial guna mewujudkan rasa aman, nyaman pada kegiatan belajar mengajar.

2.3.2

Pengaturan Lalu Lintas

2.3.2.1 Definisi Pengaturan Lalu Lintas Pemberitahuan kepada pemakai jalan, terutama pada waktu ada kemacetan atau keadaan saryrat di jalan. 2.3.2.2 Tujuan Pengaturan a. Agar arus lali lintas dapat berjalan tertib. b. Mengatasi kemacetan dan depadatan lalu lintas dijalan umum. c. Mengajak untuk patut dan taat terhadap peraturan lalu lintas. d. Melakukan tindakan pertama di TKP laka lantas.

13


e. Memberi peringatan yang bersifat mendidik tentang pemakaian jalan. f. Pelayan entang masyarakat terhadap tempat penyeberangan. 2.3.3

Kelengkapan PKS Seragam, pet, manset, peluit, selempang

2.4

Multimedia 2.4.1

Definisi Multimedia Menurut Vaughan (2004), multimedia merupakan kombinasi teks, seni, suara, gambar, animasi, dan video yang disampaikan dengan komputer atau dimanipulasi secara digital dan dapat disampaikan dan/ atau dikontrol secara interaktif. Ada tiga jenis multimedia : 1. Multimedia interaktif Pengguna dapat mengontrol apa dan kapan elemen – elemen multimedia akan dikirimkan atau ditampilkan. 2. Multimedia hiperaktif Multimedia jenis ini mempunyai suatu struktur dari elemen –

elemen

terkait

dengan

pengguna

yang

dapat

mengarahkannya. 3. Multimedia linear Pengguna hanya menjadi penonton dan menikmati produk multimedia yang disajikan dari awal hingga akhir. Dari

definisi

diatas,

sebuah

sistem

digambarkan seperti pada gambar dibawah ini :

Gambar 2.1 Definisi Multimedia

14

multimedia

dapat


2.5

Metode Binanto 2.5.1

Tahapan Metode Binanto Metode Binanto secara umum terdiri dari 3(tiga) tahapan besar. Ketiga tahapan tersebut adalah tahapan analisis dan desain, tahapan implementasi, serta tahapan distribusi. Bagan tahapan metode dijelaskan pada gambar 2.2 :

Gambar 2.2 Metodologi secara ringkas dan rinci

Penjelasan Tahapan a. Analisis Tahapan Analisis menggunakan PIECES Problem–Solving Framework

(Whitten

et.

al.,

2000)

sehingga

dapat

dideskripsikan dengan mudah. Tahapan ini menjelaskan 6 hal, yaitu : 1. Tujuan dibuatnya perangkat lunak multimedia. 2. Jenis perangkat lunak multimedia yang akan dibentuk. 3. Pengguna yang dituju. 4. Kebutuhan sistem. 5. Cara atau media pendistribusian perangkat lunak multimedia yang sudah dihasilkan. 6. Mendefinisikan interaksi sistem dengan pengguna menggunakan Use Case. 15


b. Desain Tahapan ini sebenarnya tahapan yang menjekaskan beberpa hal, yaitu : 1. Desain perangkat lunak, meliputi Desain hirarki dijelaskan menggunakan diagram organisasi. Desain aliran logis dijelaskan menggunakan diagram konteks. Desain aliran data dijelaskan menggunakan diagram activity dan diagram squence. 2. Desain interaktifitas pengguna dengan perangkat lunak multimedia dan antarmuka menggunakan storyboard. 3. Desain elemen multimedia yaitu desain gambar, suara, animasi, video, dan teks. Desain elemen multimedia dalam metode ini menggunakan media grafis, antaralain desain gambar dibuat dengan media aplikasi grafis seperti corel draw. Desain suara dan video dijelaskan menggunakan storyboard. c. Pengumpulan Bahan Bahan di sisni berarti elemen – elemen multimedia yang akan dibutuhkan, misalnya gambar, suara, teks, video, dan/ animasi. Tahapan pengumpulan bahan perlu memperhatikan masalah

hak

cipta.

Sebaiknya

bahan

yang digunakan

merupakan hasil karya sendiri atau ada ijin dari pembuatannya jika bukan hasil karya dikumpulkan merupakan bahan – bahan yang sesuai dengan desain dan dibutuhkan pada tahapan selanjutnya. d. Authoring / Produksi Prototyping Tahapan ini merupakan authoring/penggabungan bahan yang sudah dikumpulkan untuk menghasilkan prototype dari perangkat lunak yang sedang dikembangkan. Penggabungan ini 16


dapat

menggunakan

perangkat

sedang

dikembangkan.

Penggabungan ini dapat menggunakan perangkat lunak authoring atau menggunakan bahasa pemrograman yang mendukung tampilan grafis dan mendukung elemen – elemen multimedia

yang

dibutuhkan.

Tahap

authoring

ini

mengimplementasikan tahap analisis dan desain yang sudah dibuat sebelumnya. Prototype yang dibuat merupakan jenis First Full-Scale, yaitu prototype yang sudah dapat beroperasi dengan baik dan lengkap fitur – fiturnya sehingga dapat diuji secara penuh. e. Pengujian Pengujian dilakukan untuk menemukan bugs dan/atau kemudahan penggunaan bagi pengguna Pengujian diperlukan agar produk yang dihasilkan tidak mengalami kegagalan ketika digunakan oleh pengguna akhir. Ada 2 langkah utama pengujian yang diadobsi dari Villamil & Molina, yaitu pengujian internal dan pengujian eksternal. Pengujian internal sebenarnya sudah terjasi ketika tahap authoring/ produksi prototype berlangsung. Dua hal penting ini diuji pada pengujian internal ini adalah navigasi aplikasi dan bantuannya serta pemrograman yang digunakan di dalamnya. Pengujian ekstenal merupakan pengujian yang dilakukan oleh orang – orang di luar pengembang. Pengujian ekternal dibagi menjadi dua, yaitu pengujian alpha dan beta. Pengujian alpha merupakan pengujian awal untuk prototype yang belum sempurna. Tujuan pengujian alpha adalah memeriksa kesesuaian antara analisis dan desain dengan prototype yang dihasilkan. Kelompok penguji alpha sebaiknya merupakan kelompok “teman” dan “musuh”. Kelompok “teman” akan memberikan masukan positif tentang prototype 17


yang akan dipertahankan, sedangkan kelompok “musuh” akan memberikan

masukan

yang

negative

untuk

perbaikan

prototype. Pengujian beta merupakan pengujian prototype yang sudah siap digunakan setelah melalui pengujian alpha. Kelompok pengujian beta sebaiknya kelompok yang terlibat pada pengembangan prototype sehingga masukan yang diberikan merupakan cerminan dari pengguna yang sebenarnya. f. Distribusi Media distribusi akan mempengaruhi bagaimana perangkat lunak akan didistribusikan sehingga file – file peragkat lunak disiapkan supada mudah ditransfer dari media distribusi yang digunakan ke komputer pengguna. Media distribusi yang dapat digunakan untuk perangkat lunak multimedia adalah CDROM/ DVD dan internet/ intranet. Pada tahap ini dibuat dokumentasi (user manual) dari perangkat lunak multimedia yang sudah siap didistribusikan. Dokumentasi pengguna merupakan hal yang sangat penting pada perangkat lunak multimedia yang berkualitas. Hal – hal yang sebaiknya disertakan pada dokumentasi pengguna adalah antaralain : 1. Instruksi untuk instansi perangkat lunak. 2. Informasi tentang file – file yang akan diinstal. 3. Catatan tentang kebutuhan sistem. 4. Peringatan tentang kemungkinan terjadi pada sistem. 5. Pernyataan hak cipta. 6. Ucapan terima kasih. 7. Catatan untuk pengajar. 18


8. Informasi tentang konten perangkat lunak. 9. Arahan untuk navigasi pada perangkat lunak. 10. Alamat email dan nomor telepon untuk memberikan komentar dan/atau saran serta untuk mendapatkan dukungan teknis. Dokumen yang akan didistribusikan dapat berupa softcopy atau hardcopy. g. Pemeliharaan Tahapan ini dapat dikatakan sebagai tahapan dukungan pada pengguna pemula yang belum mahir menggunakan perangkat lenak multimedia yang dihasilkan. Tahapan ini juga merupakan tahapan pengembangan perangkat lunak multimedia yang berkelanjutan dan terus menerus, seperti penambahan fitur dan

fungsionalitas

maupun

saluran

pendistribusian

(penambahan jenis media distribusi). 2.6

Basisdata Multimedia 2.6.1

Oracle InterMedia Oracle Intermedia adalah fitur yang memperbolehkan atau mengizinkan database oracle untuk menyimpan, mengelola, dan mengambil gambar, audio, video, atau media data heterogen lainnya secara terpadu dengan informasi lainnya. Intermedia menyediakan layanan konten media untuk oracle JDeveloper, oracle konten manajemen SDK, oracle application sever portal, dan oracle mitra.

2.6.2

Teknologi Object Relasional Teknologi objek relasional merupakan pendukung untuk memberikan dasar dan menambah objek yang kompleks, seperti audio digital, gambar, dan video untuk database.

19


Dalam intermedia, terdapat beberapa karakteristik data, antara lain : a. ORDAudio yaitu karakteristik data audio memiliki tipe objek relasional b. ORDDoc yaitu karakteristik data yang heterogen memiliki tipe objek relasional c. ORDImage yaitu karakteristik data citra memiliki tipe objek relasional d. ORDVideo yaitu karakteristik data video memiliki jenis objek relasional. Semua empat jenis menyimpan informasi sumber data dalam satu objek jenis relasional dekenal sebagai ORDSource. 2.6.3

Kapasitas InterMedia Kapasitas

dalam

intermedia

meliputi

penyimpanan,

pencarian, manajemen, dan manipulasi data multimedia yang dikelola oleh oracle database. Intermedia mendukung penyimpanan format file popular, termasuk desktop publishing gambar, dan audio streaming dan format video dalam database. Intermedia menyimpan tempat untuk menambahkan audio, gambar, dan video, atau kolom media yang heterogen lain atau objek untuk tabel yang ada, memasukkan, dan mengambil data multimedia. 2.6.4

Method – method Basis Data Multimedia Berikut adalah method – methodbasis data multimedia yang digunakan dalam setiap tipe data : Tabel 2.6 Method Basis Data Multimedia

Tipe Data ORDImage

Method checkProperties() copy() getCompressionFormat() getContentFormat() getContentLength() 20


getDicomMetadata() getPreferredFormat() getFileFormat() getHeight() getMetadata() getWidth() import() importFrom() process() processCopy() putMetadata() serProperties() setContentLength() deleteContent() setProperties() for foreign images checkProperties() getAllAttributes() getAttribute() getAudioDuration() getCompressionType() getContentLength() getDescription() getEncoding() getFormat() getMimeType() setNumberofChannels() setKnownAttribute() setProperties() setSamplingRate() setSampleSize() checkProperties() getAllAttributes() getAttribute() getBitRate() getCompressionType() getContentInLob() getContentLength() getDescription() getFormat() getFrameRate() getFrameResolution() getFrameSize() getMimeType() getWidth() getHeight() getNumberOfColors() getNumberOfFrames() getVideoDuration() import() importFrom()

ORDAudio

ORDVideo

21


processVideoCommand() setBitRate() setCompressionType() setDescription() setFormat() setMimeType() setHeight() setWidth() setFrameRate() setFrameResolution() setFrameSize() setKnownAttributes() setNumberOfColors() setNumberOfFrames()

2.8

Bahasa Pemrograman Java Server Pages (JSP) 2.8.1

Definisi Java Server Pages (JSP) Java Server Pages (JSP) adalah suatu teknologi web berbasis bahasa pemrograman java dan berjalan di fpatform java, serta merupakan nagian teknologi J2EE (Java 2 Enterprise Edition). JSP juga berupa teks dokumen yang dapat menghasilkan halaman web yang statis (HTML, XHTML, Tet, dll) dan dinamis (Kode Java).

2.8.2

Kode JSP Kode JSP pada dasarnya adalah kode HTML yang dilengkapi dengan tag – tag JSP. Gambar contoh kode JSP pada 2.26 :

Gambar 2.3 Contoh Kode JSP

22


2.8.3

Bentuk Menyisipkan Kode Java Ada 3 bentuk bagaimana menyisipkan kode java pada JSP : a. Expressions Pada saat dieksekusi akan diealuasi dan dikonversi menjadi String. String tersebut kemudian dituliskan ke browser. Format :

<%=expressions%> atau <jsp:expression>…

b. Scriptlet Scriplet digunakan untuk menyisipkan kode java pada halaman JSP. Kode Java disini sama dengan kode Java pada aplikasi java lainnya seperti eksekusi perulangan, kondisi, akses database, dll. Format

:

<%code%>

Contoh

:

<% Out.print(“Sistem Pembelajaran”); %>

c. Declaration Declaration digunakan untuk mendefinisikan variabel atau method. Biasanya digunakan bersama dengan Expressions dan Scriptlet. Format

:

<%! Declaration%>

Contoh

:

<%! String pensil; Int harga = 1000; %>

23


2.8.4

Arsitektur JSP Detail pemrosesan JSP Servlet Engine adalah sebagai berikut : a. Melakukan pemilihan (parsing) kode JSP. b. Membangkitkan kode sumber Servlet. c. Mengkompulasi kode sumber Servlet menjadi sebuah kelas. d. Membuat instant Servlet. e. Memberikan keluaran Servlet ke Web Server. Arsitektur dijelaskan pada gambar 2.27 :

Gambar 2.4 Arsitektur JSP

2.8.5

Kelebihan dan Kekurangan JSP a. Kelebihan JSP Menurut Kadir, Abdul, 2004 ada 3 kelebihan JSP : 1. Kode JSP dijalankan pada web server sehingga kode – kode JSP yang bersifat rahasia tidak terlihat di sisi client. 2. JSP merupakan teknologi yang didasarkan pada bahasa Java, sehingga mudah digunakan untuk membentuk halaman web yang bersifat dinamis. 3. JSP mendukung multi-platform sehingga memungkinkan kode dapat dipindah ke bagian platform tanpa melakukan perubahan pada kode tersebut.

24


b. Kekurangan JSP Proses kompile terhadap halaman JSP mengakibatkan client harus menunggu lebih lama pada saat pertama kali di lakukan loading. Hal ini tentu saja menyebabkan kecepatan proses JSP secara menyeluruh berkurang.

2.9

Oracle 2.9.1

Definisi Oracle Oracle Database adalah suatu perangkat lunak database yang digunakan untuk menyimpan data.

Gambar 2.5 Arsitektur Database

File-file yang terdapat pada database Oracle diorganisasikan sebagai berikut a. Control file : berisi tentang data itu sendiri, biasa dikenal dgn metadata. File ini sangat penting bagi database. b. Data files : berisi data milik user yang disimpan dlm database Oracle. c. Online Redo Log files : digunakan untuk instance recovery dari database. d. Parameter file : digunakan utk mendefinisikan bagaimana sebuah instance akan dikonfigurasikan pada saat start up. e. Password file : digunakan user untuk melakukan connect secara jarak jauh dan melakukan tindakan administratif. 25


f. Archive log files : berisi history dari redo yang sedang berjalan, digenerate oleh instance. 2.10

Notasi Pemodelan Sistem 2.10.1 PIECES Dalam

melakukan

evaluasi

sistem

informasi,

terdapat

bermacam-macam pengukuran, salah satu diantaranya adalah PIECES. PIECES merupakan kerangka kerja yang diperkenalkan oleh James Wheterbe (Whitten, 2007). Metoda PIECES yang terdiri

dari

Performance,

Information/data,

Economic,

Control/security, Efficiency, Service. Masing-masing kategori tersebut dapat dibagi lagi menjadi beberapa kriteria. Penjelasan PIECES : a. Performance Performance atau kinerja adalah suatu kemampuan sistem dalam menyelesaikan tugas dengan cepat sehingga sasaran dapat segera tercapai. Berikut indikator-indikator yang dapat menunjukkan kinerja suatu sistem informasi : 1. Throughput, dimana sistem dinilai dari banyaknya kerja yang dilakukan pada beberapa periode waktu. 2. Respon time, yaitu delay rata-rata antara transaksi dan respon dari transaksi tersebut. 3. Audibilitas, yaitu kecocokan dimana keselarasan terhadap standar dapat diperiksa. 4. Kelaziman komunikasi, yaitu tingkat dimana interface standar, protokol, dan bandwith digunakan. 5. Kelengkapan, yaitu derajat dimana implementasi penuh dari fungsi yang diharapkan tercapai.

26


6. Konsistensi,

yaitu

penggunaan

desain

dan

teknik

dokumentasi yang seragam pada keseluruhan proyek pengembangan perangkat lunak. 7. Toleransi kesalahan, yaitu kerusakan yang terjadi pada saat program mengalami kesalahan. b. Information atau Data Informasi merupakan hal penting karena dengan informasi tersebut pihak manajemen dan user dapat melakukan langkah selanjutnya. Apabila kemampuan sistem informasi baik, maka user akan mendapatkan informasi yang akurat, tepat waktu dan relevan sesuai dengan yang diharapkan. 1. Accuracy (akurat), dimana informasi yang dihasilkan memiliki ketepatan yang tinggi. 2. Relevansi informasi, dimana informasi yang dihasilkan sesuai dengan kebutuhan. 3. Penyajian informasi, dimana informasi disajikan dalam bentuk yang sesuai dan mudah diintepretasikan. 4. Fleksibilitas data, dimana informasi mudah disesuaikan dengan kebutuhan. c. Economic Pemanfaatan biaya yang digunakan dari pemanfaatan informasi. Peningkatan terhadap kebutuhan informasi yang ekonomis dapat mempengaruhi pengendalian biaya dan peningkatan manfaat terhadap sistem informasi. 1. Reusabilitas, tingkat dimana sebuah program atau bagian dari program tersebut dapat digunakan kembali di dalam aplikasi yang lain.

27


2. Sumber daya, jumlah sumber daya yang digunakan dalam pengembangan sistem, meliputi sumber daya manusia serta sumber daya ekonomi. d. Control Analisis ini digunakan untuk membandingkan sistem yang dianalisa berdasarkan pada segi integritas sistem, kemudahan akses, dan keamanan data. 1. Integritas, tingkat dimana akses ke perangkat lunak atau data oleh orang yang tidak berhak dapat dikontrol. 2. Keamanan, yaitu mempunyai mekanisme yang mengontrol atau melindungi program. e. Efficiency Efisiensi berhubungan dengan bagaimana sumber tersebut dapat digunakan secara optimal. Operasi pada suatu perusahaan dikatakan efisien atau tidak biasanya didasarkan pada tugas dan tanggung jawab dalam melaksanakan kegiatan. 1. Usabilitas, usaha yang dibutuhkan untuk mempelajari, mengoperasikan,

menyiapkan

input,

dan

menginterprestasikan output suatu program. 2. Maintanabilitas, usaha yang diperlukan untuk mencari dan membetulkan kesalahan pada sebuah program. f. Service Peningkatan pelayanan memperlihatkan kategori yang beragam. Peningkatan pelayanan yang lebih baik bagi manajemen, user dan bagian lain merupakan simbol kualitas dari suatu sistem informasi.

28


1. Akurasi, yaitu ketelitian komputasi dan control. 2. Reliabilitas,

tingkat

dimana

sebuah

program

dapat

dipercaya melakukan fungsi yang diminta. 3. Kesederhanaan, yaitu tingkat dimana sebuah program dapat dipahami tanpa kesukaran. 2.10.2 Use Case Diagram Use case diagram adalah yang menggambarkan interaksi antara sistem dengan sistem eksternal dan pengguna. Use case diagram akan menggambarkan secara grafikal pengguna sistem dan cara user berinteraksi dengan sistem (Whitten, 2004). Terdapat simbol dalam penyusunan Use Case, antaralain : Tabel 2.7 Notasi Diagram Use Case

Gambar

Nama Aktor

Use Case

Include

Extend

Association

29

Keterangan Aktor merupakan segala sesuatu yang dibutuhkan untuk berinteraksi dengan sistem untuk mengubah informasi. Aktor dapat berupa organisasi, orang atau sistem informasi yang lain atau juga mungkin adalah suatu waktu kejadian. Use case digambarkan secara grafik dengan bentuk elips horizontal dengan nama dari use case tertera dibawah atau didalam elips. Relasi use case tambahan ke sebuah use case dimana use case yang ditambahkan memerlukan use case ini untuk menjalankan fungsinya. Relasi use case tambahan ke sebuah use case dimana use case yang ditambahkan dapat berdiri sendiri walau tanpa use case tambahan itu Apa yang menghubungkan antara objek satu dengan objek yang


lainnya. Mengspesifikasikan paket yang menampilkan sistem secara terbatas.

System

2.10.3 Diagram Konteks Diagram konteks merupakan proses untuk mendokumentasikan lingkup sistem. Lingkup sistem mendefinisikan aspek bisnis yang harus didukung oleh sistem atau aplikasi dan bagaimana sistem yang dimodelkan berinteraksi dengan sistem 12 lain dan bisnis secara keseluruhan (Whitten, Bentley, Dittman, 2004). Terdapat simbol notasi dalam penyusunan Diagram Konteks, antaralain : Tabel 2.8 Notasi Diagram Konteks

No 1

Gambar

Nama Entitas Eksternal

2

Proces

3

Aliran data

30

Keterangan Entitas Eksternal dapat berupa orang/ unit terkait yang berinteraksi dengan sistem tetapi di luar sistem. Unit yang mempergunakan atau melakukan transformasi data. Komponen fisik tidak didefinisikan. Aliran data dengan arah khusus dari sumber ke tujuan


2.10.4 Diagram Activity Activity diagram adalah diagram yang menggambarkan workflow (aliran kerja) atau aktivitas dari sebuah sistem atau proses bisnis (Rosa, 2013). Mulai dengan satu node awal sebagai titik awal. 1. Menambahkan partisi jika mereka terkait dengan analisa Anda. 2. Menambahkan tindakan untuk setiap langkah besar dari kasus penggunaan (atau setiap langkah besar aktor inisiat). 3. Menambahkan arus dari setiap tindakan untuk tindakan lain, titik keputusan, atau titik akhir. untuk presisi maksimum atau makna, setiap tindakan harus memiliki hanya satu aliran masuk dan satu aliran keluar, dengan semua garpu, bergabung, keputusan, dan gabungan ditampilkan secara eksplisit. 4. Menambahkan keputusan di mana arus menyimpang dengan bolak-rute. pastikan untuk membawa mereka kembali bersama-sama dengan gabungan. 5. Tambahkan forks dan bergabung di mana kegiatan dilakukan secara paralel. 6. Terakhir dengan notasi tunggal untuk kegiatan akhir. Terdapat simbol notasi dalam penyusunan Diagram Activity, antaralain : Tabel 2.9 Notasi Diagram Activity

No 1

2

Gambar

Nama Activity

Action 31

Keterangan Memperlihatkan bagaimana masing – masing kelas antarmuka saling berinteraksi satu sama lain. State dari sistem yang


3

Initial Node

4

Activity Final Node Frok Node

5

mencerminkan eksekusi dari suatu sistem. Bagaimana objek dibentuk atau diawali. Bagaimana objek dibentuk dan dihancurkan. Satu aliran yang pada tahap tertentu berubah menjadi beberapa aliran.

2.10.5 Kelas Analisis Kelas analisis berfungsi untuk mendeskripsikan bagaimana entitas

dalam

sistem

berinteraksi.

Terdapat

notasi

dalam

penyusunan kelas analisis, antaralain : Tabel 2.10 Notasi Kelas Analisis

No Nama 1 Boundary 2

Control Class

3

Entity Class

Kegunaan Digunakan untuk menggambarkan sebuah form. Digunakan untuk menghubungkan boundary dengan tabel. Digunakan untuk mengambarkan hubungan kegiatan yang akan dilakukan.

2.10.6 Diagram Squence Diagram Sequence adalah diagram yang menggambarkan kelakuan objek pada usecase dengan mendiskripsikan waktu hidup objek dan message yang dikirimkan dan diterima antar objek (Rosa, 2013). 1. Menggambar persegi panjang yang mewakili sistem secara keseluruhan dan memperpanjang garis hidup di bawahnya. 2. Mengidentifikasi setiap aktor yang langsung memberikan masukan untuk sistem atau langsung menerima output dari sistem. 3. Memeriksa narasi usecase untuk mengidentifikasi input sistem dan output. Mengabaikan pesan di dalam sistem. Menarik setiap pesan eksternal sebagai panah horisontal dari 32


garis hidup aktor ke sistem atau dari sistem untuk aktor. Label dan atribut dalam objek bisnis. 4. Menambahkan bingkai ke indicare pesan opsional dengan kondisi. Frame juga dapat menunjukkan loop dan fragmen alternatif (ini akan dibahas dalam bab 18) 5. Mengkonfirmasi bahwa pesan ditampilkan dalam urutan yang tepat dari atas ke bawah. Terdapat simbol notasi dalam penyusunan Diagram Sequence, antaralain : Tabel 2.11 Notasi Diagram Squence

No 1

2.11

Gambar

Nama Life Line

Keterangan Objek entity antarmuka yang saling berinteraksi.

2

Aktor

3

Message

Digunakan untuk meggambarkan user / pengguna. Spesifikasi dari komunikasi antar objek yang memuat informasi – informasi tentang aktifitas yang terjadi.

Pengujian Perangkat Lunak

2.11.1 Pengertian Pengujian Perangkat Lunak Pengujian perangkat lunak merupakan suatu investigasi yang dilakukan untuk mendapatkan informasi mengenai kualitas dari produk atau layanan yang sedang diuji (under test). Pengujian perangkat lunak akan memberikan pandangan mengenai perangkat lunak secara objektif dan independen yang bermanfaat sebelum sampai ke pelamggan (Herman,2014).

33


2.11.2 Implementasi Pengujian 2.11.2.1

Pengujian Validasi Perangkat Lunak a. Pengujian Alpha Pengujian Alpha adalah pengujian yang biasa dilakukan di sisi pengembang oleh seorang pelanggan (Pressman, 2010).

Pengujian

Alpha

berfokus

pada

persyaratan

fungsional perangkat lunak. Fungsi – fungsi yang diujikan meliputi tombol – tombol menu dengan kasus yang benar dan kasus yang salah. Pengujian Alpha dapat menggunakan teknik pengujian Black Box. Pengujian Black Box juga disebut juga pengujian perilaku, berfokus pada persyaratan fungsional dari

perangkat

lunak.

Pengujian

Black

Box

untuk

memperoleh set kondisi input yang sepenuhnya akan melaksanakan semua persyaratan fungsional untuk suatu program (Pressman, 2010). b. Pengujian Beta Pengujian Beta adalah pengujian yang dilakukan pada satu atau lebih pelanggan oleh pemakai aktif perangkat lunak dalam lingkungan yang sebenarnya. Pengembang biasanya tidak ada pada pengujian ini. Pelanggan merekam semua masalah (real atau imajiner) yang ditemui selama pengujian dan melaporkan pada pengembang pada interval waktu tertentu (Pressman, 2010). Pengujian Beta dilakukan menggunakan kuisioner, pengujian dengan kuisioner dilakukan untuk mengetahui respon pengguna terhadap program yang telah dibuat. Respon dari sistem ini berupa presepsi manfaat dan mudah. Sehingga penulis menggunakan kuisioner dari 34


penelitian dari Fred F. Davis yang berfungsi untuk mengukur seberapa besar manfaat program (Perceived of Usefullness) dan kemudahan pengguna program (Perceived Ease of Use) (Davis,1989), yang terdiri dari : Tabel 2.12 Poin kuisioner Fred F. Davis

Perceived of Usefullness

Perceived Ease of Use

1. Using Chart Master in my job 1. Learning to operate Chart would enable me to accomplish Master would be easy for me. task more quickly. 2. I would find it easy to get Chart 2. Using Chart Master would Master to do what I want it to improve my job performance. do. 3. Using Chart Master in my job 3. My interaction with Chart would increase my productivity. Master would be clear and understandable. 4. Using Chart Master would enhance my effectiveness on the 4. I would fing Chart Master to be job. flexible to interact with. 5. Using Chart Master would make it 5. It would be easy for me become easter to do my job. skillful at using Chart Master. 6. I would find Chart Master usefull 6. It would be easy for me to in my job. operate Chart Master.

2.11.2.2

Pengujian Validitas dan Reliabilitas a. Pengujian Validitas Uji validitas digunakan untuk mengukur sah, atau tidaknya suau kuisioner. Suatu kuisioner dikatakan valid jika pernyataan pada kuisioner mampu untuk mengungkapkan sesuatu yang akan diukur oleh kuisioner tersebut (Ghozali,2009). Dalam penentuan layak tidaknya suatu item yang akan digunakan, biasanya dilakukan uji signifikansi koefisien korelasi pada taraf signifikansi 0,05, artinya 35


suatu item dianggap valid jika berkorelasi signifikan terhadap skor total. Teknik pengujian yang sering digunakan para peneliti untuk uji validitas adalah menggunakan korelasi Pearson (Produk Momen Pearson). Analisis ini dengan cara mengkorelasikan masing-masing skor item dengan skor total. Skor total adalah penjumlahan dari keseluruhan

item.

Item-item

pertanyaan

yang

berkorelasi signifikan dengan skor total menunjukkan item-item tersebut mampu memberikan dukungan dalam mengungkap apa yang ingin diungkap Valid. Jika r hitung ≥ r tabel (uji 2 sisi dengan sig. 0,05) maka instrumen

atau

item-item

pertanyaan

berkorelasi

signifikan terhadap skor total (dinyatakan valid). Nilai r tabel dihasilkan dari rumus (Junaidi, 2010) :

Dimana: r = nilai r tabel, t = nilai t tabel dan df = derajat bebas. Rumus Korelasi Product Moment :

36


Keterangan :

b. Pengujian Reliabilitas Reliabilitas adalah alat untuk mengukur suatu kuesioner yang merupakan indikator dari perubah atau konstruk. Suatu kuesioner dikatakan reliabel atau handal jika jawaban seseorang terhadap pernyataan adalah konsisten atau stabil dari waktu ke waktu. Reliabilitas suatu test merujuk pada derajat stabilitas, konsistensi, daya prediksi, dan akurasi. Pengukuran yang

memiliki

reliabilitas

yang

tinggi

adalah

pengukuran yang dapat menghasilkan data yang reliable (Ghozali,2009). Pengujian

reliabilitas

instrumen

dengan

menggunakan rumus Alpha Cronbach karena instrumen penelitian ini berbentuk angket dan skala bertingkat. Rumus Alpha Cronbach sevagai berikut :

37


Keterangan :

Jika nilai alpha > 0.7 artinya reliabilitas mencukupi (sufficient reliability) sementara jika alpha > 0.80 ini mensugestikan seluruh item reliabel dan seluruh tes secara konsisten memiliki reliabilitas yang kuat. Atau, ada pula

yang memaknakannya sebagai

(Ghozali, 2009) : Tabel 2.13 Kategori Reliabilitas

Interval

Kategori Reliabilitas

> 0,90

Sangat Tinggi

0,70 – 0,90

Tinggi

0,50 – 0,70

Moderat

< 0,50

Rendah

( sumber : Ghozali, 2009 )

38

berikut


BAB III ANALISA DAN DESAIN

3.1

Analisa Sistem 3.1.1

Analisis Alat Bantu Pengajaran Pengetahuan lalu lintas dipelajari oleh masyarakat luas, dari anak – anak hingga orang tua. Pada anak sekolah, pembelajaran lalu lintas dilakukan dengan cara penyampaian materi dan praktek langsung di lapangan. Selama ini pengolahan materi yang digunakan untuk media pembelajaran masih menggunakan media power point, dimana model tersebut masih sering menimbulkan kerepotan dalam pengelolaan materi karena penyimpanan yang berbeda. Untuk mengatasi permasalahan tersebut, penulis merancang alat bantu pengajaran berbasis web interaktif. Alat bantu pengajaran ini ditujukan kepada Unit Dikyasa sebagai aktor atau pembina yang menyampaikan materi sekaligus sebagai admin dalam mengelola materi pengajaran dan pelajar sebagai penerima materi. Kebutuhan sistem ini memerlukan komponen perangkat keras misalnya komputer, proyektor, sound, dan lain – lain, untuk perangkat lunak misalnya jaringan internet. Cara pendistribusian alat bantu pengajaran ini adalah memberikan hak akses kepada Unit Dikyasa selaku pembina yang sebagaimana mestinya sistem tersebut akan digunakan sebagai alat bantu pengajaran untuk anak – anak sekolah baik tingkat SD, SMP, dan SMA. Dalam menganalisis sistem ini, penulis menjelaskan dengan tahapan analisis dalam metode :

39


a. Tujuan dibuatnya perangkat lunak multimedia. Tujuan dibuatnya perangkat lunak multimedia adalah untuk membuat media pembelajaran yang digunakan Unit Dikyasa Polres Gunungkidul. b. Jenis perangkat lunak multimedia yang akan dibentuk. Perangkat multimedia yang digunakan adalah perangkat dalam bentuk aplikasi atau program yang diinstal ke komputer pengguna yang nantinya akan digunakan untuk media persentasi. c. Pengguna yang dituju. Pengguna yang dituju adalah Unit Dikyasa sebagai pembimbing atau yang menyampaikan materi dan User sebagai penerima materi. d. Kebutuhan sistem. Kebutuhan sistem antara lain adalah media dalam mempersentasikan

materi

seperti

dekstop

atau

laptop,

proyektor, sound. e. Cara atau media pendistribusian perangkat lunak multimedia yang sudah dihasilkan. Cara pendistribusian adalah dengan cara memberikan program atau sistem pembelajaran ini kepada Unit Dikyasa Polres Gunungkidul agar selanjutnya digunakan sebagai alat bantu pengajaran ke sekolah – sekolah.

40


Penulis juga menjelaskan dalam konsep PIECES, penjelasan pada tabel 3.1 : Tabel 3.1 Analisis Dengan Konsep PIECES

Jenis

Sistem yang dikembangkan

Sistem sekarang

Performance Saat ini belum alat bantu Alat / Kinerja

pengajaran multimedia.

bantu

pengajaran

berbasis yang akan dikembangkan Pembelajaran yaitu

alat

bantu

masih menggunakan Power pengajaran yang memuat Point (PPT), dimana dengan materi

lalu

lintas

dan

media tersebut Pembimbing PKS. Dengan sistem yang juga

mengalami

kurang dirancang, nantinya sistem

efisiennya

dalam akan

memberikan

menyimpan materi, karena kelengkapan

dalam

dengan PPT tidak semua pengolahan

dan

materi baik teks, video, suara penyimpanan dan gambar disimpan jadi sehingga satu.

materi

fungsi

yang

diharapkan akan tercapai. Interface

sistem

membantu dalam

akan

pengguna menjalankan

sistem,

sehingga

kesalahan

penggunaan

sistem

akan

diminimalisirkan. Information

Informasi atau data yang Alat

atau data

diberikan saat sesuai

ini

standar penulis akan memberikan

namun

jika kemudahan

dilihat dari sisi penyajian menyampaikan informasi

masih 41

pengajaran

sudah yang akan dirancang oleh

dengan

pengajaran,

bantu

dalam materi.

terdapat Dimana informasi yang


kekurangan, dimana ketika disajikan dalam bentuk ingin menyampaikan materi yang sesuai dan mudah yang berbeda – beda (teks, diinterprestasikan gambar, video, dan suara) sehingga

kerja

penyimpanannya

dapat

tidak pembimbing

menjadi satu.

dimudahkan

dan

siswa

siswi tidak merasa jenuh. Informasi yang dihasilkan akan

sesuai

dengan

kebutuhan dan memiliki ketepatan yang tinggi. Economics

Masih menggunakan media Alat power

point

,

menggunakan

bantu

pengajaran

belum memberikan media yang media baru dan meningkatkan

lainnya.

nilai

ekonomi

pembelajaran Control

Pembelajaran

yang Alat

bantu

pengajaran

dilakukan sekarang belum yang akan dirancang akan ada keamanan data untuk memiliki mengaksesnya, belum

ada

mengontrol.

integritas

karena dimana perangkat lunak sistem

yang atau data dapat dikontrol siapa

yang

berhak

mengaksesnya,

hal

ini

dilakukan untuk menjaga keamanan

demi

mengontrol

atau

melindungi

data

dan

program. Efficiency

Media yang digunakan untuk Alat melakukan

bantu

pembelajaran yang akan dirancang akan

saat ini belum digunakan mengutamakan 42

pengajaran

user


secara

optimal

banyak

karena dalam mengolah input dan

kendala

mempengaruhi output

yang output serta memberikan

input

materi

digunakan

dan cara membetulkan atau yang menangani

bila

terjadi

sehingga kesalahan pada program,

dikatakan belum efisien.

sehingga

sistem

pembelajaran

ini

akan

efisien digunakan. Services

Media yang digunakan untuk Alat

bantu

pengajaran

pembelajaran saat ini mudah yang akan dirancang oleh untuk

dipahami,

namun penulis akan memberikan

dalam pengolahan data saat ketelitian penyampaian

dan

kontrol

masih yang menjamin jalanya

mengalamimkesukaran

fungsi

karena data – data yang diminta digunakan masih terpisah.

–

sungsi

yang

oleh

user.

Program yang dirancang mempertimbangkan kesederhanaan

dimana

program nantinya dapat dipahami tanpa kesukaran.

43


3.1.2

Use Case

Gambar 3.1 Use Case

3.1.3

Definisi Aktor Tabel 3.2 Definisi Aktor

No

Aktor

Deskripsi

1

Admin

Aktor ini mampu lgin ke sistem dan mempunyai wewenang untuk tambah materi, edit materi, hapus materi, lihat materi, cari materi, dan logout dari sistem.

2

User

Aktor ini mampu masuk ke sistem sebagai user dan mempunyai wewenang untuk lihat data dan cari data.

44


3.1.4

Definisi Usecase Tabel 3.3 Definisi Usecase

No

Usecase

Deskripsi

1

Login

Admin masuk ke sistem sebagai admin

2

Tambah materi

Admin menambahkan data materi rambu ke dalam database

3

Edit materi

Admin mengubah materi yang ada di database

4

Hapus materi

Admin menghapus data materi rambu di database

5

Lihat materi

Admin dan User dapat melihat materi yang ada pada sistem

6

Cari materi

Admin dan User dapat mencari materi sesuai kata kunci yang diinputkan ke sistem

7

Logout

Admin keluar dari sistem

45


3.1.5

Skenario Usecase

3.1.5.1 Login Tabel 3.4 Skenario Login

Nama Usecase Aktor Deskripsi Usecase Kondisi Awal Kondisi Akhir Langkah

Login Admin Admin masuk ke sistem sebagai admin Belum login atau masuk ke sistem Sudah Login atau masuk ke sistem Aksi Aktor

Reaksi Sistem Skenario 1

1. Admin mengetikkan “localhost:8080/SP/LoginAdmi n.jsp” di browser 2. Sistem menampilkan form login halaman login admin 3. 4.

Admin memasukkan data username dan password Admin memilih button “Login” 5. Sistem memproses query login 6. (a) Sistem mengecek validasi data di database

Kesimpulan

*Username & Password = Benar 7. Masuk ke halaman utama Admin (berhasil login) Skenario 2 6(b), Sistem mengecek validasi data yang dimasukkan dan verifikasi jika Username & Password = Salah maka muncul gambar username dan password salah dan kembali ke langkah 3 Usecase berhenti saat admin berhasil masuk ke halaman utama admin

46


3.1.5.2 Tambah Materi Tabel 3.5 Skenario Tambah Rambu

Nama Usecase Jenis Materi Aktor Deskripsi Usecase Kondisi Awal Kondisi Akhir Langkah

Kesimpulan

Tambah Materi Rambu Admin Admin menambahkan data materi rambu ke dalam database Login ke sistem, masuk di halaman Utama Admin Data materi rambu tersimpan Aksi Aktor Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Rambu” di halaman Utama Admin 2. Sistem menampilkan halaman berisi form tambah materi rambu 3. Admin menambahkan materi rambu berupa : Nama rambu, jenis rambu, gambar rambu 4. Admin menekan button “Simpan” 5. Sistem memproses query insertRambu 6. (a) Sistem mengecek validasi data yang dimasukkan * Data = benar 7. Data baru berhasil disimpan di database (tabel Rambu) 8. Sistem menampilkan pesan “Data Rambu berhasil ditambahkan” Skenario 2 6(b), Sistem mengecek validasi data yang dimasukkan dan verifikasi = salah maka kembali ke langkah 4

Usecase berhenti saat admin berhasil menambahkan data materi rambu

47


Tabel 3.5 Skenario Tambah Marka


Kesimpulan

Tambah Materi Marka Admin Admin menambahkan data materi marka ke dalam database Login ke sistem, masuk di halaman Utama Admin Data materi marka tersimpan Aksi Aktor Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Marka” di halaman Utama Admin 2. Sistem menampilkan halaman berisi form tambah materi marka 3. Admin menambahkan materi marka berupa : Nama marka, jenis marka, gambar marka 4. Admin menekan button “Simpan” 5. Sistem memproses query tambah marka 6. (a) Sistem mengecek validasi data yang dimasukkan * Data = benar 7. Data baru berhasil disimpan di database (tabel Marka) 8. Sistem menampilkan pesan “Data Marka berhasil ditambahkan” Skenario 2 6(b), Sistem mengecek validasi data yang dimasukkan dan verifikasi = salah maka kembali ke langkah 4 Usecase berhenti saat admin berhasil menambahkan data materi marka

48


Tabel 3.7 Skenario Tambah Bunyi


Kesimpulan

Tambah Materi Audio (Isyarat Bunyi) Admin Admin menambahkan data materi bunyi ke dalam database Login ke sistem, masuk di halaman Utama Admin Data materi bunyi tersimpan Aksi Aktor Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman utama isyarat 3. Admin memilih jenis materi “Isyarat Bunyi” 4. Sistem menampilkan form tambah isyarat Bunyi 5. Admin menambahkan data bunyi : Nama bunyi, diskripsi bunyi dan audio 6. Admin menekan button “Simpan” 7. Sistem memproses query insertBunyi 8. (a) Sistem mengecek validasi data yang dimasukkan * Data = benar 9. Sistem menyimpan data baru masuk ke tabel Bunyi 10. Sistem menampilkan pesan “Data Isyarat Bunyi berhasil disimpan” Skenario 2 8(b), Sistem mengecek validasi data yang dimasukkan dan verifikasi = salah maka kembali ke langkah 4 Usecase berhenti saat admin berhasil menambahkan data materi bunyi

49


Tabel 3.8 Skenario Tambah Gerakan


Kesimpulan

Tambah Materi Video (Isyarat Gerakan) Admin Admin menambahkan data materi bunyi ke dalam database Login ke sistem, masuk di halaman Utama Admin Data materi video gerakan tersimpan Aksi Aktor Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman utama isyarat 3. Admin memilih jenis materi “Isyarat Gerakan” 4. Sistem menampilkan form tambah isyarat Gerakan 5. Admin menambahkan data bunyi : Namavideo, jenis video, diskripsi video, video 6. Admin menekan button “Simpan” 7. Sistem memproses query insertVideo 8. (a) Sistem mengecek validasi data yang dimasukkan * Data = benar 9. Sistem menyimpan data baru masuk ke tabel Video 10. Sistem menampilkan pesan “Data Isyarat Gerakan berhasil disimpan” Skenario 2 8(b), Sistem mengecek validasi data yang dimasukkan dan verifikasi = salah maka kembali ke langkah 4 Usecase berhenti saat admin berhasil menambahkan data materi gerakan

50


Tabel 3.9 Skenario Tambah Teori


Kesimpulan

Tambah Materi Teori Admin Admin menambahkan data teori ke dalam database Login ke sistem, masuk di halaman Utama Admin Data materi teori tersimpan Aksi Aktor Reaksi Sistem 1. Admin memilih jenis materi “Rambu” di halaman Utama Admin 2. Sistem menampilkan halaman berisi form tambah teori 3. Admin menambahkan materi teori berupa : Nama teori, jenis teori, materi 4. Admin menekan button “Simpan” 5. Sistem memproses query tambah teori 6. (a) Sistem mengecek validasi data yang dimasukkan * Data = benar 7. Data baru berhasil disimpan di database (tabel Rambu) 8. Sistem menampilkan pesan “Data Rambu berhasil ditambahkan” Usecase berhenti saat admin berhasil menambahkan data teori

51


Tabel 3.10 Skenario Tambah Galeri


Kesimpulan

Tambah Materi Galeri Admin Admin menambahkan data galeri ke dalam database Login ke sistem, masuk di halaman Utama Admin Data materi marka tersimpan Aksi Aktor Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Galeri” di halaman Utama Admin 2. Sistem menampilkan halaman berisi form tambah galeri 3. Admin menambahkan materi marka berupa : Nama video, jenis video,diskripsi video, video 4. Admin menekan button “Simpan” 5. Sistem memproses query tambahVideo 6. (a) Sistem mengecek validasi data yang dimasukkan * Data = benar 7. Data baru berhasil disimpan di database (tabel Video) 8. Sistem menampilkan pesan “Data Galeri berhasil ditambahkan” Skenario 2 6(b), Sistem mengecek validasi data yang dimasukkan dan verifikasi = salah maka kembali ke langkah 4 Usecase berhenti saat admin berhasil menambahkan data galeri

52


3.1.5.3 Hapus Materi Tabel 3.11 Skenario Hapus Rambu

Nama Usecase Aktor Jenis Materi Deskripsi Usecase Kondisi Awal Kondisi Akhir Langkah

Kesimpulan

Hapus Materi Admin Rambu Admin menghapus data materi rambu di database Login ke sistem, masuk di halaman Utama Admin Data materi rambu terhapus Aksi Aktor

Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Rambu” di halaman Utama Admin 2. Sistem menampilkan untuk kelola rambu berupa halaman RambuTambahProses 3. Admin memilih button “Lihat Data Rambu” 4. Sistem menampilkan halaman RambuTampil 5. Sistem memproses query tampil rambu 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data rambu 8. Admin menekan tombol “Hapus” pada data yang akan dihapus 9. Sistem memproses query hapus rambu 10. Sistem mengecek validasi data yang dipilih 11. Sistem menampilkan pesan “Data Rambu berhasil dihapus” 12. Sistem menampilkan perubahan data pada tabel di halaman Tampil Rambu Usecase berhenti saat admin berhasil menghapus data materi rambu 53


Tabel 3.12 Skenario Hapus Marka


Kesimpulan

Hapus Materi Admin Marka Admin menghapus data materi Marka di database Login ke sistem, masuk di halaman Utama Admin Data materi Marka terhapus Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Marka” di halaman Utama Admin 2. Sistem menampilkan untuk kelola Marka berupa halaman MarkaTambahProses 3. Admin memilih button “Lihat Data Marka” 4. Sistem menampilkan halaman MarkaTampil 5. Sistem memproses query tampil Marka 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data Marka 8. Admin menekan tombol “Hapus” pada data yang akan dihapus 9. Sistem memproses query hapus Marka 10. Sistem mengecek validasi data yang dipilih 11. Sistem menampilkan pesan “Data Marka berhasil dihapus” 12. Sistem menampilkan perubahan data pada tabel di halaman Tampil Marka Usecase berhenti saat admin berhasil menghapus data materi Marka

54


Tabel 3.13 Skenario Hapus Bunyi


Kesimpulan

Hapus Materi Admin Audio (Isyarat Bunyi) Admin menghapus data materi Bunyi di database Login ke sistem, masuk di halaman Utama Admin Data materi Bunyi terhapus Aksi Aktor

Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman Utama Isyarat 3. Admin memilih jenis materi “Isyarat Bunyi” di halaman Utama Isyarat 4. Sistem menampilkan untuk kelola Bunyi berupa halaman Bunyi TambahProses 5. Admin memilih button “Lihat Data Bunyi” 6. Sistem menampilkan halaman BunyiTampil 7. Sistem memproses query tampil Bunyi 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data Bunyi 10. Admin menekan tombol “Hapus” pada data yang akan dihapus 11. Sistem memproses query hapus Bunyi 12. Sistem mengecek validasi data yang dipilih 13. Sistem menampilkan pesan “Data Isyarat Bunyi berhasil dihapus” 14. Sistem menampilkan perubahan data pada tabel di halaman Tampil Bunyi Usecase berhenti saat admin berhasil menghapus data materi Bunyi

55


Tabel 3.14 Skenario Hapus Gerakan


Kesimpulan

Hapus Materi Admin Video (Isyarat Gerakan) Admin menghapus data materi Gerakan di database Login ke sistem, masuk di halaman Utama Admin Data materi Bunyi terhapus Aksi Aktor

Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman Utama Isyarat 3. Admin memilih jenis materi “Isyarat Gerakan” di halaman Utama Isyarat 4. Sistem menampilkan untuk kelola Gerakan berupa halaman Gerakan TambahProses 5. Admin memilih button “Lihat Data Gerakan” 6. Sistem menampilkan halaman GerakanTampil 7. Sistem memproses query tampil Gerakan 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data Gerakan 10. Admin menekan tombol “Hapus” pada data yang akan dihapus 11. Sistem memproses query hapus Gerakan 12. Sistem mengecek validasi data yang dipilih 13. Sistem menampilkan pesan “Data Isyarat Gerakan berhasil dihapus” 14. Sistem menampilkan perubahan data pada tabel di halaman Tampil Gerakan Usecase berhenti saat admin berhasil menghapus data materi Gerakan

56


Tabel 3.15 Skenario Hapus Galeri


Kesimpulan

Hapus Materi Admin Galeri Admin menghapus data materi Galeri di database Login ke sistem, masuk di halaman Utama Admin Data materi Galeri terhapus Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Galeri” di halaman Utama Admin 2. Sistem menampilkan untuk kelola Galeri berupa halaman GaleriTambahProses 3. Admin memilih button “Lihat Data Galeri” 4. Sistem menampilkan halaman GaleriTampil 5. Sistem memproses query tampil Galeri 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data Galeri 8. Admin menekan tombol “Hapus” pada data yang akan dihapus 9. Sistem memproses query hapus Galeri 10. Sistem mengecek validasi data yang dipilih 11. Sistem menampilkan pesan “Data Galeri berhasil dihapus” 12. Sistem menampilkan perubahan data pada tabel di halaman Tampil Galeri Usecase berhenti saat admin berhasil menghapus data materi Galeri

57


Tabel 3.16 Skenario Hapus Teori


Kesimpulan

Hapus Materi Admin Teori Admin menghapus data materi Teori di database Login ke sistem, masuk di halaman Utama Admin Data materi Teori terhapus Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Teori” di halaman Utama Admin 2. Sistem menampilkan untuk kelola Galeri berupa halaman TeoriProses 3. Admin memilih button “Lihat Data Galeri” 4. Sistem menampilkan halaman Teori Tampil 5. Sistem memproses query tampil Teori 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data Teori 8. Admin menekan tombol “Hapus” pada data yang akan dihapus 9. Sistem memproses query hapus Teori 10. Sistem mengecek validasi data yang dipilih 11. Sistem menampilkan pesan “Data Teori berhasil dihapus” 12. Sistem menampilkan perubahan data pada tabel di halaman Tampil Teori Usecase berhenti saat admin berhasil menghapus data materi Teori

58


3.1.5.4 Lihat Materi Tabel 3.17 Skenario Lihat Teori

Nama Usecase Aktor Data Jenis Materi Deskripsi Usecase Kondisi Awal Kondisi Akhir Pemicu Langkah

Kesimpulan

Lihat Materi User, Admin Teori Lalu Lintas Alat pengaturan User dapat melihat materi Lalu Lintas Masuk di halaman Utama Materi Materi Lalu Lintas berupa teori tampil Usecase ini digunakan User untuk melihat data materi rambu larangan Aksi Aktor Reaksi Sistem 1. Memilih jenis button “Lalu Lintas” pada halaman Utama Materi 2. Sistem memproses query pengertianLL 3. Validasi query yang dijalankan 4. Data teori pengertian lalu lintas tampil Usecase ini berhenti saat User selesai melihat materi yang tampil pada sistem

59


Tabel 3.18 Skenario Lihat Materi Gambar


Kesimpulan

Lihat Materi User, Admin Gambar Rambu Larangan User dapat melihat materi rambu larangan Masuk di halaman Alat Pengaturan Materi rambu larangan tampil dengan ukuran sebenarnya Usecase ini digunakan User untuk melihat data materi rambu larangan Aksi Aktor Reaksi Sistem 1. Memilih jenis materi “Rambu” pada Alat Pengaturan Lalu Lintas di halaman AlatPengaturan 2. Sistem menampilkan halaman Teori Rambu 3. Klik link “Lihat” pada macam Rambu yang akan dilihat Misal : Rambu Larangan 4. Sistem memproses query lihatLarangan 5. Validasi query yang dijalankan 6. Data rambu larangan tampil 7. Memilih data rambu larangan berupa gambar yang ingin ditampilkan dalam ukuran sebenarnya 8. Sistem menjalankan fungsi detail gambar 9. Sistem menampilkan detail gambar pada halaman RambuDetail Usecase ini berhenti saat User selesai melihat materi yang tampil pada sistem

60


Tabel 3.19 Skenario Lihat Materi Bunyi


Kesimpulan

Lihat Materi User, Admin Audio Isyarat Bunyi User dapat melihat materi isyarat bunyi Masuk di halaman Alat Pengaturan Materi isyarat bunyi tampil Usecase ini digunakan User untuk melihat data materi isyarat bunyi Aksi Aktor Reaksi Sistem 1. Memilih jenis materi “Isyarat” pada halaman Alat Pengaturan 2. Sistem menampilkan halaman Teori Isyarat 3. Memilih macam rambu, klik link “Lihat” pada materi Isyarat Bunyi 4. Sistem memproses query tampilBunyi 5. Validasi query yang dijalankan 6. Data isyarat bunyi tampil 7. Memilih data isyarat bunyi yang akan ditampilkan 8. Sistem menjalankan fungsi detail bunyi 9. Detail bunyi tampil pada halaman BunyiDetail 10. Sistem menjalankan fungsi perbesar gambar 11. Terdengar isyarat bunyi pada sistem Usecase ini berhenti saat User selesai melihat materi yang tampil pada sistem

61


Tabel 3.20 Skenario Lihat Materi Video


Kesimpulan

Lihat Materi User, Admin Video Isyarat Gerakan User dapat melihat materi isyarat gerakan Masuk di halaman Alat Pengaturan Materi isyarat gerakan tampil Usecase ini digunakan User untuk melihat data materi isyarat gerakan Aksi Aktor Reaksi Sistem 1. Memilih jenis materi “Isyarat” pada halaman Alat Pengaturan 2. Sistem menampilkan halaman Teori Isyarat 3. Memilih macam rambu, klik link “Lihat” pada materi Isyarat Gerakan 4. Sistem memproses query tampilGerakan 5. Validasi query yang dijalankan 6. Data isyarat Gerakan tampil 7. Memilih data isyarat Gerakan yang akan ditampilkan 8. Sistem menjalankan fungsi detail video 9. Detail bunyi tampil pada halaman VideoDetail 10. Sistem menjalankan fungsi perbesar gambar 11. Menampilkan atau play video Usecase ini berhenti saat User selesai melihat materi yang tampil pada sistem

62


3.1.5.5 Cari Materi Tabel 3.21 Skenario Cari Rambu Berdasarkan Jenis

Nama Usecase Aktor Jenis Materi Deskripsi Usecase Kondisi Awal Kondisi Akhir Pemicu Langkah

Kesimpulan

Cari Materi Admin dan User Rambu berdasarkan Jenis Admin dan User dapat mencari materi rambu Masuk di Halaman utama sistem Materi rambu dengan pencarian berdasarkan jenis tampil Usecase ini digunakan User untuk mencari data materi rambu berdasarkan jenis rambu yang dimasukkan Aksi Aktor Reaksi Sistem Skenario 1 1. User memilih menu “Bantuan” pada halaman Utama Sistem 2. Sistem menampilkan halaman Bantuan 3. Memilih menu cari “Rambu Jenis” 4. Sistem menampilkan halaman utama cari rambu jenis 5. Memasukkan kata kunci pencarian 6. Klik button “Telusuri” 7. Menjalankan query CariRambuJenis() 8. (a) Mengecek query yang dijalankan, Data = ada 9. Menampilkan data rambu yang dicari 8.(b) Mengecek query yang dijalankan, Data = tidak ada Usecase ini berhenti saat data yang dicari berdasarkan jenis tampil pada sistem

63


Tabel 3.22 Skenario Cari Rambu Berdasarkan Nama


Kesimpulan

Cari Materi Admin dan User Rambu berdasarkan Nama Admin dan User dapat mencari materi rambu Masuk di Halaman utama sistem Materi rambu dengan pencarian berdasarkan nama tampil Usecase ini digunakan User untuk mencari data materi rambu berdasarkan jenis rambu yang dimasukkan Aksi Aktor Reaksi Sistem Skenario 1 1. User memilih menu “Bantuan” pada halaman Utama Sistem 2. Sistem menampilkan halaman Bantuan 3. Memilih menu cari “Rambu Nama” 4. Sistem menampilkan halaman utama cari rambu nama 5. Memasukkan kata kunci pencarian 6. Klik button “Telusuri” 7. Menjalankan query CariRambuNama() 8. (a) Mengecek query yang dijalankan, Data = ada 9. Menampilkan data rambu yang dicari 8.(b) Mengecek query yang dijalankan, Data = tidak ada Usecase ini berhenti saat data yang dicari berdasarkan nama tampil pada sistem

64


Tabel 3.23 Skenario Cari Marka Berdasarkan Jenis


Kesimpulan

Cari Materi Admin dan User Marka berdasarkan Jenis Admin dan User dapat mencari materi marka Masuk di Halaman utama sistem Materi marka dengan pencarian berdasarkan jenis tampil Usecase ini digunakan User untuk mencari data materi marka berdasarkan jenis marka yang dimasukkan Aksi Aktor Reaksi Sistem Skenario 1 1. User memilih menu “Bantuan” pada halaman Utama Sistem 2. Sistem menampilkan halaman Bantuan 3. Memilih menu cari “Marka Jenis” 4. Sistem menampilkan halaman marka cari jenis utama 5. Memasukkan kata kunci pencarian 6. Klik button “Telusuri” 7. Menjalankan query CariMarkaJenis() 8. (a) Mengecek query yang dijalankan, Data = ada 9. Menampilkan data marka yang dicari 8.(b) Mengecek query yang dijalankan, Data = tidak ada Usecase ini berhenti saat data yang dicari berdasarkan jenis tampil pada sistem

65


Tabel 3.24 Skenario Cari Marka Berdasarkan Nama


Kesimpulan

Cari Materi Admin dan User Marka berdasarkan Nama Admin dan User dapat mencari materi marka Masuk di Halaman utama sistem Materi marka dengan pencarian berdasarkan nama tampil Usecase ini digunakan User untuk mencari data materi marka berdasarkan jenis marka yang dimasukkan Aksi Aktor Reaksi Sistem Skenario 1 1. User memilih menu “Bantuan” pada halaman Utama Sistem 2. Sistem menampilkan halaman Bantuan 3. Memilih menu cari “Marka Nama” 4. Sistem menampilkan halaman marka cari nama utama 5. Memasukkan kata kunci pencarian 6. Klik button “Telusuri” 7. Menjalankan query CariMarkaNama() 8. (a) Mengecek query yang dijalankan, Data = ada 9. Menampilkan data rambu yang dicari 8.(b) Mengecek query yang dijalankan, Data = tidak ada Usecase ini berhenti saat data yang dicari berdasarkan nama tampil pada sistem

66


Tabel 3.25 Skenario Cari Bunyi Berdasarkan Nama


Kesimpulan

Cari Materi Admin dan User Isyarat Bunyi berdasarkan Nama Admin dan User dapat mencari materi isyarat bunyi Masuk di Halaman utama sistem Materi isyarat bunyi dengan pencarian berdasarkan nama tampil Usecase ini digunakan User untuk mencari data materi isyarat bunyi berdasarkan jenis isyarat bunyi yang dimasukkan Aksi Aktor Reaksi Sistem Skenario 1 1. User memilih menu “Bantuan” pada halaman Utama Sistem 2. Sistem menampilkan halaman Bantuan 3. Memilih menu cari “Isyarat Bunyi Nama” 4. Sistem menampilkan halaman bunyi cari nama utama 5. Memasukkan kata kunci pencarian 6. Klik button “Telusuri” 7. Menjalankan query CariBunyiNama() 8. (a) Mengecek query yang dijalankan, Data = ada 9. Menampilkan data rambu yang dicari 8.(b) Mengecek query yang dijalankan, Data = tidak ada Usecase ini berhenti saat data yang dicari berdasarkan nama tampil pada sistem

67


Tabel 3.26 Skenario Cari Gerakan Berdasarkan Nama


Kesimpulan

Cari Materi Admin dan User Isyarat Gerakan berdasarkan Nama Admin dan User dapat mencari materi isyarat gerakan Masuk di Halaman utama sistem Materi isyarat gerakan dengan pencarian berdasarkan nama tampil Usecase ini digunakan User untuk mencari data materi isyarat gerakan berdasarkan jenis isyarat gerakan yang dimasukkan Aksi Aktor Reaksi Sistem Skenario 1 1. User memilih menu “Bantuan” pada halaman Utama Sistem 2. Sistem menampilkan halaman Bantuan 3. Memilih menu cari “Isyarat Gerakan Nama” 4. Sistem menampilkan halaman gerakan cari nama utama 5. Memasukkan kata kunci pencarian 6. Klik button “Telusuri” 7. Menjalankan query CariGerakanNama() 8. (a) Mengecek query yang dijalankan, Data = ada 9. Menampilkan data isyarat gerakan yang dicari 8.(b) Mengecek query yang dijalankan, Data = tidak ada Usecase ini berhenti saat data yang dicari berdasarkan nama tampil pada sistem

68


3.1.5.6 Edit Materi Tabel 3.27 Skenario Edit Data Identitas Rambu


Edit Materi Admin Identitas Rambu Admin mengubah data materi rambu di database Login ke sistem, masuk di halaman Utama Admin Data materi rambu berubah Aksi Aktor

Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Rambu” di halaman Utama Admin 2. Sistem menampilkan untuk kelola rambu berupa halaman RambuTambahProses 3. Admin memilih button “Lihat Data Rambu” 4. Sistem menampilkan halaman RambuTampil 5. Sistem memproses query tampil rambu 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data rambu 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman RambuEditForm 10. Admin mengubah data identitas nama rambu, jenis rambu, diskripsi rambu *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 11. Admin menekan button “Edit” 12. Sistem memproses query editData 69


Kesimpulan

13. Sistem mengecek validasi data yang dipilih 14. Sistem menampilkan pesan “Data Rambu berhasil diedit” di halaman RambuEditPesan 15. Sistem menampilkan perubahan data pada tabel di halaman RambuTampil Usecase berhenti saat admin berhasil mengubah data identitas materi rambu yang dipilih

70


Tabel 3.28 Skenario Edit Data Gambar Rambu


Edit Materi Admin Gambar Rambu Admin mengubah data materi rambu di database Login ke sistem, masuk di halaman Utama Admin Data materi rambu berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Rambu” di halaman Utama Admin 2. Sistem menampilkan untuk kelola rambu berupa halaman RambuTambahProses 3. Admin memilih button “Lihat Data Rambu” 4. Sistem menampilkan halaman RambuTampil 5. Sistem memproses query tampil rambu 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data rambu 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman RambuEditForm 10. Admin mengubah data gambar rambu 11. Admin menekan button “Edit” 12. Sistem memproses query editDataGambar 13. Sistem mengecek validasi data yang dipilih 14. Sistem menampilkan pesan “Data Rambu berhasil diedit” di halaman RambuEditPesan 71


Kesimpulan

15. Sistem menampilkan perubahan data pada tabel di halaman RambuTampil Usecase berhenti saat admin berhasil mengubah gambar materi rambu yang dipilih

72


Tabel 3.29 Skenario Edit Data Identitas dan Gambar Rambu


Edit Materi Admin Identitas dan Gambar Rambu Admin mengubah data materi rambu di database Login ke sistem, masuk di halaman Utama Admin Data materi rambu berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Rambu” di halaman Utama Admin 2. Sistem menampilkan untuk kelola rambu berupa halaman RambuTambahProses 3. Admin memilih button “Lihat Data Rambu” 4. Sistem menampilkan halaman RambuTampil 5. Sistem memproses query tampil rambu 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data rambu 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman RambuEditForm 10. Admin mengubah data identitas nama rambu, jenis rambu, diskripsi rambu, gambar rambu *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 11. Admin menekan button “Edit” 12. Sistem memproses query editData, editDataGambar 73


Kesimpulan

13. Sistem mengecek validasi data yang dipilih 14. Sistem menampilkan pesan “Data Rambu berhasil diedit” di halaman RambuEditPesan 15. Sistem menampilkan perubahan data pada tabel di halaman RambuTampil Usecase berhenti saat admin berhasil mengubah data identitas dan gambar rambu yang dipilih

74


Tabel 3.30 Skenario Edit Data Identitas Marka


Edit Materi Admin Identitas Marka Admin mengubah data materi marka di database Login ke sistem, masuk di halaman Utama Admin Data materi marka berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Marka” di halaman Utama Admin 2. Sistem menampilkan untuk kelola marka berupa halaman MarkaTambahProses 3. Admin memilih button “Lihat Data Marka” 4. Sistem menampilkan halaman MarkaTampil 5. Sistem memproses query tampil marka 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data marka 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman MarkaEditForm 10. Admin mengubah data identitas nama marka, jenis marka, diskripsi marka *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 11. Admin menekan button “Edit” 12. Sistem memproses query editData 13. Sistem mengecek validasi 75


Kesimpulan

data yang dipilih 14. Sistem menampilkan pesan “Data Marka berhasil diedit” di halaman MarkaEditPesan 15. Sistem menampilkan perubahan data pada tabel di halaman MarkaTampil Usecase berhenti saat admin berhasil mengubah data identitas materi marka yang dipilih

76


Tabel 3.31 Skenario Edit Data Gambar Marka


Edit Materi Admin Gambar Marka Admin mengubah data materi marka di database Login ke sistem, masuk di halaman Utama Admin Data materi marka berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Marka” di halaman Utama Admin 2. Sistem menampilkan untuk kelola marka berupa halaman MarkaTambahProses 3. Admin memilih button “Lihat Data Marka” 4. Sistem menampilkan halaman MarkaTampil 5. Sistem memproses query tampil marka 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data marka 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman MarkaEditForm 10. Admin mengubah data gambar marka 11. Admin menekan button “Edit” 12. Sistem memproses query editDataGambar 13. Sistem mengecek validasi data yang dipilih 14. Sistem menampilkan pesan “Data Marka berhasil diedit” di halaman MarkaEditPesan 77


Kesimpulan

15. Sistem menampilkan perubahan data pada tabel di halaman MarkaTampil Usecase berhenti saat admin berhasil mengubah gambar marka yang dipilih

78


Tabel 3.32 Skenario Edit Data Identitas dan Gambar Marka Nama Usecase Aktor Jenis Materi Deskripsi Usecase Kondisi Awal Kondisi Akhir Langkah

Edit Materi Admin Identitas dan Gambar Marka Admin mengubah data materi marka di database Login ke sistem, masuk di halaman Utama Admin Data materi marka berubah Aksi Aktor

Reaksi Sistem Skenario 1 1. Admin memilih jenis materi “Marka” di halaman Utama Admin 2. Sistem menampilkan untuk kelola marka berupa halaman MarkaTambahProses 3. Admin memilih button “Lihat Data Marka” 4. Sistem menampilkan halaman MarkaTampil 5. Sistem memproses query tampil marka 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data marka 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman MarkaEditForm 10. Admin mengubah data identitas nama marka, jenis marka, diskripsi marka, gambar marka *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 11. Admin menekan button “Edit” 12. Sistem memproses query editData, editDataGambar 79


Kesimpulan

13. Sistem mengecek validasi data yang dipilih 14. Sistem menampilkan pesan “Data Marka berhasil diedit” di halaman MarkaEditPesan 15. Sistem menampilkan perubahan data pada tabel di halaman MarkaTampil Usecase berhenti saat admin berhasil mengubah data identitas dan gambar marka yang dipilih

80


Tabel 3.33 Skenario Edit Data Identitas Bunyi


Edit Materi Admin Identitas Isyarat Bunyi Admin mengubah data materi isyarat bunyi di database Login ke sistem, masuk di halaman Utama Admin Data materi isyarat bunyi berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman UtamaIsyarat 3. Admin memilih macam isyarat, “Isyarat Bunyi” 4. Sistem menampilkan untuk kelola isyarat bunyi berupa halaman BunyiTambahProses 5. Admin memilih button “Lihat Data Isyarat Bunyi” 6. Sistem menampilkan halaman BunyiTampil 7. Sistem memproses query tampilBunyi 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data isyarat bunyi 10. Admin menekan button “Edit” pada data yang dipilih 11. Sistem menampilkan halaman BunyiEditForm 12. Admin mengubah data identitas nama bunyi, diskripsi bunyi *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 13. Admin menekan button 81


“Edit”

Kesimpulan

14. Sistem memproses query editData 15. Sistem mengecek validasi data yang dipilih 16. Sistem menampilkan pesan “Data Isyarat Bunyi berhasil diedit” di halaman BunyiEditPesan 17. Sistem menampilkan perubahan data pada tabel di halaman BunyiTampil Usecase berhenti saat admin berhasil mengubah data identitas materi isyarat bunyi yang dipilih

82


Tabel 3.34 Skenario Edit Data Audio Bunyi


Edit Materi Admin Audio Isyarat Bunyi Admin mengubah data materi isyarat bunyi di database Login ke sistem, masuk di halaman Utama Admin Data materi isyarat bunyi berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman UtamaIsyarat 3. Admin memilih macam isyarat, “Isyarat Bunyi” 4. Sistem menampilkan untuk kelola isyarat bunyi berupa halaman BunyiTambahProses 5. Admin memilih button “Lihat Data Isyarat Bunyi” 6. Sistem menampilkan halaman BunyiTampil 7. Sistem memproses query tampilBunyi 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data isyarat bunyi 10. Admin menekan button “Edit” pada data yang dipilih 11. Sistem menampilkan halaman BunyiEditForm 12. Admin mengubah data audio 13. Admin menekan button “Edit” 14. Sistem memproses query editDataAudio 15. Sistem mengecek validasi data yang dipilih 83


Kesimpulan

16. Sistem menampilkan pesan “Data Isyarat Bunyi berhasil diedit” di halaman BunyiEditPesan 17. Sistem menampilkan perubahan data pada tabel di halaman BunyiTampil Usecase berhenti saat admin berhasil mengubah audio isyarat bunyi yang dipilih

84


Tabel 3.35 Skenario Edit Data Identitas dan Audio Bunyi


Edit Materi Admin Identitas dan Audio Isyarat Bunyi Admin mengubah data materi isyarat bunyi di database Login ke sistem, masuk di halaman Utama Admin Data materi isyarat bunyi berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman UtamaIsyarat 3. Admin memilih macam isyarat, “Isyarat Bunyi” 4. Sistem menampilkan untuk kelola isyarat bunyi berupa halaman BunyiTambahProses 5. Admin memilih button “Lihat Data Isyarat Bunyi” 6. Sistem menampilkan halaman BunyiTampil 7. Sistem memproses query tampilBunyi 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data isyarat bunyi 10. Admin menekan button “Edit” pada data yang dipilih 11. Sistem menampilkan halaman BunyiEditForm 12. Admin mengubah data identitas nama bunyi, diskripsi bunyi, audio *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 13. Admin menekan button 85


“Edit”

Kesimpulan

14. Sistem memproses query editData, editDataAudio 15. Sistem mengecek validasi data yang dipilih 16. Sistem menampilkan pesan “Data Isyarat Bunyi berhasil diedit” di halaman BunyiEditPesan 17. Sistem menampilkan perubahan data pada tabel di halaman BunyiTampil Usecase berhenti saat admin berhasil mengubah data identitas dan audio isyarat bunyi yang dipilih

86


Tabel 3.36 Skenario Edit Data Identitas Gerakan


Edit Materi Admin Identitas Isyarat Gerakan Admin mengubah data materi isyarat gerakan di database Login ke sistem, masuk di halaman Utama Admin Data materi isyarat gerakan berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman UtamaIsyarat 3. Admin memilih macam isyarat, “Isyarat Gerakan” 4. Sistem menampilkan untuk kelola isyarat gerakan berupa halaman GerakanTambahProses 5. Admin memilih button “Lihat Data Isyarat Gerakan” 6. Sistem menampilkan halaman GerakanTampil 7. Sistem memproses query tampilGerakan 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data isyarat gerakan 10. Admin menekan button “Edit” pada data yang dipilih 11. Sistem menampilkan halaman GerakanEditForm 12. Admin mengubah data identitas nama video, jenis video, diskripsi video *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 87


13. Admin “Edit”

Kesimpulan

menekan

button

14. Sistem memproses query editData 15. Sistem mengecek validasi data yang dipilih 16. Sistem menampilkan pesan “Data Isyarat Gerakan berhasil diedit” di halaman GerakanEditPesan 17. Sistem menampilkan perubahan data pada tabel di halaman GerakanTampil Usecase berhenti saat admin berhasil mengubah data isyarat gerakan yang dipilih

88


Tabel 3.37 Skenario Edit Data Video Gerakan


Edit Materi Admin Video Isyarat Gerakan Admin mengubah data materi isyarat gerakan di database Login ke sistem, masuk di halaman Utama Admin Data materi isyarat gerakan berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman UtamaIsyarat 3. Admin memilih macam isyarat, “Isyarat Gerakan” 4. Sistem menampilkan untuk kelola isyarat gerakan berupa halaman GerakanTambahProses 5. Admin memilih button “Lihat Data Isyarat Gerakan” 6. Sistem menampilkan halaman GerakanTampil 7. Sistem memproses query tampilGerakan 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data isyarat gerakan 10. Admin menekan button “Edit” pada data yang dipilih 11. Sistem menampilkan halaman GerakanEditForm 12. Admin mengubah data video 13. Admin menekan button “Edit” 14. Sistem memproses query editDataVideo 15. Sistem mengecek validasi 89


Kesimpulan

data yang dipilih 16. Sistem menampilkan pesan “Data Isyarat Gerakan berhasil diedit” di halaman GerakanEditPesan 17. Sistem menampilkan perubahan data pada tabel di halaman GerakanTampil Usecase berhenti saat admin berhasil mengubah data identitas video isyarat gerakan yang dipilih

90


Tabel 3.38 Skenario Edit Data Identitas dan Video Gerakan


Edit Materi Admin Identitas dan Video Isyarat Gerakan Admin mengubah data materi isyarat gerakan di database Login ke sistem, masuk di halaman Utama Admin Data materi isyarat gerakan berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Isyarat” di halaman Utama Admin 2. Sistem menampilkan halaman UtamaIsyarat 3. Admin memilih macam isyarat, “Isyarat Gerakan” 4. Sistem menampilkan untuk kelola isyarat gerakan berupa halaman GerakanTambahProses 5. Admin memilih button “Lihat Data Isyarat Gerakan” 6. Sistem menampilkan halaman GerakanTampil 7. Sistem memproses query tampilGerakan 8. Sistem mengecek validasi data di database 9. Sistem menampilkan data isyarat gerakan 10. Admin menekan button “Edit” pada data yang dipilih 11. Sistem menampilkan halaman GerakanEditForm 12. Admin mengubah data identitas nama video, jenis video, diskripsi video, video 13. Admin menekan button “Edit” 14. Sistem memproses query 91


15. 16.

17.

Kesimpulan

Usecase berhenti saat admin berhasil video isyarat gerakan yang dipilih

92

editData, editDataVideo Sistem mengecek validasi data yang dipilih Sistem menampilkan pesan “Data Isyarat Gerakan berhasil diedit” di halaman GerakanEditPesan Sistem menampilkan perubahan data pada tabel di halaman GerakanTampil mengubah data identitas dan


Tabel 3.39 Skenario Edit Data Teori


Edit Materi Admin Teori Admin mengubah data materi teori di database Login ke sistem, masuk di halaman Utama Admin Data materi teori berubah Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih jenis materi “Teori” di halaman Utama Admin 2. Sistem menampilkan untuk kelola teori berupa halaman TeoriForm 3. Admin memilih button “Lihat Data Teori” 4. Sistem menampilkan halaman TeoriTampil 5. Sistem memproses query tampil Teori 6. Sistem mengecek validasi data di database 7. Sistem menampilkan data Teori 8. Admin menekan button “Edit” pada data yang dipilih 9. Sistem menampilkan halaman TeoriEditForm 10. Admin mengubah data identitas nama teori, jenis teori, materi *identitas yang diubah menyesuaikan kebutuhan, salah satu atau semua 11. Admin menekan button “Edit” 12. Sistem memproses query editDataTeori 13. Sistem mengecek validasi 93


Kesimpulan

data yang dipilih 14. Sistem menampilkan pesan “Data Teori berhasil diedit” di halaman TeoriEditPesan 15. Sistem menampilkan perubahan data pada tabel di halaman TeoriTampil Usecase berhenti saat admin berhasil mengubah data identitas materi teori yang dipilih

3.1.5.7 Logout Tabel 3.40 Skenario Logout

Nama Usecase Aktor Deskripsi Usecase Kondisi Awal Kondisi Akhir Langkah

Logout Admin Admin keluar dari sistem setelah melakukan kelola materi Sudah login atau masuk ke sistem Sudah terlogout atau keluar dari sistem Aksi Aktor

Reaksi Sistem

Skenario 1 1. Admin memilih menu “Logout” di halaman Utama Admin 2. Sitem sebagai admin terlogout dan menampilkan halaman login admin. Kesimpulan

Usecase berhenti saat admin terlogout dan menampilkan halaman login admin.

94


3.2

Desain 3.2.1

Desain Perangkat Lunak

3.2.1.1 Desain Hirarki Menu Diagram Organisasi Menu :

Gambar 3.2 Diagram Organisasi

95


3.2.1.2 Desain Aliran Logis 3.2.1.2.1 Diagram Konteks

Gambar 3.3 Diagram konteks

3.2.1.3 Desain Aliran Data 3.2.1.3.1 Login

Gambar 3.4 Diagram activity login Tabel 3.41 Kelas analisis Login

No 1

Nama Kelas / Tabel Tipe LoginAdmin.jsp Boundary

2

Utama Admin.jsp

Boundary

3

Web browser

Boundary

4

ProsesLogin.java

5

DataAdmin

Control Class Entity Class 96

Deskrispsi Halaman untuk memasukkan username dan password agar dapat login sebagai admin Halaman utama admin untuk melakukan kelola materi Halaman web browser untuk menjalankan link web Kelas ini sebagai controller yang mengatur proses login admin Berfungsi menyimpan data admin


Gambar 3.5 Diagram Squence Login

3.2.1.3.2 Tambah Materi a. Rambu

Gambar 3.6 Diagram Activity Tambah Rambu

97


Tabel 3.42 Kelas Analisis Tambah Rambu

No Nama Kelas / Tabel 1 UtamaAdmin.jsp

Tipe Boundary

2

RambuTambahProses.jsp Boundary

3

RambuQuery.java

Control Class

4

Rambu

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data rambu Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah tambah rambu Berfungsi menyimpan data rambu

Gambar 3.7 Diagram Sequence Tambah Rambu

Untuk fungsi Tambah Marka, Bunyi, Gerakan, Galeri, Teori ada di Lampiran 1.

98


3.2.1.3.3 Hapus Materi a. Rambu

Gambar 3.8 Diagram Activity Hapus Rambu Tabel 3.43 Kelas Analisis Hapus Rambu


Tipe Boundary

2

RambuTambahProses.jsp Boundary

3 4

RambuTampil.jsp RambuHapus.jsp

Boundary Boundary

5

RambuQuery.java

Control Class

6

Rambu

Entity Class

99

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data rambu Halaman untuk menampilkan data rambu Halaman untuk menampilkan pesan data berhasil dihapus Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah hapus rambu Berfungsi menyimpan data rambu


Gambar 3.9 Diagram Sequence Hapus Rambu

Untuk fungsi Hapus Marka, Bunyi, Gerakan, Galeri, Teori ada di Lampiran 1. 3.2.1.3.4 Lihat Materi a. Teori Mengambil contoh, lihat teori Lalu Lintas

Gambar 3.10 Diagram Activity Lihat Teori Tabel 3.44 Kelas Analisis Lihat Teori

No Nama Kelas / Tabel 1 UtamaMateri.jsp

Tipe Boundary

2

UtamaLL.jsp

Boundary

3

TeoriQuery.java

Control Class

4

Teori

Entity Class 100

Deskrispsi Halaman utama dari materi yang ada pada sistem Halaman untuk menampilkan teori materi Lalu Lintas Kelas ini sebagai controller yang mengatur proses kelola teori dalam hal ini adalah menampilkan materi teori lalu lintas Berfungsi menyimpan data terori


Gambar 3.11 Diagram Sequence Lihat Teori

b. Gambar Mengambil contoh, lihat Rambu dengan jenis Larangan

Gambar 3.12 Diagram Activity Lihat Gambar

101


Tabel 3.45 Kelas Analisis Lihat Gambar

No Nama Kelas / Tabel 1 UtamaSistem.jsp

Tipe Boundary

2

AlatPengaturan.jsp

Boundary

3

TeoriRambu.jsp

Boundary

4

TampilLarangan.jsp

Boundary

5

RambuDetail.jsp

Boundary

6

RambuQuery.java

Control Class

7

Rambu

Entity Class

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman untuk menampilkan teori alat pengaturan lalu lintas Halaman untuk menampilkan materi rambu Halaman untuk menampilkan data Rambu Larangan Halaman untuk menampilkan detail data Rambu Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah menampilkan materi teori lalu lintas Berfungsi menyimpan data rambu

Gambar 3.13 Diagram Sequence Lihat Gambar

Untuk fungsi Lihat Audio, Video ada di Lampiran 1.

102


3.2.1.3.5 Cari Materi a. Rambu

Gambar 3.14 Diagram Activity Cari Rambu Berdasarkan Jenis Tabel 3.46 Kelas Analsis Cari Rambu Berdasarkan Jenis

No 1

Nama Kelas / Tabel UtamaSistem.jsp

Tipe Boundary

2

Bantuan.jsp

Boundary

3

RambuCariJenisUtama.j sp

Boundary

4

RambuCariJenis.jsp

Boundary

5

RambuQuery.java

Control Class

6

Rambu

Entity Class 103

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman pertama untuk menampilkan bantuan sistem, gambaran dan cari materi Halaman form cari data untuk meinputkan data yang dicari berdasarkan jenis rambu Halaman untuk memproses data yang dicari dan menampilkan hasil pencarian serta form untuk menginputkan data lagi Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah cari rambu Berfungsi menyimpan data rambu


Gambar 3.15 Diagram Sequence Cari Rambu Berdasarkan Jenis

Gambar 3.16 Diagram Activity Cari Rambu Berdasarkan Nama

104


Tabel 3.47 Kelas Analisis Cari Rambu Berdasarkan Nama

No 1


Tipe Boundary

2

Bantuan.jsp

Boundary

3

RambuCariNamaUtama. jsp

Boundary

4

RambuCariNama.jsp

Boundary

5

RambuQuery.java

Control Class

6

Rambu

Entity Class

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman pertama untuk menampilkan bantuan sistem, gambaran dan cari materi Halaman form cari data untuk meinputkan data yang dicari berdasarkan nama rambu Halaman untuk memproses data yang dicari dan menampilkan hasil pencarian serta form untuk menginputkan data lagi Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah cari rambu Berfungsi menyimpan data rambu

Gambar 3.17 Diagram Sequence Cari Rambu Berdasarkan Nama

Untuk fungsi Cari Marka, Bunyi, Gerakan ada di Lampiran 1.

105


3.2.1.3.6 Edit Materi a. Rambu

Gambar 3.18 Diagram Activity Edit Identitas Rambu

106


Gambar 3.19 Diagram Activity Edit Gambar Rambu

107


Gambar 3.20 Diagram Activity Edit Identitas dan Gambar Rambu

Tabel 3.48 Kelas Analisis Edit Rambu

No Nama Kelas / Tabel 1 UtamaAdmin.jsp 2 3 4 5

Tipe Boundary

RambuTambahPros Boundary es.jsp RambuTampil.jsp Boundary RambuEditForm.jsp Boundary Boundary

6

RambuEditPesan.js p RambuQuery.java

7

Rambu

Entity Class

Control Class

108

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data rambu Halaman untuk menampilkan data rambu Halaman untuk menampilkan form berisi data yang akan diubah Halaman untuk memproses edit/ ubah data serta menampilkan pesan berhasil edit Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah edit rambu Berfungsi menyimpan data rambu


Gambar 3.21 Diagram Sequence Edit Identitas Rambu

Gambar 3.22 Diagram Sequence Edit Gambar Rambu

Gambar 3.23 Diagram Sequence Edit Identitas dan Gambar Rambu

Untuk fungsi Edit Marka, Bunyi, Gerakan, Teori ada di Lampiran 1. 109


3.2.1.2.7 Logout

Gambar 3.24 Diagram Activity Logout

Tabel 3.49 Kelas Analisis Logout


Tipe Boundary

Deskrispsi Halaman utama admin untuk melakukan kelola materi dan menu logout dari sistem

Gambar 3.25 Diagram Sequence Logout

110


3.2.1.4 Perancangan Basisdata Dalam pembangunan sistem ini, penulis merancang basisdata materi dengan menggunakan 5 tabel yaitu tabel rambu, tabel marka, tabel bunyi, tabel video, dan tabel teori.

Gambar 3.26 Perancangan Basisdata

Rincian atribut tabel pada database dijelaskan dibawah ini : a. Rambu Tabel 3.50 Atribut Rambu

No

Nama Kolom

Tipe

1

Id_ra

Varchar2(50)

Menyimpan id rambu

2

Nama_ra

Varchar2(100)

Menyimpan nama rambu

3

Jenis_ra

Varchar2(100)

Menyimpan jenis rambu

4

Dis_ra

Varchar2(2000)

Menyimpan diskripsi rambu

5

Gambar_ra

ORDImage

Menyimpan gambar rambu

6

Thumbnail_ra

ORDImage

Menyimpan thumbnail rambu

111

Fungsi


b. Marka Tabel 3.51 Atribut Marka

No

Nama Kolom

Tipe

Fungsi

1

Id_ma

Varchar2(50)

Menyimpan id marka

2

Nama_ma

Varchar2(100)

Menyimpan nama marka

3

Jenis_ma

Varchar2(100)

Menyimpan jenis marka

4

Dis_ma

Varchar2(2000)

Menyimpan diskripsi marka

5

Gambar_ma

ORDImage

Menyimpan gambar marka

6

Thumbnail_ma

ORDImage

Menyimpan thumbnail marka

c. Bunyi Tabel 3.52 Atribut Bunyi

No

Nama Kolom

Tipe

Fungsi

1

Id_bu

Varchar2(50)

Menyimpan id bunyi

2

Nama_bu

Varchar2(100)

Menyimpan nama bunyi

3

Des_bu

Varchar2(2000)

Menyimpan diskripsi bunyi

6

Audio

ORDAudio

Menyimpan audio bunyi

d. Video Tabel 3.53 Atribut Video

No

Nama Kolom

Tipe

Fungsi

1

Id_vi

Varchar2(50)

Menyimpan id video

2

Nama_vi

Varchar2(200)

Menyimpan nama video

3

Jenis_vi

Varchar2(200)

Menyimpan jenis video

4

Des_vi

Varchar2(1000)

Menyimpan diskripsi video

4

Vi

ORDVideo

Menyimpan video

112


e. Teori Tabel 3.54 Atribut Teori

No

Nama Kolom

Tipe

Fungsi

1

Id_te

Varchar2(50)

Menyimpan id teori

2

Nama_te

Varchar2(2000)

Menyimpan nama teori

3

Jenis_te

Varchar2(200)

Menyimpan jenis teori

4

Materi

Varchar2(2000)

Menyimpan materi teori

f. Data Admin Tabel 3.55 Atribut Data Admin

No

Nama Kolom

Tipe

1

Username

Varchar2(50)

Menyimpan username admin

2

Password

Varchar2(50)

Menyimpan password admin

113

Fungsi


3.2.2

Desain Interaksi

3.2.2.1 Antarmuka 1. Beranda / Utama sistem

Gambar 3.27 Antarmuka Utama Sistem

2. Bantuan

Gambar 3.28 Antarmuka Bantuan

3. Rambu Cari Jenis Utama, Marka Cari Jenis Utama

Gambar 3.29 Antarmuka Rambu Cari Jenis Utama, Marka Cari Jenis Utama

114


4. Rambu Cari Jenis, Marka Cari Jenis

Gambar 3.30 Antarmuka Rambu Cari Jenis, Marka Cari Jenis

5. Rambu Cari Nama Utama, Marka Cari Nama Utama

Gambar 3.31 Antarmuka Rambu Cari Nama Utama, Marka Cari Nama Utama

6. Rambu Cari Nama, Marka Cari Nama

Gambar 3.32 Antarmuka Rambu Cari Nama, Marka Cari Nama

115


7. Utama LL, Tata Cara Tertib

Gambar 3.33 Antarmuka Tata Cara Tertib

8. Utama PKS, Kemampuan PKS, Kelengkapan PKS

Gambar 3.34 Antarmuka Utama PKS, Kemampuan PKS, Kelengkapan PKS

9. Alat Pengaturan

Gambar 3.35 Antarmuka Alat Pengaturan

116


10. Galeri Lalu Lintas

Gambar 3.36 Antarmuka Galeri Lalu Lintas

11. Isyarat Gerak

Gambar 3.37 Antarmuka Galeri Isyarat Gerak

12. Pengaturan PKS

Gambar 3.38 Antarmuka Pengaturan PKS

117


13. Login Admin

Gambar 3.39 Antarmuka Login Admin

14. Utama Admin

Gambar 3.40 Antarmuka Utama Admin

15. Rambu Tambah Form

Gambar 3.41 Antarmuka Rambu Tambah Form

118


16. Rambu Tampil, Marka Tampil

Gambar 3.42 Antarmuka Rambu Tampil, Marka Tampil

17. Rambu Detail, Marka Detail

Gambar 3.43 Antarmuka Rambu Detail, Marka Detail

18. Bunyi Detail

Gambar 3.44 Antarmuka Bunyi Detail

119


19. Video Detail

Gambar 3.45 Antarmuka Video Detail

20. Rambu Hapus, Marka Hapus, Bunyi Hapus, Gerakan Hapus, Teori Hapus, Galeri Hapus

Gambar 3.46 Antarmuka Rambu Hapus, Marka Hapus, Bunyi Hapus, Gerakan Hapus, Teori Hapus, Galeri Hapus

21. Marka Tambah Form

Gambar 3.47 Antarmuka Marka Tambah Form

120


22. Utama Isyarat

Gambar 3.48 Antarmuka Utama Isyarat

23. Bunyi Tambah Form

Gambar 3.49 Antarmuka Bunyi Tambah Form

24. Bunyi Tampil

Gambar 3.50 Antarmuka Bunyi Tampil

121


25. Gerakan Tambah Form

Gambar 3.51 Antarmuka Gerakan Tambah Form

26. Gerakan Tampil

Gambar 3.52 Antarmuka Gerakan Tampil

27. Galeri Tambah Form

Gambar 3.53 Antarmuka Galeri Tambah Form

122


28. Galeri Tampil

Gambar 3.54 Antarmuka Galeri Tampil

29. Materi Form

Gambar 3.55 Antarmuka Materi Form

30. Materi Tampil

Gambar 3.56 Antarmuka Materi Tampil

123


31. Rambu Edit Form

Gambar 3.57 Antarmuka Rambu Edit Form

32. Marka Edit Form

Gambar 3.58 Antarmuka Marka Edit Form

33. Bunyi Edit Form

Gambar 3.59 Antarmuka Bunyi Edit Form

124


34. Gerak Edit Form

Gambar 3.60 Antarmuka Gerak Edit Form

35. User Manual

Gambar 3.61 Antarmuka User Manual

36. Utama Materi

Gambar 3.62 Antarmuka Utama Materi

125


37. Teori Rambu

Gambar 3.63 Antarmuka Teori Rambu

38. Teori Marka

Gambar 3.64 Antarmuka Teori Marka

39. Utama Isyarat

Gambar 3.65 Antarmuka Utama Isyarat

126


3.2.2.2 Storyboard Interaksi Tabel 3.56 Storyboard

Scene

Menu

1

Beranda

Halaman Utama Sistem

Aksi Aktor Menampilkan halaman utama sistem. Jika klik menu “Beranda”, akan menuju scene 1. Jika klik menu “Bantuan”, akan menuju scene 2.

2

Bantuan

Bantuan

Jika klik menu “Materi”, akan menuju scene 68. 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 gambar “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) 127

GUI


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)

128


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 129


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 9

Menu Materi

Halaman Utama Materi

Aksi Aktor 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)

10

Lalu Lintas

Utama LL

Jika klik button “Patroli Keamanan Sekolah” makaakan masuk ke halaman utama pks (scene 26) 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) 130

GUI


Jika klik menu “Galeri”, akan menuju ke halaman Galeri Lalu Lintas (scene 25) 11

Tata Cara Tertib

12

Alat Pengatu ran

Tata Cara Tertip

Menampilkan halaman Tata Cara Tertib yang berisi materi tata cara tertib berlalu lintas.

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, 131


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

17

Marka

Teori Marka

Tampil Membujur

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 ) 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)

132


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 Isyarat(scene 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 Isyarat(scene 19).

133


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 Isyarat(scene 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)

134


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).

135


29

Kelengk apan

Scene

Menu

30

Admin

Kelengkap Menampilkan halaman an PKS Kelengkapan PKS yang berisi materi kelengkapan PKS.

Halaman Login Admin

Aksi Aktor 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 136

GUI


(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)

33

Rambu Tambah Proses

Jika klik link “Lihat Data Rambu”, akan masuk ke halaman Rambu Tampil (scene 34) 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)

137


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 138


(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.

Marka Tambah Form

Menampilkan halaman Marka Tambah Form yang berisi form untuk menginputkan data marka, melihat data marka.

38

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)

139


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 140


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.

Utama Isyarat

Menampilkan halaman Utama Isyarat yang berisi jenis materi isyarat (isyarat bunyi, isyarat gerakan) yang dapat di kelola.

44

Isyarat

Jika klik menu jenis materi “Isyarat Bunyi”, akan masuk ke halaman Bunyi Tambah Form (scene 45) 141


45

Isyarat Bunyi

Bunyi Tambah Form

Jika klik menu jenis materi “Isyarat Gerakan”, akan masuk ke halaman Gerak Tambah Form (scene 56) 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)

46

Bunyi Tambah Proses

Jika klik link “Lihat Data Bunyi”, akan masuk ke halaman Bunyi Tampil (scene 47) 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 142


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.

143


50

51

Isyarat Geraka n

Bunyi Hapus

Menampilkan halaman Bunyi Hapus yang berisi pesan bahwa data marka berhasil dihapus.

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)

52

Gerak Tambah Proses

Jika klik link “Lihat Data Gerak”, akan masuk ke halaman Gerak Tampil (scene 53) 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). 144


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 Data 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.

145


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)

58

Galeri Tambah Proses

Jika klik link “Lihat Data Galeri”, akan masuk ke halaman Galeri Tampil (scene 59) 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). 146


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

61

Teori

Galeri Hapus

Menampilkan halaman Galeri Hapus yang berisi pesan bahwa data marka berhasil dihapus.

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)

62

Teori Proses

Jika klik link “Lihat Data Teori”, akan masuk ke halaman Teori Tampil (scene 62) Menampilkan halaman Teori Proses yang berisi proses tambah data Teori. Jika proses tambah berhasil, akan tampil pesan di halaman Teori Proses (scene 61)

147


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).

148


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) 149


Jika klik button “Patroli Keamanan Sekolah” makaakan masuk ke halaman utama pks (scene 26) 3.2.3

Desain Elemen Desain elemen dalam sistem ini terdiri dari desain gambar, desain video, desain audio, dan desain teks.

3.2.3.1 Storyboard Desain Elemen a. Desain Gambar Elemen gambar dibuat menggunakan aplikasi grafis yaitu Corel Draw. Gambar : Rambu larangan : dilarang parkir Tabel 3.57 Desain Gambar Rambu Dilarang Parkir

Scene Sequence 1

Beard

1

Naskah Sketsa gambar rambu dilarang parkir.

2

Pewarnaan gambar rambu dilarang parkir dengan warna merah dan hitam.

150


b. Desain Audio Audio : Isyarat bunyi peluit 2x pendek Tabel 3.58 Desain Audio Bunyi Peluit 2x Pendek

Scene

Sequence

Durasi

Naskah

1

1

00:00:01

Suara peluit 2x pendek pertama terdengar

2

00:00:02

Suara peluit 2x pendek kedua terdengar

3

00:00:03

Suara peluit 2x pendek ketiga terdengar

4

00:00:04

Suara berhenti

c. Desain Video Video : Isyarat stop depan stop belakang Tabel 3.59 Desain Video Gerakan Stop Depan Stop Belakang

Scene

Sequence

1

Beard

Durasi

Naskah

1

00:00:05

Peraga megucapkan nomor dan jenis gerakan yang akan dilakukan.

2

00:00:01

Peraga menegakan badan sebelum melakukan gerakan baru.

151


3

00:00:01

Peraga mengambil dan menempatka n peluit, bersiap meniup peluit.

4

00:00:04

Peraga melebarkan tangan ke kanan dan ke kiri sambil meniupkan peluit panjang.

5

00:00:01

Peraga menegakkan badan setelah melakukan peragaan.

d. Desain Suara Desain suara yang digunakan berupa suara peluit yang terbagi menjadi 3 macam. Penyimpanan desain audio dalam berbagai format seperti mp3, ogg. e. Desain Teks Desain teks yang digunakan dalam pembuatan sistem adalah menggunakan jenis huruf Arial dengan ukuran huruf menyesuaikan tampilan.

152


3.3

Pengumpulan Bahan Pengumpulan bahan berupa gambar, video, suara dan teks. Dari semua bahan tersebut akan diproses sesuai dengan konsep multimedia. Bahan – bahan yang digunakan berasal dari : a. Buku panduan Ada beberapa sumber yang digunakan : 1. Panduan Lalu Lintas Polres Gunungkidul tahun 2015. 2. Power Point pengajaran Lalu Lintas dan PKS. b. Data Unit Dikyasa Polres Gunungkidul Permintaan data yang berasal dari Unit Dikyasa sudah melalui persetujuan dari pihak terkait, sehingga hak cipta tidak menjadi permasalahan. c. Karya penulis Data karya sendiri ini berupa data gambar, video, dan suara yang dibuat oleh penulis dengan cara merekam atau mengambil foto di lingkungan sekitar yang berkaitan dengan Lalu Lintas dan PKS. d. Internet Data yang diperoleh dari media Internet adalah terbatas untuk melengkapi keterangan data – data yang diperoleh sebelumnya

153


BAB IV IMPLEMENTASI SISTEM

Pada tahap ini menjelaskan tentang spesifikasi perangkat keras dan lunak, implementasi basis data, dan implementasi sistem. 4.1 Authoring / Produksi Prototyping 4.1.1

Spesifikasi Perangkat Keras dan Perangkat Lunak Perangkat keras yang digunakan untuk membangun sistem adalah sebagai berikut : Processor

: Intel Atom

RAM

: 3GB

Perangkat lunak yang digunakan untuk membangun sistem adalah sebagai berikut : Sistem Operasi

: Windows 7

Bahasa Pemrograman

: Java

Aplikasi Grafis

: Corel Draw X3

Aplikasi Audio, Video

: Voice recorder, Kamera

DBMS

: Oracle 11g


4.1.2

Implementasi Basis Data Pada tahap ini dilakukan pembangunan database pada Oracle 11g untuk menunjang sistem yang dibangun. Database yang dibangun sesuai dengan perancangan yang telah dibuat pada tahap sebelumya. Berikut query untuk membuat database yang diperlukan dalam pembuatan sistem : Tabel 4.1 Create Tabel Rambu

Create Tabel

Create Tabel Rambu create table rambu( id_ra varchar2(50) not null, nama_ra varchar2(100), jenis_ra varchar2(500), dis_ra varchar2(2000), gambar_ra ORDImage, thumbnail_ra ORDImage, constraint ra_pk primary key (id_ra));

Create Id

create sequence rambu_sequence;

Tabel 4.2 Create Tabel Marka

Create Tabel

Create Tabel Marka create table MARKA( id_ma varchar2(50) not null, nama_ma varchar2(100), jenis_ma varchar2(2000), gambar_ma ORDImage, thumbnail_ma ORDImage, constraint (id_ma));

Create Id

ma_pk

primary

create sequence marka_sequence;

155

key


Tabel 4.3 Create Tabel Bunyi

Create Tabel Bunyi create table bunyi(

Create Tabel

id_bu varchar2(50) not null, nama_bu varchar2(100), des_bu varchar2(2000), audio OrdAudio, constraint bu_pk primary key (id_bu)); Create Id

create sequence bunyi_sequence;

Tabel 4.4 Create Tabel Teori

Create Tabel

Create Tabel Video create table TEORI( id_te number not null, nama_te varchar2(200), jenis_te varchar2(200), materi varchar2(2000));

Create Id

create or replace FUNCTION FTEORI RETURN VARCHAR2 AS maxid NUMBER; BEGIN select max(id_te) into maxid from teori; if maxid is null then return 1; else return maxid+1; end if; END FTEORI;

Tabel 4.5 Create Tabel Data_Admin

Create Tabel

Create Tabel Data_Admin create table DATA_ADMIN( U varchar2(50) not null, P varchar2(50) not null); 156


4.1.3

Implementasi Sistem

4.1.3.1

Utama Sistem Halaman Utama Sistem adalah halaman yang akan muncul pertama kali ketika user membuka sistem pembelajaran ini. Pada halaman ini terdapat menu Beranda, Materi, Bantuan. Pada halaman ini terdapat sekilas dan pustaka.

Gambar 4.1 Halaman Utama Sistem

Keterangan : Implementasi Sistem selanjutnya, lihat Lampiran 2.

157


4.2

Pengujian Sistem 4.2.1

Pengujian Alpha Pengujian Alpha dilakukan oleh pengembang sistem (penulis). Pengujian Alpha menggunakan uji Black Box, dimana pengujian Alpha dilakukan ketika sistem yang dibuat sudah jadi sesuai dengan awal perancangan sistem. Hasil pengujian sistem dapat dilihat di bawah ini : a. Pengujian Menu Beranda (Halaman Utama Sistem) Tabel 4.6 Pengujian menu Beranda

No 1

Input Fungsi Hasil yang Pengujian Diharapkan Klik menu Menjalankan Menampilkan Beranda menu Beranda menu Beranda dan fasilitasnya

Hasil Uji Terpenuhi

b. Pengujian Menu Bantuan (Halaman Bantuan) Tabel 4.7 Pengujian menu Bantuan

No 1

2

Input Fungsi Pengujian Klik menu Menjalankan Bantuan menu Bantuan dan fasilitasnya

Klik

menu Menjalankan 158

Hasil yang Diharapkan Menampilkan menu Bantuan dan fasilitasnya, Menu pencarian : a. Rambu Jenis b. Rambu Nama c. Marka Jenis d. Marka Nama e. Isyarat Bunyi Nama f. Isyarat Gerakan Nama Menampilkan

Hasil Uji Terpenuhi

Terpenuhi


pencarian Rambu Jenis 3

4

5

6

7

8

9

10

11

menu pencarian Rambu Jenis Klik button Mengambil Telusuri fungsi setelah input pencarian data rambu Rambu Jenis berdasarkan Jenis Klik menu Menjalankan pencarian menu Rambu pencarian Nama Rambu Nama Klik button Mengambil Telusuri fungsi setelah input pencarian data rambu Rambu Nama berdasarkan Nama Klik navigasi Menjalankan menu menu pencarian pencarian Marka Jenis Marka Jenis Klik button Mengambil Telusuri fungsi setelah input pencarian data Marka Marka Jenis berdasarkan Jenis Klik menu Menjalankan pencarian menu Marka Nama pencarian Marka Nama Klik button Mengambil Telusuri fungsi setelah input pencarian data Marka Marka Nama berdasarkan Nama Klik menu Menjalankan pencarian menu Isyarat Bunyi pencarian Nama Isyarat Bunyi Nama Klik button Mengambil Telusuri fungsi setelah input pencarian data Isyarat Isyarat Bunyi 159

menu pencarian Rambu Jenis Menampilkan data rambu dengan pencarian berdasarkan Jenis Menampilkan menu pencarian Rambu Nama Menampilkan data rambu dengan pencarian berdasarkan Nama Menampilkan menu pencarian Marka Jenis Menampilkan data Marka dengan pencarian berdasarkan Jenis Menampilkan menu pencarian Marka Nama Menampilkan data Marka dengan pencarian berdasarkan Nama Menampilkan menu pencarian Isyarat Bunyi Nama Menampilkan data Isyarat Bunyi dengan pencarian

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


12

13

14

Bunyi berdasarkan Nama Klik menu pencarian Isyarat Gerakan Nama

Nama

Menjalankan menu pencarian Isyarat Gerakan Nama Klik button Mengambil Telusuri fungsi setelah input pencarian data Isyarat Isyarat Gerakan Gerakan berdasarkan Nama. Nama Klik gambar Mengambil “User fungsi tampil Manual” file user manual

berdasarkan Nama Menampilkan menu pencarian Isyarat Gerakan Nama

Terpenuhi

Menampilkan data Isyarat Gerakan dengan pencarian berdasarkan Nama. Menampilkan file pdf user manual

Terpenuhi

Terpenuhi

c. Pengujian Menu Materi (Halaman Utama Materi) Tabel 4.8 Pengujian menu Materi

No 1

2

3

Input Fungsi Pengujian Klik menu Menjalankan Materi menu Materi

Hasil yang Hasil Uji Diharapkan Menampilkan Terpenuhi button jenis materi Lalu Lintas dan Patroli Keamanan Sekoah yang dapat dipilih. Klik menu Menjalankan Menampilkan Terpenuhi Lalu Lintas menu Lalu halaman Lalu Lintas dan lintas (Utama fungsinya. LL) dan fasilitasnya : a. Pengertian b. Tata Cara Tertib c. Alat Pengaturan d. Galeri Klik menu Menjalankan Menampilkan Terpenuhi 160


Pengertian

menu Pengertian dan fungsinya.

4

Klik menu Menjalankan Tata Cara menu Tata Tertib Cara Tertib dan fungsinya.

5

Klik menu Menjalankan Alat menu Alat Pengaturan Pengaturan dan fungsinya.

6

Klik menu macam alat pengaturan “Rambu”

7

Klik link “Lihat” Rambu Peringatan

8

Menjalankan menu Rambu dan fungsinya.

Menjalankan link “Lihat” Rambu Peringatan dan fungsinya. Klik link Menjalankan “Lihat” link “Lihat” Rambu Rambu Larangan Larangan dan 161

menu Pengertian yang berisi materi pengertian Lalu Lintas. Menampilkan menu Tata Cara Tertib yang berisi materi poin – poin Tata Cara Tertib berlalu lintas. Menampilkan menu Alat Pengaturan yang terdiri dari : a. Rambu b. Marka c. Isyarat Menampilkan menu rambu yang berisi materi pengertian dan macam – macam rambu : a. Rambu Peringatan b. Rambu Larangan c. Rambu Perhatian d. Rambu Petunjuk e. Rambu Tambahan f. Rambu Sementara Menampilkan halaman Rambu peringatan berisi jenis Rambu Peringatan Menampilkan halaman Rambu Larangan berisi jenis Rambu

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


9

10

11

12

13

14

15

fungsinya. Klik link Menjalankan “Lihat” link “Lihat” Rambu Rambu Perintah Perintah dan fungsinya. Klik link Menjalankan “Lihat” link “Lihat” Rambu Rambu Petunjuk Petunjuk dan fungsinya. Klik link Menjalankan “Lihat” link “Lihat” Rambu Rambu Tambahan Tambahan dan fungsinya. Klik link Menjalankan “Lihat” link “Lihat” Rambu Rambu Sementara Sementara dan fungsinya. Klik gambar Menjalankan rambu pada fungsi detail kolom data rambu rambu untuk lihat halaman detail Klik link Membuat “Lihat jendela Gambar” fullscreen pada detail rambu Klik menu Menjalankan macam alat menu Marka pengaturan dan “Marka” fungsinya.

162

Larangan Menampilkan halaman Rambu Perintah berisi jenis Rambu Perintah Menampilkan halaman Rambu Petunjuk berisi jenis Rambu Petunjuk Menampilkan halaman Rambu Tambahan berisi jenis Rambu Tambahan

Terpenuhi

Terpenuhi

Terpenuhi

Menampilkan halaman Rambu Sementara berisi jenis Rambu Sementara

Terpenuhi

Menampilkan halaman detail rambu berisi data yang dipilih

Terpenuhi

Menampilkan gambar rambu dalam ukuran sebenarnya.

Terpenuhi

Menampilkan menu marka yang berisi materi pengertian dan macam – macam marka : a. Marka Membujur b. Marka Melintang c. Marka Serong

Terpenuhi


16

Klik link “Lihat” Marka Membujur

17

Klik link “Lihat” Marka Melintang

18

Klik link “Lihat” Marka Serong

19

Klik link “Lihat” Marka Lambang

20

Klik gambar marka pada kolom data marka untuk lihat halaman detail Klik link “Lihat Gambar” pada detail marka Klik link “Lihat” Isyarat Lampu

21

22

23

24

d. Marka Lambang Menjalankan Menampilkan link “Lihat” halaman Marka Marka Membujur berisi Membujur jenis Marka dan Membujur fungsinya. Menjalankan Menampilkan link “Lihat” halaman Marka Marka Melintang berisi Melintang jenis Marka dan Melintang fungsinya. Menjalankan Menampilkan link “Lihat” halaman Marka Marka Serong Serong berisi dan jenis Marka fungsinya. Serong Menjalankan Menampilkan link “Lihat” halaman Marka Marka Lambang berisi Lambang dan jenis Marka fungsinya. Lambang Menjalankan Menampilkan fungsi detail halaman detail marka marka berisi data yang dipilih

Membuat jendela fullscreen

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Menampilkan gambar marka dalam ukuran sebenarnya.

Terpenuhi

Menampilkan halaman Isyarat Lampu berisi materi Isyarat Lampu Klik link Menjalankan Menampilkan “Lihat” link “Lihat” halaman Isyarat Isyarat Isyarat Bunyi Bunyi berisi Bunyi dan materi macam – fungsinya. macam Isyarat Bunyi Klik gambar Menjalankan Menampilkan

Terpenuhi

Menjalankan link “Lihat” Isyarat Lampu

163

Terpenuhi

Terpenuhi


25

26

27

28

29

30

31

32

audio pada kolom audio untuk lihat halaman detail Klik link “Lihat” Isyarat Gerakan

fungsi bunyi

detail halaman detail bunyi berisi data yang dipilih

Menjalankan link “Lihat” Isyarat Gerakan dan fungsinya.

Menampilkan halaman Isyarat Gerakan berisi materi macam – macam Isyarat Gerakan Klik menu Menjalankan Menampilkan Galeri menu Galeri menu Galeri dan yang berisi video fungsinya. lalu lintas. Klik gambar Menjalankan Menampilkan video pada fungsi detail halaman detail kolom video video video berisi data untuk lihat yang dipilih halaman detail Klik Membuat Menampilkan navigasi jendela video menjadi fullscreen fullscreen fullscreen Klik menu Menjalankan Menampilkan PKS menu PKS menu Lalu lintas dan dan fasilitasnya : fungsinya. a. Pengertian b. Kemampuan c. Pengaturan d. Kelengkapan Klik menu Menjalankan Menampilkan Pengertian menu menu Pengertian Pengertian yang berisi dan materi fungsinya. pengertian PKS. Klik menu Menjalankan Menampilkan Kemampuan menu menu Kemampuan Kemampuan dan yang berisi fungsinya. materi poin – poin KemampuanPKS Klik menu Menjalankan Menampilkan Pengaturan menu menu Pengaturan Pengaturan yang dan berisi materi : fungsinya. a. Pengertian. 164

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


33

Klik link “Lihat” pada materi Macam Pengaturan

34

Klik menu Kelengkapan

b. Tujuan c. Macam pengaturan Lalu Lintas Menjalankan Menampilkan link “Lihat” halaman Isyarat materi Gerak berisi 12 Macam gerakan Pengaturan pengaturan Lalu dan Lintas fungsinya. Menjalankan Menampilkan menu menu Kelengkapan Kelengkapan

Terpenuhi

Terpenuhi

d. Pengujian Menu Admin (Halaman Login Admin) Tabel 4.9. Pengujian menu Admin

No 1

2

3

Input Pengujian Ketikan “localhost:8 080/SP/Logi nAdmin.jsp ”di web browser Klik button “Login” dengan inputan salah Klik button “Login” dengan inputan benar

Fungsi Menjalankan menu Admin

Hasil yang Diharapkan Menampilkan form input Login

Hasil Uji Terpenuhi

Memanggil fungsi login

Menampilkan gambar pesan username dan password salah.

Terpenuhi

Memanggil fungsi login

Menampilkan halaman utama Admin

Terpenuhi

Input Fungsi Hasil yang Pengujian Diharapkan Klik menu Menjalankan Menampilkan Kelola menu Kelola menu Kelola Materi Materi materi dan

Hasil Uji

e. Pengujian Menu Kelola Materi Tabel 4.10 Pengujian menu Kelola Materi

No 1

165

Terpenuhi


2

Klik menu jenis materi “Rambu”

3

Klik button “Simpan” dengan data salah

4

Klik button “Simpan” dengan data benar

5

Klik link “Lihat Data Rambu” Klik gambar Edit pada data

6

7

Klik button “Edit”

8

Klik gambar Hapus pada data

9

Klik menu jenis materi “Marka”

fasilitasnya, Kelola : a. Rambu b. Marka c. Isyarat d. Teori e. Galeri Menjalankan Menampilkan menu jenis form Kelola materi Rambu “Rambu” Mengambil Menampilkan fungsi simpan halaman Rambu Rambu Tambah Proses dan pesan “Data Rambu Tidak Berhasil disimpan” Mengambil Menampilkan fungsi simpan halaman Rambu Rambu Tambah Proses dan pesan “Data Rambu Berhasil disimpan” Memanggil Menampilkan fungsi lihat data Rambu data Rambu Memanggil Menampilkan form Edit form edit berisi data Rambu yang dipilih Mengambil Menampilkan fungsi edit pesan “Data Rambu Rambu Berhasil Diedit” dan data di Halaman Rambu Tampil berubah Mengambil Menampilkan fungsi hapus pesan “Data Rambu Rambu Berhasil Dihapus” dan data di Halaman Rambu Tampil terhapus Menjalankan Menampilkan menu jenis form Kelola materi Marka 166

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


10

11

12

13

14

15

16

17

18

“Marka” Klik button Mengambil “Simpan” fungsi simpan dengan data Marka salah

Menampilkan halaman Marka Tambah Proses dan pesan “Data Marka Tidak Berhasil disimpan” Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Marka dengan data Marka Tambah Proses benar dan pesan “Data Marka Berhasil disimpan” Klik link Memanggil Menampilkan “Lihat Data fungsi lihat data Marka Marka” data Marka Klik gambar Memanggil Menampilkan Edit pada form Edit form edit berisi data data Marka yang dipilih Klik button Mengambil Menampilkan “Edit” fungsi edit pesan “Data Marka Marka Berhasil Diedit” dan data di Halaman Marka Tampil berubah Klik gambar Mengambil Menampilkan Hapus pada fungsi hapus pesan “Data data Marka Marka Berhasil Dihapus” dan data di Halaman Marka Tampil terhapus Klik menu Menjalankan Menampilkan jenis materi menu jenis halaman Utama “Isyarat” materi Isyarat berisi “Isyarat” pilihan kelola : a. Isyarat Bunyi b. Isyarat Gerakan Klik menu Menjalankan Menampilkan “Isyarat menu Isyarat form Kelola Bunyi” Bunyi Isyarat Bunyi Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Bunyi dengan data bunyi Tambah Proses 167

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


dan pesan “Data Isyarat Bunyi Tidak Berhasil disimpan” Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Bunyi dengan data Bunyi Tambah Proses benar dan pesan “Data Isyarat Bunyi Berhasil disimpan” Klik link Memanggil Menampilkan “Lihat Data fungsi lihat data Bunyi Bunyi” data Bunyi Klik gambar Memanggil Menampilkan Edit pada form Edit form edit berisi data data Bunyi yang dipilih Klik button Mengambil Menampilkan “Edit” fungsi edit pesan “Data Bunyi Bunyi Berhasil Diedit” dan data di Halaman Bunyi Tampil berubah Klik gambar Mengambil Menampilkan Hapus pada fungsi hapus pesan “Data data Bunyi Bunyi Berhasil Dihapus” dan data di Halaman Bunyi Tampil terhapus Klik menu Menjalankan Menampilkan “Isyarat menu Isyarat form Kelola Gerakan” Gerakan Isyarat Gerakan Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Gerak dengan data Gerakan Tambah Proses salah dan pesan “Data Isyarat Gerakan Tidak Berhasil disimpan” Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Gerak dengan data Gerakan Tambah Proses benar dan pesan “Data Isyarat Gerakan Berhasil salah

19

20

21

22

23

24

25

26

168

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


27

28

29

30

31

32

33

34

35

36

Klik link “Lihat Data Gerakan” Klik gambar Edit pada data

Memanggil fungsi lihat data Gerakan Memanggil form Edit

disimpan” Menampilkan data Gerakan

Menampilkan form edit berisi data Gerakan yang dipilih Klik button Mengambil Menampilkan “Edit” fungsi edit pesan “Data Gerakan Isyarat Gerakan Berhasil Diedit” dan data di Halaman Gerakan Tampil berubah Klik gambar Mengambil Menampilkan Hapus pada fungsi hapus pesan “Data data Gerakan Isyarat Gerakan Berhasil Dihapus” dan data di Halaman Gerakan Tampil terhapus Klik menu Menjalankan Menampilkan jenis materi menu jenis form Kelola “Teori” materi Teori “Teori” Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Teori dengan data Teori Proses dan pesan salah “Data Teori Berhasil disimpan” Klik link Memanggil Menampilkan “Lihat Data fungsi lihat data Teori Teori” data Teori Klik gambar Memanggil Menampilkan Edit pada form Edit form edit berisi data data Teori yang dipilih Klik button Mengambil Menampilkan “Edit” fungsi edit pesan “Data Teori Teori Berhasil Diedit” dan data di Halaman Teori Tampil berubah Klik gambar Mengambil Menampilkan 169

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi


37

38

39

40

41

Hapus pada fungsi hapus pesan “Data data Teori Teori Berhasil Dihapus” dan data di Halaman Teori Tampil terhapus Klik menu Menjalankan Menampilkan “Galeri” menu Galeri form Kelola Galeri Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Galeri dengan data Galeri Tambah Proses salah dan pesan “Data Galeri Tidak Berhasil disimpan” Klik button Mengambil Menampilkan “Simpan” fungsi simpan halaman Galeri dengan data Galeri Tambah Proses benar dan pesan “Data Galeri Berhasil disimpan” Klik link Memanggil Menampilkan “Lihat Data fungsi lihat data Galeri Galeri” data Galeri Klik gambar Mengambil Menampilkan Hapus pada fungsi hapus pesan “Data data Galeri Galeri Berhasil Dihapus” dan data di Halaman Galeri Tampil terhapus

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

Terpenuhi

f. Pengujian Menu Logout Tabel 4.11 Pengujian menu Logout

No 1

Input Fungsi Pengujian Klik menu Menjalankan Logout menu Logout

170

Hasil yang Diharapkan Menampilkan menu Admin

Hasil Uji Terpenuhi


4.2.2

Modifikasi Kuisioner Modifikasi Kuisioner berdasarkan penelitian dari Davis (1989) yang disesuaikan dengan sistem yang dibangun.

Tabel 4.12 Modifikasi kuisioner

Presepsi Kemanfaatan

Presepsi Kemudahan

Menggunakan Alat Bantu Pengajaran Mudah bagi saya menggunakan Alat Lalu Lintas dan PKS membuat saya Bantu Pengajaran Lalu Lintas dan PKS. dapat mengakses materi Lalu Lintas dan PKS dengan cepat. Menggunakan Alat Bantu Pengajaran Alat Bantu Pengajaran Lalu Lintas dan Lalu

Lintas

dan

PKS

akan PKS

meningkatkan performa pengajaran.

memudahkan

saya

untuk

melakukan apa yang ingin saya lakukan (lihat materi (gambar, audio, video, teks),

cari

materi,

kelola

materi

(tambah, edit, hapus)) dengan sistem ini. Menggunakan Alat Bantu Pengajaran Alat Bantu Pengajaran Lalu Lintas dan Lalu

Lintas

meningkatkan

dan

PKS

produktifitas

akan PKS mudah saya mengerti. dalam

pengajaran. Menggunakan Alat Bantu Pengajaran Interaksi dengan Alat Bantu Pengajaran Lalu

Lintas

meningkatkan

dan

PKS

efektifitas

akan Lalu Lintas dan PKS bersifat fleksibel. dalam

pengajaran. Menggunakan Alat Bantu Pengajaran Mudah bagi saya untuk menjadi mahir Lalu

Lintas

memudahkan

dan saya

PKS dalam

dapat dalam

menggunakan

Alat

Bantu

mencari Pengajaran Lalu Lintas dan PKS.

informasi materi Lalu Lintas dan PKS. Secara

keseluruhan

Alat

Bantu Mudah

bagi

saya

untuk

Pengajaran Lalu Lintas dan PKS mengoperasikan Alat Bantu Pengajaran bermanfaat bagi penjagar untuk media Lalu Lintas dan PKS. pembelajaran kepada pelajar. 171


4.2.2.1 Pengujian Validitas dan Realibilitas Agar kuisioner menghasilkan kesimpulan yang tepat dan akurat, kuisioner harus diuji validitas dan realibilitasnya. a. Uji Validitas Dengan

menggunakan

SPSS

Statistics

20,

data

diuji

validitasnya menggunakan metode Person Correlation yaitu dengan cara mengkorelasikan masing – masing sekor item dengan skor total. Skor total adalah penjumlahan dari keseluruhan item. Maka penulis membandingkan nilai r pada kolom Corrected Item Total Correlation > r tabel maka item – item pernyataan dianggap valid. Dengan jumlah sample yaitu (n) = 20. df dapat dihitung 20-2=18. Dengan df=18 dan alpha 0,05 didapat r tabel = 0,4438 (dengan melihat r tabel uji dua sisi pada df=18). Jika nilai r hitung (Corrected Item Total Correlation) lebih besar daripada r tabel dan bernilai positif, maka pernyataan pada kuisioner dinyatakan valid. Presepsi Kemudahan Tabel 4.13 Hasil Uji Validasi Kemudahan

Dari hasil diatas, dijelaskan bahwa nilai r hitung (Corrected Item Total Correlation) > r tabel (0,4438). Artinya semua pernyataan presepsi kemudahan dinyatakan valid. 172


b. Uji Reliabilitas Metode pengukuran reliabilitas adalah Cronbach’s Alpha. Data yang digunakan adalah data presepsi kemudahan. Berikut hasil dari uji reliabilitas. Presepsi Kemudahan Table 4.14 Hasil Uji Reliabilitas Kemudahan

Dari hasil data pengujian diatas didapat nilai dari Cronbach’s Alpha adalah 0,799. Maka dapat disimpulkan bahwa butir – butir pernyataan presepsi kemudahan masuk dalam interval 0,70 – 0,90 dengan kategori reliabilitas Tinggi.

173


4.2.3

Pengujian Beta Pengujian Beta dilakukan terhadap pengguna dengan menyebarkan kuisioner dari Davis (1989) yang sudah dimodifikasi kepada 20 masyarakat umum atau responden. Pengujian Beta menggunakan kuisioner presepsi Kemudahan (lihat Lampiran 4).

4.2.3.1 Hasil dan Pembahasan a. Data Hasil Kuisioner Presepsi Kemudahan dengan 6 pernyataan dan 20 responden. Tabel 4.15 Data Kemudahan

174


Hasil

jawaban

responden

kemudian

dioleh

sehingga

memperoleh gambaran sebagai berikut : Pernyataan 1 Mudah bagi saya menggunakan Alat Bantu Pengajaran Lalu Lintas dan PKS.

Tabel 4.16 Hasil Kuisioner Kemudahan Pernyataan 1

Jawaban

Bobot Jawaban (1-5) 5 4 3 2 1

Jumlah Responden 9 11 0 0 0 20

Sangat Setuju Setuju Ragu - Ragu Tidak Setuju Sangat Tidak Setuju Total Nilai Akhir (Total Hasil 1-5 / Total Jumlah Responden )

Hasil (1-5) 45 44 0 0 0 89

Total 50.56 % 49.44 % 0% 0% 0%

4.45

Gambar 4.2 Grafik Kemudahan Pernyataan 1

Dari Perhitungan tabel 5.14 diatas, dapat dianalisa bahwa secara umum, mudah bagi saya (pengajar) menggunakan Alat Bantu Pengajaran Lalu Lintas dan PKS, dibuktikan dengan nilai akhir 4,45 dari skala 1-5.

175


Pernyataan 2 Alat Bantu Pengajaran Lalu Lintas dan PKS memudahkan saya untuk melakukan apa yang ingin saya lakukan (lihat materi (gambar, audio, video, teks), cari materi, kelola materi (tambah, edit, hapus)) dengan sistem ini.


Jawaban



Jumlah Hasil Responden (1-5) 10 50 10 40 0 0 0 0 0 0 20 90

Total 55.56 % 44.44 % 0% 0% 0%

4.5


Dari Perhitungan tabel 5.15 diatas, dapat dianalisa bahwa secara umum, Alat Bantu Pengajaran Lalu Lintas dan PKS memudahkan saya (pengajar) untuk melakukan apa yang ingin saya lakukan (lihat materi (gambar, audio, video, teks), cari materi, kelola materi (tambah, edit, hapus)) dengan sistem ini, dibuktikan dengan nilai akhir 4,5 dari skala 1-5.

176


Pernyataan 3 Alat Bantu Pengajaran Lalu Lintas dan PKS mudah saya mengerti.


Jawaban




Hasil (1-5) 40 48 0 0 0 88

Total 45.45 % 54.55 % 0% 0% 0%

4.4


Dari Perhitungan tabel 5.16 diatas, dapat dianalisa bahwa secara umum, Alat Bantu Pengajaran Lalu Lintas dan PKS mudah saya (pengajar) mengerti, dibuktikan dengan nilai akhir 4,4 dari skala 15.

177


Pernyataan 4 Interaksi dengan Alat Bantu Pengajaran Lalu Lintas dan PKS bersifat fleksibel.


Jawaban




Hasil (1-5) 20 64 0 0 0 84

Total 23.81 % 76.19 % 0% 0% 0%

4.2


Dari Perhitungan tabel 5.17 diatas, dapat dianalisa bahwa secara umum, interaksi dengan Alat Bantu Pengajaran Lalu Lintas dan PKS bersifat fleksibel, dibuktikan dengan nilai akhir 4,2 dari skala 1-5.

178


Pernyataan 5 Mudah bagi saya untuk menjadi mahir dalam menggunakan Alat Bantu Pengajaran Lalu Lintas dan PKS. Tabel 4.20 Hasil Kuisioner Kemudahan Pernyataan 5

Jawaban




Hasil (1-5) 25 60 0 0 0 85

Total 29.41 % 70.59 % 0% 0% 0%

4.25


Dari Perhitungan tabel 5.18 diatas, dapat dianalisa bahwa secara umum, mudah bagi saya untuk menjadi mahir dalam menggunakan Alat Bantu Pengajaran Lalu Lintas dan PKS, dibuktikan dengan nilai akhir 4,25 dari skala 1-5.

179


Pernyataan 6 Mudah bagi saya untuk mengoperasikan Alat Bantu Pengajaran Lalu Lintas dan PKS. Tabel 4.21 Hasil Kuisioner Kemudahan Pernyataan 6

Jawaban




Hasil (1-5) 35 52 0 0 0 87

Total 40.23% 59.77 % 0% 0% 0%

4.35


Dari Perhitungan tabel 5.19 diatas, dapat dianalisa bahwa secara umum, mudah bagi saya (pengajar) untuk mengoperasikan Alat Bantu Pengajaran Lalu Lintas dan PKS, dibuktikan dengan nilai akhir 4,35 dari skala 1-5.

180


4.2.4

Hasil Pengujian Setelah melakukan pengujian, didapatkan hasil sebagai berikut : a. Pengujian Alpha Hasil pengujian Alpha menunjukan bahwa kebutuhan fungsional Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) sudah Terpenuhi. b. Pengujian Beta Hasil pengujian Beta menunjukkan bahwa pernyataan presepsi kemudahan sudah valid dan memiliki reliabilitas tinggi sehingga Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) dapat digunakan.

4.2.5

Analisa Hasil Perangkat Lunak Berdasarkan hasil implementasi Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) berbasis WEB menggunakan bahasa pemrograman Java dan Oracle 11g ini, dapat dianalisa bahwa sistem ini dapat berjalan dengan baik dengan fungsi – fungsi : a. Menambah materi rambu, marka, isyarat bunyi, isyarat gerakan, galeri, dan teori. b. Mengedit materi rambu, marka, isyarat bunyi, isyarat gerakan, dan teori. c. Menghapus nateri rambu, marka, isyarat bunyi, isyarat gerakan, galeri, dan teori. d. Melihat detail materi rambu, marka, isyarat bunyi, isyarat gerakan, dan galeri. e. Mencari materi rambu, marka, isyarat bunyi, isyarat gerakan. Dengan menggunakan method – method dalam basisdata multimedia.

181


Adapun kelebihan dan kekurangan dari Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS), antara lain : Kelebihan Sistem : a. Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) ini memiliki kemampuan audio visual dan auditory dengan menampilkan data gambar, audio, video berdasarkan materi yang dipilih. b. Materi teori, gambar, audio, video dapat sewaktu – waktu ditambah, dihapus, diedit oleh pengajar selaku admin. c. Materi yang disajikan dalam Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) sesuai dengan materi yang dibutuhkan pelajar dan panduan pembelajaran. d. Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) merupakan media pembelajaran yang baru, sebelumnya menggunakan media power poin. Dengan demikian Alat Bantu Pengajaran ini mempermudah pengelolaan materi. Kekurangan Sistem : a. Belum semua method basisdata multimedia dapat digunakan.

182


BAB V DISTRIBUSI DAN PEMELIHARAAN

5.1

Distribusi Media distribusi untuk Alat Bantu Pengajaran Lalu Lintas dan Patroli

Keamanan

Sekolah

(PKS)

adalah

melakukan

distribusi

mengunakan media intranet. Dimana komputer atau laptop harus terkoneksi dengan IP wifi satu jaringan yang sama dari komputer atau laptop yang menjadi server. 5.2

Pemeliharaan Tahap pemeliharaan pada Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) yang nantinya akan dilakukan oleh Unit Dikyasa sebagai pelaku utama pengguna media pembelajaran kepada pelajar. Pemeliharaan pertama penulis lakukan dengan cara training kepada anggota Satuan Lalu Lintas dengan menunjukan Sistem dan cara pemakaiannya, setelah proses training anggota Satuan Lalu Lintas juga melakukan penilaian dengan mengisi kuisioner, dengan hasil lihat Bab 6. Kedua pemeliharaan sistem berupa kelola materi, dapat melihat user manual dari alat bantu pengajaran ini, dengan cara klik gambar user manual (lihat pada gambar 5.1), maka akan tampil file user manual dalam format pdf (Lampiran 5).

Gambar 5.1 Button User Manual

183


BAB VI UJI KEMANFAATAN DAN KEMUDAHAN

Bab ini membahas interprestasi skor kemanfaatan dan kemudahan Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS). Uji kemanfaatan dan kemudahan dilakukan setelah melewati semua proses metode pengembangan sistem. 6.1

Data Hasil Responden Data hasil responden didapat dari pengambilan data yang dilakukan dengan menyebarkan kuisioner pada 20 anggota Satuan Lalu Lintas Polres Gunungkidul.

Modifikasi

Kuisioner

yang

digunakan

berdasarkan

penelitian dari Davis (1989). Lihat Lampiran 3. 6.2

Interprestasi Skor Setelah didapatkan data hasil uji kemanfaatan dan kemudahan, langkah selanjutnya dilakukan kategorisasi yang digunakan untuk menempatkan individu dalam kelompok – kelompok yang terpisah secara berjenjang. Jenjang yang akan digunakan adalah sangat rendah, rendah, sedang, tinggi, dan sangat tinggi. Berikut data yang diperoleh dari pengisian kuisioner oleh 20 responden : a. Tabel Kemanfaatan Tabel 6.1 Data Kemanfaatan

184


b. Tabel Kemudahan Tabel 6.2 Data Kemudahan

Berikut cara menentukan interpretasi skor : a. Menentukan skor terkecil (Xmin), dihitung berdasarkan banyak item dikalikan dengan nilai jawaban terkecil yaitu Xmin = 6 x 1 = 6. b. Menentukan skor terbesar (Xmax), dihitung berdasarkan banyak item dikalikan dengan nilai jawaban terbesar yaitu Xmax = 6 x 5 = 30 . c. Menghitung rentang skor skala yaitu Xmax – Xmin = 30 – 6 = 24 . d. Rentang skor skala dibagi dengan standar devisiasi yaitu 6 sehingga diperoleh = 24 : 6 = 4 . e. Dari nilai – nilai skor total tabel kemanfaatan kemudian akan dikategorikan menjadi 5 kategori dengan rentang tiap kategori adalah 4. Sehingga didapat tabel skor sebagai berikut : 1. Presepsi Kemanfaatan Tabel 6.3 Interprestasi Skor Presepsi Kemanfaatan

Interval x ≤ 13 14 < x ≤ 17 18 < x ≤ 21 22 < x ≤ 25 26 ≤ x

Frekuensi 0 0 0 8 12 185

Persentase 0% 0% 0% 40 % 60 %

Kategori Sangat Rendah Rendah Sedang Tinggi Sangat Tinggi


Dari hasil perhitungan tersebut maka didapatkan hasil presentase terbesar yaitu 60 % di interval 26 ≤ x pada kategori “Sangat Tinggi” Karena persentase terbesar adalah pada kategori “Sangat Tinggi” maka sistem pembelajaran yang dibangun penulis memiliki kemanfaatan yang Sangat Tinggi. 2. Presepsi Kemudahan a. Menentukan skor terkecil (Xmin), dihitung berdasarkan banyak item dikalikan dengan nilai jawaban terkecil yaitu Xmin = 6 x 1 = 6 . b. Menentukan skor terbesar (Xmax), dihitung berdasarkan banyak item dikalikan dengan nilai jawaban terbesar yaitu Xmax = 6 x 5 = 30 . c. Menghitung rentang skor skala yaitu Xmax – Xmin = 30 – 6 = 24 . d. Rentang skor skala dibagi dengan standar devisiasi yaitu 6 sehingga diperoleh = 24 : 6 = 4 . e. Dari nilai – nilai skor total tabel kemanfaatan kemudian akan dikategorikan menjadi 5 kategori dengan rentang tiap kategori adalah 4. Sehingga didapat tabel skor sebagai berikut : Tabel 6.4 Interprestasi Skor Presepsi Kemudahan

Interval x ≤ 13 14 < x ≤ 17 18 < x ≤ 21 22 < x ≤ 25 26 ≤ x

Frekuensi 0 0 0 5 15

Persentase 0% 0% 0% 25 % 75 %

Kategori Sangat Rendah Rendah Sedang Tinggi Sangat Tinggi

Dari hasil perhitungan tersebut maka didapatkan hasil presentase terbesar yaitu 75 % di interval 26 ≤ x pada kategori “Sangat Tinggi” Karena persentase terbesar adalah pada kategori “Sangat Tinggi” maka sistem pembelajaran yang dibangun penulis memiliki kemudahan yang Sangat Tinggi. 186


BAB VII PENUTUP

7.1

Kesimpulan Berdasarkan hasil analisa, desain, implementasi, dan pengujian sistem ini dapat disimpulkan bahwa : a. Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) berhasil dibuat menggunakan metode Binanto. b. Berdasarkan uji coba dengan pengguna Alat Bantu Pengajaran Lalu Lintas dan Patroli Keamanan Sekolah (PKS) ini, diperoleh bahwa : 1. Sistem memiliki tingkat kemanfaatan yang sangat tinggi. 2. Sistem memiliki tingkat kemudahan yang sangat tinggi.

7.2

Saran Saran yang penulis dapat berikan dalam mengembangkan sistem ini adalah : a. Menambahkan soal evaluasi untuk pelajar.

187


DAFTAR PUSTAKA

[1]

Whitten, J.L., Bentley, L.D., Barlow, V.M. 2004. System Analysis & Design Methods, Sixth Edition, Irwin.

[2]

Rusman. 2012. Model - Model Pembelajaran. Depok : PT Rajagrafindo Persada. –

[3]

Binanto, Iwan. 2010. Multimedia Digital Pengembangannya. Yogyakarta. Penerbit Andi.

[4]

Gunungkidul, Polres. 2015. Panduan Lalu Lintas.Yogyakarta.

[5]

Iman, G. 2009. Aplikasi Analisis Multivariate Dengan Program SPSS. Edisi Keempat. Semarang: Badan Penerbit Universitas Diponegoro.

[6]

Pressman, R.S. 2010. Software Engineering : a practitioner’s approach, McGraw-Hill, New York, Halaman 450, 468, 469, 495.

[7]

Davis, F.D. 1989. Perceived Usefulness, Perceived Ease of Use dan Acceptance of Information System Technology. MIS Quartery, Vol. 13, No. 3, h.319-339.

[8]

Rosa, A. S. dan Shalahuddin, M. 2013. Rekayasa Perangkat Lunak Terstruktur Dan Berorientasi Objek. Informatika. Bandung

[9]

Juansyah, Pengertian Sistem Informasi http://juansyah.wordpress.com/2013/03/31/pengertian-sistem-informasi/ [11 November 2015].

[10]

Hernawan, S.A, SN. 2014. Urgensi Pengujian Pada Kemajemukan Perangkat Lunak Dalam Multi Perspektif, KomuniTi Vol VI No 1 Maret 2014.Tersedia : https://publikasiilmiah.ums.ac.id/bitstream/handle/11617/4489/3_Hernawa n%20Sulistyanto.pdf?sequence=1 [28 September 2016].

[11]

Refi, M. Nelly, I. 2013. Pembangunan Game First Person Shooter 3D Alien Hunter, Jurnal Ilmiah Komputer dan Informatika(KOMPUTA) Vol 2 No 1 Maret 2013 ISSN:2089-9033. Tersedia : https://www.academia.edu/14475609/PEMBANGUNAN_GAME_FIRST _PERSON_SHOOTER_3D_ALIEN_HUNTER [28 September 2016].

[12]

BINUS. 2014. Uji Validitas dan Reliabilitas. Tersedia : http://qmc.binus.ac.id/2014/11/01/u-j-i-v-a-l-i-d-i-t-a-s-d-a-n-u-j-i-r-e-l-ia-b-i-l-i-t-a-s/ [30 September 2016]. 188

Dasar

Teori

dan


[13]

Tabel r. Tersedia : https://junaidichaniago.files.wordpress.com/2010/05/tabel-r.pdf [11 November 2016]

[14]

Prastowo, S.L. Program Bantu Pembelajaran Biologi Tingkat Sekolah Menengah Pertama (SMP) Berbasis Multimedia. Universitas Sanata Dharma. Yogyakarta.

[15]

Trimuriyatin, Venti. (2015). Sistem Pembelajaran Kebudayaan Indonesia. Universitas Sanata Dharma. Yogyakarta.

189


LAMPIRAN LAMPIRAN 1 : Desain Diagram

1.1

Tambah Materi a. Marka

Gambar Diagram activity Tambah Marka

Tabel Kelas analisis Tambah Marka


Tipe Boundary

2

MarkaTambahProses.jsp

Boundary

3

MarkaQuery.java

Control Class

4

Marka

Entity Class

190

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data marka Kelas ini sebagai controller yang mengatur proses kelola marka dalam hal ini adalah tambah marka Berfungsi menyimpan data marka


Gambar Diagram sequence Tambah Marka

b. Bunyi

Gambar Diagram activity Tambah Bunyi

191


Tabel Kelas analisis Tambah Bunyi


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

3

BunyiTambahProses.jsp

Boundary

4

BunyiQuery.java

Control Class

5

Bunyi

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman utama isyarat untuk menampilkan pilihan jenis kelola materi Halaman untuk memproses tambah data bunyi Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah tambah bunyi Berfungsi menyimpan data bunyi

Gambar Diagram activity Tambah Bunyi

192


c. Gerakan

Gambar Diagram activity Tambah Gerakan

Tabel Kelas analisis Tambah Gerakan


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

3

GerakanTambahProses.jsp Boundary

4

VideoQuery.java

Control Class

5

Video

Entity Class

193

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman utama isyarat untuk menampilkan pilihan jenis kelola materi Halaman untuk memproses tambah data video gerakan Kelas ini sebagai controller yang mengatur proses kelola video dalam hal ini adalah tambah video gerakan Berfungsi menyimpan data video gerakan


Gambar Diagram sequence Tambah Gerakan

d. Galeri

Gambar Diagram activity Tambah Galeri

194


Tabel Kelas analisis Tambah Galeri


Tipe Boundary

2

GaleriTambahProses.jsp

Boundary

3

VideoQuery.java

Control Class

4

Video

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data video gerakan Kelas ini sebagai controller yang mengatur proses kelola video dalam hal ini adalah tambah video gerakan Berfungsi menyimpan data video gerakan

Gambar Diagram sequence Tambah Galeri

195


e. Teori

Gambar Diagram activity Tambah Teori

Tabel Kelas analisis Tambah Teori


Tipe Boundary

2

TeoriTambahProses.jsp

Boundary

3

TeoriQuery.java

Control Class

4

Teori

Entity Class

196

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data teori Kelas ini sebagai controller yang mengatur proses kelola teori dalam hal ini adalah tambah teori Berfungsi menyimpan data teori


Gambar Diagram sequence Tambah Teori

1.2

Hapus Materi a. Marka

Gambar Diagram activity Hapus Marka

197


Tabel Kelas analsis Hapus Marka


Tipe Boundary

2


Boundary

3 4

MarkaTampil.jsp MarkaHapus.jsp

Boundary Boundary

5

MarkaQuery.java

Control Class

6

Marka

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data marka Halaman untuk menampilkan data marka Halaman untuk menampilkan pesan data berhasil dihapus Kelas ini sebagai controller yang mengatur proses kelola marka dalam hal ini adalah hapus marka Berfungsi menyimpan data marka

Gambar Diagram sequence Hapus Marka

198


b. Bunyi

Gambar Diagram activity Hapus Bunyi

Tabel Kelas analsisi Hapus Bunyi


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

2


Boundary

3 4

BunyiTampil.jsp BunyiHapus.jsp

Boundary Boundary

5

BunyiQuery.java

Control Class

6

Bunyi

Entity Class 199

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman utama isyarat untuk menampilkan pilihan jenis kelola materi Halaman untuk memproses tambah data bunyi Halaman untuk menampilkan data bunyi Halaman untuk menampilkan pesan data berhasil dihapus Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah hapus bunyi Berfungsi menyimpan data bunyi


Gambar Diagram sequence Hapus Marka

c. Gerakan

Gambar Diagram activity Hapus Gerakan

200


Tabel Kelas analisis Hapus Gerakan


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

2

GerakanTambahProses.jsp Boundary

3

GerakanTampil.jsp

Boundary

4

GerakanHapus.jsp

Boundary

5

GerakanQuery.java

Control Class

6

Video

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman utama isyarat untuk menampilkan pilihan jenis kelola materi Halaman untuk memproses tambah data gerakan Halaman untuk menampilkan data gerakan Halaman untuk menampilkan pesan data berhasil dihapus Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah hapus gerakan Berfungsi menyimpan data gerakan

Gambar Diagram sequence Hapus Gerakan

201


d. Galeri

Gambar Diagram activity Hapus Galeri

Tabel Kelas analisis Hapus Galeri


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

2

GaleriTambahProses.jsp

Boundary

3 4

GaleriTampil.jsp GaleriHapus.jsp

Boundary Boundary

5

GaleriQuery.java

Control Class

6

Video

Entity Class 202

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman utama isyarat untuk menampilkan pilihan jenis kelola materi Halaman untuk memproses tambah data galeri Halaman untuk menampilkan data galeri Halaman untuk menampilkan pesan data berhasil dihapus Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah hapus galeri Berfungsi menyimpan data galeri


Gambar Diagram sequence Hapus Galeri

e. Teori

Gambar Diagram activity Hapus Teori

203


Tabel Kelas analisis Hapus Teori


Tipe Boundary

2

TambaTeoriProses.jsp

Boundary

3 4

TeoriTampil.jsp TeoriHapus.jsp

Boundary Boundary

5

TeoriQuery.java

Control Class

6

Teori

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data teori Halaman untuk menampilkan data teori Halaman untuk menampilkan pesan data berhasil dihapus Kelas ini sebagai controller yang mengatur proses kelola teori dalam hal ini adalah hapus teori Berfungsi menyimpan data teori

Gambar Diagram sequence Hapus Teori

204


1.3

Lihat Materi a.

Audio Mengambil contoh, lihat Isyarat Bunyi

Gambar Diagram activity Lihat Audio

205


Tabel Kelas analisis Lihat Audio


Tipe Boundary

2

AlatPengaturan.jsp

Boundary

3

TeoriIsyarat.jsp

Boundary

4

TampilBunyi.jsp

Boundary

5

BunyiDetail.jsp

Boundary

6

BunyiPerbesar.jsp

Boundary

7

BunyiQuery.java

Control Class

8

Bunyi

Entity Class

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman untuk menampilkan teori alat pengaturan lalu lintas Halaman untuk menampilkan materi isyarat Halaman untuk menampilkan Isyarat Bunyi Halaman untuk menampilkan detail data isyarat bunyi Halaman untuk mengatur dan menampilkan suara Isyarat Bunyi Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah menampilkan materi isyarat bunyi Berfungsi menyimpan data bunyi

Gambar Diagram sequence

206


b. Video Mengambil contoh, lihat Isyarat Gerakan

Gambar Diagram activity Lihat Video

207


Tabel Kelas analisis Lihat Video


Tipe Boundary

2

AlatPengaturan.jsp

Boundary

3

TeoriIsyarat.jsp

Boundary

4

GerakanTampil.jsp

Boundary

5

VideoDetail.jsp

Boundary

6

VideoPerbesar.jsp

Boundary

7

VideoQuery.java

Control Class

8

Video

Entity Class

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman untuk menampilkan teori alat pengaturan lalu lintas Halaman untuk menampilkan materi isyarat Halaman untuk menampilkan Isyarat gerakan Halaman untuk menampilkan detail data isyarat gerakan Halaman untuk mengatur dan menampilkan suara Isyarat gerakan Kelas ini sebagai controller yang mengatur proses kelola video dalam hal ini adalah menampilkan materi isyarat gerakan Berfungsi menyimpan data video

Gambar Diagram sequence Lihat Video

208


1.4

Cari Materi a. Marka

Gambar Diagram activity Cari Marka berdasarkan jenis

Tabel Kelas analisis Cari Marka berdasarkan jenis

No 1


Tipe Boundary

2

Bantuan.jsp

Boundary

3

MarkaCariJenisUtama.js p

Boundary

4

MarkaCariJenis.jsp

Boundary

5

MarkaQuery.java

Control Class

6

Marka

Entity Class 209

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman pertama untuk menampilkan bantuan sistem, gambaran dan cari materi Halaman form cari data untuk meinputkan data yang dicari berdasarkan jenis marka Halaman untuk memproses data yang dicari dan menampilkan hasil pencarian serta form untuk menginputkan data lagi Kelas ini sebagai controller yang mengatur proses kelola marka dalam hal ini adalah cari marka Berfungsi menyimpan data marka


Gambar Diagram sequence Cari Marka berdasarkan jenis

Gambar Diagram activity Cari Marka berdasarkan nama

210


Tabel Kelas analisis Cari Marka berdasarkan nama

No 1


Tipe Boundary

2

Bantuan.jsp

Boundary

3

MarkaCariNamaUtama.j sp

Boundary

4

MarkaCariNama.jsp

Boundary

5

MarkaQuery.java

Control Class

6

Marka

Entity Class

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman pertama untuk menampilkan bantuan sistem, gambaran dan cari materi Halaman form cari data untuk meinputkan data yang dicari berdasarkan nama marka Halaman untuk memproses data yang dicari dan menampilkan hasil pencarian serta form untuk menginputkan data lagi Kelas ini sebagai controller yang mengatur proses kelola marka dalam hal ini adalah cari marka Berfungsi menyimpan data marka

Gambar Diagram squence Cari Marka berdasarkan nama

211


b. Bunyi

Gambar Diagram activity Cari Bunyi berdasarkan nama Tabel Kelas analisis Cari Bunyi berdasarkan nama

No 1


Tipe Boundary

2

Bantuan.jsp

Boundary

3

BunyiCariNamaUtama.j sp

Boundary

4

BunyiCariNama.jsp

Boundary

5

BunyiQuery.java

Control Class

6

Bunyi

Entity Class 212

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman pertama untuk menampilkan bantuan sistem, gambaran dan cari materi Halaman form cari data untuk meinputkan data yang dicari berdasarkan nama bunyi Halaman untuk memproses data yang dicari dan menampilkan hasil pencarian serta form untuk menginputkan data lagi Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah cari bunyi Berfungsi menyimpan data bunyi


Gambar Diagram sequence Cari Bunyi berdasarkan nama

c. Gerakan

Gambar Diagram activity Cari Gerakan berdasarkan nama

213


Tabel Kelas analisis Cari Gerakan berdasarkan nama

No 1


Tipe Boundary

2

Bantuan.jsp

Boundary

3

BunyiCariNamaUtama.j sp

Boundary

4

BunyiCariNama.jsp

Boundary

5

BunyiQuery.java

Control Class

6

Bunyi

Entity Class

Deskrispsi Halaman utama dari sistem untuk menampilakan menu – menu pada sistem Halaman pertama untuk menampilkan bantuan sistem, gambaran dan cari materi Halaman form cari data untuk meinputkan data yang dicari berdasarkan nama bunyi Halaman untuk memproses data yang dicari dan menampilkan hasil pencarian serta form untuk menginputkan data lagi Kelas ini sebagai controller yang mengatur proses kelola rambu dalam hal ini adalah cari bunyi Berfungsi menyimpan data bunyi

Gambar Diagram sequence Cari Bunti berdasarkan nama

214


1.5

Edit Materi a. Marka

Gambar Diagram activity Edit identitas Marka

215


Gambar Diagram activity Edit gambar Rambu

216


Gambar Diagram activity Edit identitas dan gambar Rambu Tabel Kelas analisis Edit Rambu


Tipe Boundary

2


Boundary

3 4

MarkaTampil.jsp MarkaEditForm.jsp

Boundary Boundary

5

MarkaEditPesan.jsp

Boundary

6

MarkaQuery.java

Control Class

7

Marka

Entity Class 217

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data marka Halaman untuk menampilkan data marka Halaman untuk menampilkan form berisi data yang akan diubah Halaman untuk memproses edit/ ubah data serta menampilkan pesan berhasil edit Kelas ini sebagai controller yang mengatur proses kelola marka dalam hal ini adalah edit marka Berfungsi menyimpan data marka


Gambar Diagram sequence Edit identitas Rambu

Gambar Diagram sequence Edit gambar Rambu

Gambar Diagram sequence Edit identitas dan gambar Rambu

218


b. Bunyi

Gambar Diagram activity Edit identitas Bunyi

219


Gambar Diagram activity Edit audio Bunyi

220


Gambar Diagram activity Edit identitas dan audio Bunyi

221


Tabel Kelas analisis Edit Bunyi


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

3


Boundary

4 5

BunyiTampil.jsp BunyiEditForm.jsp

Boundary Boundary

6

BunyiEditPesan.jsp

Boundary

7

BunyiQuery.java

Control Class

8

Bunyi

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk menampilkan jenis materi isyarat Halaman untuk memproses tambah data bunyi Halaman untuk menampilkan data bunyi Halaman untuk menampilkan form berisi data yang akan diubah Halaman untuk memproses edit/ ubah data serta menampilkan pesan berhasil edit Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah edit bunyi Berfungsi menyimpan data bunyi

Gambar Diagram sequence Edit identitas bunyi

Gambar Diagram sequence Edit audio Bunyi

222


Gambar Diagram sequence Edit identitas dan audio Bunyi

223


c. Gerakan

Gambar Diagram activity Edit identitas Gerakan

224


Gambar Diagram activity Edit video Gerakan

225


Gambar Diagram activity Edit identitas dan video Gerakan

226


Tabel Kelas analisis Edit Gerakan


Tipe Boundary

2

UtamaIsyarat.jsp

Boundary

3


Boundary

4 5

BunyiTampil.jsp BunyiEditForm.jsp

Boundary Boundary

6

BunyiEditPesan.jsp

Boundary

7

BunyiQuery.java

Control Class

8

Bunyi

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk menampilkan jenis materi isyarat Halaman untuk memproses tambah data bunyi Halaman untuk menampilkan data bunyi Halaman untuk menampilkan form berisi data yang akan diubah Halaman untuk memproses edit/ ubah data serta menampilkan pesan berhasil edit Kelas ini sebagai controller yang mengatur proses kelola bunyi dalam hal ini adalah edit bunyi Berfungsi menyimpan data bunyi

Gambar Diagram sequence Edit identitas Gerakan

Gambar Diagram sequence Edit video Gerakan

227


Gambar Diagram sequence Edit identitas dan video Gerakan

d. Teori

Gambar Diagram activity Edit Teori

228


Tabel Kelas analisis Edit Teori


Tipe Boundary

2

TeoriForm.jsp

Boundary

3 4

TeoriTampil.jsp TeoriEditForm.jsp

Boundary Boundary

5

TeoriEditPesan.jsp

Boundary

6

TeoriQuery.java

Control Class

7

Teori

Entity Class

Deskrispsi Halaman utama admin untuk melakukan kelola materi Halaman untuk memproses tambah data teori Halaman untuk menampilkan data teori Halaman untuk menampilkan form berisi data yang akan diubah Halaman untuk memproses edit/ ubah data serta menampilkan pesan berhasil edit Kelas ini sebagai controller yang mengatur proses kelola teori dalam hal ini adalah edit teori Berfungsi menyimpan data teori

Gambar Diagram sequence Edit Teori

229


LAMPIRAN 2 : Implementasi Sistem 2.1

Bantuan Halaman Bantuan akan muncul ketika user menekan menu “Bantuan” yang ada di deretan menu sistem. Pada halaman ini akan ditampilkan fasilitas menu untuk cari materi.

Gambar Halaman Bantuan

Berikut ini potongan listing program bagian halaman Bantuan.
Jenis Materi

*Klik untuk cari materi

<span>USER MANUAL

230


2.2

Rambu Cari Jenis Utama Halaman Rambu Cari Jenis Utama akan muncul ketika user menekan menu gambar Cari Rambu Jenis di halaman Utama Cari. Halaman Rambu Cari Jenis Utama ini berisi form untuk input kata kunci pencarian data rambu berdasarkan jenis rambu.

Gambar Halaman Rambu Cari Jenis Utama

Berikut ini potongan listing program halaman Rambu Cari Jenis Utama yang berisi form input kata kunci pencarian.

">

Keterangan :
Masukkan jenis rambu dengan benar (Larangan / Peringatan / Petunjuk/ Tambahan)

2.3

Rambu Cari Jenis Halaman Rambu Cari Jenis akan muncul ketika user telah menginputkan kata kunci pencarian rambu berdasarkan jenis rambu dan user menekan butoon “Telusuri”. Bila data yang dicari ada maka akan tampil data pada tabel, jika data tidak ada maka akan mundul pesan Data (nama data yang dicari) tidak ada!.

231


Gambar Halaman Rambu Cari Jenis (data ada)

Gambar Halaman Rambu Cari Jenis (data tidak ada)

Berikut ini potongan listing program bagian proses cari data rambu berdasarkan jenis dan menampilkan data rambu yang dicari. <% String id = request.getParameter("jenis_ra"); try { album.cariRambuJenis(id); if (!album.fetch()) { %>
Data Rambu dengan jenis <%= id%>font> tidak ada !
<% return; } %><% } finally { album.release(); } %><% try { album.cariRambuJenis(id); int rowCount = 0; while (album.fetch()) { rowCount++; %>

232

<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>

<%= RambuQuery.escapeHtmlString(album.getDis_ra())%>
"> <% if (album.getThumbnail_ra().getContentLength() > 0) { %> height="<%= album.getThumbnail_ra().getHeight()%>" width="<%= album.getThumbnail_ra().getWidth()%>" alt="<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>"border=1> <% } else { out.println("[view media]"); } %> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query cariRambuJenis: public void cariRambuJenis(String cari) throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from rambu where upper (jenis_ra) like '%" + cari + "%' or lower (jenis_ra) like '%" + cari + "%'" + "or initcap (jenis_ra) like '%" + cari + "%'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.4

Rambu Cari Nama Utama Halaman Rambu Cari Nama Utama akan muncul ketika user menekan menu gambar Cari Rambu Nama di halaman Utama Cari. Halaman Rambu Cari Nama Utama ini berisi form untuk input kata kunci pencarian data rambu berdasarkan nama rambu.

Gambar Halaman Rambu Cari Nama Utama

233


Berikut ini potongan listing program bagian halaman rambu cari nama utama.
">

2.5

Rambu Cari Nama Halaman Rambu Cari Nama akan muncul ketika user menekan menu gambar Cari Rambu Nama di halaman Utama Cari. Halaman Rambu Cari Nama ini berisi form untuk input kata kunci pencarian data rambu berdasarkan nama rambu dan tabel untuk menampilkan daftar data rambu yang dicari.

Gambar Halaman Rambu Cari Nama (data ada)

Gambar Halaman Rambu Cari Nama (data tidak ada)

234


Berikut ini potongan listing program bagian proses cari data rambu berdasarkan nama dan menampilkan data rambu yang dicari.
<% String id = request.getParameter("nama_ra"); try { album.cariRambuNama(id); if (!album.fetch()) { %>
Data Rambu dengan nama <%= id%> tidak ada !
<% return; } %> <% } finally { album.release(); } %> <% try { album.cariRambuNama(id); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } else { out.println("[view media]"); } %> <% }%> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); }%> Query CariRambuNama : public void cariRambuNama(String cari) throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from rambu where upper (nama_ra) like '%" + cari + "%' or lower (nama_ra) like '%" + cari + "%'" + "or initcap (nama_ra) like '%" + cari + "%'"); 235 rset = (OracleResultSet) stmt.executeQuery(); }


2.6

Marka Cari Jenis Utama Halaman Marka Cari Jenis Utama akan muncul ketika user menekan menu gambar Cari Marka Jenis di halaman Utama Cari. Halaman Marka Cari Jenis Utama ini berisi form untuk input kata kunci pencarian data marka berdasarkan Jenis marka.

Gambar Halaman Marka Cari Jenis Utama

Berikut ini potongan listing program bagian halaman marka cari nama utama.
<%=RambuQuery.escapeHtmlString(album.getNama_ra())%>
"> <% if (album.getThumbnail_ra().getContentLength() > 0) { %> height="<%= album.getThumbnail_ra().getHeight()%>" width="<%= album.getThumbnail_ra().getWidth()%>"alt="<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>" border=1>

">

Keterangan :
Masukkan jenis rambu dengan benar (Lambang / Melintang / Membujur/ Serong)

2.7

Marka Cari Jenis Halaman Marka Cari Jenis akan muncul ketika user telah menginputkan kata kunci pencarian rambu berdasarkan jenis Marka dan user menekan butoon “Telusuri”. Bila data yang dicari ada maka akan tampil data pada tabel, jika data tidak ada maka akan mundul pesan Data (nama data yang dicari) tidak ada!.

236


Gambar Halaman Marka Cari Jenis (data ada)

Gambar Halaman Marka Cari Jenis (data tidak ada)

Berikut ini potongan listing program bagian proses cari data marka berdasarkan jenis dan menampilkan data maka yang dicari.

">
Keterangan :
Masukkan jenis rambu dengan benar (Lambang / Melintang / Membujur/ Serong) <% String id = request.getParameter("jenis_ma"); try { album.cariJenisMarka(id); if (!album.fetch()) { %> <% return; } %> %> <% } finally { album.release();

237


} %> <% try { album.cariJenisMarka(id); int rowCount = 0; while (album.fetch()) { rowCount++; %>
<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>

<%= MarkaQuery.escapeHtmlString(album.getDis_ma())%>
"> <% if (album.getThumbnail_ma().getContentLength() > 0) { %> height="<%= album.getThumbnail_ma().getHeight()%>" width="<%= album.getThumbnail_ma().getWidth()%>" alt="<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>" border=1> <% } else { out.println("[view media]"); } %> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query cariJenisMarka : public void cariJenisMarka (String cari) throws SQLException{ if (conn == null){ conn = getConnection(); } stmt = (OraclePreparedStatement)conn.prepareStatement( "select * from marka where upper (jenis_ma) like '%"+cari+ "%' or lower (jenis_ma) like '%" +cari+ "%'" + "or initcap (jenis_ma) like '%" +cari+ "%'"); rset = (OracleResultSet) stmt.executeQuery(); }

238


2.8

Marka Cari Nama Utama Halaman Marka Cari Nama Utama akan muncul ketika user menekan menu gambar Cari Marka Nama di halaman Utama Cari. Halaman Marka Cari Nama Utama ini berisi form untuk input kata kunci pencarian data marka berdasarkan nama marka.

Gambar Halaman Marka Cari Nama Utama

Berikut ini potongan listing program bagian halaman marka cari nama utama.

">

2.9

Marka Cari Nama Halaman Marka Cari Nama akan muncul ketika user menekan menu gambar Cari Marka Nama di halaman Utama Cari. Halaman Marka Cari Nama ini berisi form untuk input kata kunci pencarian data marka berdasarkan nama marka dan tabel untuk menampilkan daftar data marka yang dicari.

Gambar Halaman Mara Cari Nama (data ada)

239


Gambar Halaman Marka Cari (data tidak ada)

Berikut ini potongan listing program bagian proses cari data marka berdasarkan nama dan menampilkan data maka yang dicari. <% String id = request.getParameter("nama_ma"); try { album.cariMarkaNama(id); if (!album.fetch()) { %> <%= id%> tidak ada !
<% return; } %> <% } finally { album.release(); } %> <% try { album.cariMarkaNama(id); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } else {out.println("[view media]");} %> <% } %>

240


<%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query CariMarkaNama : public void cariMarkaNama (String cari) throws SQLException{ if (conn == null){ conn = getConnection(); } stmt = (OraclePreparedStatement)conn.prepareStatement( "select * from marka where upper (nama_ma) like '%"+cari+ "%' or lower (nama_ma) like '%" +cari+ "%'" + "or initcap (nama_ma) like '%" +cari+ "%'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.10

Bunyi Cari Nama Utama Halaman Bunyi Cari Nama Utama akan muncul ketika user menekan

menu gambar Cari Bunyi Nama di halaman Utama Cari.

Halaman Bunyi Cari Nama Utama ini berisi form untuk input kata kunci pencarian data Bunyi berdasarkan nama bunyi.

Gambar Halaman Bunyi Cari Nama Utama

Berikut ini potongan listing program bagian halaman bunyi cari nama utama.
<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>
"> <% if (album.getThumbnail_ma().getContentLength() > 0) { %> height="<%= album.getThumbnail_ma().getHeight()%>" width="<%= album.getThumbnail_ma().getWidth()%>" alt="<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>" border=1>

">

241


2.11

Bunyi Cari Nama Halaman Bunyi Cari Nama akan muncul ketika user menekan menu gambar Cari Bunyi Nama di halaman Utama Cari. Halaman Bunyi Cari Nama ini berisi form untuk input kata kunci pencarian data bunyi berdasarkan nama bunyi dan tabel untuk menampilkan daftar data bunyi yang dicari.

Gambar Halaman Bunyi Cari Nama (data ada)

Gambar Halaman Bunyi Cari Nama (data tidak ada)

Berikut ini potongan listing program bagian proses cari data bunyi berdasarkan nama dan menampilkan data bunyi yang dicari.
<% String id = request.getParameter("nama_bu"); try { album.cariBunyiNama(id); if (!album.fetch()) { %>

242


Data Isyarat Bunyi dengan nama <%= id%> tidak ada !
<% return; } %> <% } finally { album.release(); } %> <% try { album.cariBunyiNama(id); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %>

<%= BunyiQuery.escapeHtmlString(album.getNama_bu())%>
">

<% if (rowCount == 0) {out.println("Tidak ada data"); } else { out.println("Klik audio"); } %>

<%! String dbConnErrMsg = null; %> <% Query CariBunyiNama : public void cariBunyiNama (String cari) throws SQLException{ if (conn == null){ conn = getConnection(); } stmt = (OraclePreparedStatement)conn.prepareStatement( "select * from bunyi where upper (nama_bu) like '%"+cari+ "%' or lower (nama_bu) like '%" +cari+ "%'" + "or initcap (nama_bu) like '%" +cari+ "%'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.12

Gerakan Cari Nama Utama Halaman Gerakan Cari Nama Utama akan muncul ketika user menekan menu gambar Cari Gerakan Nama di halaman Utama Cari. Halaman Gerakan Cari Nama Utama ini berisi form untuk input kata kunci pencarian data Gerakan berdasarkan nama rambu.

243


Gambar Halaman Gerakan Cari Nama Utama

Berikut ini potongan listing program bagian halaman bunyi cari nama utama.

">

2.13

Gerakan Cari Nama Halaman Gerakan Cari Nama akan muncul ketika user menekan menu gambar Cari Gerakan Nama di halaman Utama Cari. Halaman Gerakan Cari Nama ini berisi form untuk input kata kunci pencarian data gerakan berdasarkan nama gerakan dan tabel untuk menampilkan daftar data gerakan yang dicari.

Gambar Halaman Gerakan Cari Nama (data ada)

244


Gambar Halaman Gerakan Cari Nama (data tidak ada)

Berikut ini potongan listing program bagian proses cari data gerakan berdasarkan nama dan menampilkan data gerakan yang dicari.
<% String id = request.getParameter("nama_vi"); try { album.cariGerakanNama(id); if (!album.fetch()) { %>
Data Isyarat Gerakan dengan nama <%= id%> tidak ada !
<% return; } %> <% } finally { album.release(); } %> <% try { album.cariGerakanNama(id); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %>
<%= VideoQuery.escapeHtmlString(album.getNama_vi())%>
">

<% if (rowCount == 0) { out.println("Tidak ada data"); } else { out.println("Klik video "); } %>
<%! String dbConnErrMsg = null;

245


%> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query CariGerakanNama : public void cariGerakanNama (String cari) throws SQLException{ if (conn == null){ conn = getConnection(); } stmt = (OraclePreparedStatement)conn.prepareStatement( "select * from video where upper (nama_vi) like '%"+cari+ "%' or lower (nama_vi) like '%" +cari+ "%'" + "or initcap (nama_vi) like '%" +cari+ "%'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.14

Utama Materi Halaman utama materi akan muncul ketika user menekan menu “Materi” yang ada di bagian deretan menu sistem. Pada halaman ini akan ditampilkan jenis materi yang ada pada sistem, yaitu button materi Lalu Lintas dan Patroli Keamanan Sekolah (PKS).

Gambar Halaman Utama Materi

Berikut ini potongan listing program bagian proses menampilkan data materi teori Lalu Lintas. <% try { album.tataCara(); int rowCount = 0; while (album.fetch()) { rowCount++; %>

248


<% } %><%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>

Sistem Pembelajaran menjelaskan materi tentang Lalu Lintas Dan Patroli Keamanan Sekolah (PKS).

Untuk melihat penjelasan klik jenis materi yang dipilih.

246


2.15

Utama LL Halaman Utama LL akan muncul ketika user menekan button “Lalu Lintas” yang ada di halaman Utama Materi. Pada halaman ini akan ditampilkan materi lalu lintas yaitu pengertian, Tata cara tertib, Alat pengaturan dan Galeri. Pada halaman ini juga ditampilkan isi dari menu pengertian.

Gambar Halaman Utama LL

Berikut ini potongan listing program bagian proses menampilkan data materi teori Lalu Lintas.

Pengertian Lalu Lintas

<% try { album.pengertianLL(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %> <%! String dbConnErrMsg = null; %> <%

247


} catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>

<%=TeoriQuery.escapeHtmlString(album.getMateri())%>

Query pengertianLL : public void pengertianLL() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Pengertian Lalu lintas'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.16

Tata Cara Tertib Halaman Tata Cara Tertib akan muncul ketika user menekan menu materi “Tata Cara Tertib” yang ada dibagian deretan menu materi sistem. Pada halaman ini akan ditampilkan isi dari tata cara tertib lalu lintas.

Gambar Halaman Tata Cara Tertib

Berikut ini potongan listing program bagian proses menampilkan data materi tata cara tertib.
Tata Cara Tetib Lalu Lintas

<%=TeoriQuery.escapeHtmlString(album.getMateri())%>
Query tataCara() : public void tataCara() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Tata Cara Tertib Lalu Lintas'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.17

Alat Pengaturan Halaman Alat Pengaturan akan muncul ketika user menekan menu materi “Alat Pengaturan” yang ada dibagian deretan menu materi sistem. Pada halaman ini akan ditampilkan macam – macam alat pengaturan lalu lintas.

Gambar Halaman Alat Pengaturan

Berikut ini potongan listing program bagian proses menampilkan data materi alat pengaturan.
Macam alat pengaturan Lalu Lintas ada 3 yaitu :

Rambu, Lihat

Marka, Lihat

Isyarat, Lihat

*klik "Lihat" untuk melihat penjelasan !

249


2.18

Teori Rambu Halaman Teori Rambu akan muncul ketika user menekan menu jenis materi Alat Pengaturan yaitu “Rambu” yang ada dibagian deretan menu jenis materi alat pengaturan. Pada halaman ini akan ditampilkan pengertian rambu dan macam rambu lalu lintas.

Gambar Halaman Teori Rambu

Berikut ini potongan listing program bagian proses menampilkan data materi alat pengaturan jenis rambu. <%

try {

album.pengertianRambu(); int rowCount = 0; while (album.fetch()) { rowCount++;

%> <%= TeoriQuery.escapeHtmlString(album.getMateri())%>
Macam Rambu :
Rambu Peringatan, Lihat
Rambu Larangan, Lihat
Rambu Perintah, Lihat
Rambu Petunjuk, Lihat
Rambu Tambahan, Lihat
Rambu Sementara, Lihat
<% }%> <%! String dbConnErrMsg = null; %><% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query pengertianRambu() : public void pengertianRambu() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Pengertian Rambu'"); rset = (OracleResultSet) stmt.executeQuery(); }

250


2.19

Tampil Larangan Halaman Tampil Larangan akan muncul ketika user menekan link “Lihat” pada macam Rambu di halaman Materi Teori Rambu. Pada halaman ini akan ditampilkan pengertian Rambu Larangan dan

tabel

untuk menampilkan daftar data Rambu Larangan.

Gambar Halaman Tampil Peringatan

Berikut ini potongan listing program bagian proses menampilkan data Rambu Peringatan. <% try { album.lihatLarangan(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } else { out.println("[view media]"); }} %>

251


<%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) {dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query lihatLarangan() : public void lihatPeringatan() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from rambu where jenis_ra in 'Larangan'"); rset = (OracleResultSet) stmt.executeQuery(); }

Keterangan : Tampilan macam rambu lainya seperti peringatan, perintah, petunjuk, tambahan, sementara sama dengan tampilan rambu peringatan yang membedakan adalah query untuk menampilkan data. 2.20

Teori Marka Halaman Teori Marka akan muncul ketika user menekan menu jenis materi Alat Pengaturan yaitu “Marka” yang ada dibagian deretan menu jenis materi alat pengaturan. Pada halaman ini akan ditampilkan pengertian rambu dan macam Marka lalu lintas.

Gambar Halman Teori Marka

252


Berikut ini potongan listing program bagian proses menampilkan data materi Teori Marka. <%

try { album.pengertianMarka(); int rowCount = 0; while (album.fetch()) { rowCount++;

%> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query pengertianMarka() : public void pengertianMarka() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Pengertian Marka'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.21

Tampil Membujur Halaman Tampil Membujur akan muncul ketika user menekan link “Lihat” pada macam Marka di halaman Materi Teori Marka. Pada halaman ini akan ditampilkan pengertian Marka Membujur dan menampilkan daftar data Marka Membujur.

253

tabel untuk


Gambar Halaman Tampil Membujur

Berikut ini potongan listing program bagian proses menampilkan data Marka Membujur.
Nama Gambar
<%= RambuQuery.escapeHtmlString(album.getNama_ra())%> "> <% if (album.getThumbnail_ra().getContentLength() > 0) { %> height="<%= album.getThumbnail_ra().getHeight()%>" width="<%= album.getThumbnail_ra().getWidth()%>" alt="<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>"

<% if (rowCount == 0) {out.println("Data Rambu tidak ada"); } else { out.println("Klik gambar untuk ukuran besar"); } %>

<%= TeoriQuery.escapeHtmlString(album.getMateri())%>
Macam Marka :
Marka Membujur, Lihat

Marka Melintang, Lihat

Marka Serong, Lihat

Marka Lambang, Lihat

<% try { album.kemampuan(); int rowCount = 0; while (album.fetch()) { rowCount++; %>

<% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query kemampuan() : public void kemampuan() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Kemampuan Seorang PKS'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.29

Pengaturan PKS Halaman Pengaturan PKS akan muncul ketika user menekan menu materi “Pengaturan” yang ada dibagian deretan menu materi sistem. Pada halaman ini akan ditampilkan isi dari pengaturan berupa teori dan gerakan pengaturan lalu lintas.

263


Gambar Halaman Pengaturan PKS

Berikut ini potongan listing program bagian proses menampilkan data materi Pengaturan.
Pengaturan Lalu Lintas

<% try { album.pengaturan(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>

264


Query pengaturan() : public void pengaturan() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where (nama_te = 'Pengaturan Lalu Lintas' or nama_te = 'Tujuan Pengaturan')"); rset = (OracleResultSet ) stmt.executeQuery(); }

2.30

Kelengkapan PKS Halaman Kelengkapan PKS akan muncul ketika user menekan menu materi “Kelengkapan” yang ada dibagian deretan menu materi sistem. Pada halaman ini akan ditampilkan macam dari kelengkapan alat yang digunakan PKS.

Gambar Halaman Kelengkapan PKS

Berikut ini potongan listing program bagian proses menampilkan data materi kelengkapan PKS. <% try { album.kelengkapan(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>

265


Query kelengkapan() : public void kelengkapan() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Kelengkapan PKS'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.31

Login Admin Halaman Login Admin akan muncul ketika admin menekan menu “Admin” yang ada dibagian deretan menu sistem. Pada halaman ini akan menampilkan penjelasan umum mengenai admin dan menampilkan form Login berisi username dan password yang harus diisikan dengan benar agar admin dapat melakukan kelola materi.

Gambar Halaman Login Admin

Gambar Halaman Login Admin (username & password salah)

266


Berikut ini potongan listing program bagian proses login Admin.

LOGIN

<% try { album.lihatMembujur(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } else { out.println("[view media]"); } } %> <%! String dbConnErrMsg = null; %>

254


<% } catch (SQLException sqle) {dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query lihatMembujur() : public void lihatMembujur() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from marka where jenis_ma in 'Membujur'"); rset = (OracleResultSet) stmt.executeQuery(); }

Keterangan : Tampilan macam marka lainya seperti melintang, serong dan lambang sama dengan tampilan marka membujur yang membedakan adalah query untuk menampilkan data. 2.22

Teori Isyarat Halaman Teori Isyarat akan muncul ketika user menekan menu jenis materi Alat Pengaturan yaitu “Isyarat” yang ada dibagian deretan menu jenis materi alat pengaturan. Pada halaman ini akan ditampilkan pengertian rambu dan macam Isyarat lalu lintas.

Gambar Halaman Tampil Isyarat

Berikut ini potongan listing program bagian proses menampilkan data materi Teori Isyarat. <% try { album.pengertianIsyarat(); int rowCount = 0; while (album.fetch()) { rowCount++; %>

255


<% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query pengertianIsyarat() : public void pengertianIsyarat() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Pengertian Isyarat'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.23

Isyarat Lampu Halaman Isyarat Lampu

akan muncul ketika user menekan link

“Lihat” pada macam Isyarat di halaman Isyarat Lampu. Pada halaman ini akan ditampilkan materi isyarat lampu.

Gambar Halaman Isyarat Lampu

256


2.24

Isyarat Bunyi Halaman Isyarat Bunyi akan muncul ketika user menekan link “Lihat” pada macam Isyarat di halaman Isyarat Bunyi. Pada halaman ini akan ditampilkan materi isyarat bunyi.

Gambar Halaman Isyarat Bunyi

Berikut ini potongan listing program bagian proses menampilkan data isyarat bunyi. <% try { album.tampilBunyi(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %> <%! String dbConnErrMsg = null; %><% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>

257


Query tampilBunyi() : public void tampilBunyi() throws SQLException { if ( conn == null ) { conn = getConnection(); } stmt = (OraclePreparedStatement)conn.prepareStatement( "select * from bunyi order by nama_bu" ); rset = (OracleResultSet)stmt.executeQuery(); }

2.25

Isyarat Gerak Halaman Isyarat Gerakan

akan muncul ketika user menekan link

“Lihat” pada macam Isyarat di halaman Isyarat Gerakan. Pada halaman ini akan ditampilkan materi isyarat gerakan.

Gambar Halaman Isyarat Gerakan

Berikut ini potongan listing program bagian proses menampilkan data isyarat gerakan. <% try { album.tampilGerakan(); int rowCount = 0; while (album.fetch()) {

258


rowCount++; %> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %> Query tampilGerakan() : public void tampilGerakan() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from video where jenis_vi in 'Gerakan'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.26

Galeri Lalu Lintas Halaman Galeri Lalu Lintas akan muncul ketika user menekan menu materi “Galeri” yang ada dibagian deretan menu materi sistem. Pada halaman ini akan ditampilkan macam – macam video pelanggaran dan tertib berlalu lintas.

259


Gambar Halaman Galeri Lalu Lintas

Berikut ini potongan listing program bagian proses menampilkan data video di halaman galeri video lalu lintas. <% try { album.selectGaleriVideo(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>

260


Query selectGaleriVideo() : public void selectGaleriVideo() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from video where jenis_vi in 'Contoh'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.27

Utama PKS Halaman Utama PKS akan muncul ketika user menekan button “Patroli Keamanan Sekolah” yang ada dibagian halaman Utama Materi. Pada halaman ini akan ditampilkan materi lalu lintas yaitu Pengertian, Kemampuan,

Pengaturan,

Kelengkapan.

Pada

halaman

ini

ditampilkan isi dari menu pengertian

Gambar Halaman Utama PKS

Berikut ini potongan listing program bagian proses menampilkan data materi teori PKS.

Nama Gambar
<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%> "> <% if (album.getThumbnail_ma().getContentLength() > 0) { %> height="<%= album.getThumbnail_ma().getHeight()%>" width="<%= album.getThumbnail_ma().getWidth()%>" alt="<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>" border=1>
<% if (rowCount == 0) {out.println("The photo album is empty"); } else { out.println("Klik gambar untuk ukuran besar"); } %>

Macam Isyarat :
Isyarat Lampu, Lihat

Isyarat Bunyi, Lihat

Isyarat Gerakan, Lihat

<%= BunyiQuery.escapeHtmlString(album.getNama_bu())%> <%= BunyiQuery.escapeHtmlString(album.getDes_bu())%> ">
<% if (rowCount == 0) { out.println("Tidak ada data"); } else { out.println("Klik gambar audio untuk memutar"); } %>

Nama Jenis Deskripsi Video

<%= VideoQuery.escapeHtmlString(album.getNama_vi())%> VideoQuery.escapeHtmlString(album.getJenis_vi())%> <%= VideoQuery.escapeHtmlString(album.getDes_vi())%> ">
<% if (rowCount == 0) {out.println("Data Isyarat Gerakan tidak ada"); } else { out.println("Klik video untuk memutar video Isyarat Gerakan"); } %>

Nama Deskripsi Video
<%= VideoQuery.escapeHtmlString(album.getNama_vi())%> <%= VideoQuery.escapeHtmlString(album.getDes_vi())%> ">

<% if (rowCount == 0) { out.println("The audio album is empty"); } else { out.println("Untuk lihat, klik gambar pada data video"); } %>

Pengertian Patroli Keamanan Sekolah (PKS)

<%

261

juga

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI try { album.pengertianPKS(); int rowCount = 0; while (album.fetch()) { rowCount++; %> <% } %> <%! String dbConnErrMsg = null; %> <% } catch (SQLException sqle) { dbConnErrMsg = sqle.getMessage(); } finally { album.release(); } %>


Query pengertianPKS() : public void pengertianPKS() throws SQLException { if (conn == null) { conn = getConnection(); } stmt = (OraclePreparedStatement) conn.prepareStatement( "select * from teori where nama_te in 'Pengertian PKS'"); rset = (OracleResultSet) stmt.executeQuery(); }

2.28

Kemampuan PKS Halaman Kemampuan PKS akan muncul ketika user menekan menu materi “Kemampuan” yang ada dibagian deretan menu materi sistem. Pada halaman ini akan ditampilkan isi dari kemampuan yang dimiliki oleh seorang PKS.

Gambar Halaman Kemampuan PKS

262


Berikut ini potongan listing program bagian proses menampilkan data materi kemampuan PKS. font color="black">
Kemampuan PKS


<%= TeoriQuery.escapeHtmlString(album.getNama_te())%>


Macam Pengaturan Lalu Lintas

Lihat

<%=TeoriQuery.escapeHtmlString(album.getMateri ())%>

try { {%> <% } } catch (Exception e) { } %>

Username :

Password :

KELOLA RAMBU
Nama	(Contoh : Dilarang parkir)
Jenis	Larangan Petunjuk Peringatan Perintah Sementara Tambahan Pilih salah satu!
Diskripsi
Gambar	(Contoh : 1.jpg)

Lihat Data Rambu
Refresh

Nama :	<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>
Jenis :	" + RambuQuery.escapeHtmlString(album.getJenis_ra()) + "
Diskripsi :	" + RambuQuery.escapeHtmlString(album.getDis_ra()) + "
	275 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI width="<%=album.getGambar_ra().getWidth()%>" height="<%=album.getGambar_ra().getHeight()%>" src="RambuPerbesar.jsp?media=gambar_ra&id_ra=<%=album.getId_ra()%>" type="<%=album.getGambar_ra().getMimeType()%>">

EDIT RAMBU
ID
Nama	(Contoh : Dilarang parkir)
Jenis	(Contoh : Larangan)
Diskripsi
Gambar	"> <% if (album.getThumbnail_ra().getContentLength() > 0) { %> width="<%= album.getThumbnail_ra().getWidth()%>" alt="<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>" border=0> <% } else { out.println("[view media]


Lihat Data Rambu

KELOLA MARKA
Nama
Jenis	Lambang Melintang Membujur Serong Pilih salah satu!
Diskripsi
Gambar	(Contoh : 1.jpg)

Lihat Data Marka
Refresh

Nama :	<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>
Jenis :	<%= MarkaQuery.escapeHtmlString(album.getJenis_ma())%>
Deskripsi :
Gambar :	288 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI height="<%=album.getGambar_ma().getHeight()%>" src="MarkaPerbesar.jsp?media=gambar_ma&id_ma=<%=album.getId_ma()%>" type="<%=album.getGambar_ma().getMimeType()%>">

Nama	Gambar
<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>	"> <% if (album.getThumbnail_ra().getContentLength() > 0) { %> height="<%= album.getThumbnail_ra().getHeight()%>" width="<%= album.getThumbnail_ra().getWidth()%>" alt="<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>"
*<% if (rowCount == 0) {out.println("Data Rambu tidak ada"); } else { out.println("Klik gambar untuk ukuran besar"); } %>*
<%= TeoriQuery.escapeHtmlString(album.getMateri())%>
Macam Marka : Marka Membujur, Lihat Marka Melintang, Lihat Marka Serong, Lihat Marka Lambang, Lihat

EDIT MARKA
ID
Nama	(Contoh : Putus putus)
Jenis	(Contoh : Membujur)
Diskripsi
Gambar	"> <% if (album.getThumbnail_ma().getContentLength() > 0) { %> width="<%= album.getThumbnail_ma().getWidth()%>" alt="<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>"border=0> <% 291 PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI } else { out.println("[view media]


Lihat Data Rambu

ID
Nama	input id="nama_te" type="text" name="nama_te" length="40" value ="<%=album.getNama_te()%>" >
Jenis
Materi

Lihat Data Teori

KELOLA ISYARAT BUNYI
Nama	(Contoh : Tanda berhenti)
Diskripsi	(Contoh : Satu kali tiupan panjang)
Bunyi

Lihat Data Isyarat Bunyi
Refresh

Nama :	<%= BunyiQuery.escapeHtmlString(album.getNama_bu())%>
Diskripsi :	<%= BunyiQuery.escapeHtmlString(album.getDes_bu())%>
Audio :

EDIT ISYARAT BUNYI
ID
Nama
Diskripsi
Audio	">

Lihat Data Rambu

KELOLA ISYARAT GERAKAN
Nama
Jenis	Gerakan
Deskripsi	(Contoh : Menghentikan kendaraan dari arah depan, dengan bunyi tanda berhenti)
Video

Lihat Data Isyarat Gerakan
Refresh

Nama	:	<%= VideoQuery.escapeHtmlString(album.getNama_vi())%>
Diskripsi	:	<%= VideoQuery.escapeHtmlString(album.getDes_vi())%>

EDIT ISYARAT GERAKAN
ID
Nama
Jenis
Diskripsi
Video	">

Lihat Data Isyarat Gerakan

KELOLA GALERI
Nama
Contoh	Contoh
Video

Lihat Data Galeri
Refresh

ALAT BANTU PENGAJARAN LALU LINTAS DAN PATROLI KEAMANAN SEKOLAH (PKS) DIKEMBANGKAN DENGAN METODE BINANTO

Recommend Documents

Jenis Materi

<span>USER MANUAL

Keterangan :

Data Rambu dengan jenis <%= id%>font> tidak ada !

<%= RambuQuery.escapeHtmlString(album.getNama_ra())%>

<%= RambuQuery.escapeHtmlString(album.getDis_ra())%>

Data Rambu dengan nama <%= id%> tidak ada !

<%=RambuQuery.escapeHtmlString(album.getNama_ra())%>

Keterangan :

Keterangan :

<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>

<%= MarkaQuery.escapeHtmlString(album.getDis_ma())%>

<%= MarkaQuery.escapeHtmlString(album.getNama_ma())%>

Data Isyarat Bunyi dengan nama <%= id%> tidak ada !

<%= BunyiQuery.escapeHtmlString(album.getNama_bu())%>

<% if (rowCount == 0) {out.println("Tidak ada data"); } else { out.println("Klik audio"); } %>

Data Isyarat Gerakan dengan nama <%= id%> tidak ada !

<%= VideoQuery.escapeHtmlString(album.getNama_vi())%>

<% if (rowCount == 0) { out.println("Tidak ada data"); } else { out.println("Klik video "); } %>

Pengertian Lalu Lintas

Tata Cara Tetib Lalu Lintas

Pengertian Patroli Keamanan Sekolah (PKS)

Kemampuan PKS

Pengaturan Lalu Lintas

LOGIN

Jenis Materi

KELOLA RAMBU

<span>Detail Gambar Rambu

EDIT RAMBU

KELOLA MARKA

Marka Lalu Lintas

<span>Detail Gambar Marka

EDIT MARKA

EDIT TEORI

ID

Nama

Jenis

Materi

KELOLA ISYARAT BUNYI

Isyarat Bunyi

Detail Bunyi

Nama :

<%= BunyiQuery.escapeHtmlString(album.getNama_bu())%>

Diskripsi :

<%= BunyiQuery.escapeHtmlString(album.getDes_bu())%>

Audio :

EDIT ISYARAT BUNYI

KELOLA ISYARAT GERAKAN

Isyarat Gerakan

Detail Video

Nama

:

<%= VideoQuery.escapeHtmlString(album.getNama_vi())%>

Diskripsi

:

<%= VideoQuery.escapeHtmlString(album.getDes_vi())%>

EDIT ISYARAT GERAKAN

KELOLA GALERI

IsyaratGerakan