3.2.5 Perancangan Antar Muka
Perancangan antarmuka yang telah dibuat meliputi beberapa perancangan diantaranya adalah perancangan struktur menu, perancangan masukan, dan
perancangan keluaran.
3.2.5.1 Perancangan Antar muka admin
Login Username :
Password : Lupa password
Gambar 3. 27 Perancangan Antarmuka Login Admin
KETERANGAN
· Klik edit data menuju form A03 · Klik data transaksi menuju A04
· Klik Kelola Data Retur untuk menuju ke A05 · Klik Laporan penjualan menuju ke A06
· Klik Ubah profil untuk menuju ke A07 · Klik Logout untuk menuju ke A08
· Klik barang menuju A09 · Klik kategori menuju A10
· Klik kota menuju A11 · Klik regional menuju A12
· Klik ongkir menuju A13 · Klik member menuju A14
· Klik kontak menuju A15 · Klik rekening menuju A16
· Klik detail barang menuju A17 · Klik kurs menuju A18
· Klik tambah barang menuju A19 · Klik edt barang menuju A20
· Klik tambah kategori menuju A21 · Klik edit kategori menuju A22
· Klik tambah kota menuju A23 · Klik edit kota menuju A24
· Klik tambah regional menuju A25 · Klik edit regional menuju A26
· Klik tambah ongkir menuju A27 · Klik edit ongkir menuju A28
· Klik member menuju A29 · Klik edit member menuju A30
· Klik tambah berita menuju A31 · Klik edit berita menuju A32
· Klik tambah rekening menuju A33 · Klik edit rekening menuju A34
· Kliktambah detail barang menuju A35 · Klik tambah kurs menuju A37
· Klik edit kurs menuju A38 · Klik harian menuju a39
· Klik bulanan menuju A40 · Klik tahunan menuju A41
· Klik barang menuju A42 · Klik retur menuju A43
· Klik ubah profil menuju A44 dan A45
Selamat Datang Home
Edit Data Ø
Kategori Ø
Produk Ø
Rekening Ø
Kota Ø
Kontak Ø
Member Ø
Testimonial Data Transaksi
Data Retur Laporan Penjualan
Ø Harian
Ø Bulanan
Ø Tahunan
Ø Produk
Ø Retur
Ubah Profil Logout
Logo
Nama form : A02
Font : Arial
Warna background : biru A02
Gambar 3. 28 Perancangan Antarmuka Home
Manajemen Kategori
Logo
Tambah kategori No Kode kategori
Pilihan Deskripsi
Nama Kategori
Nama form : A21
Font : Arial
Warna background : biru A21
KETERANGAN
· Klik edit data menuju form A03 · Klik data transaksi menuju A04
· Klik Kelola Data Retur untuk menuju ke A05 · Klik Laporan penjualan menuju ke A06
· Klik Ubah profil untuk menuju ke A07 · Klik Logout untuk menuju ke A08
· Klik barang menuju A09 · Klik kategori menuju A10
· Klik kota menuju A11 · Klik provinsi menuju A12
· Klik member menuju A14 · Klik kontak menuju A15
· Klik rekening menuju A16 · Klik tambah barang menuju A19
· Klik edt barang menuju A20 · Klik tambah kategori menuju A21
· Klik edit kategori menuju A22 · Klik tambah kota menuju A23
· Klik edit kota menuju A24 · Klik tambah provinsi menuju A25
· Klik edit provinsi menuju A26 · Klik member menuju A29
· Klik edit member menuju A30 · Klik tambah berita menuju A31
· Klik edit berita menuju A32 · Klik tambah rekening menuju A33
· Klik edit rekening menuju A34 · Klik harian menuju a39
· Klik bulanan menuju A40 · Klik tahunan menuju A41
· Klik barang menuju A42 · Klik retur menuju A43
· Klik ubah profil menuju A44 dan A45
Home Edit Data
Ø Kategori
Ø Produk
Ø Rekening
Ø Kota
Ø Kontak
Ø Member
Ø Testimonial
Data Transaksi Data Retur
Laporan Penjualan Ø
Harian Ø
Bulanan Ø
Tahunan Ø
Produk Ø
Retur Ubah Profil
Logout
Gambar 3. 29 Perancangan Antarmuka Kategori
Tambah Kategori
Kode : Nama Kategori :
Logo
Simpan Batal
KETERANGAN
· Klik edit data menuju form A03 · Klik data transaksi menuju A04
· Klik Kelola Data Retur untuk menuju ke A05 · Klik Laporan penjualan menuju ke A06
· Klik Ubah profil untuk menuju ke A07 · Klik Logout untuk menuju ke A08
· Klik barang menuju A09 · Klik kategori menuju A10
· Klik kota menuju A11 · Klik provinsi menuju A12
· Klik member menuju A14 · Klik kontak menuju A15
· Klik rekening menuju A16 · Klik tambah barang menuju A19
· Klik edt barang menuju A20 · Klik tambah kategori menuju A21
· Klik edit kategori menuju A22 · Klik tambah kota menuju A23
· Klik edit kota menuju A24 · Klik tambah provinsi menuju A25
· Klik edit provinsi menuju A26 · Klik member menuju A29
· Klik edit member menuju A30 · Klik tambah berita menuju A31
· Klik edit berita menuju A32 · Klik tambah rekening menuju A33
· Klik edit rekening menuju A34 · Klik harian menuju a39
· Klik bulanan menuju A40 · Klik tahunan menuju A41
· Klik barang menuju A42 · Klik retur menuju A43
· Klik ubah profil menuju A44 dan A45
Nama form : A22
Font : Arial
Warna background : biru A22
Home Edit Data
Ø Kategori
Ø Produk
Ø Rekening
Ø Kota
Ø Kontak
Ø Member
Ø Testimonial
Data Transaksi Data Retur
Laporan Penjualan Ø
Harian Ø
Bulanan Ø
Tahunan Ø
Produk Ø
Retur Ubah Profil
Logout
Gambar 3. 30 Perancangan Antarmuka Tambah Kategori
Logo
Manajemen Produk
Tambah produk No
Nama kategori
Pilihan Deskripsi
Nama Produk
Harga Gambar
Diskon
Nama form : A09
Font : Arial
Warna background : biru A09
KETERANGAN
· Klik edit data menuju form A03 · Klik data transaksi menuju A04
· Klik Kelola Data Retur untuk menuju ke A05 · Klik Laporan penjualan menuju ke A06
· Klik Ubah profil untuk menuju ke A07 · Klik Logout untuk menuju ke A08
· Klik barang menuju A09 · Klik kategori menuju A10
· Klik kota menuju A11 · Klik provinsi menuju A12
· Klik member menuju A14 · Klik kontak menuju A15
· Klik rekening menuju A16 · Klik tambah barang menuju A19
· Klik edt barang menuju A20 · Klik tambah kategori menuju A21
· Klik edit kategori menuju A22 · Klik tambah kota menuju A23
· Klik edit kota menuju A24 · Klik tambah provinsi menuju A25
· Klik edit provinsi menuju A26 · Klik member menuju A29
· Klik edit member menuju A30 · Klik tambah berita menuju A31
· Klik edit berita menuju A32 · Klik tambah rekening menuju A33
· Klik edit rekening menuju A34 · Klik harian menuju a39
· Klik bulanan menuju A40 · Klik tahunan menuju A41
· Klik barang menuju A42 · Klik retur menuju A43
· Klik ubah profil menuju A44 dan A45
Home Edit Data
Ø Kategori
Ø Produk
Ø Rekening
Ø Kota
Ø Kontak
Ø Member
Ø Testimonial
Data Transaksi Data Retur
Laporan Penjualan Ø
Harian Ø
Bulanan Ø
Tahunan Ø
Produk Ø
Retur Ubah Profil
Logout
Gambar 3. 31 Perancangan Antarmuka Produk
Tambah Produk
Kategori Nama Produk
Harga Diskon
Masukkan gambar Logo
Simpan Batal
Browse
Simpan Gambar Baru Browse
Nama form : A20
Font : Arial
Warna background : biru A20
KETERANGAN
· Klik edit data menuju form A03 · Klik data transaksi menuju A04
· Klik Kelola Data Retur untuk menuju ke A05 · Klik Laporan penjualan menuju ke A06
· Klik Ubah profil untuk menuju ke A07 · Klik Logout untuk menuju ke A08
· Klik barang menuju A09 · Klik kategori menuju A10
· Klik kota menuju A11 · Klik provinsi menuju A12
· Klik member menuju A14 · Klik kontak menuju A15
· Klik rekening menuju A16 · Klik tambah barang menuju A19
· Klik edt barang menuju A20 · Klik tambah kategori menuju A21
· Klik edit kategori menuju A22 · Klik tambah kota menuju A23
· Klik edit kota menuju A24 · Klik tambah provinsi menuju A25
· Klik edit provinsi menuju A26 · Klik member menuju A29
· Klik edit member menuju A30 · Klik tambah berita menuju A31
· Klik edit berita menuju A32 · Klik tambah rekening menuju A33
· Klik edit rekening menuju A34 · Klik harian menuju a39
· Klik bulanan menuju A40 · Klik tahunan menuju A41
· Klik barang menuju A42 · Klik retur menuju A43
· Klik ubah profil menuju A44 dan A45
Home Edit Data
Ø Kategori
Ø Produk
Ø Rekening
Ø Kota
Ø Kontak
Ø Member
Ø Testimonial
Data Transaksi Data Retur
Laporan Penjualan Ø
Harian Ø
Bulanan Ø
Tahunan Ø
Produk Ø
Retur Ubah Profil
Logout
Gambar 3. 32 Perancangan Antarmuka Tambah Produk
Kategori