Rancangan Tampilan Awal Splash Screen

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