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