Perancangan Antarmuka

BAB IV PERANCANGAN PROGRAM DAN IMPLEMENTASI

4.2 Fase Perancangan

4.2.3 Perancangan Antarmuka

Dalam perancangan antarmuka, dibuat beberapa form dan list

yang akan diuraikan sebagai berikut.

1. Form Splash Screen

Gambar Splash Screen

Form Splash Screen merupakan tampilan awal ketika aplikasi

Panduan Kata Dalam Mencari Ayat Al Quran Juz 30 Berbasis Java

Mobile ini dijalankan pada perangkat device. Form ini menampilkan

gambar yang telah penulis rancang berisi nama Aplikasi dan pembuat.

Tampilan gambar ini berdurasi sekitar 5 detik sebagai menu pembuka

yang kemudian akan secara otomatis menuju ke menu utama.

Rancangan Form Splash Screen dapat dilihat pada gambar 4.12

di bawah ini.

Gambar 4.12 Rancangan Form Splash Screen

2. List Menu Utama

List ini berfungsi untuk menampilkan menu utama

yang terdapat dalam aplikasi antara lain, Menu Daftar

Konkordansi, Menu Pencarian Kata, Menu Bantuan, dan

Menu Tentang. Nantinya pengguna dapat memilih menu

tersebut sesuai dengan keinginan atau kebutuhan.

Rancangan dari List menu utama dapat dilihat pada

gambar 4.13 di bawah ini.

Judul Menu

Daftar Konkordansi

Gambar

Ticker

Pencarian Kata

Gambar

Bantuan

Gambar

Tentang

Gambar

Keluar

Gambar

Gambar 4.13 Rancangan List Menu Utama

a) Menu Daftar Konkordansi berfungsi untuk

menampilkan list konkordansi huruf A sampai Z.

b) Menu Pencarian Kata : berfungsi untuk menampilkan

menu form cari kata. Pengguna dapat mengetikkan kata

yang dibutuhkan pada area yang telah disediakan.

c) Menu Bantuan : berfungsi untuk menampilkan list menu

bantuan yaitu menu Panduan Aplikasi, menu Kata

Berawalan, menu Kata Pelengkap, menu Daftar Surat,

menu Pedoman & Keterangan, dan menu Kritik dan

Saran.

d) Menu Tentang : berfungsi untuk menampilkan list menu

tentang program yaitu menu Tentang Program, menu

Sumber Referensi, dan menu Terima Kasih.

e) Menu Keluar : berfungsi untuk keluar dari aplikasi.

3. Ticker sambutan

Ticker adalah animasi teks berjalan yang berfungsi

untuk menampilkan pesan atau informasi yang

berulang-ulang dari posisi kanan ke kiri kepada pengguna. Rancangan

Ticker sambutan dapat dilihat pada gambar 4.14 dibawah ini:

Gambar 4.14 Rancangan Ticker Sambutan

4. List Daftar Konkordansi

List ini berfungsi untuk menampilkan Daftar

Konkordansi kata berdasarkan urutan huruf abjad dari A s/d

Z pada masing-masing form. .Rancangan pada menu Daftar

Konkordansi dapat dilihat pada gambar 4.15 dibawah ini:

Judul Menu

Menu-menu

Gambar 4.15 Rancangan List Daftar Konkordansi

Tombol Kembali berfungsi untuk beralih ke menu

sebelumnya yaitu dari menu Daftar Konkordansi menuju

daftar menu utama.

5. Form Indeks A s/d Z.

Form ini berfungsi untuk menampilkan konkordansi

kata yang dipilih oleh pengguna mulai dari Indeks A s/d

Indeks Z pada masing-masing form.

Rancangan form Indeks A s/d Z dapat dilihat pada

gambar 4.16 dibawah ini.

Judul Menu

Huruf A

:

Kembali

Gambar

Huruf B

Gambar

Huruf Z

Gambar

Gambar 4.16 Rancangan Form Indeks A s/d Z

Tombol Kembali : berfungsi untuk beralih ke menu

sebelumnya yaitu dari form Indeks Huruf ke Daftar

Konkordansi.

6. Form Pencarian Kata

Form ini berfungsi untuk menampilkan text box

untuk mengisi kata yang akan dicari yang harus diisi oleh

pengguna. Yang kemudian akan ditampilkan hasilnya yang

mengandung kata yang dimasukkan oleh pengguna.

Rancangan form Pencarian Kata dapat dilihat pada

gambar 4.17 dibawah ini.

Judul Menu

Isi dari Kategori Yang Dipilih

Gambar 4.17 Rancangan Form Pencarian Kata

Fungsi dari tombol Cari dan tombol Kembali yaitu:

a) Tombol Kembali : berfungsi untuk

menampilkan menu sebelumnya yaitu menu

utama.

b) Tombol Cari : berfungsi untuk menjalankan

perintah dari pengguna yang telah mengetikkan

kata pada form hasil cari dan kemudian

ditampilkan form hasil pencarian tersebut.

7. Form Hasil Cari

Form ini berfungsi untuk menampilkan semua hasil

pencarian berupa indeks kata, jumlah kata, nomor surat dan

nomor ayat, dan bunyi ayat seutuhnya dalam bentuk latin.

Rancangan form hasil cari dapat dilihat pada gambar 4.18.

Judul Menu

Area Input Kata

Kembali

Cari

Gambar 4.18 Rancangan Form Hasil Cari

Fungsi dari tombol Kembali dan tombol Keluar

yaitu:

a) Tombol Kembali : berfungsi untuk menampilkan

