Download - Halaman Depan Laporan TA D3
PERENCANAAN DAN PEMBUATAN MEDIA
PEMBELAJARAN INTERAKTIF TATA CARA
SHOLAT DAN WUDHU
LAPORAN AKHIR
Digunakan sebagai Syarat Kelulusan Diploma III
Politeknik Negeri Malang
OLEH :
HADI NUR CAHYO NIM. 0731143054
MUH. FARDAN JIWANDONO NIM. 0731143068
JURUSAN TEKNIK ELEKTRO
PROGRAM STUDI MANAJEMEN INFORMATIKA
POLITEKNIK NEGERI MALANG
MALANG
2009
i
PERENCANAAN DAN PEMBUATAN MEDIA
PEMBELAJARAN INTERAKTIF TATA CARA
SHOLAT DAN WUDHU
LAPORAN AKHIR
Digunakan sebagai Syarat Kelulusan Diploma III
Politeknik Negeri Malang
OLEH :
HADI NUR CAHYO NIM. 0731143054
MUH. FARDAN JIWANDONO NIM. 0731143068
JURUSAN TEKNIK ELEKTRO
PROGRAM STUDI MANAJEMEN INFORMATIKA
POLITEKNIK NEGERI MALANG
MALANG
2009
i
LEMBAR PENGESAHAN
PERENCANAAN DAN PEMBUATAN MEDIA
PEMBELAJARAN INTERAKTIF
TATA CARA SHOLAT DAN WUDHU
Disusun oleh:
HADI NUR CAHYO NIM: 0731143054
MUH FARDAN JIWANDONO NIM: 0731143068
Laporan Akhir ini telah diuji dan disahkan pada tanggal …................2009
1. Penguji I Arief Prasetyo.S.Kom 1..............................
NIP. 197903132008121002
2. Penguji II Pranoto Suryo Hadi,ST.,MT 2…………………..
NIP. 196907091999031003
3. Pembimbing I Ekojono ST., M.KOM 3...............................
NIP. 195912081985031004
4. Pembimbing II Drs. Rawansyah, M.Pd 4…………………..
NIP. 195906201994031001
Mengetahui dan menyetujui :
Ketua Jurusan Teknik Elektro Ketua Program Studi Manajemen Informatika
Ir. Tundung Subali P., M.T Budi Harijanto,ST.,M.KOM NIP. 195904241988031002 NIP. 196201051990031002
KATA PENGANTAR
Alhamdulillah, puji dan syukur penulis panjatkan kepada ALLAH SWT yang
telah melimpahkan rahmat dan karunia-NYA, sehingga penulis dapat
menyelesaikan penulisan Laporan Akhir ini.
Laporan Akhir yang berjudul Perencanaan dan Pembuatan Media
Pembelajaran Interaktif Tata Cara Sholat dan Wudhu disusun untuk
memperoleh persyaratan maju ujian Laporan Akhir. Pada kesempatan ini
perkenankan penulis menyampaikan ungkapan terima kasih kepada yang
terhormat :
1. Kedua orang tua yang memberikan dukungan secara spiritual dan materil.
2. Ir.Budi Tjahjono sebagai Direktur Politeknik Negeri Malang.
3. Ir.Tundung Subali P., M.T sebagai Ketua Jurusan Teknik Elektro.
4. Budi Harijanto,ST sebagai Ketua Program Studi Manajemen Informatika.
5. Ekojono, ST., M.KOM sebagai Dosen Pembimbing I.
6. Drs. Rawansyah, M.Pd sebagai Dosen Pembimbing II.
7. Semua pihak yang telah membantu penyusunan Laporan Akhir ini yang
tidak mungkin penulis sebutkan satu persatu.
Penulis menyadari bahwa dalam penulisan Laporan Akhir ini masih banyak
kekurangan dan kesalahan, oleh karena itu kritik dan saran sangat penulis
harapkan. Akhirnya, mudah-mudahan Laporan Akhir ini dapat di terima dan
bermanfaat.
Malang, Juli 2009
ii
Penulis
ABSTRAK
Hadi Nur Cahyo dan Muh. Fardan Jiwandono, 2009 “Perencanaan dan
Pembuatan Media Pembelajaran Interaktif Tata Cara Shalat dan Wudhu”
Laporan Akhir Program Studi Manajemen Informatika Jurusan Teknik
Elektro Politeknik Negeri Malang.
Pembimbing I : Ekojono ST., M.KOM
Pembimbing II : Drs. Rawansyah, M.Pd
Perkembangan teknologi komputer semakin pesat seiring dengan perkembangan
software dan hardware yang digunakan. Salah satunya di bidang pendidikan,
komputer banyak sekali berperan penting di dalamnya. Sekarang banyak sekali
software yang tersedia untuk mendukung dan meningkatkan mutu pendidikan.
Laporan ini mengambil permasalahan tentang bagaimana merancang dan
membuat sebuah program pembelajaran Tata Cara Shalat dan Wudhu berbasis
multimedia.
Pembelajaran Tata Cara Shalat dan Wudhu berbasis multimedia dibuat
menggunakan software Macromedia Flash. Yaitu sebuah software yang
digunakan untuk membuat animasi, persentasi dan program pembelajaran.
Langkah pembuatan program yaitu : perancangan sistem, pembuatan gambar,
perekaman audio dan video, pengujian.
ii
iii
Hasil akhir dari penelitian program pembelajaran Tata Cara Shalat dan Wudhu
adalah sebuah CD (Compact disc) pembelajaran. Di dalam program pembelajaran
Tata Cara Shalat dan Wudhu terdapat pembahasan tentang materi wudhu, shalat
dan kuis. Materi wudhu terdapat beberapa pokok bahasan diantaranya: pertama
yang dilakukan ketika berwudhu dan diakhiri dengan doa sesudah wudhu. Di
dalam menu shalat berisi tentang cara mengerjakan shalat mulai dari niat sampai
diakhiri dengan salam disertai contoh-contoh bacaan dalam shalat.
Kata kunci : Macromedia Flash, Pembelajaran Tata Cara Shalat dan Wudhu,
Media pembelajaran, Multimedia.
iv
ABCTRACT
Hadi Nur Cahyo and Muh. Fardan Jiwandono, 2009 “Perencanaan dan
Pembuatan Media Pembelajaran Interaktif Tata Cara Shalat dan Wudhu”
Laporan Akhir Program Studi Manajemen Informatika Jurusan Teknik
Elektro Politeknik Negeri Malang.
Consular I : Ekojono ST., M.KOM
Consular II : Drs. Rawansyah, M.Pd
Computer technology has been growing rapidly along with using of the
development of software and hardware technology. One of them is for educational
purpose. In this field computer plays an important role. Recently a lot of elearning
software are available to support and improve education process. This report
focuses on designing and developing procedures pray and ablution learning
software base on multimedia.
Procedures pray and ablution learning software is developed using Macromedia
Flash. The software is usually used to design animation, presentation and also
learning media. The research methodology of this software development are
v
system design, making of picture using Macromedia Flash, recording of video and
audio, and software testing.
The result of research is a software that can be used to learn how to Procedures
pray and ablution in a form of CD (Compact disc). This software is also
completed with learning media about items ablution and items pray and quiz.
items ablution there are some discussion fundamental among others: first which
when ablution and terminated with prayer after ablution. In menu pray contain
about way of doing pray start from intention terminated with greeting
accompanied reading example of pray.
Keyword : Macromedia Flash, Procedure Pray and ablution learning,
Electronic learning, Multimedia.
vi
vii
DAFTAR ISI
Hal
HALAMAN JUDUL...............................................................................................i
HALAMAN PENGESAHAN................................................................................ii
KATA PENGANTAR...........................................................................................iii
ABSTRAK.............................................................................................................iv
ABSTRACT...........................................................................................................vi
DAFTAR ISI.........................................................................................................vii
DAFTAR GAMBAR..............................................................................................x
DAFTAR TABEL...............................................................................................xiii
BAB I. PENDAHULUAN......................................................................................1
1.1......................................................................................... Latar Belakang
................................................................................................................1
1.2. Masalah.................................................................................................1
1.3. Tujuan Penulisan...................................................................................2
1.4. Ruang Lingkup / Pembatasan Masalah.................................................3
1.5. Metode Perancangan Dan Pembuatan...................................................4
1.6. Sistematika Penulisan............................................................................5
BAB II. LANDASAN TEORI...............................................................................7
2.1................................................................................. Macromedia Flash 8
................................................................................................................7
2.1.1. Konsep Dasar dan Istilah.............................................................8
2.1.1.1. Menu.................................................................................8
2.1.1.2. Stage..................................................................................8
2.1.1.3. ToolBox.............................................................................8
2.1.1.4. Timeline............................................................................8
2.1.1.5. Panel...................................................................................9
2.1.1.5.1. Panel Properties & Filters & Parameters........................9
2.1.1.5.2. Panel Actions..................................................................9
2.1.1.5.3. Panel Library.................................................................10
2.1.1.5.4. Panel Color....................................................................10
2.1.1.5.5. Panel Align & Info & Transform..................................10
2.2...................................................... XML (Extensible Markup Language)
..............................................................................................................11
2.2.1. Keunggulan XML bisa diringkas sebagai berikut......................11
2.2.2. Anatomi XML............................................................................11
2.2.3. Root Tag.....................................................................................13
2.2.4. Atribut........................................................................................14
2.2.5. XML Class.................................................................................14
2.3....................................................................................... Adobe Photosop
..............................................................................................................14
2.4.............................................................................................. Perencanaan
..............................................................................................................16
2.5................................................................................................ Pembuatan
..............................................................................................................16
2.6................................................................................. Media Pembelajaran
..............................................................................................................16
vii
2.7................................................................................................... Interaktif
..............................................................................................................18
2.8.................................................................... Tata Cara Shalat dan Wudhu
..............................................................................................................18
2.9. Flowchart.............................................................................................20
2.10. Php dan Mysql...................................................................................21
2.10.1. PHP..........................................................................................21
2.10.2. VARIABLE..............................................................................22
2.10.3. IF..............................................................................................22
2.10.4. WHILE.....................................................................................24
2.10.5. FOR..........................................................................................24
2.10.6. SWITCH..................................................................................25
2.10.7. REQUIRE................................................................................26
2.10.8. INCLUDE................................................................................27
2.10.9. Mysql........................................................................................27
2.11. Adobe Flash CS3...............................................................................29
BAB III. PERENCANAAN DAN PEMBUATAN.............................................30
3.1............................................................................................... Alur Proses
..............................................................................................................30
3.2. Desain Aplikasi Pembelajaran............................................................34
3.2.1. Desain Menu Utama...................................................................34
3.2.2. Desain Menu Wudhu..................................................................35
3.2.3. Desain Menu Shalat...................................................................37
3.2.4. Desain Menu Kuis......................................................................38
viii
3.2.5. Desain Menu Editor Soal Kuis...................................................40
3.3.........................Pembuatan Aplikasi Menggunakan Macromedia Flash 8
..............................................................................................................41
3.3.1. Pembuatan Karakter Animasi....................................................42
3.3.2. Pembuatan Menu Utama............................................................46
3.3.3. Pembuatan Menu Tata Cara Shalat dan Wudhu.........................49
3.3.4. Pembuatan Materi Tata cara Shalat dan Wudhu........................50
3.3.4.1. Pembuatan Isi Materi Shalat dan Wudhu.......................51
3.3.4.1.1. Pembuatan Animasi..........................................51
3.3.4.1.2. Pembuatan Button.............................................54
3.3.4.1.3. Menampilkan Suara..........................................63
3.3.4.1.4 Menampilkan Video...........................................65
3.3.4.1.5. Pembuatan Teks................................................69
3.3.5. Pembuatan Kuis.........................................................................69
3.3.5.1. Pembuatan Symbol..........................................................69
3.3.5.2. Pemberian Action Script.................................................71
3.3.5.3. Pembuatan soal XML......................................................73
3.3.5.4. Pembuatan Editor Kuis...................................................74
BAB IV. UJI COBA DAN IMPLEMENTASI...................................................77
4.1....................................................................................... Perangkat Keras
..............................................................................................................77
4.2. Pendistribusian Program.....................................................................77
4.3. Uji Coba..............................................................................................77
4.3.1. Menu Utama................................................................................77
ix
4.3.2. Uji Coba Materi Wudhu dan Shalat............................................78
4.3.3. Uji Coba Kuis..............................................................................82
4.3.4. Uji Coba Menu Editor Kuis........................................................83
BAB V. ANALISIS HASIL UJI COBA.............................................................85
5.1..................................................................................................... Analisis
..............................................................................................................85
5.1.1. Tampilan Menu Utama..............................................................85
5.1.2. Tampilan Menu Wudhu.............................................................85
5.1.3. Tampilan Menu Sholat...............................................................85
5.1.4. Isi Materi Sholat dan Wudhu.....................................................86
5.1.5. Tampilan Kuis............................................................................86
5.1.6. Materi di dalam Kuis..................................................................86
5.1.7. Tampilan Menu Editor Kuis.......................................................87
BAB VI. PENUTUP.............................................................................................88
6.1. Kesimpulan.........................................................................................88
6.2. Saran....................................................................................................89
DAFTAR PUSTAKA...........................................................................................90
PROFIL PENULIS..............................................................................................91
LAMPIRAN..........................................................................................................93
x
xi
DAFTAR GAMBAR
Hal
Gambar 3.1. Alur Proses Aplikasi.......................................................31
Gambar 3.2. Flowchart Kuis Interaktif................................................33
Gambar 3.3. Desain Form Menu Utama..............................................34
Gambar 3.4. Desain Form Menu Wudhu.............................................35
Gambar 3.5. Desain Form Menu Shalat...............................................37
Gambar 3.6. Desain Intro Sebelum Kuis.............................................38
Gambar 3.7. Desain Form Menu Kuis.................................................39
Gambar 3.8. Desain Menu Editor Kuis................................................40
Gambar 3.9. Area kerja Baru Pada Flash 8..........................................42
Gambar 3.10. Hasil Import Gambar....................................................43
Gambar 3.11. Menggambar Gambar...................................................44
Gambar 3.12. Mengkoreksi Gambar....................................................44
Gambar 3.13. Hasil Dari Mengkoreksi Gambar..................................45
Gambar 3.14. Hasil Akhir Dari Menggambar.....................................45
Gambar 3.15. Background Awal.........................................................46
Gambar 3.16. Hasil Mengubah Warna Background............................47
Gambar 3.17. Menulis Judul Menu Utama..........................................47
Gambar 3.18. Hasil Dupilkat Teks......................................................47
Gambar 3.19. Langkah ke Buttons......................................................48
Gambar 3.20. Hasil Akhir Tampilan Menu Utama..............................48
Gamabr 3.21. Bingkai Menu Shalat.....................................................49
Gambar 3.22. Tombol Menu Shalat.....................................................50
x
Gambar 3.23. Langkah Mengimport Gambar......................................51
Gamabr 3.24. Simbol Graphic.............................................................52
Gambar 3.25. Animasi Karakter..........................................................53
Gambar 3.26. Tampilan Layer Animasi..............................................53
Gambar 3.27. Buka Folder Push Buttons.............................................55
Gambar 3.28. Atur Posisi Tombol.......................................................55
Gambar 3.29. Simbol Suara Di dalam Panel Library..........................56
Gambar 3.30. Kotak Dialog Linkage...................................................56
Gambar 3.31. Script Untuk Tombol Warna Merah.............................57
Gambar 3.32. Script Untuk Tombol Warna Kuning............................57
Gambar 3.33. Script Untuk Tombol Warna Hijau...............................57
Gambar 3.34. Script Untuk Tombol Warna Kuning............................58
Gambar 3.35. Script Untuk Mendefinisikan Ojek Suara.....................58
Gambar 3.36. Fader-Gain....................................................................58
Gambar 3.37. Script Pengatur Suara....................................................59
Gambar 3.38. Beberapa Tombol..........................................................61
Gambar 3.39. Masukkan target,property, dan value............................63
Gambar 3.40. Script Tambahan Untuk Tombol Close........................63
Gambar 3.41. Langkah Sound Recorder..............................................64
Gambar 3.42. Kotak Dialog Sound Recorder......................................64
Gambar 3.43. Tampilan Suara Materi cuci tangan..............................65
Gambar 3.44. Import File.....................................................................66
Gambar 3.45. Kotak Dialog Select Video...........................................66
Gambar 3.46. Deployment...................................................................67
xi
Gambar 3.47. Kotak Dialog Skinning..................................................68
Gambar 3.48. Kotak Dialog Finish Video Import...............................68
Gambar 3.49. Script Menampilkan Pertanyaan...................................72
Gambar 3.50. Script Nilai Jawaban.....................................................72
Gambar 3.51. Script Hasil Akhir Kuis.................................................73
Gambar 3.52. Script Php Pembuatan Soal XML.................................74
Gambar 3.53. Database Soal Kuis.......................................................75
Gambar 3.54. Form Editor Kuis..........................................................75
Gambar 4.1. Tampilan Menu Utama...................................................78
Gambar 4.2. Menu wudhu...................................................................79
Gambar 4.3. Menu Shalat....................................................................81
Gambar 4.4. Tampilan Soal Kuis.........................................................82
Gambar 4.5. Script Koneksi Dengan Database....................................83
Gambar 4.6. Menu Editor Kuis............................................................83
xii
DAFTAR TABEL
Hal
Tabel 2.1. Simbol Flowchart......................................................................20
Tabel 2.2. Tipe Data MySql.......................................................................28
Tabel 3.1. Beberapa Graphic.....................................................................54
Tabel 3.2. Beberapa Button.......................................................................60
Tabel 3.3. Beberapas Statis Teks...............................................................69
Tabel 3.4. Simbol Pada Kuis......................................................................70
