LAPORAN SKRIPSI

MEDIA PEMBELAJARAN GHORIB DAN MUSYKILAT

BERBASIS MULTIMEDIA PADA TPQ BAITURROHMAN

Disusun Oleh

Nama : Ahmad Budi Purwanto

Nomor Mahasiswa : 12090688
Program Studi : Teknik Informatika
Jenjang : Strata 1

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER

EL RAHMA
YOGYAKARTA

2013
 INTISARI

MEDIA PEMBELAJARAN GHORIB DAN MUSYKILAT

BERBASIS MULTIMEDIA PADA TPQ BAITURROHMAN
Oleh
Ahmad Budi Purwanto
12090688

Al Quran memiliki peran penting dalam kehidupan manusia sedangkan ilmu tentang
membaca Al Quran yang baik dan benar tidak cukup hanya dengan mempelajari ilmu
tajwid yang contoh bacaannya sudah banyak ditemukan di masyarakat, tetapi juga
harus mengerti bacaan penting lainnya dalam Al Quran yaitu ghorib dan musykilat
dimana bacaan yang ada di dalamnya tidak sesuai dengan tulisannya dan harus
berhati-hati ketika membacannya.
Penelitian ini bertujuan untuk memberikan penjelasan kepada para santri tentang
materi yang mengandung bacaan-bacaan ghorib dan musykilat dalam Al Quran. Hal
ini ditampilkan dalam bentuk multimedia berupa teks, gambar dan suara mengenai
keterangan dan cara membacanya untuk memberikan kemudahan kepada para murid
dalam memahami materi yang disampaikan. Dalam media pembelajaran ini juga
terdapat evaluasi untuk mengetahui sejauh mana kemampuan seorang santri dalam
memahami materi-materi yang ada.
Media pembelajaran ghorib dan musykilat ini berbasis multimedia dan dibuat
menggunakan perangkat lunak yakni Adobe Flash CS5. Data yang ada dalam media
pembelajaran ini bersifat dinamis yakni terkoneksi database sehingga datanya bisa
diubah sewaktu-waktu dan untuk menggunakannya terlebih dahulu harus
mengaktifkan localhost dan MySQL pada komputer.

Kata kunci: ghorib, musykilat, media pembelajaran, multimedia.

1. Latar Belakang Masalah
Al Qur’an merupakan kalamullah yang diturunkan kepada Nabi Muhammad
SAW melalui Malaikat Jibril secara mutawatir serta membacanya adalah ibadah. Al-
Qur’an berisi ilmu pengetahuan, hukum-hukum, kisah-kisah, falsafah, akhlak,
peraturan-peraturan yang mengatur tingkah laku dan tata cara hidup manusia baik
sebagai makhluk individual maupun sosial, serta menjadi petunjuk bagi penghuni
langit dan bumi.
Mengingat begitu pentingnya Al Quran dalam kehidupan manusia, maka belajar
membaca, memahami, menghayati, dan mengamalkan isi kandungan Al Quran dalam
kehidupan sehari-hari adalah sebuah kewajiban bagi seorang muslim. Firman Allah
dalam QS. Al Muzzammil (73):4, “Dan bacalah Al Quran itu dengan tartil”.
Membaca Al Quran dengan baik dan benar sebagaimana Al Quran diturunkan adalah
kewajiban setiap muslim. Akan tetapi kenyataannya masih banyak anak-anak, orang
dewasa, bahkan orang tua yang belum bisa membaca Al Quran dengan benar . Beberapa
faktor penyebabnya antara lain metode pengajaran yang kurang tepat, guru yang
kurang memadai, media pembelajaran yang kurang mendukung atau pribadi itu
sendiri yang kurang menyadari pentingnya belajar Al Quran.
Perkembangan ilmu pengetahuan dan teknologi mempunyai dampak positif
terhadap berbagai bidang kehidupan, tak terkecuali untuk pembelajaran Al Quran.
Dengan sarana komputer di bidang pendidikan akan sangat membatu para kalangan
pengajar untuk menyampaikan pengajaran kepada para santrinya. Dengan adanya
tampilan grafis dan audio, komputer menjadi salah satu media pembelajaran yang
menarik dan mempermudah bagi santri untuk belajar Al-Qur an.
Ilmu bagaimana membaca Al Quran yang baik dan benar tidak cukup hanya
dengan mempelajari ilmu tajwid yang contoh bacaannya sudah banyak ditemukan di
masyarakat, tetapi juga harus mengerti bacaan penting lainnya dalam Al Quran yaitu
ghorib dan musykilat. Dalam materi ghorib dan musykilat dijelaskan tentang bacaan-
bacaan Al Quran yang tidak sesuai dengan tulisannya dan bacaan-bacaan yang harus
berhati-hati ketika membacanya. Banyak lafal dalam ayat-ayat Al Quran yang aneh
bacaannya. Maksud aneh adalah ada beberapa bacaan tulisan di dalam Al Quran yang
tidak sesuai dengan kaidah aturan membaca yang umum atau yang biasa berlaku
dalam kaidah bacaan bahasa arab.
Taman pendidikan Al Quran sebagai lembaga pendidikan yang mengajarkan
ilmu membaca Al Quran ternyata tidak semuanya lembaga tesebut telah mengajarkan
materi ghorib dan musykilat secara khusus. Beberapa taman pendidikan Al Quran
yang telah menggunakan metode pembelajaran yang tepat memang telah menerapkan
materi tersebut ke dalam kurikulumnya, namun hal itu hanya sebatas buku sebagai
media pembelajarannya. Seperti halnya yang terjadi pada Taman Pendidikan Al
Quran (TPQ) Baiturrohman, minimnya jumlah pengajar yang berkompeten dan
kurangnya media pembelajaran yang memadai menjadi faktor utama pendidikan
kurang berjalan dengan baik dan kualitas pengajaran yang semakin menurun. Tak
terkecuali dengan pengajaran materi ghorib dan musykilat dimana materi yang ada di
dalamnya banyak dijumpai bacaan-bacaan yang sulit untuk dimengerti, dilafalkan,
dan dihafalkan sehingga tidak sedikit santri yang mengalami kesulitan dalam
mempelajarinya. Hal tersebut tentunya akan menguras pikiran para santri dalam
belajar agar mampu menguasai semua materinya dengan baik. Media pembelajaran
yang memadai, menyenangkan dan bisa mempermudah santri sangat dibutuhkan
dalam mempelajari materi ghorib dan musykilat yang bermacam-macam bacaan,
keterangan, dan cara membacanya, akan tetapi hal tersebut belum tersedia disana,
sehingga kegiatan pembelajaran tersebut terasa sulit dan menjenuhkan bagi santri.
Berdasarkan latar belakang diatas, maka perlu adanya sebuah media
pembelajaran yang menarik dan mempermudah para santri untuk mempelajari
bacaan-bacaan ghorib dan musykilat dalam Al Quran serta mengetahui bagaimana
cara membacanya dengan baik dan benar. Oleh karena itu dalam penelitian kali ini
mengangkat judul “Media Pembelajaran Ghorib dan Musykilat Berbasis Multimedia
pada TPQ Baiturrohman”.
2. Landasan Teori
2.1 Pengertian Ghorib
Lafal gharib berasal dari bahasa Arab, yakni bentuk jamak dari gharibah yang
berarti asing atau sulit pengertiannya. Apabila dihubungkan dengan Al Qur’an maka
yang dimaksudkan adalah ayat-ayat Alqur’an yang yang sukar pemahamannya
sehingga hampir-hampir tidak dimengerti. (Baidan, 2005:267).
Banyak lafal dalam ayat-ayat Alqur’an yang aneh bacaannya. Maksud aneh
adalah ada beberapa bacaan tulisan Alqur’an yang tidak sesuai dengan kaidah aturan
membaca yang umum atau yang biasa berlaku dalam kaidah bacaan bahasa arab. Hal
ini menunjukkan adanya keistimewaan Alqur’an yang mengandung kemukjizatan
yang sangat tinggi, disinilah letak kehebatannya sehingga kaum sastrawan tidak
mampu menandinginya. Dari segi tulisan, mushaf yang kita terima ini tidak ada
masalah karena telah dipersatukan tulisannya oleh khalifah Usman. (Khan, 2008:100)
Hamzah (2003) berpendapat bahwa Gharib Al Qur'an adalah ilmu Al Qur’an
yang membahas mengenai arti kata dari kata-kata yang ganjil dalam al Qur’an yang
tidak biasa digunakan dalam percakapan sehari-hari. Sedangkan menurut Korcab
Metode Qiroati Kebumen (2003) dalam memudahkan pemahaman kepada santri
memberikan pengertian bahwa gharib adalah bacaan Al Quran yang tidak sesuai
antara tulisan dan cara membacanya, seperti tulisannya (Dibaca MAJREEHAA).
Sedangkan bacaan musykilat dalam Al Quran adalah bacaan yang harus hati-hati
dalam membacanya, seperti .
Menurut Baidan (2005:267) banyak faedah yang dapat dipetik dengan
mengetahui dan mempelajari ayat-ayat yang gharib antara lain sebagai berikut:
a. Mengundang tumbuhnya penalaran ilmiah. Artinya, mempelajari ayat-ayat yang
sulit dalam pemahamannya itu akan melahirkan berbagai upaya guna
memahaminya.
b. Mengambil perhatian umat. Dengan diketahuinya ke-gharib-an ayat-ayat Al quran,
maka terasa mendalam ketinggian bahasa yang dibawa oleh Al quran.
c. Memperoleh keyakinan eksistensi Al quran sebagai kalam ilahi. Dengan diketahui
maksud yang terkandung dalam ayat-ayat gharibat, maka akan diperoleh suatu
pemahaman yang mendalam dari ayat tersebut.

