Perancangan Struktur Menu Perancangan Pesan Perancangan Prosedural

No_resi int 10 Status int 10

3.2.2 Perancangan Struktur Menu

Perancangan struktur menu menu dan submenu yang berfungsi untuk memudahkan user dalam menggunakan sistem. Menu – menu tersebut dibagi berdasarkan hak akses masing-masing user. Berikut ini gambaran mengenai struktur menu e-commerce yang akan dibangun. a. Struktur Menu Pengunjung Struktur menu pengunjung dapat dilihat pada gambar 3.28. Pengunjung Home Produk Login member Reset password register About us Shipping payment How to order Info produk Gambar 3.28 Struktur Menu Pengunjung b. Struktur Menu Member Struktur menu Member dapat dilihat pada gambar 3.29. member Home Produk Shopping cart Your order Log out My profile About us Shipping payment How to order tracking Alamat kirim Edit alamat kirim checkout Gambar 3.29 Struktur Menu Member c. Struktur Menu Admin Struktur menu Admin dapat dilihat pada gambar 3.30. Admin Home Data master Pesanan Laporan Merk Log out Kategori Cari produk Provinsi Kota Daftar member matauang Pesanan terkirim Pesanan tersampaikan Produk Pesanan baru Pesanan terbayar Pesanan dikembalikan Gambar 3.30 Struktur Menu Admin

3.2.3 Perancangan AntarMuka

Interface atau antar muka merupakan tampilan dari suau program aplikasi yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh user Perancangan interface untuk aplikasi E-Commerce pada toko Wigicom komputer adalah sebagai berikut :

3.2.3.1 Perancangan antarmuka menu pengunjung

1. Perancangan antarmuka menu utama LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK Newest Products Silahkan Registrasi Registrasi GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info Best Selling Products GAMBAR PRODUK Harga Nama produk Keterangan Info Most View Products GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik info menuju P09 Klik cari menuju P10 Klik kategori menuju P12 Gambar 3.31 Perancangan antarmuka menu utama 2. Perancangan antarmuka menu produk LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK Silahkan Registrasi Registrasi GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik info menuju P09 Klik cari menuju P10 Klik kategori menuju P12 Gambar 3.32 Perancangan antarmuka menu produk 3. Perancangan antarmuka menu lupa password LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member FORM RESET PASSWORD Silahkan Registrasi Registrasi Email Kirim JAMINAN PRIVASI Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik cari menuju P10 Klik login jika valid menuju M01 Reset Gambar 3.33 Perancangan antarmuka menu lupa password 4. Perancangan antarmuka menu registrasi LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member FORM PENDAFTARAN MEMBER Silahkan Registrasi Registrasi Nama Lengkap Jenis Kelamin Email Ulangi Password Password Provinsi Kota Alamat Kode Pos No telepon Dafftar Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik registrasi menuju P05 Klik login member menuju P11 Klik daftar menuju P05 JAMINAN PRIVASI Reset Gambar 3.34 Perancangan antarmuka menu registrasi 5. Perancangan antarmuka menu about us LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK TENTANG KAMI Silahkan Registrasi Registrasi Tentang Kami Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik cari menuju P10 Klik kategori menuju P12 Gambar 3.35 Perancangan antarmuka menu about us 6. Perancangan antarmuka menu Shipping and Payment LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PENGIRIMAN DAN PEMBAYARAN Silahkan Registrasi Registrasi Pengiriman Cara Pembayaran Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik cari menuju P10 Klik kategori menuju P12 Gambar 3.36 Perancangan antarmuka menu shipping and payment 7. Perancangan antarmuka menu How to Order LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK CARA PEMESANAN Silahkan Registrasi Registrasi Cara Pemesanan Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik kategori menuju P12 Gambar 3.37 Perancangan antarmuka menu how to order 8. Perancangan antarmuka menu info produk LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK Silahkan Registrasi Registrasi GAMBAR PRODUK Harga Nama produk Keterangan Back Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik back menuju P02 Klik kategori menuju P12 Gambar 3.38 Perancangan antarmuka menu info produk 9. Perancangan antarmuka menu cari produk LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK DAFTAR PENCARIAN PRODUK Silahkan Registrasi Registrasi GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik info menuju P09 Klik cari menuju P10 Klik kategori menuju P12 Gambar 3.39 Perancangan antarmuka menu cari produk 10. Perancangan antarmuka menu login LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO Tentang kami Pengiriman dan Pembayaran Cara pemesanan Login member FORM LOGIN Silahkan Registrasi Registrasi Email Password Login Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik registrasi menuju P05 Klik login jika valid menuju M01 Klik daftar menuju P11 JAMINAN PRIVASI Reset Gambar 3.40 Perancangan antarmuka menu login 11. Perancangan antarmuka menu kategori LOGO WIGICOM Cari produk cari HOME PRODUK LOGIN MEMBER RESET PASSWORD REGISTRASI LOGO About us Shipping and payment How to order Login member KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK BERDASARKAN KATEGORI Silahkan Registrasi Registrasi GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info GAMBAR PRODUK Harga Nama produk Keterangan Info Tentang Kami Pengiriman dan Pembayaran Cara Pemesanan Klik home menuju P01 Klik produk menuju P02 Klik tracking menuju P03 Klik forgot password menuju P04 Klik registrasi menuju P05 Klik tentang kami menuju P06 Klik pengiriman dan pembayaran menuju P07 Klik pemesanan menuju P08 Klik login member menuju P11 Klik registrasi menuju P05 Klik info menuju P09 Klik cari menuju P10 Klik kategori menuju P12 Gambar 3.41 Perancangan antarmuka menu kategori

3.2.3.2 Perancangan antarmuka menu member

1. Perancangan antarmuka menu utama LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK Newest Products GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy Best Selling Products GAMBAR PRODUK Harga Nama produk Keterangan Info Buy Most View Products GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy About us Shipping and payment How to order Tracking My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik buy menuju M08 Klik info menuju M13 About us Shipping and payment How to order Tracking Gambar 3.42 Perancangan antarmuka menu utama 2. Perancangan antarmuka menu produk LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy About us Shipping and Payment How to order Tracking My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik buy menuju M08 Klik info menuju M13 About us Shipping and payment How to order Tracking Gambar 3.43 Perancangan antarmuka menu produk 3. Perancangan antarmuka menu keranjang belanja LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK KERANJANG BELANJA About us Shipping and payment How to order Tracking Nama Produk Batal Jumlah Harga Total Hitung Ulang Selanjutnya HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik kembali berbelanja menuju M02 Klik update menuju M03 Klik tujuan pengiriman menuju M15 About us Shipping and payment How to order Tracking Diskon Gambar 3.44 Perancangan antarmuka menu keranjang belanja 4. Perancangan antarmuka menu pesanan anda LOGO WIGICOM Cari produk cari LOGO About us Shipping and payment How to order Tracking KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK DAFTAR STATUS PESANAN About us Shipping and payment How to order Tracking ID Pesanan Tanggal pemesanan Total bayar Status Id pesanan HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Tanggal pesan Tota bayar Lihat status Return Id pesanan Tanggal pesan Total bayar Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Klik id pesanan menuju M16 Klik detail menuju M16 Klik return menuju M17 Gambar 3.45 Perancangan antarmuka menu pesanan anda 5. Perancangan antarmuka menu kategori LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO About us Shipping and payment How to order KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK BERDASARKAN KATEGORI GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy About us Shipping and payment How to order Tracking My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Klik buy menuju M08 Klik info menuju M14 Tracking Gambar 3.46 Perancangan antarmuka menu kategori 6. Perancangan antarmuka menu my profile LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK About us Shipping and payment How to order Tracking HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja DATA MEMBER Nama Lengkap Jenis Kelamin Email Ulangi Password Password Provinsi Kota Alamat Kode Pos No telepon EDIT Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Klik edit menuju M06 About us Shipping and payment How to order Tracking EDIT PASSWORD Gambar 3.47 Perancangan antarmuka menu my profile 7. Perancangan antarmuka menu cari produk LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK YANG DICARI GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy GAMBAR PRODUK Harga Nama produk Keterangan Info Buy About us Shipping and payment How to order Tracking My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Klik buy menuju M08 Klik info menuju M14 About us Shipping and payment How to order Tracking Gambar 3.48 Perancangan antarmuka menu cari produk 8. Perancangan antarmuka menu buy LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK KERANJANG BELANJA About us Shipping and payment How to order Tracking Nama Produk Batal Jumlah Harga Total Hitung Ulang Selanjutnya HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Klik kembali berbelanja menuju M02 Klik update menuju M03 Klik tujuan pengiriman menuju M15 Diskon About us Shipping and payment How to order Tracking Gambar 3.49 Perancangan antarmuka menu buy 9. Perancangan antarmuka menu About us LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK TENTANG KAMI About us Shipping and payment How to order Tracking My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Tentang Kami About us Shipping and payment How to order Tracking Gambar 3.50 Perancangan antarmuka menu About us 10. Perancangan antarmuka menu Shipping and Payment LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PENGIRIMAN DAN PEMBAYARAN My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M12 Klik tracking menuju M13 Pengiriman dan Pembayaran About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.51 Perancangan antarmuka menu Shipping and Payment 11. Perancangan antarmuka menu How to Order LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK CARA PEMESANAN My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M13 Cara Pemesanan About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.52 Perancangan antarmuka menu How to order 12. Perancangan antarmuka menu tracking LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK TRACKING My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik tracking menuju www.jne.co.id Klik info menuju M13 No resi Tracking About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.53 Perancangan antarmuka menu tracking 13. Perancangan antarmuka menu info produk LOGO WIGICOM Cari produk cari HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PRODUK GAMBAR PRODUK Harga Nama produk Keterangan Back Buy My profile Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik buy menuju M08 Klik back menuju M02 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.54 Perancangan antarmuka menu info produk 14. Perancangan antarmuka menu tujuan pengiriman LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK ALAMAT PENGIRIMAN Nama HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item Provinsi Kota Alamat Kode pos Telepon Lanjutkan Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik lanjutkan menuju M14 Klik info menuju M13 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Nama Provinsi Kota Alamat Kode pos Telepon Jika anda ingin mengirim Barang ke alamat yang lain. Silahkan isi form dibawah ini : Gambar 3.55 Perancangan antarmuka menu tujuan pengiriman 15. Perancangan antarmuka menu detail pesanan LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK PESANAN ANDA ID Pesanan Tanggal pesanan Status pemesanan Status konfirmasi HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item ALAMAT PENGIRIMAN ID Pesanan Email Nama tujuan Kota tujuan DAFTAR PRODUK YANG DIPESAN Nama produk Berat Jumlah Harga Sub total Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.56 Perancangan antarmuka menu detail pesanan 16. Perancangan antarmuka menu return a LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK DAFTAR PRODUK YANG DIPESAN Nama produk Jumlah Jumlah yang dikembalikan Status HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Tanggal pesan Status pesan Status konfirmasi Keranjang Belanja Keranjang item Action Return Nama produk Kembali ke pesanan Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik kembali kepesanan menuju M04 Klik return menuju M21 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.57 Perancangan antarmuka menu return a 17. Perancangan antarmuka menu return b LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK DAFTAR PRODUK YANG DIPESAN Id pesanan Tanggal pemesanan Status pemesanan Status konfirmasi HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Tanggal pesan Status pesan Status konfirmasi Keranjang Belanja Keranjang item Id pesanan Produk yang Mau Dikembalikan Nama barang Jumlah Alasan dikembalikan Minta persetujuan Cancel Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik minta persetujuan menuju ke M04 Klik cancel menuju M04 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.58 Perancangan antarmuka menu return b 18. Perancangan antarmuka menu check out LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK Terima kasih silahkan melakukan pembayaran HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item Nama produk Berat Jumlah Harga Subtotal Id pesanan Nama tujuan Kota tujuan Alamat tujuan Kode pos Total bayar Tanggal pesan Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik bni menuju M19 Klik bca menuju M19 Klik paypal menuju www.paypal.com About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Diskon Gambar 3.59 Perancangan antarmuka menu check out 19. Perancangan antarmuka menu konfirmasi bank LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK Silahkan konfirmasi pembayaran pesanan anda HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item konfirmasi cancel Nama produk Berat Jumlah Harga Subtotal Id pesanan Total bayar Bank tujuan Atas nama penerima Atas nama pengirim Jumlah pembayaran Konfirmasi pembayaran Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 Klik konfirmasi menuju M20 Klik cancel menuju M18 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Diskon Gambar 3.60 Perancangan antarmuka menu konfirmasi bank 20. Perancangan antarmuka menu konfirmasi pembayaran LOGO WIGICOM Cari produk cari LOGO KATEGORI COSTUMER SERVICE PAYMENT LOGO BANK LOGO BANK SOCIAL NETWORK Terimakasih Atas Konfirmasinya HOME PRODUK KERANJANG BELANJA PESANAN ANDA LOG OUT My profile Keranjang Belanja Keranjang Belanja Keranjang item Klik home menuju M01 Klik produk menuju M02 Klik keranjang belanja menuju M03 Klik pesanan anda menuju M04 Klik log out menuju P01 Klik kategori menuju M05 Klik My profile menuju M06 Klik cari menuju M07 Klik tentang kami menuju M09 Klik pengiriman dan pembayaran menuju M10 Klik cara pemesanan menuju M11 Klik Keranjang item menuju M03 Klik tracking menuju M12 About us Shipping and payment How to order Tracking About us Shipping and payment How to order Tracking Gambar 3.61 Perancangan antarmuka menu konfirmasi pembayaran

