BAB III ANALISIS DAN PERANCANGAN
3.1.
Analisis System Analisa sistem merupakan tahap awal pembangunan perangkat lunak,
pada tahap analisa ini penulis mencari kebutuhan sistem. Analisa ini bertujuan untuk menentukan spesifikasi apa saja yang dibutuhkan untuk membangun sebuah sistem. Penulis merancang sistem ini untuk mempermudah penyampaian materi pembelajaran tentang Rambu-rambu Lalu Lintas. Aplikasi ini nantinya berisikan Materi Rambu Lalu Lintas, Jenis-jenis Rambu Lalu Lintas, Video tentang lalu lintas, beserta kuis untuk latihannya. Pembuatan aplikasi ini bertujuan untuk membantu pengguna dalam memahami peraturan Lalu Lintas. Penulis berharap dengan membangun aplikasi ini, pengguna dapat lebih cepat memahami peraturan serta tata tertib dalam berlalu lintas dan semoga aplikasi ini dapat digunakan oleh berbagai kalangan khususnya para anak-anak SD sekarang ini. Aplikasi ini terdiri dari rancangan berbasis multimedia yang ditunjukan untuk anak SD khususnya. Aplikasi ini tediri dari materi dan latihan, dimana meteri-materi tersebut di dapat berdasarkan peraturan lalu lintas yang ada. Dalam hal ini penyampaian materi pembelajaran dilakukan secara interaktif dengan menggunakan bantuan aplikasi multimedia, yaitu Adobe Flash CS6 dengan menggunakan Bahasa pemrograman Actionscrpit 2.0 Aplikasi
multimedia
dalam
dunia
pendidikan
digunakan
untuk
memvisualisasikan pelajaran-pelajaran yang sulit diterangkan secara lisan. Aplikasi ini terdiri dari materi tentang definisi Lalu Lintas, Jenis-jenis Lalu Lintas, Simbol-simbol Lalu Lintas, Soal-soal untuk latihan dan menu keluar aplikasi. Aplikasi pembelajaran Rambu-rambu Lalu Lintas ini terdiri dari beberapa menu, yaitu:
http://digilib.mercubuana.ac.id/
1. Menu Materi Rambu Lalu Lintas Pada bagian Menu Materi akan ditampilkan sebuah tampilan yang menjelaskan mengenai definisi Rambu Lalu Lintas beserta pilihan menu yang terdapat jenis-jenis rambu lalu lintas. jadi selain terdapat definisi lalu lintas pengguna juga bisa langsung memilih jenis-jenis rambu lalu lintas yang nantinya akan dijelaskan masing-masing jenis rambu lalu lintas pada frame selanjutnya. 2. Menu Rambu-rambu Lalu Lintas Pada bagian ini akan ditampilkan sebuah tampilan yang berisi tentang penjelasan Rambu-rambu Lalu Lintas yang terdapat beberapa menu rambu diantaranya : Rambu Peringatan, Rambu Larangan, Rambu Perintah, dan Rambu Petunjuk, beserta simbol-simbol rambu lalu lintas yang telah disiapkan. 3. Menu Kuis Pada bagian ini akan ditampilkan terlebih dahulu mengenai ketentuanketentuan dari kuis ini. Dimana siswa harus menjawab 5 pertanyaan yang telah tersedia dalam bentuk pilihan ganda. Pada tampilan ini terdapat tombol “batal” dan “mulai” yang apabila siswa mengklik tombol mulai maka siswa akan masuk dalam tampilan berikutnya yakni memulai untuk mengerjakan dan menyelesaikan soal kuis. Setelah semua soal kuis terjawab, maka kemudian aplikasi akan menampilkan skor atau total nilai berupa berapa banyak jumlah jawaban yang benar beserta nilai yang diperoleh. Siswa dapat mencoba lagi kuis dengan mengklik tombol “Ulangi” dan jika tidak maka klik tombol “Exit” maka aplikasi akan keluar dari halaman kuis dan jika ingin kembali ke halaman menu siswa bisa langsung mengklik tombol “Back To Menu”. 4. Menu Profile Pada bagian ini akan ditampilkan sebuah tampilan Profile dimana siswa bisa melihat profile dari pembuat Aplikasi Pembelajaran Rambu-rambu Lalu Lintas.
http://digilib.mercubuana.ac.id/
5. Menu Bantuan Pada bagian ini akan ditampilkan sebuah menu bantuan untuk memberikan bantuan/penjelasan mengenai Aplikasi Rambu-rambu Lalu Lintas ini. 3.2.
Perancangan System Dalam tahap ini akan dipaparkan mengenai tahap-tahap perancangan
Aplikasi Pembelajaran Rambu-rambu Lalu Lintas Untuk Anak SD Dengan Menggunakan Flash yang meliputi Diagram Flowchart dan Perancangan Struktur Navigasi. 1. Materi Dalam tahapan materi penulis menyediakan penjelasan materi Ramburambu Lalu Lintas agar Anak-anak SD dapat mengerti dan memahami pada saat berada dijalan raya. 2. Kuis Pada halaman Kuis disediakan soal Kuis. Dengan tujuan untuk menguji kemampuan siswa tersebut setelah memahami materi yang sudah di pelajari. 3. Profile Pada halaman profile terdapat halaman biodata pembuat aplikasi. 4. Bantuan Pada halaman bantuan terdapat beberapa pemberitahuan tentang penggunaan aplikasi. 5. Keluar Pada halaman keluar siswa dapat memilih untuk keluar dari aplikasi atau tetap dalam menu utama aplikasi. 1.3 Konsep Pada tahap membuat konsep ini bertujuan untuk menentukan tujuan dari multimedia, serta yang menggunakannya. Tujuan yang berpengaruh pada unsur multimedia. Sebagai pencerminan identitas yang menginginkan informasi sampai kepada siswa. Pada penelitian ini sasarannya adalah siswa SD. Program
http://digilib.mercubuana.ac.id/
ini dirancang untuk membantu siswa agar memudahkan dalam mendapatkan informasi serta pembelajaran mengenai rambu-rambu lalu lintas yang ada di negara indonesia melalui Aplikasi ini. Perancangan konsep ini dapat dilihat pada Tabel. Objek Judul
Deskripsi Aplikasi Pembelajaran Rambu Lalu Lintas Untuk Anak SD Dengan Menggunakan Flash
Pengguna Siswa SD Gambar
Gambar yang dipakai menggunakan format .Jpg dan .Png
Suara
Format suara yang digunakan Mp3 dan wav
Video
Video yang digunakan menggunakan format .Flv Tabel 3.1 Konsep Aplikasi Pembelajaran Rambu Lalu Lintas
1.4
Design Maksud dari tahap design (perancangan) adalah untuk membuat
spesifikasi secara rinci arsitektur dan keutuhan material dalam pembuatan system,metode perancangan yang dipakai dalam membuat aplikasi ini adalah flowchart. 1.5
Diagram Flowchart Flowchart atau diagram alir merupakan sebuah diagram dengan simbol
simbol grafis yang menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing masing langkah tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah demi selangkah untuk penyelesaian masalah yang ada di dalam proses atau algoritma tersebut. Berikut adalah simbolsimbol flowchart yang umum digunakan.
http://digilib.mercubuana.ac.id/
Gambar 3.1 Simbol Diagram Flowchart
http://digilib.mercubuana.ac.id/
3.5.1
Diagram Flowchart Menu Utama Dalam Aplikasi Pembelajaran Rambu Lalu Lintas terdapat beberapa
diagram flowchart yaitu :
Mulai
Halaman Awal
Menu Utama
Materi
Kuis
Profile
Bantuan
Selesai
Gambar 3.2 Flowchart Menu Utama
http://digilib.mercubuana.ac.id/
Keluar
3.5.2
Diagram Flowchart Menu Materi Berikut adalah Diagram Flowchart Menu Materi dalam Aplikasi
Pembelajaran Rambu Lalu Lintas.
Mulai
Halaman Menu
Menu Materi
Rambu Larangan
Rambu Petunjuk
Rambu Perintah
Rambu Peringatan
Pilih Menu
Selesai
Gambar 3.3 Flowchart Menu Materi
http://digilib.mercubuana.ac.id/
Video
3.5.3
Diagram Flowchart Menu Rambu Lalu Lintas Berikut adalah Diagram Flowchart Menu Rambu Lalu Lintas dalam
Aplikasi Pembelajaran Rambu Lalu Lintas. Mulai
Menu Materi
Menu Rambu Lalu Lintas
Rambu 1
Rambu 2
Rambu 3
Rambu 4
Rambu 5
Pilih Rambu
Selesai
Gambar 3.4 Flowchart Menu Rambu Lalu Lintas
http://digilib.mercubuana.ac.id/
Rambu 6
3.5.4
Diagram Flowchart Menu Kuis Berikut adalah Diagram Flowchart Menu Kuis dalam Aplikasi
Pembelajaran Rambu Lalu Lintas.
Mulai
Halaman Menu
Kuis
Soal Dan Jawaban
Nomor Soal < 10
Hasil/Score
Kerjakan Kembali
Ya
Tidak
Selesai
Gambar 3.5 Diagram Flowchart Menu Kuis
http://digilib.mercubuana.ac.id/
3.5.5
Diagram Flowchart Menu Keluar Berikut adalah Diagram Flowchart Menu Keluar dalam Aplikasi
Pembelajaran Rambu Lalu Lintas.
Mulai
Halaman Menu
Keluar
Keluar Menu
Tidak
Ya
Selesai
Gambar 3.6 Flowchart Menu Keluar
http://digilib.mercubuana.ac.id/
1.6
Perancangan Struktur Navigasi Navigasi merupakan struktur terpenting di dalam pembuatan suatu
aplikasi multimedia dan digunakan sebagai penuntun alur sebuah aplikasi atau dapat juga disebut diagram alur dalam perancangan bahasa pemrograman. Struktur navigasi berfungsi untuk menggambarkan dengan sangat jelas rancangan hubungan dan rantai kerja dari beberapa arca yang berbeda dan dapat membantu mengorganisasikan seluruh elemen aplikasi multimedia dengan pemberian perintah dan pesan. Dengan penggambaran struktur navigasi, memberikan kemudahan dalam menganalisa keinteraktifan seluruh objek dalam aplikasi multimedia. Jenis struktur navigasi dapat dikelompokkan menjadi 4 struktur yang berbeda yakni: 1. Struktur Navigasi Linier Struktur navigasi linier merupakan struktur navigasi yang hanya mempunyai 1 rangkaian cerita yang terurut dan tidak diperkenankan adanya percabangan dan cocok digunakan untuk presentasi multimedia yang btidak terlalu mwembutuhkan interaktifitas.Tampilan yang ditampilkan adalah satu halaman sebelumnya atau sesudahnya.
Gambar 3.7 Struktur Navigasi Linier 1. Struktur Navigasi Hirarki Struktur
navigasi
hirarki
di
sebut
juga
struktur
navigasi
bercabang,merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu utama disebut master page (halama utama satu) halaman satu ini akan memiliki halaman percabangan yang disebut slave paage (halaman pendukung) dan jika dipilih akan menjadi halaman kedua begitu seterusnya. Berikut contoh gambarnya:
http://digilib.mercubuana.ac.id/
Gambar 3.8 Struktur Navigasi Hirarki 3. Struktur Navigasi Non Linier Struktur navigasi non linier (tidak berurutan)merupakan pengembangan dari struktur navigasi linier, pada struktur navigasi inidiperkenankan membuat struktur nvigasi bercabang. Percabangan ini berbeda dengan percabangan pada struktur hirarki. Pada percabangan ini walaupun terdapat banyak percabangan tetapi tiap-tiap tampilan mempunyai kedudukan yang sama,sehingga tidak dikenal adanya master atau slave page. Berikut contoh gambarnya :
Gambar 3.9 Struktur Navigasi Non Linier 4. Struktur Navigasi Campuran Struktur navigasi campuran merupakan gabungan dari ketiga struktur navigasi sebelumnya dan disebut juga struktur navigasi bebas. Struktur navigasi ini paling banyak digunakan dalam pembuatan aplikasi multimedia sebab dapat memberikan keinteraksian yang lebih tinggi. Berikut contoh gambarnya:
http://digilib.mercubuana.ac.id/
Gambar 3.10 Struktur Navigasi Campuran 3.6.1
Perancangan Struktur Navigasi Aplikasi Pembelajaran Rambu Lalu Lintas Dalam merancang konsep pembelajaran ini penulis menggunakan struktur Navigasi, hal ini dilakukan agar dapat mempermudah dalam pennyusunan halaman pada halam utama. Berikut adalah gambar navigasi yang ditunjukan. HALAMAN UTAMA
MATERI
KUIS
BANTUAN
SOAL
PROFILE
KELUAR
NILAI
RAMBU LARANGAN
RAMBU PETUNJUK
RAMBU PERINGATAN
RAMBU PERINTAH
DILARANG BERHENTI
PETUNJUK JURUSAN
TIKUNGAN KE KIRI
WAJIB UNTUK PEJALAN KAKI
DILARANG PARKIR
PETUNJUK JALAN TOL
TIKUNGAN KE KANAN
KHUSUS UNTUK BERSEPEDA
DILARANG BELOK KIRI
PETUNJUK TEMPAT PARKIR
TURUNAN
WAJIB BERJALAN LURUS KEDEPAN
DILARANG BELOK KANAN
PETUNJUK TEMPAT WISATA
TANJAKAN
WAJIB MENGIKUTI ARAH KIRI
DILARANG MENDAHULUI
PETUNJUK RUMAH SAKIT
PENYEBRANGAN ORANG
WAJIB MENGIKUTI ARAH KANAN
DILARANG BERBALIK ARAH
PETUNJUK SATU ARAH LURUS
RAMBU LALU LINTAS
WAJIB MENGIKUTI ARAH BUNDARAN
Gambar 3.11 Struktur Navigasi Aplikasi Pembelajaran Rambu Lalu lintas
http://digilib.mercubuana.ac.id/
3.7
Perancangan Storyboard Storyboard adalah sketsa gambar yang disusun berurutan sesuai dengan
naskah, dengan storyboard kita dapat menyampaikan ide cerita kita kepada orang lain dengan lebih mudah, karena kita dapat menggiring khayalan seseorang mengikuti gambar-gambar yang tersaji, sehingga menghasilkan persepsi yang sama pada ide cerita kita.Storyboard juga dapat dikatakan serangkaian sketsa dibuat berbentuk persegi panjang yang menggambarkan suatu urutan (alur cerita) elemen-elemen
yang
diusulkan
untuk
aplikasi
multimedia.
Storyboard
menggabungkan alat bantu narasi dan visual pada selembar kertas sehingga naskah dan visual menjadi terkoordinasi. Dalam kata lain storyboard dapat diartikan sebagai alat perencanaan yang menggambarkan urutan kejadian berupa kumpulan gambar dalam sketsa sederhana. 1. Storyboard Halaman Judul 1 SELAMAT DATANG DI APLIKASI PEMBELAJARAN RAMBU-RAMBU LALU LINTAS
2
Background Wallpaper
Masuk 3 Gambar 3.12 Storyboard Halaman Judul Keterangan : 1. Judul : Aplikasi Pembelajaran Rambu-Rambu Lalu Lintas 2. Tampilan gambar untuk cover judul 3. Button untuk masuk ke halaman Menu Utama
http://digilib.mercubuana.ac.id/
2. Storyboard Halaman Menu Utama
Background Wallpaper
4 SOUND
5 MATERI
6 KUIS
7 PROFIL
8 BANTUAN
Gambar 3.13 Storyboard Halaman Menu Utama Keterangan : 4. Button untuk musik aplikasi 5. Button untuk menu Materi 6. Button untuk menu Kuis 7. Button untuk menu Profile 8. Button untuk menu Bantuan 9. Button untuk keluar Aplikasi
http://digilib.mercubuana.ac.id/
9 KELUAR
3. Storyboard Halaman Materi
10
PENGERTIAN RAMBU LALU LINTAS
12 11
13 14 Background Wallpaper
15 Gambar 3.14 Storyboard Halaman Materi Keterangan : 10. Button pengertian rambu lalu lintas 11. Button Rambu Larangan 12. Button Rambu Petunjuk 13. Button Rambu Peringatan 14. Button Rambu Perintah 15. Button Video 16. Button kembali ke menu sebelumnya
http://digilib.mercubuana.ac.id/
16
4. Storyboard Materi Rambu Larangan
RAMBU LARANGAN
18
19
Background Wallpaper
17 20
22
21
23
24
Gambar 3.15 Storyboard Materi Rambu Larangan Keterangan : 17. Button kembali ke menu sebelumnya 18. Button Judul Rambu Larangan 19. Pengertian Rambu Larangan 20. Rambu dilarang belok kanan 21. Rambu dilarang belok kiri 22. Rambu dilarang berbalik arah 23. Rambu dilarang berhenti 24. Rambu dilarang mendahului 25. Rambu dilarang parkir
http://digilib.mercubuana.ac.id/
25
5. Storyboard Rambu Perintah RAMBU PERINTAH
27
28
Background Wallpaper
26
29
30
31
32
33
Gambar 3.16 Storyboard Materi Rambu Perintah Keterangan : 26. Button kembali ke menu sebelumnya 27. Button Judul Rambu Petunjuk 28. Pengertian Rambu Petunjuk 29. Rambu Perintah arah bundaran 30. Rambu Perintah arah kanan 31. Rambu Perintah arah kiri 32. Rambu Perintah khusus pejalan kaki 33. Rambu Perintah khusus sepeda 34. Rambu Perintah lurus kedepan
http://digilib.mercubuana.ac.id/
34
6. Storyboard Rambu Petunjuk
RAMBU PETUNJUK
36
37
Background Wallpaper
35 38
39
40
41
42
Gambar 3.17 Storyboard Rambu Petunjuk Keterangan : 35. Button kembali ke menu sebelumnya 36. Button Judul Rambu Petunjuk 37. Pengertian Rambu Petunjuk 38. Rambu Petunjuk 1 Arah Lurus 39. Rambu Petunjuk Arah Jalan Tol 40. Rambu Petunjuk Jurusan 41. Rambu Petunjuk Rumah Sakit 42. Rambu Petunjuk Tempat Parkir 43. Rambu Petunjuk Tempat Wisata
http://digilib.mercubuana.ac.id/
43
7. Storyboard Rambu Peringatan
RAMBU PERINGATAN
45
46
Background Wallpaper
44 47
48
49
50
51
Gambar 3.18 Storyboard Rambu Peringatan Keterangan : 44. Button kembali ke menu sebelumnya 45. Button Judul Rambu Peringatan 46. Pengertian Rambu Peringatan 47. Rambu penyeberangan orang 48. Rambu Lalu Lintas 49. Rambu Tanjakan 50. Rambu tikungan ke kanan 51. Rambu tikungan ke kiri 52. Rambu turunan
http://digilib.mercubuana.ac.id/
52
8. Storyboard Masuk Halaman Kuis
Background Wallpaper
Apakah Anda Ingin Mengerjakan Kuis 53
54
55
Gambar 3.19 Storyboard Memasuki Halaman Kuis Keterangan : 53. Pertanyaan Ingin Mengerjakan kuis 54. Button Batal 55. Button Mulai
http://digilib.mercubuana.ac.id/
9. Storyboard Kuis
56
58 57
Background Wallpaper
59 60 Gambar 3.20 Storyboard Kuis Keterangan : 56. Panel Lembar Soal 57. Panel Lembar Jawaban 58. Button Pilihan soal & jawaban 59. Button Posting 60. Button Timer
http://digilib.mercubuana.ac.id/
10. Storyboard Score
Background Wallpaper
SCORE 61 63
62
TIDAK
YA
Gambar 3.21 Storyboard Score Keterangan : 61. Button tampilan Score 62. Button Ulangi Kuis 63. Button kembali ke menu utama
http://digilib.mercubuana.ac.id/
11. Storyboard Keluar Background Wallpaper
64
APAKAH ANDA INGIN KELUAR DARI APLIKASI ?
66
65
Gambar 3.22 Storyboard Keluar Keterangan : 64. Pertanyaan yang diajukan sistem kepada siswa 65. Button Ya (keluar dari Aplikasi) 66. Button Tidak(tetap berada di dalam Aplikasi)
http://digilib.mercubuana.ac.id/