Perancangan Antar Muka Administrator
6. Perancangan antar muka manage konten
Tabel A06
Navigasi
1. klik tombol “beranda” untuk
menuju ke A02 2.
Klik tombol “logout” untuk menuju ke A01
3. Klik tombol “ pengguna”
untuk menuju ke A03 4.
Klik tombol “Member” untuk menuju ke A04
5. klik tombol “menu” untuk
menuju ke A05 5.
Klik tombol “manage konten” untuk menuju ke A06
6. Klik tombol “Backup ” untuk
menuju ke A07 7.
klik tombol “restore” untuk menuju A08
8. Klik tombol “tambah konten”
untuk menuju ke A010 9.
Klik tombol “delete” untuk menuju ke A06
Beranda Manage pengguna
Manage member manage menu
Manage konten Backup database
Restore database logout
Nama layar : A06 Ukuran layar : 693 x 768
Font : Verdana
Warna backgound : Putih header
Batik Indramayu Paoman Art
OnlineShop
Paomanart menu
Cari Berdasarkan Kata
Cari
+Tambah Konten
Gambar 3.31 Perancangan Antar Muka Manage Konten
7. Perancangan antar muka tambah menu
A09 Navigasi
1. klik tombol “beranda” untuk
menuju ke A02 2.
Klik tombol “logout” untuk menuju ke A01
3. Klik tombol “ pengguna”
untuk menuju ke A03 4.
Klik tombol “Member” untuk menuju ke A04
5. klik tombol “menu” untuk
menuju ke A05 5.
Klik tombol “manage konten” untuk menuju ke A06
6. Klik tombol “Backup ” untuk
menuju ke A07 7.
klik tombol “restore” untuk menuju A08
8. Klik tombol “simpan” untuk
menuju ke A05
Beranda Manage pengguna
Manage member manage menu
Manage konten Backup database
Restore database logout
Nama layar : A09 Ukuran layar : 693 x 768
Font : Verdana
Warna backgound : Putih header
Batik Indramayu Paoman Art
OnlineShop
Tambah Menu
menu
Simpan keyword
deskripsi Batal
Gambar 3.32 Perancangan Antar Muka Tambah Menu
8. Perancangan antar muka tambah konten
A010 Navigasi
1. klik tombol “beranda” untuk
menuju ke A02 2.
Klik tombol “logout” untuk menuju ke A01
3. Klik tombol “ pengguna”
untuk menuju ke A03 4.
Klik tombol “Member” untuk menuju ke A04
5. klik tombol “menu” untuk
menuju ke A05 5.
Klik tombol “manage konten” untuk menuju ke A06
6. Klik tombol “Backup ” untuk
menuju ke A07 7.
klik tombol “restore” untuk menuju A08
8. Klik tombol “save” untuk
menuju ke A06
Beranda Manage pengguna
Manage member manage menu
Manage konten Backup database
Restore database logout
Nama layar : A10 Ukuran layar : 693 x 768
Font : Verdana
Warna backgound : Putih header
Batik Indramayu Paoman Art
OnlineShop
konten
menu judul
save konten
cancel
Gambar 3.33 Perancangan Antar Muka Tambah Konten
9. Perancangan antar muka backup database
A07 Navigasi
1. klik tombol “beranda” untuk
menuju ke A02 2.
Klik tombol “logout” untuk menuju ke A01
3. Klik tombol “ pengguna”
untuk menuju ke A03 4.
Klik tombol “Member” untuk menuju ke A04
5. klik tombol “menu” untuk
menuju ke A05 5.
Klik tombol “manage konten” untuk menuju ke A06
6. Klik tombol “Backup ” untuk
menuju ke A07 7.
klik tombol “restore” untuk menuju A08
Beranda Manage pengguna
Manage member manage menu
Manage konten Backup database
Restore database logout
Nama layar : A07 Ukuran layar : 693 x 768
Font : Verdana
Warna backgound : Putih header
Batik Indramayu Paoman Art
OnlineShop
Backup Database
Tabel backup Database Backup
Gambar 3.34 Perancangan Antar Muka Backup Database
10. Perancangan antar muka Restore Database
A08 Navigasi
1. klik tombol “beranda” untuk
menuju ke A02 2.
Klik tombol “logout” untuk menuju ke A01
3. Klik tombol “ pengguna”
untuk menuju ke A03 4.
Klik tombol “Member” untuk menuju ke A04
5. klik tombol “menu” untuk
menuju ke A05 5.
Klik tombol “manage konten” untuk menuju ke A06
6. Klik tombol “Backup ” untuk
menuju ke A07 7.
klik tombol “restore” untuk menuju A08
Beranda Manage pengguna
Manage member manage menu
Manage konten Backup database
Restore database logout
Nama layar : A08 Ukuran layar : 693 x 768
Font : Verdana
Warna backgound : Putih header
Batik Indramayu Paoman Art
OnlineShop
Restore Database
Masukan Data Backup
Browse Restore
Gambar 3.35 Perancangan Antar Muka Restore Database 3.4.2
Perancangan Antar Muka Operator
1. Perancangan antar muka login
Login Username
Password Login Operator
O01 Navigasi
1. klik tombol “login”
untuk melakukan login dan menuju
O02
Nama layar : O01 Ukuran layar : 245 x 300
Font : Calibri
Warna backgound : Putih
Gambar 3.6 Perancangan Antar Muka Login
2. Perancangan antar muka beranda operator
O02 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O02
: 693 x 768 : Verdana
: Putih Selamat Datang, operator
Nama layar Ukuran layar
Font Warna backgound
header Batik Indramayu
Paoman Art OnlineShop
Gambar 3.37 Perancangan Antar Muka Beranda Operator
3. Perancangan antar muka kategori
O03 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O03
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound Manajemen Kategori
Nama Kategori Pilih
Delete Edit
+ Tambah Kategori Produk Baru header
Batik Indramayu Paoman Art
OnlineShop
Gambar 3.38 Perancangan Antar Muka Kategori
4. Perancangan antar muka produk
O04 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O04
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound Delete
Edit + Tambah Kategori Produk Baru
Buat Laporan Pilih
header Batik Indramayu
Paoman Art OnlineShop
Gambar 3.39 Perancangan Antar Muka Produk
5. Perancangan antar muka provinsi
O05 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Delete” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O05
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop
No Pilih
delete edit
+ Tambah Provinsi Provinsi
Gambar 3.40 Perancangan Antar Muka Provinsi
6. Perancangan antar muka kota
O06 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Delet” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O06
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop
Id-kota Pilih
delete edit
+ Tambah Kota Id-provinsi
kota
Gambar 3.41 Perancangan Antar Muka Kota
7. Perancangan antar muka pemesanan
O07 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Delete” untuk
menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O07
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop
Delete Edit
+ Managemen Pemesanan Pilih
Gambar 3.42 Perancangan Antar Muka Pemesanan
8. Perancangan antar muka pembayaran
O08 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O08
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop
Detail + Managemen Pembayaran
Pilih
Gambar 3.43 Perancangan Antar Muka Pembayaran
9. Perancangan antar muka Pengiriman
O09 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Konfirmasi”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O09
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop
konfirmasi + Buat Laporan
Pilih
Gambar 3.44 Perancangan Antar Muka Pengiriman
10. Perancangan antar muka retur
O10 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O10
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop
Id-order Akses
konfirmasi Data retur produk
Id-retur Nama
member Tanggal
retur Acc
Gambar 3.45 Perancangan Antar Muka Retur
11. Perancangan antar muka laporan
O11 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O11
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop Laporan order produk
Dari tanggal Sampai tanggal
Cetak
Gambar 3.46 Perancangan Antar Muka Laporan
12. Perancangan antar muka jasa pengiriman
O12 Navigasi
1. klik tombol “Home” untuk
menuju ke OP02 2.
Klik tombol “logout” untuk menuju ke O01
3. Klik tombol “Kategori”
untuk menuju ke O03 4.
Klik tombol “Produk” untuk menuju ke O04
5. Klik tombol “Provinsi” untuk
menuju ke O05 6.
Klik tombol “Kota” untuk menuju ke O06
7. Klik tombol “Pemesanan”
untuk menuju ke O07 8.
Klik tombol “Pembayaran” untuk menuju ke O08
9. Klik tombol “Pengiriman”
untuk menuju ke O09 10.
Klik tombol “Retur Barang” untuk menuju ke O10
11. Klik tombol “Laporan”
untuk menuju ke O11 12.
Klik tombol “Ongkos Kirim” untuk menuju ke O12
Manajemen Produk Kategori
Produk Manajemen Wilayah
Provinsi Kota
Manajemen Transaksi Pemesanan
Pembayaran Pengiriman
Retur Laporan
Ongkos Kirim logout
Copyright Paoman Art 2011 : O12
: 693 x 768 : Verdana
: Putih Nama layar
Ukuran layar Font
Warna backgound header
Batik Indramayu Paoman Art
OnlineShop Jasa Pengiriman Ongkos
Nama Jasa | Paket Pengiriman
Harga Tambah
Gambar 3.47 Perancangan Antar Muka Jasa Pengiriman 3.4.3
Perancangan Antar Muka Member
1. Perancangan antar muka setelah login berhasil
M01
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk Selamat datang….
Dukungan pembayaran Gambar
Kode barang Harga barang
Stok detail
Tambah ke keranjang
Gambar
Kode barang Harga barang
Stok detail
Tambah ke keranjang Produk paling diminati
Gambar ·
Klik beranda menuju P01
· Klik cara pembelian
menuju P02 ·
Klik cara pembayaran menuju P03
· Klik profil perusahaan
menuju P04 ·
Klik keranjang belanja menuju P05
· Klik rcar produk
menuju P06 ·
Klik semua produk menuju P07
· Klik daftar member
menuju P08 ·
Klik lupa password menuju P09
· Klik detail produk
menuju P10 ·
Klik tambah ke keranjang menuju P11
· Klik beranda menuju
M01 ·
Klik info member menuju M02
· Klik ubah password
menuju M03 ·
Klik history pembelian menuju M04
· Klik informasi retur
barng menuju M05 ·
Klik keranjang belanja menuju M06
· Klik tracking
pembelian menuju M07
· Klik semua produk
menuju M08 ·
Klik logout menuju M09
: M01 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.48 Perancangan Antar Muka Setelah Login Berhasil
2. Perancangan antar muka info member
M02
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk Selamat datang….
Dukungan pembayaran
Produk paling diminati
Gambar
Biodata
Alamat
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik keranjang belanja
menuju M06 ·
Klik tracking pembelian menuju
M07 ·
Klik semua produk menuju M08
· Klik logout menuju
M09
: M02 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.49 Perancangan Antar Muka Info Member
3. Perancangan antar muka ubah password
M03
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Produk paling diminati
Gambar
Form ubah password Password baru
Password lama Member
Confirm password baru
Ubah ·
Klik beranda menuju P01
· Klik cara pembelian
menuju P02 ·
Klik cara pembayaran menuju P03
· Klik profil perusahaan
menuju P04 ·
Klik keranjang belanja menuju P05
· Klik rcar produk
menuju P06 ·
Klik semua produk menuju P07
· Klik daftar member
menuju P08 ·
Klik lupa password menuju P09
· Klik detail produk
menuju P10 ·
Klik tambah ke keranjang menuju P11
· Klik beranda menuju
M01 ·
Klik info member menuju M02
· Klik ubah password
menuju M03 ·
Klik history pembelian menuju M04
· Klik informasi retur
barng menuju M05 ·
Klik keranjang belanja menuju M06
· Klik tracking
pembelian menuju M07
· Klik semua produk
menuju M08 ·
Klik logout menuju M09
: M03 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.50 Perancangan Antar Muka Ubah Password
4. Perancangan antar muka history pembelian
M04
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
. Beranda . Info member
. Ubah password . History pembelian
. Informasi return barang . Keranjang belanja
. Tracking pembelian . Semua produk
. logout Menu member
Kategori produk
Dukungan pembayaran
Produk paling diminati
Gambar
Cari berdasarkan Ketentuan return barang
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik keranjang belanja
menuju M06 ·
Klik tracking pembelian menuju
M07 ·
Klik semua produk menuju M08
· Klik logout menuju
M09
:M04 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.51 Perancangan Antar Muka History Pembelian
5. Perancangan antar muka informasi retur barang
M05
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Produk paling diminati
Gambar
Data retur produk Id order Id retur
Nama member
Tanggal retur Acc
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik keranjang belanja
menuju M06 ·
Klik tracking pembelian menuju
M07 ·
Klik semua produk menuju M08
· Klik logout menuju
M09
: M05 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.52 Perancangan Antar Muka Informasi Retur Barang
6. Perancangan antar muka keranjang belanja
M06
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Produk paling diminati
Gambar
Data retur produk barang
harga qty
Total harga
Update keranjang
Tidak jadi
Belanja lagi Check out
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik keranjang belanja
menuju M06 ·
Klik tracking pembelian menuju
M07 ·
Klik semua produk menuju M08
· Klik logout menuju
M09
: M06 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.53 Perancangan Antar Muka Keranjang Belanja
7. Perancangan antar muka tracking pembelian
M07
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Produk paling diminati
Gambar
Tracking
Gambar
Gambar Gambar
cek cek
cek ·
Klik beranda menuju P01
· Klik cara pembelian
menuju P02 ·
Klik cara pembayaran menuju P03
· Klik profil perusahaan
menuju P04 ·
Klik keranjang belanja menuju P05
· Klik rcar produk
menuju P06 ·
Klik semua produk menuju P07
· Klik daftar member
menuju P08 ·
Klik lupa password menuju P09
· Klik detail produk
menuju P10 ·
Klik tambah ke keranjang menuju P11
· Klik beranda menuju
M01 ·
Klik info member menuju M02
· Klik ubah password
menuju M03 ·
Klik history pembelian menuju M04
· Klik informasi retur
barng menuju M05 ·
Klik keranjang belanja menuju M06
· Klik tracking
pembelian menuju M07
· Klik semua produk
menuju M08 ·
Klik logout menuju M09
: M07 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.54 Perancangan Antar Muka Tracking Pembelian
8. Perancangan antar muka semua produk
M08
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk Selamat datang….
Dukungan pembayaran Gambar
Kode barang Harga barang
Stok detail
Tambah ke keranjang
Gambar
Kode barang Harga barang
Stok detail
Tambah ke keranjang Produk paling diminati
Gambar ·
Klik beranda menuju P01
· Klik cara pembelian
menuju P02 ·
Klik cara pembayaran menuju P03
· Klik profil perusahaan
menuju P04 ·
Klik keranjang belanja menuju P05
· Klik rcar produk
menuju P06 ·
Klik semua produk menuju P07
· Klik daftar member
menuju P08 ·
Klik lupa password menuju P09
· Klik detail produk
menuju P10 ·
Klik tambah ke keranjang menuju P11
· Klik beranda menuju
M01 ·
Klik info member menuju M02
· Klik ubah password
menuju M03 ·
Klik history pembelian menuju M04
· Klik informasi retur
barng menuju M05 ·
Klik keranjang belanja menuju M06
· Klik tracking
pembelian menuju M07
· Klik semua produk
menuju M08 ·
Klik logout menuju M09
: M08 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.55 Perancangan Antar Muka Semua Produk
9. Perancangan antar muka logout
M09
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk Menu member
Kategori produk
Dukungan pembayaran Gambar
harga Produk terbaru
Gambar
Tambah ke keranjang
Produk paling diminati
Gambar
Tambah ke keranjang
harga nama
nama Selamat datang..
email password
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik keranjang belanja
menuju M06 ·
Klik tracking pembelian menuju
M07 ·
Klik semua produk menuju M08
· Klik logout menuju
M09
: M09 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.56 Perancangan Antar Muka Logout
10. Perancangan antar muka detail produk
M10
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
deskripsi Detail produk
Gambar
Tambah ke keranjang Produk paling diminati
Gambar
stok kode
ukuran
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik keranjang belanja
menuju M06 ·
Klik tracking pembelian menuju
M07 ·
Klik detail produk menuju M10
· Klik logout menuju
M09
: M10 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.57 Perancangan Antar Muka Detail Produk
11. Perancangan antar muka isi alamat pengiriman
M11
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Isi alamat pengiriman
Data alamat member
Produk paling diminati
Gambar
Nama Alamat lengkap
provinsi kota
Kode pos
Gunakan alamat utama Gunakan alamat baru
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik informasi retur barng menuju M05
· Klik tambah ke
keranjang menuju M11
· Klik detail produk
menuju M10 ·
Klik logout menuju M09
: M11 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.58 Perancangan Antar Muka Isi alamat Pengiriman
12. Perancangan antar muka cara pembayaran
M12
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Pembayaran Produk paling diminati
Gambar
Via bank continue paypal
Pilih jenis pembayaran Transfer via bank
Transfer via paypal Produk review
barang harga
qty Total hrga
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik ubah password menuju M03
· Klik history pembelian
menuju M04 ·
Klik tambah ke keranjang menuju
M11 ·
Klik gunakan alamat menuju M12
· Klik logout menuju
M09
:M12 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.59 Perancangan Antar Muka Cara Pembayaran
13. Perancangan antar muka transaksi pemesanan selesai
M13
Header Gambar
Facebook Twiter
Gambar
Gambar yahoo . Batik cap
. Batik tulis . Pakaian wanita
. Sarung batik tulis . Scraft batik
. Tas batik
paypal Bni
Bri . Beranda
. Info member . Ubah password
. History pembelian . Informasi return barang
. Keranjang belanja . Tracking pembelian
. Semua produk . logout
Menu member
Kategori produk
Dukungan pembayaran
Proses pemesanan selesai
Detail pesanan
Produk paling diminati
Gambar Tujuan pengiriman
Rincian tagihan pesanan Finish checkout
· Klik beranda menuju
P01 ·
Klik cara pembelian menuju P02
· Klik cara pembayaran
menuju P03 ·
Klik profil perusahaan menuju P04
· Klik keranjang belanja
menuju P05 ·
Klik rcar produk menuju P06
· Klik semua produk
menuju P07 ·
Klik daftar member menuju P08
· Klik lupa password
menuju P09 ·
Klik detail produk menuju P10
· Klik tambah ke
keranjang menuju P11 ·
Klik beranda menuju M01
· Klik info member
menuju M02 ·
Klik history pembelian menuju M04
· Klik tambah ke
keranjang menuju M11
· Klik gunakan alamat
menuju M12 ·
Klik finish check out menuju M13
· Klik logout menuju
M09
: M13 : 693 x 768
: Verdana : Putih
Nama layar Ukuran layar
Font Warna backgound
Gambar 3.60 Perancangan Antar Muka Transaksi Pemesanan Selesai