BAB III KONSEP APLIKASI DAN PERANCANGAN
3.1 Konsep Aplikasi Dalam membangun “Aplikasi Multimedia Pembelajaran Otomotif dan Pengenalan Dasar – dasar Mesin Honda Supra 100cc” ini penulis menganalisis akan kebutuhan dasar sistem. Analisis dilakukan terhadap data-data yang merepresentasikan masalah, sehingga dapat diketahui spesifikasi kebutuhan sistem yang akan dibangun. Perkembangan teknologi komputer telah membuat komputer bukan hanya lagi sebagai alat bantu hitung dan memproses data saja, tetapi juga dapat digunakan pada bidang multimedia. Perangkat ajar yang berbasis multimedia dapat digunakan untuk menciptakan sarana belajar yang menarik dan interaktif untuk pengguna belajar otomotif tentang perakitan mesin motor. Selama ini pembelajaran hanya menggunakan media latihan. Dalam proses ini dirancang suatu Aplikasi Multimedia Pembelajaran Otomotif dan Pengenalan Dasar – dasar Mesin Honda 100cc. Aplikasi ini terdiri dari materi, latihan, keluar dan profil. Aplikasi yang dirancang dapat menjadi alternatif untuk membantu belajar pengguna khususnya sistem perakitan mesin, program ini menyediakan fitur-fitur yang menarik karena ditunjang oleh gambar dan suara, sehingga memiliki daya tarik tersendiri bagi pengguna yang dapat memicu semangat belajar pengguna untuk meningkatkan hasil belajar, serta pengguna tidak cepat merasa jenuh dalam proses belajar.
Program Aplikasi Multimedia Pembelajaran Otomotif dan Pengenalan Dasar – dasar Mesin Honda 100cc ini bertujuan untuk mempermudah pemahaman mengenai tata cara perakitan mesin motor dan membantu proses belajar mengajar. 3.2 Perancangan Pada bagian ini akan dijelaskan secara rinci mengenai Aplikasi multimedia pembelajaran otomotif dan pengenalan dasar-dasar motor honda supra 100 CC. yang meliputi pemodelan use case diagram, activity diagram dan sequence diagram. 3.2.1 Pemodelan Use Case Diagram Use case diagram mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan (Fowler, 2005:141). Diagram ini menunjukkan fungsionalitas suatu sistem dan bagaimana sistem berinteraksi dengan dunia luar. Use case diagram Aplikasi multimedia pembelajaran otomotif dan pengenalan dasar-dasar motor honda supra 100 CC secara umum.
Gambar 3.1 use case diagram
Pada Aplikasi multimedia pembelajaran otomotif dan pengenalan dasardasar motor honda supra 100 CC dapat diidentifikasi bahwa aktor utamanya adalah user (pengguna). Dari identifikasi aktor tersebut, maka akan didapatkan suatu use case diagram dan beberapa skenario yang memperlihatkan interaksiinteraksi use case dengan aktor.
Berikut adalah deskripsi Use case yang telah digambarkan di atas : 1. Profil Nama
:
Profil
Aktor
:
Pengguna
Deskripsi
:
Pengguna dapat melihat data penulis di menu profil
Skenario
:
1. Pengguna masuk ke menu profil terdapat data penulis 2. Sistem masuk ke halaman profil a. Kondisi awal : Pengguna menerima halaman profil terdapat data penulis. Kondisi akhir : Pengguna dapat melihat data profil.
2. Materi Nama
:
Materi
Aktor
:
Pengguna
Deskripsi
:
Pengguna dapat memilih menu materi
Skenario
:
1. Pengguna masuk ke halaman materi terdapat materi yang terdiri tentang sistem pengenalan alat tangan, pengetahuan produk, dasar – dasar mesin, sistem bahan bakar, Teknologi keungulan sepeda motor Honda dan penjelasan – penjelasan. 2. Sistem masuk ke halaman materi Kondisi awal : 1. Pengguna menerima halaman materi terdapat materi tentang sistem pengenalan alat tangan, pengetahuan produk, dasar – dasar mesin,
sistem bahan bakar, Teknologi keungulan sepeda motor Honda dan penjelasan – penjelasan. 2. Sistem masuk kehalaman materi Kondisi akhir : Pengguna Siap mempelajari materi tentang sistem pengenalan alat tangan, pengetahuan produk, dasar – dasar mesin, sistem bahan bakar, Teknologi keungulan sepeda motor Honda dan penjelasan – penjelasan.
3. Latihan Nama
:
Latihan
Aktor
:
Pengguna
Deskripsi
:
Pengguna dapat dapat mengerjakan soal latihan
dihalaman menu dengan memilih menu latihan dan menyimpan nilai latihan mereka. Skenario
:
1. masuk kehalaman latihan terdapat latihan soal pilihan ganda 2. Sistem masuk ke latihan 3. pengguna menjawab latihan soal pilihan ganda 4. sistem mengecek jawaban benar dan salah 5. sistem menyimpan nilai latihan pengguna. a. Kondisi awal : Pengguna menerima halaman latihan terdapat latihan soal pilihan ganda Kondisi akhir : Pengguna mengisi jawaban pada halaman latihan pilihan ganda dan mendapatkan hasil nilai jawaban benar dan salah. Dan menyimpanya ke dalam sistem.
4. Keluar Nama
:
keluar
Aktor
:
Pengguna
Deskripsi
:
Pengguna dapat keluar dihalaman peringatan dengan
memilih menu Keluar Skenario
:
3. Pengguna masuk ke menu Keluar terdapat halaman peringatan 4. sistem masuk kemenu Keluar b. Kondisi awal : Penguna menerima halaman Keluar terdapat peringatan Kondisi akhir : Pengguna dapat memilih Keluar atau kembali kemenu utama
3.2.2 Pemodelan Activity Diagram Activity diagram menunjukkan langkah demi langkah untuk melakukan komputasi. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Diagram ini menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersamaan. Aliran pengaturan dari aktivitas suatu state ke state berikutnya disebut dengan transition.
1. Diagram Aktifitas untuk Halaman Materi
Aktifitas dimulai ketika pengguna sudah masuk ke dalam halaman menu, aktivitas selanjutnya memilih halaman materi, di dalam materi aktifitas selanjutnya adalah memilih submenu materi yang akan dijalankan, yaitu menu sistem pengenalan alat tangan, pengetahuan produk, dasar-dasar mesin, sistem bahan bakar, Teknologi keungulan sepeda motor Honda dan penjelasan penjelasan. Setelah user atau pengguna memilih salah satu dari menu tersebut, aktifitas selanjutnya adalah pengguna bisa memilih untuk kembali ke materi dan kembali ke menú.
Gambar 3.2 Activity diagram menu materi
2.
Diagram Aktifitas untuk Halaman Latihan Aktifitas dimulai ketika user sudah masuk kedalam halaman menu,
selanjutnya memilih halaman latihan. Pada halaman latihan pengguna harus menjawab 10 pertanyaan dalam soal pilihan ganda, selesai menjawab pertanyaan pengguna dapat mengetahui jumlah soal yang benar dan jumlah soal yang salah.
Siswa
Sistem
Memilih menu Latihan
Sistem menampilkan halaman Latihah
Pilih mulai Sistem akan menampikan soal no. 1
Ya
Pilih Jawaban
Sistem akan menampikan soal no. 2
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 3
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 4
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 5
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 6
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 7
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 8
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 9
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampikan soal no. 10
Pilih A, B, C, D
Pilih Jawaban
Sistem akan menampilkan nilai
Pilih A, B, C, D
Tidak
Pilih Kerjakan lagi
Ya
PIlih
Simpan
Lihat Nilai
Menampilkan Nilai
Sistem menyimpan nilai
Gambar 3.3 Activity diagram menu latihan
3. Diagram Aktifitas untuk Halaman Profile Aktifitas dimulai ketika user sudah masuk kedalam halaman menu, selanjutnya memilih halaman profil. Aktivitas setelah memilih menu profil pengguna dapat melihat profil pembua aplikasi
Siswa
Memilih menu profil
Sistem
Sistem menampilkan halaman profil
Siswa melihat profil
Gambar 3.5 Activity diagram menu profil
4. Diagram Aktifitas untuk Halaman Keluar Aktifitas dimulai ketika user sudah masuk kedalam halaman menú, selanjutnya memilih halaman Keluar. Aktivitas setelah memilih menu Keluar pengguna akan ditampikan pesan peringatan “apakan anda yakin ingin keluar”.
Gambar 3.6 Activity diagram menu logout
3.2.3 Pemodelan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktivitas sebuah skenario tunggal. Diagram tersebut menunjukkan sejumlah objek contoh dan pesan-pesan yang melewati objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah digambarkan sebelumnya, dapat dibuat sequence diagram.
1. Pemodelan Sequence Diagram untuk Halaman Materi Sequence Diagram halaman materi menggambarkan skenario dan langkahlangkah yang dilakukan pengguna. Pertama pengguna masuk ke halaman menu, kemudian memilih materi kemudian sistem menampilkan halaman materi, selanjutnya pengguna dapat memilih submenu dalam menu materi, terdiri dari menu pengenalan alat tangan, pengetahuan produk, dasar-dasar mesin, sistem
bahan bakar, teknologi keunggulan sepeda motor honda, penjelasan-penjelasan, kemudian masuk ke halaman menu yang dipilih, sistem menampilkan halaman yang dipilih.
Gambar 3.6 Sequence diagram untuk halaman materi
2. Pemodelan Sequence Diagram halaman Latihan Sequence Diagram halaman latihan menggambarkan skenario dan langkah -langkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk kehalaman menu kemudian memilih halaman latihan, sistem akan menampilkan halaman latihan, pengguna menjawab latihan, sistem mengecek jawaban, dan menampilkan jawaban.
Layar menu Latihan
Siswa 1. memilih menu Latihan
Layar submenu latihan
2. masuk kehalaman latihan soal
3. Tampilan halaman latihan soal
4. menjawab pertanyaan
6. Menampilkan Berapa jawaban yang benar dan berapa yang salah
5. Jawaban di cek
Gambar 3.7 Sequence diagram untuk menu latihan
3. Pemodelan Sequence Diagram Halaman Profil Sequence Diagram menu profil menggambarkan skenario dan langkahlangkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke halaman menu kemudian memilih halaman profil, sistem akan menampilkan halaman profil, pengguna melihat profil
Layar menu profil
Penguna
Memilih menu profil
Tampilkan halaman profil
Melihat profil
. Gambar 3.9 Sequence diagram untuk menu profil
4. Pemodelan Sequence Diagram Halaman logout Sequence Diagram menu logout menggambarkan skenario dan langkahlangkah yang dilakukan pengguna, hingga pengguna keluar atau selesai. Pertama pengguna masuk ke halaman menu kemudian memilih halaman logout, sistem akan menampilkan halaman logout
3.3 Desain Antar Muka Pada bagian desain antar muka (interface design) ini akan digambarkan mengenai tahapan-tahapan yang akan ditampilkan pada Aplikasi multimedia pembelajaran otomotif dan pengenalan dasar-dasar motor honda supra 100 CC
Desain antar muka ini merupakan halaman intro sebelum masuk ke halaman menu utama, dihalaman ini terdapat lagu latar dan tombol yang dapat diklik untuk masuk ke halaman menu utama.
Gambar 3.10 Rancangan halaman Login
1. Desain antar Muka Halaman Materi Desain antar muka ini merupakan halaman materi, pada halaman ini terdapat gambar dan penjelasan dari gerakan tersebut disertai dengan suara, sehingga memudahkan pengguna dalam memahami penjelasan yang penulis berikan. Juga terdapat tombol dari 1 hingga 6 yang jika diklik akan pindah ke halaman yang lain.
Gambar 3.11 Rancangan halaman materi
2. Desain antar Muka Halaman Latihan Desain antar muka ini merupakan halaman latihan. Pada halaman ini pengguna diperintahkan untuk menjawab pertanyaan, dalam latihan ini terdapat sepuluh soal pilihan ganda untuk dijawab.
Gambar 3.12 Rancangan halaman latihan
3. Desain antar Muka Halaman Latihan untuk Nilai Desain antar muka ini merupakan halaman latihan untuk hasil nilai, Pada menu ini pengguna dapat melihat hasil nilai benar dan salah setelah menjawab sepuluh soal pilihan ganda dan dapat menyimpan nilai ke dalam aplikasi.
Gambar 3.13 Rancangan halaman latihan untuk nilai
4. Desain antar Muka Halaman Peringatan Pada halaman peringatan tampilan untuk memperingatkan pengguna apakah ingin keluar dari aplikasi atau kembali ke aplikasi. Jika memilih ”keluar” maka akan keluar dari aplikasi, jika memilih ”kembali” maka akan kembali ke halaman menu. Halaman ini muncul setelah meng-klik tombol keluar yang ada pada halaman menu.
Gambar 3.15 Rancangan halaman peringatan
5. Desain antar muka Profil Pada halaman profil menampilkan data penulis. Terdapat tombol untuk kembali ke menu.
Gambar 3.16 Rancangan halaman profil
3.4 PENGUMPULAN BAHAN DAN MATERIAL
Aplikasi multimedia pembelajaran otomotif dan pengenalan dasar-dasar motor honda supra 100 CC yang akan di gunakan sebagai media pembelajaran. Berikut deskripsi pengumpulan bahan material Aplikasi pembelajaran dasar Mata Pelajaran Otomotif :
Tabel 3.1 Material
No.
Nama Gambar
Gambar
Ukuran
Piksel
Tipe
Keterangan
1
106 kb
1024 X 768
JPG
Dibuat sendiri
2
49,8 kb
800 X 600
JPG
Dibuat sendiri
3
12 kb
200 X 50
JPG
Dibuat sendiri
4
9.46 kb
250 X 50
PNG Dibuat sendiri
5
3.57 kb
500 X 50
PNG Dibuat sendiri
6
66.7 kb
400 X 400
PNG Dibuat sendiri
7
98.2 kb
400 X 400
PNG Dibuat sendiri
8
43.5 kb
400 X 400
PNG Dibuat sendiri
9
90.6 kb
400 X 400
PNG Dibuat sendiri
10.
12.2 kb
300 X 300
PNG Dibuat sendiri
11
40.7 kb
150 X 50
PNG Dibuat sendiri
12
24.08 kb 250 X 250
PNG Dibuat sendiri
12
18.6 kb
PNG Dibuat sendiri
250 X 300
Tabel 3.2 Audio
No
Nama
1
Let’s beat
Ukuran get
the 3.2 Mb
Durasi
Tipe
Keterangan
Mp3
Download di http://www.4shared.com/get/3hXvS 3D6/Rini_Idol__Lets_Get_The_Beat.html
Tabel 3.3 Animasi Gif
No
Nama
Ukuran
Tipe
Keterangan
