Implementasi antar muka berguna sebagai tampilan bagi pengguna sistem.
Tujuan implementasi tampilan Antarmuka Aplikasi ini adalah untuk menerapkan perancangan yang telah dilakukan terhadap sistem sehingga user dapat memberi masukan demi berkembangnya sistem yang telah dibangun.
Implementasi tampilan dari aplikasi terdiri dari beberapa form disetiap bagiannya. Form tersebut mempunyai fungsi-fungsinya sendiri. Form tersebut akan berjalan berurutan sesuai dengan sistem yang telah dibuat.
a. Splash Screen
Splash screen adalah tampilan pertama program yang muncul sementara sebelum masuk ke menu utama. Berikut tampilan Splash Screen Aplikasi:
Gambar 4.1 Tampilan Splash Screen
b. Form Menu Utama
Pada tampilan awal ini terdapat menu pilihan bahasa Arab dan bahasa Inggris. Untuk melanjutkan ke menu selanjutnya, user harus memilih bahasa yang ingin dipelajari. Berikut tampilan menu utama:
Gambar 4.2 Tampilan menu utama c. Form Kategori
Form kategori adalah form yang menampilkan beberapa kategori yang dipelajari pada bahasa yang dipilih. Perbedaan kategori Bahasa Arab dan kategori Bahasa Inggris adalah di kategori Bahasa Arab kategori huruf hijaiyah, sedangkan di kategori Bahasa Inggris kategori alphabet. Berikut Tampilan Form Kategori:
Gambar 4.3 Tampilan Kategori Bahasa Arab
Gambar 4.4 Tampilan Kategori Bahasa Inggris d. Form Kategori Huruf Hijaiyah
Tampilan kategori huruf hijaiyah ini terdiri dari button-button pada bawah layar yang terdiri dari alif hingga ya, ketika button-button tersebut di klik, akan
muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan huruf hijaiyah. Berikut adalah tampilan kategori Huruf Hijaiyah :
Gambar 4.5 Tampilan Pop Up Huruf Hijaiyah
Gambar 4.6 Tampilan Kategori Huruf Hijaiyah e. Form Kategori Alfabet
Tampilan kategori alfabet ini terdiri dari button-button pada bawah layar yang terdiri dari a hingga z, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan alphabet yang di klik. Berikut adalah tampilan kategori alphabet:
Gambar 4.7 Tampilan Pop Up Alfabet
Gambar 4.8 Tampilan Kategori Alfabet f. Form Kategori Angka Arab
Tampilan kategori angka-angka Arab ini terdiri dari button-button pada bawah layar yang terdiri dari 1 hingga 10 dalam Bahasa Arab, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan angka Arab. Berikut adalah tampilan Kategori Angka Arab:
Gambar 4.9 Tampilan Pop Up Angka Arab
Gambar 4.10 Tampilan Kategori Angka Arab g. Tampilan Kategori Angka Inggris
Tampilan kategori angka-angka Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari 1 hingga 10, ketika button-button tersebut di klik, akan
muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan angka yang di klik. Berikut ini tampilan Kategori Angka Inggris :
Gambar 4.11 Tampilan Pop Up Angka Inggris
Gambar 4.12 Tampilan Kategori Angka Inggris h. Tampilan Kategori Buah-Buahan Arab
Tampilan kategori buah-buahan Arab ini terdiri dari button-button pada bawah layar yang terdiri dari bermacam-macam buah-buahan, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan buah yang di klik. Berikut ini tampilan Kategori Buah-buahan Arab:
Gambar 4.13 Tampilan Pop Up Buah-Buahan Arab
Gambar 4.14 Tampilan Kategori Buah-buahan Arab
i. Tampilan Kategori Buah-buahan Inggris
Tampilan kategori buah-buahan Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari bermacam-macam buah-buahan, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan buah yang di klik. Berikut ini tampilan Kategori Buah-buahan Inggris:
Gambar 4.15 Tampilan Pop Up Buah-Buahan Inggris
Gambar 4.16 Tampilan Kategori Buah-Buahan Inggris j. Tampilan Kategori Hewan-Hewan Arab
Tampilan kategori hewan-hewan Arab ini terdiri dari button-button pada bawah layar yang terdiri dari bermacam-macam hewan-hewan, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan hewan yang di klik. Berikut tampilan Kategori Hewan-Hewan Arab:
Gambar 3.17 Tampilan pop up hewan-hewan Arab
Gambar 3.18 Tampilan Kategori Hewan-Hewan Arab k. Tampilan kategori hewan-hewan Inggris
Tampilan kategori hewan-hewan Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari bermacam-macam hewan-hewan, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan hewan yang di klik. Berikut Tampilan Kategori Hewan-Hewan Inggris:
Gambar 3.19 Tampilan pop up hewan-hewan Inggris
Gambar 3.20 Tampilan kategori hewan-hewan Inggris l. Tampilan kategori Kalender Arab
Tampilan kategori Kalender Arab ini terdiri dari button-button pada bawah layar yang terdiri dari bulan-bulan hijriyah dan hari-hari dalam seminggu dalam Bahasa Arab, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan bulan hijriyah atau hari yang di klik. Berikut tampilan kategori Kalender Arab:
Gambar 3.21 Tampilan pop kalender Arab
Gambar 3.22 Tampilan kategori kalender Arab m. Tampilan kategori Kalender Inggris
Tampilan kategori Kalender Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari bulan-bulan dalam satu tahun dan hari-hari dalam seminggu ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan bulan atau hari yang di klik. Berikut tampilan kategori Kalender Inggris:
Gambar 3.23 Tampilan pop up kalender Inggris
Gambar 3.24 Tampilan kategori kalender Inggris
n. Tampilan kategori kendaraan Arab
Tampilan kategori kendaraan Arab ini terdiri dari button-button pada bawah layar yang terdiri dari bermacam-macam kendaraan-kendaraan yang umum dijumpai, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan kendaraan yang di klik. Berikut tampilan kategori kendaraan Arab:
Gambar 3.25 Tampilan Pop Up Kendaraan Arab
Gambar 3.26 Tampilan Kategori Kendaraan Arab o. Tampilan Kategori Kendaraan Inggris
Tampilan kategori kendaraan Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari bermacam-macam kendaraan-kendaraan yang umum dijumpai, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan kendaraan yang di klik. Berikut tampilan Kategori Kendaraan Inggris:
Gambar 3.27 Tampilan Pop Up Kendaraan Inggris
Gambar 3.28 Tampilan Kategori Kendaraan Inggris p. Tampilan kategori bagian tubuh Arab
Tampilan kategori bagian tubuh Arab ini terdiri dari button-button pada bawah layar yang terdiri dari beberapa bagian tubuh, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan bagian tubuh yang di klik. Berikut Tampilan Kategori Bagian Tubuh Arab:
Gambar 3.29 Tampilan Pop Up Bagian Tubuh Arab
Gambar 3.30 Tampilan Kategori Bagian Tubuh Arab q. Tampilan Kategori Bagian Tubuh Inggris
Tampilan kategori bagian tubuh Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari beberapa bagian tubuh, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan bagian tubuh yang di klik. Berikut Tampilan Kategori Bagian Tubuh Inggris:
Gambar 3.31 Tampilan Pop Up Bagian Tubuh Inggris
Gambar 3.32 Tampilan Kategori Bagian Tubuh Inggris r. Tampilan Kategori Warna-Warna Arab
Tampilan kategori warna-warna Arab ini terdiri dari button-button pada bawah layar yang terdiri dari warna-warna dasar, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan warna yang di klik. Berikut antarmuka tampilan Kategori Warna-Warna Arab:
Gambar 3.33 Tampilan Pop Up Warna-Warna Arab
Gambar 3.34 Tampilan Kategori Warna-Warna Arab
s. Tampilan Kategori Warna-Warna Inggris
Tampilan kategori warna-warna Inggris ini terdiri dari button-button pada bawah layar yang terdiri dari warna-warna dasar, ketika button-button tersebut di klik, akan muncul pop up pada tengah layar dan juga muncul audio yang sesuai dengan bagian tubuh yang di klik. Berikut tampilan Kategori Warna-Warna Inggris:
Gambar 3.35 Tampilan pop up warna-warna Inggris
Gambar 3.36 Tampilan kategori warna-warna Inggris