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

2009LEMBAR 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. 1979031320081210022. Penguji II

Pranoto Suryo Hadi,ST.,MT 2..NIP. 1969070919990310033. Pembimbing I

Ekojono ST., M.KOM 3...............................

NIP. 195912081985031004

4. Pembimbing IIDrs. 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. 196201051990031002KATA 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

ABSTRAKHadi 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.KOMPembimbing II : Drs. Rawansyah, M.PdPerkembangan 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 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.

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.

DAFTAR ISI

Hal

HALAMAN JUDULi

HALAMAN PENGESAHANii

KATA PENGANTARiii

ABSTRAKiv

ABSTRACTviDAFTAR ISIviiDAFTAR GAMBARxDAFTAR TABELxiiiBAB I. PENDAHULUAN11.1. Latar Belakang1

1.2. Masalah1

1.3. Tujuan Penulisan2

1.4. Ruang Lingkup / Pembatasan Masalah3

1.5. Metode Perancangan Dan Pembuatan4

1.6. Sistematika Penulisan5

BAB II. LANDASAN TEORI7

2.1. Macromedia Flash 872.1.1. Konsep Dasar dan Istilah8

2.1.1.1. Menu8

2.1.1.2. Stage8

2.1.1.3. ToolBox8

2.1.1.4. Timeline8

2.1.1.5. Panel9

2.1.1.5.1. Panel Properties & Filters & Parameters9

2.1.1.5.2. Panel Actions9

2.1.1.5.3. Panel Library10

2.1.1.5.4. Panel Color10

2.1.1.5.5. Panel Align & Info & Transform10

2.2. XML (Extensible Markup Language)112.2.1. Keunggulan XML bisa diringkas sebagai berikut11

2.2.2. Anatomi XML11

2.2.3. Root Tag13

2.2.4. Atribut14

2.2.5. XML Class14

2.3. Adobe Photosop14

2.4. Perencanaan16

2.5. Pembuatan16

2.6. Media Pembelajaran16

2.7. Interaktif18

2.8. Tata Cara Shalat dan Wudhu18

2.9. Flowchart20

2.10. Php dan Mysql21

2.10.1. PHP21

2.10.2. VARIABLE22

2.10.3. IF22

2.10.4. WHILE24

2.10.5. FOR24

2.10.6. SWITCH25

2.10.7. REQUIRE26

2.10.8. INCLUDE27

2.10.9. Mysql27

2.11. Adobe Flash CS329

BAB III. PERENCANAAN DAN PEMBUATAN30

3.1. Alur Proses30

3.2. Desain Aplikasi Pembelajaran34

3.2.1. Desain Menu Utama34

3.2.2. Desain Menu Wudhu35

3.2.3. Desain Menu Shalat37

3.2.4. Desain Menu Kuis38

3.2.5. Desain Menu Editor Soal Kuis40

3.3. Pembuatan Aplikasi Menggunakan Macromedia Flash 841

3.3.1. Pembuatan Karakter Animasi42

3.3.2. Pembuatan Menu Utama463.3.3. Pembuatan Menu Tata Cara Shalat dan Wudhu493.3.4. Pembuatan Materi Tata cara Shalat dan Wudhu50 3.3.4.1. Pembuatan Isi Materi Shalat dan Wudhu51 3.3.4.1.1. Pembuatan Animasi51 3.3.4.1.2. Pembuatan Button54 3.3.4.1.3. Menampilkan Suara63 3.3.4.1.4 Menampilkan Video65 3.3.4.1.5. Pembuatan Teks693.3.5. Pembuatan Kuis69 3.3.5.1. Pembuatan Symbol69 3.3.5.2. Pemberian Action Script71 3.3.5.3. Pembuatan soal XML73

3.3.5.4. Pembuatan Editor Kuis74BAB IV. UJI COBA DAN IMPLEMENTASI774.1. Perangkat Keras77

4.2. Pendistribusian Program774.3. Uji Coba77 4.3.1. Menu Utama77 4.3.2. Uji Coba Materi Wudhu dan Shalat78 4.3.3. Uji Coba Kuis82

4.3.4. Uji Coba Menu Editor Kuis83BAB V. ANALISIS HASIL UJI COBA855.1. Analisis855.1.1. Tampilan Menu Utama855.1.2. Tampilan Menu Wudhu855.1.3. Tampilan Menu Sholat855.1.4. Isi Materi Sholat dan Wudhu865.1.5. Tampilan Kuis865.1.6. Materi di dalam Kuis86

