Perancangan Basis Data Perancangan Antarmuka

69

4.2.2 Perancangan Basis Data

Dalam aplikasi ini, digunakan database yaitu berupa file Teks yang digunakan untuk aplikasi berbasis J2ME, database tersebut hanya digunakan untuk menyimpan kata potongan ayat atau indeks kata, jumlah kata, nomor surat nomor ayat, dan bunyi ayat-ayat Al-Qur’an pada Juz 30 dalam bentuk latin. Berikut gambar dari data Konkordansi A sd Z yang dimasukkan dalam bentuk file teks menggunakan Program Notepad yang kemudian dikategorikan pada masing-masing huruf. Gambar 4.10 Rancangan Basis Data Konkordansi Huruf A Keterangan dari gambar diatas:  Kata “Abaabiila” pada baris pertama menunjukkan kata potongan ayat atau indeks kata, dan “Jumlah 1,” merupakan jumlah kata tersebut diulang pada ayat Al-Qur’an juz 30. 70  Pada baris kedua, angka “105.3” menunjukkan nomor surat dan nomor ayat. Kemudian dibawah ini gambar dari data ayat Al-Qur’an dalam bentuk latin dari surat An Naba’ sampai An Naas yang dimasukkan menggunakan program Notepad pada masing-masing surat. Gambar 4.11 Rancangan Basis Data Surat An Naba Keterangan dari gambar diatas sebagai berikut: Pada baris pertama, Angka 78-1 merupakan nomor surat dan nomor ayat, kemudian “Amma yatasaa-aluun” adalah bunyi ayat tersebut dalam bentuk latin, begitu pula pada baris-baris berikutnya.

4.2.3 Perancangan Antarmuka

Dalam perancangan antarmuka, dibuat beberapa form dan list yang akan diuraikan sebagai berikut. 1. Form Splash Screen 71 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. 72 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. 73 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 sd Z pada masing-masing form. .Rancangan pada menu Daftar Konkordansi dapat dilihat pada gambar 4.15 dibawah ini: Judul Menu Menu-menu Isi Ticker 74 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 sd Z. Form ini berfungsi untuk menampilkan konkordansi kata yang dipilih oleh pengguna mulai dari Indeks A sd Indeks Z pada masing-masing form. Rancangan form Indeks A sd Z dapat dilihat pada gambar 4.16 dibawah ini. Judul Menu Huruf A : Kembali Gambar Huruf B Gambar Huruf Z Gambar 75 Gambar 4.16 Rancangan Form Indeks A sd 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 Kembali 76 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 77 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 78 Gambar 4.19 Rancangan List Menu Bantuan Tombol Kembali : berfungsi untuk beralih ke menu sebelumnya yaitu dari Menu Bantuan ke 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 PedomanKet Gambar 79 Gambar 4.20 Rancangan Form Panduan Fungsi dari tombol Kembali yaitu untuk beralih ke menu sebelumnya yaitu dari form Panduan ke 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 Kembali 80 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 Kembali 81 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 Kembali 82 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