11

BAB III

ANALISA DAN PERANCANGAN SISTEM

3.1 Analisa Masalah

Analisa dilakukan pada salah satu sekolah SMP di kota Batu. Tahap analisa

yang dilakukan adalah wawancara dengan salah satu guru di sekolah tersebut yang

mengajar mata pelajaran Teknik Informasi dan Komunikasi juga dengan wakil

kepala sekolah bagian kesiswaan. Hasil dari wawancara dengan guru di sekolah

smp adalah mereka mengharapkan sistem aplikasi yang dapat digunakan untuk

siswa dalam melaksanakan ulangan ataupun ujian. Sistem aplikasi diminta dapat

menampilkan nilai siswa secara langsung setelah melakukan ujian atau ulangan.

Sistem aplikasi diminta agar dapat mengacak soal dan jawaban untuk siswa.

Tujuannya untuk melatih siswa untuk belajar mandiri dan jujur dalam mengerjakan

ulangan ataupun ujian. Selain itu, sistem aplikasi akan diaplikasikan pada

laboratorium komputer sekolah dengan menggunakan jaringan Local Area Network

(LAN). Sistem aplikasi diminta menggunakan fitur login dengan menggunakan nis

dan password untuk siswa.

Simulasi pengacakan soal merupakan proses mengacak soal-soal untuk

membentuk paket di mana soal-soal ditiap paket diacak dengan menggunakan

metode linear congruent method. Data set bank soal yang diambil adalah paket soal

UN tahun 2017-2018 untuk SMP sederajat dengan mata pelajaran yaitu bahasa

Indonesia, bahasa Inggris, Matematika, dan IPA. Data set bank soal dipilih karena

berdasarkan ketentuan dalam ujian nasional SMP, mata pelajaran yang diujikan

adalah Matematika, B. Indonesia, B. Inggris, dan IPA.

Setiap mata pelajaran memiliki 100 soal dan masing-masing soal memiliki 4

pilihan jawaban. Setiap paket soal yang dibuat dari pengacakan berjumlah 50 soal,

kecuali matematika berjumlah 40 soal.

3.2 Analisa Metode

Metode Linear Congruent Method adalah salah satu metode pembangkit

bilangan acak yang memanfaatkan model linear untuk membangkitkan bilangan

12

acak. LCM merupakan salah satu metode yang menggunakan algoritma Pseudo

Random Number Generator (PRNG) sama halnya dengan fungsi random pada php.

Fungsi random pada php termasuk dapat dikategorikan sama dengan metode

LCM yaitu hasil akhir pada pengacakan tidak benar-benar teracak atau biasa disebut

Pseudo random. Perbedaan mendasar LCM dengan fungsi random yaitu pada

proses mengacak deret angka tersebut. LCM menggunakan 3 variabel yang nilainya

ditentukan dari inputan manusia dan untuk mendapatkan hasil acak melalui proses

perhitungan. Sedangkan pada fungsi random, sering kali inputan awal ditentukan

dari dalam sistem karena untuk mendapatkan hasil acak memerlukan inputan yang

acak juga. Misalnya nilai awal pada fungsi random sering kali ditentukan atau

diambil dari jam pada bios komputer saat ini. Contoh penggunaan fungsi random

untuk mengacak soal 1-50. Kemungkinan pengacakan dapat dilakukan hanya 50

kali (1 banding 50) untuk menghindari perulangan. Namun dengan metode LCM

dengan menentukan nilai dari variabel a, c, dan m dimana nilai tersebut memiliki

ketentuan sendiri dan merupakan inputan dari user, maka kemungkinan terjadi

perulangan lebih kecil dibandingkan dengan fungsi random.

Keunggulan metode LCM yaitu untuk membuat paket soal dengan isi soal

yang teracak sehingga setiap siswa yang menerima paket soal akan mendapatkan

isi soal yang berbeda-beda. Jika dibandingkan dengan penggunaan fungsi

