BAB III ANALISA DAN PERANCANGAN SISTEM

BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Analisa Sitem Berjalan Berikut 3 aplikasi pembanding yang dijadikan acuan dalam pembuatan aplikasi pembelajaran tajwid: 1. Aplikasi Belajar Tajwid

Gambar 3.1 Screenshots Aplikasi Pembanding 1 Aplikasi ini berisi mengenai tajwid. Pada awal membuka aplikasi, user langsung disuguhkan 9 pilihan menu tajwid. Pada menu tajwid terdapat penjelasan tajwid dan contoh tajwid tersebut yang disertai audio. Tabel 3.1 Kelebihan Dan Kekurangan Aplikasi Pembanding 1 Kelebihan Aplikasi

Kekurangan Aplikasi

1. Tampilan yang cukup menarik. 1. Tidak semua di menu tajwid terdapat audio. 2. Pada menu tajwid disertai dengan penjelasan, contoh, dan 2. Tidak terdapat video. audio. 3. Tidak terdapat animasi.

28

http://digilib.mercubuana.ac.id/

29

Keterangan Aplikasi Belajar Tajwid: a. Updated

: 28 April 2012

b. Requires Android

: 1,5 and up

c. Ukuran

: 6.1 Mb

d. Harga

: Gratis

e. Installs last 30 days : 50.000 - 100.000 Downloads 2. Aplikasi iTajweed

Gambar 3.2 Screenshots Aplikasi Pembanding 2 Aplikasi ini berisi mengenai tajwid. Tampilannya berupa seperti Al-Quran. Untuk mengetahui tajwid aplikasi ini menggunakan warna dimasing-masing tajwidnya, akan tetapi tidak terdapat penjelasan tajwid tersebut dan audio. Tabel 3.2 Kelebihan Dan Kekurangan Aplikasi Pembanding 2 Kelebihan Aplikasi 1. Tampilan yang cukup menarik karena pada tiap tajwid menggunakan warna dan masing-masing tajwid tersebut

Kekurangan Aplikasi 1. Dalam mengakses isi aplikasi sebelumnya dibutuhkan koneksi GPRS. 2. Tidak


terdapat

penjelasan

30

berbeda warna.

mengenai tajwid tersebut karena hanya berupa lembaran seperti Al-Quran. 3. Tidak terdapat audio. 4. Tidak terdapat video. 5. Tidak terdapat animasi.

Keterangan Aplikasi iTajweed: a. Updated

: 24 April 2012

b. Requires Android

: 2.1 and up

c. Ukuran

: 143 Kb

d. Harga

: Gratis

e. Installs last 30 days : 10.000 - 50.000 Downloads 3. Aplikasi Tajweed

Gambar 3.3 Screenshots Aplikasi Pembanding 3 Aplikasi ini berisi mengenai tajwid. Tampilannya hanya berupa teks saja dengan menggunakan huruf arab. Pada aplikasi ini tidak terdapat contoh mengenai jenis-jenis tajwid yang dibahas.


31

Tabel 3.3 Kelebihan Dan Kekurangan Aplikasi Pembanding 3 Kelebihan Aplikasi 1. Tidak ada.

Kekurangan Aplikasi 1. Tampilan sederhana. 2. Tidak terdapat contoh mengenai tajwid yang dibahas. 3. Tidak terdapat audio. 4. Tidak terdapat video 5. Tidak terdapat animasi.

Keterangan Aplikasi Tajweed : a. Updated

: 5 Juli 2012

b. Requires Android

: 2.3.3 and up

c. Ukuran

: 1.7 Mb

d. Harga

: Gratis

e. Installs last 30 days : 5.000 - 10.000 Downloads Aplikasi pembanding

: Dari kelima aplikasi pembanding sejenis di atas, platform yang digunakan adalah OS Android. Dari segi tampilan masing-masing aplikasi ada yang sederhana dan ada juga yang cukup menarik. Untuk segi fitur sebagian aplikasi masih ada yang sangat minim seperti tidak adanya dukungan audio, video dan animasi. Pembahasan isi aplikasi mengenai tajwid pun masih kurang lengkap dan jelas.


32

Aplikasi usulan

: Pada aplikasi yang penulis usulkan, platform yang digunakan

adalah

OS

Android.

Aplikasi

ini

menyajikan 29 hukum tajwid yang sudah dilengkapi dengan audio dimasing-masing contoh tajwidnya dengan tambahan fitur video dan animasi, serta didesain dengan tampilan yang menarik dan mudah dipahami, lebih formatif dan kreatif sehingga lebih diminati. Pilihan menu pendukung yang lebih lengkap dan tombol akses yang lebih mudah. Dari analisa pembanding diatas dapat disimpulkan dalam tabel parameter dibawah ini:


33

Tabel 3.4 Tabel Analisa Parameter Pembanding

No

Jenis Parameter

1

Aplikasi

2

Bahasa Pemograman

3 4 5 6

Tampilan Ukuran File Platform Android Harga

7

Content

Aplikasi Belajar Tajwid

Aplikasi iTajweed

Android Java Cukup Menarik 6.1 Mb 1.5 and up Gratis 1. Memiliki 9 menu.

