PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M....

121
i PERANCANGAN DAN PEMBUATAN APLIKASI PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA (Studi Kasus : MA. Tarbiyatut Tholabah) Oleh : M. Agus Saifuddin 2040 9100 2576 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011 M / 1432 H

Transcript of PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M....

Page 1: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

i

PERANCANGAN DAN PEMBUATAN APLIKASI

PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

(Studi Kasus : MA. Tarbiyatut Tholabah)

Oleh :

M. Agus Saifuddin

2040 9100 2576

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

Page 2: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

PERANCANGAN DAN PEMBUATAN APLIKASI

PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

(Studi Kasus : MA. Tarbiyatut Tholabah)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

i

PERANCANGAN DAN PEMBUATAN APLIKASI

PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

(Studi Kasus : MA. Tarbiyatut Tholabah)

Oleh :

M. Agus Saifuddin

2040 9100 2576

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

PERANCANGAN DAN PEMBUATAN APLIKASI

PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

(Studi Kasus : MA. Tarbiyatut Tholabah)

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

Page 3: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

ii

PERANCANGAN DAN PEMBUATAN APLIKASI

PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

(Studi Kasus : MA. Tarbiyatut Tholabah)

Skripsi

Sebagai Salah Satu Syarat Untuk Memperoleh Gelar

Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Disusun oleh :

M. Agus Saifuddin

2040 9100 2576

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

Page 4: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

iii

PERANCANGAN DAN PEMBUATAN APLIKASI

PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

(Studi Kasus : MA. Tarbiyatut Tholabah)

Skripsi

Diajukan kepada Fakultas Sains dan Teknologi

Untuk memenuhi persyaratan memperoleh

gelar Sarjana Komputer (S.Kom)

Oleh :

M. AGUS SAIFUDDIN

2040 9100 2576

Menyetujui,

Mengetahui,

Ketua Program Studi Teknik Informatika Fakultas Sains dan Teknologi

Yusuf Durrachman, M.Sc., MIT

NIP. 19710522 200604 1002

Pembimbing I Pembimbing II

Herlino Nanang, MT NIP. 19731209 200501 1002

Victor Amrizal, M.Kom NIP. 150411288

Page 5: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

iv

PENGESAHAN UJIAN

Skripsi yang berjudul “Perancangan dan Pembuatan Aplikasi

Pembelajaran Ilmu Faraid Berbasis Multimedia (Studi Kasus MA Tarbiyatut

Tholabah)” yang ditulis oleh M. Agus Saifuddin, NIM 204091002576 telah diuji

dan dinyatakan LULUS dalam sidang Munaqosyah Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggal 10 Agustus

2011. Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar

Sarjana Strata Satu (S1) Program Studi Teknik Informatika.

Jakarta, 10 Agustus 2011

Menyetujui,

Penguji I Penguji II

Ir. Bakri La Katjong, MT, M.Kom NIP. 470035764

Muhammad Tabah Rosyadi, MA NIP. 196207141989031004

Pembimbing I

Pembimbing II

Herlino Nanang, MT NIP. 19731209 200501 1002

Victor Amrizal, M.Kom NIP. 150411288

Mengetahui,

Dekan Fakultas Sains dan Teknologi

Ketua Program Studi Teknik Informatika

DR. Syopiansyah Jaya Putra, M.Sis NIP. 19680117 200112 1 001

Yusuf Durrachman, M.Sc, MIT.

NIP. 19710522 200604 1 002

Page 6: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

v

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-

BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN

SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI

ATAU LEMBAGA MANAPUN.

Jakarta, 11 Agustus 2011

M. Agus Saifuddin NIM 204091002576

Page 7: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

vi

ABSTRAK

M. AGUS SAIFUDDIN, Perancangan Dan Pembuatan Aplikasi Pembelajaran Ilmu Faraid Berbasis Multimedia (Studi Kasus : MA. Tarbiyatut Tholabah). (Di bawah bimbingan Herlino Nanang, MT. dan Victor Amrizal, M.Kom.)

Ilmu Faraid adalah termasuk ilmu penting dalam agama Islam. Ia dikatakan sebagai setengah ilmu yang pertama kali akan dilupakan. Pentingnya ilmu ini disebutkan dalam beberapa hadits Rasul Saw. Seiring dengan perkembangan teknologi informasi di dunia, dunia pendidikan pun tak luput dari imbasnya dengan bermunculannya berbagai jenis aplikasi pembelajaran yang beredar di pasaran. Sayangnya aplikasi-aplikasi pembelajaran yang beredar di pasaran sangat minim yang menunjang ilmu-ilmu keislaman.

Aplikasi pembelajaran ilmu Faraid sebagai alat bantu dalam kegiatan belajar mengajar ilmu Faraid di dunia pendidikan keislaman masih sangat dibutuhkan. Apalagi pada sekolah-sekolah yang memberikan muatan lokal materi-materi keislaman. Salah satunya adalah Madrasah Aliyah Tarbiyatut Tholabah Lamongan.

Berdasarkan pada permasalah tersebut penulis ingin mengembangkan aplikasi pembelajaran ilmu Faraid berbasis multimedia interaktif yang akan diterapkan pada MA. Tarbiyatut Tholabah.

Dalam membuat dan mengembangkan aplikasi ini penulis menggunakan metode pengembangan aplikasi multimedia yang meliputi enam level, yaitu; konsep, perancangan, pengumpulan material, pembuatan, pengujian, dan pendistribusian. Sedangkan dalam pengumpulan data penulis melakukan wawancara dengan guru mata pelajaran Faraid pada MA. Tarbiyatut Tholabah dan meminta bahan ajar pada guru mata pelajaran tersebut. Dari hasil penyebaran kuesioner dan uji coba aplikasi pada 30 responden yang terdiri dari para siswa MA. Tarbiyatut Tholabah disimpulkan bahwa aplikasi ini efektif dan dibutuhkan oleh para siswa sebagai alat bantu dalam mempelajari mata pelajaran Faraid.

Dalam membuat aplikasi pembelajaran ilmu Faraid berbasis multimedia ini penulis menggunakan perangkat lunak Adobe Director 11.5 yang dibantu dengan Adobe Photoshop CS 4. Hasil dari penulisan skripsi ini adalah CD pembelajaran interaktif mata pelajaran Faraid untuk anak kelas 2 Madrasah Aliyah.

Kata kunci : Multimedia, Faraid, CD Interaktif.

Page 8: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

vii

KATA PENGANTAR

Segala puji hanya milik Allah Tuhan Semesta Alam. Yang selalu

memberikan kemenangan bagi siapa saja yang berjuang dijalan-Nya. Teriring

sholawat dan salam tak lupa juga terlimpah kepada Rasulullah Muhammad SAW,

beserta keluarga, sahabat serta orang-orang yang istiqomah dalam mengemban

risalahnya hingga akhir zaman.

Penulis senang dapat mengerjakan skripsi yang berjudul “Perencanaan dan

Pembuatan Aplikasi Pembelajaran Ilmu Faraid Berbasis Multimedia (Studi Kasus:

MA. Tarbiyatut Tholabah)”. Penulis berharap semoga dengan pembelajaran ini

dapat memberikan kontribusi pengalaman dan pengetahuan yang bisa

dipergunakan di masa mendatang.

Penyusunan skripsi ini dimaksudkan untuk melengkapi tugas guna

memenuhi syarat untuk memperoleh gelar Sarjana Komputer Jurusan Teknik

Informatika Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif

Hidayatullah Jakarta.

Dalam penyusunan skripsi ini penulis menyadari bahwa skripsi ini tidak

dapat terlaksana dengan baik tanpa bantuan dan bimbingan dari semua pihak.

Pada kesempatan ini, perkenankan penulis mengucapkan terima kasih kepada :

1. Bapak Prof. DR. Komarudin Hidayat selaku Rektor Universitas Islam Negeri

Syarif Hidayatullah Jakarta, Bapak DR. Syopiansyah Jaya Putra, M.Sis selaku

Dekan Fakultas Sains dan Teknologi.

Page 9: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

viii

2. Bapak Herlino Nanang, MT., selaku dosen pembimbing I dan Bapak Victor

Amrizal, M.Kom., selaku dosen pembimbing II yang telah memberikan

kesempatan, waktu, kesabaran dan perhatiannya untuk membimbing penulis

dalam menyelesaikan skripsi ini.

3. Orang tua dan seluruh anggota keluarga tercinta, yang selalu memberikan

dukungan, semangat, kasih sayang dan do’a yang tiada henti-hentinya serta

teman-temanku semua angkatan 2004 non reguler seperjuangan, maju terus

pantang mundur.

Akhir kata, dengan segala kerendahan hati penulis mengucapkan terima

kasih yang tak terhingga kepada semua pihak yang telah membantu penyelesaian

skripsi ini. Penulis juga berharap semoga laporan ini bermanfaat dan memperoleh

tambahan pengetahuan setelah membacanya.

Jakarta, 11 Agustus 2011

M. Agus Saifuddin NIM. 204091002576

Page 10: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

ix

Saya persembahkan karya mungil ini kepada :

Ibunda tercinta, Juwairiyah, dan ayahanda terhormat, Kasmari Rosyid, yang telah memenuhi segala kebutuhan hidup saya dengan penuh tanggung jawab hingga saya bisa

menyelesaikan program strata satu ini.

Selanjutnya juga saya persembahkan kepada adik-adikku tersayang, Ah. Sahlul Fuad, atas bantuan moril maupun materilnya, Raudlatul Faizah, atas segala motivasinya, Ah. Najih Aunillah, moga bisa meneruskan cita-cita yang lebih tinggi dari langit, Moh. Hanifun Nafis, atas kreatifitas dan

orisinalitas dalam berpikir.

Dan tak lupa pula saya persembahkan kepada calon bidadariku tercinta yang tanpa lelah selalu memberi dukungan dan layanan demi selesainya sekripsi ini, my sweet angel,

Rizki Yulianti,

Page 11: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

x

DAFTAR ISI

HALAMAN SAMPUL .................................................................................... .... i

HALAMAN JUDUL ........................................................................................... ii

LEMBAR PERSETUJUAN………………………………………………….... iii

LEMBAR PENGESAHAN………………………………………………….... iv

LEMBAR PERNYATAAN …………………………………………………..... v

ABSTRAK…………………………………………………………………….... vi

KATA PENGANTAR ........................................................................................ vii

PERSEMBAHAN ........................................................................................... ... ix

DAFTAR ISI ………………………………………………………………......... x

DAFTAR TABEL …………………………………………………………....... xv

DAFTAR GAMBAR ………………………………………………………... xvi

DAFTAR LAMPIRAN ……………………………………………………... xviii

BAB I PENDAHULUAN

1.1 Latar Belakang Masalah ……………………………………... 1

1.2 Rumusan Masalah .........……………………………………... 3

1.3 Batasan Masalah .........……………………………………..... 3

1.4 Tujuan Penelitian .....……………………………………….... 4

1.5 Manfaat Penelitian ...………………………………………... 4

1.5.1. Manfaat bagi penulis ..................................................... 4

1.5.2. Manfaat bagi universitas ............................................... 4

1.5.3. Manfaat bagi pengguna ................................................. 5

1.6 Metodologi Penelitian .......………………………………….. .5

Page 12: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xi

1.6.1. Metode Pengumpulan Data .......................................... 5

1.6.2. Metode Pengembangan Sistem .................................... 6

1.7 Sistematika Penulisan ......………………………………......... 8

BAB II LANDASAN TEORI

2.1 Ilmu Faraidh ........................................................................... 10

2.1.1 Pengertian Ilmu Faraidh ............................................... 10

2.1.2 Dasar-Dasar Faraidh ..................... .............................. .11

2.2 Multimedia Pembelajaran ...................................................... 12

2.2.1 Pengertian Multimedia ................................................ .12

2.2.2 Elemen-Elemen Multimedia ......................................... 14

2.2.3 Jenis Aplikasi Multimedia ............................................ 15

2.2.4 Penggunaan Multimedia ............................................... 18

2.2.5 Siklus Pengembangan Aplikasi Multimedia ................ 22

2.2.5.1 Concept ............................................................ 22

2.2.5.2 Design .............................................................. 23

2.2.5.3 Material Collecting .......................................... 25

2.2.5.4 Assembly .......................................................... 26

2.2.5.5 Testing .............................................................. 27

2.2.5.6 Distribution ...................................................... 27

2.3. Alat-Alat Perancangan Sistem .............................................. 28

2.3.1 STD (State Transition Diagram) .................................. 28

2.3.1.1 Pengertian STD ................................................ 28

2.3.1.2 Pendekatan untuk membuat STD ..................... 30

Page 13: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xii

2.3.1.3 Notasi State Transition Diagram (STD) ....... ... 30

2.3.2 Flowchart ..................................................................... 32

2.4 Perangkat Lunak Pembuatan Sistem ...................................... 35

2.4.1 Adobe Director 11.5 ..................................................... 35

2.4.2 Adobe Flash CS 3 ......................................................... 37

2.4.3 Adobe Photoshop CS 4 .............................................. .. 38

2.4.3.1 Kelebihan Adobe Photoshop CS4 .................... 39

2.4.3.2 Kelemahan Photoshop ...................................... 41

2.4.3.3 Area Kerja Photoshop CS4 .............................. 41

BAB II METODOLOGI PENELITIAN

3.1 Metode Pengumpulan Data .................................................... 43

3.1.1 Studi Pustaka ................................................................ 43

3.1.2 Wawancara ................................................................... 43

3.1.3 Observasi ...................................................................... 44

3.2 Metode Pengembangan Sistem .............................................. 45

3.2.1 Konsep (Concept) ...................................................... 45

3.2.2 Perancangan (Design) ................................................ 46

3.2.3 Pengumpulan Bahan (Material Collecting) ............... 46

3.2.4 Pembuatan (Assembly) ............................................... 47

3.2.5 Tes (Testing) ............................................................. 47

3.2.6 Distrbusi (Distribution) ............................................ 47

BAB IV PEMBAHASAN DAN IMPLEMENTASI

4.1 Gambaran Umum Lokasi Penelitian ..................................... 49

Page 14: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xiii

4.1.1 Profil MA. Tarbiyatut Tholabah ................................. 49

4.1.2 Visi, Misi, dan Tujuan .................................................. 50

4.2 Analisis Perancangan ............................................................. 51

4.2.1 Identifikasi Masalah ..................................................... 51

4.2.2Hasil Analisa Kebutuhan Sistem ................................... 52

4.3 Pengembangan Aplikasi Multimedia ..................................... 54

4.3.1 Konsep (Concept) ......................................................... 54

4.3.2 Perancangan (Design) ................................................... 55

4.3.2.1 Perancangan Flowchart .................................... 55

4.3.2.2 Perancangan Storyboard .................................. 57

4.3.2.3 Struktur Hirarki Menu Navigasi ...................... 59

4.3.2.4 State Transition Diagram (STD) ..................... 61

4.3.2.5 Merancang Antar Muka Pengguna (User

Interface) .......................................................... 64

4.3.3 Pengumpulan Bahan (Material Collecting) .................. 70

4.3.4 Pembuatan (Assembly) .................................................. 72

4.3.4.1 Pembuatan Background Aplikasi E-Faraid ...... 73

4.3.4.2 Membuat Tombol Menu .................................. 76

4.3.4.3 Membuat Halaman Utama Aplikasi E-Faraid ...77

4.3.4.4 Menggabungkan File menjadi Aplikasi E-Faraid 78

4.3.4.5 Memasukkan Musik Latar ............................... 80

4.3.5 Pengujian (Testing) ...................................................... 81

4.3.6 Distribusi (Distribution) ............................................... 83

Page 15: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xiv

4.4 Tampilan Halaman-Halaman Aplikasi Pembelajaran Ilmu

Faraid Berbasis Multimedia (E-Faraid) ................................. 84

4.4.1 Tampilan Halaman Intro ............................................... 84

4.4.2 Tampilan Halaman Utama ............................................ 85

4.4.3 Tampilan Halaman Materi Pelajaran ............................ 85

4.4.4 Tampilan Sub-Materi Pelajaran .................................... 86

BAB V PENUTUP

5.1 Kesimpulan ............................................................................. 87

5.2 Saran ...................................................................................... 88

DAFTAR PUSTAKA ......................................................................................... 89

LAMPIRAN-LAMPIRAN ................................................................................ 91

Page 16: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xv

DAFTAR TABEL

HALAMAN

Tabel 2.1 Bagan Alir Sistem ....................................................................... 32

Tabel 2.2 Bagan Alir Program .................................................................... 33

Tabel 2.3 Bagan Alir Proses ....................................................................... 34

Tabel 2.4 Simbol Pembantu ....................................................................... 35

Tabel 4.1 Tingkat Kesulitan Ilmu Faraid .................................................... 52

Tabel 4.2 Kebutuhan Media Lain Selain Buku .......................................... 53

Tabel 4.3 Kesediaan Media Lain ................................................................. 53

Tabel 4.4 Deskripsi Konsep Aplikasi .......................................................... 54

Tabel 4.5 Hasil Kuesioner Evaluasi Aplikasi E-Faraid ............................... 82

Page 17: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xvi

DAFTAR GAMBAR

HALAMAN

Gambar 2.1 Informasi Linier dan Non-Linier ............................................. 16

Gambar 2.2 Siklus Pengembangan Aplikasi Multimedia ............................. 22

Gambar 2.3 Pendekatan Untuk Membuat STD ............................................ 30

Gambar 2.4 Notasi STD ............................................................................... 31

Gambar 2.5 Kondisi dan Aksi ..................................................................... 32

Gambar 2.6 Tampilan Kerja Adobe Director 11.5 ...................................... 37

Gambar 2.7 Area Kerja Adobe Flash CS 3 ................................................. 38

Gambar 2.8 Area Kerja Adobe Photoshop CS 4 ......................................... 42

Gambar 4.1 Flowchart Aplikasi Pembelajaran Ilmu Faraid Berbasis Multimedia

Interaktif .................................................................................... 56

Gambar 4.2 Stroyboard Layar Intro ............................................................... 57

Gambar 4.3 Storyboard Layar Menu Utama ................................................. 57

Gambar 4.4 Storyboard Layar Sub-Menu Materi Pelajaran .......................... 58

Gambar 4.5 Storyboard Layar Sub-Menu Soal-soal Ujian ............................ 58

Gambar 4.6 storyboard Layar Sub-Menu Tentang E-Faraid ......................... 59

Gambar 4.7 Struktur Menu Aplikasi E-Faraid ............................................... 59

Gambar 4.8 STD Layar Intro ......................................................................... 61

Gambar 4.9 STD Menu Utama ....................................................................... 61

Gambar 4.10 STD Materi Pelajaran ................................................................. 62

Gambar 4.11 STD Soal-soal Ujian .................................................................. 63

Page 18: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xvii

Gambar 4.12 STD Tentang E-Faraid ................................................................ 64

Gambar 4.13 Rancangan Layar Intro ................................................................. 65

Gambar 4.14 Rancangan Layar Halaman Utama ............................................... 66

Gambar 4.15 Rancangan Layar Materi Pelajaran .............................................. 67

Gambar 4.16 Rancangan Layar Sub-Materi Pelajaran ....................................... 68

Gambar 4.17 Rancangan Layar Soal-soal Ujian ................................................ 69

Gambar 4.18 Rancangan Layar Tentang E-Faraid ............................................. 70

Gambar 4.19 Membuat Background Aplikasi E-Faraid .................................... 75

Gambar 4.20 Menyimpan File Background.psd ................................................ 75

Gambar 4.21 Oval Tool ..................................................................................... 76

Gambar 4.22 Property Inspector ........................................................................ 77

Gambar 4.23 Mengimport File ke Area Kerja Adobe Director 11.5 ................. 78

Gambar 4.24 Cast Member ................................................................................ 79

Gambar 4.25 Area Kerja Pembuatan Halaman Utama Aplikasi E-Faraid ......... 79

Gambar 4.26 Memasukkan Musik ..................................................................... 80

Gambar 4.27 Halaman Intro .............................................................................. 84

Gambar 4.28 Halaman Menu Utama ................................................................. 85

Gambar 4.29 Halaman Materi Pelajaran ............................................................ 85

Gambar 4.30 Halaman Sub-Materi Pelajaran .................................................... 86

Page 19: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

xviii

DAFTAR LAMPIRAN

HALAMAN

Lampiran 1 Lembar dan Hasil Wawancara ..................................................... 92

Lampiran 2 Kuesioner Media Pembelajaran Ilmu Faraid ............................... 98

Lampiran 3 Source Code ............................................................................... 100

Page 20: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

1

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Pada era teknologi informasi saat ini seluruh kehidupan manusia

dalam segala dimensinya sudah dipenuhi dengan pemanfaatan teknologi

informasi. Segala bentuk aktifitas manusia sudah tidak bisa dilepaskan dari

dunia komputer. Revolusi dalam dunia komputer ini pun berimbas pada

dunia pendidikan. Penggunaan media komputer sebagai sarana

pembelajaran sudah demikian marak di seluruh dunia.

Metode pembelajaran konvensional yang biasa diterapkan dikelas

memiliki keterbatasan, yaitu interaksi lebih cenderung teacher centered

(berpusat pada guru) sehingga siswa menjadi pasif, guru kurang

mengetahui dengan pasti sejauh mana siswa menguasai pelajaran, siswa

dapat membentuk konsep lain dari yang dimaksudkan guru, kurang

memberikan kesempatan pada siswa untuk berpikir dan memecahkan

masalah karena diarahkan untuk mengikuti pikiran guru, kurang

memberikan kesempatan untuk mengeluarkan pendapat sendiri, siswa

harus belajar menurut kecepatan umumnya yang ditentukan oleh

kecepatan guru mengajar.

Ilmu faraidh sebagai salah satu ilmu keislaman adalah termasuk

ilmu yang sangat penting dalam dunia keislaman. Pentingnya ilmu ini juga

tersurat dalam hadits Rasulullah Saw. yang menyatakan bahwa ilmu ini

Page 21: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

2

adalah ilmu yang pertama lenyap di antara ilmu-ilmu keislaman. Padahal

menurut hadits yang lain dinyatakan bahwa ilmu faraidh adalah setengah

dari ilmu-ilmu keislaman yang lain.

Ilmu faraidh sebagai ilmu yang membahas tata cara pembagian

harta warisan menurut syariat Islam adalah tergolong ilmu yang tidak

mudah dipelajari bagi sebagian siswa. Sebab di samping memuat teori

pembagian harta warisan menurut syariat Islam, ilmu ini juga mengandung

rincian matematis pembagian harta warisan kepada para ahli waris yang

berhak mendapatkan harta warisan.

Perkembangan teknologi komunikasi dan informasi dapat

dipadukan dengan metode belajar konvensional untuk menciptakan suatu

metode pembelajaran yang menarik dan menyenangkan, yaitu dengan

membuat suatu aplikasi multimedia pembelajaran. Kelebihan dari aplikasi

ini adalah mendukung siswa untuk berperan aktif dalam proses belajar,

teori dipaparkan dalam bentuk gambar dan animasi sehingga menjadi lebih

menarik, siswa yang lemah dapat mengulang materi berkali-kali dan

latihan tambahan untuk membantu memahami materi baru, mendukung

siswa mengikuti pelajaran tanpa tekanan psikologis, mendukung

pembelajaran individual dimana sistem pembelajaran individual

dianjurkan dalam pendidikan, serta membiasakan siswa dengan komputer

yang merupakan tuntutan masyarakat modern. Selain itu siswa dapat

memanfaatkan teknologi sebagai alat bantu belajar daripada hanya

menggunakan komputer sebagai sarana bermain.

Page 22: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

3

Dari permasalahan di atas penulis terdorong untuk memberikan

solusi yang efektif dan efisien dalam pembelajaran faraidh dengan

merancang aplikasi pembelajaran ilmu faraidh yang berbasis multimedia.

Dengan adanya aplikasi pembelajaran faraidh yang berbasis multimedia

pembelajar akan menggunakan lebih dari satu inderanya sehingga

diharapkan tingkat penyerapan materi akan maksimal.

1.2. Rumusan Masalah

Berdasarkan latar belakang tersebut dapat dirumuskan bahwa

masalah pokok yang akan dibahas penulis adalah bagaimana merancang

dan membuat aplikasi pembelajaran ilmu Faraidh berbasis multimedia

untuk Madrasah Aliyah kelas 2?

1.3. Batasan Masalah

Dalam penelitian ini penulis membatasi pembahasan hanya pada

hal-hal sebagai berikut:

1. Proses pembuatan aplikasi pembelajaran ilmu Faraidh dengan

menggunakan perangkat lunak Adobe Director 11.5.

2. Materi Faraid diambil dari karya Ustadz HM. Sahul Khuluq, Lc, Ilmu

Faraid, (kelas 2 Aliyah), Penerbit PP. Tarbiyatut Tholabah, 2008,

Lamongan.

3. Pengembangan aplikasi pembelajaran ilmu Faraidh berbasis

multimedia ini menggunakan metode pengembangan multimedia.

Page 23: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

4

1.4. Tujuan Penelitian

Tujuan dari penelitian yang dilakukan ini adalah sebagai berikut :

1. Merancang dan membuat suatu aplikasi pembelajaran ilmu Faraidh

berbasis multimedia.

2. Mengembangkan media pembelajaran yang sebelumnya biasa saja

(hanya berbasis teks) menjadi media pembelajaran interaktif.

1.5. Manfaat Penelitian

1.5.1. Manfaat bagi penulis

Di antara manfaat penelitian ini bagi penulis adalah :

1. Memberikan tambahan pengalaman bagi penulis dalam

merancang dan membangun suatu perangkat lunak.

2. Ikut andil dalam memberikan kontribusi kepada masyarakat

dalam dunia pendidikan guna menyongsong era teknologi

digital.

3. Untuk memenuhi salah satu syarat kelulusan strata satu (S1)

jurusan teknik informatika fakultas sains dan teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta.

1.5.2. Manfaat bagi universitas

Di antara manfaat penelitian ini bagi universitas adalah :

1. Mengetahui seberapa jauh mahasiswa menguasai materi yang

diberikan khususnya pada mata kuliah Desain Grafis, Desain

Komunikasi Visual dan Multimedia.

Page 24: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

5

2. Sebagai bahan acuan untuk angkatan-angkatan berikutnya.

1.5.3. Manfaat bagi pengguna

Di antara manfaat penelitian ini bagi pengguna adalah :

1. Membantu siswa mempelajari ilmu Faraidh yang bagi

sebagian orang terkenal sulit agar lebih mudah dan

menyenangkan.

2. Meningkatkan efektifitas dan efisiensi guru Faraidh dalam

kegiatan belajar mengajar.

3. Menjadikan siswa lebih terlatih dalam memanfaatkan

teknologi informasi.

4. Mengurangi beban guru dalam menyiapkan bahan ajar mata

pelajaran tersebut.

1.6. Metodologi Penelitian

1.6.1. Metode Pengumpulan Data

Metode pengumpulan data yang penulis gunakan dalam

pembahasan masalah skripsi ini adalah :

1. Studi Pustaka

Sebagai bahan kajian awal penulis banyak merujuk

kepada literatur-literatur tentang pengembangan sistem

multimedia dan segala tulisan yang berhubungan dengan

multimedia.

Page 25: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

6

2. Interview / Wawancara

Di samping melalui studi pustaka, penulis juga

melakukan interview/wawancara sebelum dan sesudah

pembuatan aplikasi. Adapun wawancara yang penulis lakukan

sebelum pembuatan aplikasi adalah untuk mengetahui urgensi

pembuatan aplikasi di kalangan siswa Madrasah Aliyah.

Sedangkan wawancara yang penulis lakukan sesudah

pembuatan aplikasi adalah untuk mengetahui tingkat kegunaan

aplikasi ilmu Faraid ini dalam pembelajaran ilmu Faraid di

kalangan siswa-siswa Madrasah Aliyah.

3. Studi Lapangan / Observasi

Studi lapangan dilakukan penulis dengan melakukan

pengamatan langsung ke lembaga pendidikan yang

mengajarkan mata pelajaran faraidh untuk kemudian

dikembangkan menjadi sebuah aplikasi pembelajaran yang

berbasis multimedia.

1.6.2. Metode Pengembangan Sistem

Pengembangan sistem multimedia dilakukan berdasarkan

enam tahap, yaitu konsep, perancangan, pengumpulan bahan,

pembuatan, tes, dan distribusi :

Page 26: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

7

1. Konsep (Concept)

Tahap konsep (concept) yaitu menentukan tujuan,

termasuk identifikasi audien, macam aplikasi (presentasi,

interaktif, dan lain-lain), tujuan aplikasi (informasi,

hiburan, pelatihan, dan lain-lain), dan spesifikasi umum.

Dasar aturan untuk perancangan juga ditentukan pada tahap

ini, seperti ukuran aplikasi, target dan lain-lain.

2. Perancangan (Design)

Maksud dari tahap perancangan (design) adalah

membuat spesifikasi secara rinci mengenai arsitektur

proyek, gaya, dan kebutuhan material untuk proyek.

3. Pengumpulan Bahan (Material Collecting)

Pada tahap pengumpulan bahan (material

collecting) dilakukan pengumpulan bahan seperti clipart

image, animasi, audio, video, berikut pembuatan gambar,

grafik, foto, dan lain-lain yang diperlukan untuk tahap

berikutnya.

4. Pembuatan (Assembly)

Tahap pembuatan (assembly) merupakan tahap

dimana seluruh obyek multimedia dibuat. Pembuatan

aplikasi berdasarkan storyboard, flowchart view, struktur

navigasi, atau diagram obyek yang berasal dari tahap

design.

Page 27: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

8

5. Tes (Testing)

Tahap tes (testing) dilakukan setelah selesai tahap

pembuatan dan seluruh data telah dimasukan. Pertama-tama

dilakukan testing secara modular untuk memastikan apakah

hasilnya seperti yang diinginkan. Beberapa sistem

mempunyai fitur yang dapat memberikan informasi bila

terjadi kesalahan pada program.

6. Distribusi (Distribution)

Pada tahap ini akan dilakukan implementasi serta

evaluasi terhadap aplikasi multimedia dan setelah

semuanya selesai aplikasi multimedia akan digandakan

menggunakan CD ROM atau perangkat keras lainnya.

Suatu aplikasi biasanya memerlukan banyak file yang

berbeda, dan kadang-kadang mempunyai ukuran sangat

besar. File akan lebih baik bila ditempatkan dalam media

penyimpanan yang memadai.

1.7. Sistematik Penulisan

Dalam penulisan tugas akhir ini penulis membaginya menjadi

beberapa bagian yang berupa bab-bab di mana satu dengan lainnya saling

menunjang dan terkait. Secara garis besar bab-bab tersebut dapat

dijelaskan sebagai berikut :

Page 28: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

9

BAB I : PENDAHULUAN

Bab ini menjelaskan tentang latar belakang masalah, tujuan dan manfaat

penelitian, batasan masalah, metodologi yang dipergunakan, dan

sistematika penulisan tugas akhir yang diterapkan.

BAB II : LANDASAN TEORI

Dalam bab ini penulis menguraikan teori-teori yang menjadi landasan

pembuatan aplikasi pembelajaran faraidh interaktif yang berbasis

multimedia.

BAB III : METODOLOGI PENELITIAN

Bab ini berisi uraian tentang metodologi penelitian yang digunakan dalam

menganalisa, merancang, dan mengaplikasikan sistem.

BAB IV : PEMBAHASAN DAN IMPLEMENTASI

Bab ini menerangkan gambaran umum profil lembaga yang dijadikan

penulis sebagai tempat penelitian, menguraikan hasil penelitian,

pengidentifikasian masalah, dan solusinya, serta penerapan tahap-tahap

pengembangan aplikasi multimedia.

BAB V : PENUTUP

Bab ini merupakan bab akhir yang membahas mengenai kesimpulan yang

diperoleh dari hasil penelitian dan memberikan saran-saran agar aplikasi

yang dibuat dapat berjalan sesuai dengan tujuan yang diharapkan.

DAFTAR PUSTAKA

LAMPIRAN

Page 29: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

10

BAB II

LANDASAN TEORI

2.1.Ilmu Faraidh

2.1.1. Pengertian Ilmu Faraidh

Ilmu faraidh yang dikenal juga sebagai ilmu mawarits, ialah

bentuk jama’ dari kata faridhah dalam bahasa Arab yang secara

bahasa berarti putusan, penurunan, penghalalan, dan penerangan.

Sedangkan ilmu faraidh menurut istilah syara’ adalah ilmu untuk

mengetahui siapa yang berhak mendapatkan warisan dan siapa

yang tidak berhak mendapatkan warisan, serta bagian masing-

masing ahli waris. (Shaleh Fauzan, 1999).

Sedangkan makna al-mirats menurut istilah pada ulama

adalah berpindahnya hak kepemilikan dari orang yang meninggal

dunia kepada ahli warisnya yang masih hidup, baik yang

ditinggalkan itu berupa harta (uang), tanah, atau apa saja yang

berupa hak milik legal secara syar'i. (Muhammad Ali ash-Shabuni,

1995).

Page 30: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

11

2.1.2. Dasar-Dasar Faraid

a. QS. An-Nisa’ : 11

Allah mensyari'atkan bagimu tentang (pembagian pusaka untuk) anak-anakmu. Yaitu : bahagian seorang anak lelaki sama dengan bagahian dua orang anak perempuan; dan jika anak itu semuanya perempuan lebih dari dua, Maka bagi mereka dua pertiga dari harta yang ditinggalkan; jika anak perempuan itu seorang saja, Maka ia memperoleh separo harta. dan untuk dua orang ibu-bapa, bagi masing-masingnya seperenam dari harta yang ditinggalkan, jika yang meninggal itu mempunyai anak; jika orang yang meninggal tidak mempunyai anak dan ia diwarisi oleh ibu-bapanya (saja), Maka ibunya mendapat sepertiga; jika yang meninggal itu mempunyai beberapa saudara, Maka ibunya mendapat seperenam. (Pembagian-pembagian tersebut di atas) sesudah dipenuhi wasiat yang ia buat atau (dan) sesudah dibayar hutangnya. (Tentang) orang tuamu dan anak-anakmu, kamu tidak mengetahui siapa di antara mereka yang lebih dekat (banyak) manfaatnya bagimu. ini adalah ketetapan dari Allah. Sesungguhnya Allah Maha mengetahui lagi Maha Bijaksana. (QS an-Nisa’ : 11)

b. QS an-Nisa’ : 12

Dan bagimu (suami-suami) seperdua dari harta yang ditinggalkan oleh isteri-isterimu, jika mereka tidak mempunyai anak. jika isteri-isterimu itu mempunyai anak, Maka kamu mendapat seperempat dari harta yang ditinggalkannya sesudah dipenuhi wasiat yang mereka buat atau (dan) seduah dibayar hutangnya. Para isteri memperoleh seperempat harta yang kamu tinggalkan jika kamu tidak mempunyai anak. jika kamu mempunyai anak, Maka Para isteri memperoleh seperdelapan dari harta yang kamu tinggalkan sesudah dipenuhi wasiat yang kamu buat atau (dan) sesudah dibayar hutang-hutangmu. jika seseorang mati, baik laki-laki maupun perempuan yang tidak meninggalkan ayah dan tidak meninggalkan anak, tetapi mempunyai seorang saudara laki-laki (seibu saja) atau seorang saudara perempuan (seibu saja), Maka bagi masing-masing dari kedua jenis saudara itu seperenam harta. tetapi jika saudara-saudara seibu itu lebih dari seorang, Maka mereka bersekutu dalam yang sepertiga itu, sesudah dipenuhi wasiat yang dibuat olehnya atau sesudah dibayar hutangnya dengan tidak memberi mudharat (kepada ahli waris). (Allah

Page 31: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

12

menetapkan yang demikian itu sebagai) syari'at yang benar-benar dari Allah, dan Allah Maha mengetahui lagi Maha Penyantun. (QS an-Nisa’ : 12)

c. QS an-Nisa’ : 176

Mereka meminta fatwa kepadamu (tentang kalalah). Katakanlah: "Allah memberi fatwa kepadamu tentang kalalah (yaitu): jika seorang meninggal dunia, dan ia tidak mempunyai anak dan mempunyai saudara perempuan, Maka bagi saudaranya yang perempuan itu seperdua dari harta yang ditinggalkannya, dan saudaranya yang laki-laki mempusakai (seluruh harta saudara perempuan), jika ia tidak mempunyai anak; tetapi jika saudara perempuan itu dua orang, Maka bagi keduanya dua pertiga dari harta yang ditinggalkan oleh yang meninggal. dan jika mereka (ahli waris itu terdiri dari) saudara-saudara laki dan perempuan, Maka bahagian seorang saudara laki-laki sebanyak bahagian dua orang saudara perempuan. Allah menerangkan (hukum ini) kepadamu, supaya kamu tidak sesat. dan Allah Maha mengetahui segala sesuatu. (QS an-Nisa’ : 176)

d. Hadits Rasulullah Saw.

Ibnu Abbas r.a. meriwayatkan bahwa Nabi saw. bersabda, “Berikanlah harta waris kepada orang-orang yang berhak. Sesudah itu, sisanya (kepada pihak) laki-laki yang lebih utama.” (HR. Bukhari dan Muslim).

2.2.Multimedia Pembelajaran

2.2.1. Pengertian Multimedia

Istilah multimedia bisa mempunyai makna yang berlainan

bagi lain orang. Bagi sejumlah orang, multimedia berarti seseorang

duduk di terminal komputer dan menerima presentasi yang terdiri

dari; teks on-screen, grafik, atau animasi on-screen, dan suara yang

datang dari speaker komputer, misalnya: saat membuka

ensiklopedia multimedia on-line. Bagi sekalangan orang lain,

Page 32: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

13

multimedia bisa berarti presentasi “live” saat sekelompok orang

duduk dalam suatu ruangan sambil memandang gambar-gambar

yang disajikan dalam satu atau lebih layar lebar dan mendengar

musik atau suara lain yang disampaikan oleh pembicara.

Richard E. Mayer dalam Multimedia Learning

mendefinisikan multimedia sebagai presentasi materi dengan

menggunakan kata-kata sekaligus gambar-gambar. Yang dimaksud

dengan ‘kata’ di sini adalah bahwa materinya disajikan dalam

bentuk verbal, baik menggunakan teks kata-kata yang tercetak

ataupun yang terucapkan. Sedangkan yang dimaksud dengan

gambar adalah bahwa materinya disajikan dalam bentuk gambar.

Hal ini bisa dalam bentuk menggunakan grafik statis (ilustrasi,

grafik, foto, dan peta) atau menggunakan grafik dinamis (animasi

atau video). (Richard E. Mayer, 2001).

Istilah multimedia adalah istilah yang diambil dari dunia

teater, bukan komputer. Pertunjukan yang memanfaatkan lebih dari

satu mediaum seringkali disebut pertunjukan multimedia.

Pengertian multimedia lain dapat disebutkan sebagai berikut:

a. Menurut Mc. Cormick, multimedia secara umum merupakan

kombinasi tiga elemen; yaitu suara, gambar, dan teks.

b. Menurut Robin dan Linda, multimedia merupakan alat yang

dapat menciptakan presentasi yang dinamis dan interaktif yang

mengkombinasikan teks, grafik, animasi, audio, dan video.

Page 33: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

14

c. Menurut Turban, multimedia adalah kombinasi paling sedikit

dua media input atau output dari data, media, input atau output

dari data. Media ini dapat berupa audio (suara atau musik),

animasi, video, teks, grafik, dan gambar. (Suyanto, 2003).

2.2.2. Elemen-Elemen Multimedia

Untuk membuat aplikasi multimedia, diperlukan

penggabungan dari beberapa elemen, di mana setiap elemen

memiliki peranan masing-masing, yaitu:

1. Teks

Elemen dasar paling sederhana dalam menyampaikan

informasi yang membutuhkan ruang penyimpanan yang kecil.

Dengan menggunakan teks, informasi lebih mudah

disampaikan dan dimengerti oleh pengguna. Format teks dapat

berupa txt, doc, rtf, dan lainnya.

2. Gambar

Gambar merupakan elemen multimedia yang

dipresentasikan dalam dua dimensi maupun tiga dimensi

sebagai media ilustrasi yang memperjelas penyampaian

informasi. Gambar yang digunakan dalam multimedia dapat

berupa gambar sintesis, artinya gambar yang dibuat dengan

program editor gambar seperti Adobe Photoshop, dapat juga

Page 34: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

15

berupa gambar hasil scanning dari foto atau lukisan tangan.

Format gambar dapat berupa jpeg, gif, bitmap, png dan lainnya.

3. Animasi

Adalah pembentukan gerakan dari berbagai macam

media atau obyek yang divariasikan dengan efek-efek, gerakan

transisi juga suara yang selaras dengan gerakan animasi

tersebut. Format animasi dapat berupa flash, gif dan lainnya.

4. Audio (suara atau musik)

Audio adalah fenomena fisik yang dihasilkan oleh

adanya pergetaran materi. Suara akan menciptakan suatu

suasana, mempertegas suatu kondisi, dan menghidupkan

aplikasi multimedia. Format audio dapat berupa mp3, wav,

midi, dan lainnya.

5. Video

Elemen multimedia paling kompleks yang mampu

menggambarkan gerakan yang sulit diterangkan dengan kata-

kata. Format video dapat berupa avi, mov, wmv, mpeg, flv dan

lainnya. (Suyanto, 2003).

2.2.3. Jenis Aplikasi Multimedia

Media presentasi pada umumnya tidak dilengkap alat untuk

mengontrol yang dilakukan oleh user. Presentasi yang berjalan

sekuensial sebagai garis lurus disebut dengan multimedia linier

Page 35: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

16

(linear multimedia). Contoh jenis ini adalah program TV dan film.

Tetapi bila presentasi menggunakan satu komputer untuk satu

orang, maka diperlukan untuk kontrol dengan keyboard, mouse

atau alat input lainnya. Hal ini disebut sebagai multimedia non-

linier atau multimedia interaktif karena presentasi multimedia

seperti ini melibatkan user untuk mengendalikan, memilih dan

menjalankan fungsi aplikasi presentasi multimedia. (Sutopo, 2002)

Gambar 2.1 Informasi Linier (kiri) dan Non-Linier (kanan) (Sumber: Sutopo, 2003)

Jenis aplikasi multimedia sangatlah beragam dan banyak.

Klasifikasi multimedia dapat digolongkan dari cara penyajian dan

tujuan. Dilihat dari cara penyajiannya, program multimedia dapat

digolongkan menjadi:

1. Linear Program atau Continuous Program

Yaitu sebuah program yang berkesinambungan dari

awal sampai akhir karena informasinya disusun berurutan dari

awal hingga akhir, sehingga penayangannya tidak mungkin

Page 36: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

17

dihentikan pada suatu saat secara acak, karena informasi yang

disampaikan akan menjadi tidak lengkap dan tidak jelas.

Secara garis besar linear program terdiri dari pembukaan,

kemudian diikuti bagian isi atau uraian apa yang dikemukakan

pada pendahuluan dan terakhir adalah bagian penutup. Penutup

ini dapat berupa kesimpulan atau ringkasan seluruh uraian

tersebut. Program multimedia dengan bentuk linear program

dapat berupa program audio visual statis seperti multi image

slide program, audio visual gerak, animasi film, maupun

gabungan ketiga media tersebut.

2. Interactive Program / Non-Linear Program

Yaitu sebuah aplikasi yang masing-masing dapat

berdiri sendiri sehingga aplikasi tersebut bisa dihentikan pada

suatu saat secara acak dan tetap memberikan informasi yang

dibutuhkan yang merupakan bagian atau unit terkecil dari

keseluruhan aplikasi. Aplikasi interaktif memberikan banyak

pilihan kepada audience untuk memilih sendiri informasi yang

diinginkan, dan dari mana akan dimulai serta diakhiri, ataukah

hanya sebagian saja dari keseluruhan informasi yang

dibutuhkan.

Page 37: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

18

2.2.4. Penggunaan Multimedia

1. Presentasi Bisnis

Presentasi bisnis biasanya disajikan dalam bentuk

linear, tidak interaktif. Dengan multimedia dapat menyajikan

presentasi bisnis dengan tampilan yang lebih menarik dan

interaktif. Presentasi bisnis memiliki nilai lebih jika dibuat

interaktif.

2. Aplikasi Pendidikan

Aplikasi multimedia pendidikan antara lain sebagai

perangkat lunak pengajaran, memberikan fasilitas untuk

mahasiswa atau siswa untuk belajar mengambil keuntungan

dari multimedia, belajar jarak jauh dan pemasaran pendidikan.

Pelopor penyedia perangkat lunak multimedia dalam

proses belajar mengajar di Indonesia adalah Pustekkom

Depdiknas. Program Multimedia dari Pustekkom ini adalah

media pembelajaran yang berbasis komputer. Media ini

menggabungkan dan mensinergikan semua media yang terdiri

dari teks, grafis, foto, video, animasi, musik, narasi dan

interaktivitas yang diprogram berdasarkan teori pembelajaran.

Pustekkom telah mengembangkan dan memproduksi program

multimedia sejak tahun 1995. Program tersebut antara lain

ditujukan untuk siswa SMU, SMK dan pendidikan pra sekolah.

Page 38: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

19

3. Aplikasi pelatihan

Studi Departemen Pertahanan AS menunjukkan

pelatihan multimedia 40% lebih efektif daripada pelatihan

tradisional, tingkat retensi 30% lebih besar, dan kurva belajar

30% lebih singkat. Pelatihan multimedia lebih fleksibel dan

mendukung pelatihan terdistribusi just in time yang disesuaikan

dengan kebutuhan perorangan. Serta Penggunaan peralatan

canggih dapat disimulasikan.

4. Information Delivery

Banyak aplikasi multimedia dikembangkan dengan

kemampuan user mengakses data. Information delivery

memungkinkan user mengakses data digital dan ditampilkan

dengan komputer. Untuk mengembangkan information delivery

dapat menggunakan perangkat lunak yang disebut Retrieval

Engine.

5. Promosi dan Penjualan

Aplikasi penjualan merupakan gabungan dengan

information delivery dan dapat mempunyai bentuk seperti

penawaran, negosiasi, pengambilan order dan lain-lain. Contoh

awal aplikasi multimedia untuk informasi penjualan adalah

proyek promosi real estate di Kanada oleh Lawrence Marshall

Production (1987). Kios informasi multimedia dengan piranti

masukan berupa touch screen dapat digunakan untuk memberi

Page 39: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

20

informasi penjualan, jasa, atau mengarahkan pengunjung di

komplek yang besar.

6. Aplikasi Produksi

Aplikasi ini merupakan kombinasi dari information

delivery dan training. Salah satu contoh adalah presentasi untuk

online help, tutorial, aplikasi spreadsheet dengan tambahan

audio dan video. Caranya dapat menggunakan Interprocess

Communication (IPC). Dengan IPC user dapat manambahkan

tombol pada spreadsheet untuk menjalankan audio yang

menerangkan spreadsheet tersebut.

7. Teleconferencing

Teleconferencing merupakan gabungan dari multimedia

dengan teknologi jaringan digital. Teleconferencing dapat

dimanfaatkan oleh pekerja aktif yang banyak melakukan

perjalanan bisnis untuk dapat ikut serta dalam suatu pertemuan

tanpa datang ke tempat pertemuan berlangsung.

Teleconferencing dapat berjalan bila tersedia jaringan digital

dengan kecepatan tinggi yang menghubungkan komputer

dalam jaringan.

8. Film

Film animasi 2D atau 3D dapat digunakan sebagai

sarana informasi, presentasi, pemodelan, pendidikan,

Page 40: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

21

dokumentasi maupun hiburan. Film merupakan multimedia

linear.

9. Virtual Reality

Virtual Reality dapat digunakan sebagai sarana

pemasaran produk seperti interior, property dan lain-lain.

Virtual Reality juga dapat digunakan untuk presentasi suatu

proyek tata kota. Misalnya dengan membuat model bangunan

sehingga seolah-olah orang menelusuri jalan, bangun, taman

dan lain-lain. Aplikasi pariwisata pelestarian budaya dan

sejarah juga dapat memanfaatkan Virtual Reality. Suatu

bangunan yang sudah hancur atau museum dapat dibuat dengan

permodelan 3D berdasarkan dokumentasi sejarah.

10. Aplikasi Web

Manfaat teknologi multimedia di WWW adalah

meruntuhkan batasan waktu dan lokasi dalam berkomunikasi.

Contohnya seperti chatting, video conference, e-learning dan

lain-lain.

11. Permainan

Teknologi multimedia interaktif dapat menghasilkan

permainan yang lebih menarik. Seperti game online, selain

tampilan yang menarik juga memungkinkan berkomunikasi

dengan orang lain yang berada pada lokasi geografis yang

berbeda.

Page 41: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

2.2.5. Siklus

tahap, yaitu

dan distribution

2.2.5.1.Concept

22

Siklus Pengembangan Aplikasi Multimedia

Pengembangan multimedia dilakukan berdasarkan enam

tahap, yaitu concept, design, material collecting, assembly, testing,

distribution, seperti pada gambar

Gambar 2.2 Siklus Pengembangan Aplikasi Multimedia

Concept

Tahap concept (konsep) yaitu menentukan tujuan,

termasuk identifikasi audiens, macam aplikasi (presentasi,

interaktif, dan lain-lain), tujuan aplikasi (informasi,

hiburan, pelatihan, dan lain-lain), dan spesifikasi umum.

Dasar aturan untuk perancangan juga ditentukan pada tahap

ini, seperti ukuran aplikasi, target, dan lain-lain.

Pengembangan multimedia dilakukan berdasarkan enam

concept, design, material collecting, assembly, testing,

Siklus Pengembangan Aplikasi Multimedia

(konsep) yaitu menentukan tujuan,

termasuk identifikasi audiens, macam aplikasi (presentasi,

lain), tujuan aplikasi (informasi,

lain), dan spesifikasi umum.

perancangan juga ditentukan pada tahap

lain.

Page 42: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

23

Dalam tahap konsep perlu diperhatikan:

• Menentukan tujuan. Pada tahap ini ditentukan tujuan

dari multimedia, serta audiens yang menggunakannya.

Tujuan dan audiens berpengaruh pada nuansa

multimedia, sebagai pencerminan identitas dari

organisasi yang menginginkan informasi sampai kepada

audiens.

• Memahami karakteristik user. Tingkat kemampuan

audiens sangat mempengaruhi pembuatan desain.

Dengan demikian multimedia dapat dikatakan

komunikatif.

Output dari tahap konsep biasanya dokumen dengan

penulisan yang bersifat naratif untuk mengungkapkan

tujuan proyek.

2.2.5.2.Design

Maksud dari tahap design (perancangan) adalah

membuat spesifikasi secara rinci mengenai arsitektur

proyek, gaya, dan kebutuhan material untuk proyek.

Spesifikasi dibuat cukup rinci sehingga pada tahap

berikutnya, yaitu material collecting dan assembly tidak

diperlukan keputusan baru, tetapi menggunakan apa yang

sudah ditentukan pada tahap design. Namun demikian,

Page 43: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

24

sering terjadi penambahan bahan atau bagian aplikasi

bertambah, dihilangkan, atau diubah pada awal pengerjaan

proyek.

Authoring system bermanfaat pada tahap design dan

dengan mudah menempatkan parameter ke dalam sistem

seperti yang telah ditentukan. Bentuk authoring yang sering

digunakan dalam pengembangan multimedia adalah

outlining, storyboarding, flowcharting, modelling, dan

scripting. Bermacam-macam perancangan dapat dibagi

menjadi tiga macam, yaitu:

• Desain berbasis multimedia. Metode desain ini

dikembangkan dari metode perancangan pembuatan

film menggunakan storyboard. Dalam

perkembangannya multimedia memerlukan aspek

interaktif, sehingga dilengkapi dengan flowchart view.

(Luther, 1994).

• Desain struktur navigasi. Struktur navigasi memberikan

gambaran link dari halaman satu ke halaman lainnya.

Struktur navigasi digunakan pada multimedia non-

linier, dan diadaptasi dari desain web. (Lowery, 2001).

• Desain berorientasi objek. Metode desain berorientasi

pada objek (object-oriented design) adalah metode

perancangan dimana komponen multimedia dinyatakan

Page 44: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

25

sebagai objek. Desain berorientasi objek juga

digunakan pada banyak sistem yang terdiri dari objek,

seperti CAD/CAM, sistem informasi geografis, dan

lain-lain. (Rumbaugh, 1991).

2.2.5.3.Material Collecting

Material collecting (pengumpulan bahan) dapat

dikerjakan paralel dengan tahap assembly. Pada tahap ini

dilakukan pengumpulan bahan seperti clipart image,

animasi, audio, berikut pembuatan gambar grafik, foto,

audio, dan lain-lain yang diperlukan untuk tahap

berikutnya. Bahan yang diperlukan dalam multimedia dapat

diperoleh dari sumber-sumber seperti library, bahan yang

sudah ada pada pihak lain, atau pembuatan khusus yang

dilakukan oleh pihak luar.

Bila digunakan komponen yang berasal dari sumber

internal atau eksternal, tidak diperlukan tool untuk

pembuatan, tetapi diperlukan konversi file sehingga dapat

digunakan dalam proyek. Dengan sistem operasi

multitasking seperti Windows dan OS2, tidak perlu

khawatir karena sistem operasi dapat menangani keperluan

tersebut.

Page 45: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

26

2.2.5.4.Assembly

Tahap assembly (pembuatan) merupakan tahap

dimana seluruh objek multimedia dibuat. Pembuatan

aplikasi berdasarkan storyboard, flowchart view, struktur

navigasi, atau diagram objek yang berasal dari tahap

design. Contohnya pada pembuatan presentasi, pembuatan

dilakukan dengan memasukkan data yang digunakan untuk

berbagai tampilan, serta menentukan screen dengan

urutannya.

Bila paket authoring mempunyai fitur pembuatan

flowchart yang digunakan untuk perancangan stage, maka

authoring software membentuk struktur program dari

flowchart. Pekerjaan tersebut dilakukan dengan

memasukkan isi material ke dalam screen seperti apa yang

terdapat dalam flowchart. Namun, bila aplikasi mempunyai

banyak interaktif, kompleks, dan screen yang dinamis,

banyak authoring tool tidak dapat digunakan untuk

menanganinya. Cara mengatasinya adalah dengan

pemrograman, baik pemrograman yang terdapat dalam

authoring tool, maupun pengembangan multimedia

menggunakan bahasa pemrograman sepenuhnya.

Sebagian besar authoring software mempunyai

authoring language yang benar-benar sebagai bahasa

Page 46: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

27

pemrograman, dan dapat digunakan secara modular oleh

programmer untuk membuat modul yang digunakan.

2.2.5.5.Testing

Testing (testing) dilakukan setelah selesai tahap

pembuatan dan seluruh data telah dimasukkan. Pertama-

tama dilakukan testing secara modular untuk memastikan

apakah hasilnya seperti yang diinginkan. Beberapa sistem

mempunyai fitur yang dapat memberikan informasi bila

terjadi kesalahan pada program. Authoring system yang

baik memerlukan fitur seperti laporan mengenai nilai

variabel pada saat eksekusi, atau melakkan trace pada

aliran program. Contohnya, program akan memberitahukan

bila terdapat data yang tidak ditemukan.

Suatu hal yang tidak kurang penting adalah aplikasi

harus dapat berjalan dengan baik di lingkungan user. User

merasakan kemudahan serta menfaat dari aplikasi tersebut

dan dapat menggunakan sendiri terutama untuk aplikasi

interaktif.

2.2.5.6.Distribution

Bila aplikasi multimedia akan digunakan dengan

mesin berbeda, penggandaan menggunakan floppy disk,

Page 47: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

28

CD-ROM, tape, atau distribusi dengan jaringan sangat

diperlukan. Suatu aplikasi biasanya memerlukan banyak

file yang berbeda, dan kadang-kadang mempunyai ukuran

sangat besar. File akan lebih baik bila ditempatkan dapat

media penyimpanan yang memadai.

Tahap distribution (distribusi) juga merupakan

tahap di mana evaluasi terhadap suatu produk multimedia

dilakukan. Dengan dilakukannya evaluasi, akan dapat

dikembangkan sistem yang lebih baik di kemudian hari.

2.3.Alat-Alat Perancangan Sistem

2.3.1. STD (State Transition Diagram)

2.3.1.1.Pengertian STD

Menurut Pressman (2002 : 373), STD adalah sebuah

model tingkah laku yang bertumpu pada definisi dari

serangkaian keadaan sistem.

Berikut merupakan pengertian STD (Mardiyah, 2004)

lainnya, yaitu:

a. Menurut Komal. J (1998:331), STD mulanya digunakan

untuk menggambarkan suatu sistem yang realtime.

Realtime system adalah suatu kondisi untuk

mengoperasikan bersama-sama (dalam waktu bersamaan)

Page 48: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

29

dengan waktu relasi yang teratur atau sudah diprediksikan

dengan keadaan sebenarnya

b. Menurut Yourdan (1980:259). State Transition Diagram

adalah salah satu model yang memberikan gambaran

bagaimana sistem bekerja.

c. Menurut Kelley (1999:39). Kita bisa mengkontruksi

sebuah diagram untuk membantu kita menentukan

keanggotaan. Diagram demikian berbentuk graph terarah

dengan informasi tambahan tertentu yang dipadukan ke

dalamnya dan dinamakan sebuah diagram transisi

(Transition Diagram).

Cara kerja sistem pada hakikatnya terbagi menjadi dua

bagian:

a. Pasif. Sistem tidak melakukan kontrol terhadap

lingkungan, tetapi lebih bersifat memberikan reaksi.

b. Aktif. Sistem melakukan kontrol terhadap lingkungan

secara aktif. Sistem ini sanggup menerima sumber daya

eksternal dengan kecepatan tinggi dalam waktu singkat

(real time) dan memberikan respon terhadap lingkungan

sesuai dengan program yang telah ditentukan.

Page 49: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

30

2.3.1.2.Pendekatan untuk membuat STD

Ada dua pendekatan dalam membuat STD, yaitu :

a. Identifikasi setiap kemungkinan state dari sistem dan

gambarkan masing-masing pada state sebuah kotak,

kemudian tentukan hubungan antar state tersebut.

b. Dimulai dengan state P1 dan dilanjutkan dengan state

P2, berikutnya dilanjutkan sesuai flow yang

diinginkan.

Gambar 2.3 Pendekatan Untuk Membuat STD

(Sumber: Mardiyah, 2004)

2.3.1.3.Notasi State Transition Diagram (STD)

Notasi STD terdiri dari state dan transition state.

State adalah kumpulan keadaan atau atribut yang

mencirikan seseorang atau suatu benda pada waktu tertentu.

Bentuk state dibagi menjadi dua, yaitu Initial State dan

Final State. Initial state menyatakan awal dari suatu state

(hanya ada satu state), sedang Final State menyatakan aktif

dari suatu state (bisa lebih dari satu state).

Transition State terdiri dari kondisi dan aksi.

Kondisi adalah suatu kejadian pada lingkaran luar yang

Page 50: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

31

dapat dideteksi oleh sistem. Sedangkan aksi adalah yang

dilakukan oleh sistem bila terjadi perubahan state atau

merupakan reaksi terhadap kondisi.

− Keadaan sistem

Setiap kotak mewakili suatu keadaan dimana sistem

mungkin berada di dalamnya. State disimbolkan dengan

segi empat.

Simbol state :

− Perubahan sistem

Ini digunakan untuk menghubungkan suatu keadaan

dengan keadaan lain. Jika sistem memiliki transisi dalam

prilakunya, maka suatu keadaan dapat berubah menjadi

keadaan tertentu.

Simbol transition state :

Gambar 2.4 Notasi STD

(Sumber: Mardiyah, 2004)

− Kondisi dan aksi

Untuk melangkapi STD, dibutuhkan dua hal tambahan:

kondisi sebelum keadaan berubah dan aksi dari pemakai

untuk mengubah keadaan. Di bawah ini adalah ilustrasi

Page 51: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

32

dari kondisi dan aksi yang ditampilkan di sebelah anak

panah yang menghubungkan dua keadaan.

Gambar 2.5 Kondisi dan Aksi (Sumber: Mardiyah, 2004)

2.3.2. Flowchart

Menurut Suyanto (2003:364), sistem flowchart

menggambarkan tahapan proses dari suatu sistem, termasuk sistem

multimedia. Sedangkan program flowchart menggambarkan

urutan-urutan instruksi dari suatu program komputer.

Dalam penggalan aktifitas, digunakan bagan alir

(flowchart), yang menunjukan aliran prosedur sistem secara

keseluruhan berupa urutan-urutan prosedur yang telah ada. Bagian

ini terdiri dari :

1. Bagan Alir Sistem (System Flowchart) yang menunjukan aliran

pekerjaan secara keseluruhan berupa urutan-urutan prosedur

yang telah ada. Sistem flowchart ini meliputi:

Tabel 2.1 Bagan Alir Sistem No Simbol Penjelasan

01 Simbol dokumen yang berupa kertas, misalnya : Hasil print out dan formulir.

Aksi

Keadaan 1

Keadaan 2

Kondisi

Page 52: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

33

02 Simbol disk atau drum yang merupakan direct acces storage untuk input atau output.

03 Simbol hard disc yang merupakan direct acces storage untuk input atau output.

04 Simbol pita magnetik yang merupakan sequential storage untuk input atau output.

05 Simbol card punch atau card reader untuk input atau output.

06 Simbol visual display unit atau cathode ray tube sebagai input atau output.

2. Bagan Alir Program (Programme Flowchart) yang menjelaskan

secara rinci langkah-langkah proses program.

Tabel 2.2 Bagan Alir Program No Simbol Penjelasan

01 Mulai (start) atau selesai (stop)

02 Persiapan

03 Proses

04 Proses input atau output

05 Keputusan

06 Subroutine

Page 53: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

34

3. Bagan Alir Kertas Kerja (Paperwork Flowchart) merupakan

bagan alir yang menunjukan arus dokumen atau laporan dan

formulir.

4. Bagan Alir Hubungan Basis Data (Database Relationship

Flowchart) merupakan bagan alir yang menunjukan hubungan

dari file database yang digunakan pada sistem yang dirancang.

5. Bagan Alir Proses (Process Flowchart) berguna bagi analisis

untuk menggambarkan proses dalam prosedur.

Tabel 2.3 Bagan Alir Proses No Simbol Penjelasan

01 Menggambarkan proses

02 Proses penggabungan (merge)

03 Proses pemecahan (extract)

04 Proses pengurutan

05 Proses secara manual

06 Proses pemasukan data melalui keyboard

Page 54: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

35

Tabel 2.4 Simbol Pembantu No Simbol Penjelasan

01 Arah data atau arus data

02 Sambungan pada halaman yang sama

03 Sambungan pada halaman yang berbeda

04 Sambungan komunikasi

2.4.Perangkat Lunak Pembuatan Sistem

2.4.1. Adobe Director 11.5

Adobe Director adalah software yang pada awalnya

merupakan buatan Macromedia (seperti Flash dan Dreamweaver)

lalu diakuisisi oleh Adobe, yang biasa digunakan untuk pembuatan

CD interaktif, media pembelajaran (edukasi), katalog produk,

game, atau presentasi berbasis multimedia. Adobe Director ini

bukanlah software yang segala bisa. Adobe Director hanyalah

software untuk merangkai komponen multimedia dan grafis.

(Hendratman, 2008)

Tampilan kerja/User Interface Adobe Director

menggunakan istilah seperti pada dunia perfilman atau sinetron,

antara lain sebagai berikut:

Page 55: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

36

a. Stage, tampilan untuk menunjukkan hasil tata letak objek pada

waktu (frame) tertentu. Analoginya seperti tampilan di layar

TV/panggung pertunjukan.

b. Score, untuk mengatur urutan objek yang akan tampil agar

sesuai cerita/naskah, analoginya seperti storyboard dan

storyline. Di Score inilah kita menentukan mana yang tampil

lebih dahulu dan mana yang akan tampil belakangan.

c. Cast member, untuk menampung objek apa saja yang siap dan

bisa ditampilkan. Analoginya seperti artis yang sedang

menunggu giliran tampil di panggung (stage). Satu artis bisa

saja tampil berkali-kali di Stage dalam waktu yang sama atau

berbeda untuk menghemat jumlah pemain (cast member).

d. Panel Property Inspector, untuk mengatur sifat/parameter yang

ada pada objek. Setiap objek mempunyai keistimewaan sendiri.

Analoginya seperti artis yang mempunyai sifat dan kemampuan

yang khusus dan berbeda dengan artis lainnya.

e. Director, pengarah cerita/sutradara.

Page 56: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

37

Gambar 2.6 Tampilan kerja Adobe Director 11.5 (Sumber: Printscreen Adobe Director 11.5)

2.4.2. Adobe Flash CS 3

Adobe Flash CS3 adalah software aplikasi untuk animasi

yang digunakan untuk internet. Dengan Adobe Flash CS3, aplikasi

web dapat dilengkapi dengan beberapa macam animasi, audio,

interaktif animasi, dan lain-lain. Macromedia Flash memiliki

pemrograman ActionScript dan merupakan authoring tool berbasis

timeline dan terstruktur. Adobe Flash CS3 dapat digunakan untuk

pengembangan multimedia interaktif untuk produksi CD, jaringan,

maupun penggunaan pada web. Dalam multimedia dapat dilihat

teks, gambar, animasi, audio dan digital video bersama-sama

tampil pada satu saat dan menggunakan button sebagai alat

interaktif. Perkembangan multimedia yang pesat dapat dilihat

dengan makin diperlukannya presentasi bisnis, menampilkan

newsletter dalam internet, menambahkan audio dan lain-lain.

Page 57: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

38

Tampilan Adobe Flash CS3 dapat dilihat pada Gambar 2.7 berikut

ini.

Gambar 2.7 Area kerja Adobe Flash CS3 (Sumber: Printscreen Adobe Flash CS3)

2.4.3. Adobe Photoshop CS 4

Adobe Photoshop, atau biasa disebut Photoshop, adalah

perangkat lunak editor citra buatan Adobe Systems yang

dikhususkan untuk pengeditan foto atau gambar dan pembuatan

efek. Perangkat lunak ini banyak digunakan oleh fotografer digital

dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar

(market leader) untuk perangkat lunak pengolah gambar dan

bersama Adobe Acrobat, dianggap sebagai produk terbaik yang

pernah diproduksi oleh Adobe Systems. Versi ke delapan aplikasi

ini disebut dengan nama Photoshop CS. Versi sembilan disebut

Page 58: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

39

Photoshop CS2. Dan terakhir ini adalah Adobe Photoshop CS4

(Creative Suite). (wikipedia.com)

Photoshop tersedia untuk Microsoft Windows, Mac OS X,

dan Mac OS versi 9 ke atas. Juga dapat digunakan oleh sistem

operasi lain seperti Linux dengan bantuan perangkat lunak tertentu

seperti CrossOver.

Meskipun pada awalnya Photoshop dirancang untuk

menyunting gambar untuk cetakan berbasis-kertas, Photoshop yang

