BRYAN SETYA KUSUMA M3108084

commit to user

i TUGAS AKHIR

PEMBUATAN APLIKASI QUR’AN MULTIMEDIA STUDI KASUS TAFSIR AL MIZAN KARYA S.M.H THABATHABA’I

Diajukan Untuk Memenuhi Salah Satu S yarat Mencap ai Gelar Ahli M ad ya Program Diploma III Teknik Info rmatika

Disusu n Oleh :

BRYAN SETYA KUSUMA

NIM. M3108084

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

ABSTRACT

The Application Making of Multimedia Qur'an in Study Case of Al Mizan: Exegesis of Qur’an Masterpiece of S.M.H Thabathaba'i. Bryan Setya Kusuma

NIM M3108084. Informatics Dip loma Program Mathematics and Natu ral Sciences Faculty. UNS.

The Applications of Multimedia Qur'an was developed as an alternative method of society to learn Qur'an. This was due to the information obtained is now only found in the thick books that psychologically redu ce the interest of the public to review and understand Qur'an. This application was designed to co mplete the information of the stud y of Tafsir Al Mizan (Al Mizan: An Exegesis of Qu r’an) into Indonesian la nguage, which was previously presented in English.

The Applications of Multimed ia Qu r'an was created using Adobe Flash, the ActionScript programming language and using a XML database. ActionScript was a collection o f sets of actions, functions, events and event handlers which allow it to make a Flash movie which was more complex and more interactive. XML was a language that was built b y using tags to store the information.

The Aplicatio ns of Mu ltimedia Qur'an mad e had two main menu s including the menu of the Qu r'an to display su rah and verses of Qur’an and the menu of the Qur'an Index to d isplay the topics of Qur’an which was grouped in alphabetical order.

commit to user

v ABSTRAK

Pembuatan Aplikasi Qur’an Multimedia Studi Kasus Tafsir Al Mizan Karya S.M.H Thabathaba’i. Bryan Setya Kusuma NIM M3108084. Program Diploma III Jurusan Teknik Info rmatika, Fakultas M atematika d an Ilmu Pengetahuan Alam.

Aplikasi Qur’an Mu ltimedia ini dikembangkan sebagai metode alternatif masyarakat dalam belajar Al Qur’an. Ini disebabkan informasi yang diperoleh sekarang hanya terd apat pada buku -buku tebal yang secara psikologis mengu rangi minat masyarakat u ntuk mengkaji d an memahami Al Qu r’an. Aplikasi ini dibuat untuk melengkapi informasi stu di tentang Tafsir Al M izan ked alam Bahasa Ind onesia, yang sebelumnya disajikan dalam Bahasa Inggris.

Aplikasi Qur’an M ultimedia ini dibuat menggu nakan Adobe Flash, dengan bahasa pemrograman Action Script dan menggunakan database XML. ActionScript adalah sekumpulan koleksi set dari action, function, event dan event handler yang memungkinkan u ntuk membuat Flash movie yang lebih komplek dan lebih interaktif. XM L merupakan sebuah bahasa yang dibangun d enga n menggunakan tag untuk menyimp an informasi.

Aplikasi Qur’an Multimedia yang telah dibuat memiliki dua menu utama. Yaitu menu al-Qur’an u ntuk menampilkan surat-surat dan ayat-a yat al-Qur’an dan menu Indeks al-Qur’an untu k menampilkan istilah-istilah dalam al-Qur’an yang dikelompokkan sesuai d engan ab jadnya.

MOTTO

commit to user

vii HALAMAN PERSEMBAHAN

KATA PENGANTAR

Assalamualaikum Wr. Wb

Puji syukur serta ucapan terimakasih p enu lis panjatkan kehad irat Sang ADA atas limpahan karu nia, taufiq serta hida yah-Nya sehingga penulis d apat menyelesaikan penulisan laporan tu gas akhir d engan judul ” PEMBUATAN APLIKASI QUR’AN MULTIMEDIA STUDI KASUS TAFSIR AL M IZAN KARYA S .M.H THABATHABA’I ”.

Penulis mengucapkan terima kasih kep ada semua pihak yang tela h membantu dalam kegiatan Tu gas Akhir Ini. Ucapan terima kasih penulis dib erikan kepada :

1. Kepada Sang ADA yang menjadikan semua ini ada.

2. Kedua Orang Tua d an Saudara yang telah memberikan doa dan semu anya yang dibu tuhkan dalam kegiatan penulis.

3. Bapak Y.S. Palgunadi, M.Sc selaku Ketua Program Studi DIII Ilmu Komputer Fakultas Matematika da n Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

4. Bapak Didiek Sri W iyo no , S.T, M.T selaku dosen pembimb ing TA yang telah banyak memberikan pengarahan, dukungan moril dan saran.

5. S.M.H Thab athaba’i selaku pengarang buku Tafsir Al Mizan yang telah mengabdikan hidup dan ilmunya untuk menfasirkan Al Qur’an.

commit to user

ix

7. Semu a Saudara di Teknik Informatika B 2008 yang telah membantu semangat serta masukan sehingga lapo ran ini d apat selesai dengan baik.

Semoga lapo ran ini b ermanfaat bagi penulis khususnya dan bagi p embaca umumnya.

Wassalamulaiku m Wr. Wb

Surakarta, Juni 2011

DAFTAR ISI

Halaman

HALAM AN JUDUL... i

HALAM AN PERSETUJUAN... ii

HALAM AN PENGESAHAN... iii

ABSTRACT... iv

ABSTRAK... v

MOTTO... vi

HALAM AN PERSEMBAHAN... vii

KATA PENGANTAR... vii

DAFTAR ISI... x

DAFTAR GAM BAR...xii

BAB I PENDAHULUAN 1.1 Latar Belakang Masalah... 1

1.2 Perumusan Masalah... 2

1.3 Batasan Masalah... 2

1.4 Tujuan... 2

1.5 Manfaat... 2

1.6 Metodologi Penulisan... 3

1.7 Sistematika Penulisan... 3

BAB II LANDASAN TEORI 2.1 Tafsir Al Qur’an... 5

commit to user

xi

2.1.1 Elemen M ultimedia... 8

2.2 Adobe Flash... 9

2.2.1 Kompo nen / Tools pada Flash...10

2.2.2 ActionScript... 15

2.3 Adobe Photoshop... 17

2.3.1 M enjalankan Adobe Photoshop... 17

2.3.3 Lembar Kerja Photoshop CS2 ... 18

2.4 XML ( eXtensible Markup Langu age) ... 20

2.4.1 Struktur Dokumen XML ... 20

2.4.2 Deklarasi Optional XML ... 24