Aplikasi Tajweed

Aplikasi Pembelajaran Tajwid (Usulan)

Android

Android

Android

Java

Java

Flash ActionScript 3.0, Java

Sederhana 143 Kb 2.1 and up Gratis 1. Memiliki 9 menu.

Menarik 8.58 Mb 2.2 and up Gratis 1. Memiliki 8 menu.

2. Terdapat penjelasan dan 2. Tidak terdapat penjelasan 2. Tidak terdapat 2. Terdapat penjelasan dan contoh tajwid yang contoh tajwid yang tajwid yang dibahas. contoh tajwid yang dibahas. dibahas. dibahas. 3. Terdapat evaluasi berupa soal kuis.

1. Terdapat audio namun 1. Tidak terdapat audio. tidak di semua menu 2. Tidak terdapat video. tajwid. 2. Tidak terdapat video. 8

Sederhana 1,7 Mb 2.3.3 and up Gratis 1. Memiliki 5 menu.

3. Tidak terdapat animasi.

1. Tidak audio.

terdapat 1. Terdapat audio di semua menu tajwid

2. Tidak video.

terdapat 2. Terdapat video.

3. Tidak animasi.

terdapat

3. Terdapat animasi.

Fitur 3. Tidak terdapat animasi.


34

3.2 Kerangka Pemikiran

Trend Teknologi:

Batasan Masalah:

Studi Literatur:

1.

Aplikasi ini hanya bisa diakses melalui handphone dengan sistem operasi android versi (Froyo) 2.2 keatas.

1.

3 aplikasi pembanding: belajar tajwid, itajweed, dan tajweed.

2.

Data yang disajikan dalam bentuk teks, gambar, audio, video, dan animasi.

2.

Buku tajwid.

3.

Buku android.

3.

Hanya terdapat 6 kategori tajwid, yaitu Lafadz Allah, Alif Lam, Mad, Mim Mati, Nun Mati atau Tanwin, dan Qalqalah.

4.

Media internet.

Platform Android.

Kondisi Saat Ini:

Rumusan Masalah:

Umat muslim menggunakan media buku, cd interaktif, website, aplikasi dekstop, dan aplikasi handphone untuk mempelajari tajwid, akan tetapi itu semua dirasa masih terdapat kekurangan.



Bagaimana membuat suatu aplikasi pembelajaran tajwid yang dapat menarik minat umat muslim dengan fitur yang lengkap dan desain yang menarik.



Bagaimana merancang media informasi edukasi yang dapat memberikan pembahasan dengan jelas mengenai tajwid.

Perancangan:

Tujuan:

1.

Adobe Flash Professional CS 6

Memberikan alternatif untuk membantu umat muslim dalam mempelajari tajwid.

2.

Adobe Photoshop CS4.

Konsep Design:

3.

Android SDK

4.

Adobe Air

Aplikasi yang diinstal pada handphone berbasis android. Implementasi dan Pengujian.

jika ada error Evaluasi.

aplikasi jika tidak ada error Kesimpulan: Aplikasi pembelajaran tajwid ini menjadi alternatif untuk membantu umat muslim dalam mempelajari tajwid, serta layak untuk dipublikasikan dan digunakan.

Pemeliharaan dan pengembangan aplikasi.

Gambar 3.4 Kerangka Pemikiran


35

3.3 Penjelasan Kerangka Pemikiran Dimulai dari kotak awal kondisi yang ada saat ini sebagai analisa sistem berjalan saat ini sebelum ada aplikasi pembelajaran tajwid ini, sebagian besar umat muslim menggunakan media buku, CD interaktif, website, aplikasi desktop, dan aplikasi handphone, akan tetapi semua itu dirasa masih terdapat kekurangan. Setelah itu didapat titik permasalahan yang akan dijadikan awal untuk merancang aplikasi yang dibutuhkan untuk menyelesaikan masalah tersebut. Batasan masalah, studi literatur, dan trend teknologi yang ada saat ini dijadikan sebagai alat bantu untuk merancang aplikasi ini. Tahap perancangan aplikasi ini menggunakan Adobe Flash Professional CS6, Adobe Photoshop CS4, serta pendukung lainnya android SDK dan adobe air. Masuk ke tahap implementasi dan testing adalah pengujian aplikasi ini untuk mengetahui terdapat error atau tidak serta untuk mengetahui kehandalan aplikasi. Tahap terakhir adalah kesimpulan yang didapat dari aplikasi dilihat dari sisi user. Tidak selesai sampai disitu ada juga pemeliharaan dan pengembangan untuk aplikasi tersebut. 3.4 Identifikasi Kebutuhan Merupakan rangkuman hasil analisa dalam bentuk uraian masalah, kebutuhan sistem dan usulan yang berkaitan dengan informasi yang diberikan sistem ke user. Kebutuhan : Aplikasi Pembelajaran Tajwid Berbasis Android Usulan

: Dibuat

aplikasi

pembelajaran

tajwid

yang

dalam