menu sebelumnya yaitu menu utama.

b) Tombol Keluar : berfungsi untuk keluar dari

aplikasi..

8. List Bantuan

List ini berfungsi untuk menampilkan informasi

mengenai panduan dalam mencari ayat Al Quran, penjelasan

kata berawalan, dan daftar surat pada Juz 30. Rancangan List

Bantuan dapat dilihat pada gambar 4.19 dibawah ini.

Judul Menu

Hasil Pencarian

Kembali

Keluar

Gambar 4.19 Rancangan List Menu Bantuan

Tombol Kembali : berfungsi untuk beralih ke menu

sebelumnya yaitu dari Menu Bantuanke Menu Utama.

9. Form Panduan

Form ini berfungsi untuk menampilkan informasi

tentang panduan dalam mencari ayat Al Quran, contoh

penulisan kata, dan bunyi huruf hijaiyah dalam aplikasi ini.

Rancangan form panduan dapat dilihat pada gambar 4.20

dibawah ini.

Judul Menu

Menu Panduan Aplikasi

Keluar Kembali

Gambar

Menu Kata Berawalan

Gambar

Menu Kata Pelengkap

Gambar

Menu Daftar Surat

Gambar

Menu Pedoman&Ket

Gambar

Gambar 4.20 Rancangan Form Panduan

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Panduanke Menu Bantuan.

10.Form Kata Berawalan

Form ini berfungsi untuk menampilkan informasi

tentang penjelasan kata berawalan dan sebagian daftar

kata-kata berawalan. Rancangan form kata berawalan dapat dilihat

pada gambar 4.21 dibawah ini.

Gambar 4.21 Rancangan Form Kata Berawalan

Judul Menu

Isi Panduan

Kembali

Judul Menu

Daftar Kata Berawalan

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Kata Berawalan ke Menu

Bantuan.

11.Form Kata Pelengkap

Form ini berfungsi untuk menampilkan informasi

tentang penjelasan kata pelengkap dan sebagian daftar

kata-kata Pelengkap. Rancangan form kata pelengkap dapat dilihat

pada gambar 4.22 dibawah ini.

Gambar 4.22 Rancangan Form Kata Pelengkap

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Kata Berawalan ke Menu

Bantuan.

12.Form Daftar Surat Juz 30

Form ini berfungsi untuk menampilkan daftar surat

pada Juz 30 menurut urutan nomor. Rancangan form Daftar

Surat Juz 30 dapat dilihat pada gambar 4.23 dibawah ini.

Judul Menu

Daftar Kata Pelengkap

Gambar 4.23 Rancangan form Daftar Surat Juz 30

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Daftar Surat Juz 30 ke

Menu Bantuan.

13.Form Pedoman dan Keterangan

Form ini berfungsi untuk menampilkan informasi

antara lain panduan mencari ayat, transkripsi huruf hijaiyah

beserta sebutannya dalam kata latin, kemudian penjelasan

tentang kata potongan ayat atau indeks kata dan cara bacanya.

Rancangan form kata berawalan dapat dilihat pada gambar

4.24 dibawah ini.

Gambar 4.24 Rancangan Form Pedoman dan Keterangan

Judul Menu

Daftar Surat

Kembali

Judul Menu

Isi Pedoman & Ket

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Pedoman dan Keterangan

ke Menu Bantuan.

14.List Tentang

List ini berfungsi menampilkan informasi mengenai

tentang program, sumber buku yang menjadi rujukan, dan

ucapan terima kasih. Rancangan List Tentang dapat dilihat

pada gambar 4.25 Dibawah ini.

Gambar 4.25 Rancangan List Tentang Program

Fungsi dari tombol Kembali dan tombol Keluar

yaitu:

a. Tombol Kembali : berfungsi untuk beralih ke

menu sebelumnya yaitu dari Menu Tentang

Program ke Menu Utama.

b. Tombol Keluar : berfungsi untuk menutup

aplikasi atau keluar dari aplikasi.

Judul Menu

Menu Tentang Program

Keluar Kembali

Gambar

Menu Sumber Referensi

Gambar

Menu Terima Kasih

Gambar

13.Form Tentang Program

Form ini berfungsi untuk menampilkasn informasi

mengenasi nama aplikasi, versi aplikasi , nama pembuat

aplikasi dan alamat email. Rancangan aplikasi dapat dilihat

pada gambar 4.26 dibawah ini.

Gambar 4.26 Rancangan Form Tentang Program

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Tentang Program ke Menu

Tentang.

14.Form Sumber Referensi

Form ini berfungsi untuk menampilkan informasi

mengenai buku-buku yang menjadi rujukan dalam aplikasi

ini. Rancangan form ini dapat dilihat pada gambar 4.27

dibawah ini.

Judul Menu

Informasi Tentang Program

Gambar 4.27 Rancangan Form Sumber Referensi

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Sumber Referensi ke Menu

Tentang.

15.Form Ucapan

Form ini berfungsi untuk menampilkan informasi

mengenai ucapan terima kasih kepada para dosen dan

kawan-kawan yang telah membantu dalam proses pembuatan

aplikasi. Rancangan form ini dapat dilihat pada gambar 4.28

dibawah ini.

Gambar 4.28 Rancangan Form Ucapan

Judul Menu

Daftar Referensi

Kembali

Judul Menu

Daftar Nama

Kembali

Fungsi dari tombol Kembali yaitu untuk beralih ke

menu sebelumnya yaitu dari form Ucapan ke Menu Tentang.