2.2. Media Pembelajaran

Kata media merupakan bentuk jamak dari kata medium yang dapat didefinisikan
sebagai perantara atau pengantar terjadinya komunikasi dari pengirim menuju
penerima. Menurut Association of Education and Communication Technology
(AECT) yang dikutip oleh Rohani (1997: 2) media adalah segala bentuk yang
dipergunakan untuk proses penyaluran informasi. Sedangkan menurut Arief
S.Sadiman (2003:6), pengertian media adalah perantara atau penghantar pesan dari
pengirim kepada penerima pesan. Menurut Azhar Arsyad (2003:3) yang mengutip
dari pendapat Gertach dan Ely, mengatakan bahwa media apabila dipahami secara
garis besar adalah manusia atau materi maupun kejadian yang membangun kondisi
yang membuat peserta didik mampu memperoleh pengetahuan, ketrampilan, atau
sikap.
Menurut Daryanto (2011:4), pada hakekatnya, proses belajar mengajar adalah
proses komunikasi, penyampaian pesan dari pengantar ke penerima. Pesan berupa isi
atau ajaran yang dituangkan ke dalam simbol-simbol komunikasi baik secara verbal
maupun nonverbal. Proses tersebut dinamakan encoding. Penafsiran simbolsimbol
komunikasi tersebut oleh peserta didik dinamakan decoding. Menurut Oemar
Hamalik (2008:154) belajar adalah perubahan tingkah laku berkat latihan dan
pengalaman. Belajar dalam hal ini harus dilakukan dengan sengaja, direncanakan
sebelumnya dengan struktur tertentu, agar proses belajar dan hasil-hasil yang dicapai
dapat dikontrol secara cermat.
Menurut Gagne dalam Arief S. Sadiman (2003:6) menyatakan bahwa media
pembelajaran adalah berbagai jenis komponen dalam lingkungan peserta didik yang
dapat merangsangnya untuk belajar. Sementara itu pendapat dari Briggs dalam Arief
S. Sadiman (2003:6) menyatakan bahwa media pembelajaran adalah segala alat fisik
yang dapat menyajikan pesan serta merangsang peserta didik untuk belajar,
contohnya adalah: buku, film, kaset, film bingkai.
Dari pendapat di atas dapat disimpulkan bahwa media pembelajaran merupakan
segala sesuatu yang bisa digunakan oleh seseorang untuk menyalurkan pesan dari
seseorang pengirim kepada penerima sehingga dapat merangsang fikiran, perasaan,
minat dan perhatian peserta didik sehingga terjadi proses belajar.

2.3. Multimedia
2.3.1.Sejarah Multimedia
Sejarah multimedia berawal dari teater, bukan komputer. Pertunjukan yang
memanfaatkan lebih dari satu medium disebut pertunjukan multimedia. Pertunjukan
multimedia mencakup monitor video, synthesized band dan karya seni manusia
sebagai bagian dari pertunjukan sistem multimedia dimulai akhir 1980-an dengan
diperkenalkan hyperard oleh apple tahun 1987, dan pengumuman oleh IBM tahun
1989 mengenai perangkat lunak audio visual connection (AVC), video adhapter card
bagi PS, hampir setiap pemasok perangkat keras dan lunak melompat ke multimedia.
Pada tahun 1994, diperkirakan ada lebih dari 700 produk dan sistem multimedia di
pasaran. (Suyanto, 2004)

2.3.2. Definisi Multimedia

Industri elektronika multimedia merupakan kombinasi dari komputer dan video
atau secara umum merupakan kombinasi tiga elemen yaitu suara, gambar, dan teks
atau multimedia kombinasi dari paling sedikit media input atau output dari data,
media ini dapat berupa audio (suara, musik), animasi, video, teks, grafik dan gambar.
(Suyanto, 2004).
2.3.3. Komponen Multimedia
Teks
Teks adalah elemen paling awal dan sederhana dalam multimedia, yang biasanya
mengacu pada kata, kalimat dan alenia atau segala sesuatu yang tertulis atau
ditayangkan. Sebagian besar multimedia menggunakan teks karena teks sangat efektif
untuk menyampaikan ide dan panduan kepada pengguna. Teks merupakan bentuk
data multimedia yang paling mudah disimpan dan dikenali, serta file teks merupakan
struktur yang sederhana. (Suyanto, 2003).

Gambar
Menurut Suyanto (2003) format file gambar yang digunakan dalam
multimedia terdiri dari :
a. PICT
Merupakan format file default Macintosh yang mampu untuk membuat objek
yang digambar secara bitmap maupun vektor.
b. BMP
Merupakan file format default Windows. Format ini mendukung RGB, Indexed
Colour, Grayscale dan Bitmap colour mode tetapi tidak mendukung alpha channel.
c. JPEG (Joint Photographic Experts Group)
Format grafik yang terkompresi, digunakan dalam tampilan foto dan gambar
secara kontinue, dapat mengendalikan kedalaman warna serta mempunyai
ukuran yang relatif kecil.
d. GIF (Grafic Interchange File)
Format file yang terkompresi yang dikembangkan oleh CompuServe.
e. TIFF (Tagged Interchange File Format)
Format file terkompresi yang digunakan di paket desktop publishing.
Kekuatan dari format ini adalah lebih fleksibel dari format gambar bitmap
yang didukung secara ritual oleh seluruh point, image editing dan aplikasi
kedalaman layout.
f. EPS (Encapsulated Post Script)
Merupakan format file yang digunakan dalam photoshop dapat memuat baik
gambar vektor maupun grafik.
g. PNG (Portable Network Graphics)
Merupakan format file terkompresi untuk menampilkan gambar pada World
Wide Web, mempunyai kemampuan menampilkan gambar 24 bit dan
menghasilkan latar belakang secara transparan.
h. PSD
Merupakan format file yang digunakan photoshop untuk menyimpan file
yang dibuat dan dimanipulasi. File PSD tidak dikompresi dan memuat
informasi tentang berbagai graphics layer yang ada tanpa sebuah file.

Animasi
Menurut Dhani (2003) animasi merupakan susunan gambar mati yang
dibuat efek sehingga seolah-olah tampak bergerak. Perbedaan movie dengan
animasi adalah animasi merupakan proses kejadiannya sedangkan movie
merupakan proses hasilnya.

Audio
Menurut Suyanto (2003) Format-format file suara (audio) terdiri dari:
a. MP3 (MPEG Audio Player 3)
File audio yang digunakan suatu codec untuk melakukan encoding dan decoding
suatu rekaman musik, dengan ekstensi *.mp3.
b. MIDI (Musical Instrument Digital Interface)
File audio yang digunakan untuk menyimpan instrument musik dengan
ekstensi *.mid.
c. DAT (Digital Audio Tape)
Format file yang menggunakan head yang diputar serupa dengan Video Tape
Recorder (VTR).
d. WAV (Waveform Audio)
Merupakan format file audio yang berbentuk digital, dapat dimanipulasi
dengan perangkat lunak PC multimedia.
Video
Menurut Suyanto (2003) format file dalam audio menurut terdiri dari :
a. Audio Video Interleave (AVI)
Merupakan format video dan animasi yang digunakan video untuk windows dan
berinteraksi.
b. Motion Overlay Video (MOV)
Format video dan animasi yang digunakan untuk Macintosh dan windows.
c. Motion Picture Expert Group (MPEG)
Skema kompresi dan spesifikasi format file video digital.
d. Shockwave
Merupakan format dari Macromedia Flash yang berekstensi, dikembangkan
oleh Macromedia Format Shockwave.
e. Real Video
Mempunyai ekstensi serta dikembangkan oleh real media.

2.4. Adobe Flash CS5

Adobe Flash CS5 memiliki beberapa kelebihan dengan fitur-fitur terbarunya
dimana software tersebut telah melakukan penambahan dan perubahan perintah
sehingga memudahkan penggunanya dalam mengelola animasi, seperti copy and paste
layer, mengatur skala objek saat mengubah ukuran stage, TLF tab rulers, tombol
controller untuk menjalankan animasi, kotak dialog publish setting baru, perubahan
panel properties, pengaturan visible simbol lewat panel property, mengunci tulang atau
pinning for IK bone, dan autorecover and auto save. (Madcoms, 2011: 2)

2.4.1. Halaman Awal Adobe Flash CS5

Madcoms (2011:2) menjelaskan bahwa langkah untuk menjalankan program
Adobe Flash CS5 adalah dengan menekan tombol Start > All Program > Adobe
> Adobe Flash Professional CS5 sehingga tampil Welcome Screen seperti yang
tampak pada gambar berikut :
 Gambar 1. Tampilan awal Adobe Flash CS5 (Madcoms, 2011:2)

Menurut Madcoms (2011:6) di dalam Jendela Welcome Screen tersedia empat

pilihan perintah untuk membuka Adobe Flash CS5, yaitu :
 Create From Template, berguna untuk membuka lembar kerja dengan template
yang tersedia dalam program Adobe Flash Professional CS5.5.
 Open a Recent Item, berguna untuk membuka kembali file yang pernah anda
simpan atau pernah anda buka sebelumnya.
 Create New, berguna untuk membuat lembar kerja baru dengan beberapa pilihan
script yang tersedia.
 Learn, berguna untuk membuka jendela bantuan yang berguna untuk mempelajari
perintah yang ada pada Adobe Flash Professional CS5.5
Berikut ini adalah bentuk tampilan jendela utama pada Adobe Flash CS5.

Gambar 2. Jendela utama Adobe Flash CS5 (Madcoms, 2011:6)

2.4.2. Istilah dalam Adobe Flash CS5

Berikut ini ditampilkan istilah yang sering digunakan dalam penggunaan Adobe
Flash CS5. (Madcoms, 2011:3)
Tabel 1. Istilah dalam Adobe Flash CS5
Istilah Keterangan

Stage Lembar kerja yang digunakan untuk menyusun objek atau

gerakan animasi
Timeline Sebuah panel yang menampilkan layer dan frame
Sebuah nama tempat yang digunakan untuk menampung satu
Layer gerakan objek, sehingga jika ingin membuat gerakan lebih dari
satu objek sebaiknya diletakkan pada layer yang berbeda
Frame Bagian dari layer yang diguankan untuk mengatur pembuatan
animasi
Keyframe Suatu tanda berbentuk lingkaran kecil yang digunakan untuk
membatasi suatu gerakan animasi
 Istilah Keterangan
Sebuah panel yang menampilkan perintah dari suat tombol yang
Properties
dipilih
Suatu perintah yang diletakkan pada suatu Keyframe atau objek
Actions Script
sehingga Frame atau objek tersebut akan menjadi interaktif
Suatu animasi yang dapat digabugkan dengan animasi atau objek
Movie Clip
yang lain
Perintah yang digunakan untuk menghilangkan isi dari suatu
Masking
layer dan isi layer tersebut akan tampak saat animasi dijalankan.

2.4.3. Komponen Kerja Adobe Flash CS5

Madcoms (20011:7) menjelaskan beberapa komponen kerja program Adobe

Flash Professional CS5.5 telah ditampilkan sebagai tampilan standart. Masih banyak
lagi komponen yang masih tersembunyi sehingga memerlukan perintah-perintah
tertentu untuk menampilkannya. Kita dapat mengatur komponen di dalam program
Adobe Flash Professional CS5.5 sesuai dengan yang kita inginkan. Berikut ini adalah
beberapa komponen kerja dari Adobe Flash Professional CS5.5:
Toolbox
Toolbox adalah sebuah panel yang menampung tombol-tombol yang berguna
untuk membuat suatu desain animasi mulai dari tombol seleksi, pen, pensil 3D
Rotate, dan lain-lain. Dalam daftar tabel berikut adalah simbol dan nama-nama
tombol di dalam Toolbox beserta fungsinya. (Madcoms, 2011:7)
Tabel 2. Daftar simbol toolbox
Simbol Nama Tombol Fungsi

Selection Tool Untuk menyeleksi objek

Untuk menyeleksi bagian objek untuk proses
Subselection Tool
editing
Free Transform
Untuk mengubah bentuk objek secara bebas
Tool
Simbol Nama Tombol Fungsi

Gradient Transform Untuk mengubah transformasi warna gradasi

Tool pada sebuah objek
Untuk melakukan rotasi 3D pada objek
3D Rotation Tool
berdasarkan sumbu X, Y dan Z
Untuk melakukan transformasi bentuk dan
3D Translation
posisi 3D pada simbil movie clip dengan
Tool
acuan tiga sumbu X, Y dan Z
Untuk menyeleksi objek dengan pola seleksi
Lasso Tool
bebas

Pen Tool Untuk menggambar objek

Add Anchor Point Untuk menambah titik anchor pada sebuah

Tool path
Delete Anchor
Untuk menghapus titik anchor
Point Tool
Convert Anchor Untuk mengubah sudut lancip dari sebuah path
Point Tool menjadi sudut lengkung

Text Tool Untuk mengetik teks dan paragraf

Line Tool Untuk menggambar objek garis lurus

Rectangle Tool Untuk menggambar objek kotak

Oval Tool Untuk menggambar objek oval atau lingkaran

Rectangle Primitive Untuk menggambar objek kotak dengan sudut

Tool yang dapat dilengkungkan
Oval Primitive Untuk menggambar objek lingkaran dengan
Tool berbagai variasi

Polystar Tool Untuk menggambar objek poligon dan bintang

Untuk menggambar dengan bentuk goresan

Pencil Tool
pensil
Simbol Nama Tombol Fungsi

Untuk menggambar dengan bentuk polesan

Brush Tool
kuas
Untuk menggambar dengan spray, yaitu
Spray Brush Tool
menyemprotkan warna atau simbol
Untuk menggambar corak dekorasi dengan
Deco Tool
menggunakan simbol grapis
Membuat animasi pertulangan dengan
Bone Tool
menambahkan titik sendi pada objek
Melakukan pengeditan dan modifikasi titik
Bind Tool
sendi dari Bone Tool
Untuk memberikan warna dan bentuk garis
Ink Bottle Tool
outline pada sebuah objek

Paint Bucket Tool Untuk memberi warna bidang objek

Untuk mengambil sampel warna dari sebuah

Eyedropper Tool
objek

Erasser Tool Untuk menghapus bidang objek

Hand Tool Untuk menggeser area lembar kerja atau Stage

Untuk memperbesar atau memperkecil

Zoom Tool
tampilan lembar kerja atau stage

Stroke Color Untuk menentukan warna garis

Fill color Untuk menentukan warna bidang objek

Untuk mengubah warna garis dan bidang
Black and White
menjadi hitam dan putih
Untuk membalik warna antara warna garis dan
Swap Colors
warna suatu objek
Untuk mengaktifkan atau mematikan fungsi
Snap to Objects
Snap To Object
Timeline
Menurut (Madcoms, 2011:10) timeline berguna untuk menentukan durasi
animasi, jumlah layer, frame, menempatkan script dan beberapa keperluan animasi
lainnya. Semua bentuk animasi yang akan dibuat, diatur dan ditempatkan pada layer
dalam timeline. Berikut ini adalah gambar timeline dan komponen yang ada
didalamnya.

Gambar 3. Timeline Adobe Flash CS5 (Madcoms, 2011:10)

Tabel berikut adalah nama dan keterangan-keterangan dari gambar di atas.

