Perancangan Antarmuka Pengunjung dan Member
4 Perancangan Antarmuka Menu Kontak
T04 Header
Pencarian Home
Keranjang Belanja
Facebook
Footer Produk
Register Kontak
About Image
Produk diskon
Coustemer Service MANDIRI
PAYPAL Tracking JNE
Pembyaran ·
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
Hubungi Kami Captcha
Kirim Nama
Email Komentar
Kode Captcha
Gambar 3.30 Perancangan Antarmuka Menu Kontak
5 Perancangan Antarmuka Menu About
T05 Header
Pencarian Home
Keranjang Belanja
Facebook
Footer Produk
Register Kontak
About Image
Produk diskon
Coustemer Service MANDIRI
PAYPAL Tracking JNE
Pembyaran ·
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
Tentang Yafie Clothing
Gambar 3.31 Perancangan Antarmuka Menu About
6 Perancangan Antarmuka Menu Cara Pembayaran
T06 Header
Pencarian Home
Keranjang Belanja
Facebook
Footer Produk
Register Kontak
About
MANDIRI Paypal
Cara Pembayaran Image
Produk diskon
Coustemer Service MANDIRI
PAYPAL Tracking JNE
Pembyaran ·
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
Coustemer Service MANDIRI
PAYPAL Tracking JNE
Pembyaran ·
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
Coustemer 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
Coustemer 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
Coustemer 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
Coustemer 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
Coustemer 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
Coustemer 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
Coustemer 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 Retur
Buku Tamu
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 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
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 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 home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A03
Kota Jasa Kirim
Gambar 3.43 Perancangan Antarmuka Menu Data Master
18 Perancangan Antarmuka Menu Transaksi
T17 Header
Admin
Footer Data Master
transaksi Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A04
Backup Restore
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
Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A05
Kota Jasa Kirim
No. | Nama Kategori | Pilihan Tambah Kategori
Gambar 3.45 Perancangan Antarmuka Menu Kategori
20 Perancangan Antarmuka Menu Manajemen Produk
Header Admin
Footer Kategori
Produk Member
Provinsi
Ongkos Kirim kembali
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A06
Kota Jasa Kirim
No. | Id Produk | Nama Produk | Harga | Kategori | Pilihan Tambah Produk
Gambar Pencarian
Cari
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
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A07
Kota Jasa Kirim
No. | Nama | Kota | Telepon | Email | Status | Pilihan Tambah Member
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
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A08
Kota Jasa Kirim
No. | Provinsi | Pilihan Tambah Provinsi
Pencarian Cari
Manajemen Provinsi
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
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A09
Kota Jasa Kirim
No. | Kota | Provinsi | Pilihan Tambah Kota
Pencarian Cari
Manajemen Kota
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
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A10
Kota Jasa Kirim
No. Nama Jasa Kirim | Deskripsi | Pilihan Tambah Jasa Kirim
Manajemen Jasa Kirim
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
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A11
Kota Jasa Kirim
No. | Kota | Provinsi | Pengiriman | Ongkos Kirim | Pilihan Tambah Ongkos Kirim
Manajemen Ongkos Kirim Pencarian
Cari
Gambar 3.51 Perancangan Antarmuka Menu Manajemen Ongkos Kirim
26 Perancangan Antarmuka Menu Retur
T17 Header
Admin
Footer Data Master
transaksi Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A12
Backup Restore
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
Admin
Footer Data Master
transaksi Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A13
Backup Restore
Manajemen Buku Tamu
No. | Nama | Email | Tanggal | Pilihan
Gambar 3.53 Perancangan Antarmuka Menu Retur
28 Perancangan Antarmuka Menu Backup
T17 Header
Admin
Footer Data Master
transaksi Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 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
Admin
Footer Data Master
transaksi Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 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
Gambar 3.55 Perancangan Antarmuka Menu Restore
30 Perancangan Antarmuka Menu Laporan
T17 Header
Admin
Footer Data Master
transaksi Retur
Buku Tamu
Laporan Logout
Ukuran layar : default 1017 x 800 px Font size : Arial
· Klik home menuju
T12 ·
Klik data master, produk mnuju T13
· Tambah produk
menuju T14 ·
Edit produk menuju T15
· Detail produk menuju
T16 ·
Tambah detail produk menuju T17
· Transaksi menuju
T18 ·
Berita menuju T19 ·
Kontak menuju T20 ·
Laporan Produk menuju T21
· Laporan Transaksi
menuju T22 A16
Backup Restore
Laporan
Produk Penjualan
Retur Barang
Gambar 3.56 Perancangan Antarmuka Menu Laporan