Perancangan Antar Muka Member
3. Perancangan antar muka tentang kami
M3
Header
footer Gambar
Tentang Kami ·
Klik Home menuju M2 ·
Klik info tentang kami menuju M3
· Klik cara pembelian
menuju M4 ·
Klik cara pembayaran menuju M5
· Klik ubah data pribadi
barng menuju M6 ·
Klik ubah password menuju M7
· Klik pembelian menuju
M8 ·
Klik konfirmasi pembayaran menuju
M9 ·
Klik lretur produk menuju M10
· Klik keranjang belanja
menuju M11 ·
Klik logout menuju M12
· Klik Nama Produk
· Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M3
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
TEXT
Gambar 3.55 Perancangan Antar Muka Tentang Muka
4. Perancangan antar muka cara order
M4
Header
footer Gambar
Cara Pembelian ·
Klik Home menuju M2 ·
Klik info tentang kami menuju M3
· Klik cara pembelian
menuju M4 ·
Klik cara pembayaran menuju M5
· Klik ubah data pribadi
barng menuju M6 ·
Klik ubah password menuju M7
· Klik pembelian menuju
M8 ·
Klik konfirmasi pembayaran menuju
M9 ·
Klik lretur produk menuju M10
· Klik keranjang belanja
menuju M11 ·
Klik logout menuju M12
· Klik Nama Produk
· Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M4
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
TEXT
Gambar 3.56 Perancangan Antar Muka Cara Order
5. Perancangan antar muka informasi Cara Pembayaran
M5
Header
footer Gambar
Cara Pembayaran ·
Klik Home menuju M2 ·
Klik info tentang kami menuju M3
· Klik cara pembelian
menuju M4 ·
Klik cara pembayaran menuju M5
· Klik ubah data pribadi
barng menuju M6 ·
Klik ubah password menuju M7
· Klik pembelian menuju
M8 ·
Klik konfirmasi pembayaran menuju
M9 ·
Klik lretur produk menuju M10
· Klik keranjang belanja
menuju M11 ·
Klik logout menuju M12
· Klik Nama Produk
· Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M5
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
TEXT
Gambar 3.57 Perancangan Antar Muka Cara Pembayaran
6. Perancangan antar muka ubah data pribadi
M6
Header
footer Gambar
· Klik Home menuju M2
· Klik info tentang kami
menuju M3 ·
Klik cara pembelian menuju M4
· Klik cara pembayaran
menuju M5 ·
Klik ubah data pribadi barng menuju M6
· Klik ubah password
menuju M7 ·
Klik pembelian menuju M8
· Klik konfirmasi
pembayaran menuju M9
· Klik lretur produk
menuju M10 ·
Klik keranjang belanja menuju M11
· Klik logout menuju
M12 ·
Klik Nama Produk ·
Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M6
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
Ubah Data Pribadi
Nama Akhir Nama Awal
Jenis Kelamin Alamat
: …………………..
Kode Pos No. TlpHp
Ubah
: …………………..
: …………………..
: …………………..
: …………………..
: …………………..
Gambar 3.58 Perancangan Antar Muka Ubah Data Pribadi
7. Perancangan antar muka ubah password
M7
Header
footer Gambar
· Klik Home menuju M2
· Klik info tentang kami
menuju M3 ·
Klik cara pembelian menuju M4
· Klik cara pembayaran
menuju M5 ·
Klik ubah data pribadi barng menuju M6
· Klik ubah password
menuju M7 ·
Klik pembelian menuju M8
· Klik konfirmasi
pembayaran menuju M9
· Klik lretur produk
menuju M10 ·
Klik keranjang belanja menuju M11
· Klik logout menuju
M12 ·
Klik Nama Produk ·
Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M7
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
Member
Password baru Password lama
Confirm passwod baru
: …………………..
Ubah
: …………………..
: …………………..
: …………………..
Gambar 3.59 Perancangan Antar Muka Ubah Password
8. Perancangan antar muka order
M8
Header
footer Gambar
· Klik Home menuju M2
· Klik info tentang kami
menuju M3 ·
Klik cara pembelian menuju M4
· Klik cara pembayaran
menuju M5 ·
Klik ubah data pribadi barng menuju M6
· Klik ubah password
menuju M7 ·
Klik pembelian menuju M8
· Klik konfirmasi
pembayaran menuju M9
· Klik lretur produk
menuju M10 ·
Klik keranjang belanja menuju M11
· Klik logout menuju
M12 ·
Klik Nama Produk ·
Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M8
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
TEXT Data kamu
Cari Berdasarkan Kata
Cari
Tgl order Aksi
Status order Keterangan
Total harga Total
produk Id_order
Gambar 3.60 Perancangan Antar Muka Order
9. Perancangan antar konfirmasi order
M9
Header
footer Gambar
· Klik Home menuju M2
· Klik info tentang kami
menuju M3 ·
Klik cara pembelian menuju M4
· Klik cara pembayaran
menuju M5 ·
Klik ubah data pribadi barng menuju M6
· Klik ubah password
menuju M7 ·
Klik pembelian menuju M8
· Klik konfirmasi
pembayaran menuju M9
· Klik lretur produk
menuju M10 ·
Klik keranjang belanja menuju M11
· Klik logout menuju
M12 ·
Klik Nama Produk ·
Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M9
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
TEXT Data kamu
Cari Berdasarkan Kata
Cari
Tgl order Pilih
Status order Keterangan
Total harga Total
produk Id_order
Gambar 3.61 Perancangan Antar Muka Konfirmasi Order
10. Perancangan antar muka retur produk
M10
Header
footer Gambar
· Klik Home menuju M2
· Klik info tentang kami
menuju M3 ·
Klik cara pembelian menuju M4
· Klik cara pembayaran
menuju M5 ·
Klik ubah data pribadi barng menuju M6
· Klik ubah password
menuju M7 ·
Klik pembelian menuju M8
· Klik konfirmasi
pembayaran menuju M9
· Klik lretur produk
menuju M10 ·
Klik keranjang belanja menuju M11
· Klik logout menuju
M12 ·
Klik Nama Produk ·
Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M10
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
Data Reur Produk
Id order ACC
Tanggal retur Nama
Member Id retur
Gambar 3.62 Perancangan Antar Muka Retur Produk
11. Perancangan antar muka keranjang belanja
M11
Header
footer Gambar
· Klik Home menuju M2
· Klik info tentang kami
menuju M3 ·
Klik cara pembelian menuju M4
· Klik cara pembayaran
menuju M5 ·
Klik ubah data pribadi barng menuju M6
· Klik ubah password
menuju M7 ·
Klik pembelian menuju M8
· Klik konfirmasi
pembayaran menuju M9
· Klik lretur produk
menuju M10 ·
Klik keranjang belanja menuju M11
· Klik logout menuju
M12 ·
Klik Nama Produk ·
Menuju M13 ·
Klik belanja lagi menujuProduk M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M11
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
Status keranjang belanja
Belanja lagi Check out
Gambar 3.63 Perancangan Antar Muka Keranjang Belanja
12. Perancangan antar muka logout
M12
Header
footer Gambar
Selamat datang nama member ·
Klik Home menuju M2 ·
Klik info tentang kami menuju M3
· Klik cara pembelian
menuju M4 ·
Klik cara pembayaran menuju M5
· Klik ubah data pribadi
barng menuju M6 ·
Klik ubah password menuju M7
· Klik pembelian menuju
M8 ·
Klik konfirmasi pembayaran menuju
M9 ·
Klik lretur produk menuju M10
· Klik keranjang belanja
menuju M11 ·
Klik logout menuju M12
· Klik Nama Produk
· Menuju M13
· Klik daftar member
baru menuju P1
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
Member
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang 1.2.3.4...8 next
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M2
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
Email Password
Daftar Member Baru Lupa password
Login :
:
Gambar 3.64 Perancangan Antar Muka Logout
13. Perancangan antar muka nama produk
M13
Header
footer Gambar
Selamat datang nama member ·
Klik Home menuju M2 ·
Klik info tentang kami menuju M3
· Klik cara pembelian
menuju M4 ·
Klik cara pembayaran menuju M5
· Klik ubah data pribadi
barng menuju M6 ·
Klik ubah password menuju M7
· Klik pembelian menuju
M8 ·
Klik konfirmasi pembayaran menuju
M9 ·
Klik lretur produk menuju M10
· Klik keranjang belanja
menuju M11 ·
Klik logout menuju M12
· Klik Nama Produk
· Menuju M13
Cari Berdasarkan Kata
Cari
. Blouse . Celana
. Ciput . Gamis
. Kerudung . Koko
. Mangset . Rok
. Ubah data Pribadi . Ubah password
. Pembelian . Konfirmasi Pembayaran
. Pelacakan Pengiriman . Retur Produk
. Keranjang Belanja . logout
Profil
Kategori produk Produk paling di minanti
Gambar Tambah
Produk Baru Gambar
Tambah
paypal BCA
Mandiri Dukungan pembayaran
Pelayanan Pelanggan sales
JNE TIKI
POS Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang Gambar
Nama Produk Kode Produk
Warna Ukuran
Stok Harga
Detail Tambah Keranjang
Gambar Nama Produk
Kode Produk Warna
Ukuran Stok
Harga Detail
Tambah Keranjang 1.2.3.4...8 next
Tentang Kami Cara Pembelian
Cara Pembayaran Home
Nama Layar : M13
Ukuran Layar : 1024 X 768
Font : Times New Roman
Warna Background : Putih
Gambar 3.65 Perancangan Antar Muka Nama Produk