Perancangan Antarmuka

ANALISIS DAN PERANCANGAN

20. DFD level 3 Proses 3.10 Kelola Detail Barang

3.6 Perancangan Antarmuka

Interface atau antar muka merupakan tampilan dari suau program aplikasi

yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan interface yang mudah dipahami dan digunakan oleh user.

Perancangan antarmuka sistem yang akan dibangun dibedakan sesuai dengan jenis penggunanya, yaitu admin, pemesan dan pengunjung. Perancangan antarmuka dan navigasinya dapat dilihat melalui gambar berikut :

F01 Keterangan :

-Klik katalog menuju F01 -Klik testimonial menuju

F02

-Klik berita menuju F03 -Klik login menuju ke F04 Katalog Testimonial Berita Login

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Gambar Detail Nama barang Harga Merk Logo <Footer> regeristrasi Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Barang Terbaru

Gambar 3.29 Perancangan Antarmuka Beranda

F02 Keterangan :

-Klik katalog menuju F01 -Klik testimonial menuju

F02

-Klik berita menuju F03 -Klik login menuju ke F04

Katalog Testimonial Berita Login

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer> Testimonial Kirim Nama Email Wabsite Testimoni regeristrasi

F03 Keterangan :

-Klik katalog menuju F01 -Klik testimonial menuju

F02

-Klik berita menuju F03 -Klik login menuju ke F04

Katalog Testimonial Berita Login

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer> Berita regeristrasi

Gambar 3.31 Perancangan Antarmuka Berita

F04 Keterangan :

-Klik katalog menuju F01 -Klik testimonial menuju

F02

-Klik berita menuju F03 -Klik login menuju ke F04 -Klik register menuju F5 -Klik lupa password

menuju ke F6

Katalog Testimonial Berita Login

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer> Login Password Username

Regristasi || Lupa Password regeristrasi

F05 Keterangan :

-Klik katalog menuju F01 -Klik testimonial menuju

F02

-Klik berita menuju F03 -Klik login menuju ke F04 Katalog Testimonial Berita Login

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer> Regristasi Email Username Password Ulang password Nama lengkap Jenis kelamin Alamat Kota / kota kabupaten kodepos

daftar

regeristrasi

No telepon

Gambar 3.33 Perancangan Antarmuka Regristasi

F06 Keterangan :

-Klik katalog menuju F01 -Klik testimonial menuju

F02

-Klik berita menuju F03 -Klik login menuju ke F04

Katalog Testimonial Berita Login

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer> Lupa Password username

Password harap diingat dan dirahasiakan agar tidak disalahgunakan

Reset password regeristrasi

A01 Keterangan :

-Klik login menuju ke F8

Login Login Admin

Password Username

Gambar 35Gambar 3.35 Perancangan Antarmuka Login Admin

F08 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke F16 -Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju ke

F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke F48 -Klik kelola gambar menuju ke F50 -Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur ^Kelola ukuran

Pemesan Pelanggan

Dipesan Dibayar Lunas Dikirim diterima

No order Nama Konsumen Tanggal order Status aksi detail kadaluarsa Cetak laporan

Kelola kota Kelola

gambar ^Logout

F09 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke F16 -Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju ke

F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke F48 -Klik kelola gambar menuju ke F50 -Klik kelola retur menuju ke F52 -Klik logout menuju ke A01

pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir Kelola warna Kelola retur _ukuran^Kelola

Pemesan Pelanggan

Dipesan Dibayar Lunas Dikirim diterima

No order Nama Konsumen Tanggal order Status aksi

Detail Order

No order : Tanggal order : Ongkor per kg :

Status Order ^{Ubah status}

Nama Pembeli Alamat Pengiriman Kota Kodepos Email Data customer

Nama barangjumlah Berat (Kg) Harga Sub total

Kelola kota Kelola

gambar ^Logout

kadaluarsa Cetak laporan

Gambar 3.37 Perancangan Antarmuka detail pemesan

F10 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke

F16

-Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju

ke F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke

F48

-Klik kelola gambar menuju ke F50

-Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur ^Kelola gambar

Pemesan Pelanggan Dipesan Dibayar Lunas Dikirim diterima

Cetak Laporan Cetak laporan pesanan

Tanggal awal Tanggal akhir

Cetak laporan

Kelola kota Kelola ukuran Logout

kadaluarsa Cetak laporan

Status pesanan :

Cetak pembyaran pemesanan

Tanggal awal Tanggal akhir

Cetak laporan Pembayaran melalui

F11 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke

F16

-Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju

ke F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke

F48

-Klik kelola gambar menuju ke F50

-Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur _gambar^Kelola

Kelola Produk

No Nama produk merk kategori Tgl masuk Tambah produk

Edit | hapus Detail produk Aksi

Kelola kota Kelola ukuran Logout

Cetaik lapran barang

Detail produk

Gambar 3.39 Perancangan Antarmuka kelola produk

F12 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke

F16

-Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju

ke F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke

F48

-Klik kelola gambar menuju ke F50

-Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur ^Kelola gambar Tambah Produk Nama Produk : Kategori : Merk : diskon Deskripsi simpan batal Kelola kota Kelola ukuran Logout

F13 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke

F16

-Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju

ke F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke

F48

-Klik kelola gambar menuju ke F50

-Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur ^Kelola gambar

Nama produk

