Perancangan Antarmuka Pemilik Toko

202 4. Perancangan antarmuka menu laporan penjualan Pemilik Toko Berikut perancangan antarmuka menu laporan penjualan pemilik toko dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.93 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju U02 klik menu laporan menuju u03 klik laporan penjualan menuju U04 klik tambah operatoradmin U05 klik lihat data operatoradmin U06 klik logout menuju U01 U04 .:HOME .:LAPORAN .:DATA OPERATORADMIN .:LOOUT Laporan penjualan Laporan produk Laporan perhari Laporan penjualan perhari Print out Laporan penjualan perbulan Laporan penjualan pertahun Laporan penjualan manual Laporan perbulan Laporan pertahun Laporan manual Print out Print out Print out Laporan penjualan Gambar 3.93 Perancangan antarmuka menu laporan penjualan pemilik toko 5. Perancangan antarmuka menu tambah operatoradmin Pemilik Toko Berikut perancangan antarmuka menu tambah operatoradmin pemilik toko dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.94 dibawah ini: 203 LOGO TOKO OPTICINDO klik menu home menuju U02 klik menu laporan menuju u03 klik laporan penjualan menuju U04 klik tambah operatoradmin U05 klik lihat data operatoradmin U06 klik logout menuju U01 U05 .:HOME .:LAPORAN .:DATA OPERATORADMIN .:LOOUT Tambah operatoradmin Lihat operatoradmin Tambah operator username password status Print out Print out Laporan perhari Laporan perhari operator admin Gambar 3.94 Perancangan antarmuka menu tambah operator pemilik toko 6. Perancangan antarmuka menu lihat daftar operatoradmin Pemilik Toko Berikut perancangan antarmuka menu lihat daftar operatoradmin pemilik toko dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.95 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju U02 klik menu laporan menuju u03 klik laporan penjualan menuju U04 klik tambah operatoradmin U05 klik lihat data operatoradmin U06 klik logout menuju U01 U06 .:HOME .:LAPORAN .:DATA OPERATORADMIN .:LOOUT Tambah operatoradmin Lihat operatoradmin Daftar operatoradmin Id_user username password status action Gambar 3.95 Perancangan antarmuka lihat daftar operatoradmin pemilik toko 204

3.2.2 Perancangan Struktur Menu

Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat tiga pengguna aplikasi ini yaitu pengunjung, member dan admin. Adapun Struktur menunya dapat dilihat pada gambar dibawah ini: 1. Perancangan Struktur Menu Pengunjung Pengunjung About Us Shipping and payment How to order Tracking Home Product Login Member Reset Password Register Gambar 3.96 Stuktur menu Pengunjung 2. Perancangan Struktur Menu Member member My profile About Us Shipping and payment How to order tracking produk Shopping cart Your order Logout Home Alamat kirim Edit alamat kirim checkout Gambar 3.97 Stuktur menu Member 205 3. Perancangan Struktur Menu Operator operator pesanan Pesanan baru Pesanan terbayar Pesanan terkirim Pesanan tersampaikan Pesanan dikembalikan Gambar 3.98 Stuktur menu Operator 4. Perancangan Struktur Menu admin admin Data master matauang provinsi kota kategori Jasa pengiriman jenispengiriman Tambah Lihat Edit Hapus merk produk Gambar 3.99 Stuktur menu admin 5. Perancangan Struktur Menu Pemilik Toko Pemilik toko laporan Laporan penjualan Lihat laporan penjualan Tambah operator adm Lihat daftar operator adm Data operatoradmin Gambar 3.100 Stuktur menu pemilik toko 206

3.2.3 Pop upAlert

Perancangan pesan dibuat sebagai validasi atau tampilan pesan dalam setiap proses sistem. Perancangan pesan dapat dilihat pada gambar 3.101 dibawah ini: OK V01 Silahkan masukan no resi Pesanan anda OK V02 Stok tidak mencukupi OK V03 -Atas nama pengirim belum anda isi -Jumlah transfer harus anda isi OK V04 Atas nama pengirim belum anda isi OK V05 Jumlah transfer harus anda isi OK V06 -pilih jumlah produk yang ingin dikembalikan -Kolom alasan belum anda isi OK V07 pilih jumlah produk yang ingin dikembalikan OK V08 Kolom alasan belum anda isi OK V09 Apakah anda yakin data ini akan dihapus ? OK V10 Username atau password salah Gambar 3.101 Stuktur Perancangan Pesan

3.2.4 Jaringan Semantik

Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program yang akan digambarkan dalam sebuah jaringan semantik. Jaringan semantik dapat dilihat pada gambar dibawah ini: