Perancangan Antarmuka Admin Perancangan Antarmuka

183 Gambar 3.61 Perancangan antarmuka menu data master 5. Perancangan antarmuka menu laporan Berikut perancangan antarmuka menu laporan dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.62 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A04 OPTICINDO Laporan Laporan penjualan Laporan produk IMAGE .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Gambar 3.62 Perancangan antarmuka menu laporan 6. Perancangan antarmuka menu laporan penjualan Berikut perancangan antarmuka menu laporan penjualan dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.63 dibawah ini: 184 LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A05 Laporan penjualan Laporan Laporan penjualan Laporan produk .:HOME .:DATA MASTER .:LAPORAN .:LOOUT 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 Gambar 3.63 Perancangan antarmuka menu laporan penjualan 8. Perancangan antarmuka tambah Data provinsi Berikut perancangan antarmuka menu tambah provinsi dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.64 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A06 Tambah provinsi Data master Tambah provinsi Lihat provinsi .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Nama provinsi simpan reset Gambar 3.64 Perancangan antarmuka menu data provinsi 185 9. Perancangan antarmuka menu lihat provinsi Berikut perancangan antarmuka menu lihat provinsi dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.65 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A07 Lihat provinsi Data master Tambah provinsi Lihat provinsi .:HOME .:DATA MASTER .:LAPORAN .:LOOUT ID PROVINSI NAMA ACTION Gambar 3.65 Perancangan antarmuka menu tambah provinsi 10. Perancangan antarmuka menu data kota Berikut perancangan antarmuka menu data kota dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.66 dibawah ini: 186 Id kota Nama provinsi Action Nama kota REG YES LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A09 Lihat kota Data master Tambah kota baru Lihat kota .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Gambar 3.66 Perancangan antarmuka menu data kota 11. Perancangan antarmuka menu tambah kota Berikut perancangan antarmuka menu tambah kota dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.67 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A08 Tambah kota baru Data master Tambah kota baru Lihat kota .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Nama Provinsi simpan reset Kotakabupaten namakota Gambar 3.67 Perancangan antarmuka menu tambah kota 187 12. Perancangan antarmuka tambah jasa pengiriman Berikut perancangan antarmuka menu tambah jasa pengiriman dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.68 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A10 Tambah jasa pengiriman Data master Tambah jasa pengiriman Lihat jasa pengiriman .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Nama jasa pengiriman simpan reset Gambar 3.68 Perancangan antarmuka menu tambah jasa pengiriman 13. Perancangan antarmuka menu lihat jasa pengiriman Berikut perancangan antarmuka menu lihat jasa pengiriman dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.69 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A11 Lihat jasa pengiriman Data master .:HOME .:DATA MASTER .:LAPORAN .:LOOUT ID JASA NAMA ACTION Tambah jasa pengiriman Lihat jasa pengiriman Gambar 3.69 Perancangan antarmuka menu lihat jasa pengiriman 188 14. Perancangan antarmuka tambah jenis pengiriman Berikut perancangan antarmuka menu data merk dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.70 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A12 Tambah jenis pengiriman Data master Tambah jenis pengiriman Lihat jenis pengiriman .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Nama jasa pengiriman simpan reset Nama jenis pengiriman Gambar 3.70 Perancangan antarmuka menu tambah jenis pengiriman 15. Perancangan antarmuka menu lihat jenis pengiriman Berikut perancangan antarmuka menu lihat jenis pengiriman dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.71 dibawah ini: 189 LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A13 lihat jenis pengiriman Data master Tambah jenis pengiriman Lihat jenis pengiriman .:HOME .:DATA MASTER .:LAPORAN .:LOOUT ID JENIS NAMA JASA KIRIM ACTION NAMA JENIS KIRIM Gambar 3.71 Perancangan antarmuka menu lihat jenis pengiriman 16. Perancangan antarmuka menu data kategori Berikut perancangan antarmuka menu data tambah kategori dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.72 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A16 Tambah kategori baru Data master Tambah kategori baru Lihat kategori .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Nama kategori simpan reset Gambar 3.72 Perancangan antarmuka menu data tambah kategori 190 17. Perancangan antarmuka menu lihat kategori Berikut perancangan antarmuka menu lihat kategori dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.73 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A17 lihat kategori Data master Tambah kategori baru Lihat kategori .:HOME .:DATA MASTER .:LAPORAN .:LOOUT ID KATEGORI NAMAKATEGORI ACTION Gambar 3.73 Perancangan antarmuka menu lihat kategori 18. Perancangan antarmuka menu tambah produk Berikut perancangan antarmuka menu tambah produk dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.74 dibawah ini: 191 LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A20 Tambah produk baru Data master Tambah produk baru Tambah stok produk .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Lihat produk Simpan Reset Kategori produk Merk produk Nama produk Harga produk Diskon produk Deskripsi produk Berat produk stok image Choose Gambar 3.74 Perancangan antarmuka menu data tambah produk 19. Perancangan antarmuka menu tambah stok Berikut perancangan antarmuka menu tambah stok dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.75 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A21 Tambah stok baru Data master Tambah produk baru Tambah stok produk .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Lihat produk Id Produk Kategori Nama Stok Action merk harga image diskon Gambar 3.75 Perancangan antarmuka menu tambah stok 192 20. Perancangan antarmuka menu lihat produk Berikut perancangan antarmuka menu lihat produk dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.76 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju A02 klik data master menuju A03 klik laporan menuju A04 klik laporan penjualan menuju A05 klik data provinsi menuju A06 klik data kota menuju A08 klik data jasa pengiriman A10 klik data jenis pengiriman A12 klik data ongkos A14 klik data kategori menuju A16 klik data merk A18 klik data produk menuju A20 klik logout menuju A01 A22 Lihat Produk Data master Tambah produk baru Tambah stok produk .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Lihat produk Id Produk Kategori Nama Stok Action merk harga image diskon Gambar 3.76 Perancangan antarmuka menu lihat produk 3.2.1.4.Perancangan Antarmuka Operator 1. Perancangan antarmuka menu form login admin Berikut perancangan antarmuka menu form login operator dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.77 dibawah ini: 193 Log in Email Password klik login, jika valid menuju O02 O01 Operator Opticindo Gambar 3.77 Perancangan antarmuka login operator 2. Perancangan antarmuka menu utama operator Berikut perancangan antarmuka menu utama operator dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.78 dibawah ini: LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O02 LAYOUT .:HOME .:PESANAN .:LOOUT Gambar 3.78 Perancangan antarmuka menu edit produk 194 3. Perancangan antarmuka menu daftar member Berikut perancangan antarmuka menu daftar member dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.79 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O04 .:HOME .:PESANAN .:LOOUT Daftar member pesanan ID USERNAME EMAIL Gambar 3.79 Perancangan antarmuka daftar member 4. Perancangan antarmuka menu pesanan baru Berikut perancangan antarmuka menu pesanan baru dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.80 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O05 .:HOME .:PESANAN .:LOOUT Pesanan baru pesanan Id pesanan Id pesanan Tanggal pesanan Email member Status konfirmasi Status pesanan Total bayar Aksi Tanggal pesanan Email member detail Status konfirmasi Status pesanan Total bayar Gambar 3.80 Perancangan antarmuka menu pesanan baru 195 5. Perancangan antarmuka menu pesan terbayar Berikut perancangan antarmuka menu pesan terbayar dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.81 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O06 .:HOME .:PESANAN .:LOOUT Pesanan terbayar pesanan Id pesanan Id pesanan Tanggal pesanan Email member Status konfirmasi Status pesanan Total bayar Aksi Tanggal pesanan Email member detail Status konfirmasi Status pesanan Total bayar Gambar 3.81 Perancangan antarmuka menu pesan terbayar 6. Perancangan antarmuka menu pesanan terkirim Berikut perancangan antarmuka menu pesanan terkirim dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.82 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O07 .:HOME .:PESANAN .:LOOUT Pesanan Terkirim pesanan Id pesanan Id pesanan Tanggal pesanan Email member Status konfirmasi Status pesanan Total bayar Aksi Tanggal pesanan Email member detail Status konfirmasi Status pesanan Total bayar Gambar 3.82 Perancangan antarmuka menu pesanan terkirim 196 7. Perancangan antarmuka pesanan tersampaikan Berikut perancangan antarmuka pesanan tersampaikan dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.83 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O08 .:HOME .:PESANAN .:LOOUT Pesanan tersampaikan pesanan Id pesanan Id pesanan Tanggal pesanan Email member Status konfirmasi Status pesanan Total bayar Aksi Tanggal pesanan Email member detail Status konfirmasi Status pesanan Total bayar Gambar 3.83 Perancangan antarmuka pesanan tersampaikan 8. Perancangan antarmuka menu pesanan dikembalikan Berikut perancangan antarmuka menu pesanan dikembalikan dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.84 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O09 .:HOME .:PESANAN .:LOOUT Pesanan Dikembalikan pesanan Id pesanan Id pesanan Tanggal pesanan Email member Status konfirmasi Status pesanan Total bayar Aksi Tanggal pesanan Email member detail Status konfirmasi Status pesanan Total bayar Gambar 3.84 Perancangan antarmuka menu pesanan dikembalikan 197 9. Perancangan antarmuka menu pesanan baru detail Berikut perancangan antarmuka menu pesanan baru detail dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.85 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O10 .:HOME .:PESANAN .:LOOUT Pesanan Baru Detail pesanan Id pesanan Id pesanan Tanggal pemasanan Status pemesanan Status konfirmasi Tanggal pemesanan Update Status Status pemesanan Status konfirmasi Alamat pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Daftar produk yang dipesan Nama produk berat jumlah harga subtotal Nama produk berat jumlah harga subtotal Kembali ke pesanan Gambar 3.85 Perancangan antarmuka menu pesanan baru detail 10. Perancangan antarmuka menu detail pesanan terbayar detail Berikut perancangan antarmuka menu pesanan terbayar detail dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.86 dibawah ini: 198 Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 011 .:HOME .:PESANAN .:LOOUT Pesanan Terbayar detail pesanan Id pesanan Id pesanan Tanggal pemasanan Status pemesanan Status konfirmasi Tanggal pemesanan Status pemesanan Status konfirmasi Pembayaran Id pesanan Tanggal pembayaran Bank tujuan Atas nama Jumlah transfer No resi Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Update Status Gambar 3.86 Perancangan antarmuka menu detail pesanan terbayar detil 11. Perancangan antarmuka menu pesanan terkirim detail Berikut perancangan antarmuka menu pesanan terkirim detail dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.87 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O12 .:HOME .:PESANAN .:LOOUT Pesanan Terkirim pesanan Nama Produk Id pesanan Tanggal pemasanan Status pemesanan Status konfirmasi Tanggal pemesanan Status pemesanan Status konfirmasi Pengiriman Id pesanan Tanggal pengiriman Jasa Pengiriman No Resi Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Daftar Produk Yang Dipesan Berat Jumlah Harga Subtotal Id Pesanan Gambar 3.87 Perancangan antarmuka menu pesanan terkirim detail 199 12. Perancangan antarmuka menu pesanan tersampaikan detail Berikut perancangan antarmuka menu pesanan tersampaikan detail dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.88 dibawah ini: Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O13 .:HOME .:PESANAN .:LOOUT Pesanan Tersampaikan pesanan Id pesanan Tanggal pemasanan Status pemesanan Status konfirmasi Tanggal pemesanan Status pemesanan Status konfirmasi Pengiriman Id pesanan Tanggal pengiriman Jasa Pengiriman No Resi Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Id Pesanan Nama Produk Daftar Produk Yang Tersampaikan Berat Jumlah Harga Subtotal Gambar 3.88 Perancangan antarmuka menu pesanan tersampaikan detail 13. Perancangan antarmuka menu pesanan dikembalikan detail Berikut perancangan antarmuka menu pesanan dikembalikan detail dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.89 dibawah ini: 200 Daftar Member Pesanan Terbayar Pesanan Terkirim Pesanan Tersampaikan Pesanan Baru Pesanan Dikembalikan LOGO TOKO OPTICINDO klik menu home menuju O02 klik pesanan menuju O03 klik data member menuju O04 klik pesanan baru menuju O05 klik terbayar menuju O06 klik pesanan terkirim menuju O07 klik tersampaikan O08 klik pesanan dikembalikan O09 klik pesanan baru detail O10 klik pesanan terbayar detail O11 klik pesanan terkirim detail O12 klik tersampaikan detail O13 klik dikembalikan detail O14 klik logout menuju O01 O14 .:HOME .:PESANAN .:LOOUT Pesanan Dikembalikan pesanan Nama Produk Id pesanan Tanggal pemasanan Status pemesanan Status konfirmasi Tanggal pemesanan Status pemesanan Status konfirmasi Pengiriman Id pesanan Tanggal pengiriman Jasa Pengiriman No Resi Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Daftar Produk Yang Dikembalikan Jumlah Alasan Status Id Pesanan Disetujui Ditolak Gambar 3.89 Perancangan antarmuka menu pesanan dikembalikan detail

3.2.1.5 Perancangan Antarmuka Pemilik Toko

1. Perancangan antarmuka menu form login Pemilik Toko Berikut perancangan antarmuka menu form login pemilik toko dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.90 dibawah ini: Log in Email Password klik login, jika valid menuju U02 U01 Operator Opticindo Gambar 3.90 Perancangan antarmuka login pemilik toko 201 2. Perancangan antarmuka menu utama Pemilik Toko Berikut perancangan antarmuka menu utama pemilik toko dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.91 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 U02 LAYOUT .:HOME .:LAPORAN .:DATA OPERATORADMIN .:LOOUT Gambar 3.91 Perancangan antarmuka menu utama pemilik toko 3. Perancangan antarmuka menu laporan Pemilik Toko Berikut perancangan antarmuka menu utama pemilik toko dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.92 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 U03 .:HOME .:LAPORAN .:DATA OPERATORADMIN .:LOOUT Laporan penjualan Laporan produk IMAGE Gambar 3.92 Perancangan antarmuka menu laporan 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: