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

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

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

NIP. 195904241988031002

Budi Harijanto,ST.,M.KOM
NIP. 196201051990031002

ii

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
Penulis

iii
ii

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.
Hasil akhir dari penelitian program pembelajaran Tata Cara Shalat dan Wudhu
adalah sebuah CD (Compact disc) pembelajaran. Di dalam program pembelajaran

iv

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.

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
system design, making of picture using Macromedia Flash, recording of video and
audio, and software testing.

vi

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.

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
vii
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

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
viii
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

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
ix
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

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
x
DAFTAR PUSTAKA...........................................................................................90
PROFIL PENULIS..............................................................................................91
LAMPIRAN..........................................................................................................93

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

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