• Tidak ada hasil yang ditemukan

Perancangan Antar Muka Administrator

BAB V KESIMPULAN DAN SARAN

ANALISIS DAN PERANCANGAN SISTEM

3. Perancangan Antar Muka Administrator

Antar muka ini adalah antar muka login (A01)

Login Administrator Benita Administrator Image Email : Password : Login A01 Navigasi :

1. Masukan data login

administrator, lalu klik tombol login untuk masuk ke A02

Gambar 3.50 Perancangan Antar Muka Login

Antar muka ini adalah antar muka dasboard (A02)

BANNER Dasboard Pengolahan Data Pengolahan Transaksi Laporan Logout

PESAN / KOMENTAR PENGUNJUNG INFO ADMIN INFO TRANSAKSI INFO PENGIRIMAN INFO PRODUK Email : Subject : Pesan/ Komentar :

Balas Komentar/ Pesan | Hapus

FOOTER image Welcome, administrator Profil | Logout IP Address : A02 Navigasi :

1. Klik Menu “Pengolahan transaksi” untuk menuju ke A30

2. Klik menu “laporan”

untuk menuju ke A05

Antar muka ini adalah antar muka made produk (A03) BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA MADE PRODUK

Tambah | Refresh | Cari Berdasarkan Kode Made Produk : Kode Merk Produk Merk Produk AKSI

Ubah Hapus Ubah Hapus Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris

A03 Navigasi :

1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk” untuk

menuju ke A06

3. Klik menu “Tipe Produk”

untuk menuju ke A09 4. Klik Menu “Ukuran

produk” untuk menuju ke

A12

5. Klik menu “jenis produk”

untuk menuju ke A15 6. Klik menu “model

produk” untuk menuju ke

A18

7. Klik Menu “provinsi“

untuk menuju ke A21

8. Klik Menu “kota” untuk

menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Gambar 3.52 Perancangan Antar Muka Made Produk

Antar muka ini adalah antar muka tambah made produk (A04)

TAMBAH DATA

IMAGE TAMBAH DATA MERK PRODUK

Kode Merk Produk (*) :

Merk Produk (*) :

SIMPAN BATAL

A04

Navigasi :

1.Klik tombol simpan untuk

menyimpan data yang telh ditambah dan menuju ke A03

2.Klik tombol batal untuk

membatalkan penambahan data dan menuju ke A03

Antar muka ini adalah antar muka edit made produk (A05)

UBAH DATA

IMAGE UPDATE DATA MERK PRODUK

Kode Merk Produk (*) :

Merk Produk (*) :

SIMPAN BATAL

A05 Navigasi : 1. Klik tombol simpan untuk

menyimpan data yang telh ditambah dan menuju ke A03

2. Klik tombol batal untuk

membatalkan penambahan data dan menuju ke A03

Gambar 3.54 Perancangan Antar Muka Edit Made Produk

Antar muka ini adalah antar muka data produk (A06)

BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA PRODUK

Tambah | Refresh | Cari Berdasarkan Nama Produk : Kode Produk AKSI

Ubah Hapus Ubah Hapus Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris

Nama Produk Made Produk

A06 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”made

produk” untuk menuju

ke A03 3. Klik menu “Tipe

Produk” untuk menuju

ke A09

4. Klik Menu “Ukuran produk” untuk menuju

ke A12 5. Klik menu “jenis

produk” untuk menuju

ke A15

6. Klik menu “model produk” untuk menuju

ke A18

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “kota”

untuk menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk

menuju ke A30

Antar muka ini adalah antar muka tambah data produk (A07)

TAMBAH DATA

IMAGE TAMBAH DATA PRODUK

Merk Produk (*) :

Kode Produk (*) :

Nama Produk (*) :

SIMPAN BATAL

A07 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A06

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A06

Gambar 3.56 Perancangan Antar Muka Tambah Data Produk

Antar muka ini adalah antar muka edit data produk (A08)

UBAH DATA

IMAGE UPDATE DATA PRODUK

