BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 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:

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

3 5. Menu Bantuan Pada bagian ini akan ditampilkan sebuah menu bantuan untuk memberikan bantuan/penjelasan mengenai Aplikasi Rambu-rambu Lalu Lintas ini 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

4 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 Deskripsi Judul 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.

5 Gambar 3.1 Simbol Diagram Flowchart

6 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 Keluar Selesai Gambar 3.2 Flowchart Menu Utama

7 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 Video Pilih Menu Selesai Gambar 3.3 Flowchart Menu Materi

8 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 Rambu 6 Pilih Rambu Selesai Gambar 3.4 Flowchart Menu Rambu Lalu Lintas

9 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

10 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

11 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:

12 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:

13 Gambar 3.10 Struktur Navigasi Campuran 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 PROFILE KELUAR SOAL 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

14 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

15 2. Storyboard Halaman Menu Utama Background Wallpaper SOUND MATERI KUIS PROFIL BANTUAN KELUAR 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

16 3. Storyboard Halaman Materi 10 PENGERTIAN RAMBU LALU LINTAS Background Wallpaper 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

17 4. Storyboard Materi Rambu Larangan 18 RAMBU LARANGAN 19 Background Wallpaper 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

18 5. Storyboard Rambu Perintah 27 RAMBU PERINTAH 28 Background Wallpaper 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

19 6. Storyboard Rambu Petunjuk 36 RAMBU PETUNJUK 37 Background Wallpaper 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

20 7. Storyboard Rambu Peringatan 45 RAMBU PERINGATAN 46 Background Wallpaper 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

21 8. Storyboard Masuk Halaman Kuis Background Wallpaper Apakah Anda Ingin Mengerjakan Kuis Gambar 3.19 Storyboard Memasuki Halaman Kuis Keterangan : 53. Pertanyaan Ingin Mengerjakan kuis 54. Button Batal 55. Button Mulai

22 9. Storyboard Kuis Background Wallpaper 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

23 10. Storyboard Score Background Wallpaper SCORE TIDAK 62 YA Gambar 3.21 Storyboard Score Keterangan : 61. Button tampilan Score 62. Button Ulangi Kuis 63. Button kembali ke menu utama

24 11. Storyboard Keluar Background Wallpaper 64 APAKAH ANDA INGIN KELUAR DARI APLIKASI? 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)