(Madcoms, 2011:11)
Tabel 3. Nama dan keterangan gambar timeline
Abjad Nama Keterangan
Lembar kerja yang menampung objek yang akan
A Layer
dianimasikan di dalam Timeline
Tabulasi dari lembar kerja atau stage yang sedang
B Timeline
dikerjakan
Show/Hide All Untuk menyembunyikan atau menampilkan semua isi
C
Layers layer
Lock/Unlock Untuk mengunci atau melepas kunci objek dari semua
D
All Layers layer
Show All layers Untuk menampilkan objek pada semua layer dalam
E
as Outlines bentuk outline
Abjad Nama Keterangan
Jarum untuk membaca Frame pada saat animasi
F Playhead
dijalankan
Blank Sebuah simbol lingkaran kosong yang menampung
G
Keyframe suatu objek
Suatu bagian dari layer yang digunakan untuk
H Frame
mengatur pembuatan animasi
Collapse to
I Untuk melipat dan menutup jendela Timeline
icons & Close
J Menu Untuk mengatur tampilan Frame
K New Layer Untuk menambah layer baru
L New Folder Untuk menambah folder baru
M Delete Untuk menghapus layer
Menunjukkan bahwa layer dalam kondisi terpilih atau
N Simbol Pensil
aktif
Titik Show or Klik untuk menampilkan atau menyembunyikan layer
O
Hide aktif
Klik untuk menampilkan atau menyembunyikan layer
P Titik Kunci
aktif
Klik atau menampilkan objek dalam layer aktif
Q Kotak Outline
menjadi bentuk outline
R Controller Tombol yang digunakan untuk mengontrol animasi
Tombol yang digunakan untuk mengaktifkan
S Loop
pengulangan animasi
Onion Skinning
T Untuk mengatur tampilan animasi di dalam Stage
Button
U Current Frame Menunjukkan posisi Frame aktif
Untuk mengatur kecepatan gerak animasi dalam tiap
V Frame Rate
detiknya
W Elapsed Time Menunjukkan durasi atau lamanya animasi
Stage
Menurut Madcoms (2011:12) stage adalah lembar kerja yang digunakan untuk
membuat atau mendesain objek yang akan dianimasikan. Objek yang dibuat dalam
lembar kerja dapat berupa objek vector, movie clip, text, button atau yang lainnya.

Gambar 4. Stage atau lembar kerja (Madcoms, 2011:12)

Tabel di bawah ini adalah nama dan keterangan-keterangan dari gambar stage di atas :
Tabel 4. Nama dan keterangan gambar stage (Madcoms, 2011:13)
Abjad Keterangan
A Stage, lembar kerja untuk menyusun objek yang akan dianimasikan
B Scene, menunjukkan nama scene yang aktif
Panah yang digunakan untuk berpindah dari lembar kerja simbol ke
C
lembar kerja utama
D Edit Scene, untuk memilih nama scene yang akan diedit
E Edit Symbols, untuk memilih nama simbol yang akan diedit
F Zoom, untuk mengatur besarnya tampilan stage atau lembar kerja.

Panel Properties
Panel properties adalah panel yang menampilkan perintah dari sebuah tombol
yang terpilih sehingga dapat melakukan modifikasi dan memaksimalkan fingsipiranti
tersebut. (Madcoms, 2011:13)
 Gambar 5. Panel properties (Madcoms, 2011:13)
Panel Color
Panel Color digunakan untuk memodifikasi warna pada objek terpilih. Panel
Color meyediakan dua pilihan warna yaitu warna solid dan warna gradasi. (Madcoms,
2011:15)

Gambar 6. Panel color (Madcoms, 2011:15)

Panel Action
Menurut Madcoms (2011:14), Panel Action digunakan untuk menuliskan perintah
ActionScript saat membuat animasi interaktif. Dengan perintah ActionScript
seseorang dapat membuat animasi lebih hidup dan menarik. Untuk membuka Panel
Actions, klik tulisan Action yang ada pada jendela panel atau dengan memilih menu
Windows lalu pilih Action atau dengan menekan tombol F9 pada keyboard.

Gambar 7. Panel Action (Madcoms, 2011:15)

2.4.4. ActionScript

Salah satu kelebihan Adobe Flash CS 5 dibanding perangkat lunak animasi yang
lain yaitu adanya ActionScript. Menurut Ferry Herlambang (2007), ActionScript
adalah bahasa pemrograman Adobe Flash CS5 yang digunakan untuk membuat
animasi atau interaksi. Sedangkan menurut Madcom (2011:164), ActionScript adalah
suatu perintah yang dapat menghasilkan aksi atau gerakan pada obyek. Dengan
perintah ini seseorang dapat membuat animasi yang interaktif sehingga lebih menarik
bagi penikmat animasi.

Menurut Syarif dkk (2008), sama dengan bahasa pemrograman yang lain,
ActionScript berisi banyak elemen yang berbeda serta strukturnya sendiri. Kita harus
merangkainya dengan benar agar ActionScript dapat menjalankan dokumen sesuai
dengan keinginan. Jika tidak merangkai semuanya dengan benar, maka hasil yang
didapat kan akan berbeda atau file flash tidak akan bekerja sama sekali.
ActionScript juga dapat diterapkan untuk action pada frame, tombol, movie clip,
dan lain-lain. Action frame adalah action yang diterapkan pada frame untuk
mengontrol navigasi movie, frame, atau objek lain-lain.

2.5 Basis Data (Database)

Pengertian basis data menurut adalah kumpulan data yang terhubung satu sama
lain secara logikal dan deskripsi data itu dirancang untuk memenuhi kebutuhan
informasi dari sebuah organisasi. Basis data digunakan sebagai tempatpenyimpanan
data yang secara simultan digunakan oleh banyak departemen dan pengguna. Semua
data terintegrasi dengan jumlah yang minimum. Basis data tidak hanya dijumpai oleh
satu departemen tetapi di-share oleh beberapa sumber lainnya (Connolly, 2005:15).
Menurut McLeod dkk (2004:196) database adalah suatu sistem penyimpanan
informasi yang terorganisasi secara komputer sehingga memudahkan pemakai dalam
pengolahan dan penggunaannya. Sedangkan menurut Kustiyahningsih (2010), basis
data adalah sekumpulan informasi yang diatur agar mudah dicari. Dalam arti umum
basis data adalah sekumpulan data yang diproses dengan bantuan komputer yang
memungkinkan data dapat diakses dengan mudah dan tepat, yang dapat digambarkan
sebagai aktivitas dari satu atau lebih organisasi yang berelasi.

2.6 Normalisasi
Normalisasi adalah suatu teknik dimana digunakan untuk mengidentifikasikan
hubungan antara atribut dengan memberikan kebutuhan data yang diperlukan oleh
suatu perusahaan. Normalisasi merupakan sebuah teknik untuk memproduksi satu set
hubungan dengan sifat yang diinginkan, memberikan kebutuhan data pada
perusahaan. ( Connolly dan Begg, 2010:416)
Bentuk-bentuk normalisasi menurut Connolly dan Begg, (2010, p.430-438)
antara lain:
1. Unnormalized Form (UNF)
Merupakan sebuah tabel awal yang belum ternormalisasi yang berisikan satu atau
lebih kumpulan data yang berulang. Untuk membuat tabel UNF yaitu dengan
memindahkan data dari sumber informasi yang di dapat ke dalam tabel dengan format
baris dan kolom, jika ada atribut yang mempunyai banyak nilai (multivalue) akan
masuk ke dalam bentuk UNF.
2. First Normal Form (1NF)
Bentuk normalisasi tahap pertama yang merupakan sebuah relasi dimana sebuah titik
pertemuan antara setiap baris dan kolom yang berisi satu dan hanya satu nilai.
3. Second Normal Form (2NF)
Tahapan kedua setelah 1NF terpenuhi yaitu 2NF dimana merupakan sebuah relasi
yang terdapat di dalam 1NF dan setiap atribut yang bukan primary key bergantung
pada primary key.
4. Third Normal Form (3NF)
Merupakan tahapan ketiga dalam normalisasi dimana sebuah relasi yang terdapat
pada bentuk normalisasi pertama dan kedua, yang mana atribut primary key
bergantung pada primary key.

2.7 MySQL
Menurut Luke Welling dan Laura Thomson (2001:208) MySQL adalah sebuah
software yang open source. MySQL adalah suatu sistem manajemen database. Untuk
menambahkan, mengakses, dan memproses data yang tersimpan pada suatu database
komputer diperlukan sistem manajemen database seperti MySQL. Karena komputer
sangat unggul dalam menangani sejumlah besar data, sistem manajemen database
memainkan suatu peranan yang peting dalam komputansi, baik sebagai utility stand-
alone maupun bagian dari aplikasi lainnya.
Menurut Didik Dwi Prasetyo (2002), MySQL adalah jenis database yang sangat
populer dan digunakan pada banyak website di internet sebagai bank data
(Madcoms). MySQL dikembangkan sekitar tahun 1994 oleh sebuah perusahaan
pengembangan software dan konsultan database bernama MySQL bernama MySQL
AB yang bertempat di Swedia. Pengambilan nama MySQL sampai saat ini masih
belum jelas asal-usulnya. Ada yang berpendapat nama My diambil dari huruf depan
dan belakang Monty, tetapi ada juga yang berpendapat nama itu diambil dari putri
Monty yang kebetulan juga bernama My.
Paranginangin (2006) berpendapat bahwa MySQL merupakan salah satu
Relational Database Management System (RDBMS) yang mendukung database yang
terdiri dari sekumpulan relasi atau tabel. MySQL sangat cocok untuk bekerja
bersama-sama dengan PHP. Secara umum, database berfungsi sebagai tempat atau
wadah untuk menyimpan, mengklasifikasikan data secara prefosional. MySQL
bekerja menggunakan SQL Language (Structure Query Language). Itu dapat
diartikan bahwa MySQL merupakan standar penggunaan database di dunia untuk
pengolahan data. MySQL termasuk jenis RDBMS (Relational Database Management
System). Sedangkan RDBMS sendiri akam lebih banyak mengenal istilah seperti
tabel, baris, dan kolom digunakan dalam perintah-perintah di MySQL. MySQL
merupakan sebuah basis data yang mengandung satu atau sejumlah tabel. Pada
umumnya, perintah yang paling sering digunakan dalam mySQL adalah select
(mengambil), insert (menambah), update (mengubah), dan delete (menghapus).
Selain itu, SQL juga menyediakan perintah untuk membuat database, field, ataupun
index guna menambah atau menghapus data.

2.8 PHP
Menurut Janer Simarmata (2006:30) adalah bahasa (Scripting language) yang
dirancang secara khusus untuk penggunaan pada Web. PHP adalah tool untuk
pembuatan halaman web dinamis. PHP kependekan untuk HyperText Preprocessor.
Pada awal perkembangan oleh Rasmus Leodrof, dia menyebutkan sebagai tools
Personal Home Page. PHP (Hypertext Preprocessor) merupakan bahasa berbentuk
script yang ditempatkan dalam server dan akan diproses oleh server. Dan hasilnya
akan dikirimkan ke client menggunakan browser.
 Menurut Kadir (2002) PHP (Hypertext Preprocessor) merupakan bahasa
pemrograman berbasis Web. Bahasa ini memiliki kelebihan yaitu kompatibilitasnya
dengan berbagai macam jenis database serta dukungan dengan berbagai macam jenis
sistem operasi. PHP lebih cocok dan umum digunakan jika digabungkan dengan
database MySql. MySql dengan PHP seakan-akan dua hal yang tidak dapat
dipisahkan. Tentunya untuk dapat menggunakan keduanya dibutuhkan tingkat
kemampuan programming tertentu. Script dan PHP juga berkedudukan sebagai tag
dalam bahasa HTML. Konsep kerja dari PHP adalah sama dengan kode HTML,
hanya saja ketika berkas PHP yang diminta didapatkan dari web server, isinya segera
dikirimkan ke mesin PHP dan mesin inilah yang memproses dan memberikan
hasilnya yang berupa kode HTML ke web server. Lalu web server akan
menyampaikannya ke client melalui web browser.

2.9. Diagram Aliran Data (DAD) atau ( Data Flow Diagram/DFD)

Menurut Jogiyanto (2005 : 700) Data Flow Diagram (DFD) adalah diagram yang
menggunakan notasi-notasi berupa lingkaran dan anak panah untuk menggambarkan
arus dari data sistem. Diagram aliran data sering digunakan untuk menggambarkan
suatu sistem yang telah ada atau sistem baru yang akan dikembangkan secara logika
tanpa mempertimbangkan lingkungan fisik dimana data tersebut mengalir atau
lingkungan fisik dimana data tersebut akan disimpan. DAD merupakan alat yang
digunakan pada metodologi pengembangan sistem yang terstruktur (structured
Analysis and Design).
Ada beberapa tingkatan dalam pembuatan diagram aliran data, yaitu :
a. Diagram Konteks
Dimulai dengan diagram konteks yang merupakan level tertinggi (top level),
diagram yang menggambarkan hubungan antar system dengan entitas diluar system,
merupakan system secara keseluruhan.
b. Diagram Nol (Zero)
Merupakan proses-proses yang ada didalam system berupa pecahan dari diagram
konteks, diagram nol (zero) merupakan rincian dari diagram konteks.
c. Diagram Rinci/detail/primitive
Menggambarkan rincian tiap proses yang terdapat pada diagram nol, dimana
proses rinci ini dapat dipecahkan sampai pada proses yang paling rinci.
Ada beberapa simbol yang digunakan di DFD untuk maksud mewakili menurut
Jogiyanto, (2005:700) yaitu:
a. External entitity (Kesatuan luar) atau boundary (Batas sistem)
Setiap sistem pasti mempunyai batas sistem (boundary) yang memisahkan suatu
sistem dengan lingkungan luarnya. Sistem akan menerima input dan akan
menghasilkan output kepada lingkungan luarnya. Kesatuan luar (external entitity)
merupakan kesatuan (entity) di lingkungan luar sistem yang dapat berupa orang,
organisasi atau sistem lainnya yang berada di lingkungan luarnya yang akan
memberikan input atau menerima output dari sistem.
Suatu kesatuan luar dapat disimbolkan dengan suatu notasi kotak atau suatu
kotak dengan sisi kiri dan atasnya berbentuk garis tebal sebagai berikut:

Gambar 8. Simbol kesatuan luar

b. Data flow (Arus data),
Arus data di DFD di beri simbol dengan panah. Arus data ini mengalir diantara
proses, simpanan data dan kesatuan luar. Arus data ini menunjukan arus dari data
yang dapat berupa masukan untuk sistem atau hasil dari proses sistem.

Gambar 9. Simbol arus data

c. Process (Proses),
Kegiatan yang dilakukan oleh orang, mesin atau komputer dari hasil suatu arus
data yang masuk ke dalam proses untuk menghasilkan arus data yang akan keluar dari
proses atau dari input menjadi output.
 Ident
atau ifikas
i
Gambar 10. Simbol proses
Nam
d. Data store (Simpanan data). a
Simpan data merupakan simpanan data yang dapat prose
berupa file atau database di sistem
s
komputer, arsip atau catatan manual, kotak tempat data dimeja seseorang, tabel acuan
manual, agenda atau buku. Simpanan data di DFD dapat disimbolkan dengan
sepasang garis horizontal parallel yang tertutup di salah satu ujungnya, seperti
Gambar Data Store berikut ini:

Media Nama Data Store

Gambar 11. Simbol simpanan data

2.10 Flowchart
Bagan alir (flowchart) adalah bagan (chart) yang menunjukan hasil (flow)
didalam program atau prosedur sistem secara logika. Bagan alir digunakan terutama
untuk alat bantu komunikasi dan untuk dokumentasi (Jogiyanto, 2005:795).
Flowcart adalah bagan-bagan yang mempunyai arus yang menggambarkan
langkah-langkah penyelsaian suatu masalah. Flowcart merupakan cara penyajian dari
suatu algoritma (Ladjamuddin, 2006:225).
Menurut Jogiyanto (2005:796) ada lima macam flowchart, diantranya:
a. Bagan alir sistem (Sistems flowchart)
Bagan alir sistem (System flowchart) yaitu bagan yang menujukan arus pekerjaan
secara keseluruan dari sistem. Bagan menjelaskan urutan-urutan dari prosedure-
prosedure yang ada dalam sistem. Bagan alir sistem menunjukan apa yang dikerjakan
sistem. Bagan alir sistem digambar dengan simbol-simbol yang tampak pada tabel 3.1
 Tabel 5. Simbol flowchart sistem (Jogiyanto, 2005)
Gambar Nama Keterangan
Menunjukan dokumen Input dan
Dokumen Output proses manual, mekanik,
atau komputerisasi

Proses Manual Menunjukan Pekerjaan Manual

Simbol Proses Menunjukan kegiatan proses dari

Komputerisasi operasi program
File Hardisk/ Menunjukan input dan output
Database menggunakan hardisk
Menunjukan file non-komputer yang
Simpanan/ diarsip urut tanggal. A untuk
c n a Offine (alphabetical), N untuk (numerical)
dan C untuk (cronological)
Merupakan input data yang
Simbol Keyboard menggunakan online keyboard
Arus Dokumen/ Menunjukan arusa dari proses
Pemprosesan
Menunjukan tahapan pembuatan
Keputusan
keputusan
Menunjukan awal dan akhir dari
Terminal bagan alir dokumen
Menunjukan output yang
Display
ditampilkan di monitor
Jjhjhj
Nhbvjh]jhv Penjelasan Menunjukan penjelasan dari suatu
proses
Menunjukan penghubung ke
Connector halaman yang sama atau ke
halaman lain
Menunjukan input/output
Pita Magnetik
menggunakan pita magnetik
Menunjukan input/output yang
Kartu Plong menggunakan kartu plong
(punched card).

Pita Keras Menunjukan input/output

Berlubang menggunakan pita kertas
berlubang
 Gambar Nama Keterangan
Menunjukan operasi yang
Operasi Luar dilakukan di luar proses operasi
komputer
Hubungan Menunjukan proses trasmisi data
Komunikasi melalui channel komunikasi

b. Bagan alir dokumen (Document flowchart)

Bagan alir dokumen (document flowchart) atau disebut bagan alir formulir (form
flowchart) atau paperwork flowchart merupakan bagan alir yang menunjukan arus
dari laporan dan formulir termasuk tembusan-tembusannya. Bagan alir dokumen ini
menggunakan simbol-simbol yang sama dengan yang digunakan di dalam bagan alir
sistem.
c. Bagan alir skematik (schematic flowchart)
Bagan alir skematik (schematic flowchart) merupakan bagan alir yang mirip
dengan bagan alir sistem, yaitu untuk menggambarkan prosedur di dalam sistem.
Perbedaannya adalah bagan alir skematik menggunakan simbol-simbol bagan alir
sistem , juga menggunakan gambar - gambar komputer dan peralatan lainnya yang
digunakan. Maksud penggunaan gambar-gambar ini adalah untuk memudahkan
komunikasi kepada orang yang kurang paham dengan simbol-simbol bagan alir.
d. Bagan alir program (program flowchart)
Bagan alir program (program flowchart) merupakan bagan yang menjelaskan
secara rinci langkah-langkah dari proses program. Bagan alir program dibuat dengan
menggunakan simbol-simbol sebagai berikut ini.
 Tabel 6. Simbol flowchart program (Jogiyanto, 2005)

Gambar Nama Keterangan

Digunakan untuk menunjukan awal
Terminal
dan akhir dari suatu proses

Digunakan untuk suatu

Keputusan penyelesaian kondisi di dalam
program

Input/output Digunakan untuk mewakili data

input/output
Digunakan untuk menunjukan arah
Garis alir
dari proses

Dugunakan untuk menunjukan

Penghubung sambungan dari bagan alir yang
terputus di halaman yang masih
sama atau di halaman lainnya

Digunakan untuk menunjukan suatu

Proses terdefinisi operasi yang rinciannya ditunjukan
di tempat lain

Persiapan Digunakan untuk memberi nilai

awal suatu besaran

Proses Digunakan untuk mewakili suatu

proses

e. Bagan alir proses (Process flowchart)

Bagan alir proses (process flowchart) merupakan bagan alir yang banyak digunakan
teknik industri. Bagan alir juga berguna bagi anilis sistem untuk menggambarkan
proses dalam suatu prosedure. Bagan alir proses menggunakan lima buah simbol
tersendiri.
3. Perancangan Sistem
Secara umum tujuan dari perancangan sistem adalah untuk memberikan
gambaran secara umum kepada user tentang sistem yang baru. Rancangan sistem
secara umum mengidentifakasi komponen-komponen sistem yang akan dirancang
secara rinci. Perancangan dalam media pembelajaran ini berupaya menganalisa input
atau aliran data secara sistematis, memproses data, menyimpan data dan
menghasilkan output berupa tampilan informasi.

3.3. Rancangan Basis Data

3.3.1. Normalisasi
Bentuk Tidak Normal

Kategori
Judul
Bacaan
Uraian
Suara
Gambar
Keterangan
Gambar 12. Bentuk tidak normal
Dalam bentuk tidak normal ini, data-data dikumpulkan secara keseluruhandan
masih banyak terdapat field-field yang mengalami perulangan. Dalam bentuk tersebut
tidak ada aturan-aturan pengelompokan, sehingga terjadinya redundasi.

Bentuk 1 NF (Normal Pertama)

Dalam Bentuk Normal Pertama ini belum bisa dikatakan normal karena masih
ada tabel dengan atribut yang berulang. Untuk mengatasinya yaitu mencari
ketergantungan parsial dengan menjadikan field-field menjadi tergantung pada satu
atau beberapa field. Bentuk normal pertama ini terbentuk dari tabel materi dan dalam
hal ini yang dapat dijadikan kunci adalah id_kat dan id_materi.
 Tabel Materi
id_kat
kategori
id_materi
judul
bacaan
uraian
suara
nama_gbr
keterangan
Gambar 13. Bentuk normal pertama

Bentuk 2 NF (Normal Kedua)

Dalam bentuk ini sudah di tentukan kunci dari tiap-tiap tabel yang telah
terbentuk dari normal pertama dimana kunci field bersifat unik dan dapat mewakili
dari setiap field lain yang menjadi anggota dari tabel tersebut. Pada bentuk normal
kedua ini belum bisa dikatakan normal karena masih terdapat pengulangan field
sehingga perlu dipecah lagi.
kategori materi

* id_kat * id_materi
kategori ** id_kat
judul
bacaan
uraian
suara
nama_gbr
keterangan

Gambar 14. Bentuk normal kedua

Bentuk 3 NF (Normal Ketiga)

Dalam bentuk ini sudah di tentukan kunci dari tiap-tiap tabel yang telah
terbentuk dari normal pertama. Pada bentuk normal ketiga ini sudah tidak terdapat
pengulangan field-field sehingga tabel bisa dikatakan normal.
 kategori materi gambar

* id_materi * id_gambar
* id_kat * id_kat nama_gbr
kategori ** id_gambar keterangan
judul
bacaan
uraian
suara

Gambar 15. Bentuk normal ketiga

3.3.2. Relasi Antar Tabel

Pada tabel yang telah di rancang berupa file-file basis data, antara file yang satu
dengan yang lainya saling berhubungan. Untuk menghubungkan menghubungkan file
satu dengan file yang lainunya maka di perlukan suatu kunci tamu. Kunci tamu inilah
yang nantinya akan menjadi tanda penghubug antara file satu dengan file lainnya.
user kategori

* id_user * id_kat
nama kategori
alamat
nilai materi

soal * id_materi
** id_kat
* id_soal ** id_gambar
pertanyaan judul
a bacaan
b uraian
c suara
d
jawaban gambar

admin * id_gambar
gambar
username keterangan
password

Gambar 16. Relasi antar tabel

3.4. Diagram Alir Data (DAD)

Diagram Alir Data (DAD) Media Pembelajaran Ghorib dan Musykilat
mengambarkan proses-proses yang terjadi beserta alir datanya sebagai penjelasannya
terhadap terhadap sistem yang akan di kembangkan.
3.4.1. Diagram Konteks
Diagram Konteks berikut ini akan memberikan gambaran aliran data secara
umum sistem pengolahan data pada media pembelajaran ghorib dan musykilat.

Data materi Data user

Data gambar
Data soal
Data admin

Admin Media Pembelajaran User

Ghorib dan Musykilat

Data materi Data materi

Data gambar Data gambar
Data soal Data soal
Data user Data user

Gambar 17. Diagram konteks

3.4.2. Diagram Berjenjang
Diagram berjenjang di gunakan untuk mempersiapkan penggambaran DAD ke
level bawah. Di gambarkan dengan menggunakan notasi proses yang digunakan di
DAD.
0.0

Media Pembelajaran
Ghorib dan Musykilat

1.0 2.0 3.0

Input Evaluasi Tampilan

1.1 2.1 3.1

Data Materi Nilai Tampilan Materi

1.2
3.2
Data Gambar Tampilan
Gambar

1.3
3.3
Data Soal
Tampilan Soal

1.4

Data Admin 3.4

Tampilan User
1.5

Data User

Gambar 18. Diagram berjenjang

3.4.3 DAD Level 0 Media Pembelajaran
Data materi 1.0
Data gambar Data user
Admin Data soal User
Data admin
Input
Tampilan data materi
Tampilan data gambar
kategori Tampilan data soal
Tampilan data user
Data admin
admin
Data materi
materi
Data gambar
gambar
Tampilan data materi Data soal
soal
Tampilan data gambar
Tampilan data soal Data user
user
Tampilan data user

2.0
Data user
Evaluasi Data soal

Data nilai
user

3.0
Data user
Data soal
Tampilan Data gambar
Data materi

Gambar 19. DAD level 0 media pembelajaran

3.4.4. DAD Level 1 Proses Input

1.1
Data materi
Data materi materi
Admin Data Materi Kategori
kategori
Data gambar

1.2
Data gambar
Data Gambar Data gambar gambar

1.3
Data soal
Data soal
Data Soal soal

1.4
Data password Data Password
admin
Data Admin

1.5
Data user Data user
User user
Data User

Gambar 20. DAD level 1 proses input

3.4.5. DAD Level 1 Proses Evaluasi

2.1
soal Data soal
Data nilai
Nilai user
Data user
user

Gambar 21. DAD level 1 proses evaluasi

3.4.6. DAD Level 1 Proses Tampilan

Admin

3.1 Data kategori

Tampilan data materi
kategori
Data materi
Tampilan data materi Data Materi Data gambar materi

3.2
Tampilan data gambar
Data gambar
Tampilan data gambar Data Gambar gambar

3.3
Tampilan data soal
Data soal
Tampilan data soal Data Soal soal

3.4
Tampilan data user Data user
user
Tampilan data user Data User

User

Gambar 22. DAD level 1 proses tampilan

3.5. Flowchart
3.5.1. Flowchart Sistem

Input materi Input gambar Input soal Input user

Proses simpan Proses simpan Proses simpan Proses simpan

materi gambar soal user

kategori materi gambar soal user

Proses Proses tampilan Proses Proses

tampilan materi gambar tampilan soal tampilan user

Tampilan Tampilan Tampilan Tampilan

data materi data gambar data soal data user

Gambar 23. Flowchart sistem

3.5.2. Flowchart Program Halaman Utama

Mulai

Koneksi ke
database server

Koneksi
Tidak
sukses

Ya

Tampilkan menu
utama (petunjuk,
materi, profil, evaluasi)

Pilih menu Tampilkan Pilih menu

Ya Ya
petunjuk halaman petunjuk home

tidak
tidak

Pilih menu Tampilkan Pilih judul Tampilkan isi Pilih menu

Tidak Ya Ya Ya
materi halaman materi materi materi home

tidak tidak
tidak

Tampilkan Tampilkan
Pilih menu Pilih profil Pilih menu
Ya halaman profil Ya halaman profil Ya
profil dosen home
mahasiswa dosen

tidak tidak
tidak
tidak

Pilih menu Tampilkan Input data Pilih menu

Ya tidak Ya
evaluasi halaman evaluasi user home

Ya tidak
tidak

Proses simpan nilai Proses simpan data Tampilkan soal

Kerjakan soal
evaluasi user evaluasi
Keluar

Ya
Ya

Ya Tampilkan nilai
Ya Simpan nilai tidak Coba lagi tidak
evaluasi

Selesai

Gambar 24. Flowchart program halaman utama

3.5.3. Flowchart Program Halaman Admin
Mulai Input Login

Login
Tidak
sukses

Ya

Halaman utama
menu admin

Pilih menu Tampilkan data

Ya Save Ya
materi materi

tidak

Simpan data
Edit Ya
materi

tidak Ya
tidak

Konfirmasi Hapus data

tidak Delete Ya
hapus data materi

tidak

Pilih menu Tampilkan data

Ya Save Ya
ayat gambar ayat

tidak
tidak
Simpan data
Edit Ya
gambar ayat

tidak Ya
tidak

Konfirmasi Hapus data

tidak Delete Ya
hapus data gambar ayat

tidak

Pilih menu Tampilkan data

Ya Save Ya
soal soal

tidak

Edit Ya Simpan data soal

tidak Ya
tidak

Konfirmasi Hapus data

tidak Delete Ya
hapus data soal

tidak

Pilih menu Tampilkan data Konfirmasi

Ya Delete Ya
user user hapus data

tidak
tidak Hapus data
tidak Ya Simpan data user
user

Ubah Ubah
Ya Simpan password
password password

tidak

Keluar Ya Selesai

Gambar 25. Flowchart program halaman admin

3.6. Perancangan Input
Rancangan input merupakan sebuah halaman yang berisi perancangan untuk
melakukan input data pada sistem berupa sebuah tampilan desain yang terdiri dari
beberapa form.
3.6.1 Rancangan Form Login Administrator.
Dalam perancangan form login ini, tabel yang dibutuhkan adalah tabel admin.
Form login ini digunakan seorang admin untuk masuk dan menggunakan hak akses
sebagai admin.

Gambar 26. Rancangan form login admin

Form ini terdiri dari username dan password. Form username diisi nama user dari
seorang admin, sedangkan password diisi kata sandi yang bersifat rahasia. Tombol
login digunakan untuk masuk ke dalam halaman administrator sedangkan tombol
cancel untuk membatalkannya.
3.6.2 Rancangan Input Materi
Form ini berisi data materi yang terdiri dari judul, bacaan ( Dimuat dalam bentuk
gambar), uraian materi, suara bacaan dan gambar atau lokasi ayat Al Quran yang
mengandung bacaan ghorib atau musykilat dari materi yang bersangkutan dan
dipanggil dari tabel gambar.
 Gambar 27. Rancangan input materi

Tombol save digunakan untuk menyimpan data, tombol edit untuk mengubah
data dan tombol delete untuk menghapus data materi.

3.6.3 Rancangan Input Ayat

Pada form ini berisi data gambar ayat Al Quran yang terdiri dari inputan data
gambar dan keterangan. Form gambar ini berisi data nama file dari gambar yang
dipilih. Untuk menyimpannya klik tombol simpan.

Gambar 28. Rancangan input ayat

Tombol save digunakan untuk menyimpan data, tombol edit untuk mengubah
data dan tombol delete untuk menghapus data gambar ayat.

3.6.4 Rancangan Input Soal

Form input soal ini berisi data soal yang terdiri dari inputan pertanyaan, pilihan
jawaban a, b, c, dan d serta jawaban kunci. Untuk melakukan penyimpanan klik
tombol simpan.
 Gambar 29. Rancangan input soal
Tombol save digunakan untuk menyimpan data, tombol edit untuk mengubah
data dan tombol delete untuk menghapus data soal.

3.6.5 Rancangan Input User

Tampilan form ini terdapat pada halaman utama ketika user atau pengguna
hendak melakukan evaluasi latihan soal. Seseorang harus menginputkan nomor
induk, nama dan kelas sebagai identitas pengguna pada form ini.

Gambar 30. Rancangan input user

Tombol start digunakan untuk memulai mengerjakan soal-soal evaluasi yang
akan muncul pada halaman selanjutnya. Jika semua soal telah terjawab maka akan
muncul halaman nilai user dari hasil pengerjaannya dan terdapat pilihan untuk
menyimpannya atau tidak. Data user ini akan masuk ke dalam database manakala ia
mengeklik tombol simpan, namun jika tidak maka data user yang telah dimasukan
dan hasil evaluasi latihan soal yang telah dikerjakan tidak akan tersimpan.
4. Implementasi Program
Media pembelajaran ghorib dan musykilat ini berbasis multimedia yang
menyajikan materi-materi pelajaran berisi bacaan ghorib dan musykilat yang ada di
dalam Al Quran. Hal ini dikemas dalam bentuk teks, gambar dan suara dengan
harapan dapat meningkatkan minat dan ketertarikan para peserta didik dan siapapun
untuk mempelajari bacaan Al Quran terutama bacaan ghorib dan musykilat dalam
bentuk yang lebih menarik dan mudah dimengerti. Media pembelajaran ini juga
sangat tepat digunakan pada lembaga pendidikan seperti taman pendidikan Al Quran
maupun yang lainnya karena dapat membantu para guru dan ustadz dalam
menyampaikan materi dengan bantuan multimedia.

4.1 Persiapan Awal

Data yang ada dalam media pembelajaran ini bersifat dinamis yakni terkoneksi
database sehingga datanya bisa diubah sewaktu-waktu. Langkah yang harus
dilakukan untuk bisa menggunakannya adalah dengan cara mengaktifkan terlebih
dahulu localhost dan MySQL pada komputer kita dengan catatan database untuk
aplikasi ini sudah dibuat pada MySQL. Dalam hal ini software yang digunakan
adalah Wamp5 Versi 1.7.0, sedangkan untuk pembuatan programnya, software yang
digunakan adalah Adobe Flash CS5.
Dalam pembuatan programnya, sebaiknya pada langkah akhir disimpan dalam
format *.exe. Hal ini dimaksudkan agar semua komputer, baik yang memiliki Flash
Player maupun tidak, tetap bisa menjalankan program tersebut. Jika semua file
program telah tersedia dan database telah terhubung maka media pembelajaran
ghorib dan musykilat siap untuk digunakan.

