Perancangan antar muka pengunjung a Perancangan antar muka beranda

ANALISIS DAN PERANCANGAN SISTEM

22. DFD Level 4 Proses 4.4.5 Pengolahan Detail Barang

3.2.2 Perancangan Struktur Menu

3.2.3.2 Perancangan antar muka pengunjung a Perancangan antar muka beranda

Perancangan antar muka beranda pada pengunjung yang berfungsi sebagai halaman beranda pengunjung dapat dilihat pada Gambar III.74.

Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Anda memiliki … item barang Seharga … dalam Keranjang Belanja BERANDA Kategori Kategori 1 Kategori 2 Kategori 3 Kategori 4 Kategori 5 Produk Produk Diskon Produk Terbaru Produk Terlaris Produk Paling Banyak Dilihat

Gambar

Gambar Tampil Semua Produk

PN01

Footer

Nama Layar : PN01 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik gambar keranjang menuju PN02 · Klik login menuju PN03 · Klik daftar menuju PN04

· Klik beranda menuju PN01 · Klik tentang kami menuju

PN08

· Klik biaya pengiriman menuju PN07

· Klik gambar cari menuju PN09

· Klik kategori menuju PN10

· Klik produk terbaru menuju PN16

· Klik produk diskon menuju PN15

· Klik produk terlaris menuju PN17

· Klik produk paling banyak dilihat menuju PN18

· Klik detail menuju PN12 · Klik logo dan nama toko

menuju PN01 Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5 Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail

· Klik nama barang menuju PN12

· Klik syarat & informasi menuju PN06

· Klik merek menuju PN11

b. Perancangan antar muka keranjang belanja

Perancangan antar muka beranda pada pengunjung yang berfungsi sebagai halaman beranda pengunjung dapat dilihat pada Gambar III.75.

Keranjang Belanja Anda

PN02

Nama Layar : PN02 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

Hapus

Detail Barang Qty Total Harga

Gambar barang

Sub Total Bayar

Selesai Belanja Kembali Berbelanja Harga : Rp. … ,00 Diskon : …% Harga + Diskon : Rp. ... ... Rp. … ,00 / $ ... Rp. … ,00 / $ ... Logo dan Nama Toko

Header Gambar

keranjang

Anda memiliki … item barang Seharga … dalam Keranjang Belanja Gambar facebook Gambar twitter Gambar YM Kategori Kategori 1 Kategori 2 Kategori 3 Kategori 4 Kategori 5 Produk Produk Diskon Produk Terbaru Produk Terlaris Produk Paling Banyak Dilihat

Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5

Footer Nama Barang Ukuran : ... Stok : ... Berat : ... Update X

· Klik gambar keranjang menuju PN02 · Klik login menuju PN03 · Klik daftar menuju PN04

· Klik beranda menuju PN01 · Klik tentang kami menuju

PN08

· Klik biaya pengiriman menuju PN07

· Klik gambar cari menuju PN09

· Klik kategori menuju PN10

· Klik produk terbaru menuju PN16

· Klik produk diskon menuju PN15

· Klik produk terlaris menuju PN17

· Klik produk paling banyak dilihat menuju PN18

· Klik selesai belanja menuju PN04

· Klik logo dan nama toko menuju PN01

· Klik kembali berbelanja menuju PN10 · Klik syarat & informasi

menuju PN06

· Klik merek menuju PN11

c. Perancangan antar muka login pelanggan

Perancangan antar muka login pelanggan pada pengunjung yang berfungsi sebagai halaman login pelanggan pada pengunjung dapat dilihat pada Gambar III.76.

PN03

Nama Layar : PN03 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5

Silahkan login untuk dapat berbelanja

Password

Anda lupa password?? Login Reset

Email Pelanggan Baru Login Pelanggan

Teks

Membuat Akun

· Klik gambar keranjang menuju PN02 · Klik login menuju PN03 · Klik daftar menuju PN04

· Klik beranda menuju PN01 · Klik tentang kami menuju

PN08

· Klik biaya pengiriman menuju PN07

· Klik gambar cari menuju PN09

· Klik kategori menuju PN10

· Klik produk terbaru menuju PN16

· Klik produk diskon menuju PN15

· Klik produk terlaris menuju PN17

· Klik produk paling banyak dilihat menuju PN18

· Klik reset menuju PN03 · Klik logo dan nama toko

menuju PN01

· Klik login menuju PL01 · Klik syarat & informasi

menuju PN06

· Klik merek menuju PN11

· Klik lupa password menuju PN05

d. Perancangan antar muka daftar pelanggan

Perancangan antar muka daftar pelanggan pada pengunjung yang berfungsi sebagai halaman daftar pelanggan pada pengunjung dapat dilihat pada Gambar III.77.

PN04

Nama Layar : PN04 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik reset menuju PN13 · Apabila email tidak diisi, maka akan

muncul PS01

· Apabila password tidak diisi, maka akan muncul PS02 · Apabila konfirmasi password tidak

diisi, maka akan muncul PS03 · Apabila nama tidak diisi, maka akan

muncul PS04

· Apabila alamat tidak diisi, maka akan muncul PS05 · Apabila provinsi tidak dipilih, maka

akan muncul PS06

· Apabila kota tidak dipilih, maka akan muncul PS07

· Apabila kode pos tidak diisi, maka akan muncul PS08 · Apabila perhitungan tidak diisi,

maka akan muncul PS09 · Apabila semua tidak diisi, maka

akan muncul PS10 Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5

Form Pelanggan Baru Data Untuk Login Pelanggan

Email Baru* Password Baru* Konfirmasi password*

Informasi Tentang Pelanggan Baru Nama Lengkap* Alamat* Provinsi* Kota* Fax Kode Pos* Handphone Telepon ▼ ▼ Penanda SPAM

Hitung* Angka1 + Angka2 = Keterangan : Yang bertanda (*) wajib diisi

Daftar Reset

· Klik gambar keranjang menuju PN02

· Klik login menuju PN03 · Klik daftar menuju PN04

· Klik beranda menuju PN01 · Klik tentang kami menuju PN08 · Klik biaya pengiriman menuju PN07

· Klik gambar cari menuju PN09 · Klik kategori menuju PN10

· Klik produk terbaru menuju PN16 · Klik produk diskon menuju PN15

· Klik produk terlaris menuju PN17 · Klik produk paling banyak dilihat

menuju PN18 · Klik reset menuju PN04 · Klik logo dan nama toko menuju

PN01

· Klik daftar menuju PL14 · Klik syarat & informasi menuju PN06

· Klik merek menuju PN11

e. Perancangan antar muka lupa password

Perancangan antar muka lupa password pada pengunjung yang berfungsi sebagai halaman untuk kehilangan password atau lupa password dapat dilihat pada Gambar III.78.

PN05

Nama Layar : PN05 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01

· Klik proses menuju PN14 · Klik reset menuju PN14 · Apabila email tidak diisi,

maka akan muncul PS01 · Apabila perhitungan tidak

diisi, maka akan muncul PS09

Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5

Silahkan masukkan email anda

Hitung* Angka1 + Angka2 =

Keterangan : Yang bertanda bintang (*) wajib diisi Proses Reset

Email*

f. Perancangan antar muka syarat dan informasi

Perancangan antar muka syarat dan informasi pada pengunjung yang berfungsi sebagai halaman syarat dan informasi transaksi pada pengunjung dapat dilihat pada Gambar III.79.

PN06

Nama Layar : PN06 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik login menuju PN12 · Klik membuat akun menuju PN13 · Klik cara pemesanan menuju PN04 · Klik cara pembayaran menuju PN05 · Klik retur barang menuju PN06 · Klik beranda menuju PN01 · Klik profil perusahaan menuju PN03 · Klik tanya jawab menuju PN07 · Klik ongkos menuju PN08 · Klik hubungi kami menuju PN09 · Klik gambar cari menuju PN10 · Klik Kategori menuju PN11 · Klik produk terbaru menuju PN18 · Klik produk diskon menuju PN19 · Klik produk terlaris menuju PN20 · Klik produk acak menuju PN21 · Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko menuju

PN01

· Klik daftar menuju PN17 · Klik reset menuju PN13 · Apabila email tidak diisi, maka akan

muncul PS01

· Apabila password tidak diisi, maka akan muncul PS02 · Apabila konfirmasi password tidak

diisi, maka akan muncul PS03 · Apabila nama tidak diisi, maka akan

