3.3.6 Desain Antarmuka
3.3.6.1 Desain Antarmuka Website Admin
Gambar 3.52 Desain Antarmuka Website Admin Halaman Login
Pada Gambar 3.52 menggambarkan desain antarmuka halaman login pada Gambar 3.21 sitemap website admin. Halaman login mempunyai konten gambar logo aplikasi, kolom input email, kolom input password dan tombol login. Halaman login akan diimplementasikan flowchart menu login admin pada gambar 3.23. Pada halaman login admin diminta untuk memasukkan username dan password untuk bisa memasuki halaman utama website admin.
Gambar 3.53 Desain Antarmuka Website Admin Halaman Dashboard
Pada Gambar 3.53 menggambarkan desain antarmuka halaman dashboard pada Gambar 3.21 sitemap website admin. Halaman dashboard mempunyai konten header, navigasi kiri, dan data-data dashboard seperti jumlah pengguna dan jumlah subbab pada sistem gamifikasi pembelajaran matematika SMP. Pada halaman website admin setelah login akan selalu terdapat navigasi kiri dan header. Pada halaman dashboard akan mengimplementasikan flowchart menu dashboard pada Gambar 3.24.
Gambar 3.54 Desain Antarmuka Website Admin Halaman Admin
Pada Gambar 3.54 menggambarkan desain antarmuka halaman admin pada Gambar 3.21 sitemap website admin. Halaman admin mempunyai konten toolbar, breadcrumb, daftar tabel akun admin dan pagination. Pada halaman admin akan mengimplementasikan flowchart menu admin pada gambar 3.25. Toolbar pada halaman admin dan halaman lainnnya akan memiliki fitur seperti cetak, ekspor ke excel, filter, refresh, menghapus filter, menghapus cache dan menyembunyikan column agar fit. Daftar tabel akun admin akan berisikan tabel yang menampilkan data-data akun admin. Dalam tabel tersebut dapat menghapus dan menambahkan akun admin yang ada di database.
Gambar 3.55 Desain Antarmuka Website Admin Halaman Pengguna
Pada Gambar 3.55 menggambarkan desain antarmuka halaman pengguna pada Gambar 3.21 sitemap website admin. Halaman pengguna mempunyai konten toolbar, breadcrumb, daftar tabel akun pengguna dan pagination. Pada halaman pengguna akan mengimplementasikan flowchart menu pengguna pada gambar 3.26. Daftar tabel akun pengguna akan berisikan tabel yang menampilkan data-data akun pengguna.
Gambar 3.56 Desain Antarmuka Website Admin Halaman Bab
Pada Gambar 3.56 menggambarkan desain antarmuka halaman bab pada Gambar 3.21 sitemap website admin. Halaman bab mempunyai konten toolbar, breadcrumb, daftar tabel bab dan pagination. Pada halaman pengguna akan mengimplementasikan flowchart menu bab pada gambar 3.27. Daftar tabel bab akan berisikan tabel yang menampilkan data-data bab. Pada halaman bab dapat melakukan penambahan, penghapusan dan pengubahan data bab yang ada di database.
Gambar 3.57 Desain Antarmuka Website Admin Halaman Subbab
Pada Gambar 3.57 menggambarkan desain antarmuka halaman subbab pada Gambar 3.21 sitemap website admin. Halaman subbab mempunyai konten toolbar, breadcrumb, daftar tabel subbab dan pagination. Pada halaman pengguna akan mengimplementasikan flowchart menu subbab pada gambar 3.28. Daftar tabel subbab akan berisikan tabel yang menampilkan data-data subbab. Pada halaman subbab dapat melakukan penambahan, penghapusan dan pengubahan data subbab yang ada di database.
Gambar 3.58 Desain Antarmuka Website Admin Halaman Penjelasan
Pada Gambar 3.58 menggambarkan desain antarmuka halaman penjelasan pada Gambar 3.21 sitemap website admin. Halaman penjelasan mempunyai konten toolbar, breadcrumb, daftar tabel penjelasan dan pagination. Pada halaman penjelasan akan mengimplementasikan flowchart menu penjelasan pada gambar 3.29. Daftar tabel penjelasan akan berisikan tabel yang menampilkan data-data penjelasan. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data subbab yang ada di database.
Gambar 3.59 Desain Antarmuka Website Admin Halaman Pertanyaan
Pada Gambar 3.59 menggambarkan desain antarmuka halaman pertanyaan pada Gambar 3.21 sitemap website admin. Halaman pertanyaan mempunyai konten toolbar, breadcrumb, daftar tabel pertanyaan dan pagination. Pada halaman pertanyaan akan mengimplementasikan flowchart menu pertanyaan pada gambar 3.30. Daftar tabel pertanyaan akan berisikan tabel yang menampilkan data-data pertanyaan. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data pertanyaan yang ada di database.
Gambar 3.60 Desain Antarmuka Website Admin Halaman Jawaban
Pada Gambar 3.60 menggambarkan desain antarmuka halaman jawaban pada Gambar 3.21 sitemap website admin. Halaman pertanyaan mempunyai konten toolbar, breadcrumb, daftar tabel jawaban dan pagination. Pada halaman jawaban akan mengimplementasikan flowchart menu jawaban pada gambar 3.31. Daftar tabel jawaban akan berisikan tabel yang menampilkan data-data jawaban. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data jawaban yang ada di database.
Gambar 3.61 Desain Antarmuka Website Admin Halaman Rune
Pada Gambar 3.61 menggambarkan desain antarmuka halaman rune pada Gambar 3.21 sitemap website admin. Halaman rune mempunyai konten toolbar, breadcrumb, daftar tabel rune dan pagination. Pada halaman rune akan mengimplementasikan flowchart menu rune pada gambar 3.32. Daftar tabel jawaban akan berisikan tabel yang menampilkan data-data rune. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data rune yang ada di database.
Gambar 3.62 Desain Antarmuka Website Admin Halaman Pemandu
Pada Gambar 3.62 menggambarkan desain antarmuka halaman pemandu pada Gambar 3.21 sitemap website admin. Halaman pemandu mempunyai konten toolbar, breadcrumb, daftar tabel pemandu dan pagination. Pada halaman pemandu akan mengimplementasikan flowchart menu pengguna pada gambar 3.33. Daftar tabel jawaban akan berisikan tabel yang menampilkan data-data pemandu. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data jawaban yang ada di database.
Gambar 3.63 Desain Antarmuka Website Admin Halaman Penghargaan
Pada Gambar 3.63 menggambarkan desain antarmuka halaman penghargaan pada Gambar 3.21 sitemap website admin. Halaman penghargaan mempunyai konten toolbar, breadcrumb, daftar tabel penghargaan dan pagination. Pada halaman penghargaan akan mengimplementasikan flowchart menu penghargaan pada gambar 3.34. Daftar tabel jawaban akan berisikan tabel yang menampilkan data-data penghargaan. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data penghargaan yang ada di database.
Gambar 3.64 Desain Antarmuka Website Admin Halaman Sasaran Penghargaan
Pada Gambar 3.64 menggambarkan desain antarmuka halaman sasaran penghargaan pada Gambar 3.21 sitemap website admin. Halaman sasaran penghargaan mempunyai konten toolbar, breadcrumb, daftar tabel sasaran penghargaan dan pagination. Pada halaman sasaran penghargaan akan mengimplementasikan flowchart menu sasaran penghargaan pada gambar 3.35.
Daftar tabel sasasaran penghargaan akan berisikan tabel yang menampilkan data-data sasaran penghargaan. Pada halaman penjelasan dapat melakukan penambahan, penghapusan dan pengubahan data sasaran penghargaan yang ada di database.
3.3.6.2 Desain Antarmuka Aplikasi Gamifikasi Pembelajaran Matematika