4.2 Tampilan Halaman Utama

Halaman ini merupakan halaman utama dari media pembelajaran ini yang
ditujukan untuk para pengguna seperti santri, siswa, ataupun pengguna yang lain. Di
dalam halaman utama ini terdapat halaman intro, menu utama, petunjuk, materi,
profil, dan evaluasi.
4.2.1 Tampilan Halaman Intro
Halaman ini merupakan halaman yang pertama kali muncul ketika media
pembelajaran ghorib dan muykilat dijalankan. Tampilan dari halaman ini berupa intro
atau pembuka yang berisi animasi-animasi dan ditambah perpaduan suara untuk
mempercantik tampilan. Dalam halaman ini berisi tombol MULAI yang digunakan
untuk masuk kedalam halaman menu utama.

Gambar 31. Halaman intro

4.2.2 Tampilan Halaman Menu Utama

Halaman ini merupakan halaman menu utama dari media pembelajaran ghorib
muykilat ini yang berisi tombol-tombol menu yang terdiri dari empat menu utama
yaitu menu petunjuk, materi, profil, dan evaluasi, serta satu tombol silang yang
terdapat di pojok kanan bawah berfungsi sebagai tombol untuk keluar dari program
ini. Klik salah satu menu utama untuk membuka halaman menu yang diinginkan.
Halaman menu utama ini berisi animasi dan dilengkapi dengan backsound untuk
memperindah tampilan, begitupun dengan tombol menu utama juga dilengkapi
dengan audio sehingga ketika disorot maupun diklik maka tombol ini akan
mengeluarkan suara.
 Gambar 32. Halaman menu utama
4.2.3 Tampilan Halaman Materi
Halaman materi ini merupakan halaman yang berisi kumpulan materi yang ada
dalam program ini. Menu ini merupakan menu terpenting yang menerangkan bacaan
ghorib dan musykilat yang ada dalam Al Quran.

Gambar 33. Halaman materi

Halaman ini terdapat judul materi yang berada di sebalah samping kiri dan
berfungsi untuk menampilkan isi dari judul materi yang bersangkutan. Terdapat
pilihan kategori menu materi yaitu ghorib dan musykilat untuk mengelompokkan
materi apa saja yang termasuk bacaan ghorib atau musykilat. Adapun tombol home
yang berada di pojok kiri bawah digunakan untuk kembali ke halaman menu utama.
Isi halaman materi berupa judul, uraian, bacaan ghorib dalam bentuk gambar dan
suara bacaan. Untuk mendengarkan suara bacaannya klik tulisan bacaan arab yang
berada di atas dan jika ingin melihat gambar dan lokasi ayat dalam Al Quran klik
tombol lihat ayat yang berada di bagian bawah, maka akan tampak gambar ayat
beserta lokasi ayatnya dalam Al Quran. Untuk kembali ke halaman sebelumnya klik
tombol kembali.

Gambar 34. Halaman ayat Al Quran

4.3. Tampilan Halaman Admin

Halaman ini merupakan halaman yang hanya bisa diakses oleh seorang admin
yaitu seseorang yang memiliki hak untuk mengubah, menambah, maupun menghapus
data dari media pembelajaran ini.

4.3.1 Form Login Admin

Form login administrator adalah halaman yang pertama kali tampil ketika file
admin dari media pembelajaran ini dijalankan. Form login ini bertujuan untuk
mengamankan data yang ada di dalamnya sehingga hanya seseorang yang
mengetahui akun admin sajalah yang bisa masuk ke halaman ini.
 Gambar 35. Form login admin
Untuk dapat mengakses halaman ini maka pengguna harus memasukkan
username dan password dengan benar. Jika data yang dimasukkan salah atau data
form tidak diisi, maka akan tampil peringatan dan proses login untuk masuk ke
halaman utama tidak berhasil sampai seorang admin memasukan datanya dengan
benar sesuai database.
Seseorang yang telah berhasil masuk ke halaman admin, maka akan ditampilkan
menu utama yang berada disamping kiri dan terdiri dari menu user, soal, materi, dan
ayat. Di bagian bawah juga terdapat menu ubah password dan logout untuk keluar.

5.3.1 Tampilan Menu Data User

Tampilan menu user dari halaman admin ini berisi tentang data pengguna seperti
siswa, santri dan lain sebagainya yang telah melakukan evaluasi soal latihan ghorib
dan musykilat pada media pembelajaran ini. Halaman ini berisi data user yang terdiri
dari no induk, nama, kelas, dan nilai.
Pada menu ini hanya terdapat pilihan untuk menghapus data user, sehingga
seorang admin hanya bisa menghapus daftar user yang ada tanpa bisa menambah
maupun mengedit data user yang ada.
 Gambar 36. Halaman menu user
4.3.2 Tampilan Menu Materi
Tampilan menu materi dari halaman admin ini berisi tentang data materi ghorib
dan musykilat yang ada dalam media pembelajaran ini. Data materi pada halaman ini
terdiri dari judul materi, uraian, bacaan, suara, dan gambar ayat.
Pada halaman menu ini terdapat pilihan untuk menambah data, mengedit maupun
menghapus data materi. Tombol save di samping kiri berfungsi untuk menyimpan
data materi, tombol edit untuk mengganti dan tombol delete untuk menghapus data
materi yang dipilih.

Gambar 37. Halaman menu materi

 DAFTAR PUSTAKA

Ahmad, R., 1997. Media Intruksional Edukatif, Rineka Cipta, Jakarta.

Arsyad, A., 2003, Media pengajaran, Raja Grafindo Persada, Jakarta.
Baidan, N., 2005, Wawasan Baru Ilmu Tafsir, cet. 1, hal. 267, Pustaka Pelajar,
Yogyakarta.
Bin Ladjamuddin, A., 2006, Rekayasa Perangkat Lunak, cet-keII, Graha Ilmu,
Yogyakarta.
Connolly, T., and Begg, C., 2005, Database System: A Practical Approach to Design,
Implementation, and Management, 4th Edition, Addison Wesley, Harlow.
Daryanto, 2011, Ilmu Komunikasi 1, Satu Nusa, Bandung.
Dhani, Y., 2003, Panduan Lengkap Macromedia Flash MX 2004.Andi
Offset:Yogyakarta.
Diginnovac, Maulana, A., dan Nasution, K., 2008, Draw and Animate with Flash,
Elex Media Komputindo, Jakarta.
Hamalik, O., 2008, Kurikulum dan Pembelajaran. Bumi Aksara, Jakarta.
Hamzah, M., 2003, Studi Al-Qur'an Komprehensif. Gama Media, Yogyakarta.
Herlambang, F., 2007, Membuat Efek Khusus dengan ActionScript 2.0 Flash 8, PT
Elex Media Komputindo, Jakarta.
Jogiyanto H.M., 2005, Analisis & Desain, Ed ke-III, Andi Offset, Yogyakarta.
Kadir, A., 2002, Dasar Pemrograman Web Dinamis menggunakan PHP, Andi
Offset, Yogyakarta.
Khan, A.M., 2008, Praktikum Qira’at, cet. 1, hal. 100, Amzah, Jakarta.
Kustiyahningsih, Y., dan Anamisa, D.R., 2010, Pemrograman Basisdata Berbasis
Web Menggunakan PHP dan MySQL. Graha Ilmu, Yogyakarta.
Madcoms, 2011, Mahir dalam 7 Hari Adobe Flash CS5.5, Andi Offset, Yogyakarta.
McLeod, R. Jr., dan Schell, G., 2004, Management Information System. 9th Edition.
Pearson Education, Inc, New Jersey.
Nasihudin, A, 2003, Keterangan Ghorib dan Musykilat, Koordinator Pendidikan Al
Quran Metode Qiroati Cabang Kebumen, Kebumen.
Priyanto, H., Amarullah, A.M., dan Zaky, R., 2008, Making Educational Animation
Using Flash, Informatika, Bandung.
Sadiman, A.S., 2003. Media pendidikan, pengertian, pengembangan, dan
pemanfaatannya. Jakarta: CV. Rajawali.
Simarmata, J., dan Paryudi, I., 2006. Basis Data, Edisi Pertama, Andi Offset,
Yogyakarta.
Suyanto, M., 2003, Multimedia Alat untuk Meningkatkan Keunggulan Bersaing, Andi
Offset, Yogyakarta.
Suyanto, M., 2004, Analisis & Desain Aplikasi Multimedia untuk Pemasaran, Andi
Offset, Yogyakarta.
Welling, L., and Thomson, L., 2001, PHP and MySQL Web Development. Sams
Publishing, Indianapolis.