Perancangan Flowchart Pertimbangan Desain

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