ANALISIS DAN PERANCANGAN SISTEM
3.4 Perancangan Sistem
3.4.2 Perancangan Antarmuka
3.4.2.1 Tampilan Antarmuka Modul Class
Modul Class merupakan modul yang digunakan utuk melakukan aktivitas-aktivitas pada sebuah kelas pembelajaran. Dalam sebuah kelas pembelajaran, pelajar dan pengajar memiliki aktivitas yang berbeda. Misalnya jika pengajar dapat memberi bahan pembelajaran kepada pelajar, pelajar hanya dapat mempelajari bahan tersebut untuk kemudian memberikan pertanyaan atau komentar, dan kemudian
mendiskusikannya dengan pelajar yang lain. Oleh sebab itu, aplikasi ini membagi tampilan antarmuka modul Class ini dalam 2 jenis sesuai aktivitas yang berhak dilakukan entitas pengguna aplikasi, yaitu tampilan antarmuka untuk admin atau pengajar dan tampilan antarmuka untuk pelajar.
Tampilan antarmuka modul Class untuk admin atau pengajar dimulai dengan halaman sistem konfigurasi kelas. Gambar antarmuka modul Class untuk admin atau pengajar dapat dilihat pada Gambar 3.8.
Gambar 3.8 Rancangan Antarmuka Halaman Utama Modul Class Admin/ Pengajar
Dari Gambar 3.8 dapat dilihat bahwa rancangan antarmuka modul Class untuk admin atau pengajar terdiri dari judul di bagian atas, menu utama pengaturan kelas, yang menampilkan data ID kelas dan nama kelas, dan menyediakan link menu utama kelas, yaitu penilaian, pengeditan kelas, penghapusan kelas, pengaturan grup dan pengaturan jadwal. Masing-masing link ini akan mengakses halaman konfigurasi sesuai aktivitas kelas yang dipilih, kecuali link untuk menghapus kelas, yang akan langsung menampilkan pesan konfirmasi penghapusan data kelas yang dipilih. Tiap antarmuka halaman konfigurasi yang diakses link tersebut akan dijelaskan pada subbab berikutnya.
Kemudian pada bagian bawah halaman, terdapat menu untuk menambahkan data kelas yang baru. Menu ini terdiri dari sebuah text box untuk memasukkan data nama kelas, sebuah text area untuk memasukkan info kelas, dan sebuah combo box untuk memilih nama pengajar dari kelas tersebut. Selain itu juga terdapat sebuah
tombol ‘Simpan’ untuk menyimpan data yang telah diinput ke dalam database.
Tampilan antarmuka untuk menu penilaian pada menu Class dimulai dengan tampilan konfigurasi nilai pelajar, seperti yang ditunjukkan pada Gambar 3.9.
Gambar 3.9 Rancangan Antarmuka Menu Konfigurasi Pelajar
Seperti yang ditunjukkan pada Gambar 3.9, pada menu ini, ditampilkan tabel yang berisi data nilai pelajar, yaitu data ID pelajar, nama pelajar, nilai latihan, nilai aktivitas, nilai ujian, nilai ujian final, dan nilai final. Di sebelah kanan tabel terdapat link pada masing-masing baris data yang akan mengakses ke submenu untuk memasukkan data nilai, yang berfungsi untuk mengubah data nilai pelajar.
Submenu untuk mengubah nilai terdiri dari 4 buah text box yang berfungsi untuk memasukkan data nilai latihan, aktivitas, ujian, dan ujian final. Kemudian
terdapat sebuah tombol ‘Simpan’ untuk menyimpan data yang sudah dimasukkan, ke
dalam database. Sedangkan link ‘Kembali’ untuk mengembalikan tampilan ke
halaman sebelumnya. Tampilan antarmuka submenu untuk mengubah data nilai dapat dilihat pada Gambar 3.10.
Gambar 3.10 Rancangan Antarmuka Submenu untuk Mengubah Nilai
Menu Pengaturan Kelompok atau grup pada modul Class, dirancang untuk menentukan grup pada suatu kelas pembelajaran. Penentuan grup dan anggota grup sepenuhnya diserahkan kepada pengajar kelas yang bersangkutan. Dengan pembagian grup ini diharapkan dapat mendukung sistem belajar yang kolaboratif antara pelajar. Tampilan antarmuka untuk menu pengaturan kelompok pada menu Class dimulai dengan tampilan konfigurasi grup, seperti yang ditunjukkan Gambar 3.11.
Seperti yang diperlihatkan Gambar 3.11, di bawah judul terdapat submenu untuk mengedit dan menghapus daftar grup. Pada menu tersebut ditampilkan daftar grup dengan data berupa nama grup dan nama anggota grup, di sebelah kanan setiap baris data tersebut terdapat link untuk mengakses menu pengeditan dan penghapusan data grup. Tampilan antarmuka menu pengeditan data grup dapat dilihat pada
Gambar 3.12.
Gambar 3.12 Rancangan Antarmuka Submenu Edit Grup
Tampilan antarmuka submenu Edit Grup ini cukup sederhana. Terdapat 2 buah text box untuk memasukkan data nama grup dan nama-nama anggota. Kemudian
terdapat sebuah tombol ‘Simpan’ untuk menyimpan data yang sudah dimasukkan ke dalam database. Sedangkan link ‘Kembali’ untuk mengembalikan tampilan ke
halaman sebelumnya.
Kembali ke pembahasan menu Konfigurasi Grup, di bawah submenu daftar grup terdapat tabel daftar nilai yang berisi nilai-nilai pelajar. Tabel daftar nilai ini berfungsi sebagai referensi bagi pengajar untuk menentukan grup secara adil dan seimbang, serta memberikan informasi mengenai nama-nama pelajar yang mengikuti kelas tersebut. Sedangkan di bagian bawah, terdapat submenu untuk membuat grup baru. Dalam submenu ini terdapat sebuah text box yang berfungsi untuk memasukkan data nama grup dan sebuah text area untuk memasukkan data nama-nama anggota.
Terdapat sebuah tombol ‘Simpan’ untuk menyimpan data yang sudah dimasukkan, ke
dalam database. Sedangkan link ‘Kembali’ untuk mengembalikan tampilan ke
Kembali ke pembahasan halaman utama modul Class, Menu Pengeditan Kelas digunakan untuk mengedit data kelas yang telah tersimpan di database. Tampilan antarmuka dari menu ini dapat dilihat pada Gambar 3.13.
Gambar 3.13 Rancangan Antarmuka Menu Pengeditan Kelas
Seperti yang diperlihatkan Gambar 3.13, menu ini terdiri dari sebuah combo box yang digunakan untuk memasukkan data nama pengajar, sebuah textbox untuk memasukkan data nama kelas pembelajaran, dan sebuah text area yang berfungsi untuk memasukkan info tentang kelas tersebut. Kemudian di bagaian bawahnya,
terdapat sebuah tombol ‘Simpan’ untuk menyimpan ke dalam database. Sedangkan link‘Kembali’ untuk mengembalikan tampilan ke halaman utama modul Class.
Pada halaman utama modul Class, di bawah judul terdapat submenu untuk mengedit dan menghapus daftar jadwal pembelajaran. Pada menu tersebut ditampilkan daftar jadwal pembelajaran dengan data berupa tanggal, kejadian dan nama kelas, di sebelah kanan setiap baris data tersebut terdapat link untuk mengakses submenu pengeditan dan penghapusan data jadwal pembelajaran. Submenu ini terdiri dari 2 buah combox box untuk memasukkan data tanggal dan bulan, sedangkan data tahun dimasukkan dengan sebuah text box. Kemudian terdapat sebuah text area untuk
memasukkan data kejadian. Di bagian bawah terdapat tombol ‘Simpan’ untuk
menyimpan data yang sudah dimasukkan ke dalam database. Sedangkan link
‘Kembali’ untuk mengembalikan tampilan ke halaman sebelumnya. Tampilan antarmuka untuk menu pengaturan grup ini dapat dilihat pada Gambar 3.14.
Gambar 3.14 Rancangan Antarmuka Menu Konfigurasi Jadwal Pembelajaran
Pada menu Konfigurasi Jadwal Pembelajaran, di bawah submenu daftar jadwal pembelajaran, terdapat submenu untuk membuat jadwal pembelajaran baru. Dalam submenu ini terdapat 2 buah combox box untuk memasukkan data tanggal dan bulan, sedangkan data tahun dimasukkan dengan sebuah text box. Kemudian terdapat sebuah text area untuk memasukkan data kejadian. Di bagian bawah terdapat tombol
‘Simpan’ untuk menyimpan data yang sudah dimasukkan ke dalam database. Sedangkan link ‘Kembali’ untuk mengembalikan tampilan ke halaman utama modul
Class.
Menu Pengaturan Jadwal Pembelajaran pada modul Class, dirancang untuk menentukan jadwal pembelajaran pada suatu kelas pembelajaran. Tampilan antarmuka ini terdiri dari 2 buah combox box untuk memasukkan data tanggal dan bulan, sedangkan data tahun dimasukkan dengan sebuah text box. Kemudian terdapat sebuah text area untuk memasukkan data kejadian. Di bagian bawah terdapat tombol
‘Simpan’ untuk menyimpan data yang sudah dimasukkan ke dalam database. Sedangkan link ‘Kembali’ untuk mengembalikan tampilan ke halaman sebelumnya.
Tampilan antarmuka submenu pengeditan data jadwal pembelajaran dapat dilihat pada Gambar 3.15.
Gambar 3.15 Rancangan Antarmuka Submenu Edit Jadwal
Selanjutnya akan dibahas mengenai tampilan antarmuka modul Class untuk pelajar yang dikhususkan bagi pelajar untuk mengikuti aktivitas kelas pembelajaran yang dibangun oleh admin atau pengajar. Tampilan antarmuka modul ini dibuat sesederhana mungkin untuk memudahkan pelajar dalam melakukan aktivitas pembelajaran yang diinginkan. Tampilan antarmuka modul Class untuk pelajar dimulai dengan halaman sistem konfigurasi kelas. Gambar antarmuka modul tersebut dapat dilihat pada Gambar 3.16.
Gambar 3.16 Rancangan Antarmuka Halaman Utama Modul Class Pelajar
Seperti yang diperlihatkan pada Gambar 3.16, tampilan antarmuka dari halaman utama modul Class untuk pelajar hanya terdiri dari daftar kelas pembelajaran yang terdapat pada sistem pembelajaran. Dimana setiap nama kelas merupakan link untuk mengakses menu aktivitas kelas untuk pelajar. Tampilan antarmuka dari menu aktivitas kelas untuk pelajar tersebut dapat dilihat pada Gambar 3.17.
Gambar 3.17 Rancangan Antarmuka Menu Aktivitas Kelas Pelajar
Pada Rancangan antarmuka tersebut dapat diamati bahwa menu aktivitas kelas ini terdiri dari 4 link utama. Di bawah nama kelas terdapat link untuk registrasi kelas. Registrasi ini dilakukan hanya sebagai konfirmasi sehingga tidak memerlukan halaman atau submenu untuk menampung data. Pelajar hanya cukup sekali melakukan registrasi kelas, sehingga untuk selanjutnya link ini tidak akan muncul.