Perancangan Antar Muka Pengunjung

Antar muka pesanan ubah password Administrator A62 A62 Logo Katalog Profil Backup database Restore database Maintenance Produk Penjualan Pengiriman retur Laporan Pesanan Retur Transaksi Kategori Produk Provinsi Kota Jasa Pengiriman Ongkos kirim Testimonial Member Kategori Berita Berita Profil Ubah Password Logout footer Ubah Password Password lama : Password baru : Retype password : Update Ulang Navigasi : 1.Klik tombol kategori menuju tampilan A03 2. Klik tombol produk menuju tampilan A06 3.Klik tombol provinsi menuju tampilan A13 4.Klik tombol kota menuju tampilan A16 5.Klik tombol Jasa pengiriman menuju tampilan A19 6.Klik tombol Ongkos kirim menuju tampilan A22 7.Klik tombol Testimonial menuju tampilan A25 8.Klik tombol Member menuju tampilan A28 9.Klik tombol Kategori Berita menuju tampilan A30 10.Klik berita menuju tampilan A33 11.Arahkan kursor di pesanan, menampilkan menu pesanan belum lunas A37, belum dikonfirmasi A38, dikonfirmasi A39, lunas A40, dikirim A41, diterima A42. 12. Arahkan kursor di retur, menampilkan menu retur baru A43, retur diterima toko A44, retur dikirim A45, diterima customer A46. 13. Klik tombol Laporan produk menuju tampilan A47 14.Klik tombol Laporan Penjualan menuju tampilan A49 15.Klik tombol Laporan Pengiriman menuju tampilan A51 16. Klik tombol Laporan retur menuju tampilan A53 17. arahkan kursor di backup database , menampilkan menu backup database A55, image produk A56, image berita A57, Aplikasi A58. 18. Klik tombol Restore database menuju tampilan A59 19. Klik tombol Profil menuju tampilan A60 20. Klik tombol Ubah Password menuju tampilan A61 21. Klik tombol Logout menuju tampilan A62 22. form isian dikosongkan, menuju tampilan pesan PS04 22. form isian kurang dari 8 karakter, menuju PS07 23. Klik tombol update menuju tampilan PS05 24. Klik tombol ulang mereset semua karakter Gambar 3.83 Tampilan Ubah Password Administrator

1. Perancangan Antar Muka Pengunjung

Antar muka home pengunjung P01 P12 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Produk Serupa image image image image image image image image Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon IMAGE Detail Produk image image image Nama Produk Harga Pokok : Diskon : Harga Diskon : Spesifikasi Produk Kode : Ukuran : Berat : Deskripsi Rating : 05 Add to chart Gambar 3.84 Tampilan Beranda Pengunjung Antar muka Produk P02 P02 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER All Produk image image image image image image image image Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Cara Belanja Pembayaran Pengiriman Retur Testimonial Keranjang Belanja Pengukuran Gambar 3.85 Tampilan Produk Antar muka profil P03 P03 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Profil” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Profil Teks Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.86 Tampilan Profil Antar muka cara belanja P04 P04 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Cara Belanja Teks Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.87 Tampilan Cara Belanja Antar muka cara pembayaran P05 P05 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Cara pembayaran Teks Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.88 Tampilan Cara Pembayaran Antar muka cara pengiriman P06 P06 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Cara Pengiriman Teks Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.89 Tampilan Cara Pengiriman Antar muka produk cara retur P07 P06 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Cara Pengiriman Teks Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.90 Tampilan Produk Cara Retur Antar muka cara pengukuran P08 P08 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Cara Pengukuran Teks Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.91 Tampilan Cara Pengukuran Antar muka daftar member P09 P09 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Pendaftaran Nama Depan Nama Belakang Jenis Kelamin Pria Wanita Alamat Kodepos Provinsi Kota Telepon Email Password Masukkan kode Yang ditampilkan captcha Daftar Cara Belanja Pembayaran Pengiriman Retur Pengukuran Gambar 3.92 Tampilan Daftar Member Antar muka login P10 P10 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Produk Lainnya image image image image image image image image Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Login Anda harus menjadi anggota untuk mulai menggunakan fasilitas login ini. Email Password Lupa Password ? Registrasi Login Gambar 3.93 Tampilan Login Antar muka kategori P11 P11 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Produk Lainnya image image image image image image image image Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon image Nama Produk Harga Awal Harga Diskon image Nama Produk Harga Awal Harga Diskon image Nama Produk Harga Awal Harga Diskon image Nama Produk Harga Awal Harga Diskon Produk Info Gambar 3.94 Tampilan Kategori Antar muka detail produk P12 P12 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “Daftar” untuk menuju P08 9. Klik tombol “Login” untuk menuju P09 10. Klik tombol “kategori” untuk menuju P10 11. Klik link “nama produk” untuk menuju P11 LOGO Header Cari Berdasarkan cari Kategori Member IP : Browser : OS : Customer Service Berita FOOTER Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Produk Serupa image image image image image image image image Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon IMAGE Detail Produk image image image Nama Produk Harga Pokok : Diskon : Harga Diskon : Spesifikasi Produk Kode : Ukuran : Berat : Deskripsi Rating : 05 Add to chart Gambar 3.95 Tampilan Detail Produk

3.1 Perancangan Antar Muka Member

Antar muka beranda member setelah login M01 M01 Navigasi : 1. Klik tombol “Beranda” untuk menuju P01 2. Klik Tombol “Produk” untuk menuju P02 3. Klik tombol “Keranjang Belanja” untuk menuju P03 4. Klik tombol “Cara Belanja” untuk menuju P04 5. Klik tombol “Cara Pembayaran” untuk menuju P05 6. Klik tombol “Cara Pengiriman” untuk menuju P06 7. Klik tombol “Panduan Retur” untuk menuju P07 8. Klik tombol “kategori” untuk menuju P10 9. Klik link “nama produk” untuk menuju P11 10. Klik link “profil” untuk menuju M03 11. Klik link “ubah password” untuk menuju M04 12. Klik link “testimonial” untuk menuju M05 13. Klik link “Keranjang belanja” untuk menuju M06 14. Klik link “riwayat pesanan” untuk menuju M07 LOGO Header Cari Berdasarkan cari Kategori Profil Ubah password Testimonial Keranjang Belanja Riwayat pesanan Logout Customer Service Berita FOOTER IMAGE Produk Lainnya image image image image image image image image Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Nama Produk Harga Awal Harga Diskon Keranjang Belanja Produk Terlaris image Nama Produk Harga Awal Harga Diskon Produk Paling Banyak Dilihat image Nama Produk Harga Awal Harga Diskon Temukan kami di facebook Home Profil Bantuan Produk Daftar Login Testimonial Keranjang Belanja Member Gambar 3.96 Tampilan Beranda Member