BAB III PERANCANGAN 1.1 Bagan Perancangan Aplikasi... 25

1.2 Perancangan Konsep... 26

1.2.1 Rancangan Tampilan Awal... 26

1.2.2 Rancangan Tampilan Menu Al Qur’an... 27

1.2.3 Rancangan Tampilan Menu Tafsir…... 28

1.2.4 Rancangan Tampilan Menu Index…... 29

1.2.5 Rancangan Tampilan Menu Index Abjad... 30

1.3 Pengumpulan Data……… …… …… …… …...30

1.4 Kebutuhan Hardwa re dan Software...31

1.5 Pembuatan Aplikasi..… ……… …… …… …...32

BAB IV IMPLEM ENTASI 4.1 Pembuatan Aplikasi… …...33

4.1.1 Pembu atan Obyek dan Background ...34

4.1.3 Pembu atan Tombol Navigasi…… .. ...36

4.1.4 Pemrograman dengan Actionscript…… ...36

4.2. Hasil Tamp ilan Aplikasi...38

4.2.1 Tampilan Halaman Intro dan Menu Utama… …...38

4.2.2 Tampilan Halaman M enu Al-Qur’an...39

4.2.3 Tampilan Halaman Tafsir...40

4.2.4 Tampilan Halaman Indeks...41

4.2.5 Co ntoh Tampilan Halaman Indeks Abjad...42

BAB V PENUTUP 5.1 Kesimpulan...4 3 5.2 Saran...43

commit to user

xiii DAFTAR GAMBAR

Halaman

Gambar 2.1 Lim a Elemen Multimed ia...8

Gambar 2.2 Tools pad a Flash…… …...11

Gambar 2.3 Stage pada Flash...12

Gambar 2.4 Property Inspector...12

Gambar 2.5 Panel...12

Gambar 2.6 Timeline…… …… …... 13

Gambar 2.7 Pla yhead ... 14

Gambar 2.8 Layer…… …...14

Gambar 2.9 Scene…… …… ... 15

Gambar 2.10 Membuka Adobe Photoshop CS2... 17

Gambar 2.11 Lembar Kerja Photoshop... 18

Gambar 2.12 Struktu r Dokumen XM L ... 21

Gambar 2.13 Contoh Struktur Dokumen XML... 22

Gambar 3.1 Bagan Perancangan Ap likasi....…... 24

Gambar 3.2 Rancangan Tampilan Awal…… …… …… …… ... 25

Gambar 3.3 Rancangan Tampilan Menu Al Qur’an…… … ... 26

Gambar 3.4 Rancangan Tampilan Menu Tafsir... 27

Gambar 3.5 Rancangan Tampilan Menu Index... 28

Gambar 3.6 Rancangan Tampilan Index Abjad... 29

Gambar 4.1 Tamp ilan P embuatan Objek dan Backgrou nd... 33

Gambar 4.2 Tamp ilan P embuatan Intro... 34

Gambar 4.4 Tamp ilan Halaman Intro d an Menu Utama... 37

Gambar 4.5 Tamp ilan Halaman Menu Al-Qur’an... 38

Gambar 4.6 Tamp ilan Halaman Tafsir…... 39

Gambar 4.7 Tamp ilan Halaman Ind eks... 40

commit to user

umunya dan khususnya bagi umat Islam.

Dalam usaha menggalakkan studi mengenal al-Quran, metode penunjang pembelajaran terus dikembangkan. Conto hn ya yaitu d engan mena yangkan pembelajaran al-Qur’an pada layar kaca atau televisi. Dalam praktiknya, p roses pembelajaran melalui metode ini keban yakan lebih bersifat satu arah saja dan terbatas dengan waktu penayangann ya. Sela in metode tersebut, metode lain yang paling sering d ilakukan adalah dengan menerbitkan buku-buku teb al pembelajaran al-Qur’an. Tidak jau h bed a dengan meto de sebelumnya, meto de ini masih terasa sulit untuk mengurangi banyaknya masyarakat khususnya u mat islam send iri yang kurang b erminat dalam mempelajari al-Qur’an. Karena secara psikologis metod e penyamp aian dalam bentuk buku-buku tebal akan mengurangi daya tarik masyarakat untu k belajar.

2

Pembuatan Aplikasi Qur’an Mu ltimedia Stud i Kasus Tafsir Al M izan Kar ya S.M .H Thab athaba’i ” sebagai judul Tugas Akhir.

1.2Perumusan Masalah

Berdasarkan uraian di atas, maka ru musan masalah dari penu lisa n ini ad alah adalah bagaimana mend esain, membangu n serta mengimplementa sikan suatu aplikasi berb asis multimedia seba gai media pembelajaran Al-Qur’an karya S.M .H Thab athaba’i.

1.3Batasan Masalah

Dengan ad anya p eru musan masalah yang telah d isebutkan, maka batasan masalahn ya adalah p embu atan aplikasi b erbasis multimedia sebagai media p embelajaran al-Qur’an karya S.M.H Thabathab a’i yang mencakup tafsir dan indeks al-Qur’an.

1.4Tujuan

Adapu n tujuan dari penyu sunan tugas akhir ini adalah memb uat aplikasi berbasis multimedia yang menarik bagi masyarakat untu k mempelajari kitab suci Al-Qur’an karya S.M.H Thabathaba’i yang mencakup tafsir dan indeks al-Qur’an.

. 1.5Manfaat :

Adapu n manfaat d ari penyu su nan tugas akhir ini, yaitu bagi :

a. Penulis :

commit to user

b. Pengguna :

Produ k Tugas Akhir yang dihasilkan diharapkan dap at memotivasi memud ahkan masyarakat dalam mempelajari dan memahami Al-Qur’an. Selain itu ju ga dapat dijadikan sebagai media pengajar dalam proses pembelajara n di lingkungan p end idikan.

1.6Metodologi Penelitian

Metodologi penelitian yang digunakan dalam penyusunan tu gas akhir ini dib agi menjadi beberapa tahap an. Tahapan-tahapan tersebut adalah sebagai beriku t:

a. Studi Pustaka

Metod e pengumpulan d ata dengan membaca buku-buku atau literatur yang ada hubungannya dengan permasalahan yang dijadikan ob yek tugas akhir.

b. Tahap Implementasi Sistem.

Pada tahap ini dimulai setelah tahap perancangan konsep dilakukan. Pada tahap ini dilakukan p embuatan program d an p embuatan antar muka sistem.

c. Tahap Pembuatan Laporan

Tahap ini dimulai sejalan dengan p embuatan aplikasi.

1.7Sistematikan Penulisan

