BAB III METODE PENELITIAN
4.3 Pertimbangan Desain
4.3.8 Perancangan STD
Halam an Utam a
Kontak Kam i Jadw al Ujian
Info Gedung Bantuan
Info Ujian Pencarian
Klik "Jadw al Ujian" Tam pilkan Halam an Jadw al
Ujian
Klik "Info Gedung" Tam pilkan Info
Gedung Klik "Halam an Utam a"
Tam pilkan Halam an Utam a
Klik "Bantuan" Tam pilkan
Bantuan Klik "Kontak Kam i"
Tam pilkan Halam an Kontak Kam i
Klik "Info Ujian" Tam pilkan Halam an
Info Ujian
Klik "Pencarian"
Tam pilkan Info Peserta Ujian
Lokasi Ujian
Klik "Lokasi Ujian" Tam pilkan Halam an
Lokasi Ujian
Klik "Halam an Utam a" Tam pilkan Halam an Utam a
Klik "Halam an Utam a" Tam pilkan Halam an Utam a Klik "Halam an Utam a"
Tam pilkan Halam an Utam a
Klik "Halam an Utam a" Tam pilkan Halam an Utam a Klik "Halam an Utam a"
Tam pilkan Halam an Utam a
Klik "Halam an Utam a" Tam pilkan Halam an Utam a
Pada halaman utama terdapat delapan navigasi yaitu halaman utama, jadwal ujian, info gedung, kontak kami, info ujian, lokasi ujian, pencarian dan bantuan.
Jadwal Ujian
Kontak Kami Halaman Utama
Info Ujian Pencarian
Klik "Jadwal Ujian" Tampilkan Jadwal Ujian
Klik "Halaman Utama" Tampilkan Halaman Utama
Klik "Jadwal Ujian" Tampilkan Jadwal Ujian Klik "Kontak Kami" Tampilkan Kontak Kami
Klik "Pencarian" Tampilkan Halaman Info
Peserta Ujian Klik "Jadwal Ujian" Tampilkan Jadwal Ujian
Klik "Infol Ujian" Tampilkan Informasi Ujian Klik "Jadwal Ujian"
Tampilkan Jadwal Ujian
Gambar 4.26 Perancangan STD Halaman Jadwal Ujian
Pada halaman jadwal ujian terdapat info jadwal ujian dan dapat memilih menu halaman utama, kontak kami, info ujian dan pencarian.
Lokas i Ujian
Kontak Kam i Halam an Utam a
Klik "Lokas i Ujian" Tam pilkan Lok asi Ujian
Klik "Halam an Utam a" Tam pilkan Halam an Utam a
Klik "Kontak Kam i" Tam pilkan Kontak Kam i
Klik "Pencarian" Tam pilkan Halam an Info
Pe serta Ujian Lokas i Ujian Mandir i Lokas i Ujian SNMPTN Lokas i UM B
Klik "Lokasi UMB" Tampilkan Info
Lokasi UMB
Klik "Lokas i Ujian" Tam pilkan Lok asi Ujian
Klik "Lokasi Ujian SNMPTN" Tampilkan Info Lokasi
SNMPTN
Klik "Lokasi Ujian Mandiri" Tampilkan Info Lokasi
Mandiri
Klik "Info Uj ian" Tampilk an Info Uj ian
Info Ujian
Pe ncar ian
Gambar 4.27 Perancangan STD Halaman Lokasi Ujian
Pada Gambar 4.27 merupakan halaman lokasi ujian yang terdapat menu lokasi UMB, SNMPTN dan Mandiri. Ada menu halaman utama untuk kembali ke halaman awal, menu kontak kami untuk ke halaman kontak kami dan info ujian serta halaman kontak kami.
Info Ge dung
Halam an Utam a Kontak Kam i
Info Ujian Pe ncarian
Klik "Info Gedung"" Tam pilkan Halam an Info
Ge dung"
Klik "Halam an Utam a" Tam pilkan Halam an Utam a
Klik "Info Gedung" Tam pilkan Halam an Info
Ge dung"
Klik "Info Gedung" Tam pilkan Info Gedung
Klik "Info Gedung" Tam pilkan Halam an Info
Ge dung Klik "Kontak Kam i"
Tam pilkan Halam an Kontak Kam i
Klik "Pencarian" Tam pilkan Halam an Info
Pe serta Ujian Klik "Info Ujian"
Tam pilkan Halam an Info
Ujian
Gambar 4.28 Perancangan STD Info Halaman Gedung
Pada halaman info gedung terdapat menu halaman utama, kontak kami, info ujian dan pencarian.
Info Ujian Halam an Utam a Mandiri PM DK UM B Kontak Kam i Pe ncarian Klik "Info Ujian"
Tam pilkan Halam an Info Ujian
Klik "Info Ujian" Tam pilkan Halam an Info
Ujian
Klik "Info PMDK" Tam pilkan Info
PM DK
Klik "Halam an Utam a" Tam pilkan Halam an Utam a
Klik "Info UMB" Tam pilkan Halam an
Info UM B
Klik "InfoM andiri" Tam pilkan Halam an Mandiri
Klik "Info Ujian" Tam pilkan Halam an Info
Ujian Klik "Kontak Kam i"
Tam pilkan Halam an Kontak Kam i
Klik "Pencarian" Tam pilkan Halam an info
Pe serta ujian
SNMPTN
Klik "Lokas i SNMPTN Tam pilkan Halam an
Info SNMPTN
Gambar 4.29 Perancangan STD Halaman Info Ujian
Pada halaman info ujian terdapat menu ujian PMDK, UMB, SNMPTN dan Mandiri serta dapat memilih menu halaman utama, pencarian dan kontak kami.
Kontak Kam i Halam an Utam a Info Ujian
Kontak Kam i Pencarian
Klik "Halam an Utam a" Tam pilkan Halam an Utam a
Klik "Kontak Kam i"
Tam pilkan Halam an Kontak Kam i
Klik "Info Ujian"
Tam pilkan Halam an Info Ujian
Klik "Pencarian" Tam pilkan Halam an Pencarian/ info peserta
ujian
Gambar 4.30 Perancangan STD Halaman Kontak Kami
Pada halaman kontak kami terdapat menu halaman utama, kontak kami, info ujian dan pencarian.
Bantuan Halam an Utam a
Kontak Kam i
Pencarian Klik "Halam an
Utam a" Tam pilkan Halam an
Utam a
Klik "Pencarian" Tam pilkan Halam an info
Peserta ujian
Info Ujian
Klik "Info Ujian" Tam pilkan Halam an Info
Ujian Klik "Kontak Kam i" Tam pilkan Halam an Kontak
Kam i
Gambar 4.31 Perancangan STD Halaman Bantuan
Dari halaman bantuan dapat menuju ke halaman utama, kontak kami, info ujian dan pencarian.
Pe ncarian
Kontak Kam i Halam an Utam a
Info Ujian Pe ncarian
Klik "Halam an Utam a" Klik "Kontak Kam i"
Tam pilkan Halam an Kontak Kam i
Klik "Info Ujian" Tam pilkan Halam an
Info Ujian
Klik "Pencarian" Tam pilkan Halam an
Info Pe serta Ujian Tam pilkan Halam an
Utam a
Gambar 4.32 Perancangan STD Fitur Pencarian
Pada halaman pencarian terdapat menu kontak kami, halaman utama, info ujian dan pencarian yang dapat terhubung pada masing-masing halaman menu.
Gambar 4.33 Perancangan STD Halaman Admin Logout Home Data Master Data Transaksi Klik “Home” Tampilkan Home
Klik “Data Master” Tampilkan Data
Master
Klik “Home”
Tampilkan Home Klik “Data Transaksi”
Tampilkan Data Transaksi
Klik “Logout” Keluar Aplikasi
4.3.5 Perancangan Layar
Dalam tahap perancangan layar, terdapat perancangan layar aplikasi frontend dan
backend.
A. Layar Aplikasi FrontEnd
Halaman utama jadwal ujian lokasi ujian info gedung bantuan pencarian
Profil UIN Jakarta Tentang Aplikasi
Logo UIN Teks judul
kontak kami
Info Ujian
Gambar 4.34 Perancangan Halaman Utama Layar FrontEnd
Pada tahap perancangan layar aplikasi frontend, dirancang tampilan dari menu-menu yang ada pada layar aplikasi frontend. Terdapat 4 icon navigasi menu di antaranya menu jadwal ujian, lokasi ujian, info gedung dan bantuan. Terdapat halaman utama dan kontak kami di atas logo UIN. Di bawah halaman utama dan kontak kami terdapat logo UIN dan teks judul. Di samping kontak kami terdapat kolom pencarian dan di bawah teks judul terdapat informasi profil UIN Jakarta dan tentang aplikasi.
Gambar 4.35 Perancangan Halaman Jadwal Ujian
Halaman ini berfungsi sebagai informasi mengenai jadwal ujian yang disampaikan dengan tipe informasi berupa teks.
Gambar 4.36 Perancangan Halaman Lokasi Ujian
Gambar 4.36 merupakan halaman lokasi ujian sebagai informasi mengenai lokasi ujian masuk berdasarkan range dari nomor peserta ujian.
Lokasi Ujian UMB Jadwal Ujian SNMPTN Jadwal Ujian UMB Jadwal Ujian Mandiri Halaman Utama Kontak Kami Info Ujian Lokasi Ujian Gambar
Gambar Gambar Gambar
Lokasi Ujian SNMPTN Lokasi Ujian Mandiri Halaman Utama Kontak Kami Info Ujian Lokasi Ujian UMB
Gambar 4.6 Halaman Info Gedung
Gambar 4.37 Perancangan Halaman Info Gedung
Halaman ini berfungsi sebagai informasi letak gedung-gedung yang ada pada area Kampus I UIN Jakarta.
Gambar 4.38 Perancangan Halaman Bantuan
Gambar 4.38 merupakan halaman bantuan yang berfungsi sebagai penujuk atau panduan pengguna dalam menggunakan aplikasi.
Gambar Gambar Gambar Animasi Gambar Gambar Gambar Info Gedung Pintu Gerbang Rektorat Kantin
Fakultas dan Lab
Masjid dan Aula
Bank Halaman Utama Kontak Kami Info Ujian Halaman Utama Kontak Kami Info Ujian Bantuan 1 2 3 4 5 6
Mencari Peserta Mencari Lokasi
Penelusuran 3D
Lihat Lokasi Kelas
Mencetak Lokasi Ujian
Gambar 4.39 Perancangan Halaman Info Ujian
Halaman info ujian berfungsi sebagai informasi seputar ujian masuk yang diselenggarakan oleh Perguruan Tinggi Negeri (PTN).
Gambar 4.40 Perancangan Halaman Kontak Kami
Gambar 4.40 adalah halaman kontak kami yang berfungsi sebagai halaman pengiriman pesan oleh pengguna kepada admin.
Info Ujian Gambar Halaman Utama Kontak Kami Ujian
Gambar Gambar Gambar Gambar
Info Ujian UMB Lokasi Ujian Mandiri Lokasi Ujian PMDK Lokasi Ujian SNMPTN Kontak Kami Gambar Alamat : Website : Telp/Fax:
Silahkan Isi Form Di bawah Ini.
Judul : Email : Pesan : Halaman Utama Kontak Kami Info Ujian 123456
Gambar 4.41 Perancangan Halaman Pencarian
Halaman ini berfungsi sebagai infromasi dari fitur pencarian peserta ujian masuk berupa foto, nomor ujian, jadwal ujian, gambar gedung dan gambar denah letak ruang kelas/ ruang ujian. Terdapat hypertext berupa cetak yang berfungsi untuk mencetak informasi ujian dan telusuri yang dapat terhubung pada halaman virtual reality untuk menelusuri gedung ujian.
Gambar 4.42 Rancangan Layar Virtual Reality
Lantai 1 Lantai 2 Awal Lantai 3 Lantai 4 Lantai 5 Lantai 6 Lantai 7 Video
Teks Petunjuk penggunaan
Teks Judul Virtual Reality Halaman Utama Kontak Kami Info Ujian Pencarian Lokasi Ujian
Nomor Ujian Cetak Telusuri Denah Ruang Ujian Foto Peserta Ujian Gambar Gedung
Pada gambar 4.42 merupakan perancangan layar virtual reality yang mempunyai 9 tombol, di antaranya tombol lantai 1 sampai lantai 7 yang berfungsi sebagai tombol untuk menuju ke halaman pencarian atau telusuri letak ruang secara 3 dimensi pada lantai yang dipilih. Tombol awal untuk menuju ke halaman awal virtual reality dan tombol video yang berfungsi menuju ke halaman video untuk memutar video.
B. Layar Aplikasi BackEnd
Pada perancangan layar aplikasi backend terdapat layar halaman login dan
administrator.
Gambar 4.43 Perancangan Halaman Login pada Admin
Pada Gambar 4.43 merupakan rancangan interface halaman login dari aplikasi
backend. Pada halaman login terdapat form input username dan password serta tombol submit untuk masuk ke halam admin. Halaman login berfungsi sebagai halaman awal sebelum admin masuk ke halaman administrator.
Logo UIN
username
Password
Gambar 4.44 Perancangan Halaman Utama Admin
Pada Gambar 4.44 merupakan gambar rancangan layar halaman administrator. Menu-menu dalam halaman administrator adalah home, data master, data transaksi dan logout. Halaman ini berfungsi sebagai proses input, update dan hapus data yang dilakukan oleh admin.
Gambar 4.45 Perancangan Menu data Master
Pada menu data master terdapat submenu fakultas, jenis test, jenis paket dan ruang.
Home Data Master Data Transaksi Logout Logo UIN Teks Judul Logo Admin Fakultas Jenis Test Jenis Paket Ruang
Selamat Datang Administrator
Selamat datang Administrator
Home Data Transaksi Logout
Logo UIN Teks Judul Logo Admin Data Master