pengacakan bawaan dari php, LCM untuk terjadinya perulangan ketika pengacakan

lebih kecil dibandingkan fungsi random. Dan jika dibandingkan dengan metode

lainnya seperti monte carlo, LCM lebih sederhana. Jika masalah bisa dijawab secara

matematis, maka metode monte carlo tidak perlu digunakan [2]. Selain itu dalam

hal sisi keamanan, LCM lebih baik daripada fungsi random diphp karena seed

(inputan) di LCM dilakukan oleh user. Berbeda dengan fungsi random yang mana

seed (inputan) ditentukan di dalam program. Sehingga apabila ada orang luar yang

mengetahui seed dari fungsi random, maka akan mudah untuk memprediksi

kemungkinan apa yang akan keluar dari hasil pengacakan.

Kelemahan fungsi random dibandingkan metode LCM yaitu, kemungkinan

terjadinya perulangan setelah dilakukan pengacakan beberapa kali, lebih besar

dibandingkan LCM. Banyak pengguna yang mengeluhkan seringnya terjadi error

ketika menggunakan fungsi random. Fungsi random lebih cocok digunakan untuk

13

membuat angka acak seperti penentuan id dan password yang ketika terjadi

perulangan masih bisa ditolerir selama hasil tidak sama persis. Misalkan

menggunakan fungsi random sebagai kode unik dalam jangka angka 001-100.

Ketika user ke 100 selesai, nilai kode unik akan tereset kembali ke 001 dimana

kemungkinan pengguna kode unik 001 yang pertama sudah tidak membutuhkan

lagi. Namun hal tersebut juga menjadi kekurangan karena jika digunakan untuk data

suatu barang, maka didalam pendataan akan menyimpan 2 file 001 atau lebih.

Contoh kelemahan fungsi random dalam pembuatan captcha. Dalam suatu

studi kasus captcha memberikan soal yang berisi teks acak. Teks acak pada captcha

dipilih secara random dari fungsi random php. Misalkan source code:

“Srand(microtime()+time()/2-21017);” terlihat bahwa sumber

entropi yang dipakai untuk seed sangat lemah yaitu waktu dalam detik dan

mikrodetik. Jika orang luar mengetahui bahwa seed yang diambil adalah hitungan

waktu dalam detik dan mikrodetik, maka orang tersebut dapat memprediksi semua

random teks yang akan digenerate oleh captcha.

Contoh pembangkit bilangan acak sebanyak 10 kali dengan nilai a=21, c=17,

m=20, dan X0=0 maka:

X0 = (21.0 + 17) mod 20 = 17

X1 = (21.17 + 17) mod 20 = 14

X2 = (21.14 + 17) mod 20 = 11

X3 = (21.11 + 17) mod 20 = 8

X4 = (21.8 + 17) mod 20 = 5

X5 = (21.5 + 17) mod 20 = 2

X6 = (21.2 + 17) mod 20 = 19

X7 = (21.19 + 17) mod 20 = 16

X8 = (21.16 + 17) mod 20 = 13

X9 = (21.13 + 17) mod 20 = 10

Bilangan acak yang dibangkitkan adalah :

14

17 14 11 8 5 2 19 16 13 10

Bilangan acak yang tidak dibangkitkan adalah :

7 4 1 18 15 12 9 6 3 0

Dari contoh diatas “m” yang ditentukan adalah 20. “m” merupakan modulus

atau batas jumlah bilangan yang tersedia, artinya ada 20 bilangan yang tersedia.

Bilangan yang tersedia adalah 0 s/d 19. Bilangan tersebut diurutkan, kemudian

diacak dan dibangkitkan sesuai dengan ketentuan. Dalam contoh diatas, ditentukan

bahwa ada 10 bilangan yang dibangkitkan dan 10 sisanya tidak dibangkitkan. Dari

pengacakan 20 bilangan tersebut dapat diketahui bahwa pembangkitan bilangan

acak tersebut tidak mengalami perulangan.