Merk Produk (*) :

Kode Produk (*) :

Nama Produk (*) :

SIMPAN BATAL

A08 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A06

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A06

Antar muka ini adalah antar muka data type produk (A09) BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA TIPE PRODUK

Tambah | Refresh | Cari Berdasarkan Tipe Produk :

Tipe Produk AKSI Ubah Hapus Ubah Hapus Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris

Kode Produk Nama Produk

A09 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk”

untuk menuju ke A06 3. Klik menu “made

produk” untuk menuju

ke A03

4. Klik Menu “Ukuran produk” untuk menuju

ke A12 5. Klik menu “jenis

produk” untuk menuju ke A15

6. Klik menu “model produk” untuk menuju

ke A18

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “kota” untuk

menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Gambar 3.58 Perancangan Antar Type Produk

Antar muka ini adalah antar muka tambah data type produk (A10)

TAMBAH DATA

IMAGE TAMBAH DATA TIPE PRODUK

Pilih Produk (*) :

Type Produk (*) :

SIMPAN BATAL

A10 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A09

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A09

Antar muka ini adalah antar muka edit data type produk (A11)

UBAH DATA

IMAGE UPADATE DATA TIPE PRODUK

Pilih Produk (*) :

Type Produk (*) :

SIMPAN BATAL

A11 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A09

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A09

Gambar 3.60 Perancangan Antar Muka Edit Data Type Produk

Antar muka ini adalah antar muka data ukuran produk (A12)

BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA UKURAN PRODUK

Tambah | Refresh | Cari Berdasarkan Ukuran Produk :

Ukuran Ket. ukuran AKSI Ubah Hapus Ubah Hapus Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris

A12 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk”

untuk menuju ke A06 3. Klik menu “Tipe

Produk” untuk menuju

ke A09

4. Klik Menu “made produk” untuk menuju

ke A03 5. Klik menu “jenis

produk” untuk menuju

ke A15

6. Klik menu “model produk” untuk menuju

ke A18

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “kota” untuk

menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Antar muka ini adalah antar muka tambah data ukuran produk (A13)

TAMBAH DATA

IMAGE TAMBAH DATA UKURAN PRODUK

Ukuran Produk (*) :

Ket. Ukuran Produk (*) :

SIMPAN BATAL

A13 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A12

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A12

Gambar 3.62 Perancangan Antar Muka Tambah Data Ukuran Produk

Antar muka ini adalah antar muka edit data ukuran produk (A14)

UBAH DATA

IMAGE UPDATE DATA UKURAN PRODUK

Ukuran Produk (*) :

Ket. Ukuran Produk (*) :

SIMPAN BATAL

A14 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A12

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A12

Antar muka ini adalah antar muka data jenis produk (A15) BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA JENIS PRODUK

Tambah | Refresh | Cari Berdasarkan Jenis Produk :

Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris Jenis AKSI

Ubah Hapus Ubah Hapus

A15 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk”

untuk menuju ke A06 3. Klik menu “Tipe

Produk” untuk menuju

ke A09

4. Klik Menu “Ukuran produk” untuk menuju

ke A12

5. Klik menu “made produk” untuk menuju

ke A03

6. Klik menu “model produk” untuk menuju

ke A18

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “kota” untuk

menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Gambar 3.64 Perancangan Antar Muka Data Jenis Produk

Antar muka ini adalah antar muka tambah data jenis produk (A16)

TAMBAH DATA

IMAGE TAMBAH DATA JENIS PRODUK

Jenis Produk (*) :

SIMPAN BATAL

A16 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A15

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A15

Antar muka ini adalah antar muka edit data jenis produk (A17)

UBAH DATA

IMAGE UPDATE DATA JENIS PRODUK

Jenis Produk (*) :

SIMPAN BATAL

A17 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A15

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A15

Gambar 3.66 Perancangan Antar Muka Edit Data Jenis Produk

Antar muka ini adalah antar muka data model produk (A18)

BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA MODEL PRODUK

