ANALISIS DAN PERANCANGAN SISTEM
III. 2.3.1.2 Perancangan Antar Muka Operator
1. Perancangan antar muka login
PR06
Nama Layar : PR06 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
Klik login menuju PR01 Klik lupa password menuju PR07 Istana Kulit Garut
Petugas login
Password
login
Lupa password ?
Gambar III.36 Perancangan Antar Muka Login
2. Perancangan antar muka lupa password
PR07
Nama Layar : PR07 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
Klik login menuju PR06 Klik proses menuju PR07 Iatana Kulit Garut
Lupa password
Proses
<< Login
3. Perancangan antar muka beranda
PR01
Nama Layar : PR01 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 header footer Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Branda Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
teks teks
Info Singkat Info Penting
Gambar III.18 Perancangan Antar Muka Beranda
4. Perancangan antar muka data kategori
PR02
Nama Layar : PR02 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Kategori Barang
ID Tambah
Rincian Kategori
Data detail kategori
|---à Yang Ditandai : Edit Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 Klik tambah menuju PR13 Klik lihat data barang menuju PR03 Klik tambah menuju PR36 Klik jumlah barang menuju PR37 Klik edit menuju PR10 Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Urutkan Berdasarkan :
Nama Tampilkan
Proses
5. Perancangan antar muka data barang
PR03
Nama Layar : PR03 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Barang | Kategori Tampilkan semua
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 Klik tambah barang menuju PR14 Klik lihat data detail barang menuju PR15 Klik cari menuju PR03 Klik tambah menuju PR17 Klik jumlah detail menuju PR16 Klik edit menuju PR18 Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
ID Tambah
Daftar Detail Barang
Data detail kategori
|---à Yang Ditandai :
Edit
Urutkan Berdasarkan :
Tanggal Masuk Tampilkan
Proses Lihat Detail Barang Stok Habis
Kategori Harga Diskon
Gambar III.40 Perancangan Antar Muka Data Barang
6. Perancangan antar muka ongkos kirim
PR08
Nama Layar : PR04 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Ongkos Kirim
Tabel ongkos kirim Edit Tambah Provinsi Lihat Kota
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12
Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39 Urutkan Berdasarkan :
Nama Provinsi Tampilkan
Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Proses yang ditandai : Pilih proses proses
7. Perancangan antar muka pesanan
PR04
Nama Layar : PR04 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Pesanan
Tabel pesanan proses Semua Belum bayar Butuh
konfirmasi Sudah dibayar
Proses
pengiriman Pesanan terkirim Retur Lainnya
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12
Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39 Urutkan Berdasarkan :
ID Tanggal Pesanan Pesanan Kota Tujuan Total Pembayaran Jenis Pembayaran Status
Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.42 Perancangan Antar Muka Pesanan
8. Perancangan antar muka penjualan
PR05
Nama Layar : PR05 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Penjualan
Sampai tanggal :
Dari tanggal : tampilkan
Tabel penjualan
Semua Transfer bank paypal Cash on delivery
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 Klik semua menuju PR05 Klik transfer bank menuju PR26 Klik paypal menuju PR27 Klik cash on delivery menuju PR28 Tipe Pembayaran Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
9. Perancangan antar muka terjual
PR06
Nama Layar : PR05 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman ----à Barang Terjual
Sampai tanggal :
Dari tanggal : tampilkan
Tabel barang terjual
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.44 Perancangan Antar Muka Terjual
10. Perancangan antar muka komentar
PR09
Nama Layar : PR09 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Komentar
List data komentar
Yang ditandai : Pilih aksi proses
Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 Klik proses menuju PR09 Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Urutkan Berdasarkan : Jenis Barang Isi Tampilkan
11. Perancangan antar muka Profile
PR11
Nama Layar : PR11 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header footer Klik branda menuju PR01 Klik kategori barang menuju PR02 Klik barang menuju PR03 Klik ongkos kirim menuju PR08 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik terjual PR11 Klik komentar menuju PR09 Klik profile menuju PR12 Klik ganti menuju PR11
Menu Profile
Form ganti password Form ganti profil
simpan Email :
Nama : Password baru : Ulangi password : Password Ganti Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.20 Perancangan Antar Muka Profile
12. Perancangan antar muka logout
PR12
Nama Layar : PR12 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
Klik login menuju PR01 Klik lupa password menuju PR07 Istana Kulit Sukaregang
Petugas login
Password
login
Lupa password ?
Sekarang anda sudah keluar.
13. Perancangan antar muka tambah data kategori barang
PR13
Nama Layar : PR13 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Kategori Barang
simpan Nama :
Kategori induk :
Form kategori barang
Gambar :
Choose file Copy url :
Atau upload : No file chosen Deskripsi :
Tampilkan : ya Tidak
batal
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik batal menuju PR02 Klik simpan menuju PR02 Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.48 Perancangan Antar Muka Tambah Data Kategori Barang
14. Perancangan antar muka ubah data kategori barang
PR10
Nama Layar : PR10 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Kategori Barang
simpan Nama :
Kategori induk :
Formulir ganti kategori barang
Gambar :
Choose file Copy url :
Atau upload : No file chosen Deskripsi :
Tampilkan : ya Tidak
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik batal menuju PR02 Klik simpan menuju PR02 Batal Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
15. Perancangan antar muka tambah data barang
PR14
Nama Layar : PR14 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Barang | Kategori Tampilkan Semua
Form tambah data barang
Simpan
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik batal menuju PR03 Klik simpan menuju PR03 Form tambah data barang
Batal Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.50 Perancangan Antar Muka Tambah Data Barang
16. Perancangan antar muka ubah data barang
PR18
Nama Layar : PR18 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Barang | Kategori
simpan Nama :
Kategori barang :
Formulir ganti data barang
Gambar :
Choose file Copy url :
Atau upload : No file chosen Deskripsi :
Tampilkan : ya Tidak
Tampilkan Semua
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik batal menuju PR03 Klik simpan menuju PR03 Batal Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
17. Perancangan antar muka tambah data barang pada kategori
PR36
Nama Layar : PR36 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Barang | Kategori Tampilkan Semua
Form tambah data barang
Simpan
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik simpan menuju PR03 Klik batal menuju PR03 Form tambah data barang
Batal Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.52 Perancangan Antar Muka Tambah Data Barang Pada Kategori
18. Perancangan antar muka lihat data barang pada kategori
PR37
Nama Layar : PR37 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Menu Barang | Kategori Tampil Semua
Edit
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik tambah barang menuju PR03 Klik lihat data detail barang menuju PR15 Klik cari menuju PR37 Klik tambah menuju PR17 Klik jumlah detail menuju PR15 Klik edit menuju PR18 Tambah barang Lihat data detail barang
Cari nama produk : Cari List data barang
Tambah jumlah detail Detail data barang Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
19. Perancangan antar muka laporan pesanan status belum bayar
PR19
Nama Layar : PR19 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman >> laporan pesanan
Tabel pesanan proses Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39
Dari tanggal : Sampai : Tampilkan Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.54 Perancangan Antar Muka Laporan Pesanan Status Belum Bayar
20. Perancangan antar muka laporan pesanan status butuh konfirmasi
PR20
Nama Layar : PR20 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer Logo dan nama toko
Akses operator Home Ongkos kirim Penjualan Pesanan Data barang Data kategori
Halaman >> laporan pesanan
Log out Ganti password
Komentar
Tabel pesanan proses
Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39 Dari tanggal : Sampai : Tampilkan
Gambar III.55 Perancangan Antar Muka Laporan Pesanan Status Butuh Konfirmasi
21. Perancangan antar muka laporan pesanan status sudah dibayar
PR21
Nama Layar : PR21 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman >> laporan pesanan
Tabel pesanan proses Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39
Dari tanggal : Sampai : Tampilkan Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.56 Perancangan Antar Muka Laporan Pesanan Status Sudah Dibayar
22. Perancangan antar muka laporan pesanan status proses pengiriman
PR22
Nama Layar : PR22 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman >> laporan pesanan
Tabel pesanan proses Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39
Dari tanggal : Sampai : Tampilkan Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Pengiriman
23. Perancangan antar muka laporan pesanan status pesanan terkirim
PR23
Nama Layar : PR23 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman >> laporan pesanan
Tabel pesanan proses Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39
Dari tanggal : Sampai : Tampilkan Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.58 Perancangan Antar Muka Laporan Pesanan Status Pesanan Terkirim
PR24
Nama Layar : PR24 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman >> laporan pesanan
Tabel pesanan proses Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39
Dari tanggal : Sampai : Tampilkan Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.59 Perancangan Antar Muka Laporan Pesanan Status Retur
25. Perancangan antar muka laporan pesanan status lainnya
PR25
Nama Layar : PR25 Ukuran Layar : 1024 X 768 Font : arial Warna Background : putih
header
footer
Halaman >> laporan pesanan
Tabel pesanan proses Semua Belum bayarkonfirmasiButuh dibayarSudah pengirimanProses Pesanan terkirim Retur Lainnya
Klik home menuju PR01 Klik data kategori menuju PR02 Klik data barang menuju PR03 Klik pesanan menuju PR04 Klik penjualan menuju PR05 Klik ongkos kirim menuju PR08 Klik komentar menuju PR09 Klik ganti password menuju PR11 Klik logout menuju PR12 Klik semua menuju PR04 Klik belum bayar menuju PR19 Klik butuh konfirmasi menuju PR20 Klik sudah dibayar menuju PR21 Klik proses pengiriman PR22 Klik pesanan terkirim PR23 Klik retur menuju PR24 Klik lainnya menuju PR25 Klik tampilkan menuju PR04 Klik proses menuju PR39
Dari tanggal : Sampai : Tampilkan Branda Penjualan Pesanan Ongkos Kirim Barang Kategori Barang Profile Komentar Terjual
Selamat Datang, Operator | Keluar Istana Kulit Garut
Gambar III.60 Perancangan Antar Muka Laporan Pesanan Status Lainnya
PR39
Nama Layar : PR39