BAB I : PENDAHULUAN

Pada Bab I mengu raikan mengenai latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, manfaat, metodo logi, sistematika p enulisan.

BAB II : LANDASAN TEORI

4

BAB III : P ERANCANGAN

Pada Bab III d ijelaskan mengenai perencanaan program mulai dari membu at perancangan konsep dan perancangan desain ap likasiagar bisa menjadi aplikasi pembelajaran interaktif.

BAB IV : IMPLEM ENTASI

Pada Bab IV akan menyajikan data-data pembuatan sekaligu s penjelasan dari program ap likasi yang telah dibuat berupa tampilan program.

BAB V : P ENUTUP

commit to user

5 BAB II

LANDASAN TEORI

2.1Tafsir Al Qur’an

At-Tafsir (tafsir), yaitu, menjelaskan arti dari ayat Al-Qur'an, menjelaskan impor dan mencari tahu maknanya, ad alah salah satu kegiatan akad emik yang paling awal d alam Islam (Thabathaba’i, 1998). Penafsiran Al-Qur'an dimulai dengan wahyu, sebagaimana jelas dari kata-kata Allah: Bahkan sebagaimana Kami telah mengu tus seo rang Rasul d i antara kamu dari antara kamu yang mengucapkan kepad a And a komunikasi kami dan menyucikan Anda dan mengajarkan Anda Kitab dan kebijaksanaan dan mengajarkan And a b ahwa yang Anda tidak tahu (QS Al Baqarah :151).

Secara garis besar berdasarkan metod e metode yang telah ada, pelajaran yang jelas dari al-Qur’an adalah seb agai berikut :

1. Hal-hal mengenai nama Allah, dan atribut-Nya, seperti hidup-Nya, Pengetahuan, Kekuatan, Penglihatan Pendengaran, dan Kesatuan dll. Seperti untuk PersoNya Allah, Anda akan menemukan bahwa Al-Qur'an percaya bahwa Dia tid ak membutu hkan penggambaran.

2. Hal-hal mengenai tindakan ilahi, seperti pencip taan, ketertiban, akan, ingin, p anduan, menyesatkan, kepu tusan, mengu kur, paksaan, delegasi (Power), kesenangan, ketidakse nangan d an tind akan serup a lainnya. 3. Hal-hal yang bersangkutan dengan link perantara antara Alla h dan manusia, sep erti Tirai, Tablet, Pena, Singgasana, Ketua, Gedu ng Dihuni, la ngit, bumi, para malaikat, para setan, jin dan lain-la in.

4. Rincian tentang manusia sebelum ia datang ke dunia ini.

6

6. Pengetahuan tentang manusia setelah ia berangkat d ari du nia ini, yaitu, al-Barzakh.

7. Hal-hal tentang karakter manusia. Di bawah judul ini datang berbagai tahap melalui mana teman-teman Allah lu lus dalam perjalanan spiritual mereka, seperti penyerahan, iman, kebajika n, kerendahan hati, kemurnia n niat dan kebajikan lainnya.

Sebagai akib at langsung dari meto de ini, kita tidak p ernah merasa ad a kebutuhan untuk menafsirkan suatu ayat terhad ap makna yang tampak jelas. Seperti yang telah kita katakan sebelumnya, ini jenis p enafsiran adalah misinterpretasi fakta. Adapun bahwa "interpretasi" yang Qur'an telah disebutkan dalam berbagai ayat, itu bukan tip e "makna", itu adalah sesuatu yang lain.

Pada penyu sunan program aplikasi tafsir ini diambil dari bu ku Tafsir Al Mizan karya Allam ah S.M .H Thabathaba’i untuk data tafsir tiap surat dalam Al Qur’an.

2.2Indeks Al-Qur’an

Pada umumnya kata ind eks berarti sederetan kata atau istilah penting yang disusun secara alfabetis pada akhir seb uah bu ku, yang memb erikan informasi mengenai halaman tempat kata atau istilah itu ditemukan.

Akan tetapi ind eks juga dap at berarti sedikit lain, terutama jika dihubungkan dengan Kitab Su ci seperti Indeks al-Qur’an. Tidak sekedar daftar kata yang memuat informasi mengenai halama n tempat kata atau istilah yam g ditemukan, melainkan berarti d aftar kata yang terdapat dalam Kitab Suci al-Qur’an, disertai kutipan naskah berupa p enggalan ayat yang me nga ndung kata itu, dan dilengkapi dengan keterangan no mor surat atau nomor ayatnya.

commit to user

dengan sedikit mengutak atik dunia semantik, pengertian indeks pu n – sejauh menyangkut Kitab Suci al-Qur’an – dapat meluas lagi, b ukan han ya sekedr konkordansi, karena ke nyataanya sekarang berkembang ind eks jenis lain yang tid ak dap at dikelompo kkan dengan p engertian indeks atau konkordansi termaksu d, d an untuk memudahkan pembatasan, kita sebut saja “klasifikasi”.vdengan kata lain, dalam masyarakat kita sekara ng berkembang du a macam indeks al-Qur’an, yang satu dapat disebut “konkordansi” d an yang lainnya populer dengan nama “ klasifikasi”. Perbedaan antara keduanya terletak d ari cara penggarapan dan model penggolongannya saja (Sahil, 1998).

Penyusu nan indeks pada ap likasi disusun secara alfabetis. Dimulai dari ab jad A sampai dengan abjad terakhir. M isalnya pada abjad A, akan b erisi susunan istilah yang dimulai dengan huruf A, yang terdapat di dalam setiap ayat – ayat al-Qur’an.

2.3 Pengertian Multimedia

Multimed ia memiliki pengertian. Dean (1996) menyatakan bahwa istila h mu ltimedia berasal d ari teater, yaitu pertunjukan yang memanfaatkan leb ih dari satu med ium di p anggung yang mencaku p monitor video, synthesized band, dan karya seni manusia sebagai bagian dari pertunjukan. Namun berbeda dengan pengertian multimedia seb elumnya (multi-med ia), istilah multimedia dalam hal ini berarti suatu sistem yang terdiri d ari perangkat keras, perangkat lunak dan alat-alat lain seperti televisi, monitor vodeo dan sistemv piringan optik atau stereo yang dimaksudkan u ntuk dapat menghasilkan sajian audio visual penuh (McLeod, 1996). Pengetian kedua mensyaratkan adanya sinkro nisasi beberapa media tasi dengan bantuan komputer, membed akannya dengan pengertian multimed ia yang pertama yang memanfaatkan b erbagai media ya ng terpisah dan berdiri sendiri (Fatah dan P eurwanto, 2010).