ada saat ini juga dapat digunakan untuk memproduksi gambar

untuk World Wide Web. Beberapa versi terakhir juga menyertakan

aplikasi tambahan, Adobe ImageReady, untuk keperluan tersebut.

Photoshop juga memiliki hubungan erat dengan beberapa

perangkat lunak penyunting media, animasi dan authoring buatan

Adobe lainnya.

2.4.3.1.Kelebihan Adobe Photoshop CS 4

Photoshop mempunyai banyak fasilitas yang

memungkinkan seorang designer menciptakan efek-efek

tertentu dan bisa menggunakan banyak variasi dari fasilitas

yang disediakan oleh Photoshop. Beberapa di antaranya yaitu:

Page 59: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

40

a. Membuat tulisan dengan efek tertentu.

Photoshop dapat mengubah bentuk tulisan menjadi lebih

kreatif dan inovatif dengan tool effect yang ada

didalamnya.

b. Membuat tekstur dan material yang beragam.

Dengan langkah-langkah tertentu, seorang designer bisa

membuat gambar misalnya daun, logam, air, dan

bermacam gambar lainnya.

c. Mengedit foto dan gambar yang sudah ada.

Dengan Photoshop kita dapat merubah gambar yang

kualitasnya tampak jelek menjadi bagus ataupun

sebaliknya. Selain itu juga Photoshop dapat merubah foto

seseorang menjadi sebuah gambar kartun. Atau dalam

design grafis disebut vector and pixel (vexel).

d. Memproses materi web.

Photoshop juga digunakan untuk keperluan web, misalnya:

kompresi file gambar agar ukurannya lebih kecil,

memotong gambar kecil-kecil (slice), dan membuat web

photo gallery. Dengan Adobe Image Ready, gambar yang

sudah ada bisa dibuat untuk keperluan web, misalnya

menjadi rollover dan animasi GIF. Untuk keperluan

tersebut bisa menggunakan Macromedia Fireworks di

samping Adobe Image Ready.

Page 60: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

41

2.4.3.2.Kelemahan Photoshop

Kelemahan Photoshop dalam menciptakan image

adalah Photoshop hanya bisa digunakan untuk menciptakan

image yang statis, dan juga dengan berkembangnya versi

Photoshop sekarang ini spesifikasi komputer untuk

menjalankan Photoshop juga harus sudah tinggi dan yang

pasti harga computer tersebut mahal.

2.4.3.3.Area Kerja Photoshop CS4

Secara garis besar, area kerja Photoshop CS4 terdiri

dari beberapa komponen utama seperti yang tampak pada

Gambar 2.8 di bawah ini.

a. Baris Menu, merupakan bagian yang berisi daftar menu

perintah.

b. Toolbox, merupakan palet yang berisi tombol-tombol

perintah, seperti tombol perintah untuk menyeleksi,

memotong, menyunting, melukis, menggambar, menulis

teks dan berbagai fungsi lainnya.

c. Baris Options, merupakan bagian yang berisi daftar

perintah tambahan yang isinya akan selalu berubah

bergantung pada tombol perintah yang terpilih pada bagian

Toolbox.

Page 61: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

42

d. Dokumen, merupakan file lembar kerja utama yang berisi

gambar, objek atau teks yang sedang diolah.

e. Panel, merupakan bagian yang terdiri dari beberapa palet.

Palet-palet tersebut memuat beberapa perintah untuk

memanipulasi dokumen.

Gambar 2.8 Area Kerja Adobe Photoshop CS4 (Sumber: Printscreen Adobe Photoshop CS4)

Page 62: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

43

BAB III

METODOLOGI PENELITIAN

Metodologi penelitian yang digunakan oleh penulis dalam penyusunan

laporan tugas akhir yang mengangkat tema mengenai Perancangan dan Pembuatan

Aplikasi Pembelajaran Ilmu Faraidh Berbasis Multimedia ini meliputi dua

metode, yaitu metode pengumpulan data dan metode pengembangan sistem.

1.1.Metode Pengumpulan Data

1.1.1. Studi Pustaka

Penulis membaca dan mempelajari buku-buku, literatur,

serta laporan penelitian yang mendukung dalam penulisan tugas

akhir ini. Metode ini dilakukan untuk mengetahui hal-hal yang

berkaitan dengan ilmu faraidh, bagaimana strategi mengajar yang

baik, bagaimana merancang perangkat ajar yang baik, langkah-

langkah dalam merancang perangkat ajar, tools apa saja yang

digunakan, dan lain-lain. Adapun buku-buku yang penulis gunakan

dalam penulisan tugas akhir ini dapat dilihat pada daftar pustaka.

1.1.2. Wawancara

Penulis mewawancarai guru mata pelajaran faraidh yang

memahami mengenai penggunaan media komputer dalam

pembelajaran. Wawancara dilakukan untuk meminta masukan dan

Page 63: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

44

saran berkaitan dengan penyusunan materi pengajaran ilmu

faraidh sesuai dengan kaidah-kaidah pengajaran, mengetahui

apakah materi sesuai dengan kurikulum yang berlaku pada tahun

pengajaran 2009/2010, mengetahui bagaimana menyusun materi

perangkat ajar yang dapat menarik perhatian siswa yang akan

menggunakan perangkat ajar dan guru yang menggunakan

perangkat ajar untuk mengetahui apakah perangkat ajar yang

dibuat dapat membantu guru dalam mengajar. Wawancara

dilakukan secara tidak terstruktur.

Adapun guru faraidh yang penulis wawancarai adalah :

Nama : H.M. Sahul Khuluq, Lc.

Status : Guru Mata Pelajaran Faraidh MA. Tarbiyatut

Tholabah.

Lembar wawancara dan hasilnya dapat dilihat pada

lampiran.

1.1.3. Observasi

Observasi adalah pengamatan langsung yang dilakukan di

lapangan untuk mengetahui secara langsung keadaan objek

penelitian yang sebenarnya. Hal ini bertujuan untuk memperoleh

penjelasan mengenai data-data dan informasi yang dibutuhkan

dalam penelitian. Dengan menggunakan metode observasi ini

penulis mengumpulkan data dengan melakukan pengamatan dan

Page 64: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

45

terlibat secara langsung dalam kegiatan belajar mengajar mata

pelajaran Faraidh di kelas.

Tempat dan waktu pelaksanaan observasi dilakukan di

Madrasah Aliyah Tarbiyatut Tholabah Kranji Paciran Lamongan

Jawa Timur selama bulan Juli 2010.

1.2.Metode Pengembangan Sistem

Menurut Luther (dalam Ariesto Hadi Soetopo, 2003:32)

Pengembangan aplikasi multimedia dilakukan berdasarkan enam tahap,

yaitu concept, design, material collecting, assembly, testing, dan

distribution (implementation).

1.2.1. Konsep (Concept)

Tahap konsep (concept) yaitu menentukan tujuan, termasuk

identifikasi audien, macam aplikasi (presentasi, interaktif, dan lain-

lain), tujuan aplikasi (informasi, hiburan, pelatihan, dan lain-lain),

dan spesifikasi umum. Dasar aturan untuk perancangan juga

ditentukan pada tahap ini, seperti ukuran aplikasi, target dan lain-

lain.

Adapun tahap konsep yang penulis lakukan adalah :

• Menentukan tujuan, pada tahap ini ditentukan tujuan dari

pembuatan aplikasi, serta audien yang menggunakannya.

Page 65: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

46

• Deskripsi konsep aplikasi yang akan dibuat dengan

menentukan jenis aplikasi (presentasi, interaktif, dan lain-lain),

dan spesifikasi umum aplikasi (judul, audien, dan lain-lain).

1.2.2. Perancangan (Design)

Maksud dari tahap perancangan (design) adalah membuat

spesifikasi secara rinci mengenai arsitektur proyek, gaya dan

kebutuhan material untuk proyek.

Spesifikasi yang akan dibuat berdasarkan pada langkah berikut :

• Perancangan storyboard

• Desain struktur navigasi berupa hirarki menu

• Perancangan bagan alir (flowchart view)

• Perancangan diagram transisi (state transition diagram)

• Perancangan antar muka (user interface)

1.2.3. Pengumpulan Bahan (Material Collecting)

Pada tahap pengumpulan bahan (material collecting)

dilakukan pengumpulan bahan seperti clipart image, animasi,

audio, berikut pembuatan gambar, grafik, foto, dan lain-lain yang

diperlukan untuk tahap berikutnya. Bahan-bahan diperoleh dari

berbagai sumber seperti internet, maupun dari pihak lembaga.

Page 66: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

47

1.2.4. Pembuatan (Assembly)

Tahap pembuatan (assembly) merupakan tahap dimana

seluruh obyek multimedia dibuat. Pembuatan aplikasi berdasarkan

storyboard, flowchart view, struktur navigasi, atau diagram obyek

yang berasal dari tahap desain. Pada tahap ini software yang akan

digunakan adalah Adobe Director 11 dan Adobe Photoshop CS 4.

1.2.5. Tes (Testing)

Tahap tes (testing) dilakukan setelah selesai tahap

pembuatan dan seluruh data telah dimasukan. Pertama-tama

dilakukan testing secara modular untuk memastikan apakah

hasilnya seperti yang diinginkan. Beberapa sistem mempunyai fitur

yang dapat memberikan informasi bila terjadi kesalahan pada

program.

Suatu hal yang tidak kalah penting adalah aplikasi harus

dapat berjalan dengan baik di lingkungan user. User merasakan

kemudahan serta manfaat dari aplikasi tersebut dan dapat

menggunakannya sendiri.

1.2.6. Distrbusi (Distribution)

Pada tahap ini akan dilakukan implementasi serta evaluasi

terhadap aplikasi multimedia dan setelah semuanya selesai aplikasi

Page 67: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

48

multimedia akan digandakan menggunakan CD ROM atau

perangkat keras lainnya.

Beberapa tahap implementasi dan evaluasi yang penulis

dilakukan adalah :

• Spesifikasi perangkat keras dan perangkat lunak yang

dibutuhkan untuk mengeksekusi aplikasi.

• Cara pengoperasian program.

• Menjelaskan hasil tampilan.

Page 68: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

49

BAB IV

PEMBAHASAN DAN IMPLEMENTASI

Urutan hasil dari metodologi yang digunakan dalam pengembangan

aplikasi pembelajaran ilmu Faraid berbasis multimedia dengan menggunakan

perangkat lunak Adobe Director ini, penulis menggunakan beberapa tahapan

pengembangan sistem multimedia seperti yang tercantum dalam buku Suyanto

(2003).

Terlebih dahulu, penulis paparkan gambaran umum tempat penulis

melakukan penelitian yaitu Madrasah Aliyah Tarbiyatut Tholabah Kranji Paciran

Lamongan Jawa Timur.

4.1.Gambaran Umum Lokasi Penelitian

4.1.1. Profil MA. Tarbiyatut Tholabah

Madrasah Aliyah Tarbiyatut Tholabah adalah lembaga

pendidikan yang didirikan di lingkungan Yayasan Pondok Pesantren

Tarbiyatut Tholabah. Lembaga yang didirikan pada tahun 1963 ini

mulai beroperasi pada tahun 1971. Madrasah Aliyah Tarbiyatut

Tholabah saat ini mempunyai tiga program pilihan; yaitu IPA, IPS, dan

MAK.

Sebagaimana lembaga-lembaga pendidikan yang berada di

lingkungan pesantren, Madrasah Aliyah Tarbiyatut Tholabah juga

Page 69: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

50

sangat menekankan pembelajaran materi-materi keagamaan, baik

secara teori maupun praktek.

4.1.2. Visi, Misi, dan Tujuan

Visi Madrasah Aliyah Tarbiyatut Tholabah adalah Islami,

Berprestasi, dan Berinovasi. Sedangkan misinya antara lain:

1. Menerapkan dan mengamalkan nilai-nilai ajaran Islam dalam

kehidupan sehari-hari serta menjadikannya sebagai sumber

kearifan dalam bertindak.

2. Mengembangkan potensi akademik secara optimal.

3. Mengembangkan bakat, minat dan ketrampilan siswa sebagai

bekal melanjutkan ke jenjang lebih tinggi dan atau terjun ke

masyarakat.

4. Mengembangkan sistem pendidikan yang sesuai dengan

perkembangan ilmu pengetahuan dan teknologi.

Tujuan yang ingin dicapai oleh Madrasah Aliyah adalah

sebagai berikut:

1. Warga madrasah dapat merealisasikan nilai-nilai ajaran Islam

dalam kehidupan sehari hari dan mempunyai kepedulian yang

tinggi terhadap penerapan budaya islami di masyarakat.

2. Siswa dapat menguasai ilmu pengetahuan dan teknologi sehingga

bisa mencapai standar kelulusan serta dapat melanjutkan ke

perguruan tinggi baik dalam maupun luar negeri.

Page 70: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

51

3. Terwujudnya sistem pendidikan yang sesuai dengan perkembangan

ilmu pengetahuan dan teknologi.

4. Siswa memiliki ketrampilan, kecakapan, keuletan dan kemandirian

sebagai bekal hidup di masyarakat.

4.2.Analisis Perancangan

Sebelum melakukan pengembangan aplikasi pembelajaran ilmu

Faraidh berbasis multimedia ini, penulis terlebih dahulu melakukan analisa

terhadap perancangan yang akan penulis buat, yaitu antara lain dengan

mengidentifikasi masalah, meninjau hasil studi kelayakan, dan hasil

analisis kebutuhan sistem.

4.2.1. Identifikasi Masalah

Pada tahap ini peneliti melakukan analisis atas aplikasi

dibuat. Pemecahan masalah yang diusulkan peneliti yaitu:

1. Dari hasil analisis dan pengamatan yang dilakukan penulis di

MA. Tarbiyatut Tholabah, penulis menyimpulkan bahwa

selama ini media pembelajaran yang digunakan di MA.

Tarbiyatut Tholabah masih biasa saja, yakni berupa teks di

papan tulis. Maka penulis memberikan solusi dengan

membuatkan suatu aplikasi pembelajaran interaktif berbasis

multimedia untuk mata pelajaran Faraidh.

Page 71: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

52

2. Tujuan dari aplikasi ini adalah untuk mengembangkan suatu

media pembelajaran yang tadinya biasa saja menjadi aplikasi

pembelajaran berbasis multimedia untuk membantu para

pelajar dalam memahami mata pelajaran Faraidh secara lebih

praktis dan efektif.

3. Aplikasi pembelajaran ini dirancang dengan tampilan layar

yang menarik, tujuannya agar user tidak merasa bosan atau

jenuh dan mudah digunakan.

4.2.2. Hasil Analisa Kebutuhan Sistem

Pada tahap analisis kebutuhan sistem penulis menyebarkan

kuesioner kepada para siswa MA. Tarbiyatut Tholabah dan

beberapa staf pengajar di lingkungan PP. Tarbiyatut Tholabah yang

berjumlah 30 orang. Kuesioner yang diperoleh sejumlah 30 lembar

dengan hasil sebagai berikut :

1. Tingkat kesulitan siswa dalam memahami ilmu Faraid.

Tabel 4.1. Ilmu Faraidh sulit dipelajari

Ilmu Faraidh sulit Jumlah Presentase (%)

Ya 19 63,33 %

Tidak 11 36,67 %

Jumlah total 30 100 %

Dari tabel di atas diketahui bahwa 19 orang dari 30 orang

menyatakan bahwa ilmu Faraidh sulit dipelajari.

Page 72: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

53

2. Tingkat perbandingan kebutuhan user terhadap media lain

selain buku.

Tabel 4.2. Kebutuhan media lain selain buku.

Butuh media lain selain buku

Jumlah Presentase (%)

Ya 23 76,67 %

Tidak 7 23,33 %

Jumlah total 30 100 %

Dari tabel diatas terlihat bahwa sebanyak 23 dari 30 orang yang

ada menyatakan bahwa mereka butuh media lain selain buku

untuk dipelajari.

3. Tingkat perbandingan user dalam menanggapi perlunya CD

pembelajaran ilmu Faraidh.

Tabel 4.3. Tersedia media lain

Perlu CD pembelajaran Faraid

Jumlah Presentase (%)

Ya 30 100 %

Tidak 0 0 %

Jumlah total 30 100 %

Dari tabel diatas terlihat bahwa semua orang menyatakan perlu

diadakannya media atau CD pembelajaran ilmu Faraidh.

Page 73: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

54

4.3.Pengembangan Aplikasi Multimedia

Untuk pengembangan aplikasi multimedia, peneliti telah

melakukannya berdasarkan 6 (enam) tahap pengembangan multimedia

menurut Luther (Sutopo, 2003), yaitu:

4.3.1. Konsep (Concept)

Perancangan aplikasi pembelajaran ilmu Faraidh berbasis

multimedia ini menggunakan manfaat teknologi multimedia.

Dengan mengimplementasikan multimedia sebagai salah satu

media pembelajaran dapat membantu peserta didik untuk

memahami pelajaran dengan lebih mudah. Secara garis besar

