18. Data Flow Diagram Level 3 Proses 2.7 Pengolahan Data Ongkos Kirim
3.2. Perancangan Arsitektur
3.2.2 Perancangan Antarmuka
3.2.2.4 Perancangan Antarmuka Staff Administrasi
1. Perancangan Antar muka login
Berikut dapat dilihat perancangan antarmuka login staff administrasi dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.64 dibawah ini :
Header D01 Login Username : Password : Login Lupa password
Klik login menuju D02 Klik lupa password menuju D01
Gambar III.64 Perancangan antarmuka menu login
2. Perancangan Antarmuka Menu Home
Berikut dapat dilihat perancangan antarmuka menu home dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah pada yang tercantum gambar III.65 dibawah ini :
Header D02
Anda login sebagai administrasi Akun saya Main Menu Data Agen Data Pemesanan Logout Data Pembayaran Laporan
Klik login menuju D02 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D05 Klik data pembayaran menuju D06 Klik laporan menuju D08 Klik logout menuju D01
Gambar III.65 Perancangan antarmuka menu home
3. Perancangan Antarmuka Menu Akun Saya
Berikut dapat dilihat perancangan antarmuka menu akun saya dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah pada yang tercantum gambar III.66 dibawah ini :
Header D03 E-mail : Data Agen Main Menu Akun saya Data Pemesanan Data Pembayaran Logout Akun saya Ubah Password Ubah Password Password Lama : Password Baru : Ulangi Password : Laporan
Klik login menuju D02 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D05 Klik data pembayaran menuju D06 Klik laporan menuju D08 Klik ubah password menuju D03 Klik logout menuju D01
4. Perancangan Antarmuka Menu Agen
Berikut dapat dilihat perancangan antarmuka menu agen dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.67 dibawah ini :
Header D04 Data Agen Main Menu Akun saya Data Pemesanan Data Pembayaran Logout Agen
Email Nama Alamat Kota Propinsi Tambah Agen
Laporan
Klik login menuju D02 Klik tambah agen menuju D05 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D05 Klik data pembayaran menuju D06 Klik laporan menuju D08 Klik logout menuju D01
Gambar III.67 Perancangan antarmuka menu agen 5. Perancangan Antarmuka Menu Tambah Agen
Berikut dapat dilihat perancangan antarmuka menu tambah agen dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.68 dibawah ini :
Header D05 Data Agen Main Menu Akun saya Data Pemesanan Data Pembayaran Logout Tambah Agen E-mail Password Nama Alamat Kota No telepon Simpan Laporan
Klik login menuju D02 Klik simpan menuju D05 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D06 Klik data pembayaran menuju D07 Klik laporan menuju D08 Klik logout menuju D01
Gambar III.68 Perancangan antarmuka menu tambah agen
6. Perancangan Antarmuka Menu Data Pemesanan
Berikut dapat dilihat perancangan antarmuka menu data pemesanan dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.69 dibawah ini :
Header D06 Data Agen Main Menu Akun saya Data Pemesanan Data Pembayaran Logout Pesanan
No Pesanan Tanggal Pukul Email Pemesan Status
Laporan
Klik login menuju D02 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D06 Klik data pembayaran menuju D07 Klik laporan menuju D08 Klik logout menuju D01
7. Perancangan Antarmuka Menu Data Pembayaran
Berikut dapat dilihat perancangan antarmuka menu data pembayaran dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.70 dibawah ini :
Header D07 Data Agen Main Menu Akun saya Data Pemesanan Data Pembayaran Logout Pembayaran Laporan
Tanggal Nama Agen Jumlah Produk Total Bayar
Klik login menuju D02 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D06 Klik data pembayaran menuju D07 Klik laporan menuju D08 Klik logout menuju D01
Gambar III.70 Perancangan antarmuka menu data pembayaran 8. Perancangan Antarmuka Menu Laporan Penjualan
Berikut dapat dilihat perancangan antarmuka menu laporan penjualan dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.71 dibawah ini :
Header D08 Data Agen Main Menu Akun saya Data Pemesanan Data Pembayaran Logout Laporan Penjualan Laporan
Id Pesanan Nama Agen Jumlah Produk Total Bayar No
Tanggal s/d Tampilkan
Klik login menuju D02 Klik tampilkan menuju D08 Klik akun saya menuju D03 Klik data agen menuju D04 Klik data pemesanan menuju D06 Klik data pembayaran menuju D07 Klik laporan menuju D08 Klik logout menuju D01
Gambar III.71 Perancangan antarmuka menu laporan penjualan
3.2.2.5Perancangan Antarmuka Staff Gudang
1. Perancangan Antar muka login
Berikut dapat dilihat perancangan antarmuka login staff gudang dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah yang tercantum pada gambar III.72 dibawah ini :
Header E01 Login Username : Password : Login Lupa password
Klik login menuju E02 Klik lupa password menuju E01
2. Perancangan Antarmuka Menu Home
Berikut dapat dilihat perancangan antarmuka menu home dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah pada yang tercantum gambar III.73 dibawah ini :
Header E02
Main Menu Tambah Stok Produk Logout
Anda Login sebagai bg_gudang
Klik login menuju E02 Klik tambah stok produk menuju E03 Klik logout menuju E01
Gambar III.73 Perancangan antarmuka menu home
3. Perancangan Antarmuka Menu Tambah Stok Produk
Berikut dapat dilihat perancangan antarmuka menu tambah stok produk dari pembangunan aplikasi pemesanan online di CV. Dhisal Amanah pada yang tercantum gambar III.74 dibawah ini :
Header E03
Main Menu Tambah Stok Produk Logout
Produk Tambah Stok Produk
Ubah Nama Produk
Stok
Klik login menuju E02 Klik ubah menuju E03 Klik logout menuju E01
3.2.2.6Perancangan Antarmuka Manager