Beb erapa pakar mengartikan multimedia sebagai b eriku t :

8

2. Multimed ia adalah kombinasi dari paling sedikit 2 media input atau output dari data. Med ia ini dapat audio (musik), animasi, video, teks, grafik, dan gambar (Turban,dkk.,2002).

3. Multimed ia merup akan alat yang dapat menciptakan p resentasi dinamis dan interaktif yang mengombinasikan teks, grafik, animasi, audio, dan gambar video (Robin d an Linda, 2001).

4. Multimed ia adalah pemanfaatan kompu ter u ntuk membuat dan menggab ungkan teks teks, grafik, aud io, gambar bergerak (video dan animasi) dengan menggab ungkan link dan tool yang memungkinka n pemakai melakukan navigasi, b erkreasi, berinteraksi dan berkomunikasi(Hofstetter,2001).

2.1.1 Elemen Multimedia

Menurut Senn (1998), mu ltimedia terbagi dalam beberapa eleme n sep erti yang terlihat gambar d ibawah ini.

Gambar 2.1 Lima Elemen Multimedia Sumb er : Senn, 1998

Multimedia

Audio Image

Video Anim ation

commit to user

1. Text

Bentu k data multimedia yang paling mudah disimpan dan dikendalikan ad alah text (teks). Teks dapat membentuk kata, surat atau narasi dalam mu ltimedia yang men yajikan bahasa. Kebu tuhan teks bergantu ng pad a penggunaan ap likasi multimedia.

2. Image

Image (grafik) merupakan sebuah hasil dari p engambilan citra yang dap at melalui alat penangkap citra, seperti kamera dan scanner, yang hasilnya sering d isebut d engan gambar. Gambar bisa berwujud sebu ah ikon, foto ataupu n simbol.

3. Audio

Audio (suara) adalah ko mponen multimedia ya ng d apat berwujud narasi, mu sik, efek suara atau penggabungan diantara ketiganya.

4. Video

Video merupakan sajia n gambar dan suara yang d itangkap o leh sebuah kamera, yang kemudian disusun dalam urutan frame untuk dib aca dalam satu an detik.

5. Animation

Animation (animasi) merupakan penggunaan komputer untuk menciptakan gerak p ada layar.

6. Virtual Rea lity

Dalam perkembangannya, komponen mu ltimedia b ertambah satu lagi yaitu virtual reality. Virtual Reality memungkinkan terjadinya hubungan timbal balik antar-user dengan ap likasi multim edia secara nyata.

Contohya seperti Microsoft Surface atau Eye Toy PS 2.

2.3Adobe Flash

10

