PERANCANGAN SISTEM
3.6 Desain Antar Muka
Untuk membagi fungsionalitas masing-masing user, maka desain user interface akan dibagi menjadi 4 bagian, yaitu :
1. User sebagai peserta
Sebagai user biasa yang mempunyai fungsionalitas ini dapat melakukan login dan pendaftaran baru, terdapat username dan password serta tombol “Login” untuk melakukan login. Berikut desain form home tampak Gambar 3.12.
User Name : Password : Login Cancel
2. User sebagai Admin
User sebagai admin mempunyai 3 buah form A. Desain form Admin Home
Pada desain form halaman admin ini berisi 3 tombol “Maintain Tutor”, “Maintain Peserta” dan “Upload Learning Content”. Berikut desain form admin tampak pada Gambar 3.13.
50
B. Desain Form Maintain Tutor
Pada desain form ini seorang admin dapat menambah atau mengubah tutor yang berisi kolom-kolom untuk menampilkan data tutor yang tersimpan di database, terdapat tombol “Edit”, tombol “Simpan” dan tombol “Batal”. Form ini juga terdapat kolom-kolom isian seperti “Username”, “Name”, “Password”, “Email”. Berikut desain form maintain tutor pada halaman admin tampak pada Gambar 3.14.
C. Desain Form Maintain Peserta
Pada desain form ini seorang admin dapat menambah atau mengubah tutor yang berisi kolom-kolom untuk menampilkan data tutor yang tersimpan di database, terdapat tombol “Edit”, tombol “Simpan” dan tombol “Batal”. Form ini juga terdapat kolom-kolom isian seperti “Username”, “Name”, “Password”, “Email”. Berikut desain form maintain peserta halaman admin tampak Gambar 3.15.
D. Desain form Upload Learning Content
Pada desain form upload learning content ini terdapat kolom-kolom isian untuk memasukkan data isi pembelajaran yang akan diupload pada isian tersebut antara lain, “Document Tittle”, “Document Desciption”, dan path dari file yang akan dipilih serta terdapat tiga tombol yaitu “Simpan”, “Batal”, dan “Browse”. Form upload learning content ini juga ada pada tutor dengan desain yang sama. Berikut desain upload learning content tampak pada Gambar 3.16.
Gambar 3.14 Desain Form Maintain Tutor
52
3. User sebagai Peserta
User sebagai peserta mempunyai tiga (3) buah desain form, yaitu : A. Desain Form Peserta Home
Pada desain form halaman utama peserta ini berisi treeview untuk menampilkan daftar topik dan sub topik yang tersedia dan terdapat tombol “Test Report”. Berikut desain form halaman utama peserta tampak pada Gambar 3.17
B. Desain Form Pembelajaran
Pada desain form pembelajaran ini berisi kontrol untuk menampilkan file, apakah file tersebut berupa file multimedia ataupun file dokumen. Berikut desain form pembelajaran untuk peserta tampak pada Gambar 3.18.
Gambar 3.16. Desain Form Upload Learning Content
C. Desain Form Pelatihan Tes
Desain form pelatihan tes ini berisi multiview untuk menampilkan view
“Start”, view “Test”, dan view “Result”. Pada view “Start” terdapat tombol “Start” untuk memulai tes, pada view “Test” terdapat kolom berisikan soal dan terdapat
radobutton atau checkbox untuk pilihan jawaban, view “Result” berisi kolom untuk menampilkan jumlah soal, jawaban benar, nilai, pass grade, dan status yang berisi “Passed” atau “Failure”. Berikut desain form pelatihan tes seperti tampak pada Gambar 3.19.
54
D. Desain Form Laporan
Pada desain form laporan yang isinya merupakan reportviewer untuk menampilkan laporan hasil tes peserta. Berikut desain form laporan tampak pada Gambar 3.20.
4. User sebagai tutor
User sebagai tutor mempunyai tujuh buah form tidak termasuk halaman utama
A. Desain Form Tutor Home
Pada desain form halaman utama tutor ini berisi empat tombol, yaitu tombol “Learning Path”, tombol “Upload Learning Content”, tombol “Test Report”, dan tombol “Tracking Report”. Berikut desain form halaman utama tutor tampak pada Gambar 3.21.
Gambar 3.20. Desain Form Laporan
B. Desain Form Pembuatan Modul
Pada desain form pembuatan modul ini berisi daftar modul atau topik yang telah dibuat, kemudian kolom isian untuk mengisikan nama topik, pilihan prasyarat untuk topik berupa checkbox dan dropdownlist, dan terdapat tombol “Simpan”, tombol “Batal”, tombol “Edit Topik”, tombol “Edit Sub Topik”. Dengan adanya desain form ini seorang tutor dapat menentukan akur pembelajaran yang akan di berikan kepada peserta pembelajaran dan dapat diubah sesuai dengan kebutuhan pengajaran. Berikut desain form pembuatan modul tampak pada Gambar 3.22.
C. Desain Form Perubahan Modul
Pada desain form perubahan modul ini berisi daftar nama topik atau modul Gambar 3.22. Desain Form Pembuatan Modul
56
pilihan prasyarat dengan checkbox dan dropdownlist, serta tombol “Update” dan tombol “Batal”. Berikut desain form perubahan modul tampak pada Gambar 3.23.
D. Desain Form Pembuatan Sub Modul
Pada desain form pembuatan sub modul ini berisi daftar sub topik atau sub modul yang telah dibuat, kemudian kolom isian untuk mengisikan nama sub topik, pilihan prasyarat berupa dropdownlist dan checkbox, status topik berupa
checkbox, daftar learning content yang telah diupload berupa gridview dan
dropdownlist untuk melihat daftar learning content berdasarkan tipenya, terdapat lima buah tombol masing-masing “Buat Test”, “Simpan”, “Batal”, “Edit”, “Delete”. Berikut desain form pembuatan sub modul tampak pada Gambar 3.24.
E. Desain Form Pembuatan Soal
Pada desain form pembuatan soal ini berisi multiview untuk menampilkan
view “Test” dan view “Soal dan Jawaban”. Pada view “Test” kolom isian untuk nama tes, prasyarat berupa checkbox dan dropdownlist, dan kolom isian untuk
pass grade, dan dua buah tombol “Simpan” dan “Batal”. Pada view “Soal dan
Jawaban” terdapat kolom isian untuk mengisi soal dan jawaban, status jawaban berupa checkbox untuk jawaban benar atau salah, daftar jawaban yang telah dimasukkan berupa listbox, dan dua buah tombol “Simpan dan Tambah Baru”, “Simpan dan Selesai”. Berikut desain form pembuatan soal tampak pada Gambar 3.25.
58
F. Desain Form Perubahan Soal
Pada desain form perubahan soal ini berisi multiview untuk menampilkan
view “Test” dan view “Soal dan Jawaban”. Pada view “Soal dan Jawaban” berisi kolom dan isian yang sama seperti pada view “Soal dan Jawaban”milik
BuatSoal.aspx Pada view “Soal dan Jawaban” terdapat dua buat gridview untuk menampilkan daftar pertanyaan dan masing-masing jawabannya, view “Soal dan
Jawaban” ini terdapat dua buat tombol yaitu “Edit” dan “Simpan”. Berikut desain form perubahan soal seperti pada Gambar 3.26.
G. Desain Form Laporan Tes Peserta
Pada desain form laporan tes peserta ini berisi reportviewer yang menampilkan laporan pembelajaran seluruh peserta berdasarkan tanggal tertentu dan berdasarkan pada peserta tertentu. Berikut desain form laporan tes peserta tampak pada Gambar 3.27.
60
H. Desain Form Laporan Progress Peserta
Pada desain form laporan progress peserta ini berisi reportviewer yang menampilkan laporan progress pembelajaran seluruh peserta mulai modul atau topik apa saja yang telah dilakukan sampai dengan tes, sehingga tutor mengetahui sampai sejauh mana tingkat keefektifan peserta dalam pembelajaran berdasarkan tanggal tertentu dan berdasarkan peserta tertentu. Berikut desain form laporan progress peserta seperti tampak pada Gambar 3.28.