deskripsi konsep aplikasi dijelaskan sebagai berikut:

Tabel 4.4. Deskripsi Konsep Aplikasi

Judul : Aplikasi pembelajaran ilmu Faraidh

berbasis multimedia.

Jenis Aplikasi : Aplikasi pembelajaran multimedia.

Audiensi : Para siswa yang mempelajari mata

pelajaran Faraidh dan para guru yang

mencoba menerapkan aplikasi ini dalam

dunia pendidikan.

Gambar : Menggunakan file berformat JPG, PNG,

PSD baik dibuat sendiri dengan

menggunakan Adobe Photoshop CS4

Page 74: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

55

maupun yang didapat dari internet.

Audio : Menggunakan file MP3, WAV dan OGG

yang dibuat sendiri menggunakan

SoundForge atau didapat dari internet.

Animasi :

Animasi pada teks dan gambar dibuat

oleh penulis menggunakan software

Adobe Flash CS3 dan Adobe Director

11.5.

Interaktif : Menggunakan link-link yang terhubung

satu sama lain, berupa gambar, teks, dan

pemanfaatan media suara berupa sound

effect atau musik.

4.3.2. Perancangan (Design)

Pada tahap ini peneliti melakukan perancangan aplikasi

berupa perancangan flowchart, storyboard, desain struktur navigasi

berupa hirarki menu, perancangan diagram transisi atau State

Transition Diagram (STD) dan perancangan antar-muka pengguna

(user interface).

4.3.2.1. Perancangan Flowchart

Perancangan flowchart berguna untuk

menggambarkan proses dari sistem. Flowchart disebut juga

sebagai diagram tampil yang memberikan gambaran alir

dari satu tampilan ke tampilan lainnya. Berikut ditampilkan

Page 75: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

56

flowchart aplikasi pembelajaran ilmu Faraidh berbasis

multimedia interaktif.

Gambar 4.1 Flowchart aplikasi pembelajaran ilmu Faraidh berbasis multimedia interaktif

Tidak Ya

Tidak

Mulai

Tampilan layar intro

Tampilan layar menu utama

Pilih Keluar

Pilih Materi

Menampilkan layar materi yang dipilih

Tampilan layar materi

Selesai

Ya

Page 76: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

57

4.3.2.2. Perancangan Storyboard

Storyboard aplikasi pembelajaran ilmu Faraidh berbasis multimedia

interaktif yang penulis buat ini berukuran 640 x 480 pixel. Storyboard

aplikasi pembelajaran berbasis multimedia interaktif ini terdiri dari:

1. Storyboard Layar Intro

kidjkd

Gambar 4.2 Storyboard Layar Intro

2. Storyboard Layar Menu Utama

Gambar 4.3 Storyboard Layar Menu Utama

masuk

JUDUL APLIKASI

Storyboard Layar Intro

Project : Perancangan dan Pembuatan Aplikasi Pembelajaran ilmu Faraid berbasis multimedia

Modul : Intro Frame No : 1 Gambar : logo lembaga, logo

aplikasi Audio : backsound, sound

effect tombol Navigasi Next : Tombol MASUK

Teks Judul Aplikasi

Logo aplikasi

Mulai

Storyboard Layar Menu Utama

Project : Perancangan dan Pembuatan Aplikasi Pembelajaran ilmu Faraid berbasis multimedia

Modul : Menu Utama Frame No : 2 Gambar : logo lembaga Audio : backsound, sound

effect tombol Navigasi Next : tombol menu-menu

utama (Materi Pelajaran, Soal-Soal Ujian, dan Tentang E-Faraid)

x Logo dan judul aplikasi

Teks basmalah

Materi Pelajaran

Soal-Soal Ujian

Tentang E-Faraid

Page 77: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

58

3. Storyboard Layar Sub-Menu 1 (Materi Pelajaran)

Gambar 4.4 Storyboard Layar Sub-Menu Materi Pelajaran

4. Storyboard Layar Sub-Menu 2 (Soal-Soal Ujian)

Gambar 4.5 Storyboard Layar Sub-Menu Soal-Soal Ujian

Storyboard Layar Sub-Menu Materi Pelajaran

Project : Perancangan dan Pembuatan Aplikasi Pembelajaran ilmu Faraid berbasis multimedia

Modul : Materi Pelajaran Frame No : 3 Gambar : logo lembaga Audio : backsound, sound

effect tombol Navigasi Next : Tombol kembali,

tombol selanjutnya

x Logo dan judul aplikasi

Teks Materi Pelajaran

Dasar Faraid

Syarat, Sebab, dan penggugur

hak waris

Bagian pasti

Ahli waris laki2 &

perempuan

Tingkatan Ahli waris

Bagian ‘Ashabah

Al-Hajb

Storyboard Layar Sub-Menu Soal-Soal Ujian

Project : Perancangan dan Pembuatan Aplikasi Pembelajaran ilmu Faraid berbasis multimedia

Modul : Materi Pelajaran Frame No : 4 Gambar : logo lembaga Audio : backsound, sound

effect tombol Navigasi Next : Tombol kembali,

tombol selanjutnya

x Logo dan judul aplikasi

Teks Soal-Soal Ujian

Soal-Soal Ujian

Page 78: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

59

5. Storyboard Layar Sub-Menu 2 (Tentang E-Faraid)

Gambar 4.6 Storyboard Layar Sub-Menu Tentang e-Faraid

4.3.2.3. Struktur Hirarki Menu Navigasi

Gambar 4.7 Struktur Menu Aplikasi e-Faraid

Storyboard Layar Sub-Menu Tentang E-Faraid

Project : Perancangan dan Pembuatan Aplikasi Pembelajaran ilmu Faraid berbasis multimedia

Modul : Tentang e-Faraid Frame No : 5 Gambar : logo lembaga Audio : backsound, sound

effect tombol Navigasi Next : Tombol kembali

x Logo dan judul aplikasi

Teks Tentang E-Faraid

Deskripsi E-Faraid

Kembali

Perancangan dan Permbuatan Aplikasi Pembelajaran Ilmu Faraid Berbasis Multimedia

Tampilan Layar Intro

Tampilan Menu

Soal-Soal Ujian

Materi Pelajaran

Tentang e-Faraid

Dasar Faraid

Syarat, Sebab, dan Penggugur Hak Waris

Ahli Waris Laki-Laki dan Perempuan

Tingkatan Ahli Waris

Bagian Pasti

Al-Hajb

Page 79: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

60

Struktur menu merupakan gambaran urutan-urutan menu pada

aplikasi pembelajaran ilmu Faraid berbasis multimedia. Di dalam aplikasi

ini terdapat tombol-tombol menu pilihan, yaitu menu Utama, Materi

Pelajaran, Soal-Soal Ujian, dan Tentang E-Faraid.

1. Menu Utama, terdiri dari menu-menu pilihan utama, yaitu menu

Materi Pelajaran, menu Soal-Soal Ujian, dan menu Tentang E-Faraid.

2. Menu Materi Pelajaran, terdiri dari 7 (tujuh) sub-menu pilihan isi

materi pelajaran Faraid yang diajarkan pada Madrasah Aliyah

Tarbiyatut Tholabah kelas 2.

3. Menu Soal-Soal Ujian, berisi kumpulan soal yang bisa dijawab oleh

pengguna secara interaktif.

4. Menu Tentang E-Faraid, berisi informasi mengenai aplikasi

pembelajaran E-Faraid ini.

5. Menu Keluar (X), merupakan pilihan untuk keluar dari aplikasi

dengan menampilkan pertanyaan yang mengkonfirmasi apakah user

benar-benar ingin keluar dari aplikasi atau tidak. Ada dua pilihan yaitu

Ya dan Tidak. Kalau menge-klik tombol Ya maka pengguna akan

langsung meninggalkan aplikasi dan aplikasi segera tertutup. Namun

bila memilih Tidak, maka pegguna akan dikembalikan ke halaman

Intro.

Page 80: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

61

4.3.2.4. State Transition Diagram (STD)

STD adalah sebuah model tingkah laku yang bertumpu pada

definisi dari serangkaian keadaan sistem.

1. STD Layar Intro

Gambar 4.8 STD Layar Intro

Penjelasan STD Layar Intro :

Pada STD Layar Intro ini dimulai dengan meng-klik icon aplikasi e-

Faraid. Selanjutnya akan muncul layar intro yang terdapat tombol “mulai”

untuk masuk ke halaman menu utama.

2. STD Layar Menu Utama

Gambar 4.9 STD Menu Utama

Sistem Operasi

Layar Intro

Layar Menu Utama

Keluar

Klik Ikon Aplikasi e-Faraid

Tampilan Layar Intro

Tampilan Layar Menu Utama

Klik ‘Mulai’ Keluar dari Aplikasi E-Faraid

Klik ikon “Tentang E-Faraid” Tampilkan layar “Tentang E-Faraid”

Klik ikon “Keluar” Klik ikon “Keluar” Tampilkan layar konfirmasi keluar

Klik ikon “Soal-Soal Ujian” Tampilkan layar “Soal-Soal Ujian”

Klik ikon “Materi Pelajaran” Tampilkan layar “Materi Pelajaran”

Menu Utama

Materi Pelajaran

Soal-Soal Ujian

Tentang E-Faraid

Keluar

Page 81: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

62

Penjelasan STD Menu Utama :

Pada layar menu utama terdapat tombol-tombol pilihan, yaitu tombol

“Materi Pelajaran”, tombol “Soal-Soal Ujian”, dan tombol “Tentang E-

Faraid” Pada tiap-tiap menu tersebut terdapat sub-menu yang apabila

diklik akan menampilkan isi dari sub-menu tersebut. Pada menu “Materi

Pelajaran terdapat tujuh buah sub-menu yang merupakan nama judul mata

pelajaran ilmu Faraid yang diajarkan di Madrasah Aliyah Tarbiyatut

Tholabah.

3. STD Layar Materi Pelajaran

Gambar 4.10 STD Materi Pelajaran

Klik “Bagian Pasti” Tampilkan “Bagian Pasti”

Klik “Tingkatan Ahli Waris” Tampilkan “Tingkatan Ahli Waris”

Klik “Ahli waris laki2&Perempuan” Tampilkan “Ahli waris laki2&Perempuan”

Klik “Al-Hajb” Tampilkan “Al-Hajb”

Klik “Bagian ‘Ashabah” Tampilkan “Bagian ‘Ashabah”

Klik “Syarat, Sebab, Penggugur.” Tampilkan “Syarat, Sebab, Penggugur”

Klik “Dasar Faraid” Tampilkan ‘Dasar Faraid”

Dasar Faraid

Syarat, Sebab, dan Penggugur Hak

Waris

Ahli Waris Laki-Laki dan

Perempuan

Tingkatan Ahli Waris

Bagian Pasti

Bagian ‘Ashabah

Al -Hajb

Klik “Keluar” Tampilkan kotak konfirmasi keluar

Keluar

Tampilkan “Materi

Pelajaran”

Klik “Materi Pelajaran”

Menu Utama

Materi Pelajaran

Page 82: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

63

Penjelasan STD Materi Pelajaran :

Layar pilihan Materi Pelajaran ini akan tampil apabila menu Materi

Pelajaran di-klik. Pada layar Materi Pelajaran ini terdapat delapan sub-

menu yang merupakan isi dari materi pelajaran yang dibahas dalam

ilmu Faraid. Pada layar Materi Pelajaran ini juga terdapat tombol

“Home” untuk kembali ke menu utama dan tombol “Keluar” untuk

keluar dari aplikasi.

4. STD Layar Soal-Soal Ujian

Gambar 4.11 STD Soal-Soal Ujian

Penjelasan STD Soal-Soal Ujian :

Layar pilihan Soal-Soal Ujian ini akan tampil apabila menu Soal-Soal

Ujian di-klik dari layar menu utama. Pada layar Soal-Soal Ujian ini

terdapat menu “Home” untuk kembali ke Menu Utama dan tombol

“Keluar” untuk keluar dari aplikasi.

Klik “Keluar” Tampilkan layar konfirmasi keluar

Klik “Soal-Soal Ujian” Tampilkan layar “Soal-Soal Ujian”

Menu Utama

Soal-Soal Ujian

Keluar

Page 83: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

64

5. STD Layar Tentang E-Faraid

Gambar 4.12 STD Tentang E-Faraid

Penjelasan STD Tentang E-Faraid :

Layar pilihan Tentang E-Faraid ini akan tampil apabila menu Tentang

E-Faraid di-klik dari Menu Utama. Pada layar ini juga terdapat tombol

Home untuk kembali ke halaman utama. Juga, terdapat tombol Keluar

untuk langsung keluar sistem aplikasi.

4.3.2.5. Merancang Antar Muka Pengguna (User Interface)

Pada rancangan antar muka pengguna ini ditampilkan tiap-tiap

halaman materi yang ada pada aplikasi pembelajaran ilmu Faraidh

berbasis multimedia interaktif ini.

Klik “Keluar” Tampilkan layar konfirmasi keluar

Klik “Tentang E-Faraid” Tampilkan layar “Tentang E-Faraid”

Menu Utama

Tentang E-Faraid

Keluar

Klik “Kembali” Tampilkan layar Menu Utama

Page 84: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

65

1. Rancangan Layar Intro

Gambar 4.13 Rancangan Layar Intro

Pada rancangan layar Intro ini penulis membuat layar

dengan ukuran 640x480 pixel dengan latar belakang warna gradasi

hijau dan orange. Pada sudut kiri atas penulis meletakkan logo

lembaga tempat penulis melakukan penelitian. Penulis juga

meletakkan nama aplikasi yang penulis buat beserta logonya.

Untuk tulisan “Aplikasi Tutorial dan Latihan Faraid (Warisan)”

penulis menggunakan jenis huruf Alliance dengan ukuran 57pt

berwarna coklat dan untuk teks tombol MULAI dengan spesifikasi

Bernard MT dengan ukuran 57pt.

Logo Lembaga

Latar belakang gambar

480px

640px

Aplikasi Tutorial dan Latihan

Faraid (Warisan)

Logo Aplikasi

Font : Bernard MT

Size : 57pt

Font : Alliance

Size : 57 pt

Logo Lembaga

Masuk

Page 85: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

66

2. Rancangan Layar Halaman Utama

Gambar 4.14 Rancangan Layar Halaman Utama

Pada rancangan layar Halaman Utama ini penulis membuat

layar dengan ukuran 640x480 pixel dengan latar belakang warna

gradasi hijau dan orange. Pada tampilan menu utama, yaitu menu

Materi Pelajaran, menu Soal-Soal Ujian, dan menu Tentang Faraid

penulis menggunakan background gambar kertas yang dilipat

ujungnya warna hijau, sedangkan hurufnya menggunakan jenis

Black Boys on Moped dengan ukuran 57pt.

X

Materi

Pelajaran

480px

640px

Aplikasi Tutorial dan Latihan

Faraid (Warisan)

Font : Alliance

Size : 16 pt Logo Lembaga

Soal-Soal Ujian Tentang E-

Faraid

Page 86: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

67

3. Rancangan Layar Materi Pelajaran

Gambar 4.15 Rancangan Layar Materi Pelajaran

Pada rancangan layar Materi Pelajaran ini penulis membuat

layar dengan ukuran 640x480 pixel dengan latar belakang warna

putih. Untuk latar belakang masing-masing item dari menu-menu

materi pelajaran penulis menggunakan model kertas yang dilipat

ujungnya dengan warna putih.

X

Dasar Faraid 480px

640px

Aplikasi Tutorial dan Latihan

Faraid (Warisan)

Font : Alliance

Size : 16 pt

Logo Lembaga

Materi Pelajaran

Syarat, Sebab, dan

Penggugur Hak

Waris

Ahli Waris Laki-

Laki dan

Perempuan

Tingkatan Ahli

Waris

Bagian Pasti

Bagian

Ashabah

Al-Hajb

Page 87: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

68

4. Rancangan Layar Sub Materi Pelajaran (Inti Materi)

Gambar 4.16 Rancangan Layar Sub Materi Pelajaran

Pada rancangan layar Sub-Materi Pelajaran ini penulis

membuat layar dengan ukuran 640x480 pixel dengan latar

belakang warna putih. Judul Materi ditulis dengan jenis huruf

Alliance yang berukuran 16 pt. Sedangkan materi pelajaran ditulis

dalam dua kolom atau tiga kolom menyesuaikan keserasian dengan

isi materi dengan jenis huruf Times New Roman dengan ukuran 12

pt.

X

480px

640px

Aplikasi Tutorial dan Latihan

Faraid (Warisan)

Font : Alliance

Size : 16 pt

Logo Lembaga

Materi Pelajaran

Isi materi

Isi materi

Isi materi

Page 88: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

69

5. Rancangan Layar Soal-Soal Ujian

Gambar 4.17 Rancangan Layar Soal-Soal Ujian

Pada rancangan layar Soal-Soal Ujian ini penulis membuat

layar dengan ukuran 640x480 pixel dengan latar belakang warna

putih. Judul ditulis dengan jenis huruf Alliance yang berukuran 16

pt. Pada sisi kiri layar penulis meletakkan timer untuk mengatur

waktu yang dibutuhkan pengguna dalam menjawab masing-masing

pertanyaan. Sedangkan pada layar sebelah kanan akan berisi

pertanyaan-pertanyaan yang diajukan kepada pengguna secara

interaktif.

X

480px

640px

Aplikasi Tutorial dan Latihan

Faraid (Warisan)

Font : Alliance

Size : 16 pt

Logo Lembaga

Soal-Soal Ujian

Soal-Soal Ujian

Page 89: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

70

6. Rancangan Layar Tentang E-Faraid

Gambar 4.18 Rancangan Layar Tentang E-Faraid

Pada rancangan layar Tentang E-Faraid ini penulis

membuat layar dengan ukuran 640x480 pixel dengan latar

belakang warna putih. Judul ditulis dengan jenis huruf Alliance

yang berukuran 16 pt. Sedangkan deskripsi ditulis dengan

menggunakan font Times New Roman yang berukuran 12 pt.

4.3.3. Pengumpulan Bahan (Material Collecting)

Bahan-bahan yang diperlukan untuk membuat aplikasi ini, baik

berupa file-file suara instrumen musik, gambar, animasi, video dan

beberapa sumber, namun sebagian elemen seperti button atau tombol,

X

480px

640px

Aplikasi Tutorial dan Latihan

Faraid (Warisan)

Font : Alliance

Size : 16 pt

Logo Lembaga

Tentang E-Faraid

Deskripsi E-Faraid

Kembali

Page 90: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

71

gambar dan animasi, dibuat sendiri oleh peneliti dengan menggunakan

software pendukung.

a. Bahan File Audio

Penulis mengumpulkan file-file audio yang diperlukan seperti

koleksi musik berformat .MP3, .WMA, .WAV atau .OGG yang

disesuaikan dengan kebutuhan dalam Pengembangan Aplikasi

Pembelajaran Ilmu Faraidh Berbasis Multimedia. Selain itu, ada

beberapa file audio yang penulis buat sendiri dengan cara merekam

bunyi-bunyian yang berfungsi sebagai suara tombol-tombol dan

materi-materi yang ditampilkan di layar aplikasi. Untuk mengedit file-

file audio tersebut, perangkat lunak yang peneliti gunakan adalah Cool

Edit Pro 2.0.

b. Bahan File Animasi.

Agar tampilan (interface) dari Pengembangan Aplikasi

Pembelajaran Ilmu Faraidh Berbasis Multimedia Interaktif ini tampak

lebih menarik dan dinamis, maka peneliti merancang animasi gambar,

teks dan tombol yang kesemuanya itu dibuat dengan menggunakan

perangkat lunak Adobe Flash CS3 dan sebagian lagi dibuat dengan

menggunakan Adobe Director 11.5.

Page 91: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

72

c. Bahan File Gambar

Penulis menggunakan file grafik/gambar yang sesuai

dengan karakteristik user dan audience, yaitu para siswa sekolah

menengah atas yang meliputi grafik dua dimensi rancangan layar

yang dibuat dan diedit menggunakan Adobe Photoshop CS4.

4.3.4. Pembuatan (Assembly)

Tahap pembuatan sistem ini merupakan tahap di mana

Pengembangan Aplikasi Pembelajaran Ilmu Faraidh Berbasis Multimedia

Interaktif ini mulai dibuat sesuai dengan Storyboard, Flowchart dan STD

(State Transition Diagram). Dalam tahap memproduksi sistem ini, penulis

menggunakan perangkat keras (hardware) dengan spesifikasi sebagai

berikut:

Processor Intel® Pentium IV 3 GHz

Memory 700 GB DDRAM

Graphic Card 96 MB

Harddisk 80 GB

CD ROM DVD RW

Input Tools Mouse, Keyboard

Output Tools Monitor 17”, Speaker Active

Produksi sistem ini menggunakan perangkat lunak (software)

Adobe Director 11.5 untuk merancang pengembangan aplikasi

pembelajaran ilmu Faraidh berbasis multimedia ini, di mana di dalamnya

Page 92: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

73

terdapat unsur animasi yang penulis buat dengan menggunakan software

Adobe Flash CS3 dan Adobe Director 11.5. Untuk membuat dan mengedit

gambar-gambar, penulis memanfaatkan Adobe Photoshop CS4.

Sedangkan untuk mengolah file suara (audio) peneliti menggunakan Cool

Edit Pro 2.0.

Setelah semua spesifikasi pengembangan aplikasi multimedia

terpenuhi, tahap selanjutnya adalah mengembangkan program ini ke tahap

pembuatannya menggunakan software yang telah dipersiapkan. Tahapan

awal dalam pengembangan program ini adalah mendesain layout latar

belakang masing-masing halaman dengan menggunakan Adobe Photoshop

CS4. Perancangan awal tombol dan animasi juga dibuat menggunakan

Adobe Photoshop CS4.

Tahap selanjutnya adalah membuat gambar animasi yang

diperlukan untuk menambah daya tarik aplikasi ini. Tombol yang akan

dibuat dengan gaya animasi juga dibuat pada tahapan ini. Software yang

digunakan adalah Adobe Flash CS3 dan Adobe Director 11.5.

Setelah melewati tahapan membuat latar setiap halaman aplikasi

dan animasi serta tombol-tombol, selanjutnya adalah mengolah file audio.

Pengolahan dan penyuntingan file-file audio ini memanfaatkan software

SoundForge dan Cool Edit Pro 2.0.

Setelah semua elemen aplikasi tersedia dan diimpor ke dalam

Adobe Director 11.5, langkah selanjutnya adalah menyusun elemen-

elemen tersebut ke dalam masing-masing halaman aplikasi. Pada tahap ini

Page 93: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

74

penulis membuat link yang menghubungkan satu halaman ke halaman lain,

menambahkan efek suara dan meng-compile-nya menjadi satu file aplikasi

pembelajaran ilmu Faraidh berbasis multimedia.

4.3.4.1.Pembuatan Background Aplikasi E-Faraid

Untuk tahap awal pembuatan aplikasi ini, penulis

mendesain gambar latar untuk aplikasi yang peneliti buat.

Pembuatannya menggunakan Adobe Photoshop CS4. Pada tahap

ini peneliti menggunakan Pen tool untuk membuat garis tepi yang

melengkung. Selanjutnya peneliti memberikan warna yang

bergradasi pada garis melengkung tersebut menggunakan Gradient

Tool. Berikutnya, peneliti memberikan warna dasar untuk

background aplikasi yang peneliti buat dengan menggunakan Paint

Bucket.

Setelah tahapan pembuatan background aplikasi, peneliti

menambahkan gambar dan logo dengan cara menggabungkan

beberapa gambar ke layar kerja pembuatan background aplikasi

dengan jalan klik File�Open.

Page 94: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

75

Gambar 4.19 Membuat Background Aplikasi E-Faraid

Selanjutnya file disimpan dalam tipe file .PSD dengan

nama file Background.PSD.

Gambar 4.20 Menyimpan File Background .PSD

Page 95: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

76

4.3.4.2.Membuat Tombol Menu

Tahap pembuatan tombol menu dibuat dengan

menggunakan software Adobe Flash CS3. Di awali dengan

membuat lingkaran menggunakan Oval Tool, kemudian

memberi warna dan efek gradasi dengan menggunakan Paint

Bucket Tool.

Gambar 4.21 Oval Tool

Setelah tombol menu dibuat, selanjutnya adalah meng-

export file tombol menu tadi menjadi format .PNG yang latar

belakang gambar tombol menu tersebut transparan. Beri nama

tombol menu tersebut dengan nama “masuk-on.PNG”. Setelah

selesai, masih dengan file yang sama tombol tersebut diberi efek

Glow, lalu disimpan dengan nama “masuk-on-glow.PNG”.

Page 96: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

77

4.3.4.3.Membuat Halaman Utama Aplikasi E-Faraid

Dalam membuat halaman utama aplikasi E-Faraid,

langkah pertama yang harus dilakukan adalah mempersiapkan

bidang kerja atau Stage-nya. Untuk ukuran Stage, penulis

menggunakan ukuran 640 x 480 pixel yang pengaturannya dapat

dilakukan di panel Property Inspector.

Gambar 4.22 Property Inspector

Tahapan selanjutnya yaitu mengimpor file

Background.JPG tadi ke Adobe Director 11.5. Langkah-langkah

mengimpor gambar ke Adobe Director 11.5 yaitu klik menu

File�Import, di kotak dialog Import, pilih file gambar

Background.PSD, lalu klik Add�Import. Berikutnya pilih Color

Depth: 24 (Bits) dan klik OK. Setelah file Background.JPG

Page 97: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

78

diletakkan di are kerja (Stage) Adobe Director 11.5, simpan

dengan nama Utama.DIR.

Gambar 4.23 Mengimpor File ke Area Kerja Adobe Director 11.5

4.3.4.4.Menggabungkan File menjadi Aplikasi E-Faraid

Untuk menggabungkan beberapa file ke dalam

“Utama.DIR” pada aplikasi E-Faraid ini dilakukan dengan cara

mengimpor file-file yang dibutuhkan. Klik menu File�Import,

di kotak dialog import pilih file-file yang akan di-import. Klik

Add untuk memasukkan ke dalam daftar file, lalu klik Import

bisa semua siap.

Data yang sudah di-import otomatis masuk ke dalam

Cast Member. Cast Member berfungsi untuk menyimpan data

yang akan dipakai atau ditampilkan pada aplikasi E-Faraid.

Page 98: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

79

Gambar 4.24 Cast Member

Selanjutnya yaitu menyusun data-data yang dibutuhkan

ke Score. Cara memasukkan Background.JPG dengan cara men-

drag ke Score atau bisa juga ke Stage.

Gambar 4.25 Area Kerja Pembuatan Halaman Utama Aplikasi E-Faraid

Page 99: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

80

Langkah berikutnya yaitu memasukkan data atau file-file

lain seperti “Utama.dir” dan tombol-tombol menu, seperti

“masuk-on.PNG” dan “masuk-on-glow.PNG”.

4.3.4.5.Memasukkan Musik Latar

Aplikasi E-Faraid yang penulis buat ini terdapat musik

latar yang langsung diputar saat aplikasi dijalankan. Cara impor

file musik yaitu File�Import� Pilih file musik �Klik Import.

Lalu drag file musik ke Channel suara nomor 1.

Gambar 4.26 Memasukkan Musik

Page 100: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

81

4.3.5. Pengujian (Testing)

Langkah selanjutnya setelah aplikasi multimedia diproduksi adalah

langkah pengujian sistem. Fungsi dari pengujian sistem ini untuk

memastikan bahwa hasil produksi aplikasi multimedia sesuai dengan yang

direncanakan sekaligus untuk mengetahui apakah aplikasi pembelajaran

ilmu Faraidh berbasis multimedia ini dapat berjalan dengan baik atau

tidak. Maka dari itu, penulis melakukan pengujian terhadap aplikasi

multimedia yang telah dibuat.

Adapun spesifikasi komputer yang digunakan penulis untuk

melakukan pengujian adalah sebagai berikut:

Processor Intel® Atom TM Pinetrail N450 1,66 Ghz.

Memory 1 GB

Graphic Card 384 MB

Harddisk 250 GB

Input Tools Mouse, Keyboard

Output Tools Monitor 10”, Speaker Active

Pengujian sistem ini dilakukan sebanyak 3 (tiga) kali. Setelah

dilakukan pengujian sebanyak 3 (tiga) kali tersebut, Pengembangan

Aplikasi Pembelajaran Ilmu Faraidh berbasis multimedia ini dapat berjalan

dengan baik.

Setelah aplikasi diterapkan dan dicoba oleh pengguna, maka

dilakukan evaluasi Aplikasi Pembelajaran Ilmu Faraidh Berbasis

Multimedia Interaktif. Evaluasi ini dilakukan kepada 30 (tiga puluh) orang

responden yang terdiri dari para siswa dan guru-guru.

Page 101: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

82

Hasil kuesioner dari evaluasi aplikasi E-Faraid ini dapat dilihat

pada tabel sebagai berikut :

Tabel 4.5 Hasil Kuesioner Evaluasi Aplikasi E-Faraid

Pertanyaan Jumlah

1. Apakah tampilan dari masing-masing layar menarik?

a. Ya

b. Tidak

20

10

2. Apakah Anda merasa bosan dengan tampilannya?

a. Ya

b. Tidak

0

30

3. Apakah ukuran layar yang digunakan sudah cukup?

a. Ya

b. Tidak

25

5

4. Apakah Anda mengalami kesulitan dalam penggunaannya?

a. Ya

b. Tidak

0

30

5. Apakah Anda perlu adanya penuntun dalam menggunakan aplikasi ini?

a. Ya

b. Tidak

7

13

6. Apakah materi yang disampaikan sudah cukup baik?

a. Ya

b. Tidak

25

5

Page 102: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

83

7. Anda merasa kesulitan dalam menggunakan CD interaktif ini?

a. Ya

b. Tidak

0

30

8. Menurut Anda perlukah adanya CD interaktif pembelajaran Faraid ini?

a. Ya

b. Tidak

30

0

Berdasarkan hasil dari kuesioner diperoleh beberapa poin penting

antara lain :

1. Aplikasi ini masih dianggap sesuatu hal yang baru bagi sebagian

responden.

2. Setelah melakukan tes sistem dari demo yang diberikan penulis

terhadap responden, dinyatakan bahwa program berjalan dengan baik.

3. Semua responden membutuhkan CD interaktif pembelajaran ilmu

Faraid ini untuk memudahkan dalam belajar.

4.3.6. Distribusi (Distribution)

Aplikasi pembelajaran ilmu Faraid berbasis multimedia ini diberi

nama E-Faraid. Aplikasi E-Faraid dapat dioperasikan dengan 2 (dua) cara,

yaitu cara otomatis dan cara manual. Cara pengoperasian secara otomatis

sangat mudah karena tidak perlu proses instalasi sebelumnya. Cukup

masukkan CD aplikasi ini ke CD atau DVD ROM maka script Autorun.inf

akan berjalan dan langsung membuka Halaman Intro. Sedangkan untuk

Page 103: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

84

pengoperasian secara manual, juga cukup praktis. Cara pengoperasiannya

dengan meng-klik ganda pada “E-Faraid.exe” maka akan terbuka

aplikasinya dan langsung menampilkan Halaman Intro.

4.4. Tampilan Halaman-Halaman Aplikasi Pembelajaran Ilmu Faraid

Berbasis Multimedia (E-Faraid)

4.4.1. Tampilan Halaman Intro

Gambar 4.27 Halaman Intro

Page 104: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

85

4.4.2. Tampilan Halaman Utama

Gambar 4.28 Halaman Menu Utama

4.4.3. Tampilan Halaman Materi Pelajaran

Gambar 4.29 Halaman Materi Pelajaran

Page 105: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

86

4.4.4. Tampilan Sub-Materi Pelajaran

Gambar 4.30 Halaman Sub-Materi Pelajaran

Page 106: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

87

BAB V

PENUTUP

5.1.Kesimpulan

Dari hasil penelitian dalam pembuatan skripsi ini, penulis mendapatkan

beberapa kesimpulan sebagai berikut :

1. Multimedia merupakan alat yang dapat menciptakan presentasi yang dinamis

dan interaktif yang mengkombinasikan teks, grafik, animasi, audio dan

gambar video, hingga bisa menampilkan materi pelajaran sekolah yang

tampak kaku apabila dipelajari secara biasa menjadi sesuatu yang

menyenangkan untuk dilakukan.

2. Dalam merancang pengembangan aplikasi E-Faraid ini penulis menerapkan

metode pengembangan sistem multimedia milik Luther dalam buku Sutopo

(2003) dengan 6 (enam) langkah atau tahapan. Metode ini terdiri dari langkah-

langkah perancangan aplikasi sebagai berikut; 1. Konsep, 2. Perancangan, 3.

Pengumpulan bahan, 4. Pembuatan, 5. Pengujian, 6. Distribusi.

3. Aplikasi pembelajaran ilmu Faraid berbasis multimedia ini dapat dibuat dan

diimplementasikan dengan menggunakan perangkat lunak Adobe Director

11.5. Kapasitas aplikasi ini 35 MB dan berupa CD interaktif.

Page 107: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

88

5.2.Saran

Dari pembahasan di atas, penulis mencoba memberikan saran semoga

dapat bermanfaat bagi pihak-pihak yang ingin mengembangkan aplikasi ini

kedepan, yaitu :

1. Di dalam aplikasi ini penulis masih kurang dalam pemberian contoh-contoh

kasus yang terjadi di masyarakat.

2. Aplikasi ini kalau bisa juga dikembangkan dengan menyertakan kalkulator

waris yang akan memudahkan siswa yang belajar untuk mencocokkan hasil

perhitungannya dengan hasil kalkulasi dari kalkulator waris.

3. Aplikasi ini juga bisa dikembangkan dengan menyertakan link-link Internet

yang menyediakan refrensi tentang ilmu Faraid.

4. Di dalam aplikasi ini penulis tidak menyertakan pendapat-pendapat dari para

ahli fikih yang berbeda dalam bidang ilmu Faraid.

Page 108: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

89

DAFTAR PUSTAKA

Al-Fauzan, Shaleh Fauzan, 1999, at-Tahqiqat al-Mardhiyah fi al-Mabahits al-

Fardhiyyah, Maktabah al-Ma’arif, Riyadh.

Andleigh, Prabhat K. Thakrar, Kiran. 1996. Multimedia System Design. Prentice-

Hall, Inc. USA.

Ash-Shabuni, Muhammad Ali, 1995, Pembagian Waris Menurut Islam, Gema

Insani Pers, Jakarta.

Efendi, Sofyan, 2005, Faraid Web, http://opi.110mb.com.

Giarratano, J. & Riley, G. 2005. Expert Sistem: Principles and Programming, 4th

Edition. PWS Publishing Company. Boston.

Hendratman, Hendi. 2008. The Magic of Macromedia Director. Penerbit

Informatika. Bandung.

Hofstetter, Fred T. 2001. Multimedia Literacy. McGraw-Hill Irwin. New York.

Jo. 2010. Usability of GUI for Multimedia.

http://www.sju.edu/jhodgson/guihome.html. Januari, 09, 2010, 23:02 WIB

Mardiyah, Dini. 2004. Aplikasi Pembelajaran Matematika Berbasis Multimedia.

FST UIN. Jakarta.

Mayer, Richard E and Roxana Moreno. 1997. A Cognitive Theory of Multimedia

Learning: Implications for Design Principles. UCLA. Santa Barbara.

McGloughlin, Stephen. 2001. Multimedia: Concepts and Practice. Prentice-Hall,

Inc. New Jersey, USA.

Pressman, Roger S. 2001. Software Enginering A Practitioner’s Approach Sixth

Edition. McGraw Hill. Canada.

Page 109: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

90

Qurotaayun, Muhammad. Pengembangan Aplikasi Pembelajaran Berbasiskan

Teknologi Video On Demand Pada Fakultas Sains dan Teknologi UIN

Syarif Hidayatullah Jakarta. Skripsi. 2008.

Scott, W. Ambler. 1998. User Interface Design And Tips. Cambridge University

Press. New York.

Sutopo, A. H. 2002. Analisis Dan Desain Berorientasi Objek. Penerbit Graha

Ilmu. Jakarta.

Sutopo, A. H. 2003. Multimedia Interaktif Dengan Flash. Penerbit Graha Ilmu.

Jakarta.

Suyanto, M. 2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing.

Penerbit Andi. Yogyakarta.

Suyanto, M. 2004. Analisa dan Desain Aplikasi Multimedia untuk Pemasaran.

Penerbit Andi. Yogyakarta.

Tim Peneliti dan Pengembangan Wahana Komputer. 2004. Pembuatan CD

Interaktif Dengan Macromedia Flash MX Profesional 2004. Salemba

Infotek. Jakarta.

Vaughan, Tay. 2006. Multimedia: Making It Work, Edisi 6. Penerbit Andi.

Yogyakarta.

Widianto, Rahmad. 2010. 129 Teknik Profesional Photoshop CS3. Elex Media

Komputindo : Jakarta.

Yung, Kok. 2005. 161 Teknik Profesional Flash MX 2004. Elex Media

Komputindo : Jakarta.

Page 110: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

91

Lampiran-Lampiran

Page 111: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

92

Lampiran 1 Lembar dan Hasil Wawancara

1. Wawancara dengan ustadz HM. Sahul Khuluq, Lc, guru mata pelajaran

Faraid di MA. Tarbiyatut Tholabah.

Apakah perangkat ajar mendukung pembelajaran individual?

Sangat mendukung. Perangkat ajar sangat mendukung pembelajaran individual.

Tetapi tidak semua perangkat ajar dapat mendukung pembelajaran individual,

tergantung dari perangkat ajarnya. Karena terkadang ada perangkat ajar yang tidak

menyajikan materi dengan baik dan lengkap. Jadi masih butuh tentor untuk

menggunakannya.

Apakah perangkat ajar bisa mengarahkan siswa untuk belajar sendiri?

Perangkat ajar ini memang bisa megarahkan siswa untuk belajar sendiri, tetapi hal

itu juga tergantung dari kompetensi siswanya itu sendiri.

Apakah perangkat ajar bisa meningkatkan hasil belajar?

Ya, pembelajaran dengan perangkat ajar dapat meningkatkan hasil belajar, tetapi

tergantung dari perangkat ajar itu, desainnya dapat mengarahkan siswa dalam

mempelajari sesuatu atau tidak. Jika tidak maka hasil belajar tidak akan

meningkat.

Apakah perangkat ajar bisa meningkatkan motivasi siswa dalam belajar?

Ya, perangkat ajar bisa meningkatkan motivasi siswa dalam belajar, tetapi lagi-

lagi tergantung dari perangkat ajar yang dibuat, apakah bisa meningkatkan

motivasi siswa dalam belajar.

Page 112: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

93

Perangkat ajar seperti apa yang tidak dapat meningkatkan motivasi dan

mengarahkan siswa dalam belajar?

Perangkat ajar yang tidak dapat meningkatkan motivasi dan mengarahkan siswa

dalam belajar yaitu perangkat ajar yang tidak didesain dan direncanakan dengan

baik, yaitu perangkat ajar yang menempatkan materi secara asal dan tidak realistis

hanya memindahkan isi buku ke komputer.

Apakah perangkat ajar dapat menolong siswa dengan kompetensi rendah?

Ya, perangkat ajar sangat mempengaruhi siswa dengan kompetensi rendah.

Karena dengan perangkat ajar dapat memotivasi siswa dan meningkatkan minat

siswa untuk belajar, sehingga hasil belajarnya pun ikut meningkat.

Bagaimana mendesain lay out perangkat ajar?

Dalam mendesain perangkat ajar sebaiknya :

1. Petunjuk-petunjuk penggunaan yang diberikan dalam perangkat ajar jelas.

Jangan sampai membuat bingung siswa yang menggunakan.

2. Pengaturan navigasi sebaiknya dibagi-bagi berdasarkan materi. Jangan mulai

dari materi pertama bisa langsung mengakses ke materi selanjutnya, karena

akan membingungkan siswa yang menggunakan perangkat ajar. Biar si

pengguna sendiri yang mengatur pelajaran apa yang ingin dia pelajari.

3. Untuk penyusunan soal-soal latihan dan tes, disesuaikan dengan contoh soal

yang diajarkan dalam perangkat ajar ini. Karena jika tidak sesuai, bila

pengguna menemukan kesulitan dalam menjawab akan kebingungan. Bila

soal-soal latihan dan tes sesuai dengan contoh soal maka jika terjadi kesulitan

pengguna bisa melihat dari contoh soal.

4. Untuk penyusunan suara. Suara atau musik yang digunakan jangan sampai

mengganggu proses belajar siswa, karena perhatian siswa sebagai pengguna

akan beralih dari materi dan malah memperhatikan audionya yang sejatinya

hanya sebagai pelengkap.

Page 113: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

94

Bagaimana strategi mengajar dengan bantuan media yang baik?

Pembelajaran dengan menggunakan media memang membantu siswa dengan

kompetensi rendah dalam meningkatkan motivasi dan hasil belajar tetapi akan

lebih baik jika diterapkan di sekolah. Sebaiknya pembelajaran tidak hanya

dilakukan dengan bantuan perangkat ajar saja, tetapi diselingi dengan kegiatan

belajar di kelas. Karena jika pembelajaran dilakukan dengan perangkat ajar terus

akan menimbulkan rasa bosan dari siswanya. Misalkan setelah dua pertemuan

belajar dengan perangkat ajar, pertemuan selanjutnya dilakukan di kelas dan diisi

dengan latihan-latihan soal yang berbeda dan lebih variatif dengan yang terdapat

pada perangkat ajar.

Apakah materi yang disajikan dalam perangkat ajar ini sudah lengkap?

Karena materi yang disajikan dalam perangkat ajar ini sudah sesuai dengan

standar kurikulum yang berlaku pada tahun pengajaran saat ini, saya anggap

materinya sudah lengkap.

Apakah materi yag disajikan dalam perangkat ajar ini sudah sesuai dengan kurikulum yang berlaku?

Ya, materi dalam perangkat ajar ini sudah sesuai dengan kurikulum yang berlaku

saat ini karena materi berlandaskan RPP untuk kurikulum saat ini, yaitu

kurikulum tingkat satuan pendidikan.

Apakah tampilan dari perangkat ajar ini sudah menarik?

Ya, tampilan dalam perangkat ajar ini sudah menarik karena disajikan dengan

warna-warna yang menarik dan dilengkapi juga dengan gambar-gambar dan audio

yang memperjelas dalam penyampaian materi.

Page 114: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

95

2. Wawancara dengan guru yang menggunakan perangkat ajar dalam

memberikan pengajaran kepada siswa.

Menurut anda apakah tampilan dari masing-masing perangkat ajar ilmu Faraid ini menarik?

Tampilan perangkat ajar ini menarik. Warna yang digunakan bagus. Dan yang

paling penting penyajian materinya jelas, itu yang membuatnya menarik.

Apakah anda merasa bosan dengan tampilannya?

Saya tidak merasa bosan dengan tampilannya.

Apakah anda mengalami kesulitan dalam menggunakan perangkat ajar ilmu Faraid ini?

Saya tidak mengalami kesulitan dalam menggunakan perangkat ajar ini, karena

saya sudah terbiasa menggunakan perangkat ajar.

Apakah perlu adanya penuntun dalam menggunakan perangkat ajar ini ?

Kalau saya atau siswa yang biasa menggunakan perangkat ajar tidak memerlukan

penuntun tetapi mungkin untuk siswa yang baru mengenal perangkat ajar perlu

adanya penuntun.

Apakah materi yang disampaikan jelas ?

Ya, materi-materi yang disajikan dalam perangkat ajar ini jelas dan tidak

membingungkan siswa.

Sulitkah belajar ilmu Faraid dengan perangkat ajar ini?

Belajar ilmu Faraid dengan perangkat ajar ini tidak sulit, malah baik untuk

dikembangkan karena kita tahu banyak kekurangan yang terjadi dalam

pembelajaran di kelas, dengan adanya perangkat ajar ini dapat membantu siswa

yang pemalu dan tidak aktif di kelas untuk mengulang pelajaran di rumah.

Page 115: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

96

Apakah perangkat ajar ini memudahkan siswa dalam mempelajari ilmu Faraid?

Ya, siswa lebih mudah mempelajari ilmu Faraid dengan perangkat ajar. Karena

kadang penyampaian materi di kelas tidak efektif sehingga siswa tidak mengerti

materi yang disampaikan dan untuk bertanya juga malu, dengan adanya perangkat

ajar ini siswa dapat mempelajari sendiri materi apa yang tidak dikuasainya dan

tidak perlu malu-malu bertanya juga tidak bergantung dengan guru. Jadi perangkat

ajar ini mendukung pembelajaran individual, dimana pembelajaran individual

dianjurkan dalam pendidikan.

Perlukah perangkat ajar ilmu Faraid ini?

Menurut saya perangkat ajar ini perlu ada dan lebih dikembangkan karena terbukti

meningkatkan hasil belajar dan motivasi siswa. Tetapi ada kendalanya juga, kan

ada sekolah yang tidak mempunyai fasilitas untuk memungkinkan belajar dengan

perangkat ajar. Fasilitas-fasilitas seperti lab komputer dan infokus. Komputer

yang ada di lab apakah sesuai dengan jumlah siswa dalam satu kelas, jadi satu

komputer satu siswa. Atau jika digunakan bersama-sama dengan guru apakah

tersedia infokus.

Apakah dengan adanya perangkat ajar ilmu Faraid ini proses belajar dan mengajar menjadi menyenangkan?

Ya, karena dengan menggunakan komputer siswa menjadi lebih tertarik. Kadang

kalau di kelas kan, ilmu Faraid masuk dalam pelajaran Fikih dan terdapat hitung-

hitungan di dalamnya, apalagi kalau gurunya dalam mengajar seram, suka marah

kalau siswa tidak mengerti juga. Dan belajar dengan perangkat ajar siapa yang

marah-marah kalau tidak mengerti juga, jadi dengan perangkat ajar siswa lebih

rileks belajarnya dan juga menyenangkan tidak harus bertemu guru yang killer.

Jadi, belajar dengan perangkat ajar dapat menghilangkan tekanan psikologis.

Page 116: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

97

Apakah perangkat ajar ilmu Faraid ini memudahkan anda dalam memberikan pelajaran kepada siswa?

Ya, perangkat ajar ini memudahkan saya dalam memberikan pelajaran kepada

siswa. Keunggulan-keunggulan yang dimiliki perangkat ajar ini membantu siswa

untuk memahami materi lebih cepat karena jika tidak mengerti siswa bisa belajar

sendiri, bisa latihan sendiri dan bisa tes akhir juga.

Page 117: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

98

Lampiran 2 Kuesioner Media Pembelajaran Ilmu Faraid

MEDIA PEMBELAJARAN ILMU FARAID BERBASIS MULTIMEDIA

Saya M. Agus Saifuddin, mahasiswa Universitas Islam Negeri (UIN) Syarif

Hidayatullah Jakarta, sedang melakukan penelitian mengenai perangkat ajar ilmu

Faraid yang saya buat. Untuk itu saya memerlukan data dari adik-adik untuk

penelitian ini. Mohon adik-adik bersedia mengisi kuesioner ini. Terima Kasih.

Nama :

Kelas :

Berikan tanda Checklist (√) pada jawaban yang anda pilih!

No. Pertanyaan Ya Tidak

1 Apakah tampilan dari masing-masing layar dalam perangkat

ajar ini menarik?

2 Apakah adik-adik merasa bosan dengan tampilannya?

3 Apakah adik mengalami kesulitan dalam menggunakan

perangkat ajar ilmu Faraid ini?

4 Apakah perlu adanya penuntun dalam menggunakan perangkat

ajar ini ?

5 Apakah adik mengerti dengan materi yang disajikan?

6 Apakah materi yang disampaikan jelas ?

7 Sulitkah belajar ilmu Faraid dengan perangkat ajar ini?

8 Apakah perangkat ajar ini memudahkan adik dalam

mempelajari ilmu Faraid?

9 Perlukah perangkat ajar ilmu Faraid ini?

Page 118: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

99

10 apakah dengan adanya perangkat ajar ilmu Faraid ini belajar

ilmu Faraid menjadi menyenangkan?

Page 119: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

100

Lampiran 3 Source Code

1. Tombol Mulai (Menuju halaman utama)

on mouseUp me go to "utama"

end on mouseEnter me

sprite(the currentspritenum).blend=100 puppetSound 3, member "quickpop"

end on mouseleave me

sprite(the currentspritenum).blend=80 end

2. Tombol Materi Pelajaran

on mouseEnter me set the member of sprite the currentSpriteNum to member "enter-ON" puppetSound 3, member "alienbt1"

end on mouseLeave me

set the member of sprite the currentSpriteNum to member "enter" end on mouseUp me

go to "materi" end

3. Tombol Soal-Soal Ujian

on mouseup me go movie "soal_ujian"

end

on mouseEnter me set the member of sprite the currentSpriteNum to member "enter-ON" puppetSound 3, member "alienbt1"

Page 120: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

101

end

on mouseLeave me set the member of sprite the currentSpriteNum to member "enter"

end

4. Tombol Tentang E-Faraid

on mouseEnter me set the member of sprite the currentSpriteNum to member "enter-ON" puppetSound 3, member "alienbt1"

end on mouseLeave me

set the member of sprite the currentSpriteNum to member "enter" end

on mouseUp me

go to "tentang" end

5. Tombol Materi Utama – Dasar Faraid

on mouseUp me go to "dasar"

end

6. Tombol Materi Utama – Syarat, Sebab, dan Penggugur Hak Waris

on mouseUp me go to "syarat"

end

7. Tombol Materi Utama – Ahli Waris Laki-Laki dan Perempuan

on mouseUp me go to "ahliwaris"

end

Page 121: PERANCANGAN DAN PEMBUATAN APLIKASI …repository.uinjkt.ac.id/dspace/bitstream/123456789/2964/1/M. AGUS... · perancangan dan pembuatan aplikasi ... m. agus saifuddin 2040 9100 2576

102

8. Tombol Materi Utama – Tingkatan Ahli Waris

on mouseUp me go to "tingkat"

end

9. Tombol Materi Utama – Bagian Pasti

on mouseUp me go to "bagpasti"

end

10. Tombol Materi Utama – Bagian ‘Ashabah

on mouseUp me go to "ashabah"

end

11. Tombol Materi Utama – al-Hajb

on mouseUp me go to "hajb"

end