6. Perancangan antarmuka laporan penjualan F006
LOGO
· Lihat laporan
Header Web beranda | data admin | Laporan penjualan | laporan produk|
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : F006
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
ID admin |
laporan pertanggal | |
| options
cari
Gambar 3.45 Antarmuka Laporan 7. Perancangan antarmuka menambah data admin F008
LOGO
· Klik simpan menambah admin
-untuk menuju F005
Header Web beranda | data admin | Laporan penjualan | laporan produk|
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : F008
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Email : Password :
Nama : Hak akses :
kembali Tambah Data Admin
simpan
Gambar 3. 46 Antarmuka tambah data admin
8. Perancangan antarmuka ubah profil F009
LOGO
· Klik simpan -untuk menuju
F002
Header Web beranda | data admin | Laporan penjualan | laporan produk|
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : F009
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Nama :
Email :
Ubah Profil
simpan
Gambar 3.47 Antarmuka ubah profil
3.7.2.2 Perancangan Antarmuka Petugas
1. Perancangan antarmuka menu petugas G001
LOGO
· Klik member YM untuk menuju
-data memberG002 -data yahoo messenger
G003 · Klik produk untuk
menuju : - data kategori G004
- data merk G005 - data warna G006
- data produk G007 - data detail produk G008
- data gambar G009 · Klik pengiriman
- data jasa pengiriman G010
- data jasa pengiriman G011
- data paket ongkos kirim G012
· Klik provinsi kota -provinsi G013
-kota G014 · Klik Backup restore
- backup - restore
· Klik data testimonial Header Web
beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G001
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Data member Data yahoo
Messenger Data Kategori
Data Merk Data warna
Data produk Data detail produk
Data gambar Data jasa pengirimnan
Data paket pengiriman Data ongkos kirim
Provinsi Kota
Backup Restore
Gambar 3.48 Antarmuka menu petugas
2. Perancangan antarmuka data member G002
LOGO
· Melihat data member
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G002
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Email member | Nama member | alamat | no teleponHP | status member | options |
Data member Cari
Gambar 3.49 Antarmuka data member
3. Perancangan antarmuka data yahoo messenger G003
LOGO
· Melihat data member · Klik tambah yahoo
messenger untuk menambah kontak YM
G015
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G003
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id yahoo messenger | nama kontak YM | ditampilkan | dikelola oleh | options | Tambah yahoo messenger
Cari
Gambar 3.50 Antarmuka data yahoo messenger 4. Perancangan antarmuka kategori G004
LOGO
· Melihat data member · Klik tambah yahoo
messenger untuk menambah kontak YM
G015
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G003
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id yahoo messenger | nama kontak YM | ditampilkan | dikelola oleh | options | Tambah yahoo messenger
Cari
Gambar 3.51 Antarmuka data kategori
5. Perancangan antarmuka merk G005
LOGO
· Melihat data merk · Klik tambah merek untuk
menambah merk G017
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G005
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id merk | nama merk | dikelola oleh | diampilkan | options | Tambah merk
Cari
Gambar 3.52 Antarmuka data merk 6. Perancangan antarmuka warna G006
LOGO
· Melihat data merk · Klik tambah merek untuk
menambah warna G018
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G006
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id warna | nama warna | dikelola oleh | diampilkan | options | Tambah warna
Cari
Gambar 3.53 Antarmuka Datawarna
7. Perancangan antarmuka produk G007
LOGO
· Melihat data produk · Klik tambah produk
untuk menambah produk G019
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G007
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id produk | nama produk | kategori | merk | harga | diskon | ditampilkan | options Tambah produk
Cari
Gambar 3.54 Antarmuka Data Produk 8. Perancangan antarmuka detail produk G008
LOGO
· Melihat data detail produk
· Klik tambah produk untuk menambah detail
produk G020
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G008
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id detail produk | nama produk | warna | stock | ditampilkan | options Tambah data detail produk
Cari
Gambar 3.55 Antarmuka detail produk
9. Perancangan antarmuka gambar G009
LOGO
· Melihat data gambar · Klik tambah produk
untuk menambah detail produk G021
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G009
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id gambar | gambar | produk | judul gambar | options Tambah gambar
Cari
Gambar 3.56 Antarmuka Gambar
10. Perancangan antarmuka jasa pengiriman G010
LOGO
· Melihat data jasa pengiriman
· Klik tambah jasa pengiriman untuk
menambah jasa pengiriman G022
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G010
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id jasa pengiriman | nama jasa pengiriman | dikelola oleh | ditampilkan | options Tambah jasa pengiriman
Cari
Gambar 3.57 Antarmuka jasa pengiriman
11. Perancangan antarmuka paket pengiriman G011
LOGO
· Melihat data jasa pengiriman
· Klik tambah jasa pengiriman untuk
menambah jasa pengiriman G022
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G010
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id jasa pengiriman | nama jasa pengiriman | dikelola oleh | ditampilkan | options Tambah jasa pengiriman
Cari
Gambar 3.58 Antarmuka paket pengiriman
12. Perancangan antarmuka ongkos kirim G012
LOGO
· Melihat data ongkos kirim
· Klik tambah paket pengiriman untuk
menambah ongkos kirim pengiriman G024
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G012
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id ongkos kirim | jasa paket pengiriman | kotakabupaten | ongkos kirim | ditampilkan | options Tambah data ongkos kirim
Cari
Gambar 3.59 Antarmuka Ongkos Kirim
13. Perancangan antarmuka provinsi G013
LOGO
· Melihat data provinsi · Klik tambah provinisi
untuk menambah provinsi G025
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G013
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id provinsi | nama provinsi | dikelola oleh | ditampilkan | options Tambah provinsi
Cari
Gambar 3.60 Antarmuka Provinsi 14. Perancangan antarmuka kota G014
LOGO
· Melihat data kota · Klik tambah kota untuk
menambah kota G026
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G014
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Id kota | nama kota | provinsi | ditampilkan | options Tambah kota
Cari
Gambar 3.61 Antarmuka Kota 15. Perancangan antarmuka Backup G015
LOGO
· Melakukan backup database, file dan
gambar
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G015
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Backup Database : mercuryw_database, file dan gambar Backup Database
Backup File Backup Gambar
Gambar 3.62 Antarmuka Backup
16. Perancangan antarmuka Restore G016
LOGO
· Melakukan restore database .sql
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G016
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Restore Database : mercuryw_database Browse
File backup database .sql Restore database
Gambar 3. 63 Antarmuka restore
17. Perancangan antarmuka testimoni G017
LOGO
· Melihat data testimoni dari member
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G017
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Data Ongkos Kirim cari
Id testi |
pengirim | Komentar |
Tanggal Kirim Testi |
Ditampilkan |
op
Gambar 3.64 Antarmuka testimoni
15. Perancangan antarmuka tambah data yahoo messenger G018
LOGO
ID yahoo messenger : Nama Kontak YM
:
· Melihat data member · Klik kembali untuk
menuju G003
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G018
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Tambah Data Yahoo Messsenger
Gambar 3. 65 Antarmuka tambah data yahoo messenger
16. Perancangan antarmuka tambah kategori G019
LOGO
Nama kategori :
· Melihat data kategori · Klik simpan untuk
menyimpan · Klik kembali untuk
kembali G004
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G019
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan
Gambar 3.66 Antarmuka tambah kategori
17. Perancangan antarmuka tambah merk G020
LOGO
Nama merk :
· Melihat data merk · Klik simpan untuk
menyimpan · Klik kembali untuk
kembali G005
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G020
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan
Gambar 3.67 Antarmuka Tambah merk
18. Perancangan antarmuka tambah warna petugas G021
LOGO
Nama merk :
· Melihat data merk · Klik simpan untuk
menyimpan · Klik kembali untuk
kembali G005
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G021
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan
Gambar 3.68 Antarmuka tambah warna 19. Perancangan antarmuka tambah produk G022
LOGO
Nama merk :
Merk :
Nama produk :
Harga :
Diskon :
BeratKg :
Deskripsi
· Melihat data produk · Klik simpan untuk
menyimpan · Klik kembali untuk
kembali G007
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G022
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Gambar 3.69 Antarmuka Tambah produk
20. Perancangan antarmuka tambah detail produk G023
LOGO
Produk :
Warna :
Stock :
· Melihat data detail produk
· Klik simpan untuk menyimpan
· Klik kembali untuk kembali G008
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G023
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan
Gambar 3.70 Antarmuka Tambah detail produk
21. Perancangan antarmuka tambah gambar G024
LOGO
Produk :
Gambar max 200 KB :
Stock :
· Melihat data detail produk
· Klik simpan untuk menyimpan
· Klik kembali untuk kembali G009
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G024
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan browse
Gambar 3.71 Antarmuka tambah gambar
22. Perancangan antarmuka tambah jasa pengiriman G025
LOGO
Nama jasa pengiriman :
· Melihat data jasa pengiriman
· Klik simpan untuk menyimpan
· Klik kembali untuk kembali G010
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G025
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali Simpan
Gambar 3.72 Antarmuka tambah jasa pengiriman
23. Perancangan antarmuka tambah paket pengiriman G026
LOGO
Nama jasa pengiriman :
Nama paket :
· Melihat data paket pengiriman
· Klik simpan untuk menyimpan
· Klik kembali untuk kembali G011
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G026
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan
Gambar 3.73 Antarmuka tambah paket pengiriman
24. Perancangan antarmuka tambah ongkos kirim G027
LOGO
Jasa pengiriman :
Paket :
Provinsi :
Pilih | kotakabupaten
Jumlah kota dipilih :
Ongkos kirim :
· Melihat data ongkos kirim
· Klik simpan untuk menyimpan
· Klik kembali untuk kembali G012
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G027
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali Simpan
Gambar 3. 74 Antarmuka tambah ongkos kirim
25. Perancangan antarmuka tambah provinsi G028
LOGO
Nama provinsi :
· Melihat data provinsi · Klik simpan untuk
menyimpan · Klik kembali untuk
kembali G013
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G028
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali
Simpan
Gambar 3.75 Antarmuka tambah provinsi
26. Perancangan antarmuka tambah kota G029
LOGO
provinsi :
Nama kota :
· Melihat data kota · Klik simpan untuk
menyimpan · Klik kembali untuk
kembali G014
Header Web beranda | member YM | produk | pengiriman | provinsi Kota| backup restore | data testimonial |
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : G029
Selamat datang, …. Anda login sebagai petugas
Ubah profil | ubah password|logout Logo
Kembali Simpan
Gambar 3.76 Antarmuka tambah provinsi
3.7.2.3 Perancangan Antarmuka Kasir
1. Perancangan antarmuka halaman menu kasir K001
LOGO
· Klik Data admin untuk menuju
· Ubah profil F009 · Ubah
passwordF0010 · -data
adminF005 · -ubah password
· F004 · Klik logout akan
menuju ke Form loginF001
· Klik Data Transaksi akan menuju form
data transaksi K002
· Klik Data Retur akan menuju form
data retur K004
Header Web beranda | Data transaksi | Data retur
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : K001
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Gambar 3.77 Antarmuka menu kasir 2. Perancangan antarmuka halaman pengolahan data transaksiK002
LOGO
· Klik Data admin untuk menuju
· Ubah profil F009 · Ubah
passwordF0010 -data adminF005
-ubah password F004
· Klik logout akan menuju ke Form
loginF001 · Klik Data Transaksi
akan menuju form data transaksi
K002 · Klik Data Retur
akan menuju form data retur K004
· Klik editi akan menuju form data
edit transaksi K003
Header Web beranda | Data transaksi | Data retur
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : K002
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Data Transaksi
Nomor Pesanan Nama Pemesan
Tanggal Pesan Tanggal Expired
Edit | Label
Status Aksi
Status Pengiriman
Lihat Berdasarkan Status : Urutkan Dari :
cari
Gambar 3.78 Antarmuka pengolahan data transaksi
3. Perancangan antarmuka halaman edit data transaksiK003
LOGO
· Klik Data admin untuk menuju
· Ubah profil F009 · Ubah
passwordF0010 -data adminF005
-ubah password F004
· Klik logout akan menuju ke Form
loginF001 · Klik Data Transaksi
akan menuju form data transaksi
K002 · Klik Data Retur
akan menuju form data retur K004
Header Web beranda | Data transaksi | Data retur
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : K003
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Data Transaksi
Data Pemesanan
Nomor Pesanan :
Tanggal Dipesan : Tanggal Expired :
Status Pesanan : Detail Pemesanan
Nama Produk BeratKG
QTY Diskon
Harga Subtotal
Total Rp. : Ongkos Kirim Rp. :
Total Berat : Total Ongkos Kirim Rp. :
Total Bayar Rp. :
Data Member
Nama Member :
Email :
Alamat :
No Telepon :
Pembayaran
Tanggal Bayar :
Jenis Pembayaran : Jumlah Bayar
: Atas Nama
: No Transaksi
:
Pengiriman
Tanggal Kirim :
Tanggal Terima :
Nama Pemerima :
No Telepon :
Alamat :
Status Pengiriman :
simpan kembali
Gambar 3.79 Antarmuka Edit Transaksi 4. Perancangna antarmuka halaman pengolahan data returK004
LOGO
· Klik Data admin untuk menuju
· Ubah profil F009 · Ubah
passwordF0010 -data adminF005
-ubah password F004
· Klik logout akan menuju ke Form
loginF001 · Klik Data Transaksi
akan menuju form data transaksi
K002 · Klik Data Retur
akan menuju form data retur K004
· Klik Edit akan menuju form edit
returK005
beranda | Data transaksi | Data retur
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : K004
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Data Retur
Lihat Berdasarkan Status : Urutkan Dari :
Nomor Retur Nomor Pesanan
Tanggal Terima Pesanan
Tanggal Retur Status Retur
Aksi
Edit
Gambar 3.80 Antarmuka Pengolahan Data Retur 5. Perancangan antarmuka halaman edit data returK005
LOGO
· Klik Data admin untuk menuju
· Ubah profil F009 · Ubah
passwordF0010 · -data
adminF005 · -ubah password
· F004 · Klik logout akan
menuju ke Form loginF001
· Klik Data Transaksi akan menuju form
data transaksi K002
· Klik Data Retur akan menuju form
data retur K004
Header Web beranda | Data transaksi | Data retur
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : K005
Selamat datang, …. Anda login sebagai pemilik
Ubah profil | ubah password|logout Logo
Retur Produk
Nama Produk Merk
Warna Quantity Retur
Alasan Keterangan
simpan kembali
Nomor Pesanan :
Tanggal Produk Diterima :
Tanggal Retur Produk :
Nama Penerima :
Alamat Penerima :
Status Retur :
Gambar 3.81 Antarmuka edit retur
3.7.2.4 Perancangan Antarmuka Pengunjung
1. Perancangan Antarmuka Beranda P01
LOGO
· Klik Beranda menuju ke P01.
· Klik Tentang Kami menuju ke P02.
· Klik Cara Pesan dan Bayar untuk
menuju ke P03. · Klik Cari untuk
mencari produk berdasarkan
keyword dan menuju ke P04.
· Klik login untuk melakukan login
dan menuju ke M01.
· Klik kategori untuk menuju ke P05.
· Klik detail untuk menuju ke P06.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P01
Beranda
Cari Search
Keranjang – 0 Produk
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Produk Terbaru Produk Terlaris
Produk Banyak Dilihat Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk
Lihat Lihat
Lihat Lihat
Lihat Lihat
Lihat Lihat
Testimonial Info Kurs Dollar
Hubungi Kami ID Yahoo
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar 3.82 Peracangan Antarmuka Beranda 2. Perancangan Antarmuka Tentang Kami P02
LOGO
· Klik Beranda menuju ke P01.
· Klik Tentang Kami menuju ke P02.
· Klik Cara Pesan dan Bayar untuk
menuju ke P03. · Klik Cari untuk
mencari produk berdasarkan
keyword dan menuju ke P04.
· Klik login untuk melakukan login
dan menuju ke M01.
· Klik kategori untuk menuju ke P05.
· Klik detail untuk menuju ke P06.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P02 Beranda
Cari Search
Keranjang – 0 Produk
konten
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Testimonial Info Kurs Dollar
Hubungi Kami ID Yahoo
Gambar 3.83 Peracancangan Antarmuka Tentang Kami 3. Perancangan Antarmuka Cara Pesan dan Bayar P03
LOGO
·
Klik Beranda menuju ke P01.
·
Klik Tentang Kami menuju ke P02.
·
Klik Cara Pesan dan Bayar untuk menuju
ke P03.
·
Klik Cari untuk mencari produk
berdasarkan keyword dan menuju
ke P04.
·
Klik login untuk melakukan login dan
menuju ke M01.
·
Klik kategori untuk menuju ke P05.
·
Klik detail untuk menuju ke P06.
·
Klik lupa password untuk menuju ke P07.
·
Klik daftar untuk menuju ke P08.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P03
Beranda
Cari Search
Keranjang – 0 Produk
konten
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Testimonial Info Kurs Dollar
Hubungi Kami
ID Yahoo Cara pemesanan dan pembayaran
Gambar 3.84 Perancangan Antarmuka Cara Pesan dan Bayar 4. Perancangan Antarmuka Hasil Pencarian P04
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P03
· Klik Beranda menuju ke P01.
· Klik Tentang Kami menuju ke P02.
· Klik Cara Pesan dan Bayar untuk menuju
ke P03. · Klik Cari untuk
mencari produk berdasarkan
keyword dan menuju ke P04.
· Klik login untuk melakukan login dan
menuju ke M01. · Klik kategori untuk
menuju ke P05. · Klik detail untuk
menuju ke P06. · Klik Lupa Password
untuk menuju P07. · Klik Daftar untuk
menuju ke P08.
LOGO
Beranda
car i
Searc h
Keranjang – 0 Produk | Total :
Rp.0,-
Hasil Pencarian
Hubungi Kami Login
Logi n
Email : Password
:
Lupa Password | Daftar ?
Kategori
Info Kurs Dollar ID Yahoo
text
Cara Pesan dan Bayar
Tentang Kami
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Halaman
Beranda
Cari Search
Keranjang – 0 Produk
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P04
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar 3. 85 Perancangan Antarmua Hasil Pencarin 5. Perancangan Antarmuka Produk Per Kategori P05
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P03
·
Klik Beranda menuju ke P01.
·
Klik Tentang Kami menuju ke P02.
·
Klik Cara Pesan dan Bayar untuk menuju ke
P03.
·
Klik Cari untuk mencari produk berdasarkan
keyword dan menuju ke P04.
·
Klik login untuk melakukan login dan
menuju ke M01.
·
Klik kategori untuk menuju ke P05.
·
Klik detail untuk menuju ke P06.
·
Klik Lupa Password untuk menuju P07.
·
Klik Daftar untuk menuju ke P08.
LOGO
Beranda
car i
Searc h
Keranjang – 0 Produk | Total :
Rp.0,-
kategori
Hubungi Kami Login
Logi n
Email : Password
:
Lupa Password | Daftar ?
Kategori
Info Kurs Dollar
ID Yahoo text
Cara Pesan dan Bayar
Tentang Kami
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Halaman
Beranda
Cari Search
Keranjang – 0 Produk
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P05
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar 3. 86 Perancangan Antarmuka Produk Per Kategori 6. Perancangan Antarmuka Lihat Detail Produk P06
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P03 ·
Klik Beranda menuju ke P01.
·
Klik Tentang Kami menuju ke P02.
·
Klik Cara Pesan dan Bayar untuk menuju ke
P03.
·
Klik Cari untuk mencari produk berdasarkan
keyword dan menuju ke P04.
·
Klik login untuk melakukan login dan
menuju ke M01.
·
Klik kategori untuk menuju ke P05.
·
Klik detail untuk menuju ke P06.
·
Klik Lupa Password untuk menuju P07.
·
Klik Daftar untuk menuju ke P08.
LOGO
Beranda
car i
Searc h
Keranjang – 0 Produk | Total :
Rp.0,-
detail produk
Hubungi Kami Login
Logi n
Email : Password
:
Lupa Password | Daftar ?
Kategori
Info Kurs Dollar ID Yahoo
text
Cara Pesan dan Bayar
Tentang Kami
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Gambar Produk
Beranda
Cari Search
Keranjang – 0 Produk
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P06
Gambar Produk
Gambar Produk
Gambar Produk
Deskripsi produk
Gambar 3.87 Perancangan Antarmuka Lihat Detail Produk 7. Perancangan Antarmuka Lupa Password P07
Tiga Negeri Music House
Beranda
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Member Lupa Password :
Hubungi Kami Login
Login Email :
Password :
Lupa Password | Daftar ?
Kategori
Info Kurs Dollar ID Yahoo
text
Cara Pesan dan Bayar Tentang Kami
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Masukan Email Anda Code Captcha
Code captcha Kirim
Beranda
Cari Search
Keranjang – 0 Produk
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P06
·
Klik Beranda menuju ke P01.
·
Klik Tentang Kami menuju ke P02.
·
Klik Cara Pesan dan Bayar untuk menuju ke P03.
·
Klik Cari untuk mencari produk berdasarkan keyword dan menuju
ke P04.
·
Klik login untuk melakukan login dan menuju ke M01.
·
Klik kategori untuk menuju ke P05.
·
Klik detail untuk menuju ke P06.
·
Klik Lupa Password untuk menuju P07.
·
Klik kirim untuk mengirim password.
· Klik Daftar untuk menuju ke P08
Gambar 3.88 Perancangan Antarmuka Lupa Passwor 8. Perancangan Antarmuka Pendaftaran Member P08
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : P06
· Klik Beranda menuju ke P01.
· Klik Tentang Kami menuju ke P02.
· Klik Cara Pesan dan Bayar untuk menuju ke P03.
· Klik Cari untuk mencari produk berdasarkan
keyword dan menuju ke P04.
· Klik login untuk melakukan login dan menuju ke M01.
· Klik kategori untuk menuju ke P05.
· Klik detail untuk menuju ke P06.
· Klik Lupa Password untuk menuju P07
· Klik daftarkan saya untuk melakukan proses
pendaftaran.. · Klik Daftar untuk menuju
ke P08.
Tiga Negeri Music House
Beranda
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Pendaftaran Member
Hubungi Kami Login
Login Email :
Password :
Lupa Password | Daftar ?
Kategori
Info Kurs Dollar
ID Yahoo text
Cara Pesan dan Bayar Tentang Kami
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Email Password
Ulangi Password Nama Lengkap
Alamat Provinsi
Kota Kodepos
No Telepon Code Captcha
Syarat dan ketentuan
Daftarkan Saya
Persyaratan menjadi member
Saya setuju dengan syarat dan ketentuan Code
captcha
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Login Email :
Password :
Cara Pesan dan Bayar Tentang Kami
Kategori Daftar
Lupa Password
Gambar 3.89 Perancangan Antarmuka Pendaftaran Member
3.7.2.5 Perancangan Antarmuka Member
1. Perancangan Antarmuka Beranda Member M01
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M01
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik lihat untuk menuju M13.
·
Klik
keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Tiga Negeri Music House
Beranda
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Produk Terbaru
Produk Terlaris
Produk Banyak Dilihat Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Gambar
produk Cara Pesan dan Bayar
Tentang Kami
Lihat Lihat
Lihat Lihat
Lihat
Lihat Lihat
Lihat
History Pemesanan Klaim Retur
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Info Kurs Dollar
Gambar produk
Lihat
Gambar produk
Lihat Selamat Datang,
Nama member
Profil | Logout?
Hubungi Kami ID Yahoo
text
text Detail
ID Yahoo text
Testimonial text
Detail
Gambar 3.90 Perancangan Antarmuka Beranda Member 2. Perancangan Antarmuka History Pemesanan M02
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M02
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik bayar untuk menuju M03.
·
Klik detail untuk menuju M04.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
History Pemesanan
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Page
No Pesanan
Tanggal Dipesan Batas Tanggal
Bayar Status Pesanan
Status Pengiriman
Aksi
Bayar Bayar
Bayar Bayar
Detail Detail
Detail Detail
Member Selamat Datang,
Nama member
Profil | Logout?
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Gambar 3.91 Perancangan Antarmuka History Pemesanan
3. Perancangan Antarmuka Pembayaran Pesanan M03
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M03
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik konfirmasi untuk melakukan konfirmasi pembayaran.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju
M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Pembayaran Pesanan No :
Hubungi Kami Kategori
Info Kurs Dollar
ID Yahoo text
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Jenis Pembayaran :
Transfer bank
Total Pembayaran :
Jenis Transfer :
No. Rekening :
Transfer dari Bank :
Tujuan No. Rekening : Atas Nama
:
Konfirmasi : teks
Tanggal Pembayaran : Uang yg Ditransfer
:
Member
Selamat Datang, Nama member
Profil | Logout?
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Gambar 3.92 Perancangan Antarmuka Pembayaran Pesanan Offline Payment
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M04
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Tiga Negeri Music House
footer
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Detail Pemesanan
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Data Pemesanan
Nomor Pesanan : Tanggal Dipesan :
Tanggal Expired : Status Pesanan :
Detail Pemesanan Nama Produk
BeratKG QTY
Diskon Harga
Subtotal Pembayaran
Tanggal Bayar :
Jenis Pembayaran :
Jumlah Bayar :
Atas Nama : No Transaksi
: Pengiriman
Tanggal Kirim :
Tanggal Terima :
Nama Pemerima :
No Telepon :
Alamat :
Penerima Barang :
Total Rp. : Ongkos Kirim Rp. :
Total Berat : Total Ongkos Kirim Rp. :
Total Bayar Rp. : Status Pengiriman
: No Resi
: Member
Selamat Datang, Nama member
Profil | Logout?
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar
Tentang Kami Kategori
History Pemesanan
Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Gambar 3.93 Perancangan Antarmuka Detail Pemesanan 5. Perancangan Antarmuka Klaim Retur M05
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M05
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Retur Produk
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Nomor Pesanan Aksi
Tanggal Pesan Tanggal terima
Keterangan :
Retur
Member Selamat Datang,
Nama member
Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar 3.94 Perancangan Antarmuka Klaim Retur
6. Perancangan Antarmuka Detail Retur M06
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M06
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Detai Retur Pesanan :
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Nomor Pesanan :
Tanggal Klaim Retur :
Status Retur :
Nama produk merk
Warna Quantity Retur
Alasanan Member
Selamat Datang, Nama member
Profil | Logout?
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Gambar 3. 95 Perancangan Antarmuka Detail Retur 7. Perancangan Antarmuka Tentang Kami M07
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M07
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Sekilas Tentang Kami
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Teks
Member Selamat Datang,
Nama member
Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar 3. 96 Perancangan Antarmuka Tentang Kami
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M08
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Cara Pemesanan dan Pembayaran
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Teks
Member Selamat Datang,
Nama member
Profil | Logout?
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Gambar 3.97 Perancangan Antarmuka Cara Pesan dan Bayar 9. Perancangan Antarmuka Profil M09
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik ubah profil untuk menuju ke M10.
·
Klik ubah password untuk menuju ke M11
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M09
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Profil Member
Hubungi Kami Login
Login Email :
Password :
Lupa Password | Daftar ?
Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Nama Lengkap : teks
Alamat
: teks
Provinsi : teks
Kode Pos : teks
Kota : teks
No. Telepon : teks
Email : teks
Ubah Password Ubah Profil
Member Selamat Datang,
Nama member
Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar 3. 1 Perancangan Antarmuka Profil
10. Perancangan Antarmuka Ubah Profil M10
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik simpan untuk menyimpan perubahan
profil.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M10
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Profil Member
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Nama Lengkap
teks
Alamat
Alamat
Provinsi : teks
Kode Pos : teks
Kota : teks
No. Telepon : teks
simpan
Email : teks
Member Selamat Datang,
Nama member
Profil | Logout?
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Gambar 3. 99 Perancangan Antarmuka Ubah Profil 11. Perancangan Antarmuka Ubah Password M11
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik simpan untuk menyimpan perubahan
password.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M11
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Ubah Password Member
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Password Baru teks
Ulang Password : teks
simpan
Password Lama : teks
Member Selamat Datang,
Nama member
Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar 3. 100 Perancangan Ubah Password
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik lihat untuk menuju ke M13.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M12
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Hasil Pencarian
Hubungi Kami Kategori
Info Kurs Dollar
ID Yahoo text
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member
Selamat Datang, Nama member
Profil | Logout?
Halaman
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar 3. 101 Perancangan Antarmuka Hasil Pencarian 13. Perancangan Antarmuka Detail Produk M13
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M13
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik beli produk untuk menuju ke M14.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Detail Produk
Hubungi Kami Kategori
Info Kurs Dollar
ID Yahoo text
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member
Selamat Datang, Nama member
Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar Produk
Gambar Produk
Gambar Produk
Gambar Produk
Deskripsi produk Beli Produk
Gambar 3.102 Perancangan Antarmuka Detail Produk
14. Perancangan Antarmuka Keranjang BelanjaM14
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju ke M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik lanjutkan belanja untuk menuju ke M01.
·
Klik checkout untuk menuju ke M15.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M14
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Keranjang Belanja
Hubungi Kami Kategori
Info Kurs Dollar
ID Yahoo text
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member
Selamat Datang, Nama member
Profil | Logout?
Checkout
Nama barang Warna
Jumlah Subtotal
Aksi
Total bayar
Lanjutkan Belanja
X X
X
Merk Harga
Keterangan :
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Total Berat
Gambar 3. 103 Perancangan Antarmuka Keranjang Belanja 15. Perancangan Antarmuka Pengisian Data Shipping M15
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik simpan transaksi untuk proses
penyimpanan data pemesanan dan menuju
ke M16.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M15
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Pengisian Data Pengiriman
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member Selamat Datang,
Nama member
Profil | Logout?
Keterangan : Alamat sesuai profil
Alamat lain
Nama lengkap No. Telp HP
Provinsi Kabupaten
Alamat Kodepos
Jasa Pengiriman Jenis Paket
Tarif PengirimanKg
Simpan Transaksi
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar 3.104 Perancangan Antarmuka Pengisian Data Shipping
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M16
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Pengisian Data Pengiriman
Hubungi Kami Kategori
Info Kurs Dollar
ID Yahoo text
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member
Selamat Datang, Nama member
Profil | Logout? Nama Penerima
: teks
Alamat Penerima Alamat Penerima
: teks : teks
teks Nama Produk
Merk Warna
Harga Jumlah
Subtotal Total Rp. :
Ongkos Kirim Rp. : Total Berat :
Total Ongkos Kirim Rp. : Total Bayar Rp. :
Catatan Syarat ketentuan
SEGERA LAKUKAN PEMBAYARAN KE SALAH SATU PEMBAYARAN DIBAWAH INI BCA
Bayar Sekarang Menggunakan PayPal PAYPAL
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Gambar 3.105 Perancangan Atarmuka Simpan Transaksi 17. Perancangan Antarmuka Produk Per Kategori M17
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik lihat untuk menuju M13.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M17
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Kategori
Hubungi Kami Kategori
Info Kurs Dollar ID Yahoo
text Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member Selamat Datang,
Nama member
Profil | Logout?
Halaman Hubungi Kami
Info Kurs Dollar ID Yahoo
text Testimonial
text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar produk
Lihat
Gambar 3.106 Perancangan Antarmuka Produk Per Kategori
18. Perancangan Antarmuka Testimonial M18
·
Klik Beranda untuk menuju ke M01.
·
Klik History Pemesanan untuk menuju ke M02.
·
Klik klaim retur untuk menuju ke M05.
·
Klik tentang kami untuk menuju ke M07.
·
Klik cara pesan dan bayar untuk menuju ke M08.
·
Klik profil untuk menuju M09.
·
Klik logout untuk menuju P01.
·
Klik cari untuk menuju M12.
·
Klik keranjang untuk menuju M14.
·
Klik kategori untuk menuju M17.
·
Klik detail untuk menuju M18.
Ukuran 1366 X 768, Tampilan disesuaikan dengan skin, Font Arial 14, Nama Form : M18
Tiga Negeri Music House
cari Search
Keranjang – 0 Produk | Total : Rp.0,-
Testimonial
Hubungi Kami Kategori
Info Kurs Dollar
ID Yahoo text
Testimonial
text
Kategori Kategori
Kategori Kategori
Detail
Beranda Cara Pesan dan Bayar
Tentang Kami History Pemesanan
Klaim Retur
Member
Selamat Datang, Nama member
Profil | Logout?
Testimonial Testimonial
Testimonial
Halaman
Tambah Testimonial
Hubungi Kami Info Kurs Dollar
ID Yahoo text
Testimonial
text
Detail
Beranda
Cari Search
Keranjang – 0 Produk
Cara Pesan dan Bayar Tentang Kami
Kategori History
Pemesanan Klaim Retur
Selamat Datang, Nama member
Edit Profil | Logout?
Gambar 3.107 Perancangan Antarmuka Testimonial
3.7.2.6 Perancangan pesan
dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi e- comerce pada Toko UNIQUE. Adapun tampilan pesan yang ada adalah
sebagai berikut :
3.8 Jaringan Simantik
Jaringan sematik digunakan untuk menghubungkan setiap tampilan dan pesan pada sebuah aplikasi yang dirancang. Jaringan semantik
sistem yang akan dibangun di bedakan sesuai dengan jenis penggunanya yaitu, pemilik , petugas, kasir, member dan pengunjung.
Maaf username atau password yang anda masukan salah
PS01 PSO1
Username harus disi
PS02
Password harus diisi
PS03
Format email salah
PS04
Email yang anda masukan tidak ada dalam database
PS05
Password baru telah kami kirimkan ke email anda, silakan buka email
Anda
PS06
Field ini wajib diisi
PS07
Password invalid
PS08
Password valid
PS09
Pa ja g i i al x karakter
PS10
Perubaha data x berhasil disi pa
PS11
[data] [nama] berhasil disimpan
PS12
Kategori belum dipilih
PS14
Provinsi belum dipilih
PS15
Keranjang Belanja Anda Masih Kosong
PS16
anda belum melakukan aktivasi akun
PS17
maaf akun anda sudah di non aktifkan
PS18
Selamat [nama member], anda sudah terdaftar pada situs kami,
silahkan melakukan aktivasi akun yang telah kami kirimkan ke alamat
email anda.
PS20
Maaf jumlah yang dibeli untuk [nama produk] warna [nama warna]
melebihi stok yang ada
PS21
Ongkos kirim belum tersedia
PS22
Maaf Belum Ada Produk Yang Dapat Diretur
PS24
[nama field] tidak boleh kosong
PS25
Apakah anda yakin untuk menghapus [data] [nama] ?
PS13
ya batal
Maaf anda belum login
PS19
ok
Jumlah produk [nama produk] dengan warna [nama warna] yang dibeli melebihi stok tersedia
Catatan: Jika jumlah produk lebih besar dari stok, jumlah diupdate ke stok yang tersedia
Jika stok produk telah habis, produk dihapus dari pesanan [nama] sudah ada dalam database
PS26 PSO2
PSO3 PSO4
PSO5 PSO6
PSO7 PSO8
PSO9 PS10
PS11 PS12
PS13 PS14
PS15 PS16
PS17 PS18
PS19 PS20
PS21 PS22
PS24 PS25
PS23 PS26
Maaf Data Tidak Ditemukan.
PS26 PS27
1. Jaringan Simantik Pemilik
Berikut dapat dilihat jaringan semantik manager dari aplikasi e- commerce toko Unique pemilik.
Gambar 3. 109 Jaringan Simantik Pemilik
F001 F002
F006 F014
F007
F003 F008
F010 F009
F012 F013
F011 F005
FOO4 PS04,PS05,PS06
PS01.PS02, PS03 P12,P24,P26
P11,P24,P26 PS07,PS11
PS08,PS09, PS10,PS11
2. Jaringan Simantik Petugas
Berikut dapat dilihat jaringan semantik manager dari aplikasi e- commerce toko Unique petugas.
Gambar 3.110 Jaringan Semantik Petugas
F002
F001
G001 G044
G003
G005 G043
G004 G017
G016 G006
G015
G012 G011
G010 G009
G008 G013
G007
G014 G002
PS01.PS02, PS03 PS04,PS05,PS06
G030
G045 G018
G031 G019
G032 G020
G033
G021 G034
G022 G035
G023 G036
G024 G037
G025 G038
G026 G039
G027 G040
G028 G041
G029 G042
PS12 PS11
PS12 PS11
PS12 PS11
PS12 PS11
PS12,PS14
PS11 PS12
PS11 PS11
PS12 PS11
PS12 PS12
PS11 PS12
PS11 PS12
PS11 PS12,PS15
PS11 PS13,PS27
PS13,PS27
PS13,PS27 PS13,PS27
PS13,PS27
PS13,PS27 PS13,PS27
PS13,PS27 PS13,PS27
PS13,PS27 PS13,PS27
PS13,PS27 PS07,PS11
PS08,PS09, PS10,PS11
PS11
PS11 G046
G047 G048
PS12 PS11
3. Jaringan Simantik kasir
Gambar 3.111 Jaringan Semantik Kasir
F002
F001
K001 K002
K004
K007 K006
K005 K003
PS11 PS04,PS05,PS06
PS01.PS02, PS03
PS07,PS11 PS08,PS09,
PS10,PS11 PS11
4. Jaringan Semantik pada Pengunjung
Gambar 3.112 Jaringan Semantik Pengunjung
P09
PO1 M01
P02
P03
P04
P05
P06 P07
P08
PS06,PS07, PS08,PS09,PS10,PS15
PS20,PS25,PS26 PS01,PS02,PS03,
PS04PS17, PS18,PS19
PS27 PS27
5. Jaringan Semantik pada Member
Gambar 3.113 Jaringan Semantik Member
3.9 Perancangan procedural
Perancangan procedural merupakan perancangan yang dilakukan untuk menetapkan detail algoritma yang akan dinyatakan kedalam suatu
system.
M01 M19
M18
M13 M05
M14 M17
M12 M09
P01
M08 M02
M07 M03
M04
M06
M10 M11
M15
M16 PS25
PS07,PS11
PS08,PS09, PS10,PS11
PS25 PS24
PS21,PS23,PS16 PS27
PS27 PS25
3.6.5 Perancangan Prosedural Login User
Tampil kesalahan username dan password
yang dimasukkan salah mulai
Masukkan username
dan password
Cek username dan password
Apakah valid ? tidak
Masuk ke halaman Administrator
ya
selesai
Gambar 3. 114 Flowchart Login User
