66
b. Struktur menu Pengunjung
Menu pengguna
Home
Huruf hijaiyah
Huruf Mad
Qalqalah
izhar
latihan iqlab
idgham
ikhfaa Pengguna
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Lihat
Gambar 3.15 Struktur menu pengunjung
3.3.2 Perancangan Antarmuka
Bagian dari perancangan sistem e-learning ini adalah perancangan antarmuka untuk pengguna. Antarmuka menghubungkan pengguna dengan
67
sistem, jadi peranannya sangat penting. Perancangan antarmuka situs secara umum dapat dilihat pada Gambar dibawah :
T01
Selamat Datang
Home Huruf
Hijaiyah Mad
T01
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan
Keterangan : Nama Form
: T01 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Home akan menuju ke T01
Klik Huruf Hijaiyah akan menuju ke T02
Klik Mad akan menuju ke T03
Klik Qalqalah akan menuju ke T04
Klik Idzhar akan menuju ke T05
Klik Idgham akan menuju ke T06
Klik Iqlab akan menuju ke T07
Klik Ikhfa akan menuju ke T08
Klik Latihan akan menuju ke T09
Gambar 3.16 tampilan menu utama pengguna
Mad
T02
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
No Bahasa
Nama Materi Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T02 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T02A
Gambar 3.17 tampilan menu materi huruf hijaiyah Sebelum Sound Di klik
68
Mad
T02A
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
No Bahasa
Nama Materi Sound
Gambar Huruf Hijaiyah dan Deskripsinya
Keterangan : Nama Form
: T02A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Huruf Hijaiyah dan deskripsinya
Contoh suara Pengucapan
Gambar 3.18 tampilan menu materi huruf hijaiyah Setelah Sound Di klik
T03
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T03 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T03A
Gambar 3.19 tampilan menu materi Mad Sebelum Sound Di klik
T03A
Home Qalqalah
Idzhar Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi No
Bahasa Sound
Gambar Contoh Mad dan Deskripsinya
Keterangan : Nama Form
: T03A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Mad dan deskripsinya
Contoh suara Pengucapan
Gambar 3.20 tampilan menu materi Mad Setelah Sound Di klik
69
T04
Home Idzhar
Idgham Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T04 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T04A
Gambar 3.21 tampilan menu materi qalqalah Sebelum Sound Di klik
T04A
Home Idzhar
Idgham Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah No
Bahasa Sound
Gambar Contoh Qalqalah dan Deskripsinya
Keterangan : Nama Form
: T04A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Qalqalah dan deskripsinya
Contoh suara Pengucapan
Gambar 3.22 tampilan menu materi qalqalah Setelah Sound Di klik
T05
Home Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi Qalqalah
Idzhar No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T05 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T05A
Gambar 3.23 tampilan menu materi Idzhar Sebelum Sound Di klik
70
T05A
Home Idgham
Iqlab Ikhfaa
Latihan Huruf Hijaiyah
Nama Materi Mad
Deskripsi Materi Qalqalah
Idzhar No
Bahasa Sound
Gambar Contoh Idzhar dan Deskripsinya
Keterangan : Nama Form
: T05A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Idzhar dan deskripsinya
Contoh suara Pengucapan
Gambar 3.24 tampilan menu materi idzhar setelah Sound Di klik
T06
Home Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Idgham No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T06 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T06A
Gambar 3.25 tampilan menu materi Idghom Sebelum Sound Di klik
T06A
Home Iqlab
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Idgham No
Bahasa Sound
Gambar Contoh Idgham dan Deskripsinya
Keterangan : Nama Form
: T06A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Idgham dan deskripsinya
Contoh suara Pengucapan
Gambar 3.26 tampilan menu materi idghom Seetelah Sound Di klik
71
T07
Home Idgham
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Iqlab No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T07 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T07A
Gambar 3.27 tampilan menu materi Iqlab Sebelum Sound Di klik
T07A
Home Idgham
Ikhfaa Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Iqlab
Keterangan : Nama Form
: T07A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
No Bahasa
Sound Gambar Contoh Iqlab dan
Deskripsinya Gambar Contoh Iqlab dan
deskripsinya Contoh suara Pengucapan
Gambar 3.28 tampilan menu materi Iqlab Setelah Sound Di klik
T08
Home Idgham
Iqlab Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Ikhfaa No
Bahasa Sound
Gambar Awal Deskripsi Kosong
Keterangan : Nama Form
: T08 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik maka akan menuju ke T08A
Gambar 3.29 tampilan menu materi Ikhfa Sebelum Sound Di klik
72
T08A
Home Idgham
Iqlab Latihan
Huruf Hijaiyah Nama Materi
Mad Deskripsi Materi
Qalqalah Idzhar
Ikhfaa No
Bahasa Sound
Gambar Contoh Ikhfa dan Deskripsinya
Keterangan : Nama Form
: T08A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Gambar Contoh Ikhfa dan deskripsinya
Contoh suara Pengucapan
Gambar 3.30 tampilan menu materi Ikhfa Setelah Sound Di klik
T09
Home Idgham
Iqlab Ikhfaa
Huruf Hijaiyah Mad
Qalqalah Idzhar
Latihan Petunjuk
Mulai Latihan
Keterangan : Nama Form
: T09 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Mulai Latihan akan menuju ke T09A
Gambar 3.31 tampilan menu awal latihan
T09A
Home Idgham
Iqlab Ikhfaa
Huruf Hijaiyah Mad
Qalqalah Idzhar
Latihan Latihan
Lanjutkan
Keterangan : Nama Form
: T09A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Mulai Latihan akan menuju ke T09A
Klik Lanjutkan akan menuju soal berikutnya
Soal Jawaban
Gambar 3.32 tampilan menu latihan
73
T010
Nama Password
Log in
Keterangan : Nama Form
: T010 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Log in akan menuju ke T011
Gambar 3.33 tampilan menu login
T011
Pengguna Materi
Latihan Halaman utama
Selamat Datang Halaman utama
Keluar
Keterangan : Nama Form
: T011 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Halaman utama akan menuju ke T011
Klik Pengguna akan menuju ke T012
Klik Materi akan menuju ke T012
Klik Latihan akan menuju ke T012
Klik Keluar akan menuju ke T01
Gambar 3.34 tampilan halaman utama admin
T012
Materi Latihan
Halaman utama Keluar
Pengguna
Tambahkan Username
No Hapus
Lock User name
Password
Keterangan : Nama Form
: T012 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Tambahkan maka akan menuju T012 user
bertambah Klik Hapus maka akan
menuju T012 User berkurang
Lock = Admin yang sedang login tidak bisa di
hapus
Gambar 3.35 tampilan menu Pengolahan Pengguna Admin
74
T013
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Tambah Materi maka akan menuju ke T013
Klik Hijaiyah Maka Akan menuju ke T013A
Klik Mad Maka Akan menuju ke T013B
Klik Qalqalah Maka Akan menuju ke T013C
Klik Izhar Maka Akan menuju ke T013D
Klik Idghom Maka Akan menuju ke T013E
Klik Ikhfa Maka Akan menuju ke T013F
Klik Iqlab Maka Akan menuju ke T013G
Kategori Latin
Suara Gambar
Browse Browse
Text Editor
Gambar 3.36 tampilan menu tambah materi
T013A
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013A Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Hijaiyah Maka Akan menuju ke T013A
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.37 tampilan menu hapus dan ubah materi hijaiyah
75
T013B
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013B Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Hijaiyah Maka Akan menuju ke T013B
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.38 tampilan menu hapus dan ubah materi mad
T013C
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013C Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Qalqalah Maka Akan menuju ke T013C
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.39 tampilan menu hapus dan ubah materi qalqalah
76
T013D
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013D Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Izhar Maka Akan menuju ke T013D
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.40 tampilan menu hapus dan ubah materi izhar
T013E
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013E Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Idghom Maka Akan menuju ke T013E
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.41 tampilan menu hapus dan ubah materi Idghom
77
T013F
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013F Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Ikhfa Maka Akan menuju ke T013F
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.42 tampilan menu hapus dan ubah Ikhfa
T013G
Latihan Halaman utama
Latihan Pengguna
Tambah Materi Hijaiyah
Materi Iqlab
Ikhfa Idghom
Izhar qalqalah
Mad
Keterangan : Nama Form
: T013G Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Iqlab Maka Akan menuju ke T013G
Klik Hapus Maka Akan menghapus materi
Klik Ubah Maka menuju ke T013
No Latin
Gambar Suara
Hapus Ubah
Hapus Ubah
Hapus Ubah
Gambar 3.43 tampilan menu hapus dan ubah materi Iqlab
78
T014
Latihan Halaman utama
Keluar Pengguna
Tambah Soal Soal Latihan
Materi
No Soal
Kategori Urutan
Hapus Hapus
Keterangan : Nama Form
: T014 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Klik Tambah Soal maka akan menuju T015
Klik Soal Latihan maka akan menuju T014
Gambar 3.44 tampilan menu soal latihan
T015
Latihan Halaman utama
Keluar Pengguna
Tambah Soal Soal Latihan
Materi
Keterangan : Nama Form
: T015 Ukuran Layar
: Dinamis Default 1024x768 UkuranFont
: Times New Roman 10-12 Warna Latar
: Hijau, putih
Pilih Materi yang akan menjadi soal
Materi
Gambar 3.45 tampilan menu Tambah Soal
79
3.3.3 Jaringan Semantik Admin