3.3 Analisa sistem

Hasil pembangkitan bilangan acak dengan menggunakan linear congruent

method ditentukan dari nilai masing-masing variabel m= 100, a=21, c=17 dan

X0=3. Hasil dari pembangkitan bilangan acak dengan nilai variabel tersebut dapat

dilihat di tabel bawah.

Tabel 3.1 Pembangkitan Bilangan Acak

I Xi Xi-1 I Xi Xi-1 I Xi Xi-1

1 3 80 11 73 50 21 43 20

2 80 97 12 50 67 22 20 37

3 97 54 13 67 24 23 37 94

4 54 51 14 24 21 24 94 91

5 51 88 15 21 58 25 91 28

6 88 65 16 58 35 26 28 5

7 65 82 17 35 52 27 5 22

8 82 39 18 52 9 28 22 79

9 39 36 19 9 6 29 79 76

10 36 73 20 6 43 30 76 13

15

I Xi Xi-1 I Xi Xi-1 I Xi Xi-1

31 13 90 56 38 15 81 63 40

32 90 7 57 15 32 82 40 57

33 7 64 58 32 89 83 57 14

34 64 61 59 89 86 84 14 11

35 61 98 60 86 23 85 11 48

36 98 75 61 23 0 86 48 25

37 75 92 62 0 17 87 25 42

38 92 49 63 17 74 88 42 99

39 49 46 64 74 71 89 99 96

40 46 83 65 71 8 90 96 33

41 83 60 66 8 85 91 33 10

42 60 77 67 85 2 92 10 27

43 77 34 68 2 59 93 27 84

44 34 31 69 59 56 94 84 81

45 31 68 70 56 93 95 81 18

46 68 45 71 93 70 96 18 95

47 45 62 72 70 87 97 95 12

48 62 19 73 87 44 98 12 69

49 19 16 74 44 41 99 69 66

50 16 53 75 41 78 100 66 3

51 53 30 76 78 55

52 30 47 77 55 72

53 47 4 78 72 29

54 4 1 79 29 26

55 1 38 80 26 63

Dari hasil pembangkitan bilangan acak pada tabel 3.1, kolom “I” merupakan

urutan soal 1-100, maka kolom “Xn” merupakan urutan soal yang telah teracak

namun belum sesuai karena di dalam hasil kolom “Xn”, adanya nilai “0” dan tidak

ada nilai “100” sehingga setiap nilai / value di kolom Xn harus ditambah 1. Hasil

pengacakannya adalah, soal nomor 1 adalah soal urutan ke 80 dari 100 soal, soal

nomor 2 adalah adalah soal urutan ke 97 dari 100 soal dan seterusnya.

Setiap pengacakan yang dilakukan akan menghasilkan satu paket soal,

sehingga jika pengguna ingin membuat banyak paket, maka pengguna harus

melakukan pengacakan sebanyak paket yang diinginkan.

16

3.4 Data Set

Data set yang digunakan pada penelitian ini adalah bank soal UN tahun 2017-

2018 untuk SMP sederajat dengan mata pelajaran Bahasa Indonesia 100, Bahasa

Inggris 100 soal, Matematika 100 soal, dan IPA 100 soal. Dari 100 soal disetiap

mata pelajaran akan diambil 50 soal yang telah teracak kecuali matematika, hanya

40 soal. Hal ini sesuai dengan ketentuan dari soal UN sendiri di mana semua soal

UN berjumlah 50 soal dan hanya matematika yang 40 soal.

3.5 Desain

3.5.1 Use Case Diagram

Use case diagram merupakan bagian dari UML yang bersifat statis. Use case

digunakan untuk menggambarkan entitas-entitas yang berhubungan langsung

dengan sistem. Use case diagram memiliki 3 komponen utama yaitu : Aktor,

Usecase, dan Penghubung (Link). Aktor merupakan pelaku yang berada pada

sistem. Pelaku sistem bisa berupa orang atau benda yang memiliki peran dalam

