118
Simulasi Tes Client http-connection server
Database MySQL
{OR} {OR}
{OR} select Tabel_Pembahasandata user
sqlTabel_Pembahasan-proses query
sqlTabel_Pembahasan-hasil query Halaman Pembahasan Soal
Sequence Menu Pembahasan
Gambar 28. Sequence Menu Pembahasan
e. Perancangan User Interface
Rancangan awal user interface aplikasi Simulasi Tes berbasis mobile application adalah sebagai berikut:
1. Rancangan Tampilan Awal Splash Screen
Tampilan awal splash screen adalah hasil eksplorasi tampilan grafis di awal pembuka sebuah aplikasi. Style splash screen banyak digunakan untuk
memberikan identitas sebuah software perangkat lunak. Berikut adalah rancangan tampilan splash screen untuk aplikasi berbasis mobile application
yang ditunjukan pada gambar 29.
119 Gambar 29. Rancangan Tampilan Awal Splash Screen
2. Rancangan Form Login Tampilan kedua setelah adalah halaman form login berisi 2 buah textfield
yang berisikian username dan password. Dengan menyesuaikan resolusi layar yang berbeda-beda, akan memudahkan user melakukan navigasi pada
handphone. Berikut adalah rancangan tampilan form login untuk aplikasi Simulasi Tes berbasis mobile application yang ditunjukan pada gambar 30.
Gambar 30. Rancangan Tampilan Halaman Login 3. Rancangan Tampilan Menu Pilih Soal
Tampilan menu pilih soal akan menampilkan daftar soal mata pelajaran yang akan dikerjakan oleh user. User terlebih dahulu memilih mata pelajaran
sebelum memulai mengerjakan soal. Berikut adalah rancangan tampilan menu pilih soal untuk aplikasi Simulasi Tes berbasis Mobile Application yang ditunjukan
pada gambar 31.
120 Gambar 31. Rancangan Tampilan Halaman Pilih Soal
4. Rancangan Halaman Soal Tampilan halaman kerja soal menampilkan soal beserta pilihan jawaban
menggunakan textfield yang dimodifikasi dengan perintah running text untuk menyesuaikan resolusi layar yang berbeda serta memudahkan clientuser dalam
mengamati soal. Berikut adalah rancangan tampilan halaman soal untuk aplikasi Simulasi Tes berbasis mobile application yang ditunjukan pada gambar 32.
Gambar 32. Rancangan Tampilan Halaman Soal 5. Rancangan Tampilan Upload Nilai
Rancangan tampilan upload nilai akan muncul apabila user sudah merasa yakin dengan meng-input jawaban yang dianggap benar. Bentuk pesan dengan
menggunakan alert message akan meyakinkan user untuk proses submit jawaban yang akan dikonversi menjadi nilai scoring. Berikut adalah rancangan
121 tampilan upload nilai untuk aplikasi Simulasi Tes Berbasis Mobile Application
yang ditunjukan pada gambar 33.
Gambar 33. Rancangan Tampilan Upload Nilai 6.
Rancangan Tampilan “Login” Aplikasi Web Rancangan tampilan login pertama akan muncul pada browser apabila
clientuser mengunjungi alamat http:rizam.fastacenter.com. Clientuser dapat melanjutkan proses login agar dapat menjalankan fitur yang telah disediakan
dalam sistem. Berikut adalah rancangan tampilan login untuk aplikasi Simulasi Tes berbasis mobile application yang ditunjukan pada gambar 34.
Gambar 34 . Rancangan Tampilan “Login”
122 7. Rancangan Tampilan Menu Utama
Rancangan tampilan menu utama akan muncul setalah clientuser melakukan login pada aplikasi web simulasi tes. Berikut adalah rancangan
tampilan menu utama yang ditunjukan pada gambar 35.
Gambar 35. Rancangan Tampilan Menu Utama 8. Rancangan Tampilan Menu Nilai
Rancangan menu “Nilai” difungsikan untuk melihat nilai scoring setelah mengerjakan soal utama pada aplikasi mobile maupun mengerjakan soal
pengayaan yang terdapat pada aplikasi web simulasi tes. Berikut adalah rancangan tampilan menu nilai yang ditunjukan pada gambar 36.
Gambar 36. Rancangan Tampilan Menu Nilai
123 9. Rancangan Tampilan Menu Pengayaan
Rancangan tampilan menu pengayaan difungsikan apabila nilai clientuser menurut guru masih dirasa kurang memenuhi standar. Clientuser akan
mengakses fitur tersebut untuk perbaikan menuju standar yang ditetapkan guru. Berikut adalah rancangan tampilan menu pengayaan yang ditunjukan pada
gambar 37.
Gambar 37 . Rancangan Tampilan Menu “Pengayaan”
10. Rancangan Tampilan Menu Pembahasan Rancangan tampilan menu “Pembahasan” difungsikan dan muncul pada
aplikasi Web Simulasi Tes setelah Clientuser mengerjakan soal pada aplikasi mobile
. Menu “Pembahasan” menyajikan pembahasan jawaban yang tepat dan benar sesuai soal yang disajikan. Berikut ini adalah rancangan tampilan menu
“Pembahasan” yang ditunjukan pada gambar 38.
124 Gambar 38
. Rancangan Tampilan Menu “Pembahasan”
3. Desain Database
