BAB III ANALISA DAN PERANCANGAN SISTEM

(1)

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. 2. Pada menu tajwid disertai

dengan penjelasan, contoh, dan audio.

1. Tidak semua di menu tajwid terdapat audio.

2. Tidak terdapat video. 3. Tidak terdapat animasi.

(2)

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

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.

1. Tampilan yang cukup menarik karena pada tiap tajwid menggunakan warna dan masing-masing tajwid tersebut

1. Dalam mengakses isi aplikasi sebelumnya dibutuhkan koneksi GPRS.

(3)

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

3. Aplikasi Tajweed

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.

(4)

1. Tidak ada. 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

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.

(5)

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:

(6)

Tabel 3.4 Tabel Analisa Parameter Pembanding

No Jenis Parameter Aplikasi

Belajar Tajwid Aplikasi iTajweed

Aplikasi Tajweed Aplikasi Pembelajaran Tajwid

(Usulan)

1 Aplikasi Android Android Android Android

2 Bahasa Pemograman Java Java Java Flash ActionScript 3.0, Java

3 Tampilan Cukup Menarik Sederhana Sederhana Menarik

4 Ukuran File 6.1 Mb 143 Kb 1,7 Mb 8.58 Mb

5 Platform Android 1.5 and up 2.1 and up 2.3.3 and up 2.2 and up

6 Harga Gratis Gratis Gratis Gratis

7 Content

1. Memiliki 9 menu.

2. Terdapat penjelasan dan contoh tajwid yang dibahas.

1. Memiliki 9 menu. 2. Tidak terdapat penjelasan

tajwid yang dibahas.

1. Memiliki 5 menu. 2. Tidak terdapat

contoh tajwid yang dibahas.

1. Memiliki 8 menu.

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

kuis.

8 Fitur

1. Terdapat audio namun tidak di semua menu tajwid.

2. Tidak terdapat video.

1. Tidak terdapat audio. 2. Tidak terdapat video. 3. Tidak terdapat animasi.

1. Tidak terdapat audio.

2. Tidak terdapat video.

1. Terdapat audio di semua menu tajwid

2. Terdapat video. 3. Terdapat animasi.

(7)

3.2 Kerangka Pemikiran

Gambar 3.4 Kerangka Pemikiran

Batasan Masalah:

1. Aplikasi ini hanya bisa diakses melalui

handphone dengan sistem operasi android

versi (Froyo) 2.2 keatas.

2. Data yang disajikan dalam bentuk teks, gambar, audio, video, dan animasi. 3. Hanya terdapat 6 kategori tajwid, yaitu

Lafadz Allah, Alif Lam, Mad, Mim Mati, Nun Mati atau Tanwin, dan Qalqalah. Trend Teknologi:

Platform Android.

Kondisi Saat Ini:

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

Rumusan Masalah:

 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. Tujuan:

Memberikan alternatif untuk membantu umat muslim dalam mempelajari tajwid.

Konsep Design:

Aplikasi yang diinstal pada handphone berbasis android. Perancangan: 1. Adobe Flash Professional CS 6 2. Adobe Photoshop CS4. 3. Android SDK

4. Adobe Air Implementasi dan Pengujian.

aplikasi

Kesimpulan:

Aplikasi pembelajaran tajwid ini menjadi alternatif untuk membantu umat muslim dalam mempelajari tajwid, serta layak untuk dipublikasikan dan digunakan. Evaluasi.

jika tidak ada error

Studi Literatur:

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

2. Buku tajwid. 3. Buku android. 4. Media internet.

jika ada error

Pemeliharaan dan pengembangan aplikasi.

(8)

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

(9)

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.

(10)

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.

(11)

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

Deskripsi: Setelah user mendapatkan file eksekusi (.apk) aplikasi pada

smartphonenya, maka ketika file eksekusi tersebut ditekan akan ada penginstalan aplikasi.

.

1. Sistem menampilkan tampilan untuk penginstalan. 2. User memilih instal

pada smartphonenya

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

Tabel 3.7 Skenario Use Case Jalankan Aplikasi

Nama Use Case: Jalankan Aplikasi

Deskripsi: Setelah penginstalan selesai, maka user bisa menjalankan

aplikasi.

1. User akan melihat icon pada layar smartphone

dari aplikasi

pembelajaran tajwid.

(12)

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

Deskripsi: User memilih menu keluar.

.

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.

(13)

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.

: User

: User Halaman AwalHalaman Awal

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

: User Halaman AwalHalaman Awal Menu UtamaMenu Utama

1. Membuka aplikasi

3. Memilih menu utama

4. Menampilkan halaman menu utama

(14)

c. Sequence Diagram User: Menu Pengertian Tajwid

Pada sequence diagram ini menjelaskan user memilih menu pengertian tajwid. Dihalaman ini berisi penjelasan pengertian tajwid.

: User

: User Menu UtamaMenu Utama Menu Pengertian Tajwid Menu Pengertian

Tajwid 1. Memilih menu utama

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

: User Menu UtamaMenu Utama Menu Lafadz Allah Menu Lafadz

Allah 1. Memilih menu utama

3. Memilih menu lafadz allah

4. Menampilkan halaman menu lafadz allah

(15)

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

: User Menu UtamaMenu Utama Menu Alif LamMenu 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.

(16)

: User

: User Menu UtamaMenu Utama Menu MadMenu 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

: User Menu UtamaMenu Utama Menu Mim MatiMenu 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

