4.3.5 Perancangan Flowchart
Di bawah ini akan diuraikan flowchart dari aplikasi frontend dan backend.
A. Flowchart Aplikasi Frontend
Gambar 4.3 Perancangan Flowchart Halaman Utama
Proses dimulai dari halaman utama, user dapat memilih fitur pencarian untuk mencari lokasi, atau memilih menu lain jika tidak maka proses selesai.
Halaman Utama
Pilih Fitur Pencarian
Lokasi
Pilih Menu Jadwal Ujian
Pilih Menu Lokasi Ujian
Pilih Menu Info Gedung
Pilih Menu Bantuan
Pilih Menu Kontak Kami
Pilih Menu Info Ujian
Mulai
Selesai
A
B
C
D
E
F
G
Ya
Tidak
Ya
Ya
Ya
Ya
Ya
Ya
Tidak
Tidak
Tidak
Tidak
Tidak
Tidak
A: Halaman Pencarian B: Halaman Jadwal Ujian
C: Halaman Lokasi Ujian D: Halaman Info Gedung
E: Halaman Bantuan F: Halaman Kontak Kami
G: Halaman Info Ujian
Gambar 4.4 Perancangan Flowchart Fitur Pencarian
Jika user memilih menu pencarian, masukkan nomor atau nama peserta ujian, setelah itu terjadi proses pencarian yang data-datanya akan ditampilkan
A
Masukkan Nama atau
Nomor Ujian
Pencarian
Halaman Pencarian
Pilih Denah Letak Fakultas
Pilih Denah Ruang Ujian
Pilih Cetak
Pilih Telusuri Ruangan
H Gambar
Denah Fakultas
Gambar Denah
Ruang Ujian
Cetak Ya
Ya
Ya
Ya Tidak
Tidak
Tidak Tidak
A: Halaman Pencarian H: Halaman Virtual Reality
pada halaman pencarian. User dapat memilih denah letak fakultas, ruang ujian atau pilih cetak dan telusuri ruangan.
Gambar 4.5 Perancangan Flowchart Menu Jadwal Ujian
Pada halaman jadwal ujian, user dapat melihat informasi jadwal ujian jika tidak dapat memilih menu lain atau tetap berada pada halaman jadwal ujian.
Tidak B
Halaman Jadwal Ujian
Halaman Utama
Pilih Fitur Pencarian
Ya A
Pilih Menu Kontak Kami
Pilih Menu Info Ujian
Pilih Menu Utama Ya
Tidak
Tidak Ya
Ya F
G
A: Halaman Pencarian B: Halaman Jadwal Ujian
F: Halaman Kontak Kami G: Halaman Info Ujian
Gambar 4.6
Perancangan Flowchart Menu Lokasi Ujian
C
Pilih Menu Lokasi Ujian SNMPTN
Ya
Tidak
Halaman Lokasi Ujian
Pilih Menu Lokasi Ujian UMB
Ya Tidak
Pilih Menu Lokasi Ujian Mandiri
Ya Tidak
Tidak
Info Lokasi Ujian SNMPTN
Info Lokasi Ujian UMB
Info Lokasi Ujian
Mandiri
Pilih Menu Kontak Kami
Pilih Menu Info Ujian Pilih Menu Utama
Ya Tidak
Tidak Ya
Ya F
G
Halaman Utama
Pilih Fitur Pencarian
Ya A
Tidak
A: Halaman Pencarian C: Halaman Lokasi Ujian
E: Halaman Bantuan F: Halaman Kontak Kami
Pada halaman lokasi, terdapat menu info lokasi ujian UMB, SNMPTN dan Mandiri. Jika tidak dapat memilih menu lain.
Gambar 4.7 Perancangan Flowchart Menu Info Gedung
D
Halaman Info Gedung
Pilih Menu Gedung
Ya
Tidak
Pilih Gambar Gedung
Ya
a
Tidak Terlihat Glow pada
Gambar Gedung yang Dipilih
Informasi pada Gambar Gedung
yang dipilih
Pilih Menu Kontak Kami
Pilih Menu Info Ujian
Tidak
Pilih Menu Exit
Ya Tidak
Tidak Ya
F
G
Halaman Utama
Pilih Menu Halaman
Ya Tidak
Halaman Utama
Pilih Fitur Pencarian
Ya
A
Tidak
A: Halaman Pencarian D: Halaman Info Gedung
F: Halaman Kontak Kami G: Halaman Info Ujian
Ya
Pada Halaman Info gedung, user dapat melihat menu gedung untuk melihat letak gedung, atau memilih gambar gedung untuk melihat informasi
gedung. Jika tidak maka dapat memilih menu lain yang ada pada halaman info gedung.
Gambar 4.8 Perancangan Flowchart Menu Bantuan
Tidak
Tidak E
Halaman Bantuan
Pilih Menu pada Halaman
Ya
Pilih Menu Exit Ya
Halaman Utama
R
Pilih Menu Kontak Kami
Pilih Menu Info Ujian
Ya
Ya
F
G Pilih Menu
Halaman
Ya
Tidak Halaman
Utama
Pilih Fitur Pencarian
Ya
A
Tidak Tidak
Tidak
A: Halaman Pencarian E: Halaman Bantuan
F: Halaman Kontak Kami G: Halaman Info Ujian
R: Animasi Halaman
Bantuan
Pada halaman bantuan terdapat animasi bantuan berupa informasi penggunaan aplikasi yang dapat digunakan secara interaktif. Jika tidak memilih
halaman bantuan maka dapat memilih menu halaman lain.
Gambar 4.9 Perancangan Flowchart
Animasi Halaman Bantuan
R
Pilih Menu Penelusuran 3D
Ya
Pilih Menu Mencetak Lokasi Ujian
Ya
Pilih Menu Lihat Lokasi Kelas
Ya
Pilih Menu Mencari Lokasi Ujian
Ya
Pilih Menu Info Kontak
Tida E
Informasi Penggunaan
Menu Kontak Kami
Informasi Cara Menggunakan
Pencarian Lokasi
Informasi Penggunaan
penelusuran Ruang Ujian Secara 3D
Pilih Menu Mencari Nomor Ujian
Informasi Cara Mencari Nomor
Ujian
Ya
Informasi Cara Mencetak Lokasi
Ujian
Informasi Cara Melihat Menu
Lokasi Kelas
Tidak
E: Halaman Bantuan R: Animasi Halaman
Bantuan
Gambar 4.10 Perancangan Flowchart
Halaman Info Ujian
Informasi Ujian UMB
Informasi Ujian
Mandiri
Informasi Ujian
PMDK
Informasi Ujian
PMDK
Tidak Tidak
A: Halaman Pencarian F: Halaman Kontak Kami
G: Halaman Info Ujian
G Halaman
Info Ujian
Pilih Menu Info Ujian UMB
Ya
Tidak Pilih Menu Info
Ujian Mandiri Ya
Tidak Pilih Menu Info
Ujian PMDK Ya
Tidak Pilih Menu Info
Ujian SNMPTN Ya
Tidak
Pilih Menu Kontak Kami
Pilih Menu Info Ujian
Pilih Menu Utama
Ya
Tidak
Tidak Ya
Ya F
G
Halaman Utama
Pilih Fitur Pencarian
Ya A
Gambar 4.11 Perancangan Flowchart
Halaman Virtual Reality
Tidak Tidak
H Halaman Virtual
Reality
Pilih Menu Lantai 1 Ya
Pilih Menu Lantai 2 Ya
Pilih Menu Lantai 4 Ya
Pilih Menu Lantai 3 Ya
Pilih Menu Lantai 5 Ya
Pilih Menu Lantai 6 Ya
Pilih Menu Lantai
7
Ya
Pilih Menu Video Ya
Pilih Menu Awal Ya
Virtual Reality Lantai 1
Virtual Reality Lantai 2
Virtual Reality Lantai 3
Virtual Reality Lantai 4
Virtual Reality Lantai 5
Virtual Reality Lantai 6
Virtual Reality Lantai 7
Video Tidak
Tidak
Tidak
Tidak
Tidak
Tidak
Tidak Halaman
Pencarian Lokasi Ujian
H: Halaman Virtual Reality
Gambar 4.12
Perancangan Flowchart
Halaman Administrator
Gambar 4.12 merupakan alur dari halaman admin. Admin melakukan login terlebih dahulu untuk dapat masuk pada halaman administrator. Jika login valid
maka admin masuk ke halaman administrator.
I Mulai
Login
Cek Basis Data Admin
Apakah Valid?
Halaman Admin
Plih Menu Data Transaksi
Plih Menu Logout
Selesai Tidak
J
Ya Ya
Ya
Tidak Plih Menu Data
Master Tidak
Ya Tidak
I: Menu Data Master J: Menu Data Transaksi
Gambar 4.13 Perancangan Flowchart
Menu Data Master
Pada menu data master terdapat menu fakultas, jenis test, jenis paket, menu ruang yang terhubung pada submenu masing-masing menu yang ada pada
data master.
Tidak I
Plih Menu Fakultas
Plih Menu Jenis Test
Plih Menu Jenis Paket
Plih Menu Ruang
Halaman Admin
K
L
M
N Ya
Ya
Ya
Ya Tidak
Tidak
Tidak
I: Menu Data Master K: Submenu Fakultas
L: Submenu Jenis Test M: Submenu Jenis Paket
N: Menu Ruang
Gambar 4.14 Perancangan Flowchart
Menu Data Transaksi
Pada menu data transaksi terdapat menu jadwal, peserta, lokasi dan admin yang dapat terhubung pada submenu pada masing-masing menu.
J
Plih Menu Jadwal
Plih Menu Peserta
Plih Menu Lokasi
Halaman Admin
O
P
Q Ya
Ya
Ya
Tidak Tidak
Tidak
J: Menu Data Transaksi O: Submenu Jadwal
P: Submenu Peserta Q: Submenu Lokasi
Gambar 4.15 Perancangan Flowchart
Submenu Fakultas
Pada gambar 4.15 merupakan Submenu fakultas, admin dapat melakukan proses input, lihat, hapus dan edit data.
Tidak K
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data Fakultas
Plih Edit Data
Edit Data
Hapus Data Plih Menu Lihat
Data
Plih Hapus Data
Ya
Tidak Ya
Ya Tidak
K: Submenu Fakultas
Ya Tidak
Gambar 4.16 Perancangan Flowchart
Submenu Jenis Test
Pada gambar 4.16 merupakan Submenu jenis test, admin dapat melakukan proses input, lihat, hapus dan edit data.
L: Submenu Jenis Test
L
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data Jenis Test
Plih Edit Data
Edit Data
Hapus Data Plih Menu Lihat
Data
Plih Hapus Data
Ya
Tidak Ya
Ya Tidak
Tidak Ya
Tidak
Gambar 4.17 Perancangan Flowchart
Submenu Jenis Paket
Pada gambar 4.17 merupakan Submenu jenis
paket
, admin dapat melakukan proses input, lihat, hapus dan edit data.
M: Submenu Jenis Paket
M
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data
Jenis Paket
Plih Edit Data
Edit Data
Hapus Data Plih Menu Lihat
Data
Plih Hapus Data
Ya
Tidak Ya
Ya Tidak
Tidak Ya
Tidak
Gambar 4.18 Perancangan Flowchart
Submenu Ruang
Pada gambar 4.18 merupakan Submenu ruang, admin dapat melakukan proses input, lihat, hapus dan edit data.
N: Submenu Ruang
N
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data Ruang
Plih Edit Data
Edit Data
Hapus Data Plih Menu Lihat
Data
Plih Hapus Data
Ya
Tidak Ya
Ya Tidak
Tidak Ya
Tidak
Gambar 4.19 Perancangan Flowchart
Submenu Jadwal
Pada gambar 4.19 merupakan Submenu jadwal, admin dapat melakukan proses input, lihat, hapus dan edit data.
Tidak Ya
Tidak O
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data Jadwal
Plih Menu Lihat Data
Ya
Ya Plih
Edit Data Edit Data
Hapus Data Plih
Hapus Data Tidak
Ya Tidak
O: Submenu Jadwal
Gambar 4.20 Perancangan Flowchart
Submenu Peserta
Pada gambar 4.20 merupakan Submenu peserta, admin dapat melakukan proses input, lihat, hapus dan edit data.
P: Submenu Peserta
P
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data Peserta
Plih Edit Data
Edit Data
Hapus Data Plih Menu Lihat
Data
Plih Hapus Data
Ya
Tidak Ya
Ya Tidak
Ya Tidak
Ya Tidak
Gambar 4.21 Perancangan Flowchart
Submenu Peserta
Pada gambar 4.21 merupakan Submenu jadwal, admin dapat melakukan proses input, lihat, hapus dan edit data.
Q: Submenu Lokasi
Q
Plih Menu Input Data
Input Data Simpan
Halaman Lihat Data Lokasi
Plih Edit Data
Edit Data
Hapus Data Plih Menu Lihat
Data
Plih Hapus Data
Ya
Tidak Ya
Ya Tidak
Ya Tidak
Tidak
4.3.6 Perancangan DFD Data Flow Diagram