penyajiannya dilengkapi dengan desain yang menarik ditambah dengan audio, video, dan animasi sebagai fitur tambahan, mudah dipahami dan digunakan user serta yang dapat diakses melalui handphone berbasis android


36

3.5 Sistem Yang Diusulkan Pada aplikasi yang penulis usulkan, platform yang digunakan adalah sistem operasi android. Pada halaman awal aplikasi ini terdapat 2 pilihan menu, diantaranya menu keluar dan menu utama. Pada menu utama terdapat 8 pilihan menu, diantaranya Pengertian Tajwid, Lafadz Allah, Alif Lam, Mad, Mim Mati, Nun Mati/ Tanwin, Qalqalah, Evaluasi, dan Video Belajar. Pada menu pengertian tajwid akan menampilkan penjelasan mengenai arti dari tajwid yang ditambah dengan fitur audio dan animasi. Pada menu lafadz allah, alif lam, mad, mim mati, nun mati/tanwin dan qalqalah akan menampilkan deskripsi tajwid sesuai dengan kategorinya yang disertai contoh dari tajwid tersebut yang dilengkapi dengan adanya fitur audio dan animasi. Pada menu evaluasi akan menampilkan soal kuis mengenai materi tajwid yang dibahas pada aplikasi ini, yang juga dilengkapi dengan fitur audio dan animasi. Untuk menu Video Belajar akan menampilkan video pembelajaran tajwid. 3.6 Perancangan Sistem Perancangan aplikasi yaitu dimulai dari tahap merancang program menggunakan UML. 3.6.1

Use Case Diagram Use case diagram menyajikan interaksi antara use case dengan actor.

Dengan actor berupa orang, peralatan atau sistem lain yang berinteraksi dengan sistem yang sedang dibangun. Use case menggambarkan fungsionalitas sistem atau persyaratan-persyaratan yang harus dipenuhi sistem dari sudut pandang pemakai.


37

Gambar 3.5 Use Case Diagram Sistem yang diusulkan

3.6.1.1 Skenario Use Case Tabel 3.5 Skenario Use Case Unduh Aplikasi Nama Use Case:

Unduh Aplikasi

Aktor:

User dan Smartphone

Deskripsi:

User bisa mendapatkan aplikasi dengan smartphonenya dari website (forum, blog, dll) dengan cara mengunduhnya secara gratis.

Skenario:

Aksi Aktor

Sistem 1. Halaman website (forum, blog, dll)

2. User memilih menu unduh pada website tersebut.


38

3. Website mengeksekusi aksi yang dilakukan oleh user. 4. Website akan menampilkan tampilan layar yang berisi pilihan untuk unduh. Tabel 3.6 Skenario Use Case Instal Aplikasi Nama Use Case:

Instal Aplikasi

Aktor:

User dan Smartphone

Deskripsi:

Setelah user mendapatkan file eksekusi (.apk) aplikasi pada smartphonenya, maka ketika file eksekusi tersebut ditekan akan ada penginstalan aplikasi.

Skenario:

Aksi Aktor . 2. User memilih instal pada smartphonenya

Sistem 1. Sistem menampilkan tampilan untuk penginstalan.

3. Sistem mengeksekusi aksi yang dilakukan oleh user. 4. Sistem secara otomatis akan melakukan penginstalan Smartphone.

pada

Tabel 3.7 Skenario Use Case Jalankan Aplikasi Nama Use Case:

Jalankan Aplikasi

Aktor:

User dan Smartphone

Deskripsi:

Setelah penginstalan selesai, maka user bisa menjalankan aplikasi.

Skenario:

Aksi Aktor 1. User akan melihat icon pada layar smartphone dari aplikasi pembelajaran tajwid.


Sistem

39

2. Sistem mengeksekusi aksi yang dilakukan oleh user. 3. Sistem menampilkan halaman awal.

Tabel 3.8 Skenario Use Case keluar Aplikasi Nama Use Case:

Keluar Aplikasi

Aktor:

User dan Smartphone

Deskripsi:

User memilih menu keluar.

Skenario:

Aksi Aktor

Sistem

1. Sistem menampilkan . halaman awal. 2. User memilih menu keluar pada layar smartphone 3.Sistem mengeksekusi aksi yang dilakukan oleh user. 4. Sistem akan keluar dari aplikasi.

3.6.2 Sequence Diagram Sequence diagram menggambarkan interaksi antar objek didalam dan di sekitar sistem (termasuk pengguna, display, dan sebagainya) berupa message yang digambarkan terhadap waktu. Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu.


40

a. Sequence Diagram User: Memulai Aplikasi Pada sequence diagram ini menjelaskan user yang baru memulai aplikasi, ketika membuka aplikasi user akan ditampilkan halaman awal aplikasi. Dihalaman awal tersebut user akan disuguhkan 2 pilihan menu, yaitu Menu Utama dan Menu Keluar.

Halaman Awal

: User

1. Membuka aplikasi

2. Menampilkan halaman awal

