Desain Arsitektur Desain Antarmuka

77

b. Desain Arsitektur

Desain arsitektur sistem bank soal direpresentasikan menggunakan arsitektur desain pattern pola yang berbasis pada desain arsitektur. Model ini menggunakan prinsip desain MVC. Gambar 16 merupakan desain arsitektur bank soal. Gambar 16. Desain arsitektur bank soal 78 Berdasarkan desain arsitektur bank soal yang terdapat pada Gambar 16 pada halaman 77, dapat diketahui bahwa arsitektur bank soal menggunakan prinsip desain MVC Model- View- Controller. Model berisi method-method yang berisi source code yang menangani manipulasi data dan business logic. View berisi source code yang menangani tampilan halaman. Controller berisi source code yang menangani request dari pengguna melalui browser. Dalam sistem bank soal ini, pengguna memerlukan browser untuk melakukan request perintah dan untuk menampilkan tampilan halaman sistem bank soal. Request yang dikirimkan pengguna lewat browser akan diterima oleh controller. Kemudian controller akan menginstruksikan model dan view untuk melakukan aksi sesuai dengan request yang diterima controller. Berdasarkan desain arsitektur yang terdapat pada Gambar 16 pada halaman 77, kelas-kelas yang termasuk di dalam package view antara lain: kelas v_pengguna, v_mapel, v_pengampu, v_sk, v_kd, v_materi, v_indikator, v_soalganda, v_soalessay, dan v_instrumentes. Di dalam package controller juga terdapat beberapa kelas, yaitu kelas c_pengguna, c_mapel, c_pengampu, c_sk, v_kd,c_materi, c_indikator, c_soalganda, c_soalessay, dan c_instrumentes. Sedangkan kelas-kelas yang terdapat pada package model antara lain: kelas m_pengguna, m_mapel, m_pengampu, m_sk, m_kd, m_materi, m_indikator, m_ganda, m_essay, dan m_instrumentes. 79

c. Desain Antarmuka

Desain antarmuka sistem bank soal diidentifikasi dari skenario penggunaan dan daftar fungsi-fungsi yang sudah dianalisa dalam tahapan analisis kebutuhan. Berikut adalah desain antarmuka sistem bank soal: 1 Desain antarmuka halaman login Gambar 17. Desain antarmuka halaman login system bank soal 2 Desain antarmuka halaman tampil mata pelajaran Gambar 18. Desain antarmuka halaman tampil mata pelajaran 80 3 Desain antarmuka halaman tambah butir soal essay Gambar 19. Desain antarmuka halaman tambah butir soal essay Rancangan antarmuka selengkapnya terdapat pada Lampiran III.

d. Desain Komponen