Perancangan Antarmuka Member Struktur Menu Admin

5. Perancangan Antarmuka Halaman About M05 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M05 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total Text keterangan tentang aplikasi eCommerce di Distro Garsy Bandung Gambar about us Gambar 3. 49Tampilan Antarmuka Halaman About Member 6. Perancangan Antarmuka Halaman Cara Belanja M07 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M07 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG CARA BERBELANJA DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Kurs Dollar Nilai kurs rupiah terhadap dollar Testimoni Isi testimoni Gambar 3. 50 Tampilan Antarmuka Halaman Cara Belanja Member 7. Perancangan Antarmuka Halaman Cara Pembayaran M08 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG CARA DAN METODE PEMBAYARAN UNTUK MEMBER DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Gambar 3. 51 Tampilan Antarmuka Halaman Cara Pembayaran Member 8. Perancangan Antarmuka Halaman Syarat dan Kondisi M09 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M09 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Gambar 3. 52 Tampilan Antarmuka Halaman Syarat Kondisi Member 9. Perancangan Antarmuka Halaman Why Us M10 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M10 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG ALASAN KENAPA HARUS MEMILIH UNTUK BERBELANJA DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG Gambar 3. 53 Tampilan Antarmuka Halaman Why Us Member 10. Perancangan Antarmuka Halaman Detail Produk M11 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M08 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total TEXT KETERANGAN TENTANG SYARAT DAN KONDISI YANG BERLAKU DI SITUS ECOMMERCE DI DISTRO GARSY BANDUNG HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M11 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART menuju M14. FOOTER Keranjang Belanja Pembelian Total GAMBAR PRODUK DETAIL Nama Produk Overview DESKRIPSI DETAIL PRODUK Idproduk Merek Kategori Harga Diskon Size Qty Add To Cart Gambar 3. 54 Tampilan Antarmuka Halaman Detail Produk Member 11. Perancangan Antarmuka Halaman Edit Member M12 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M12 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik ADDTOCART ATAU KLIK GAMBAR menuju M11. FOOTER Keranjang Belanja Pembelian Total Nama Email Simpan Password Alamat Provinsi Kota Kode pos Telepon v v Batal Gambar 3. 55 Tampilan Antarmuka Halaman Edit DataMember 12. Perancangan Antarmuka Halaman History Pembelian M13 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M13 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik detail menuju Form M15. FOOTER Keranjang Belanja Pembelian Total Id_Pembelian Tanggal Total Bayar Status [id_pembelian] [tanggal] [ Rp.xxxxx] [ststus] …. …. ….. ….. detail detail Gambar 3. 56 Tampilan Antarmuka Halaman History Pembelian Member 13. Perancangan Antarmuka Halaman Pemesanan M14 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M14 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik Lanjut Belanja menuju Form M02. Klik Checkout menuju Form M16. FOOTER Keranjang Belanja Pembelian Total Id Nama Size Harga Diskon Diskon Rp Berat Qty Total Action [.] [nama] [size][ Rp.xx] [x] [Rp.xx] [x gr] [ x ] [Rp.xx] …. …. ….. ….. u x u x Lanjut Belanja Checkout Gambar 3. 57 Tampilan Antarmuka Halaman Pemesanan Member 14. Perancangan Antarmuka Halaman History Detail Pembelian M15. HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M15 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. FOOTER Keranjang Belanja Pembelian Total Id Nama Size Harga Diskon Diskon Rp Berat Qty Total [.] [nama] [size][ Rp.xx] [x] [Rp.xx] [x gr] [ x ] [Rp.xx] …. …. ….. ….. Subtotal : Total Diskon : Total Ongkos kirim : Total Bayar : .: Data Alamat Pengiriman :.. Status Pembayaran : [ status ] No. pesanan : [ id_pembelian ] Alamat member member Gambar 3. 58 Tampilan Antarmuka Halaman detail History Pembelian 15. Perancangan Antarmuka Halaman Data Pengiriman M16 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M16 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik OK menuju Form M17 FOOTER Keranjang Belanja Pembelian Total NamaPenerima Alamat OK Telepon Kode pos Provinsi Kota v v Gambar 3. 59 Tampilan Antarmuka Halaman Data Pengiriman 16. Perancangan Antarmuka Halaman Pembayaran M17 HEADER Cara Belanja Cara Pembayaran Syarat Kondisi Why Us Merek Teks Merek Teks Merek Kategori Teks Kategori Teks Kategori Teks Kategori Teks Kategori Produk Terbaru Gambar Produk PENCARIAN HOME PRODUK MEMBER KONTAK ABOUT LOGOUT Special Offer Gambar Produk Costumer Service Telepon Alamat GAMBAR YM SMS JUDUL HALAMAN M17 Klik HOME menuju ke Form M01. Klik PRODUK menuju ke Form M02. Klik MEMBER menuju ke Form M03. Klik KONTAK menuju ke Form M04. Klik ABOUT menuju ke Form M05. Klik CARA BELANJA menuju ke Form M07. Klik CARA PEMBAYARAN menuju ke Form M08. Klik SYARAT KONDISI menuju ke Form M09. Klik WHY US menuju ke Form M10. Klik Selesai menuju Form M13. Klik Batal membatalkan pembelian FOOTER Keranjang Belanja Pembelian Total Id Nama Size Harga Diskon Diskon Rp Berat Qty Total [.] [nama] [size][ Rp.xx] [x] [Rp.xx] [x gr] [ x ] [Rp.xx] …. …. ….. ….. Subtotal : Total Diskon : Total Ongkos kirim : Total Bayar : .: Data Alamat Pengiriman :.. No. pesanan : [ id_pembelian ] Alamat member member .: Pilihan Metode Pembayaran yang bisa dilakukan:.. Selesai Batal Gambar 3. 60 Tampilan Antarmuka Halaman Pembayaran

c. Perancangan Antarmuka Admin

1. Perancangan Antarmuka Login Admin A01 Klik Login untuk masuk sebagai admin, jika login valid menuju Form A04. Jika login invalid menuju Form A02. Login Admin gambar Usrename : Password : Login A01 Gambar 3. 61Tampilan Antarmuka Login Admin 2. Perancangan Antarmuka Gagal Login Admin A02 Klik Login untuk masuk sebagai admin, jika login valid menuju Form A04 Jika login invalid menuju Form A02. Klik Lupa Password menuju Form A03 Login Admin gambar Usrename : Password : Login A02 Pesan Kesalahan Login Lupa password Gambar 3. 62 Tampilan Antarmuka Gagal Login Admin 3. Perancangan Antarmuka Lupa Password Admin A03 Klik kirim Password Untuk request Password Baru. Login Admin gambar Email : Kirim Password A03 Gambar 3. 63 Tampilan Antarmuka Lupa Password Admin 4. Perancangan Antarmuka Halaman Utama Home A04 Klik HOME menuju Form A04. Klik ADMIN menuju Form A05 Klik KATEGORI menuju Form A06. Klik PRODUK menuju Form A07. Klik MEMBER menuju Form A08 Klik PROVINSI menuju Form A09. Klik KOTA menuju Form A10. Klik TRANSAKSI menuju Form A11 Klik LAPORAN menuju Form A12. Klik BERITA menuju Form A13. Klik BUKU TAMU menuju Form A14. Klik LOGOUTI keluar dari page administrator dan menuju Form P01. Header Admin A04 HOME ADMIN MEREK KATEGORI PRODUK MEMBER PROVINSI KOTA TRANSAKSI LAPORAN BERITA BUKU TAMU LOGOUT Selamat Datang Admin Text .: keterangan fungsi yang bisa digunakan admin :. Gambar 3. 64 Tampilan Antarmuka halaman Utama Admin 5. Perancangan Antarmuka Halaman Pengolahan Data Admin A05