popular untuk menamb ahkan animasi dan interaktif website. Flash biasanya digunakan u ntuk membuat animasi, hiburan dan berbagai kompo nen web, diintegrasikan d engan video dalam halaman web sehingga menjadi ap ikasimultimedia yang kaya (Rich Intrernet Application. (Sunyoto, 2010).

Flash tidak hanya digunakan untuk aplikasi Web, tetapi juga digunakan untuk memb angu n aplikasi desktop karena aplikasi Flash selain dikompilasi menjadi format.swf, Flash juga dikompilasi menjad i fo rmat .exe.

Flash dap at digunakan untuk memanipulasi vector dan citra raster, dan mendukung bid irectional stream ing audio dan vid eo. Flash juga berisi skrip yang dib erinama “ActionScript”. Beberapa produk software, system dan device dapat membu at dan menampilkan isi Flash. Flash dijalankan d engan Adobe Flash Pla yer yang dapat ditanam p ad a bro wser, telepon seluler atau software lain.

Format file Flash ad alah SWF, b iasanya disebut “ShockWave Flash”

movie. “Flash M ovie” atau “Flash Game”, bia sanya file berekstensi swf dapat dijalanka n melalui web, secara stand alone pada Flash Player atau dijalankan di windows secara langsung d engan membu atnya dalam format ekstensi .exe.

2.4.1 Komponen / Tools pada Adobe Flash

Sebelum mulai mempelajari Flash, perlu diketahui beberapa istilah yang digunakan dalam Flash, serta bagaimana aturan menggunakann ya. Toolbo x berisi alat-alat kerja dengan icon u ntuk masing-masing fungsi. Toolbox terdiri dari empat b agian, yaitu tools, view, color dan options.

TOOLS b erisi fungsi-fungsi untu k menggambar, memilih, membuat teks, mewarnai, menghapus, dan membuat path. Tools terd iri dari b eberapa icon untuk menggamb ar, yaitu :

1. Pencil Tool - untuk menggambar garis sep erti menggunakan pensil 2. Line Tool - untu k menggambar garis lurus

3. Oval Tool - untu k menggambar lingkaran dan elips 4. Rectangle Tool - untuk menggamb ar ko tak

5. Brush Tool - untuk menggamb ar menggunakan brush

commit to user

Lengku ng

VIEW b erisi fungsi-fungsi untu k mewarnai.

1. Zoom Tool - untuk memperb esar dan memperkecil gamb ar 2. Hand Too l - untu k menggeser gambar

COLORS berisi fungsi-fungsi untuk menampilkan gambar.

1. Stroke Colo r - untuk menentukan warna outline p ada gambar 2. Fill Color - untuk mewarnai gambar

OPTIONS berisi pilihan lain untuk membuat variasi pada fungsi-fungsi tools d an view. Bila Eraser tool diklik, akan mu ncu l Eraser mode, Faucet dan Eraser hape, dengan ban yak pilihan.

Gambar 2.2 Tools pada F lash

1. Stage

12

magnification level atau mengubah ukuran stage dengan view command.

Gambar 2.3 Stage p ada Flash

2. Property Inspector

Properti berfu ngsi untuk menampilkan serta mengubah info rmasi object yang berada d i stage, seperti mengatur character, alignment, d an lain-lain.

Gambar 2.4 Property Inspector

3. Panel

Terdapat beberapa macam panel dalam Flash, dan setiap panel menampilkan informasi dari suatu object yang kita kehendaki, sep erti simb ol, warna, frame, dan lain-la in.

commit to user

4. Timeline

Timeline digunakan untu k mengatur semua jalan cerita, di mana actor ditampilkan dan menghilang. Suatu object yang mu ncul diatur dalam Timeline tersebut. Kompo nen utama dalam Timeline adalah la yer, frame dan playhead. Timeline berfu ngsi untuk mengatu r waktu suatu movie dan memunculkan ob jek tertentu. Penempatan efek suara dan musik latar belakang juga diatur dalam Timeline.

Gambar 2.6 Timeline

5. Frame

Frame adalah gamb ar yang membentuk suatu gerakan bila frame terseb ut ditampilkan satu demi satu berurutan. Frame merupakan konsep animasi yang dibuat secara manual maupun dengan alat bantu komputer.Untuk membu at mo vie menyajikan su atu action pada saat p layhead mencapai frame tertentu pad a Timeline. Gambar memperlihatkan actio n yang berada pada frame 5.

6. Playhead

14

Gambar 2.7 Playhead

7. Layer

Layer digunakan untuk menempatkan object yang berb ed a-beda seperti kertas transparan, dimana beberapa la yer bersama-sama merupakan suatu gambar yang lengkap. Ob ject tidak hanya gambar anima si saja, melainkan d apat berupa gambar latar belakang, teks, movie dan su ara. Setiap object berad a pada layer tersendiri yang indep enden. Macam-macam layer dapat d ilihat pada gambar berikut.

Gambar 2.8 Layer

8. Scene

commit to user

Gambar 2.9 Scene

2.4.2 ActionScript

Seperti yang diterangkan sebelumnya bahwa Flash mempunyai bahasa skrip yang diberi nama Actio nScript. ActionScrip t adalah menunjukka n koleksi set dari action, function, even t dan event handler yang memungkinkan dikembangkan oleh developer untu membu at Flash movie yang lebih komplek dan lebih interaktif. ActionScript mengalami evo lusi kearah stand ar bahasa pemrograman, yaitu versi 1, versi 2, dan versi 3. (Sunyoto, 2010)

ActionScript menunjuk ke salah satu style programming ke ECMAScript 4, merupakan basisnya JavaScrip t.

Sebuah Flash movie bisa terdiri dari beberapa scenes. Masing-masing

scene mempunyai sebu ah timeline. M asing-masing timeline dimulai dari frame 1 dan seterusn ya. Sebuah normal state sebuah Flash movie bersifat dapat berpindah dari scene 1, fra me 1 dan berakhir pada scene 1 dan scene 2 d an seterusnya. Kita dapat mengeset movie berjalaln dari awal samp ai akhir frame dan akhir d i semu a

scene, serrta menghentikannay. Kita dapat mengeset movie terseb ut berulang-ulang.

Tujuan ActionScript adalah mengubah kebiasaan linier tersebut. Sebuah ActionScript d apat menghentikan sebuha movie di frame tertentu, dan berulang ke frame sebelumnya, atau frame mana yang ditampilkan trergantung masu kan yang diberikan user. ActionScript dapat digu nakan untuk membuat sebuah movie

16

Akan tetapi, tidak semua Flash moviememerlukan ActionScript. Berikut fungsi d asar yang dapat dilakukan oleh ActionScrip t.

1. Animation

Tidak memerlukan Actio nScript jika hanya membuat animasi sederhana. Tetapi script dapat memb atu membuat animasi yang ko mplek. Sebagai contoh, seb uah bola dap at memantul pada layer disekeliling layer yang mengabaikan prinsip fisika. Tetapi jika bola itu memantul ke tanah , maka akan memerlukan prinsip gravitasi. Tanpa ActionScript, kita akan membuat animasi tersebut seb anyak ratusan frame. Namun, d engan ActionScript dapat d ilakukan hanya dengan satu frame.

2. Navigation

Secara d efault dapat bergerak kedepan satu demi satu frame samp ai selesai. Dengan Actio nScript, kita dapat membuat menu u ntuk berhnti di sembarang frame dan meneruskan ke fra me sesuai pilihan dari user.

3. User Input

Kita dapat memberikan konfirmais (pertanyaan) ke user u ntuk meminta masukan dan mengirimkan informasi tersebut ke server. Sebuah Flash movie

dengan beb erap a ActionScript dapat digunakan untuk membangun aplikasi web . 4. Memperoleh Data

Sebuah Actio nScript dapat berinteraksi d engan server. Kita d apat mengupdate informasi d an menampilkannya ke user.

5. Calculation

ActionScript dapat melakukan kalku lasi, misalnya dapat diterapkan pad a ap likasi shopping chart.

commit to user

8. Music

Memutar musik dengan ActionScrip t adlah sebuah alternative yang b agus. ActionScript dapat mengontrol dapat balan ce dan volu me. Kita dap at menghasilkan inovasi yang b aru dengan cara menggabungkan kemamp uan programming ActionScript dan imaginasi yang kuat.

2.4Adobe Photoshop

Para web design mau pu n graphic d esig n cenderung leb ih ban ya k menggunakan pro gram Adobe Photo shop u ntuk membantu pekerjaan d i bidang masing-masing karena mud ah d igunakan, memiliki warna cerah, mendukung plu g-in d ari pihak ketiga, dan hasil output yang fantastik.

2.5.1 Menjalankan Adobe Photoshop

Untuk menjalankan Photoshop CS2, lakukan langkah-langkah beriku t ini :

1. Klik tombol Start -> All Programs -> Adobe Photoshop CS2. Selain cara ini anda d apat menjalankan Photoshop melalui desktop dengan memilih iconPhotoshop yang anda buat/ persiapkan sebelumnya.

18

2. Tunggu beberapa saat hingga tamp il lembar kerja Pho toshop CS2.

Gambar 2.11 Lembar Kerja Photo shop

2.5.2 Lembar Kerja Photoshop CS2

Jika and a p endatang baru yang ingin belajar dan menekuni bid ang grafis dan akan menggu nakan Pho toshop, maka sebaiknya anda lebih familiar d engan lembar kerja yang disuguhkan Adobe pho toshop cs2 .

Lembar kerja Photoshop d ilengkapi dengan beberapa komponen seb agai berikut :

1. Title Bar

1. Restore : d igunakan untuk mengembalikan uku ran jend ela aplikasi ke bentu k semula (sebelum d irubah ukurannya).

2. Mo ve : digu nakan untuk memindah jendela aplikasi.

3. Size : digunakan u ntuk merubah ukuran jendela aplikasi.

4. Minimize : digunakan untuk meru bah uku ran jendela aplikasi menjadi uku ran terkecil yang diletakkan dibaris taskbar.

5. Ma ximize : digunakan untuk merubah ukuran jendela aplikasi menjadi satu la yar penuh.

commit to user

2. Menu Bar

Yaitu sederetan menu yang dipersiapkan untuk membantu dalam proses pembuatan/ pada saat melakukan editing pada gambar. Dari masing-masing menu pada menu bar d ib erikan nama yang berlainan u ntuk membed akan fungsi dan kegu naan secara spesifik pad a menu tersebut.Untu k mengaktifkan menu sala h satu menu tersebut dapat dilaku kan dengan salah satu cara dibawah ini :

1. Klik pada menu yang akan anda aktifkan, selanjutnya klik pada sub menu

Options bar adlah pilihan tombol yang ditampilkan untuk melengkapi pilihan pad a toolbox, jika pada computer yang and a gunakan b elum diaktifkan, la kukan langkah berikut untuk mengaktifkan Optio n Bar : Klik menu Windo w => Option atau dengan tombo l Alt+W, maka p ada bagian bawah menu bar aka n tampil sebuah tombol optio ns.

4. Toolbox

20

5. Palettes

Palettes memb antu anda untuk melakukan monitoring dan memperb aiki gambar. Dalam keadaan default palette akan ditempatkan secara bersamaan dalam satu group.

2.5XML ( eXtensible Markup Language)

Saat ini XM L sangat popu lar. Format penyimpanan data XM L membuat platform ini independen dan bermacam aplikasi dapat mempro sesn ya dengan mudah, tid ak terkecuali Adobe Flash yang juga dap at bekerja dengan file XML. (Sunyoto , 2010).

XML kepanjangan dari “eXtensib le Markup Language”. Dalam kaita n dengan bahasa pemrograman, kata “extensible” berarti pengembang d apat mengembangkan kemamp uannya. Informasi dalam XM L disimp an didalam tag. Markup berarti sebuah bahasa yang d ibangun dengan menggu nakan tag u ntuk mengelilinginya atau markup text.

Pada HTML, tag did efinisikan dan diterjamhkan oleh b rowser. Tag akan mengatakn pada browser untuk memformat objek seperti text, imag e dan form.

Pada XM L tidak ada struktur informasi yang disampaikan sperti pad a HTML sehingga untuk m enampilkan info rmasi diperlukan parser untuk menerjemahkna antara data dan tag.

2.5.1 Struktur Dokumen XML

Dokumen XML berisi informasi dan markup yang dibagi menjadi beberapa bagian yang penting, yaitu :

1. Elemen

Masing-masing dokumen XML berisi satu atau leb ih elemen. Elemen mengenalkan dan menandakan isi. Elemen mendominasi d idalam do kumen XML. Beberap a o rang menyebut elemen dengan nodes. Atu ran penulisan XM L adalah

ca se sen sitive.

commit to user

Elemen diatas berisi du a tag dan beberapa text. Elemen dapat b erisi elemen yang lain. Elemen d apat juga b erisi “kosong” (tidak berisi text), seperti HTM L-XML dimulai dengan tag pembuka dan penutup.

Sebuah elemen kosong dituliskan dengan : <tagname></ tagname > atau <tagname/>

Ketika elemen berisi elemen yang lain, elemen yang diisi disebut parent

dan elemen d idalamnya disebu t child.

<tagname>

<childTag>text being markup</ childTag>

</ tagname >

Elemen pertama pada dokumen XM L disebu t root element atau document root atau roo t node. Roo t elemen beisi elemen yang lain. Struktur dokumen XML dapat dilihat pada ilustrasi berikut.

Root node

ChildNodes

Sibling nodes

22

Atau contoh lain dapat dilihat pada model berikut :

Gambar 2.13 Contoh Struktur Dokumen XML

2. Atribut

Atribut berfungsi sebagai tambahan info rmasi tentang sebuah elemen. Atribut disimpan dengan tag pembuka sebuah elemen setelah nama elemen. Atribut menguraikan antara nama dan nilainya dan setiap atribut haru s berisi keduanya, yaitu nama dan nilai.

<tagname attributeName=”attributeValue”> </fullName>. Skrip selengkapnya adalah sebagai berikut :

commit to user

karakter “<!—“ dan diakhiri dengan “-->”.

Contoh comment di dalam XM L.

<!—here is a commented line -->

Comment juga sangat b erguna sebagai cara untuk meninggalkan p esan pengguna lain sebuah dokumen XML tanpa mem pengaruhi bagaimana doku men tersebut diproses. Semu a software memproses selalu mengab aikan comment

dalam dokumen XM L.

5. CDATA

24

2.5.2 Deklarasi Optional XML

1. Deklarasi XML

Sebuah dokumen XM L biasanya dimulai dari XML declaration, meskip un itu bersifat o ptional. Deklarasi XM L b erada pada baris pertama doku men XM L. Contoh deklarasi XM L adalah seb agai berikut :

<?xml version=”1.0”?>

Deklarasi XM L berisi versi XML. Dalam co ntoh diatas ad alah versi 1.0, merupakan versi terakhir pada waktu buku ini ditulis adalah versi 1.1.

2. Documrnt Type Definitions (DTD)

Documrnt Type Definitions (DTDs) dan d eklarasi DOCTYPE merupakan pasangan jika dideklarasikan p ada XM L.

Sebuah DTD menyediakan informasi tentang elemen mana yang legal dalam seb uah dokumen XML dan memeb eri tahu elemen mana yang wajib dan mana yang optional. Dengan kata lain, DTDmenyediakan validasi aturan dokumen XML. DTD dapat d ilihat pada co ntoh beriku t.

<?xml version=”1.0”?> dikatakn well form jika memenuhi kriteria :

1. Dokumen berisi satu atau leb ih elemen.

2. Dokumen berisi sin gle root elemen, yang mana verisi beb erapa elemen di dalamnya.

3. Tiap elemen harus ditutup.

4. Tag pembukak dan penutup harus sama (ca se sensitive).

commit to user

ditunjukkan dalam Gambar 3.1 dibawah ini.

Gambar 3.1 Bagan Perancangan Aplikasi

Keterangan :

1. Perancangan Konsep

Langkah awal yang dilakukan d alam pembuatan aplikasi ini yaitu dengan merancang konsep , bagaimana menyusu n aplikasi agar aplikasi nantinya lebih menarik pengguna aplikasi ini. Perancangan ini meliputi pembuatan desain tampilan.

2. Pengumpulan Data

Yaitu mengumpulkan data yang dip erlukan untu k melengkapi aplikasi. 3. Persiapan Hardware dan Software

26

4. Pembuatan Aplikasi

Membuat aplikasi dan mengintegrasikan semua elemen– elemen yang dibutuhkan sep erti gambar, teks, maupun suara sehingga menghasilka n ap likasi mu ltimedia yang baik dan mudah dip ahami.

3.2 Perancangan Konsep

Dari hasil perancangan aplikasi ini d apat diketahu i ap likasi terdiri dari bagan-bagan sep erti dibawah ini.

3.2.1 Rancangan Tampilan Awal

Gambar 3.2 Rancangan Tampilan Awal

Keterangan :

Halaman awal merup akan halaman utama ketika menjalankan ap likasi ini. Dari aplikasi d i atas terdapat dua tombol yaitu Qur’an dan Index. Tombol Al Qur’an a kan mengarahkan aplikasi ke menu Qur’an. Sedangkan To mbol Index akan mengarahkan aplikasi ke menu indeks istilah di dalam AlQu r’an.

Al Qur’an

commit to user

3.2.1 Rancangan Tampilan Menu Al Qur’an

Dibawah ini merupakan rancangan tampilan darip ad a aksi ketika tombol Qur’an pada tampilan menu u tama d i klik.

Gambar 3.3 Rancanga n Tampilan Menu Al Qur’an

Keterangan :

1. Merup akan combobox yang berisi surat-surat Al Qur’an. 2. Merup akan combobox yang berisi ayat-a yat Al Qur’an.

3. Merup akan combobox yang digunakan untu k mengubah arti dari ayat Al-Qur’an b erbahasa Indonesia maupun Inggris.

4. Merup akan tombo l untu k menafsirkan Al Qur’an.

5. Merup akan area untuk menampilkan a yat-a yat b eserta arti dari Al Qur’an. 6. Merup akan tombo l untuk kemb ali ke menu utama.

28

3.2.2 Rancangan Tampilan Menu Tafsir

Dibawah ini merup akan rancangan tampilan daripada aksi ketika to mbol Tafsir pada tampilan menu Qur’an di klik.

Gambar 3.4 Rancangan Tampilan Menu Tafsir Keterangan :

Dari gambar 3.4 d iatas, terdapat 3 menu yaitu co mbobox Surat , co mbobox

IND/ENG, dan to mbol Back ke M enu Qur’an. Sama halnya dengan seb elumnya tombol IND/ENG berguna u ntuk mengko nversi tafsir yang ditampilkan pada text

area diatas berbahasa Indonesia maupun Inggris. Sed angkan to mbol Back

commit to user

3.2.3 Rancangan Tampilan Menu Index

Dibawah ini merup akan rancangan tampilan daripada aksi ketika to mbol Ind ex pad a tampilan menu utama di klik.

Gambar 3.5 Rancangan Tampilan Menu Index Keterangan :

30

3.2.4 Rancangan Tampilan Index Abjad

Dibawah ini merup akan rancangan tampilan daripada aksi ketika to mbol Abjad pada tampilan Index di klik.

Gambar 3.6 Rancangan Tampilan Ind ex Abjad Keterangan :

Gambar di atas menunjukkan tampilan ketika salah satu abjad d iatas di klik. Ketika tombo l abjad diklik. Maka akan tersedia b eberapa combobo x.

Combobox tersebut berisi tema-tema dan Q.S. al-Quran yang terkandung sesuai dengan abjad yang dipilih.

3.3 Pengumpulan Data

Setelah pembuatan perancangana konsep, maka selanjutnya adalah pengumpulan data. Pada hasil perancangan d iatas maka kebutuhan data yang dip erlukan diantaranya : desain imag e, isi daripada konten aplikasi. Desain image

commit to user

al-Qur’an seperti istilah-istilah yang terdap at pad a tiap ayat d alam al-Qur’an diambil dari buku Ind eks al-Qur’an P anduan Mencari Ayat AlQur’an Berdasarkan Kata Dasar karya Azharuddin S ahil.

3.4 Kebutuhan Hardware dan Software

Adapu n alat yang d igunakan dalam p embu atan program tu gas akhir ini, dib agi menjadi 2 yaitu Hardware dan Software. Alat yang digunakan sebagai berikut .

1. Hardwa re

a. Seperangkat komputer dengan sp esifikasi :

Processor :Intel® Core™ i7 CPU 870 @ 2,93 GHZ

Merupakan software utama d alam pembu atan aplika si ini. Software

ini dapat menmpilkan gabungan antara grafik, suara, teks, animasi yang akan yang disimpan menjadi *.fla dan dap at di ko nversi menjadi *.swf atau *.exe.

b. Adobe Photoshop Cs2

Merupakan softwa re yang digu nakan untuk me ngolah gamabar yang dib utuhkan dalam aplikasi ini.

c. Flash Pla yer

Software yang berguna u ntuk memainkan hasil dari pembuatan aplikasi ini.

d. Nero Burning Room

32

3.5Pembuatan Aplikasi

Proses pembuatan aplikasi menggunakan software Adobe Flash. Pembuatan aplikasi terdiri dari pembuatan latar belakang, tombol-tombol dan animasi. Pembuatan latar belakang sebagaian besar dikerjakan menggunakan Adobe Photo shop. Pro ses p embuatan menggunakan beberapa images yang kemudian digabung agar imag e tersebut lebih menarik. Sedangkan objek tambahan seperti judul ataupu n header dan footer menggunakan tools yang tersed ia pada Adobe F lash.

Dalam proses pembuatan button menggunakan images yang juga dibuat menggunakan Ad ob e Photoshop. untuk menjadikan sebu ah button, image yang digunakan diu bah kedalam bentu k button dengan cara klik kanan image > convert to symbol. Atau terlebih dahulu membu at symbo l dengan cara ctrl+F8 kemudian memilih tipe ke b entuk button. Kemudian meletakkan ima ge yang diinginkan kedalam symb ol tersebut.

commit to user

33 BAB IV

IMPLEMENTASI

4.1 Pembuatan Aplikasi

Aplikasi multimedia ini merupakan aplikasi yang telah di buat semenarik mu ngkin gu na mengurangi tingkat kejenu han masyarakat dalam mengkaji dan memahami Al-Qur’an, sehingga masyarakat lebih tertarik dalam proses belajar.

Secara garis besar pembuatan ap likasi ini terdiri dari 2 menu utama yaitu menu Al-Qur’an d an menu Ind eks Al Qur’an. Pada menu Al-Qur’an informasi yang di sajikan mirip dengan kitab Al-Qur’an. Yaitu d i menu ini terd apat fasilitas yang digu nakan untuk memilih surat-surat Al-Qur’an. Ketika memilih su rat tertentu secara otomatis akan ditampilkan seju mlah ayat-ayat beserta artinya yang terkandung di dalam surat sesuai dengan su rat yang dipilih. Selain itu, juga terdapat menu untuk mengetahu i tafsir dari su rat Al-Qur’an yang d ipilih. Agar ap likasi ini lebih menarik dan tidak membosankan, di d alam menu Al-Qur’an ini juga diberi menu tambahan untu k mendengarkan murotal dari surat-surat Al-Qur’an.

34

4.1.1 Pembuatan Obyek dan Background

Pada pembuatan ob yek b ackground, secara garis besar di gambar d engan menggunakan tools pada adobe flash d an p hotoshop. Pada tools pho toshop ob yek background menggu nakan beb erap a image yang d igabung menjadi satu. Untu k teknik penghalusan dari beberapa image yang digabung, tool yang dimanfaatka n pada Photoshop adalah Brush Tool. Dengan menggunakan Brush Too l ini image

yang berada diatas ima ge yang berfungsi sebagai background akan terlihat menyatu.

Setelah penggabungan ima ge seb agai b ackg round selesai dibuat, maka

image tersebut di masukkan ke panel library Adobe Flash. Image tersebut dapat diubah menjadi Gra ph ic ataupun MovieClip. Hal ini u ntuk memudahkan dalam penggunaan image b erulang kali d engan han ya mendrag image dari p anel library

ke stag e. Untuk penambahan teks pad a background, tool yang d igunakan yaitu

Text Tool yang dapat diambil dari panel Tool.

commit to user

4.1.2 Pembuatan Intro

Pada pembuatan intro ini, setiap obyek yang akan ditamp ilkan pada menu awal diletakkan pad a la yer-la yer yang b erbeda. Hal ini bertu juan u ntuk memud ahkan pro ses pembuatan dan mengurangi tingkat keru wetan dalam p roses pembuatan. Dalam pro ses p embu atan animasi, la ngkah pertama ad alah membuat objek bertipe Mo vieClip. Pada objek tersebut dibuat animasi dari frame awal berjalan hingga ke fra me yang diinginkan untu k berhenti. Untuk objek yang digunakan sebagai animasi, diambil dari imag e yang telah dibuat dari Adobe Photo shop. Kemud ian untu k menggabungkan setiap la yer yang berisi objek-objek diatas seperti button, graphic maupun movie clip agar menjadi intro yang menarik,

ad alah d engan meletakkan beberapa objek-objek yang d iinginkan pada frame

tertentu lalu mengatu rny sesuai dengan urutan munculnya objek yangdiinginkan pada setiap frame terebut.

36

4.1.3 Pembuatan Tombol Navigasi

Proses pembu atan tombol navigasi ini d apat dilakukan dengan cara membu at objek button yang berasal dari objek yang dapat d ibu at dari rectang le too l. Kemudian di ko nversi ke tipe Bu tton. Tombol ini pada akhirnya akan memud ahkan user ketika ingin ,meggumalan aplikasi mengoperasi.

Gambar 4.3 Pembuatan To mbol Navigasi

4.1.4 Pemrograman dengan Actionscript

commit to user

1. Action script pad a awal frame

fscommand("fullscreen", "true");

Penje lasan :

Script di atas merupakan script yang bertujuan untuk menamp ilkan tampilan ap likasi secara penuh (fullscreen). Parameter yang digunakan pad a perintah fullscreen di atas ad a du a yaitu fullscreen dan true. Yang b erarti perinta h

fullscreen akan dijalankan karena perintah tersebut bernilai tru e.

2. . Actionscript pada tombol untu k me-lo ad movie

on (release) {

loadMovie (“menu.swf”, movieClip_instance);

}

Penje lasan :

38

4.2 Hasil Tampilan Aplikasi

4.2.1 Tampilan Halaman Intro dan Menu Utama

Halaman ini merup akan halaman utama ketika aplikasi dijalankan. Pad a halaman ini berisi judul dari stud i kasus ap likasi yang dibuat, selain itu juga terdapat 2 button yang yang merupakan button utama dari aplikasi ini yaitu button

Al-Qur’an d an Ind eks Al Qur’an. Pad a button Al-Qur’an akan d itamp ilkan sub-submenu yang dapat memilih surat dan ayat la yaknya p ada kitab suci Al-Qur’an. Sedangkan pada button Indeks Al Qur’an akan menampilkan menu u ntuk memilih tema dan menunju kkan beberapa ayat yang berkenaan dengan tema yang telah dip ilih.

commit to user

4.2.2 Tampilan Halaman Menu Al-Qur’an

Tamp ilan halaman ini terdiri dari b eberapa komponen sebagai sub-submenu . Terdapat pilihan 8 sub-submenu yang ada pada tampilan halaman ini. Yaitu 3 combobox, sp eaker, tombo l tafsir, tombo l back, serta tombo l play & sto p. M enu

co mbobox pertama berisi seju mlah su rat-surat pada Al-Qur’an yang berfungsi untuk dap at memilih surat-surat . Menu co mbobox kedua berisi sejumlah ayat-ayat pada Al-Qur’an yang sesuai denga n item yang dipilih p ada combobox pertama. Pada tampilan ini juga disediakan sub menu untuk mendengarkan lafadz dari surat Al-Qur’an yaitu p ad a tombol speaker atau play. Setiap pemilihan surat dan ayat pada combobox, maka secara o tomatis ayat beserta terjemahannya akan mu ncu l pada area yang berada di tengah tampilan. Terjemahan yang ditampilkan dapat dirubah kebahasa Indo nesia maupun Bahasa Inggris d engan menggu nakan

co mbobox Translate. Selain itu ju ga terdapat menu untuk melihat tafsir dari su rat yang diinginkan dengan menekan tombo l tafsir.

40

4.2.3 Tampilan Halaman Tafsir

Tamp ilan ini merup akan tampilan dari aksi tombol tafsir pada menu seb elumnya yaitu Al-Qur’an. Pada tampilan ini, akan d itamp ilkan satu area text yang digunakan untuk menampilkan tafsir Al-Qur’an yang dip ilih.

commit to user

4.2.4 Tampilan Halaman Indeks

Tamp ilan dibawah ini meru pakan tampilan menu utama ked ua, yaitu Ind eks Al Qur’an. Pada menu ini akan ditampilkan sejumlah sub menu yang berupa abjad d ari A sampai dengan Z. Submenu ini bertuju an untu k memudahkan user ketika memilih tema yang diinginkan. Setiap sub menu ab jad mempunyai beberapa tema yang setiap tema memiliki penggalan ayat-ayat yang mengandung tema yang disediakan pad a submenu tersebut.

42

4.2.5 Contoh Tampilan Halaman Indeks Abjad

Dibawah ini merup akan contoh tampilan d ari Ind eks Al Qur’an berabjad A. Pada abjad A ditampilkan beb erapa conto h tema-tema yang telah d isediakan. Hal ini juga b erlaku pad a semua ab jad . Setiap tema yang dipilih akan menampilkan surat beserta ayat yang mengandu ng tema yang dipilih. Pad a tampilan dibawah ini ju ga dilengkapi denga n tombo l back yang dapat digunaka n user ketika ingin mengganti Indeks Al Qur’an.