sistem. Aktor disimbolkan dengan sketsa manusia.

Usecase adalah pekerjaan yang dilakukan aktor. Usecase dirupakan dengan

sebuah kata benda dari kata kerja yang dibendakan. Usecase disimbolkan dengan

eclips. Penghubung atau link merupakan jenis hubungan antara aktor dan usecase

maupun sesama usecase. Ada beberapa jenis penghubung seperti asosiasi,

generalisasi, ekstensi, dan inklusi. Asosiasi merupakan bentuk umum relasi antara

usecase dan aktor. Disimbolkan dengan garis lurus.

Generalisasi merupakan teknik mengembangkan fungsi aktor menjadi fungsi

yang lebih spesifik. Ekstensi merupakan pengembangan fungsi dari usecase dasar.

Hampir sama dengan generalisasi, namun lebih spesifik pada usecase. Umumnya

ekstensi digunakan untuk memperlihatkan fitur-fitur yang termuat pada usecase

dasar. Inklusi merupakan hubungan antara usecase yang menunjukkan adanya

syarat. Usecase dasar akan dilakukan apabila syaratnya telah dipenuhi. Usecase ini

umumnya digunakan untuk sistem validasi sebelum masuk ke fungsi utama.

Contohnya fitur login.

17

Gambar 3.1 Rancangan Use Case Diagram

Pada gambar 3.1 menjelaskan diagram usecase dari aktor admin (guru) dan

aktor user (siswa). Aktor admin dapat mengakses fitur data siswa, data kelas, data

mata pelajaran, data soal, data hasil ujian, data ujian dan pengujian algoritma. Fitur

data siswa menampilkan data setiap siswa dari nomor induk siswa (NIS), nama

siswa, dan kelas. Fitur data kelas menampilkan data dari tiap kelas. Fitur data mata

pelajaran menampilkan daftar mata pelajaran yang tersedia untuk dimasukkan ke

dalam data ujian. Fitur data soal menampilkan data soal dari tiap mata pelajaran

yang tersedia dari fitur mata pelajaran. Fitur data ujian menampilkan data mata

pelajaran yang dapat diujikan. Fitur hasil ujian menampilkan data mata pelajaran

yang telah diujikan. Fitur uji coba algoritma menampilkan proses perhitungan

matematis untuk mengacak soal pada tiap siswa.

Aktor user yang bertindak sebagai siswa dapat mengakses fitur data ujian dan

data hasil ujian. Fitur data ujian menampilkan mata pelajaran yang diujikan yang

terkoneksi ke fitur data soal. Fitur data hasil ujian menampilkan data mata pelajaran

yang diujikan dan nilai hasil dari ujian siswa.

18

3.5.2 Activity Diagram

Activity diagram merupakan diagram yang menggambarkan berbagai alur

aktifitas dalam sistem yang sedang dirancang, bagaimana masing-masing alur

berawal, desicion yang mungkin terjadi, dan bagaimana aktifitas itu berakhir. Pada

umumnya activity diagram tidak menampilkan secara detail urutan proses, namun

hanya memberikan gambaran umum bagaimana urutan prosesnya.

Gambar 3.2 Rancangan Activity Diagram Admin 1-3

Pada gambar 3.2 menampilkan diagram activity dari admin (guru) di mana

menampilkan proses dari admin ketika memulai aplikasi hingga masuk ke fitur data

kelas. Pertama admin diminta memasukkan username dan password yang kemudian

username dan password divalidasi ke dalam database. Setelah tervalidasi, admin

akan dimasukkan ke halaman utama aplikasi di mana pada halaman utama

menampilkan beberapa fitur data soal dan data siswa.

19

Gambar 3.3 Rancangan Activity Diagram Admin 2-3

Pada gambar 3.3 menampilkan proses activity diagram ketika admin

mengakses fitur data kelas dan data mata pelajaran. Fitur data kelas terhubung

dengan fitur data siswa. Di mana setiap siswa memiliki data kelas masing-masing.

Fitur data mata pelajaran terhubung dengan fitur data soal dan data ujian.

Gambar 3.4 Rancangan Activity Diagram Admin 3-3

Pada gambar 3.4 menampilkan activity diagram admin ketika admin

mengakses fitur data ujian, data hasil ujian, dan data uji coba algoritma. Pada fitur

20

data ujian dan dan hasil ujian terhubung dengan fitur data soal dan data mata

pelajaran. Sedangkan pada fitur uji coba algoritma, menampilkan proses pengaturan

algoritma untuk setiap siswa sehingga pada fitur ini terhubung dengan fitur data

siswa.

Gambar 3.5 Rancangan Activity Diagram Siswa

Pada gambar 3.5 menampilkan diagram activity dari user (siswa) di mana

menampilkan proses dari user ketika memulai aplikasi hingga aplikasi berakhir.

Pertama user diminta memasukkan nomor induk siswa (NIS) dan password yang

kemudian akan divalidasi ke dalam database. Setelah tervalidasi, user akan

dimasukkan ke halaman utama aplikasi di mana pada halaman utama menampilkan

fitur data ujian. Pada fitur data ujian user akan melakukan proses ujian dan pada

saat selesai, nilai dari user akan ditampilkan.

3.5.3 Flow Chart

Flowchart merupakan suatu bagan dengan beberapa simbol tertentu yang

menggambarkan urutan atau tahapan suatu proses secara mendetail dalam suatu

program. Flowchart terbagi menjadi 5 jenis yaitu: flowchart sistem, flowchart

dokument, flowchart skematik, flowchart program, dan flowchart proses.

21

Gambar 3.6 Rancangan Flow Chart Admin 1-2

Pada gambar 3.6 menampilkan flowchart admin dari ketika admin login

hingga mengakses data soal dan postpage A. Pada saat login admin akan diminta

memvalidasi username (NIP) dan password sebelum masuk kehalaman utama.

Setelah masuk ke proses halaman utama, admin kemudian masuk ke proses data

kelas, data siswa, data mata pelajaran sampai ke data soal.

Gambar 3.7 Rancangan Flowchart Admin 2-2

Gambar 3.7 merupakan lanjutan dari gambar 3.6 di mana proses alur

flowchart admin ketika masuk ke proses data ujian, kemudian masuk lagi ke proses

data hasil ujian dan uji coba algoritma.

22

Gambar 3.8 Rancangan Flow Chart Siswa

Pada gambar 3.8 menampilkan diagram flowchart untuk siswa dari proses

mulai hingga selesai. Pada proses awal, user diminta memasukkan nis dan password

yang akan divalidasi. Kemudian user akan masuk ke proses halaman utama. Pada

halaman utam akan menampilkan fitur data ujian dimana siswa akan memulai

proses ujian. ketika mulai ujian, soal akan ditampilkan dan ketika selesai akan

muncul desicion antara konfirmasi bahwa ujian telah selesai atau tidak. Ketika ujian

selesai, maka akan ditampilkan data hasil ujian user. Kemudian user akan diminta

memilih untuk kembali ke halaman utama atau log out.

3.6 Rancangan Database

Rancangan database merupakan salah satu desain dalam pembuatan database

dengan berdasarkan analisa permasalahan. Pada tahapan analisa permasalahan

ditentukan bahwa diperlukan penyimpanan untuk data pada sistem. Fitur pada

sistem berkaitan dengan sekitar ujian nasional dan aplikasi dimana data tersebut

merupakan data soal, data jawaban soal, data nilai, data siswa, data kelas, data mata

pelajaran, data ujian, data hasil ujian, data admin dan data pengaturan algoritma.

23

Gambar 3.9 Desain Conceptual Data Model Database

Pada gambar 3.9 menampilkan rancangan desain conceptual data model

(CDM) untuk database sistem. Pada gambar tersebut menampilkan hubungan relasi

antar tabel pada database yang akan dirancang. Hubungan relasi yang terjadi pada

gambar tersebut antara, tabel kelas dan tabel siswa (one-many), tabel siswa dengan

tabel nilai dan tabel hasil ujian (many-many), tabel nilai dengan tabel siswa dan

tabel ujian (many-many), tabel hasil ujian dengan tabel ujian dan tabel soal (many-

many), tabel ujian dengan tabel nilai, tabel matpel, dan tabel hasil ujian (many-

many), tabel matpel dengan tabel ujian dan tabel soal (many-many), tabel soal

dengan tabel jawaban, tabel hasil ujian dan tabel matpel (many-many), tabel

jawaban dengan tabel soal (one-many).

Gambar 3.10 Physical Data Model Database

Pada gambar 3.10 menampilkan desain physical data model (PDM) untuk

database sistem. Pada gambar tersebut menampilkan tabel dengan relasi serta

pengaturan dari primary key dan foreign key dari masing-masing tabel. Misalkan,

pada tabel hasil ujian, id_hasil merupakan primary key pada tabel tersebut, dan pada

24

tabel tersebut mengambil foreign key dari primary key tabel lain seperti id_ujian,

id_soal, dan id_siswa.

3.7 Deskripsi Arsitektur

Desain arsitektur sistem merupakan salah satu tahap dari perancangan

aplikasi. Desain arsitektur sistem bertujuan untuk membuat gambaran alur dari

sistem aplikasi yang dibuat.

Gambar 3.11 Desain Arsitektur Sistem

Pada gambar 3.11, para guru bertindak sebagai admin yang bertugas

mengelola dan menjaga sistem aplikasi. Para guru yang akan memasukkan soal

yang belum teracak ke aplikasi dan kemudian aplikasi akan menyimpan soal-soal

ke database. Soal-soal yang tersimpan di database akan dipanggil oleh sistem

aplikasi, kemudian sistem akan mengacak soal-soal tersebut dan ditampilkan

kesiswa. Setiap siswa akan menerima paket soal teracak berbeda-beda sesuai

dengan NIS masing-masing.

25

3.8 Perancangan Antarmuka

Perancangan antarmuka merupakan proses desain untuk merancang rekayasa

tampilan (interface) pada sistem sebelum sistem dibuat. Tujuan perancangan

antarmuka untuk membuat interaksi pengguna sesederhana mungkin dan seefisien

mungkin. Desain antarmuka biasanya dirancang sesuai dengan kebutuhan

pengguna yang bertujuan untuk memudahkan pengguna ketika menggunakan

sistem.

3.8.1 Rancang Antarmuka Admin

Rancangan antarmuka admin menampilkan desain dari segala rancangan

tampilan halaman admin.

Gambar 3.12 Desain Antarmuka Login

Pada gambar 3.12 menampilkan desain antarmuka login, di mana terdapat

fitur login. Admin ataupun pengguna akan diminta memasukkan username dan

password yang tersimpan di database untuk divalidasi kebenarannya.

Gambar 3.13 Desain Antarmuka Halaman Data Kelas

26

Pada gambar 3.13 desain antarmuka pada halaman data kelas menampilkan

fungsi tabel di mana terdapat id kelas, kelas dan action edit dan hapus. Selain itu

terdapat side bar dari menu halaman utama untuk memudahkan admin untuk

berpindah dari satu halaman ke halaman lain dengan mudah.

Gambar 3.14 Desain Antarmuka Halaman Data Siswa

Pada gambar 3.14 menampilkan desain antarmuka halaman data siswa

dengan fitur sidebar dan fungsi tabel di mana terdapat detail NIS siswa, nama siswa,

dan kelas. Selain itu terdapat fitur action untuk mengedit data per siswa dan fitur

hapus untuk menghapus data siswa dan juga terdapat fitur pagination untuk

memudahkan admin mengelola data siswa.

Gambar 3.15 Desain Antarmuka Halaman Data Mata Pelajaran

Pada gambar 3.15 menampilkan desain antarmuka halaman data mata

pelajaran dengan fitur side bar dan fungsi tabel untuk mengelola data mata

pelajaran. Pada fitur tabel action terdapat fungsi pengaturan soal, edit mata

pelajaran, dan hapus data. Fitur tambah soal disetiap mata pelajaran untuk

memudahkan admin dalam mengelola soal dari menambahkan, mengupdate, dan

menghapus soal sesuai dengan mata pelajaran. Pada fungsi edit mata pelajaran

untuk mengatur ulang detail mata pelajaran berkaintan dengan id mata pelajaran

27

dan nama mata pelajaran. Fungsi hapus untuk menghapus mata pelajaran yang

dipilih.

Gambar 3.16 Desain Antarmuka Halaman Data Ujian

Pada gambar 3.16 menampilkan antarmuka halaman data ujian dengan fitur

sidebar dan fungsi tabel dengan isi nama ujian, jumlah soal, waktu ujian dalam

menit dan action. Pada fungsi action untuk mengatur setiap data ujian dari mengatur

soal yang ditampilkan, dan waktu yang tersedia. Pada fungsi hapus, untuk

menghapus data ujian yang sudah tidak diberlakukan.

Gambar 3.17 Desain Antarmuka Halaman Hasil Ujian

Pada gambar 3.17 menampilkan halaman antarmuka hasil ujian dengan fitur

sidebar dan fungsi tabel dengan isi yang sama dengan halaman data ujian namun

dengan fungsi yang berbeda. Pada halaman hasil ujian menampilkan data ujian

yang telah lewat dan menampilkan fungsi detail dan hapus. Pada fungsi detail untuk

melihat daftar siswa yang telah mengikuti ujian dan menampilkan nilai siswa yang

ikut ujian.

28

Gambar 3.18 Desain Antarmuka Halaman Uji Coba Algoritma

Pada gambar 3.18 menampilkan halaman antarmuka untuk uji coba

algoritma. Pada halaman ini memiliki fitur sidebar dan fungsi tabel yang

menampilkan daftar siswa dengan nis dan nama siswa. Selain itu terdapat fungsi

action untuk mengetahui proses dan hasil pengacakan untuk tiap siswa. Proses

pengacakan untuk setiap siswa berbeda tergantung dari nis masing-masing siswa.

3.8.2 Rancang Antarmuka User

Rancangan antarmuka user menampilkan semua desain antarmuka untuk

halaman user.

Gambar 3.19 Desain Antarmuka Halaman Utama User

Pada gambar 3.19 menampilkan desain antarmuka halaman utama untuk tiap

user. Pada side bar terdapat profil siswa yaitu nama dan nis siswa. Pada fungsi tabel

menampilkan detail semua ujian baik yang masih berlangsung maupun yang telah

diikuti user dengan fitur jumlah soal, nama mata pelajaran, nilai siswa, waktu ujian

29

dan action. Fitur action akan berubah jika ujian belum diikuti akan menampilkan

button mulai, namun apabila ujian telah diikuti maka button akan mati dan berganti

menjadi selesai. Selain itu untuk kolom ujian yang telah diikuti, akan berubah dan

berbeda dengan kolom ujian yang belum diikuti.

Gambar 3.20 Desain Antarmuka Halaman Ujian

Pada gambar 3.20 menampilkan desain antarmuka halaman ujian user. Pada

side bar terdapat detail profil siswa yaitu nama dan nis siswa, serta terdapat waktu

tersisa untuk mengerjakan soal ujian. selain itu terdapat tabel untuk menampilkan

soal serta jawaban, setiap jawaban menggunakan radio button. Pada halaman atas

terdapat pagination untuk memilih soal. Pada pojok kanan atas terdapat button

“kumpulkan” untuk mengakhiri ujian. ketika button ditekan akan muncul dialog

message untuk mengkonfirmasi bahwa ujian telah diselesaikan atau belum.