3.2.3.3 Perancangan antarmuka menu admin

1. Perancangan antarmuka menu form login admin Username Password Log in Klik login jika valid menuju A02 Gambar 3.62 Perancangan antarmuka menu form login admin A01 2. Perancangan antarmuka menu utama A02 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id produk Merk Kategori Nama Harga Stok Action ID Produk Merk Kategori Nama Harga Stok Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A20 Klik edit menuju A21 Diskon Diskon Gambar 3.63 Perancangan antarmuka menu utama 3. Perancangan antarmuka menu data master A03 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id produk Merk Kategori Nama Harga Diskon Action ID Produk Merk Kategori Nama Harga Diskon Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A20 Klik edit menuju A21 Stok Stok Gambar 3.64 Perancangan antarmuka menu data master 4. Perancangan antarmuka menu pesanan A04 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pesanan Email Member Action ID Pesanan Tanggal pemesanan Detail Status Konfirmasi Email member Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pesanan Total Bayar Status pesanan Total bayar Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan ditambah kan menuju A26 Klik detail menuju A27 Gambar 3.65 Perancangan antarmuka menu pesanan 5. Perancangan antarmuka menu laporan A05 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Laporan Penjualan Daftar member Selamat Datang Laporan Pilih Laporan Laporan Penjualan Laporan Produk Laporan penjualan perhari Laporan penjualan perbulan Laporan penjualan pertahun Laporan penjualan manual Laporan perhari Laporan perbulan Laporan pertahun Laporan manual Print out Print out Print out Print out Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik laporan penjualan menuju A05 Klik laporan produk menuju A28 Gambar 3.66 Perancangan antarmuka menu laporan 6. Perancangan antarmuka menu daftar member A06 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Member Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id member Username Email Id member Username Email Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Gambar 3.67 Perancangan antarmuka menu daftar member 7. Perancangan antarmuka menu cari produk A07 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pencarian Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id produk Merk Kategori Nama Harga Stok Action ID Produk Merk Kategori Nama Harga Stok Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A20 Klik edit menuju A21 Diskon Diskon Gambar 3.68 Perancangan antarmuka menu cari produk 8. Perancangan antarmuka menu lihat provinsi A08 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Provinsi Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Provinsi Nama Provinsi Action ID Provinsi Nama Provinsi Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A29 Klik edit menuju A30 Gambar 3.69 Perancangan antarmuka menu lihat provinsi 9. Perancangan antarmuka menu tambah provinsi A09 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Provinsi Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Provinsi Simpan Reset Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik simpan menuju A08 Klik reset menuju A08 Gambar 3.70 Perancangan antarmuka menu tambah provinsi 10. Perancangan antarmuka menu lihat kota A10 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Kota Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Kota Nama Provinsi Nama Kota Action ID Merk Nama Provinsi Delete Edit Ongkos Kirim Nama Kota Ongkos Kirim Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A31 Klik edit menuju A32 Gambar 3.71 Perancangan antarmuka menu lihat kota 11. Perancangan antarmuka menu tambah kota A11 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Kota Baru Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Provinsi Simpan Reset Ongkos Kirim Nama Kota Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik simpan menuju A10 Klik reset menuju A11 Gambar 3.72 Perancangan antarmuka menu tambah kota 12. Perancangan antarmuka menu lihat merk A12 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Merk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Merk Nama Merk Image Action ID Merk Nama Merk Image Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A33 Klik edit menuju A34 Gambar 3.73 Perancangan antarmuka menu lihat merk 13. Perancangan antarmuka menu tambah merk A13 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Merk Baru Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Merk Simpan Reset Image Browse Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik simpan menuju A12 Klik reset menuju A13 Gambar 3.74 Perancangan antarmuka menu tambah merk 14. Perancangan antarmuka menu lihat kategori A14 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Kategori Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Kategori Nama Kategori Action Id kategori Nama Kategori Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A35 Klik edit menuju A36 Gambar 3.75 Perancangan antarmuka menu lihat kategori 15. Perancangan antarmuka menu tambah kategori A15 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Kategori Baru Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Kategori Simpan Reset Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik simpan menuju A14 Klik reset menuju A15 Gambar 3.76 Perancangan antarmuka menu tambah kategori 16. Perancangan antarmuka menu lihat detail A16 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Data Detail Kategori dan Merk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Jenis Nama Kategori Nama Merk Action ID Jenis Nama Kategori Nama Merk Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A37 Klik edit menuju A38 Gambar 3.77 Perancangan antarmuka menu lihat detail 17. Perancangan antarmuka menu tambah detail A17 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Detail Baru Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Kategori Produk Merk Produk Simpan Reset Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik simpan menuju A16 Klik reset menuju A17 Gambar 3.78 Perancangan antarmuka menu tambah detail 18. Perancangan antarmuka menu tambah stok produk A18 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id produk Merk Kategori Nama Harga Stok Action ID Produk Merk Kategori Nama Harga Stok Tambah Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik tambah menuju A39 Diskon Diskon Gambar 3.79 Perancangan antarmuka menu tambah stok produk 19. Perancangan antarmuka menu tambah produk A19 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Produk Baru Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Kategori Produk Merk Produk Nama Produk Harga Produk Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik simpan menuju A40 Klik reset menuju 19 Deskripsi Produk Berat Produk Stok Image Browse Simpan Reset Diskon Produk Gambar 3.80 Perancangan antarmuka menu tambah produk 20. Perancangan antarmuka menu delete produk A20 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id produk Merk Kategori Nama Harga Stok Action ID Produk Merk Kategori Nama Harga Stok Delete Edit Apakah anda yakin data ini akan dihapus ? Ok Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik ok menuju A40 Klik cancel menuju A40 Diskon diskon Gambar 3.81 Perancangan antarmuka menu delete produk 21. Perancangan antarmuka menu edit produk A21 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Edit Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Kategori Produk Merk Produk Nama Produk Harga Produk Deskripsi Produk Berat Produk Stok Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik update menuju A40 Klik cancel menuju A40 Image Image Browse Update Cancel Diskon Gambar 3.82 Perancangan antarmuka menu edit produk 22. Perancangan antarmuka menu pesanan baru A22 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pesanan Email Member Action ID Pesanan Tanggal pemesanan Detail Status Konfirmasi Email member Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pesanan Total Bayar Status pesanan Total bayar Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik detail menuju A27 Gambar 3.83 Perancangan antarmuka menu pesanan baru 23. Perancangan antarmuka menu pesanan terbayar A23 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal pesan terbayar Email Member Action ID Pesanan Tanggal pesan terbayar Detail Status Konfirmasi Email member Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pesanan Total Bayar Status pesanan Total bayar Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan ditambah kan menuju A26 Klik detail menuju A41 Gambar 3.84 Perancangan antarmuka menu pesanan terbayar 24. Perancangan antarmuka menu pesanan terkirim A24 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan yang Sudah Dikirim Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pesanan terkirim Email Member Action ID Pesanan Tanggal pesanan terkirim Detail Status Pesanan Email member Status pesanan Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Jasa Pengiriman No Resi Jasa pengiriman No resi Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik detail menuju A42 Gambar 3.85 Perancangan antarmuka menu pesanan terkirim 25. Perancangan antarmuka menu pesanan tersampaikan A25 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan yang Sudah Sampai Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pesanan diterima Email Member Action ID Pesanan Tanggal pesanan diterima Detail Status Pesanan Email member Status pesanan Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Jasa pengiriman No resi Jasa pengiriman No resi Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik detail menuju A44 Gambar 3.86 Perancangan antarmuka menu pesanan tersampaikan 26. Perancangan antarmuka menu pesanan dikembalikan A26 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan yang Sudah Sampai Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pesanan diterima Email Member Action ID Pesanan Tanggal pesanan diterima Detail Status Pesanan Email member Status pesanan Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Jasa pengiriman No resi Jasa pengiriman No resi Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik detail menuju A43 Gambar 3.87 Perancangan antarmuka menu pesanan dikembalikan 27. Perancangan antarmuka menu pesanan baru detail A27 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pemesanan ID Pesanan Tanggal pemesanan Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pemesanan Status Konfirmasi Status Pemesanan Update Status Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Daftar produk yang dipesan Nama produk Berat Jumlah Harga Subtotal Nama produk Berat Jumlah Harga Subtotal Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan ditambah kan menuju A26 Klik update status menuju A04 Klik kembali ke pesanan menuju A04 Gambar 3.88 Perancangan antarmuka menu pesanan baru detail 29. Perancangan antarmuka menu delete provinsi A29 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Provinsi Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Provinsi Nama Provinsi Action ID Provinsi Nama Provinsi Delete Edit Apakah anda yakin data ini akan dihapus ? Ok Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik ok menuju A08 Klik cancel menuju A08 Gambar 3.89 Perancangan antarmuka menu delete provinsi 30. Perancangan antarmuka menu edit provinsi A30 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Edit Provinsi Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Provinsi Update Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik update menuju A08 Klik cancel menuju A08 Gambar 3.90 Perancangan antarmuka menu edit provinsi 31. Perancangan antarmuka menu delete kota A31 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Kota Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Kota Nama Provinsi Nama Kota Action ID Merk Nama Provinsi Delete Edit Ongkos Kirim Nama Kota Ongkos Kirim Apakah anda yakin data ini akan dihapus ? Ok Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik ok menuju A10 Klik cancel menuju A10 Gambar 3.91 Perancangan antarmuka menu delete kota 32. Perancangan antarmuka menu edit kota A32 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Edit Kota Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Provinsi Update Cancel Ongkos Kirim Nama Kota Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik update menuju A10 Klik cancel menuju A10 Gambar 3.92 Perancangan antarmuka menu edit kota 33. Perancangan antarmuka menu delete merk A33 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Merk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Merk Nama Merk Image Action ID Merk Nama Merk Image Delete Edit Apakah anda yakin data ini akan dihapus ? Ok Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik ok menuju A12 Klik cancel menuju A12 Gambar 3.93 Perancangan antarmuka menu delete merk 34. Perancangan antarmuka menu edit merk A34 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Edit Merk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Merk Update Cancel gambar Image Browse Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik update menuju A12 Klik cancel menuju A12 Gambar 3.94 Perancangan antarmuka menu edit merk 35. Perancangan antarmuka menu delete kategori A35 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Kategori Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Kategori Nama Kategori Action Id kategori Nama Kategori Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik ok menuju A14 Klik cancel menuju A14 Apakah anda yakin data ini akan dihapus ? Ok Cancel Gambar 3.95 Perancangan antarmuka menu delete kategori 36. Perancangan antarmuka menu edit kategori A36 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Edit Kategori Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Nama Kategori Update Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik update menuju A14 Klik cancel menuju A14 Gambar 3.96 Perancangan antarmuka menu edit kategori 37. Perancangan antarmuka menu delete detail A37 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Data Detail Kategori dan Merk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id Jenis Nama Kategori Nama Merk Action ID Jenis Nama Kategori Nama Merk Delete Edit Apakah anda yakin data ini akan dihapus ? Ok Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik ok menuju A16 Klik cancel menuju A16 Gambar 3.97 Perancangan antarmuka menu delete detail 38. Perancangan antarmuka menu edit detail A38 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Edit Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Kategori Produk Merk Produk Update Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik update menuju A16 Klik cancel menuju A16 Gambar 3.98 Perancangan antarmuka menu edit detail 39. Perancangan antarmuka menu tambah stok produk A39 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Tambah Stok Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Kategori Produk Merk Produk Nama Produk Harga Produk Deskripsi Produk Berat Produk Stok Lama Stok baru Tambah Cancel Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik tambah menuju A40 Klik cancel menuju A40 Gambar 3.99 Perancangan antarmuka menu tambah stok produk 40. Perancangan antarmuka menu lihat produk A40 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Produk Daftar member Selamat Datang Data Master Provinsi Tambah provinsi baru Lihat provinsi Kota Tambah Kota baru Lihat kota Merk Tambah Merk baru Lihat Merk Kategori Tambah Kategori baru Lihat Kategori Detail Tambah Detail baru Lihat Detail Produk Tambah Produk baru Tambah Stok Produk Id produk Merk Kategori Nama Harga Stok Action ID Produk Merk Kategori Nama Harga Stok Delete Edit Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik lihat provinsi menuju A08 Klik tambah provinsi menuju A09 Klik lihat kota menuju A10 Klik tambah kota menuju A11 Klik lihat merk menuju A12 Klik tambah merk menuju A13 Klik lihat kategori menuju A14 Klik tambah kategori menuju A15 Klik lihat detail menuju A16 Klik tambah detail menuju A17 Klik tambah stok produk menuju A18 Klik tambah produk baru menuju A19 Klik delete menuju A20 Klik edit menuju A21 Diskon Diskon Gambar 3.100 Perancangan antarmuka menu lihat produk 41. Perancangan antarmuka menu detail pesanan terbayar A41 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pemesanan ID Pesanan Tanggal pemesanan Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pemesanan Status Konfirmasi Status Pemesanan Pembayaran Id pesanan Tanggal pembayaran Bank tujuan Atas nama Jumlah transfer Ok Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan No resi Cancel Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik ok menuju A23 Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik cancel menuju A23 Klik kembali kepesanan menuju A23 Gambar 3.101 Perancangan antarmuka menu detail pesanan terbayar 42. Perancangan antarmuka menu detail pesanan terkirim A42 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pemesanan ID Pesanan Tanggal pemesanan Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pemesanan Status Konfirmasi Status Pemesanan 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 Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik kembali kepesanan menuju A24 Gambar 3.102 Perancangan antarmuka menu detail pesanan terkirim 43. Perancangan antarmuka menu detail pesanan dikembalikan A43 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pemesanan ID Pesanan Tanggal pemesanan Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pemesanan Status Konfirmasi Status Pemesanan Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Produk yang dikembalikan Nama produk Jumlah Alasan Status Nama produk Berat Jumlah Harga Pengiriman Id pesanan Tanggal pengiriman Jasa pengiriman No resi Disetujui Ditolak Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik kembali kepesanan menuju A26 Klik pesanan ditolak menuju A26 Klik pesanan disetujui menuju A26 Gambar 3.103 Perancangan antarmuka menu detail pesanan dikembalikan 44. Perancangan antarmuka menu detail pesanan tersampaikan A44 LOGO WIGICOM Cari produk cari HOME DATA MASTER PESANAN LAPORAN LOG OUT LOGO Daftar Pesanan Daftar member Selamat Datang Pesanan Pilih Pesanan Pesanan Baru Pesanan Terbayar Id Pesanan Tanggal Pemesanan ID Pesanan Tanggal pemesanan Status konfirmasi Pesanan Terkirim Pesanan Tersampaikan Pesanan Dikembalikan Status Pemesanan Status Konfirmasi Status Pemesanan Alamat Pengiriman Id pesanan Email Nama tujuan Kota tujuan Alamat tujuan Kode pos Kembali ke pesanan Daftar produk yang dipesan Nama produk Berat Jumlah Harga Subtotal Nama produk Berat Jumlah Harga Subtotal Pengiriman Id pesanan Tanggal pengiriman Jasa pengiriman No resi Klik home menuju A02 Klik data master menuju A03 Klik pesanan menuju A04 Klik laporan menuju A05 Klik logout menuju A01 Klik data member menuju A06 Kli cari menuju A07 Klik pesanan baru menuju A22 Klik pesanan terbayar menuju A23 Klik pesanan terkirim menuju A24 Klik pesanan tersampaikan menuju A25 Klik pesanan dikembalikan menuju A26 Klik kembali kepesanan menuju A25 Gambar 3.104 Perancangan antarmuka menu detail pesanan tersampaikan

3.2.4 Perancangan Pesan

Perancangan pesan yang terdapat dalam sistem yang akan dibangun adalah sebagai berikut : Z01 Silahkan masukkan no resi pesanan anda Z02 Stok tidak mencukupi Z03 Kesalahan input data pada: Atas nama pengirim belum anda isi Jumlah transfer harus anda isi Z04 Kesalahan input data pada: Atas nama pengirim belum anda isi Z05 Kesalahan input data pada: Jumlah transfer harus anda isi Z06 Kesalahan input data pada: Pilih jumlah produk yang ingin dikembalikan Kolom alasan belum anda isi Z07 Kesalahan input data pada: Pilih jumlah produk yang ingin dikembalikan Z08 Kesalahan input data pada: Kolom alasan belum anda isi Z09 Apakah anda yakin data ini akan dihapus ? Z10 Username atau password anda salah Gambar 3.105 Perancangan pesan

3.2.5 Perancangan Jaringan Semantik

Jaringan semantik menggambarkan keterkaitan navigasi menu dari satu halaman ke halaman lainnya. Jaringan semantik pengunjung, member dan admin menggambarkan keterkaitan navigasi menu untuk masing-masing menu dari satu halaman ke halaman lainnya. Dibawah ini adalah perancarangan jaringan semantik dari sistem. 3.2.5.1 Perancangan Jaringan Semantik Pengunjung P01 P02 P03 P04 P05 P06 P07 P08 P09 P10 P11 P12 M10 Gambar 3.106 Jaringan Semantik Pengunjung

3.2.5.2 Perancangan Jaringan Semantik Member

M01 M02 M03 M04 M05 M06 M07 M08 M09 M10 M11 M12 M13 M14 M15 M16 M17 M18 M20 Z01 Z02 Z09 Z03 Z04 Z05 Z06 Z07 Z08 Gambar 3.107 Jaringan Semantik Member

3.2.5.3 Perancangan Jaringan Semantik Admin

A02 A01 A03 A27 A04 A06 A05 A07 A08 A09 A10 A11 A12 A13 A14 A15 A16 A17 A40 A18 A19 A20 A21 A22 A23 A24 A25 A26 A29 A30 A31 A32 A33 A34 A35 A36 A37 A37 A39 A41 A42 A43 A44 A45 A46 A47 Z09 Z09 Z09 Z09 Z09 Z09 Z09 Gambar 3.108 Jaringan Semantik Admin

3.2.6 Perancangan Prosedural

Perancangan prosedural merupakan perancangan yang dilakukan untuk menetapkan detail algoritma yang akan dinyatakan kedalam suatu sistem. Adapun perancangan prosedural untuk sistem penjualan berbasis web yang akan dibangun adalah : a. Proses Login mulai Masukan username dan password Valid ? selesai ya tidak Verifikasi username dan password Tampilan menu utama Gambar 3.109 Proses Login b. Proses Registrasi mulai Masukan data registrasi Valid ? selesai ya tidak Verifikasi data registrasi Tampilan halaman registrasi berhasil Gambar 3.110 Proses Registrasi c. Proses Cari Data mulai Masukan data produk yang ingin dicari Ada ? selesai ya tidak Verifikasi data produk yang dicari Tampilan data produk yang dicari Gambar 3.111 Proses Cari Data d. Proses Tambah Data mulai Masukan data yang ingin ditambah Valid ? selesai ya tidak Verifikasi data produk Tampilan data produk yang ditambah Gambar 3.112 Proses Tambah Data e. Proses Ubah Data mulai Masukan data yang ingin diubah Valid ? selesai ya tidak Verifikasi data yang akan dirubah Tampilan data produk yang dirubah Gambar 3.113 Proses Ubah Data f. Proses Hapus Data mulai Masukan data yang ingin dihapus Valid ? Tampilan data produk yang dihapus selesai ya tidak Verifikasi data yang ingin dihapus Gambar 3.114 Proses Hapus Data 209

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

Pada bab ini akan dilakukan implementasi dan pengujian terhadap sistem yang baru. Tahapan ini dilakukan setelah perancangan selesai dilakukan dan selanjutnya akan diimplementasikan pada bahasa pemograman yang akan digunakan. Setelah implementasi maka dilakukan pengujian terhadap sistem yang baru untuk mengetahui apakah program yang dibangun sudah sesuai dengan tujuannya atau tidak.

4.1 Implementasi Sistem

Setelah sistem dianalisis dan didesain secara rinci, maka akan menuju tahap implementasi. Implementasi sistem merupakan tahap meletakkan sistem sehingga siap untuk dioperasikan. Implementasi bertujuan untuk mengkonfirmasi modul-modul perancangan, sehingga pengguna dapat memberi masukan terhadap pengembangan sistem.

4.1.1 Implementasi Perangkat Keras

Perangkat keras yang digunakan untuk implementasi sistem e-commerce ini adalah seperti pada tabel 4.1 No Perangkat Keras 1 2 3 4 5 Processor dengan kecepatan 2GHz Kapasitas Hardisk 180GB RAM 1 GB VGA Card 64MB Monitor dengan resolusi 1024 x 768 pixel