Gambar 3.6 Sequence Diagram User Memulai Aplikasi b. Sequence Diagram User: Memilih Menu Utama Pada sequence diagram ini menjelaskan user memilih menu utama. Dihalaman ini berisi 8 pilihan menu, yaitu Menu Pengertian Tajwid, Menu Lafadz Allah, Menu Alif Lam, Menu Mad, Menu Mim Mati, Menu Nun Mati/ Tanwin, Menu Qalqalah, dan Menu Evaluasi.

: User

Halaman Awal

Menu Utama

1. Membuka aplikasi


3. Memilih menu utama

4. Menampilkan halaman menu utama

Gambar 3.7 Sequence Diagram User Memilih Menu Utama


41

c. Sequence Diagram User: Menu Pengertian Tajwid Pada sequence diagram ini menjelaskan user memilih menu pengertian tajwid. Dihalaman ini berisi penjelasan pengertian tajwid.

: User

Menu Utama

Menu Pengertian Tajwid



3. Memilih menu pengertian tajwid

4. Menampilkan halaman menu pengertian tajwid

Gambar 3.8 Sequence Diagram User Memilih Menu Pengertian Tajwid d. Sequence Diagram User: Menu Lafadz Allah Pada sequence diagram ini menjelaskan user memilih menu lafadz allah. Dihalaman ini berisi 2 jenis tajwid, yaitu Tafkhim dan Tarqiq.

: User

Menu Utama

Menu Lafadz Allah



3. Memilih menu lafadz allah

4. Menampilkan halaman menu lafadz allah

Gambar 3.9 Sequence Diagram User Memilih Menu Lafadz Allah


42

e. Sequence Diagram User: Menu Alif Lam Pada sequence diagram ini menjelaskan user memilih menu alif lam. Dihalaman ini berisi 2 jenis tajwid, yaitu Syamsiyah dan Qamariyah.

: User

Menu Utama

Menu Alif Lam



3. Memilih menu alif lam

4. Menampilkan halaman menu alif lam

Gambar 3.10 Sequence Diagram User Memilih Menu Alif Lam f. Sequence Diagram User: Menu Mad Pada sequence diagram ini menjelaskan user memilih menu mad. Dihalaman ini berisi 14 jenis tajwid, yaitu Mad Thabi'i, Mad Wajib Muttashil, Mad Jaiz Munfashil, Mad Arid Lisukun, Mad Badal, Mad Iwad, Mad Lazim Mutsaqqal Kalimi, Mad Lazim Mukhaffaf Kalimi, Mad Lazim Harfi Musba, Mad Lazim Mukhaffaf Harfi, Mad Layyin, Mad Shilah Qashirah, Mad Shilah Thawilah, dan Mad Tamkin.


43

: User

Menu Utama

Menu Mad



3. Memilih menu mad

4. Menampilkan halaman menu mad

Gambar 3.11 Sequence Diagram User Memilih Menu Mad

g. Sequence Diagram User: Menu Mim Mati Pada sequence diagram ini menjelaskan user memilih menu mim mati. Dihalaman ini berisi 3 jenis tajwid, yaitu Idzhar Safawi, Ikhfa Safawi, dan Idghom Mutamatsilain.

: User

Menu Utama

Menu Mim Mati



3. Memilih menu mim mati

4. Menampilkan halaman menu mim mati

Gambar 3.12 Sequence Diagram User Memilih Menu Mim Mati h. Sequence Diagram User: Menu Nun Mati/Tanwin


44

Pada sequence diagram ini menjelaskan user memilih menu nun mati/tanwin. Dihalaman ini berisi 5 jenis tajwid, yaitu Idzhar, Iqlab, Ikhfa, idghom Bigunnah, dan Idghom Bilagunnah.

: User

Menu Utama

Menu Nun Mati/Tanwin



3. Memilih menu nun mati/tanwin

4. Menampilkan halaman menu nun mati/tanwin

Gambar 3.13 Sequence Diagram User Memilih Menu Nun Mati/Tanwin i. Sequence Diagram User: Menu Qalqalah Pada sequence diagram ini menjelaskan user memilih menu qalqalah. Dihalaman ini berisi 2 jenis tajwid, yaitu sughra dan kubra.

: User

Menu Utama

Menu Qalqalah



3. Memilih menu qalqalah

4. Menampilkan halaman menu qalqalah

Gambar 3.14 Sequence Diagram User Memilih Menu Qalqalah


45

j. Sequence Diagram User: Menu Evaluasi Pada sequence diagram ini menjelaskan user memilih menu evaluasi. Dihalaman ini berisi evaluasi berupa soal kuis mengenai tajwid yang dibahas pada aplikasi ini.

: User

Menu Utama

Menu Evaluasi



3. Memilih menu evaluasi

4. Menampilkan halaman menu evaluasi

Gambar 3.15 Sequence Diagram User Memilih Menu Evaluasi k. Sequence Diagram User: Menu Video Belajar Pada sequence diagram ini menjelaskan user memilih menu video belajar. Dihalaman ini berisi video pembelajaran tajwid.

: User

Menu Utama

Menu Video Belajar



3. Memilih menu video belajar

4. Menampilkan halaman menu video belajar

Gambar 3.16 Sequence Diagram User Memilih Menu Video Belajar


46

