Perancangan Antarmuka Member Perancangan Antarmuka

162 3. Perancangan antarmuka menu Shopping cart Berikut perancangan antarmuka menu Shopping cart dari aplikasi e- commerce di pada toko opticindo yang dapat dilihat pada gambar 3.39 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M03 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Berbelanja Kembali Hitung Kembali Proses Produk Total Harga Batal Jumlah Harga Diskon Total Petunjuk belanja Shopping Chart Gambar 3.39 Perancangan antarmuka menu Shopping cart 163 3. Perancangan antarmuka About Us Berikut perancangan antarmuka About Us dari aplikasi e-commerce di pada toko opticindo yang dapat dilihat pada gambar 3.40 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M04 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile About Us About Us Gambar 3.40 Perancangan antarmuka About Us 164 4. Perancangan antarmuka Shipping and Payment Berikut perancangan antarmuka Shipping and Payment dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.41 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M05 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Biaya Pengiriman Keterangan pengiriman Keterangan Pembayaran Pembayaran Gambar 3.41 Perancangan antarmuka Shipping and Payment 165 5. Perancangan antarmuka How to Order Berikut perancangan antarmuka antarmuka How to Order dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.42 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M06 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile How To Order Cara Pemesanan Gambar 3.42 Perancangan antarmuka How to Order 166 7. Perancangan antarmuka Tracking Berikut perancangan antarmuka Tracking dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.43 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M07 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Tracking No resi : Tracking Gambar 3.43 Perancangan antarmuka Tracking 167 8. Perancangan antarmuka Cari Produk Berikut perancangan antarmuka Cari Produk dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.44 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M08 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan BACK Daftar Pencarian Produk BUY BACK BUY BACK BUY BACK BUY BACK BUY BACK BUY Gambar 3.44 Perancangan antarmuka Cari Produk 168 9. Perancangan antarmuka Info Produk Berikut perancangan antarmuka Info Produk dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.45 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M09 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan DETAIL Product List BUY DETAIL BUY DETAIL BUY DETAIL BUY DETAIL BUY DETAIL BUY Gambar 3.45 Perancangan antarmuka Info Produk 169 10. Perancangan antarmuka Kategori Produk Berikut perancangan antarmuka Kategori Produk dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.46 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M10 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan Gambar produk Harga Nama produk keterangan DETAIL BUY DETAIL BUY DETAIL BUY DETAIL BUY DETAIL BUY DETAIL BUY Daftar produk berdasarkan kategori Gambar 3.46 Perancangan antarmuka Kategori Produk 170 11. Perancangan antarmuka My Profile Berikut perancangan antarmuka My Profile dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.47 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M11 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile My Profile Nama lengkap Jenis kelamin Email Password Provinsi Kotakabupaten Alamat Kode pos Nomor telpon Edit Profile Edit Password Gambar 3.47 Perancangan antarmuka My Profile 171 12. Perancangan antarmuka Edit Profil Berikut perancangan antarmuka Edit Profil dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.48 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M12 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Edit Profile Nama lengkap Jenis kelamin Email Password Provinsi Kota Alamat Kode pos Nomor telpon Simpan Cancel Gambar 3.48 Perancangan antarmuka Edit Profil 172 18. Perancangan antarmuka Alamat Pengiriman Berikut perancangan antarmuka Alamat Pengiriman dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.49 dibawah ini: LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M13 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Alamat Pengiriman Nama Provinsi Kota Jenis Pengiriman Alamat Kode pos Telepon Lanjutkan Gambar 3.49 Perancangan antarmuka Alamat Pengiriman 19. Perancangan antarmuka Your Order Berikut perancangan antarmuka Your Order dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.50 dibawah ini: 173 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M14 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Daftar Status Pesanan Id Pesanan Tanggal pemesanan Total Bayar Status Action Gambar 3.50 Perancangan antarmuka Your Order 20. Perancangan antarmuka Detail Pesanan Berikut perancangan antarmuka Detail Pesanan dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.51 dibawah ini: 174 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M15 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Pesanan Anda Nama Produk berat jumlah harga Subtotal Id pesanan Tanggal pesanan Status Konfirmasi Status Pemesanan Nama Alamat Pengiriman Daftar produk yang dipesan Alamat Kota Kode Pos Jenis pembayaran via paypal atau bank Kembali kepesanan No Telepon Diskon Gambar 3.51 Perancangan antarmuka Detail Pesanan 21. Perancangan antarmuka pembayaran bank Berikut perancangan antarmuka pembayaran bank dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.52 dibawah ini: 175 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M16 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Silahkan konfirmasi pembayaran pesanan anda Nama Produk berat jumlah harga Subtotal Id pesanan Total pembayaran Bank tujuan Atas nama penerima Tanggal transfer Konfirmasi pembayaran Atas nama pengirim konfirmasi cancel Jumlah pembayaran Diskon Gambar 3.52 Perancangan antarmuka pembayaran bank 22. Perancangan antarmuka konfirmasi pembayaran Berikut perancangan antarmuka konfirmasi pembayaran dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.53 dibawah ini: 176 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M17 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Terima Kasih Atas Konfirmasinya Gambar 3.53 Perancangan antarmuka konfirmasi pembayaran 23. Perancangan antarmuka Return a Berikut perancangan antarmuka Return a dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.54 dibawah ini: 177 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M18 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Daftar produk yang dipesan Nama Produk Jumlah Jumlah yang dikembalikan status Action return Kembali kepesanan Gambar 3.54 Perancangan antarmuka Return a 24. Perancangan antarmuka Return b Berikut perancangan antarmuka Return b dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.55 dibawah ini: 178 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M19 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Daftar produk yang dipesan Nama Produk Jumlah Jumlah yang dikembalikan status Action return Minta persetujuan Daftar produk yang ingin dikembalikan cancel Nama barang Jumlah Alasan dikembalikan Gambar 3.55 Perancangan antarmuka Return b 25. Perancangan antarmuka Checkout Berikut perancangan an tarmuka Checkout dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.56 dibawah ini: 179 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M20 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Daftar produk yang dipesan Nama Produk berat jumlah harga diskon kembali Daftar produk yang ingin dikembalikan Check out Nama Kota tujuan Jenis pengiriman Alamat tujuan Kode pos No telepon subtotal Gambar 3.56 Perancangan an tarmuka Checkout 26. Perancangan antarmuka Checkout finish Berikut perancangan antarmuka Checkout finish dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.57 dibawah ini: 180 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M21 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Terima kasih ,silahkan melakukan pembayaran Nama Produk berat jumlah harga diskon Id pesanan Nama tujuan Kota tujuan Alamat tujuan Kode pos Total pembayaran subtotal Tanggal pemesanan Jasa pengiriman Tipe pengiriman Gambar 3.57 Perancangan antarmuka Checkout finish 27. Perancangan antarmuka Histori Pesanan Berikut perancangan antarmuka Histori Pesanan dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.58 dibawah ini: 181 LOGO TOKO OPTICINDO Cari Produk cari Categories Customer Service Social Network Payment LOGO BANK LOGO BANK M22 YOUR SHOPPING CHART .:HOME .:PRODUCT .:SHOPPING CHART .:YOUR ORDER .:HISTORY .:LOGOUT SLIDE SHOW Kurs klik menu home menuju M01 klik produk menuju M02 klik shopping cart menuju M03 klik about us menuju M04 klik shipping and payment menuju . M05 kllik how to order menuju M06 klik tracking menuju M07 klik cari menuju M08 klik kategori menuju M10 klik my profile menuju M11 klik your order menuju M14 klik history menuju M22 klik logout menuju P01 About us | Shipping and payment | How to order | Tracking | My Profile Daftar Status Pesanan Id Pesanan Tanggal pemesanan Total Bayar Status Action Gambar 3.58 Perancangan antarmuka Histori Pesanan

