7. Perancangan antar muka menu utama UPDATE PROFIL
BENNER HOME
PRODUK TENTANG
KAMI HUKUM
KEPEMILIKAN CART
ACCOUNT YM
M07
INFORMASI PEMBAYARAN VIA
OFFICE RESI PENGIRIMAN
Klik tombol HOME menuju Ke M01
Klik tombol LOGIN menuju Ke M02
Klik tombol LUPA PASSWORD menuju Ke M03
Klik tombol HISTORY ORDER menuju Ke M04
Klik tombol KONFIRMASI menuju Ke M05
Klik tombol PROFIL menuju Ke M06
Klik tombol UPDATE menuju Ke M07
Klik tombol UBAH PASSWORD menuju Ke M08
Klik tombol CHECKOUT menuju Ke M09
Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10
Klik tombol PEMBAYARAN TRANSFER menuju Ke M11
Klik tombol RETUR menuju Ke M12
NAMA PROFIL CARI
F LOGOUT
HISTORI ORDER
PROFILE
SAVE BATAL
EMAIL USERNAME
PASSWORD KONFIRMASI PASSWORD
PERSONAL INFO NAMA LENGKAP
ALAMAT NO TELPON
KOTAKABUPATEN KODE POS
ACCOUNT INFO
Gambar 3.44 Perancangan Antarmuka Update Profile
8. Perancangan antar muka menu utama UBAH PASSWORD
BENNER HOME
PRODUK TENTANG
KAMI HUKUM
KEPEMILIKAN CART
ACCOUNT YM
M08
INFORMASI PEMBAYARAN VIA
OFFICE RESI PENGIRIMAN
Klik tombol HOME menuju Ke M01
Klik tombol LOGIN menuju Ke M02
Klik tombol LUPA PASSWORD menuju Ke M03
Klik tombol HISTORY ORDER menuju Ke M04
Klik tombol KONFIRMASI menuju Ke M05
Klik tombol PROFIL menuju Ke M06
Klik tombol UPDATE menuju Ke M07
Klik tombol UBAH PASSWORD menuju Ke M08
Klik tombol CHECKOUT menuju Ke M09
Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10
Klik tombol PEMBAYARAN TRANSFER menuju Ke M11
Klik tombol RETUR menuju Ke M12
UBAH PASSWORD CARI
F LOGOUT
HISTORI ORDER
PROFILE SAVE
BATAL
KONFIRMASI PASSWORD PASSWORD
Gambar 3.45 Perancangan Antarmuka Ubah Password
9. Perancangan antar muka menu utama CHEKOUT
BENNER HOME
PRODUK TENTANG
KAMI HUKUM
KEPEMILIKAN CART
ACCOUNT YM
M09
INFORMASI PEMBAYARAN VIA
OFFICE RESI PENGIRIMAN
Klik tombol HOME menuju Ke M01
Klik tombol LOGIN menuju Ke M02
Klik tombol LUPA PASSWORD menuju Ke M03
Klik tombol HISTORY ORDER menuju Ke M04
Klik tombol KONFIRMASI menuju Ke M05
Klik tombol PROFIL menuju Ke M06
Klik tombol UPDATE menuju Ke M07
Klik tombol UBAH PASSWORD menuju Ke M08
Klik tombol CHECKOUT menuju Ke M09
Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10
Klik tombol PEMBAYARAN TRANSFER menuju Ke M11
Klik tombol RETUR menuju Ke M12
DATA DEFAULT : DATA BARU CARI
F LOGOUT
HISTORI ORDER
PROFILE
SUBMIT
NAMA LENGKAP EMAIL
ALAMAT NO TELPON
KOTAKABUPATEN KODE POS
JASA PENGIRIMAN
CHECKOUT
Gambar 3.46 Perancangan Antarmuka Checkout
10. Perancangan antar muka menu utama KONFIRMASI PEMBAYARAN
BENNER HOME
PRODUK TENTANG
KAMI HUKUM
KEPEMILIKAN CART
ACCOUNT
M10
INFORMASI PEMBAYARAN VIA
OFFICE RESI PENGIRIMAN
Klik tombol HOME menuju Ke M01
Klik tombol LOGIN menuju Ke M02
Klik tombol LUPA PASSWORD menuju Ke M03
Klik tombol HISTORY ORDER menuju Ke M04
Klik tombol KONFIRMASI menuju Ke M05
Klik tombol PROFIL menuju Ke M06
Klik tombol UPDATE menuju Ke M07
Klik tombol UBAH PASSWORD menuju Ke M08
Klik tombol CHECKOUT menuju Ke M09
Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10
Klik tombol PEMBAYARAN TRANSFER menuju Ke M11
Klik tombol RETUR menuju Ke M12
CARI F
LOGOUT HISTORI
ORDER PROFILE
KONFIRMASI
DETAIL TRANSAKSI : KONFIRMASI
IMAGE IMAGE
BAYAR TRANSFER BAYAR PAYPAL
YM
Gambar 3.47 Perancangan Antarmuka Konfirmasi Pembayaran
11. Perancangan antar muka menu utama PEMBAYARAN TRANSFER
BENNER HOME
PRODUK TENTANG
KAMI HUKUM
KEPEMILIKAN CART
ACCOUNT YM
M11
INFORMASI PEMBAYARAN VIA
OFFICE RESI PENGIRIMAN
Klik tombol HOME menuju Ke M01
Klik tombol LOGIN menuju Ke M02
Klik tombol LUPA PASSWORD menuju Ke M03
Klik tombol HISTORY ORDER menuju Ke M04
Klik tombol KONFIRMASI menuju Ke M05
Klik tombol PROFIL menuju Ke M06
Klik tombol UPDATE menuju Ke M07
Klik tombol UBAH PASSWORD menuju Ke M08
Klik tombol CHECKOUT menuju Ke M09
Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10
Klik tombol PEMBAYARAN TRANSFER menuju Ke M11
Klik tombol RETUR menuju Ke M12
CARI F
LOGOUT HISTORI
ORDER PROFILE
SUBMIT
BANK TUJUAN
KONFIRMASI TRANSFER
DETAIL TRANSAKSI : KONFIRMASI TRANSFER
ATAS NAMA NO TRANSAKSI
RESET
TANGGAL PEMBAYARAN JUMLAH TRANSFER
Gambar 3.48 Perancangan Antarmuka Pembayaran Transfer
12. Perancangan antar muka menu utama RETUR
BENNER HOME
PRODUK TENTANG
KAMI HUKUM
KEPEMILIKAN CART
ACCOUNT YM
M12
INFORMASI PEMBAYARAN VIA
OFFICE RESI PENGIRIMAN
Klik tombol HOME menuju Ke M01
Klik tombol LOGIN menuju Ke M02
Klik tombol LUPA PASSWORD menuju Ke M03
Klik tombol HISTORY ORDER menuju Ke M04
Klik tombol KONFIRMASI menuju Ke M05
Klik tombol PROFIL menuju Ke M06
Klik tombol UPDATE menuju Ke M07
Klik tombol UBAH PASSWORD menuju Ke M08
Klik tombol CHECKOUT menuju Ke M09
Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10
Klik tombol PEMBAYARAN TRANSFER menuju Ke M11
Klik tombol RETUR menuju Ke M12
CARI F
LOGOUT HISTORI
ORDER PROFILE
SUBMIT RETUR ORDER
KATEGORI MERK
PRODUK HARGA
JUMLAH PESANAN ALASAN
GAMBAR BROWS
Gambar 3.49 Perancangan Antarmuka Retur
3.2.5.3 Perancangan Antarmuka Pimpinan
1. Perancangan antar muka menu utama laporan penjualan
P01
Klik tombol DASHBORD menuju Ke P02
Klik tombol LAPORAN PENJUALAN menuju
KeP03 Klik tombol LAPORAN RETUR menuju
Ke P04 Klik tombol LAPORAN PRODUK
menuju Ke P05
laporan
3
Laporan penjualan Laporan retur
Laporan produk
PD. PIPIK PUTRA SHOP DASHBOARD
Laporan penjualan
Member baru Order masuk
Retur masuk Last visit
sigout Howpimpin
laporan penjualan Laporan penjualan
No Nopesanan nama tanggal pesanan tanggal konfirmasi total paypal total transfer detail
sd Get laporan
Export pdf print
Gambar 3.50 Perancangan Antarmuka Laporan Penjualan
2. Perancangan antar muka menu utama laporan retur
P02
Klik tombol DASHBORD menuju Ke P02
Klik tombol LAPORAN PENJUALAN menuju
KeP03 Klik tombol LAPORAN RETUR menuju
Ke P04 Klik tombol LAPORAN PRODUK
menuju Ke P05
laporan
3
Laporan penjualan Laporan retur
Laporan produk
PD. PIPIK PUTRA SHOP DASHBOARD
retur
Member baru Order masuk
Retur masuk Last visit
sigout howPIMPIN
retur Data retur produk
No Nopesanan notresi namapemesan tanggal retur status aksi
Gambar 3.51 Perancangan Antarmuka Laporan Retur
3. Perancangan antar muka menu utama laporan produk
P05
Klik tombol DASHBORD menuju Ke P02
Klik tombol LAPORAN PENJUALAN menuju
KeP03 Klik tombol LAPORAN RETUR menuju
Ke P04 Klik tombol LAPORAN PRODUK
menuju Ke P05
laporan
3
Laporan penjualan Laporan retur
Laporan produk
2
PD. PIPIK PUTRA SHOP DASHBOARD
Laporan produk
Member baru Order masuk
Retur masuk Last visit
sigout howadmin
laporan produk Laporan produk
kategori merk produk harga gambar serch
Gambar 3.52 Perancangan Antarmuka Laporan Produk
3.2.5.4 Perancangan Antarmuka Bagian Keuangan
1. Perancangan antar muka menu utama LOGIN BAGIAN KEUANGAN
MAIN WEBSITE
K01
Klik tombol DASHBORD menuju Ke K02
Klik tombol ORDER menuju Ke K03
USERNAME PASSWORD
LOGIN
LOGIN LUPA PASSWORD
Gambar 3.53 Perancangan Antarmuka Login
2. Perancangan antar muka menu utama ORDER
KO2
Klik tombol DASHBORD menuju Ke K02
Klik tombol ORDER menuju Ke K03
dashbord Order
Order produk
PD. PIPIK PUTRA SHOP DASHBOARD
order
Member baru Order masuk
Retur masuk Last visit
sigout howaBAGKUE
order Data order produk
Nopesanan notraking namapemesan tanggal pesanan jumlah status aksi detail
serch
Gambar 3.54 Perancangan Antarmuka Order
3.2.5.5 Perancangan Antarmuka Admin
1. Perancangan antar muka menu utama PETUGAS
A03
Klik tombol DASHBORD menuju Ke A02
Klik tombol ADMIN menuju Ke A03
Klik tombol MEMBER menuju Ke A05
Klik tombol KATEGORI menuju Ke A06
Klik tombol SUBKATEGORI menuju Ke A08
Klik tombol MERK menuju Ke A10
Klik tombol PRODUK menuju Ke A12
Klik tombol STOK menuju Ke A14
Klik tombol PROVINSI menuju Ke A16
Klik tombol KABUPATENKOTA menuju Ke A18
Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju
Ke A21 Klik tombol PAKET JASA PENGIRIMAN
menuju Ke A23 Klik tombol ONGKOS menuju
Ke A25 Klik tombol ORDER PRODUK menuju
Ke A27 Klik tombol RETUR PRODUK menuju
Ke A28 Klik tombol LAPORAN PENJUALAN
menuju Ke A29 Klik tombol LAPORAN PRODUK menuju
Ke A30 admin
member Jenis barang
merk
2
produk stock
wilayah
2
Kabupatenkota petunjuk
Jasa dan paket pengiriman
3
Jasa pengiriman Paket jasa pengiriman
Ongkos pengiriman File manager
2
Backup database Backup file
PD. PIPIK PUTRA SHOP
admin
Member baru Order masuk
Retur masuk Last visit
sigout howadmin
Admin
Tambah admin
Data admin Username email action
edit hapus
Gambar 3.55 Perancangan Antarmuka Petugas
2. Perancangan antar muka menu utama PETUGAS
A04
Klik tombol DASHBORD menuju Ke A02
Klik tombol ADMIN menuju Ke A03
Klik tombol MEMBER menuju Ke A05
Klik tombol KATEGORI menuju Ke A06
Klik tombol SUBKATEGORI menuju Ke A08
Klik tombol MERK menuju Ke A10
Klik tombol PRODUK menuju Ke A12
Klik tombol STOK menuju Ke A14
Klik tombol PROVINSI menuju Ke A16
Klik tombol KABUPATENKOTA menuju Ke A18
Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju
Ke A21 Klik tombol PAKET JASA PENGIRIMAN
menuju Ke A23 Klik tombol ONGKOS menuju
Ke A25 Klik tombol ORDER PRODUK menuju
Ke A27 Klik tombol RETUR PRODUK menuju
Ke A28 Klik tombol LAPORAN PENJUALAN
menuju Ke A29 Klik tombol LAPORAN PRODUK menuju
Ke A30 PD. PIPIK PUTRA SHOP DASHBOARD
admin
Member baru Order masuk
Retur masuk Last visit
sigout howadmin
Admintambah admin Username email action
username password
email
Tambah admin
save reset
back admin
member Jenis barang
merk
2
produk stock
wilayah
2
Kabupatenkota petunjuk
Jasa dan paket pengiriman
3
Jasa pengiriman Paket jasa pengiriman
Ongkos pengiriman File manager
2
Backup database Backup file
Gambar 3.56 Perancangan Antarmuka Tambah petugas
3. Perancangan antar muka menu utama MEMBER
A05
Klik tombol DASHBORD menuju Ke A02
Klik tombol ADMIN menuju Ke A03
Klik tombol MEMBER menuju Ke A05
Klik tombol KATEGORI menuju Ke A06
Klik tombol SUBKATEGORI menuju Ke A08
Klik tombol MERK menuju Ke A10
Klik tombol PRODUK menuju Ke A12
Klik tombol STOK menuju Ke A14
Klik tombol PROVINSI menuju Ke A16
Klik tombol KABUPATENKOTA menuju Ke A18
Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju
Ke A21 Klik tombol PAKET JASA PENGIRIMAN
menuju Ke A23 Klik tombol ONGKOS menuju
Ke A25 Klik tombol ORDER PRODUK menuju
Ke A27 Klik tombol RETUR PRODUK menuju
Ke A28 Klik tombol LAPORAN PENJUALAN
menuju Ke A29 Klik tombol LAPORAN PRODUK menuju
Ke A30
PD. PIPIK PUTRA SHOP D
member
Member baru Order masuk
Retur masuk Last visit
sigout howadmin
member Data admin
Username email status terakhir login delate delate
admin member
Jenis barang merk
2
produk stock
wilayah
2
Kabupatenkota petunjuk
Jasa dan paket pengiriman
3
Jasa pengiriman Paket jasa pengiriman
Ongkos pengiriman File manager
2
Backup database Backup file
Gambar 3.57 Perancangan Antarmuka Member
