Perancangan Antarmuka Pengunjung dan Member
6 Perancangan Antarmuka Menu Cara Pembayaran
T06 Header
Pencarian Home
Keranjang Belanja
Facebook
Footer Produk
Register Kontak
About
BCA Paypal
Cara Pembayaran Image
Produk diskon
Custmer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Menu kategori
Twitter Login
Gambar 3.32 Perancangan Antarmuka Menu Cara Pembayaran 7 Perancangan Antarmuka Menu Syarat Kondisi
T07 Header
Pencarian Home
Keranjang Belanja
Facebook
Footer Produk
Register Kontak
About Syarat Kondisi
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Menu kategori
Twitter Login
Gambar 3.33 Perancangan Antarmuka Menu Syarat Kondisi
8 Perancangan Antarmuka Home Member
T08 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About Image
Image Image
Image Image
Image Image
Image Image
Image Image
Image Image
Image Image
Image Tampilan produk terbaru
Menu Member Imag
e Imag
e Imag
e Imag
e
Gambar 3.34 Perancangan Antarmuka Home Member 9 Perancangan Antarmuka Detail Produk
T09 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About Image
Beli Id Produk
Kategori Harga
Diskon Ukuran
Stok Qty
F T Image
Image Image
Produk Sejenisnya Menu Member
Imag e
Imag e
Imag e
Imag e
Gambar 3.35 Perancangan Antarmuka Detail Produk
10 Perancangan Antarmuka Edit Profil
T10 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About
Simpan Ubah Data Member
Nama
Provinsi Kota
Alamat Email
Telepon Batal
Kode Pos Konfirmasi Password Baru
Password Baru Password Lama
Menu Member Imag
e Imag
e Imag
e Imag
e
Gambar 3.36 perancangan Antarmuka Edit Profil 11 Perancangan Antarmuka Menu Data History Pembelian
T11 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About History Pembelian
Id_pembelian Tanggal Total bayar
Status Detail
Menu Member Ima
ge Ima
ge Ima
ge Ima
ge
Gambar 3.37 perancangan Antarmuka Menu Data History Pembelian
12 Perancangan Antarmuka Menu Keranjang Belanja
T12 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About Kerangjang Belanja
ID | Nama | Size | Harga | Diskon | DiskonRp | Berat | QTY | Total | Action |
Subtotal Belanja Lagi
Checkout Menu Member
Ima ge
Ima ge
Ima ge
Ima ge
Gambar 3.38 perancangan Antarmuka Menu Keranjang Belanja 13 Perancangan Antarmuka Form Pengiriman
T13 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About Form Pengiriman
Menu Member Ima
ge Ima
ge Ima
ge Ima
ge Gunakan Data akun
Tulis Baru Nama Penerima
Alamat No Telepon
Kodepos Provinsi
Kota Jasa Pengiriman
Jenis Pengiriman
OK text
Gambar 3.39 Perancangan Antarmuka Form Pengiriman
14 Perancangan Antarmuka Form Pembayaran
T14 Header
Pencarian Home
Keranjang Belanja Facebook
Footer Produk
History retur
Member Kontak
Image Produk diskon
Customer Service Tracking JNE
· Klik Home meuju T01
· Klik Produk menuju
T02 ·
Klik Register menuju T03
· Klik Kontak menuju
T04 ·
Klik About menuju T05 ·
Klik Cara pembayarant menuju
T06 ·
Klik Syarat Kondisi menuju T07
Ukuran layar : default 1017 x 800 px Font size : Arial
Cara pembayaran
Syarat Konisi
Twitter Retur
About Form Pembayaran
ID Pembelian : Member :
E-Mail : Alamat :
Detail Pengiriman Menu Member
Ima ge
Ima ge
Ima ge
Ima ge
Id produk | Nama | Size | Harga | Diskon | DiskonRp. | Berat | QTY | Total
Selesai Batal
Gambar 3.40 perancangan Antarmuka Form Pembayaran 15 Perancangan Antarmuka Form LoginAdmin
Footer Ukuran layar : default 1017 x 800 px
Font size : Arial ·
Klik Login menuju A02
Pesan: ·
Jika login tidak valid muncul pesan M01
A01
Username Password
Login
Administrator
Gambar 3.41 Perancangan Antarmuka Form Login Admin
16 Perancangan Antarmuka Home Admin
T17 Halaman Admin
Header Home
Footer Data master
Transaski Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
A02 ·
Klik Data Master, produk menuju A03
· Klik Transaksi Menuju
A04 ·
Klik Retur menuju Edit produk menuju
A12 ·
Klik Buku Tamu menuju A13
· Klik Back Up menuju
A14 ·
Klik Restore menuju A15
· Klik Laporan menuju
A16 ·
Klik Logout menuju A01
A02
Back Up Restore
Gambar 3.42 Perancangan Antarmuka Home Admin 17 Perancangan Antarmuka Menu Data Master
T17 Selamat datang admin
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik Admin menuju
A03 ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
· Klik Kembali menuju
A02 A03
Kota Jasa Kirim
Kecamatan
Gambar 3.43 Perancangan Antarmuka Menu Data Master
18 Perancangan Antarmuka Menu Transaksi
T17 Header
Admin
Footer Data Master
transaksi Retur
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik Admin menuju
A02 ·
Klik Data master menuju A03
· Klik Transaksi menuju
A04 ·
Klik Retur menuju A12
· Klik Laporan menuju
A16 ·
Klik Logout menuju A01
A04
Manajemen Transaksi Pembelian
No. | ID Pembelian | Tanggal Beli | Id Member | Nama Member | Alamat Pengiriman | Jenis Pembayaran | Total Bayar | Status | Pilihan
Gambar 3.44 Perancangan Antarmuka Menu Transaksi 19 Perancangan Antarmuka Menu Kategori
T17 Header
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik Kategori menuju
A05 ·
Klik Produk menuju A06
· Klik Member menuju
A07 ·
Klik Provinsi menuju A08
· Klik Kota menuju A09
· Klik Kecamatan
menuju A17 ·
Klik Jasa Kirim menuju A10
· Klik Ongkos kirim
menuju A11 A05
Kota Jasa Kirim
No. | Nama Kategori | Pilihan Tambah Kategori
Kecamatan
Gambar 3.45 Perancangan Antarmuka Menu Kategori 20 Perancangan Antarmuka Menu Manajemen Produk
Header
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
A06
Kota Jasa Kirim
No. | Id Produk | Nama Produk | Harga | Kategori | Pilihan Tambah Produk
Gambar Pencarian
Cari
Kecamatan ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
Gambar 3.46 Perancangan Antarmuka Menu Manajemen Produk 21 Perancangan Antarmuka Menu Manajemen Member
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
A07
Kota Jasa Kirim
No. | Nama | Kota | Telepon | Email | Status | Pilihan Tambah Member
Kecamatan ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
Gambar 3.47 Perancangan Antarmuka Menu Kategori 22 Perancangan Antarmuka Menu Manajemen Provinsi
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
A08
Kota Jasa Kirim
No. | Provinsi | Pilihan Tambah Provinsi
Pencarian Cari
Manajemen Provinsi
Kecamatan ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
Gambar 3.48 Perancangan Antarmuka Menu Manajemen Produk 23 Perancangan Antarmuka Menu Manajemen Kota
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
A09
Kota Jasa Kirim
No. | Kota | Provinsi | Pilihan Tambah Kota
Pencarian Cari
Manajemen Kota
Kecamatan ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
Gambar 3.49 Perancangan Antarmuka Menu Manajemen Kota 24 Perancangan Antarmuka Menu Manajemen Jasa Kirim
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
A10
Kota Jasa Kirim
No. Nama Jasa Kirim | Deskripsi | Pilihan Tambah Jasa Kirim
Manajemen Jasa Kirim
Kecamatan ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
Gambar 3.50 Perancangan Antarmuka Menu Manajemen Jasa Kirim 25 Perancangan Antarmuka Menu Manajemen Ongkos Kirim
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
A11
Kota Jasa Kirim
No. | Kota | Provinsi | Pengiriman | Ongkos Kirim | Pilihan Tambah Ongkos Kirim
Manajemen Ongkos Kirim Pencarian
Cari
Kecamatan ·
Klik Kategori menuju A05
· Klik Produk menuju
A06 ·
Klik Member menuju A07
· Klik Provinsi menuju
A08 ·
Klik Kota menuju A09 ·
Klik Kecamatan menuju A17
· Klik Jasa Kirim
menuju A10 ·
Klik Ongkos kirim menuju A11
Gambar 3.51 Perancangan Antarmuka Menu Manajemen Ongkos Kirim
26 Perancangan Antarmuka Menu Retur
T17 Header
Footer transaksi
Retur Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik Transaksi menuju
· Klik Data Master
menuju A04 ·
Klik Retur menuju A12
· Klik Buku Tamu
menuju A13 ·
Klik Laporan menuju A16
· Klik Logout menuju
A02 A12
Retur Pembelian
No. | ID Retur | ID Pembelian | ID Member | TGL KIRIM | No Resi Kirim | TGL Retur | No Resi Retur | Status | Pilihan
Gambar 3.52 Perancangan Antarmuka Menu Retur 27 Perancangan Antarmuka Menu Buku Tamu
T17 Header
Footer transaksi
Retur Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
A13
Manajemen Buku Tamu
No. | Nama | Email | Tanggal | Pilihan ·
Klik Transaksi menuju ·
Klik Data Master menuju A04
· Klik Retur menuju
A12 ·
Klik Buku Tamu menuju A13
· Klik Laporan menuju
A16 ·
Klik Logout menuju A02
Gambar 3.53 Perancangan Antarmuka Menu Retur 28 Perancangan Antarmuka Menu Backup
T17 Header
Footer Laporan
Logout Ukuran layar : default 1017 x 800 px
Font size : Arial ·
Klik Backup Menuju A14
· Klik Restore menuju
A15 ·
Klik Laporan menuju A16
A14
Backup Restore
Backup
Database Gambar Produk
File System Klik Untuk Memulai
Backup Database Backup Database
Klik Untuk Memulai Backup Gambar Produk
Backup Gambar Klik Untuk Memulai
Backup File System Backup File System
Gambar 3.54 Perancangan Antarmuka Menu Backup 29 Perancangan Antarmuka Menu Restore
T17 Header
Footer Laporan
Logout Ukuran layar : default 1017 x 800 px
Font size : Arial A15
Backup Restore
Restore
Database Gambar Produk
File System Klik Untuk Memulai
Restore Database Restore Database
Klik Untuk Memulai Restore Gambar Produk
Restore Gambar Klik Untuk Memulai
Restore File System Restore File System
· Klik Backup Menuju
A14 ·
Klik Restore menuju A15
· Klik Laporan menuju
A16 ·
Klik Logout menuju A01
Gambar 3.55 Perancangan Antarmuka Menu Restore 30 Perancangan Antarmuka Menu Laporan
T17 Header
Footer transaksi
Retur Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
A16
Laporan
Produk Penjualan
Retur Barang ·
Klik Transaksi menuju ·
Klik Data Master menuju A04
· Klik Retur menuju
A12 ·
Klik Buku Tamu menuju A13
· Klik Laporan menuju
A16 ·
Klik Logout menuju A02
Gambar 3.56 Perancangan Antarmuka Menu Laporan