l. Sequence Diagram User: Menu Keluar Pada sequence diagram ini menjelaskan user memilih menu keluar yang berarti user memilih untuk keluar dari aplikasi.

Halaman Awal

: User

Menu Keluar

1. Membuka aplikasi


3. Memilih menu keluar

4. Keluar dari aplikasi

Gambar 3.17 Sequence Diagram User Memilih Menu Keluar

3.7 Rancangan Keluaran Berisi tentang keluaran yang dihasilkan oleh sistem yang diusulkan. Tiap keluaran dirinci, seperti yang terlihat pada tabel 3.19. Tabel 3.19 Keluaran Yang Dihasilkan Sistem Nama Keluaran

Pembelajaran Tajwid.

Fungsi

Sebagai media informasi dan pembelajaran tentang tajwid.

Media

Handphone berbasis android.

Distribusi

Masyarakat umum.

Format

.apk

Keterangan

Berupa aplikasi edukasi untuk mempelajari tajwid.


47

3.8 Struktur Navigasi Aplikasi Usulan Dalam membuat aplikasi multimedia, kita terlebih dahulu merancang suatu tampilan agar tidak menimbulkan kerancuan informasi. Dalam penulisan ini penulis menggunakan struktur navigasi komposit (campuran), karena merupakan suatu struktur yang menggunakan percabangan dan juga terdapat suatu tampilan yang sama kedudukannya, sehingga dapat dibuat struktur linier percabangan. Tampilan pada menu utama mempunyai percabangan dan dari cabang tersebut mempunyai anak cabang yang lain.


48

Halaman Awal

Menu Utama

Pengertian Tajwid

Lafadz Allah

Alif Lam

Mad

Tafkhim

Qamariyah

Mad Thabi'i

Tarqiq

Syamsiyah

Menu Keluar

Mim Mati

Nun Mati/ Tanwin

Qalqalah

Idzhar Safawi

Sughra Kubra

Ikhfa Safawi Mad Wajib Muttashil

Mad Lazim Mukhaffaf Harfi

Mad Iwad

Mad Jaiz Munfashil

Mad Lazim Mutsaqqal Kalimi

Mad Layyin

Mad Arid Lisukun

Mad Lazim Mukhaffaf Kalimi

Mad Shilah Qashirah

Idzhar Idghom Mutamatsilain

Iqlab Ikhfa Idghom Bigunnah Idghom Bilagunnah

Mad Badal

Mad Lazim Harfi Musba

Mad Shilah Thawilah

Mad Tamkin

Gambar 3.18 Struktur Navigasi Aplikasi Pembelajaran Tajwid


Evaluasi

Video Belajar

49

3.9 Storyboard Aplikasi Usulan Umumnya untuk membuat aplikasi multimedia digunakan storyboard yang disusun berurutan layar demi layar. Dalam storyboard ini selain digambarkan perkiraan dari tampilan akhir yang diinginkan, juga turut dituliskan penjelasan serta spesifikasi tiap layar. Selain itu hal yang perlu diperhatikan dalam membuat storyboard adalah tetap mengikuti rancangan peta navigasi, dengan demikian setiap tahapan desain menjadi lebih terarah dan dapat dikerjakan dengan mudah. Tabel 3.20 Storyboard Aplikasi Pembelajaran Tajwid Page

Visualisasi

Awal

Audio

Keterangan

Backsound Background : lagu insya allah versi Gambar masjid. instrumental Image View: . Gambar bismillah.

Background Image View A1 A2

Button [1]: Tombol bergambar panah ke kiri untuk keluar dari aplikasi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.

A3

1

2

Button [2]: Tombol bergambar panah ke kanan untuk masuk ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


50

Animasi [A1]: Teks bertuliskan "ASSALAMU'ALAIKU M WR. WB." yang berganti-ganti warna. Animasi [A2]: Teks bertuliskan "APLIKASI" yang bergerak memantul dari kiri ke kanan dan terhenti ditengah. Teks bertuliskan "PEMBELAJARAN" yang bergerak memantul dari kanan ke kiri dan terhenti ditengah. Teks bertuliskan "TAJWID" yang bergerak naik turun dan terhenti ditengah. Animasi [A3]: 2 orang menggerakkan tangannya.


yang

51

Menu Utama

A1 2 3 4 5 6 7

A2

Backsound Background : lagu insya allah versi Gambar padang pasir. instrumental Button [1]: . Tombol bergambar panah ke kiri untuk kembali ke halaman awal dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.

8 9 1

Background

Button [2]: Tombol bergambar papan bertuliskan "Pengertian Tajwid" untuk masuk ke halaman menu pengertian tajwid dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [3]: Tombol bergambar papan bertuliskan "Lafadz Allah" untuk masuk ke halaman menu lafadz allah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


52

Button [4]: Tombol bergambar papan bertuliskan "Alif Lam" untuk masuk ke halaman menu alif lam dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [5]: Tombol bergambar papan bertuliskan "Mad" untuk masuk ke halaman menu mad dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [6]: Tombol bergambar papan bertuliskan "Mim Mati" untuk masuk ke halaman menu mim mati dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [7]: Tombol bergambar papan bertuliskan "Nun Mati/Tanwin" untuk masuk ke halaman menu nun mati/tanwin dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


