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 mulai Ya menampikan soal no. 1 A, B, C, D menampikan soal no. 2 A, B, C, D menampikan soal no. 3 A, B, C, D menampikan soal no. 4 A, B, C, D menampikan soal no. 5 A, B, C, D menampikan soal no. 6 A, B, C, D menampikan soal no. 7 A, B, C, D menampikan soal no. 8 A, B, C, D menampikan soal no. 9 A, B, C, D menampikan soal no. 10 A, B, C, D menampilkan nilai Tidak Kerjakan lagi Ya PIlih Lihat Nilai Menampilkan Nilai Simpan 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 Sistem Memilih menu profil 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.
Siswa 1. memilih menu Latihan Layar menu Latihan 2. masuk kehalaman latihan soal Layar submenu latihan 3. Tampilan halaman latihan soal 6. Menampilkan Berapa jawaban yang benar dan berapa yang salah 4. menjawab pertanyaan 5. 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
Penguna Layar menu profil 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 250 X 300 PNG Dibuat sendiri Tabel 3.2 Audio No Nama Ukuran Durasi Tipe Keterangan 1 Let s get the 3.2 Mb Mp3 Download di beat http://www.4shared.com/get/3hxvs 3D6/Rini_Idol_- _Lets_Get_The_Beat.html
Tabel 3.3 Animasi Gif No Nama Ukuran Tipe Keterangan