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

Layer Sebuah nama tempat yang digunakan untuk menampung satu

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

Properties Sebuah panel yang menampilkan perintah dari suat tombol yang

dipilih

Actions Script Suatu perintah yang diletakkan pada suatu Keyframe atau objek

sehingga Frame atau objek tersebut akan menjadi interaktif

Movie Clip Suatu animasi yang dapat digabugkan dengan animasi atau objek

yang lain

Masking Perintah yang digunakan untuk menghilangkan isi dari suatu

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

Subselection Tool

Untuk menyeleksi bagian objek untuk proses

editing

Free Transform

Tool Untuk mengubah bentuk objek secara bebas

Simbol Nama Tombol Fungsi

Gradient Transform

Tool

Untuk mengubah transformasi warna gradasi

pada sebuah objek

3D Rotation Tool

Untuk melakukan rotasi 3D pada objek

berdasarkan sumbu X, Y dan Z

3D Translation

Tool

Untuk melakukan transformasi bentuk dan

posisi 3D pada simbil movie clip dengan

acuan tiga sumbu X, Y dan Z

Lasso Tool

Untuk menyeleksi objek dengan pola seleksi

bebas

Pen Tool Untuk menggambar objek

Add Anchor Point

Tool

Untuk menambah titik anchor pada sebuah

path

Delete Anchor

Point Tool Untuk menghapus titik anchor

Convert Anchor

Point Tool

Untuk mengubah sudut lancip dari sebuah path

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

Tool

Untuk menggambar objek kotak dengan sudut

yang dapat dilengkungkan

Oval Primitive

Tool

Untuk menggambar objek lingkaran dengan

berbagai variasi

Polystar Tool Untuk menggambar objek poligon dan bintang

Pencil Tool

Untuk menggambar dengan bentuk goresan

pensil

Simbol Nama Tombol Fungsi

Brush Tool

Untuk menggambar dengan bentuk polesan

kuas

Spray Brush Tool

Untuk menggambar dengan spray, yaitu

menyemprotkan warna atau simbol

Deco Tool

Untuk menggambar corak dekorasi dengan

menggunakan simbol grapis

Bone Tool

Membuat animasi pertulangan dengan

menambahkan titik sendi pada objek

Bind Tool

Melakukan pengeditan dan modifikasi titik

sendi dari Bone Tool

Ink Bottle Tool

Untuk memberikan warna dan bentuk garis

outline pada sebuah objek

Paint Bucket Tool Untuk memberi warna bidang objek

Eyedropper Tool

Untuk mengambil sampel warna dari sebuah

objek

Erasser Tool Untuk menghapus bidang objek

Hand Tool Untuk menggeser area lembar kerja atau Stage

Zoom Tool

Untuk memperbesar atau memperkecil

tampilan lembar kerja atau stage

Stroke Color Untuk menentukan warna garis

Fill color Untuk menentukan warna bidang objek

Black and White

Untuk mengubah warna garis dan bidang

menjadi hitam dan putih

Swap Colors

Untuk membalik warna antara warna garis dan

warna suatu objek

Snap to Objects

Untuk mengaktifkan atau mematikan fungsi

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

A Layer Lembar kerja yang menampung objek yang akan

dianimasikan di dalam Timeline

B Timeline Tabulasi dari lembar kerja atau stage yang sedang

dikerjakan

C Show/Hide All

Layers

Untuk menyembunyikan atau menampilkan semua isi

layer

D Lock/Unlock

All Layers

Untuk mengunci atau melepas kunci objek dari semua

layer

E Show All layers

as Outlines

Untuk menampilkan objek pada semua layer dalam

bentuk outline

Abjad Nama Keterangan

F Playhead Jarum untuk membaca Frame pada saat animasi

dijalankan

G Blank

Keyframe

Sebuah simbol lingkaran kosong yang menampung

suatu objek

H Frame Suatu bagian dari layer yang digunakan untuk

mengatur pembuatan animasi

I Collapse to

icons & Close Untuk melipat dan menutup jendela Timeline

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

N Simbol Pensil Menunjukkan bahwa layer dalam kondisi terpilih atau

aktif

O Titik Show or

Hide

Klik untuk menampilkan atau menyembunyikan layer

aktif

P Titik Kunci Klik untuk menampilkan atau menyembunyikan layer

aktif

Q Kotak Outline Klik atau menampilkan objek dalam layer aktif

menjadi bentuk outline

R Controller Tombol yang digunakan untuk mengontrol animasi

S Loop Tombol yang digunakan untuk mengaktifkan

pengulangan animasi

T Onion Skinning

