Perancangan Antarmuka Member Perancangan Basis Data

3.5.5 Perancangan Antarmuka Member

1. Perancangan Antarmuka Beranda Berikut dapat dilihat perancangan antarmuka beranda dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.46 dibawah ini: G01 Gambar Header Beranda © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Produk Terbaru Gambar Keterangan detail Gambar Keterangan Gambar Keterangan Produk Terlaris Gambar Keterangan Gambar Keterangan Gambar Keterangan Produk Terbanyak Dilihat Gambar Keterangan Gambar Keterangan Gambar Keterangan detail detail detail detail detail detail detail detail Selamat Datang Nama Member | Keluar Folow us : facebook Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Gambar 3.46 Perancangan Antarmuka Beranda 2. Perancangan Antarmuka Hubungi Kami Berikut dapat dilihat perancangan antarmuka hubungi kami dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.47 dibawah ini: G02 Gambar Header Beranda Hubungi Kami © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Nama Pesan kirim Email Telepon HUBUNGI KAMI Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Gambar 3.47 Perancangan Antarmuka Hubungi Kami 3. Perancangan Antarmuka Cara Pemesanan Berikut dapat dilihat perancangan antarmuka cara pemesanan dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.48 dibawah ini: G03 Gambar Header Beranda Cara Pemesanan © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Folow us : facebook CARA PEMESANAN Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Gambar 3.48 Perancangan Antarmuka Cara Pemesanan 4. Perancangan Antarmuka Cara Pembayaran Berikut dapat dilihat perancangan antarmuka cara pembayaran dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.49 dibawah ini: G04 Gambar Header Beranda Cara Pembayaran © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar My Account Ubah Profil Ganti Password Data Pembelian Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Folow us : facebook Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Nama Member CARA PEMBAYARAN Gambar 3.49 Perancangan Antarmuka Cara Pembayaran 5. Perancangan Antarmuka Logout Berikut dapat dilihat perancangan antarmuka logout dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.50 dibawah ini: G05 Gambar Header Beranda Logout © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Logout Lupa Password? Login Email Password Anda telah keluar Login Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Gambar 3.50 Perancangan Antarmuka Logout 6. Perancangan Antarmuka Keranjang Belanja Berikut dapat dilihat perancangan antarmuka keranjang belanja dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.51 dibawah ini: G06 Gambar Header Beranda Keranjang © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Keranjang Belanja Nama Produk Harga Jumlah Berat Diskon Stok Sub Total Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Gambar 3.51 Perancangan Antarmuka Keranjang Belanja 7. Perancangan Antarmuka Ubah Profil Berikut dapat dilihat perancangan antarmuka ubah profil dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.52 dibawah ini: G07 Gambar Header Beranda Ubah Profil © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Ubah Profil Nama Email Provinsi Kota Alamat Telepon Simpan Kode Pos Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Ubah Profil Ubah Pasword Gambar 3.52 Perancangan Antarmuka Ubah Profil 8. Perancangan Antarmuka Ubah Password Berikut dapat dilihat perancangan antarmuka ubah Password dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.53 dibawah ini: G08 Gambar Header Beranda Ubah Password © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Ubah Password Password Lama Password Baru Konfirmasi Password Baru Simpan Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Ubah Profil Ubah Pasword Gambar 3.53 Perancangan Antarmuka Ubah Password 9. Perancangan Antarmuka Riwayat Pembelian Berikut dapat dilihat perancangan antarmuka riwayat pembelian dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.54 dibawah ini: Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar G09 Gambar Header Beranda Riwayat Pembelian © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Riwayat Pembelian No. Invoice Tanggal Total Harga Status Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Gambar 3.54 Perancangan Antarmuka Riwayat Pembelian 10. Perancangan Antarmuka Cari Berikut dapat dilihat perancangan antarmuka cari dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.55 dibawah ini: G10 Gambar Header Beranda Cari © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Hasil Pencarian = nama barang Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Gambar Keterangan Detail Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Gambar 3.55 Perancangan Antarmuka Cari 11. Perancangan Info Member Berikut dapat dilihat perancangan antarmuka Info Member dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.56 dibawah ini: G11 Gambar Header Beranda Cari © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Info member Nfo Member Ubah Profil Ubah Pasword Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur Gambar 3.56 Perancangan Antarmuka Info Member 12. Perancangan Info Retur Pembelian Berikut dapat dilihat perancangan antarmuka Info Retur Pembelian dari pembangunan aplikasi e-commerce di toko dbeauty shop yang tercantum pada gambar 3.57 dibawah ini: G12 Gambar Header Beranda Cari © 2011 Dbeauty Shop Oriflame Swedish Cosmetics Klik Beranda Menuju G01 Klik Hubungi Kami Menuju G02 Klik Cara Pemesanan Retur Menuju G03 Klik Cara Pembayaran Menuju G04 Klik Logout Menuju G05 Klik Keranjang Belanja Menuju G06 Klik Ubah Profil Menuju G07 Klik Edit Password Menuju G08 Klik Riwaya Pembelian Menuju G09 Klik Cari Menuju G10 Selamat Datang Nama Member | Keluar Folow us : facebook Info retur Pembelian Keranjang Belanja Pencarian Cari Item Keterangan Lihat keranjang belanja JNE Tracking Masukan Nomor Airwaybill JNE : Cari Gambar JNE Contact Sales Kami Siap Melayani Anda Kami menerima Gambar Gambar Kategori produk Nama Produk Nama Produk Gambar Beranda Hubungi Kami Cara Pemesanan Cara Pembayaran Info Member Riwayat Pesanan Info Retur No.invoice Tanggal retur Jumlah retur Status Detail Gambar 3.57 Perancangan Antarmuka Info Retur Member

3.5.6 Perancangan Antarmuka Pengurus