53

Button [8]: Tombol bergambar papan bertuliskan "Qalqalah" untuk masuk ke halaman menu qalqalah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [9]: Tombol bergambar papan bertuliskan "Evaluasi" untuk masuk ke halaman menu evaluasi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Animasi [A1]: Teks bertuliskan "MENU" yang bergantiganti warna. Animasi[A2]: Matahari yang mengeluarkan sinarnya.


54

Menu Pengertian Tajwid

A1 Text View

Suara yang Background : menjelaskan Gambar padang pasir. tentang pengertian Teks View: tajwid. Teks bertuliskan penjelasan mengenai pengertian tajwid. Button [1]:

Background A2 1

Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Animasi [A1]: Teks bertuliskan "PENGERTIAN TAJWID" yang bergantiganti warna. Animasi [A2]: Orang yang menggerakkan mata dan mulutnya.


55

Menu Lafadz Allah

Tidak ada. 2

Background :

3

Gambar polos berwarna abu-abu bergaris pinggir hitam. Button [1]: Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. 1

Background

Button [2]: Tombol bergambar papan bertuliskan "TAFKHIM" untuk menampilkan halaman tajwid tafkhim dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [3]: Tombol bergambar papan bertuliskan "TARQIQ" untuk menampilkan halaman tajwid tarqiq dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


56

Menu Alif Lam

Tidak ada. 2

Background :

3


Background

Button [2]: Tombol bergambar papan bertuliskan "SYAMSIYAH" untuk menampilkan halaman tajwid syamsiyah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [3]: Tombol bergambar papan bertuliskan "QAMARIYAH" untuk menampilkan halaman tajwid qamariyah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


57

Menu Mad

Tidak ada.

1

Background :

2

3

4

5

6

7

Gambar polos berwarna abu-abu bergaris pinggir hitam.

8

9

Button [1]:

10

11

12

13

14

15

Background

Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [2]: Tombol bergambar papan bertuliskan "MAD THABI'I" untuk menampilkan halaman tajwid mad thabi'i dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [3]: Tombol bergambar papan bertuliskan "MAD WAJIB MUTTASHIL" untuk menampilkan halaman tajwid mad wajib muttashil dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


58

Button [4]: Tombol bergambar papan bertuliskan "MAD JAIZ MUNFASHIL" untuk menampilkan halaman tajwid mad jaiz munfashil dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [5]: Tombol bergambar papan bertuliskan "MAD ARID LISUKUN" untuk menampilkan halaman tajwid mad arid lisukun dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [6]: Tombol bergambar papan bertuliskan "MAD BADAL" untuk menampilkan halaman tajwid mad badal dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


59

Button [7]: Tombol bergambar papan bertuliskan "MAD IWAD" untuk menampilkan halaman tajwid mad iwad dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [8]: Tombol bergambar papan bertuliskan "MAD LAZIM MUTSAQQAL KALIMI" untuk menampilkan halaman tajwid mad lazim mutsaqqal kalimi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [9]: Tombol bergambar papan bertuliskan "MAD LAZIM MUKHAFFAF KALIMI" untuk menampilkan halaman tajwid mad lazim mukhaffaf kalimi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


60

Button [10]: Tombol bergambar papan bertuliskkan "MAD LAZIM HARFI MUSBA" untuk menampilkan halaman tajwid mad lazim harfi musba dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [11]: Tombol bergambar papan bertuliskan "MAD LAZIM MUKHAFFAF HARFI" untuk menampilkan halaman tajwid mad lazim mukhaffaf harfi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [12]: Tombol bergambar papan bertuliskan "MAD LAYYIN" untuk menampilkan halaman tajwid mad layyin dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


61

Button [13]: Tombol bergambar papan bertuliskan "MAD SHILAH QASHIRAH" untuk menampilkan halaman tajwid mad shilah qashirah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [14]: Tombol bergambar papan bertuliskan "MAD SHILAH THAWILAH" untuk menampilkan halaman tajwid mad shilah thawilah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [15]: Tombol bergambar papan bertuliskan "MAD TAMKIN" untuk menampilkan halaman tajwid mad tamkin dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


62

Menu Mim Mati

Tidak ada. 2

Background :

3 4

Gambar polos berwarna abu-abu bergaris pinggir hitam. Button [1]: Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.

1

Background

Button [2]: Tombol bergambar papan bertuliskan "IDZHAR SAFAWI" untuk menampilkan halaman tajwid idzhar safawi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [3]: Tombol bergambar papan bertuliskan "IKHFA SAFAWI" untuk menampilkan halaman tajwid ikhfa safawi dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


63

Button [4]: Tombol bergambar papan bertuliskan "IDGHOM MUTAMATSILAIN" untuk menampilkan halaman tajwid idghom mutamatsilain dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Menu Nun Mati/ Tanwin

Tidak ada. 2

3 5

Background :

4 6

Gambar polos berwarna abu-abu bergaris pinggir hitam. Button [1]: Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.

1

Background

Button [2]: Tombol bergambar papan bertuliskan "IDZHAR" untuk menampilkan halaman tajwid idzhar dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