No Harga jual Harga beli berat warna Tambah detai

Edit | hapus

stok Aksi

Kelola kota Kelola ukuran Logout

Cetaik lapran barang

Detail produk ukuran

Gambar 3.41 Perancangan Antarmuka detail produk

F14 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke

F16

-Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju

ke F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke

F48

-Klik kelola gambar menuju ke F50

-Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur ^Kelola gambar Nama barang Harga jual : Harga beli : berat : warna Ukuran Stok simpan batal Kelola kota Kelola ukuran Logout

F15 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke F16 -Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju ke

F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke F48 -Klik kelola gambar menuju ke F50 -Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesananKelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur _gambar^Kelola

Kelola kota Kelola ukuran Logout

Gambar produk

No Nama produk Gambar produk aksi Tambah gambar

Gambar 43Gambar 3.43 Perancangan Antarmuka kelola gambar

F16 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke F16 -Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju ke

F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke F48 -Klik kelola gambar menuju ke F50 -Klik kelola retur menuju ke F52 -Klik logout menuju ke A01 pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir

Kelola warna Kelola retur _gambar^Kelola

Kelola kategori

No _kategori^Nama Aksi Tambah kategori

Edit | hapus

Kelolan kota Kelola ukuran Logout

F17 Keterangan :

-Klik pemesanan menuju ke F08 -Klik kelola barang menuju F11 -Klik kelola kategori menuju ke F16 -Klik kelola merk menuju ke F17 -Klik kelola pelanggan menuju ke

F35

-Klik kelola berita menuju ke F36 -Klik kelola testimonial menuju ke

F40

-Klik kelola ongkir menuju ke F41 -Klik kelola warna menuju ke F43 -Klik kelola kota menuju ke F45 -Klik kelola ukuran menuju ke F48 -Klik kelola gambar menuju ke F50 -Klik kelola retur menuju ke F52 -Klik logout menuju ke A01

pemesanan Kelola barang Kelola kategori Kelola merk Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir Kelola warna Kelola retur ^Kelola

gambar

Kelola Merk No Nama merk Aksi

Tambah merk

Edit | hapus

Kelola kota Kelola ukuran Logout

Gambar 3.45 Perancangan Antarmuka kelola merk

F25 Keterangan :

-Klik beranda menuju ke F25

-Klik testimonial menuju F35

-Klik berita menuju ke F36 -Klik konfirmasi

pembayaran menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01 -Klik detail menuju ke F26

beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Gambar Detail Nama barang Harga Merk Logo <Footer>

Histori Transaksi Logout

Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Gambar Detail Nama barang Harga Merk Produk terbaru

F26 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01 -Klik beli menuju ke F27

beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari

Facebook

Kategori ^{Paling dicari}

Costumer Service Pembayaran Kontak info Cari Gambar Nama barang Harga Merk Logo <Footer>

Histori Transaksi Logout

Tersedia dalam : Ukuran Harga Berat stok warna Beli Ukuran Harga Berat stok warna Beli Gambar Gambar

Gambar 3.47 Perancangan Antarmuka detail barang

F27 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01 -Klik selesai belanja ke F28 Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout

No

Keranjang belanja Nama

produk ^{Berat jumlah harga subtotal hapus}

Belanja lagi Update cart Belanja lagi

F28 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01 -Klik selesai ke F29 Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout Data Pengiriman Nama Alamat Propinsi Kab/kota Kode pos No telp

Pilih jenis pengiriman

Ganti alamat lanjut JNE reguler JNE YES COD

Gambar 3.49 Perancangan Antarmuka alamat pengiriman

F29 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01 -Klik kembali ke F29 Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout Review pesanan Nama pelanggan Alamat pengiriman Kota Kodepos No telp Ongkos kirim perKG

No nama berang jumlah total berat harga total harga

F30 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01

-Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Produk terlaris Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout Pembayaran

No order | nama pemesanan | Total | Via Bank | Via Paypal konfirmasi Paypal

Gambar 3.51 Perancangan Antarmuka konfirmasi pembayaran

F31 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01

-Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout

Pembayaran

No order | nama pemesanan | Total | Via Bank | Via Paypal konfirmasi Paypal No Order : Email : Tanggal : Bank pengirim : Jumlah : Tujuan Bank : No Transaksi Kirim

F32 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01

-Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout

Histori Transaksi

No Order | Atas Nama | Tanggal Order | Status Barang | Total | aksi Pembelian

Gambar 3.53 Perancangan Antarmuka histori transaksi

F33 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01 -Klik kembali F32

Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Paling dicari Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout Data kostumer Nama pelanggan Alamat pengiriman Kota Kodepos No telp Ongkos kirim perKG

Nama produk berat jumlah harga satuan sub total aksi

kembali Data pemesanan No order :

F34 Keterangan :

-Klik beranda menuju ke F25 -Klik testimonial menuju F35 -Klik berita menuju ke F36 -Klik konfirmasi pembayaran

menuju ke F30

-Klik histori transaksi menuju ke F32

-Klik logout menuju ke F01

-Beranda Testimonial Berita Konfirmasi Pembayaran

Keranjang Cari Facebook Kategori Produk terlaris Costumer Service Pembayaran Kontak info Cari Logo <Footer>

Histori Transaksi Logout Retur Barang No order : Nama produk : Jumlah Barang* : kondisi : alasan Kirim

Gambar 3.55 Perancangan Antarmuka retur barang