Tambah | Refresh | Cari Berdasarkan Model Produk :

Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris Nama file gambar Jenis produk Ubah ubah hapus Type

produk Tgl_input Tgl_update produkHarga

hapus Ukuran

Produk Aksi

A18 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk”

untuk menuju ke A06 3. Klik menu “Tipe

Produk” untuk menuju ke A09

4. Klik Menu “Ukuran produk” untuk menuju ke

A12

5. Klik menu “jenis produk” untuk menuju ke

A15

6. Klik menu “made produk” untuk menuju ke

A03

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “kota” untuk

menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Antar muka ini adalah antar muka tambah data model produk (A19)

TAMBAH DATA

IMAGE TAMBAH DATA MODEL PRODUK

Type Produk (*) : Ukuran Produk (*) : Jenis Produk (*) : Unggah Gambar (*) : Harga (*) : SIMPAN BATAL Unggah Gambar

A19 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A18

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A18

Gambar 3.68 Perancangan Antar Muka Tambah Data Model Produk

Antar muka ini adalah antar muka edit data model produk (A20)

UBAH DATA

IMAGE UPDATE DATA MODEL PRODUK

Type Produk (*) : Ukuran Produk (*) : Jenis Produk (*) : Unggah Gambar (*) : Harga (*) : SIMPAN BATAL Unggah Gambar

A20 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A18

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A18

Antar muka ini adalah antar muka data kota (A21) BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA PROVINSI

Tambah | Refresh | Cari Berdasarkan Nama Provinsi :

Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris Provinsi AKSI

Ubah Hapus Ubah Hapus

A21 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk”

untuk menuju ke A06 3. Klik menu “Tipe

Produk” untuk menuju ke

A09

4. Klik Menu “Ukuran produk” untuk menuju ke

A12

5. Klik menu “jenis produk” untuk menuju ke

A15

6. Klik menu “model produk” untuk menuju ke

A18

7. Klik Menu “made produk“ untuk menuju ke

A03

8. Klik Menu “kota” untuk

menuju ke A24 9. Klik menu “media

pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju ke A30

Gambar 3.70 Perancangan Antar Muka Data Kota

Antar muka ini adalah antar muka tambah data kota (A22)

TAMBAH DATA

IMAGE TAMBAH DATA PROVINSI

Nama Provinsi (*) :

SIMPAN BATAL

A22 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A21

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A21

Antar muka ini adalah antar muka edit data kota (A23)

UBAH DATA

IMAGE UPDATE DATA PROVINSI

Nama Provinsi (*) :

SIMPAN BATAL

A23 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A21

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A21

Gambar 3.72 Perancangan Antar Muka Edit Data Kota

Antar muka ini adalah antar muka provinsi (A24)

BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA KOTA

Tambah | Refresh | Cari Berdasarkan Nama Kota :

Provinsi AKSI

Ubah Hapus Ubah Hapus Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris

Kota Kabupaten/ Kota

A24 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk”

untuk menuju ke A06 3. Klik menu “Tipe

Produk” untuk menuju ke

A09

4. Klik Menu “Ukuran produk” untuk menuju ke

A12

5. Klik menu “jenis produk” untuk menuju ke

A15

6. Klik menu “model produk” untuk menuju ke

A18

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “made

produk” untuk menuju ke

A03

9. Klik menu “media pembayaran” untuk

menuju me A27 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Antar muka ini adalah antar muka tambah data provinsi (A25)

TAMBAH DATA

IMAGE TAMBAH DATA KOTA

Pilih Provinsi (*) :

Kota (*) :

Kabupaten Kota(*) :

SIMPAN BATAL

A25 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A24

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A24

Gambar 3.74 Perancangan Antar Muka Tambah Data Provinsi

Antar muka ini adalah antar muka edit data provinsi (A26)

UBAH DATA

IMAGE UPDATE DATA KOTA

Pilih Provinsi (*) :

Kota (*) :

Kabupaten Kota(*) :