muncul PS04

· Apabila alamat tidak diisi, maka akan muncul PS05 · Apabila provinsi tidak dipilih, maka

akan muncul PS06

· Apabila kota tidak dipilih, maka akan muncul PS07

· Apabila kode pos tidak diisi, maka akan muncul PS08 · Apabila perhitungan tidak diisi,

maka akan muncul PS09 · Apabila semua tidak diisi, maka

akan muncul PS10 Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5

Syarat & Informasi

Teks

g. Perancangan antar muka biaya pengiriman

Perancangan antar muka biaya pengiriman pada pengunjung yang berfungsi sebagai halaman informasi biaya pengiriman barang dapat dilihat pada Gambar III.80.

PN07

Nama Layar : PN07 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01 Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5 Biaya Pengiriman Teks

h. Perancangan antar muka tentang kami

Perancangan antar muka tentang kami pada pengunjung yang berfungsi sebagai halaman informasi profil toko Yoyo Sport dapat dilihat pada Gambar III.81.

PN08

Nama Layar : PN08 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01 Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5 Tentang Kami Teks

i. Perancangan antar muka menu pencarian barang

Perancangan antar muka menu pencarian barang pada pengunjung yang berfungsi sebagai menu pencarian barang dapat dilihat pada Gambar III.82.

Beranda

PN09

Nama Layar : PN09 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01

· Klik proses menuju PN10 · Klik selengkapnya menuju

PN15 Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5 Pencarian Barang Nama barang : Kategori : Diskon : % keatas ▼ Cari Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Merek : ▼

j. Perancangan antar muka kategori barang

Perancangan antar muka kategori barang pada pengunjung yang berfungsi sebagai halaman kategori barang dan deskripsi kategori barang dapat dilihat pada Gambar III.83.

PN10

Nama Layar : PN10 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01

· Klik selengkapnya menuju PN15

Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5 Nama Kategori Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail

k. Perancangan antar muka merek

Perancangan antar muka kategori barang pada pengunjung yang berfungsi sebagai halaman kategori barang dan deskripsi kategori barang dapat dilihat pada Gambar III.84.

PN11

Nama Layar : PN11 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01

· Klik selengkapnya menuju PN15

Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5 Nama Merek Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail

l. Perancangan antar muka detail barang

Perancangan antar muka detail barang pada pengunjung yang berfungsi sebagai halaman antar muka detail barang dapat dilihat pada Gambar III.85.

PN12

Nama Layar : PN12 Ukuran Layar : 1024 x 768 Font : Arial Warna Background : Abu-abu

· Klik keranjang belanja menuju PN02 · Klik login menuju PN12 · Klik membuat akun menuju

PN13

· Klik cara pemesanan menuju PN04 · Klik cara pembayaran

menuju PN05 · Klik retur barang menuju

PN06

· Klik beranda menuju PN01 · Klik profil perusahaan

menuju PN03 · Klik tanya jawab menuju

PN07

· Klik ongkos menuju PN08 · Klik hubungi kami menuju

PN09

· Klik gambar cari menuju PN10

· Klik Kategori menuju PN11 · Klik produk terbaru menuju

PN18

· Klik produk diskon menuju PN19

· Klik produk terlaris menuju PN20

· Klik produk acak menuju PN21

· Klik terbanyak dilihat menuju PN22 · Klik logo dan nama toko

menuju PN01

· Klik gambar menuju PN15 · Klik gambar keranjang

menuju PN02 Logo dan Nama Toko

Gambar Cari

Header Gambar

keranjang

Footer Gambar facebook Gambar twitter Gambar YM Merek Merek 1 Merek 2 Merek 3 Merek 4 Merek 5

Nama Kategori / Nama Barang

Ukuran ... Harga Rp. … ,00 Diskon … % Stok ... keranjangGambar Gambar Nama Barang Detail Gambar Nama Barang Detail Gambar Nama Barang Detail

… Komentar Beri Komentar Rating :

m. Perancangan antar muka sukses registrasi pelanggan

Perancangan antar muka sukses registrasi pelanggan pada pengunjung yang berfungsi sebagai halaman konfirmasi keanggotaan sudah diaktifasi dapat

Dalam dokumen Pembangunan Website E-Commerce Di Toko Olahraga YOYO Sport (Halaman 149-167)