5.1.7. Tampilan Menu Editor Kuis87BAB VI. PENUTUP886.1. Kesimpulan886.2. Saran89DAFTAR PUSTAKA90PROFIL PENULIS91

LAMPIRAN93

DAFTAR GAMBAR

Hal

Gambar 3.1. Alur Proses Aplikasi31Gambar 3.2. Flowchart Kuis Interaktif33

Gambar 3.3. Desain Form Menu Utama34

Gambar 3.4. Desain Form Menu Wudhu35

Gambar 3.5. Desain Form Menu Shalat37

Gambar 3.6. Desain Intro Sebelum Kuis38Gambar 3.7. Desain Form Menu Kuis39Gambar 3.8. Desain Menu Editor Kuis40

Gambar 3.9. Area kerja Baru Pada Flash 842Gambar 3.10. Hasil Import Gambar43Gambar 3.11. Menggambar Gambar44Gambar 3.12. Mengkoreksi Gambar44Gambar 3.13. Hasil Dari Mengkoreksi Gambar45Gambar 3.14. Hasil Akhir Dari Menggambar45Gambar 3.15. Background Awal46Gambar 3.16. Hasil Mengubah Warna Background47Gambar 3.17. Menulis Judul Menu Utama47Gambar 3.18. Hasil Dupilkat Teks47Gambar 3.19. Langkah ke Buttons48Gambar 3.20. Hasil Akhir Tampilan Menu Utama48Gamabr 3.21. Bingkai Menu Shalat49Gambar 3.22. Tombol Menu Shalat50Gambar 3.23. Langkah Mengimport Gambar51Gamabr 3.24. Simbol Graphic52Gambar 3.25. Animasi Karakter53Gambar 3.26. Tampilan Layer Animasi53Gambar 3.27. Buka Folder Push Buttons55Gambar 3.28. Atur Posisi Tombol55Gambar 3.29. Simbol Suara Di dalam Panel Library56Gambar 3.30. Kotak Dialog Linkage56Gambar 3.31. Script Untuk Tombol Warna Merah57Gambar 3.32. Script Untuk Tombol Warna Kuning57

Gambar 3.33. Script Untuk Tombol Warna Hijau57Gambar 3.34. Script Untuk Tombol Warna Kuning58Gambar 3.35. Script Untuk Mendefinisikan Ojek Suara58

Gambar 3.36. Fader-Gain58Gambar 3.37. Script Pengatur Suara59Gambar 3.38. Beberapa Tombol61Gambar 3.39. Masukkan target,property, dan value63

Gambar 3.40. Script Tambahan Untuk Tombol Close63Gambar 3.41. Langkah Sound Recorder64Gambar 3.42. Kotak Dialog Sound Recorder64Gambar 3.43. Tampilan Suara Materi cuci tangan65Gambar 3.44. Import File66Gambar 3.45. Kotak Dialog Select Video66Gambar 3.46. Deployment67Gambar 3.47. Kotak Dialog Skinning68Gambar 3.48. Kotak Dialog Finish Video Import68Gambar 3.49. Script Menampilkan Pertanyaan72Gambar 3.50. Script Nilai Jawaban72Gambar 3.51. Script Hasil Akhir Kuis73

Gambar 3.52. Script Php Pembuatan Soal XML74

Gambar 3.53. Database Soal Kuis75

Gambar 3.54. Form Editor Kuis75Gambar 4.1. Tampilan Menu Utama78Gambar 4.2. Menu wudhu79Gambar 4.3. Menu Shalat81Gambar 4.4. Tampilan Soal Kuis82Gambar 4.5. Script Koneksi Dengan Database83

Gambar 4.6. Menu Editor Kuis83

DAFTAR TABEL

HalTabel 2.1. Simbol Flowchart20

Tabel 2.2. Tipe Data MySql28

Tabel 3.1. Beberapa Graphic54

Tabel 3.2. Beberapa Button60

Tabel 3.3. Beberapas Statis Teks69

Tabel 3.4. Simbol Pada Kuis70

i

i

ii

iii

ii

iv

v

vi

vii

vii

viii

ix

x

xi

x

xi

xii