III.2 Perancangan Sistem
III.2.5. Perancangan antar muka
III.2.5.2. Antar Muka Konsumen
1. Form antarmukaIndex Konsumen (K01)
2. Form antarmuka belanja konsumen (K02) K02 (HEADER) (FOOTER) (GAMBAR PRODUK) (GAMBAR PRODUK) Nama Produk Kategori Harga Stok Produk Qty Keterangan Beli Produk Page 1 of n 1 n >> Gambar Produk Terlaris
Enter Text Enter Text Cari
Nama Produk Kategori Harga Stok Produk Qty Keterangan Beli Produk Logout
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untuk menuju K07
8. Klik gambar link | Item produk| untuk menuju K03A atau K03B 9. Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
Produk Kategori * Teks Kategori * Teks Kategori
Link Gamar Keranjang
3. Form antarmuka keranjang padasaat kosong (K03A) K03A (HEADER) (FOOTER) Produk Kategori * Teks Kategori
* Teks Kategori Contin Jaket Motosport
Gambar Produk Terlaris
Logout
Keranjang anda masih kosong
Gambar LInk
1. Klik Index untuk menjuju K03 2. Klik Belanja untuk menuju K04 3. Klik Keranjang untuk menuju K05A 4. Klik Histori untuk menuju K06A atau KO6B
5. Klik Kontak untuk menuju K07 6. Klik Berita untuk menuju K08 7. Klik Text Kategori untuk menuju K09
8. Klik gambar link | Item produk| untuk menuju K05A
9. Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
Link Gamar Keranjang
4. Form antarmuka keranjang padasaat tidak kosong (K03B)
K03B
(HEADER)
INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
(FOOTER) Produk Kategori
Nama Produk Harga(Rp) Jumlah Total(Rp) Diskon(Rp) Hapus * Teks Kategori
* Teks Kategori Contin Jaket MotoSport
Gambar Produk Terlaris Logout Ubah Sub Total (Rp) Ongkos Kirim (Rp) Total Bayar (Rp) Chekout Tambah Batal Apabila anda ingin mnegubah jumlah, klik buton ubah terlebih dahulu
Icon Link
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03B 4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untu menuju K07 8. Klik gambar link | Item produk| untuk menuju K03B
9. Klik button “ubah” untuk menuju K011
10. Klik icon link hapus untuk menuju K03A
10. Klik button “tambah produk” untuk menuju K02
11. Klik button “batal” untuk menuju K03A
12. Klik button “checkout” untuk menuju K012
14. Klik Text Logout untuk menuju P01
Link Gamar Keranjang
5. Form antarmuka histori belanja padasaat kosong (K04A)
K04A
(HEADER)
(FOOTER) Produk Kategori
Id Pembelian Tanggal Total Pembelian(Rp) Status Bayar Status Kirim Detail * Teks Kategori
* Teks Kategori Histori Pembelian Konsumen
Gambar Produk Terlaris
Logout Selamat Datang
1. Klik Index untuk menuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau K03B
5. Klik Histori untuk menuju K04A 6. Klik Kontak untuk menuju K05 7. Klik Berita untuk menuju K06 8. Klik Text Kategori untuk menuju K07
9. Klik Text |item produk| untuk menuju K03A atau K03B 10. Klik Text Logout untuk menuju P01
INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA Link Gamar Keranjang
6. Form antarmuka histori belanja padasaat tidak kosong (K04B)
K04B
(HEADER)
(FOOTER) Produk Kategori
Id Pembelian Tanggal Total Pembelian(Rp) Status Bayar Status Kirim Detail * Teks Kategori
* Teks Kategori Histori Pembelian Konsumen
Gambar Produk Terlaris
Logout Selamat Datang
Icon Link
1. Klik Index untuk menuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau K03B
5. Klik Histori untuk menuju KO4B 6. Klik Kontak untuk menuju K05 7. Klik Berita untuk menuju K06 8. Klik Text Kategori untuk menuju K07
9. Klik Text |produk| “pada saat produk kosong” untuk menuju K03A atau K03B
11. Klik icon detail untuk menuju K013
12. Klik Text Logout untuk menuju P01
INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA Link Gamar Keranjang
7. Form antarmuka kontak konsumen (K05A) K05 (HEADER) (FOOTER) LOGIN Produk Kategori Kontak CV.Contingent * Teks Kategori * Teks Kategori Username : Password : Login
Contin Jaket MotoSport
Lupa pasword
Gambar Produk Terlaris
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untu menuju K07 8. Klik Text |item produk untuk menuju K03A atau K03B
9. Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI KONTAK BERITA
Link Gamar Keranjang
8. Form antarmuka berita konsumen (K06)
K06
(HEADER)
(FOOTER)
Tanggal Suting
Contin Jaket MotoSport
Gambar Produk Terlaris Brand Baru Gambar Berita Terbaru Text Berita Logout
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untu menuju K07 8. Klik Link gambar |item produk| untuk menuju K03A atau K03B Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
Produk Kategori * Teks Kategori * Teks Kategori
Link Gamar Keranjang
9. Form antarmuka produk kategori (K07) K07 (HEADER) (FOOTER) (GAMBAR PRODUK) (GAMBAR PRODUK) Nama Produk Kategori Harga Stok Produk Qty Diskon Keterangan Beli Produk Page 1 of n 1 n >> Gambar Produk Terlaris Nama Produk Kategori Harga Stok Produk Qty diskon Keterangan Beli Produk Logout
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau K03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untuk menuju K07
8. Klik link gambar |Item produk| untuk menuju K03A atau K03B 9. Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
MotoSport Kategori Contin Produk Kategori * Teks Kategori * Teks Kategori Link Gamar Keranjang
10.Form antarmuka ganti password (K08)
11.Form antarmuka konfirmasi pembayaran transfer bank (K09)
K09
(HEADER)
(FOOTER)
Konfirmasi Pembayaran dengan transfer Bank
Gambar Produk Terlaris
Logout
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untu menuju K07 8. Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
Produk Kategori * Teks Kategori * Teks Kategori
ID Pembelian : Nama Pemilik Rekening Dibayar dari No rekening Pembayaran Melalui Bank Kode trasnfer Tanggal Kirim Enter Text Enter Text Enter Text Enter Text Enter Text Enter Text Konfirmasi
12.Form antarmuka tracking pengiriman (K010)
` K010
(HEADER)
(FOOTER) Contin Jaket MotoSport
Gambar Produk Terlaris
Logout
Enter Text Serch
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untu menuju K07 8. Klik Text Logout untuk menuju P01 INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
Produk Kategori * Teks Kategori * Teks Kategori
Jne Airwail Bil Number :
13.Form antarmuka ubah jumlah pembelian (K011)
K011
(HEADER)
INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA
(FOOTER) Produk Kategori
Nama Produk Harga(Rp) Jumlah Total(Rp) Diskon(Rp) Hapus * Teks Kategori
* Teks Kategori Contin Jaket MotoSport
Gambar Produk Terlaris Logout Ubah Sub Total (Rp) Ongkos Kirim (Rp) Total Bayar (Rp)
Apabila anda ingin mnegubah jumlah, klik buton ubah terlebih dahulu
Icon Link
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau K03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untu menuju K07 8. Gambar Link hapus untuk menuju K03A
9. Gambar Link |Item produk| untuk menuju K03B
10. Klik button “ok” untuk menuju K03B
11. Klik Text Logout untuk menuju P01
Link Gamar Keranjang
14. Form antarmuka pengiriman (K12)
k012
(HEADER)
INDEX BELANJA KERANJANG HISTORI KONTAK BERITA
(FOOTER) PENGIRIMAN 1. NAMA KONSUMEN: 2. ALAMATt : 3. KABUPATEN/KOTA 4. KODE POS 5. TELP Jika Anda mengisi ke alamat yang lain silahkan isi data di bawah ini: 6. PROVINSI 7. KOTA 8. ALAMAT 9. KODE POS 10 TELP 11. JASA PENGIRIMAN 12. TOTAL BERAT PRODUK 13. JASA KIRIM
Enter Text
Enter Text
Checkout
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untuk menuju K07 8. Klik Checkout untuk menuju K014 9. Klik Text Logout untuk menuju P01
Enter Text Enter Text Enter Text Enter Text Enter Text Enter Text
15.Form antarmukadetail pembelian (K13)
K013
(HEADER)
(FOOTER) Produk Kategori
Id Pembelian Nama Produk Harga Jumlah Ongkos Jasa Kirim Kode Kirim Sub Total Total
* Teks Kategori
* Teks Kategori Dtail Pembelian Konsumen
Gambar Produk Terlaris
Logout Selamat Datang
Contin MotoSport
Kembali
1. Klik Index untuk menuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau K03B
5. Klik Histori untuk menuju K04A atau KO4B
6. Klik Kontak untuk menuju K05 7. Klik Berita untuk menuju K06 8. Klik Text Kategori untuk menuju K07
9. Klik Text |item produk| “pada saat produk kosong” untuk menuju K03A atau K03B
10. Klik butun kembali untuk menuju K04A atau KO4B
11. Klik Text Logout untuk menuju P01
INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA Link Gamar Keranjang
16.Form antarmukapembayaran (K14)
K014
(HEADER)
(FOOTER) Produk Kategori
Nama Produk Harga(Rp) Jumlah Total(Rp) Diskon(Rp) * Teks Kategori
* Teks Kategori Silahkan pilh Metode Pembayaran di bawah ini untuk melakukan transaksi
Gambar Produk Terlaris Logout Sub Total (Rp) Ongkos Kirim (Rp) Total Bayar (Rp) Batal Link Paypal
Order Reset
1. Klik Index untuk menuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau K03B
4. Klik Histori untuk menuju K04A atau KO4B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untuk menuju K07
8. Klik Text |produk| “pada saat produk kosong” untuk menuju K03A atau K03B
9. Klik buton kembali untuk menuju K05A
10. Klik buton order untuk menuju K015
10. Klik Text Logout untuk menuju P01
Gambar BNI Gambar BCA
BNI BCA No rekening No rekening
Payment
INDEX BELANJA KERANJANG HISTORI DAFTAR BERITA Link Gamar
Keranjang
17.Form antarmukaorder bank (K15)
k015
(HEADER)
INDEX BELANJA KERANJANG HISTORI KONTAK BERITA
(FOOTER) Contin Jaket Motor Sport
1. NAMA KONSUMEN: 2. ALAMATt : 3. KABUPATEN/KOTA 4. KODE POS 5. NO TELP 6. JASA KIRIM
1. Klik Index untuk menjuju K01 2. Klik Belanja untuk menuju K02 3. Klik Keranjang untuk menuju K03A atau k03B
4. Klik Histori untuk menuju K04A atau KO64B
5. Klik Kontak untuk menuju K05 6. Klik Berita untuk menuju K06 7. Klik Text Kategori untuk menuju K07 8. Klik Text Logout untuk menuju P01 Terima kasih atas pemesanannya
Id pembelian anda :
Nama Produk Harga(Rp) Jumlah Total(Rp) Diskon(Rp)
Sub Total (Rp) Ongkos Kirim (Rp) Total Bayar (Rp)
Anda telah melakukan pesanan ini sales kami akan segera akan melakukan proses pengiriman setelah andamengkonfirmasi dalam melakukan pembayaran ke :
Nama Bank : No rekening : Atas nama