BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.2.5.3 Perancangan Antar Muka (Member)
1. Perancangan Antar Muka Home (Member)
<HEADER> Kurs Produk Terbaru Sedang Diskon Produk Terlaris T10 Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja logout Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail
Gambar 3. 80 Perancangan Antar Muka Home (Member)
2. Perancangan Antar Muka Semua Produk (Member)
<HEADER>
Kurs
Semua Produk
T11
Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja logout Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail
3. PerancanganAntar Muka Cara Pembelian (Member) <HEADER> Kurs Cara Pembelian T12 Keterangan :
· Klik Home menuju T10 · Klik Semua Produk menuju T11 · Klik Cara Pembelian menuju T12 · Klik Pembayaran dan Pengiriman
menuju T13
· Klik Tentang Kami menuju T14 · Klik Pencarian menuju T15 · Klik Kategori menuju T16 · Klik Detail Produk menuju T17 · Klik Order menuju T18
(jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat
Payment Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout Deskripsi cara pembelian
Gambar 3. 82 Antar Muka Cara Pembelian (Member)
4. Perancangan Antar Muka Pembayaran dan Pengiriman (Member)
<HEADER>
Kurs
Pembayaran dan Pengiriman
T13
Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout
Deskripsi cara Pembayaran dan Pengiriman
5. Perancangan Antar Muka Tentang Kami (Member) <HEADER> Kurs Tentang Kami T14 Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout
Deskripsi Tentang Kami
Gambar 3. 84 Perancangan Antar Muka Tentang Kami (Member)
6. Perancangan Antar Muka Pencarian Produk (Member)
<HEADER>
Kurs Pencarian Produk
T15
Keterangan :
· Klik Home menuju T10 · Klik Semua Produk menuju T11 · Klik Cara Pembelian menuju T12 · Klik Pembayaran dan Pengiriman
menuju T13
· Klik Tentang Kami menuju T14 · Klik Pencarian menuju T15 · Klik Kategori menuju T16 · Klik Detail Produk menuju T17 · Klik Order menuju T18
(jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja logout Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail
7. Perancangan Antar Muka Kategori (Member) <HEADER> Kurs Kategori T16 Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja logout Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail Gambar Nama Produk Harga Produk Detail
Gambar 3. 86 Perancangan Antar Muka Kategori (Member)
8. Perancangan Antar Muka Detail Produk (Member)
<HEADER>
Kurs
Detail Produk
T17
Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja logout Gambar Produk Merek Diskon xxx xxx Keterangan xxxxx Beli Berat Stok Tersedia xxx xxx Nama Produk Harga xxx xxx Rating
9. Perancangan Antar Muka Keranjang Belanja (Member) <HEADER> Kurs Keranjang belanja T18 Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout
Keterangan;
- Jika ada perubahan jumlah pembelian barang, dapat diubah di kolom Qty. Lalu klik tombol Update untuk menyimpan perubahan. - Jika sudah selesai memilih barang yang di beli. Silahkan klik tombol Check Out.
Checkout Update
No Produk Qty Harga BeratDiskon Subtotal 1 xxxx [ ] Rp.xx xx Xx% xx
xxx Total
Keterangan :
Kembali Belanja
Gambar 3. 88 Perancangan Antar Muka Keranjang Belanja (Member)
10.Perancangan Antar Muka Alamat Pengiriman (Member)
<HEADER>
Kurs
Alamat Pengiriman
T19
Keterangan :
· Klik Home menuju T10
· Klik Semua Produk menuju T11
· Klik Cara Pembelian menuju T12
· Klik Pembayaran dan Pengiriman menuju T13
· Klik Tentang Kami menuju T14
· Klik Pencarian menuju T15
· Klik Kategori menuju T16
· Klik Detail Produk menuju T17
· Klik Order menuju T18 (jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout
Teruskan Kembali
Alamat Sendiri Alamat Lain
Isi Alamat
11.Perancangan Antar Muka Review Pemesanan (Member) <HEADER> Kurs Review pesanan T20 Keterangan :
· Klik Home menuju T10 · Klik Semua Produk menuju T11 · Klik Cara Pembelian menuju T12 · Klik Pembayaran dan Pengiriman
menuju T13
· Klik Tentang Kami menuju T14 · Klik Pencarian menuju T15 · Klik Kategori menuju T16 · Klik Detail Produk menuju T17 · Klik Order menuju T18
(jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat
Payment Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout
Aturan Bisnis :
Kembali Selesai
No Produk Qty Harga BeratDiskon Subtotal 1 xxxx [ ] Rp.xx xx Xx% xx
xxx Biaya pengiriman dan penanganan
Keterangan : xxx Total Alamat Pengiriman : Nama penerima xxx Alamat xxx Kodepos xxx Provinsi xxx Kota xxx Telepon xxx Jasa pengiriman : Jne - jenis
Gambar 3. 90 Perancangan Antar Muka Review Pemesanan (Member)
12.Perancangan Antar Muka Detail Pesanan (Member)
<HEADER>
Kurs Pesanan Anda
T21
Keterangan :
· Klik Home menuju T10 · Klik Semua Produk menuju T11 · Klik Cara Pembelian menuju T12 · Klik Pembayaran dan Pengiriman
menuju T13
· Klik Tentang Kami menuju T14 · Klik Pencarian menuju T15 · Klik Kategori menuju T16 · Klik Detail Produk menuju T17 · Klik Order menuju T18
(jika order valid), jika jenis bahan kosong menuju M07, jika stok kosong menuju M08, jika stok tidak mencukupi menuju M09
<FOOTER> Kategori
Pencarian
Produk Terlaris
Produk Paling banyak dilihat Payment
Customer Service
Akun Dan Pesanan Saya
Ganti Password Akun Saya Pesanan Saya Retur Pesanan
Home Semua Produk Cara Pembelian Pembayaran dan Pengiriman Tentang Kami Tanggal | Selamat Datang, Member
Keranjang Belanja
logout
Konfirmasi pembayaran via bank ;
Kembali Keterangan : Alamat Pengiriman : Nama penerima xxx Alamat xxx Kodepos xxx Provinsi xxx Kota xxx Telepon xxx Deskripsi pemesanan….
No Produk Qty Harga BeratDiskon Subtotal 1 xxxx [ ] Rp.xx xx Xx% xx
xxx Biaya pengiriman dan penanganan
xxx Total Detail Pesanan Nomer pesanan : #xxx Total Pembayaran : Rp.xxxxx Atas Nama : Jumlah pembayaran : Tanggal Pembayaran : Konfirmasi PayPal