Perancangan Antarmuka Struktur menu Pengunjung

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