SIMPAN BATAL

A26 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A24

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A24

Antar muka ini adalah antar muka media pembayaran (A27) BANNER Dasboard Pengolahan Data Made Produk Produk Tipe Produk FOOTER image Welcome, administrator Profil | Logout IP Address : Ukuran Produk Jenis Produk Model Produk Provinsi Kota Media Pembayaran Pengolahan Transaksi Laporan Logout

PENGOLAHAN DATA MEDIA PEMBAYARAN

Tambah | Refresh | Cari Berdasarkan Nama Media Pembayaran : Nama Media

Pembayaran AKSI Ubah Hapus Ubah Hapus Tampilkan baris Sebelumnya Berikutnya | Hal dari Halaman | Jumlah Baris

Rekening Nama Pemilik PembayaranCabang

A27 Navigasi : 1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu”produk” untuk

menuju ke A06

3. Klik menu “Tipe Produk”

untuk menuju ke A09 4. Klik Menu “Ukuran

produk” untuk menuju ke

A12

5. Klik menu “jenis produk”

untuk menuju ke A15 6. Klik menu “model

produk” untuk menuju ke

A18

7. Klik Menu “provinsi“

untuk menuju ke A21 8. Klik Menu “kota” untuk

menuju ke A24

9. Klik menu “made produk”

untuk menuju me A03 10.Klik menu “pengolahan

transaksi” untuk menuju

ke A30

Gambar 3.76 Perancangan Antar Muka Media Pembayaran

Antar muka ini adalah antar muka tambah data media pembayaran (A28)

TAMBAH DATA

IMAGE TAMBAH DATA MEDIA PEMBAYARAN

Nama Media Pembayaran (*) :

Account/ No. rekening (*) :

Nama Pemilik (*) :

Cabang Media (*) :

SIMPAN BATAL

A28 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A27

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A27

Antar muka ini adalah antar muka edit data media pembayaran (A29)

UBAH DATA

IMAGE UPDATE DATA MEDIA PEMBAYARAN

Nama Media Pembayaran (*) :

Account/ No. rekening (*) :

Nama Pemilik (*) :

Cabang Media (*) :

SIMPAN BATAL

A29 Navigasi : 1. Klik tombol simpan

untuk menyimpan data yang telh ditambah dan menuju ke A27

2. Klik tombol batal

untuk membatalkan penambahan data dan menuju ke A27

Gambar 3.78 Perancangan antar Muka Edit Data Media Pembayaran

Antar muka ini adalah antar muka pengolahan transaksi (A30)

BANNER Dasboard Pengolahan Data Pengolahan Transaksi Laporan Logout FOOTER image Welcome, administrator Profil | Logout IP Address : A30 Pengolahan Transaksi Email member Nama membernama email nama Aksi Update pembayar n detail Update pembayar an detail No trnasaksiNo transaksiNo transaksi Tgl_transa kai Tgl_transa ksi Tgl_transa ksi Status pemba yaran status status Harga produkHarga produkHarga produk email Navigasi :

1. Klik menu “dasboard”

untuk menuju ke A02 2. Klik menu “laporan”

untuk menuju ke A31

Antar muka ini adalah antar muka laporan (A31) BANNER Dasboard Pengolahan Data Pengolahan Transaksi Laporan Logout FOOTER image Welcome, administrator Profil | Logout IP Address : A31

Tampilkan data berdasarkan : cari Laporan transaksi

No Transaksi Tgl transaksi Email member Nama member Status pembayaran Total transaksi

No Transaksi Kode barang Nama barang Qty

Cetak Navigasi : 1. Klik menu “dasboard” untuk menuju ke A02 2. Klik menu “transaksi” untuk menuju ke A30

Gambar 3.80 Perancangan Antar Muka Laporan

3.3.2. Perancangan Struktur Menu 1. Struktur Menu Pengunjung

Home

Profil Buku Tamu kontak Lihat detail belanja Produk Detail Produk daftar

view tambah

Cara belanja

Dokumen terkait