64

Button [3]: Tombol bergambar papan bertulisan "IQLAB" untuk menampilkan halaman tajwid iqlab dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [4]: Tombol bergambar papan bertuliskan "IKHFA" untuk menampilkan halaman tajwid ikhfa dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [5]: Tombol bergambar papan bertuliskan "IDGHOM BIGUNNAH" untuk menampilkan halaman tajwid idghom bigunnah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


65

Button [6]: Tombol bergambar papan bertuliksan "IDGHOM BILAGUNNAH" untuk menampilkan halaman tajwid idghom bilagunnah dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Menu Qalqalah

Tidak ada. 2

Background :

3


Background

Button [2]: Tombol bergambar papan bertuliskan "SUGHRA" untuk menampilkan halaman tajwid sughra dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


66

Button [3]: Tombol bergambar papan bertuliskan "KUBRA untuk menampilkan halaman tajwid kubra dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Isi Menu Tajwid (Tafkhim, Tarqiq, Syamsiyah, Qamariyah, Mad Thabi'i, Mad Wajib Muttashil, Mad Jaiz Munfashil, Mad Arid Lisukun, Mad Badal, Mad Iwad, Mad Lazim Mutsaqqal Kalimi, Mad Lazim Mukhaffaf Kalimi, Mad Lazim Harfi Musba, Mad Lazim Mukhaffaf Harfi, Mad Layyin, Mad Shilah Qashirah, Mad Shilah Thawilah,

Tidak ada.

Background

Background : Gambar polos berwarna abu-abu bergaris pinggir hitam.

Teks View

Button [1]: Image View1

A1

2

Image View2

A2

3

Image View3

A3

4

Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [2]:

1

Tombol bergambar speaker untuk mengeluarkan suara dari contoh tajwid yang pertama dan ketika tombol ditekan akan ada efek animasi seperti menekan tombol.


67

Mad Tamkin, Idzhar Safawi, Ikhfa Safawi, Idghom Mutamatsil ain, Idzhar, Iqlab, Ikhfa, Idghom Bigunnah, Idghom Bilagunnah, Sughra dan Kubra.

Button [3]: Tombol bergambar speaker untuk mengeluarkan suara dari contoh tajwid yang pertama dan ketika tombol ditekan akan ada efek animasi seperti menekan tombol. Button [2]: Tombol bergambar speaker untuk mengeluarkan suara dari contoh tajwid yang ketiga dan ketika tombol ditekan akan ada efek animasi seperti menekan tombol. Animasi [A1]: Teks contoh tajwid pertama yang berganti warna. Animasi [A2]: Teks contoh tajwid kedua yang berganti warna. Animasi [A3]: Teks contoh tajwid ketiga yang berganti warna. Image View [1] Gambar contoh tajwid yang pertama. Image View [2] Gambar contoh tajwid yang kedua.


68

Image View [3] Gambar contoh tajwid yang ketiga. Menu Evaluasi (Isi Nama User)

A1 A2

Backsound Background : tanda baca Gambar taman. versi intrumental. Button [1]:

Text View

Static Text

1

Background

Tombol bertuliskan "OK" yang berati telah setuju dengan nama yang telah dimasukkan, dan untuk akan ke halaman soal evaluasi, ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Text View Teks bertuliskan "Masukkan Nama Anda". Static Text: Untuk memasukkan dan menulis nama user. Animasi[A1]: Matahari yang mengeluarkan sinarnya. Animasi[A2]: Awan yang bergerak dari kiri ke kanan tanpa berhenti.


69

Menu Evaluasi (Soal Evaluasi)

Background :

A1 A2

Image/Text View 1

Button [1]:

A3

2

Image/Text View 2

3

Image/Text View 3

4

Image/Text View 4 Background A4

1

Gambar taman.

Static Text 5

Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [2]: Tombol bertuliskan "A" yang merupakan pilihan jawaban pertama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Button [3]: Tombol bertuliskan "B" yang merupakan pilihan jawaban kedua dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Buttom [4]: Tombol bertuliskan "C" yang merupakan pilihan jawaban ketiga dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.


70

Button[5]: Tombol bergambar papan bertuliskan "soal berikutnya..." untuk menampilkan halaman soal evaluasi berikutnya dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Tombol ini baru akan muncul jika user telah memilih. Khusus di halaman soal evaluasi terakhir Image/Text View[1]: Soal evaluasi, dapat berupa gambar ataupun teks. Image/Text View[2]: Pilihan jawaban pertama evaluasi, dapat berupa gambar ataupun teks. Image/Text View[3]: Pilihan jawaban kedua evaluasi, dapat berupa gambar ataupun teks. Image/Text View[4]: Pilihan jawaban ketiga evaluasi, dapat berupa gambar ataupun teks. Static Text: Untuk menampilkan nilai score soal evaluasi, jika benar nilai 10 dan jika salah nilai 0.


71

Animasi[A1]: Teks bertuliskan "Soal Evaluasi" yang tiap hurufnya bergerak naik turun. Animasi[A2]: Matahari yang mengeluarkan sinarnya. Animasi[A3]: Awan yang bergerak dari kiri ke kanan tanpa berhenti. Animasi[A4]: Emoticon yang menandakan benar/salah jawaban yang telah dipilih user. Animasi ini baru akan muncul jika user telah memilih pilihan jawaban. Menu Evaluasi (Total Score User)

Tidak ada A2

Text View 1 A3

Static Text 1 Static Text 2

Background : Gambar taman. Button [1]: Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol. Text View[1]:

1

Background


Teks bertuliskan "Total Score".

72

Static Text[1]: Untuk menampilkan nama user yang telah dimasukkan di halaman isi nama user. Static Text[2]: Untuk menampilkan total score user dari soal evaluasi pertama hingga terakhir. Animasi[A1]: Matahari yang mengeluarkan sinarnya. Animasi[A2]: Awan yang bergerak dari kiri ke kanan tanpa berhenti. Menu Video Belajar

Tidak ada. A1

Background : Gambar polos berwarna abu-abu bergaris pinggir hitam.

V1

Button [1]:

Background A2

1


Tombol bergambar panah ke kiri untuk kembali ke halaman menu utama dan ketika tombol ditekan akan keluar suara serta ada efek animasi seperti menekan tombol.

73

Video[V1]: Video yang menampilkan pembelajaran tajwid. Animasi [A1]: Teks "VIDEO yang warna.

bertuliskan BELAJAR" berganti-ganti

Animasi [A2]: 2 orang menggerakkan tangannya.

yang

3.10 Analisa Kebutuhan Sistem Analisa kebutuhan sistem merupakan uraian dari kebutuhan sistem agar sistem baru yang diusulkan dapat berjalan pada perangkat yang sebenarnya. Kebutuhan aplikasi ini meliputi: a. Perangkat Keras Perangkat keras (hardware) minimum yang dibutuhkan: 1. Kebutuhan Minimum Perangkat Keras & Perangkat Lunak : -

Operation System

: Windows Xp

-

Processor

: Intel Dual Core 1Ghz

-

Ram

: 1 Giga Byte

-

Video Graphics Adapter

: Microsoft DirectX 9 graphics

-

Harddisk

: 40 Giga Byte


74

2. Kebutuhan Perangkat Keras & Perangkat Lunak Yang Disarankan : -

Operation System

: Windows 8

-

Processor

: Intel Core I3 1,9 Ghz

-

Ram

: 4 Giga Byte

-

Video Graphics Adapter

: Microsoft DirectX 10 graphics

-

Harddisk

: 500 Giga Byte

b. Perangkat Lunak Sedangkan kebutuhan perangkat lunak (software) yang dibutuhkan terbagi menjadi dua kategori, yaitu: 1. Perangkat Lunak Pada Mobile Karena aplikasi ini akan berjalan pada perangkat mobile berbasis android, maka perangkat lunak yang dibutuhkan handphone yang berOS android versi 2.2 (Froyo) ke atas. 2. Perangkat Lunak Pada Personal Computer ( PC ) Perangkat Lunak (software) yang diusulkan sebagai berikut: Tabel 3.21 Perangkat Lunak (Software) Yang Dibutuhkan  Adobe Flash Professional CS6  Java Development Kit 6 ( JDK ) Software Aplication

 Android SDK  Adobe Photoshop CS4


75

3.11 Rancangan Dialog Layar 3.11.1 Struktur Tampilan Berikut beberapa rancangan tampilan pada aplikasi pembelajaran tajwid: a. Tampilan Halaman Awal

Gambar 3.19 Tampilan Halaman Awal b. Tampilan Halaman Menu Utama

Gambar 3.20 Tampilan Halaman Menu Utama


76

c. Tampilan Halaman Menu Pengertian Tajwid

Gambar 3.21 Tampilan Halaman Menu Pengertian Tajwid d. Tampilan Halaman Menu Lafadz Allah

Gambar 3.22 Tampilan Halaman Menu Lafadz Allah


77

e. Tampilan Halaman Menu Alif Lam

Gambar 3.23 Tampilan Halaman Menu Alif Lam f. Tampilan Halaman Menu Mad

Gambar 3.24 Tampilan Halaman Menu Mad


78

g. Tampilan Halaman Menu Mim Mati

Gambar 3.25 Tampilan Halaman Menu Mim Mati h. Tampilan Halaman Menu Nun Mati/Tanwin

Gambar 3.26 Tampilan Gambar Menu Nun Mati/Tanwin


79

i. Tampilan Halaman Menu Qalqalah

Gambar 3.27 Tampilan Halaman Menu Qalqalah j. Halaman Menu Evaluasi

Gambar 3.28 Tampilan Halaman Menu Evaluasi (Isi Nama User)


80

Gambar 3.29 Tampilan Halaman Menu Evaluasi (Soal Evaluasi)

Gambar 3.30 Tampilan Halaman Menu Evaluasi (Total Score User)


81

k. Halaman Menu Video Belajar

Gambar 3.31 Tampilan Halaman Menu Video Belajar


BAB III ANALISA DAN PERANCANGAN SISTEM

Recommend Documents