Button Untuk mengatur tampilan animasi di dalam Stage

U Current Frame Menunjukkan posisi Frame aktif

V Frame Rate Untuk mengatur kecepatan gerak animasi dalam tiap

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

C Panah yang digunakan untuk berpindah dari lembar kerja simbol ke

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.

atau

Gambar 10. Simbol proses

d. Data store (Simpanan data).

Simpan data merupakan simpanan data yang dapat berupa file atau database di sistem

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:

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

Ident

ifikas

i

Nam

a

prose

s

Media

Tabel 5. Simbol flowchart sistem (Jogiyanto, 2005)

Nama KeteranganGambar

DokumenMenunjukan dokumen Input dan

Output proses manual, mekanik,

atau komputerisasi

Menunjukan Pekerjaan Manual

Menunjukan kegiatan proses dari

operasi program

Menunjukan input dan output

menggunakan hardisk

Menunjukan file non-komputer yang

diarsip urut tanggal. A untuk

(alphabetical), N untuk (numerical)

dan C untuk (cronological)

Merupakan input data yang

menggunakan online keyboard

Menunjukan arusa dari proses

Menunjukan tahapan pembuatan

keputusan

Menunjukan awal dan akhir dari

bagan alir dokumen

Proses Manual

Simbol Proses

Komputerisasi

File Hardisk/

Database

Simpanan/

Offine

Simbol Keyboard

Arus Dokumen/

Pemprosesan

Keputusan

Terminal

c n a

Menunjukan output yang

ditampilkan di monitor

Menunjukan penjelasan dari suatu

proses

Display

PenjelasanJjhjhj

Nhbvjh]jhv

Pita MagnetikMenunjukan input/output

menggunakan pita magnetik

Menunjukan input/output yang

menggunakan kartu plong

(punched card).

Menunjukan input/output

menggunakan pita kertas

berlubang

Kartu Plong

Pita Keras

Berlubang

Menunjukan penghubung ke

halaman yang sama atau ke

halaman lain

Connector

Menunjukan operasi yang

dilakukan di luar proses operasi

komputer

Menunjukan proses trasmisi data

melalui channel komunikasi

Operasi Luar

Hubungan

Komunikasi

Nama KeteranganGambar

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)

Nama KeteranganGambar

Digunakan untuk menunjukan awal

dan akhir dari suatu proses

Digunakan untuk suatu

penyelesaian kondisi di dalam

program

Digunakan untuk mewakili data

input/output

Digunakan untuk menunjukan arah

dari proses

Dugunakan untuk menunjukan

sambungan dari bagan alir yang

terputus di halaman yang masih

sama atau di halaman lainnya

Digunakan untuk menunjukan suatu

operasi yang rinciannya ditunjukan

di tempat lain

Digunakan untuk memberi nilai

awal suatu besaran

Digunakan untuk mewakili suatu

proses

Terminal

Keputusan

Input/output

Garis alir

Penghubung

Proses terdefinisi

Persiapan

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.

id_kat

kategori

id_materi

judul

bacaan

uraian

suara

nama_gbr

keterangan

Tabel Materi

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.

materi

* id_materi

** id_kat

judul

bacaan

uraian

suara

nama_gbr

keterangan

kategori

* id_kat

kategori

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.

materi

* id_materi

* id_kat

** id_gambar

judul

bacaan

uraian

suara

gambar

* id_gambar

nama_gbr

keterangan

kategori

* id_kat

kategori

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.

soal

* id_soal

pertanyaan

a

b

c

d

jawaban

user

* id_user

nama

alamat

nilai materi

* id_materi

** id_kat

** id_gambar

judul

bacaan

uraian

suara

gambar

* id_gambar

gambar

keterangan

admin

username

password

kategori

* id_kat

kategori

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.

Media Pembelajaran

Ghorib dan Musykilat

Admin User

Data materi

Data gambar

Data soal

Data admin

Data materi

Data gambar

Data soal

Data user

Data user

Data materi

Data gambar

Data soal

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

Input

3.0

Tampilan

1.2

Data Gambar

1.1

Data Materi

1.3

Data Soal

1.4

Data Admin

3.2

Tampilan

Gambar

3.1

Tampilan Materi

3.3

Tampilan Soal

3.4

Tampilan User

2.0

Evaluasi

2.1

Nilai

1.5

Data User

Gambar 18. Diagram berjenjang

3.4.3 DAD Level 0 Media Pembelajaran

materi

gambar

soal

user

3.0

Tampilan

Admin UserData user

Tampilan data materi

Tampilan data gambar

Tampilan data soal

Tampilan data user

Data materi

Data gambar

Data soal

Data admin

Data materi

Data user

Data soal

Data gambar

1.0

Input

Data soal

Data gambar

Data materi

Tampilan data materi

Tampilan data gambar

Tampilan data soal

Tampilan data user

2.0

Evaluasi

Data user

Data soal

user

Data user

Data nilai

adminData admin

kategori

Gambar 19. DAD level 0 media pembelajaran

3.4.4. DAD Level 1 Proses Input

Admin

User

gambar

1.2

Data Gambar

1.3

Data Soal

1.1

Data Materi

1.5

Data User

Data materi

Data soal

Data gambar

materi

soal

user

Data materi

Kategori

Data gambar

Data soal

Data user Data user

1.4

Data Admin

Data passwordadmin

Data Password

kategori

Data gambar

Gambar 20. DAD level 1 proses input

3.4.5. DAD Level 1 Proses Evaluasi

2.1

Nilai userData nilaisoal

user

Data soal

Data user

Gambar 21. DAD level 1 proses evaluasi

3.4.6. DAD Level 1 Proses Tampilan

Admin

User

gambar

3.2

Data Gambar

3.3

Data Soal

3.1

Data Materi

3.4

Data User

Tampilan data materi

Tampilan data soal

Tampilan data gambar

materi

soal

user

Data materi

Data gambar

Data gambar

Data soal

Tampilan data user Data user

Tampilan data materi

Tampilan data gambar

Tampilan data soal

Tampilan data user

kategoriData kategori

Gambar 22. DAD level 1 proses tampilan

3.5. Flowchart

3.5.1. Flowchart Sistem

Input materi Input gambar

Proses simpan

materiProses simpan

gambar

gambarmateri

Proses tampilan

gambar

Proses

tampilan materi

Input user

Proses simpan

user

user

Proses

tampilan user

Input soal

Proses simpan

soal

soal

Proses

tampilan soal

Tampilan

data materi

Tampilan

data gambar

Tampilan

data soal

Tampilan

data user

kategori

Gambar 23. Flowchart sistem

3.5.2. Flowchart Program Halaman Utama

Mulai

Koneksi

sukses

Koneksi ke

database server

Tampilkan menu

utama (petunjuk,

materi, profil, evaluasi)

Pilih judul

materi

Ya

Tidak

Tampilkan

halaman petunjukYa

Pilih menu

petunjuk

Pilih menu

profil

Pilih menu

materi

tidak

tidak

Tampilkan

halaman materiYa Tidak

Pilih menu

homeYa

tidak

Ya

tidak

Tampilkan isi

materi

Pilih menu

homeYa

tidak

Pilih profil

dosen

Tampilkan

halaman profil

mahasiswa

Ya Ya

tidak

Tampilkan

halaman profil

dosen

Pilih menu

homeYa

tidak

Pilih menu

evaluasi

Input data

user

Tampilkan

halaman evaluasiYa tidak

tidak

Pilih menu

home

Ya

tidak

Kerjakan soalTampilkan soal

evaluasi

Proses simpan data

user

Ya

Tampilkan nilai

evaluasiSimpan nilai

Ya

tidak

tidak

Proses simpan nilai

evaluasi

Ya Coba lagi

Ya

tidak

Keluar

Selesai

Yatidak

Gambar 24. Flowchart program halaman utama

3.5.3. Flowchart Program Halaman Admin

Mulai

Login

sukses

Input Login

Halaman utama

menu admin

Ya

Tidak

Pilih menu

materi

Pilih menu

ayat

Tampilkan data

materiSaveYa

Ya

tidak

Ya Pilih menu

soal

tidak

Pilih menu

user

Ubah

password

Ya

Ya

tidak

Ya Keluar

tidak

tidak

Ya

tidak

Edit Ya

Delete

tidak

tidak

Simpan password

tidak

Selesai

Simpan data

materi

Konfirmasi

hapus data Ya

Hapus data

materi

tidak

Ya

Tampilkan data

gambar ayatSave Ya

tidak

Edit Ya

Delete

tidak

tidak

Simpan data

gambar ayat

Konfirmasi

hapus data Ya

Hapus data

gambar ayat

tidak

Ya

Tampilkan data

soalSave Ya

tidak

Edit Ya

Delete

tidak

tidak

Simpan data soal

Konfirmasi

hapus data Ya

Hapus data

soal

tidak

Ya

Tampilkan data

userDelete

Konfirmasi

hapus data

Hapus data

user

Ya

tidak

Simpan data usertidak Ya

Ubah

password

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.