3.2.1.3. Perancangan Antarmuka Admin

1. Perancangan antarmuka menu form login admin Berikut perancangan antarmuka menu form login admin dari aplikasi e- commerce pada toko opticindo yang dapat dilihat pada gambar 3.59 dibawah ini: Log in Email Password klik login, jika valid menuju A02 A01 Admin Opticindo 182 Gambar 3.59 Perancangan antarmuka menu form login admin 2. Perancangan antarmuka menu Utama Berikut perancangan antarmuka menu Utama dari aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.60 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 A02 LAYOUT .:HOME .:DATA MASTER .:LAPORAN .:LOOUT Gambar 3.60 Perancangan antarmuka menu Utama 3. Perancangan antarmuka menu data master Berikut perancangan antarmuka menu data master dari pembangunan aplikasi e-commerce pada toko opticindo yang dapat dilihat pada gambar 3.61 dibawah ini: LOGO TOKO OPTICINDO A03 OPTICINDO Data Master Lihat Kurs Tambah Provinsi Baru Lihat Provinsi Tambah Kota Baru Lihat Kota Tambah Kategori Baru Lihat Kategori Tambah Merk Baru Lihat Merk Tambah Produk Baru Tambah Stok Produk Lihat Produk IMAGE Tambah Jasa Pengiriman Lihat Jasa Pengiriman Tambah Jasa Pengiriman Lihat Jasa Pengiriman Tambah ongkos Pengiriman Lihat ongkos Pengiriman .:HOME .:DATA MASTER .:LAPORAN .:LOOUT 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 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: