ANALISIS DAN PERANCANGAN SISTEM
1. Perancangan Antar Muka Pengunjung
Antar muka ini adalah antar muka home (P01) yang dijelaskan pada gambar 3.29. P01
Usename Password
Form Login
Login
Belum jadi member? daftar
HOME profile Cara Pembelian keranjang testimonial
keranjang * Customer Service image SELAMAT DATANG image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03 Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Gambar 3. 29 Perancangan Tampilan Home
P02
HOME profile Cara Pembelian keranjang testimonial
SELAMAT DATANG GAMBAR TEKS Usename Password Form Login Login Belum jadi member? daftar
keranjang * Customer Service image Lupa Password Teks kategori Teks kategori Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03 Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Gambar 3. 30 Perancangan Tampilan Profil Perusahaan Antar muka Menu Produk (P03) yang dijelaskan pada gambar 3.31
P03
HOME profile Cara Pembelian keranjang testimonial
PRODUK image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03 Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Gambar 3. 31Perancangan Tampilan Menu Produk
119
P04
HOME profile Cara Pembelian keranjang testimonial
REGISTRASI Nama depan Nama belakang E-mail Kota Telepon Alamat Provinsi Kodepos Password Confirm Password Daftar Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password Teks kategori Teks kategori Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial Share & Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03 Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Gambar 3. 32 Perancangan Tampilan Registrasi
Antar muka Login (P05) yang dijelaskan pada gambar 3.33
P05
HOME profile Cara Pembelian keranjang testimonial
SELAMAT DATANG image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03 Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Antar muka Lupa Password (P06) yang dijelaskan pada gambar 3.34
P06
HOME profile Cara Pembelian keranjang testimonial
LUPA PASSWORD E-mail : Kirim Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke P01
Klik Profil menuju ke P02 Klik Produk menuju ke P03
Klik Registrasi menuju ke P04
Klik Login menuju ke P05
Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Gambar 3. 34 Perancangan Tampilan Lupa Pasword Antar muka kategori produk (P07) yang dijelaskan pada gambar 3.35
P07
HOME profile Cara Pembelian keranjang testimonial
KATEGORI image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03
Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
121
Antar muka Detail Produk (P08) yang dijelaskan pada gambar 3.36 P08
Usename Password
Form Login
Login
Belum jadi member? daftar
GO
HOME profile Cara Pembelian keranjang testimonial
keranjang * Customer Service image DETAIL BARANG image Nama barang Add to chart Lupa Password Harga barang Stok barang Ukuran barang Deskripsi barang · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02 Klik Produk menuju ke P03
Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju P08
Perancangan Antar Muka Member
Antar muka Menu Home (F01) yang dijelaskan pada gambar 3.37.
F01
HOME profile Cara Pembelian keranjang testimonial
SELAMAT DATANG image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Login menuju ke F01 Klik Lupa Password menuju ke F02
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang / add to chart menuju F10
Gambar 3. 37 Perancangan Tampilan Login
Antar muka Lupa Password (F02) yang dijelaskan pada gambar 3.38
F02
HOME profile Cara Pembelian keranjang testimonial
LUPA PASSWORD E-mail : Kirim Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Login menuju ke F01 Klik Lupa Password menuju ke F02
Klik Home menuju ke F03 Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang / add to chart menuju F10
123
Antar muka menu member (F03) yang dijelaskan pada gambar 3.39. F03
HOME profile Cara Pembelian keranjang testimonial SELAMAT DATANG image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang keranjang * Customer Service image · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 39 Perancangan antarmuka menu home
Antar muka Ubah Profil (F04) yang dijelaskan pada gambar 3.40.
F04
HOME profile Cara Pembelian keranjang testimonial
UBAH PROFIL Nama depan Nama belakang E-mail Kota Telepon Alamat Provinsi Kodepos Simpan keranjang * Customer Service image · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik History Menuju F12 Klik retur Menuju F13
Antar muka Ubah Password (F05) yang dijelaskan pada gambar 3.41.
F05
HOME profile Cara Pembelian keranjang testimonial
UBAH PROFIL Password Lama Password Baru Confirm Password Simpan keranjang * Customer Service image Teks kategori Teks kategori Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik keranjang menuju F10 Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 41 Perancangan antarmuka menu produk
Antar muka menu Produk (F06) yang dijelaskan pada gambar 3.42. F06
HOME profile Cara Pembelian keranjang testimonial PRODUK image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang keranjang * Customer Service image · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik History Menuju F12 Klik retur Menuju F13
125
Antar muka Testimonial (F07) yang dijelaskan pada gambar 3.43.
F07
HOME profile Cara Pembelian keranjang testimonial
TESTIMONIAL Keterangan Daftar Usename Password Form Login Login
Belum jadi member? daftar
keranjang * Customer Service image Lupa Password · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 43 Perancangan Tampilan Testimonial
Antar muka kategori produk (F08) yang dijelaskan pada gambar 3.44 F08
HOME profile Cara Pembelian keranjang testimonial KATEGORI image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang image Nama barang keranjang * Customer Service image · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik History Menuju F12 Klik retur Menuju F13
Antar muka Detail Produk (F09) yang dijelaskan pada gambar 3.45. F09
HOME profile Cara Pembelian keranjang testimonial
DETAIL BARANG image Nama barang Deskripsi barang keranjang * Customer Service image · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Harga Stok Ukuran
Beli Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
Klik Produk menuju ke F06 KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 45 Perancangan Tampilan Detail produk
Antar muka Keranjang (F10) yang dijelaskan pada gambar 3.46. F10
HOME profile Cara Pembelian keranjang testimonial
KERANJANG BELANJA
Checkout No Nama barang Berat Qty Total Hapus
Total bayar Belanja Lagi Update
keranjang * Customer Service image · Teks kategori · Teks kategori · Teks kategori KATEGORI image STATISTIK Produk terbaru GO Testimonial
Share & Join
Selamat Datang Ubah Profil Ubah Password History Retur Logout Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke F04
Klik Ubah Password menuju ke F05
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik checkout Menuju F11 Klik History Menuju F12 Klik retur Menuju F13
127