(17)

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

: User Menu UtamaMenu Utama Menu Nun Mati/Tanwin

Menu Nun Mati/Tanwin 1. Memilih menu utama

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

: User Menu UtamaMenu Utama Menu QalqalahMenu Qalqalah

3. Memilih menu qalqalah

4. Menampilkan halaman menu qalqalah

(18)

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

: User Menu UtamaMenu Utama Menu EvaluasiMenu 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

: User Menu UtamaMenu Utama Menu Video Belajar Menu Video

Belajar 1. Memilih menu utama

3. Memilih menu video belajar

4. Menampilkan halaman menu video belajar

(19)

l. Sequence Diagram User: Menu Keluar

Pada sequence diagram ini menjelaskan user memilih menu keluar yang berarti user memilih untuk keluar dari aplikasi.

: User

: User Halaman AwalHalaman Awal Menu KeluarMenu 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

(20)

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.

(21)

Halaman Awal Menu Utama Pengertian Tajwid Lafadz Allah Evaluasi

Alif Lam Mad Mim Mati Nun Mati/

Tanwin Qalqalah Tafkhim Tarqiq Qamariyah Syamsiyah Sughra Kubra Menu Keluar Mad Lazim Mukhaffaf Harfi Idzhar Safawi Ikhfa Safawi Idghom Mutamatsilain Idzhar Ikhfa Iqlab Idghom Bilagunnah Idghom Bigunnah Mad Thabi'i Mad Layyin Mad Shilah Qashirah Mad Shilah Mad Iwad Mad Lazim Mutsaqqal Kalimi Mad Lazim Mukhaffaf Kalimi

Mad Lazim Harfi Mad Wajib

Muttashil Mad Jaiz Munfashil

Mad Arid Lisukun

Mad Badal Mad Tamkin

Video Belajar

(22)

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 Audio Keterangan

Awal Backsound lagu insya allah versi instrumental . Background : Gambar masjid. Image View: Gambar bismillah. 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.

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.

Background 1 2 A1 A2 A3 Image View

(23)

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 yang

menggerakkan tangannya.

(24)

Menu Utama Backsound lagu insya allah versi instrumental . Background :

Gambar padang pasir.

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.

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. Background 1 2 3 4 5 6 7 8 9 A2 A1

(25)

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.

(26)

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 berganti-ganti warna.

Animasi[A2]:

Matahari yang

(27)

Menu Pengertian Tajwid Suara yang menjelaskan tentang pengertian tajwid. Background :

Gambar padang pasir.

Teks View: Teks bertuliskan penjelasan mengenai pengertian tajwid. 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.

Animasi [A1]:

Teks bertuliskan "PENGERTIAN

TAJWID" yang berganti-ganti warna.

Animasi [A2]:

Orang yang

menggerakkan mata dan mulutnya. Background 1 A1 A2 Text View

(28)

Menu Lafadz Allah

Tidak ada. Background :

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. 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.

Background 3 2

(29)

Menu Alif Lam

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. 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.

Background 1

(30)

Menu Mad Tidak ada. Background :

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.

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. Background 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

(31)

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.

(32)

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.

(33)

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.

(34)

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.

(35)

Menu Mim Mati

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. 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.

Background 1

2 3

(36)

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

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. 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. Background 1 2 5 6 3 4

(37)

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.

(38)

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

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. 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.

Background 1

(39)

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,

Button [1]:

Button [2]:

Tombol bergambar

speaker untuk

mengeluarkan suara dari contoh tajwid yang pertama dan ketika tombol ditekan akan ada efek animasi seperti menekan tombol. Background 1 3 2 A1 A2 4 A3 Image View1 Image View2 Image View3 Teks View

(40)

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.

(41)

Image View [3]

Gambar contoh tajwid yang ketiga. Menu Evaluasi (Isi Nama User) Backsound tanda baca versi intrumental. Background : Gambar taman. Button [1]: 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. Background A1 A2 Text View 1 Static Text

(42)

Menu Evaluasi (Soal Evaluasi) 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.

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. Background 1 A1 2 5 Static Text 3 4 Image/Text View 2 Image/Text View 3 Image/Text View 4 Image/Text View 1 A3 A2 A4

(43)

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.

Pilihan jawaban pertama evaluasi, dapat berupa gambar ataupun teks.

Pilihan jawaban kedua evaluasi, dapat berupa gambar ataupun teks.

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.

(44)

Animasi[A1]:

Teks bertuliskan "Soal Evaluasi" yang tiap hurufnya bergerak naik turun.

Animasi[A2]:

Matahari yang

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 Background :

Gambar taman.

Button [1]:

Text View[1]:

Teks bertuliskan "Total Score". Background 1 Static Text 1 Static Text 2 Text View 1 A3 A2

(45)

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

Animasi[A2]:

Awan yang bergerak dari kiri ke kanan tanpa berhenti.

Menu Video Belajar

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 1 V1 A1 A2

(46)

Video[V1]: Video yang menampilkan pembelajaran tajwid. Animasi [A1]: Teks bertuliskan "VIDEO BELAJAR" yang berganti-ganti warna. Animasi [A2]: 2 orang yang menggerakkan tangannya.

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

(47)

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 ber-OS 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

Software Aplication

 Adobe Flash Professional CS6  Java Development Kit 6 ( JDK )  Android SDK

(48)

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

(49)

c. Tampilan Halaman Menu Pengertian Tajwid