3.2.3.1.2 Perancangan Antar Muka Operator
1. Perancangan antar muka login
Gambar pada 3.34 di bawah ini merupakan perancangan antar muka login pada operator yang berfungsi sebagai halaman login untuk operator.
PR06
Nama Layar : PR06
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju
PR01
Klik lupa password menuju
PR07
Granitex
Petugas login
Email Password
login
Lupa password ?
Gambar 3.34 Perancangan Antar Muka Login
2. Perancangan antar muka lupa password
Gambar pada 3.35 di bawah ini merupakan perancangan antar muka lupa password pada operator yang berfungsi jika operator kehilangan password atau
lupa password.
PR07
Nama Layar : PR07
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju
PR06
Klik proses menuju PR07
Granitex
Lupa password
Email Proses
Login
Gambar 3.35 Perancangan Antar Muka Lupa Password
3. Perancangan antar muka beranda
Gambar pada 3.36 di bawah ini merupakan perancangan antar muka beranda pada operator yang berfungsi sebagai halaman utama pada operator.
PR01
Nama Layar : PR01
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
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
header
footer Logo dan nama toko
Akses operator Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Halaman home
logout Ganti password
Komentar Total data
Info pesanan Info terbaru
Info stok barang habis
Gambar 3.36 Perancangan Antar Muka Beranda
4. Perancangan antar muka data kategori
Gambar pada 3.37 di bawah ini merupakan perancangan antar muka data kategori pada operator yang berfungsi sebagai pengolahan data kategori.
PR02
Nama Layar : PR02
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data kategori
Lihat data barang Tambah
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar List data kategori
Data detail kategori
Tambah Jumlah barang
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 menuju PR13
Klik lihat data
barang menuju PR03
Klik tambah
menuju PR36
Klik jumlah barang menuju PR37
Klik edit menuju
PR10
Gambar 3.37 Perancangan Antar Muka Data Kategori
5. Perancangan antar muka data barang
Gambar pada 3.38 di bawah ini merupakan perancangan antar muka data barang pada operator yang berfungsi sebagai pengolahan data barang.
PR03
Nama Layar : PR03
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Selamat datang, Operator | Keluar
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Halaman Data barang | Kategori
Log out Ganti password
Komentar
Tambah
Tampilkan semua
Lihat data detail barang Tambah barang
Cari nama produk : cari
Edit Data barang
Jumlah detail
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
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
Gambar 3.38 Perancangan Antar Muka Data Barang
6. Perancangan antar muka laporan pesanan
Gambar pada 3.39 di bawah ini merupakan perancangan antar muka laporan pesanan pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR04
Nama Layar : PR04
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.39 Perancangan Antar Muka Laporan Pesanan
7. Perancangan antar muka laporan penjualan
Gambar pada 3.40 di bawah ini merupakan perancangan antar muka laporan penjualan pada operator yang berfungsi sebagai pengolahan data laporan
penjualan.
PR05
Nama Layar : PR05
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 penjualan
Log out Ganti password
Komentar
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
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 PR05
Klik transfer bank menuju PR26
Klik paypal
menuju PR27
Klik cash on delivery menuju
PR28
Gambar 3.40 Perancangan Antar Muka Laporan Penjualan
8. Perancangan antar muka ongkos kirim
Gambar pada 3.41 di bawah ini merupakan perancangan antar muka ongkos kirim pada operator yang berfungsi sebagai pengolahan data ongkos kirim.
PR08
Nama Layar : PR08
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 Ongkos kirim
Tabel ongkos kirim
Log out Ganti password
Komentar
Tambah provinsi Lihat kota
Tambah Jumlah kota
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 provinsi menuju
PR31
Klik lihat kota menuju PR32
Klik tambah
menuju PR34
Klik jumlah kota menuju PR33
Klik edit menuju
PR35
Gambar 3.41 Perancangan Antar Muka Ongkos Kirim
9. Perancangan antar muka komentar
Gambar pada 3.42 di bawah ini merupakan perancangan antar muka komentar pada operator yang berfungsi sebagai pengolahan data komentar.
PR09
Nama Layar : PR09
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 komentar
List data komentar
Log out Ganti password
Komentar Yang ditandai :
proses Pilih aksi
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 proses
menuju PR09
Gambar 3.42 Perancangan Antar Muka Komentar
10. Perancangan antar muka ganti password Gambar pada 3.43 di bawah ini merupakan perancangan antar muka ganti
password pada operator yang berfungsi sebagai halaman untuk mengganti password operator.
PR11
Nama Layar : PR11
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ganti password
Form ganti password
Ganti Password :
Password baru :
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
Ulangi password :
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 ganti menuju
PR11
Gambar 3.43 Perancangan Antar Muka Ganti Password
11. Perancangan antar muka log out Gambar pada 3.44 di bawah ini merupakan perancangan antar muka log out
pada operator yang berfungsi sebagai halaman setelah operator log out.
PR12
Nama Layar : PR12
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
Klik login menuju
PR01
Klik lupa password menuju
PR07
Granitex
Petugas login
Email Password
login
Lupa password ?
Sekarang anda sudah keluar.
Gambar 3.44 Perancangan Antar Muka Logout
12. Perancangan antar muka tambah data kategori barang Gambar pada 3.45 di bawah ini merupakan perancangan antar muka tambah
data kategori barang pada operator yang berfungsi sebagai tambah data kategori barang.
PR13
Nama Layar : PR13
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data kategori
simpan Nama :
Kategori induk :
Form kategori barang
Gambar :
Choose file
Copy url : Atau upload :
No file chosen Deskripsi :
Tampilkan : Tidak
ya
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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
Gambar 3.45 Perancangan Antar Muka Tambah Data Kategori Barang
13. Perancangan antar muka ubah data kategori barang Gambar pada 3.46 di bawah ini merupakan perancangan antar muka ubah
data kategori barang pada operator yang berfungsi sebagai halaman ubah data kategori barang.
PR10
Nama Layar : PR10
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data kategori
simpan Nama :
Kategori induk :
Formulir ganti kategori barang
Gambar :
Choose file
Copy url : Atau upload :
No file chosen Deskripsi :
Tampilkan : Tidak
ya
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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
Gambar 3.46 Perancangan Antar Muka Ubah Data Kategori Barang
14. Perancangan antar muka tambah data barang Gambar pada 3.47 di bawah ini merupakan perancangan antar muka tambah
data barang pada operator yang berfungsi sebagai halaman tambah data barang.
PR14
Nama Layar : PR14
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data barang | kategori
Form tambah data barang
Simpan Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar
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
Gambar 3.47 Perancangan Antar Muka Tambah Data Barang
15. Perancangan antar muka tambah data detail barang Gambar pada 3.48 di bawah ini merupakan perancangan antar muka tambah
data detail barang pada operator yang berfungsi sebagai halaman tambah data detail barang.
PR17
Nama Layar : PR17
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data detail barang ...
Form tambah data detail barang simpan
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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 detail barang
Batal
Gambar 3.48 Perancangan Antar Muka Tambah Data Detail Barang
16. Perancangan antar muka tampil data detail barang Gambar pada 3.49 di bawah ini merupakan perancangan antar muka tampil
data detail barang pada operator yang berfungsi sebagai halaman pengolahan data detail barang.
PR16
Nama Layar : PR16
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data detail barang ...
Tabel data detail barang Tambah
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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 menuju PR17
Klik edit menuju
PR38 Edit
Gambar 3.49 Perancangan Antar Muka Tampil Data Detail Barang
17. Perancangan antar muka ubah data barang Gambar pada 3.50 di bawah ini merupakan perancangan antar muka ubah
data barang pada operator yang berfungsi sebagai halaman ubah data barang.
PR18
Nama Layar : PR18
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman Data barang | kategori
simpan Nama :
Kategori barang :
Formulir ganti data barang
Gambar :
Choose file
Copy url : Atau upload :
No file chosen Deskripsi :
Tampilkan : Tidak
ya
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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
Gambar 3.50 Perancangan Antar Muka Ubah Data Barang
18. Perancangan antar muka tambah data barang pada kategori Gambar pada 3.51 di bawah ini merupakan perancangan antar muka tambah
data barang pada kategori pada operator yang berfungsi sebagai pengolahan data barang pada kategori.
PR36
Nama Layar : PR36
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman Data barang | kategori
Form tambah data barang
Simpan Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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
Gambar 3.51 Perancangan Antar Muka Tambah Data Barang Pada Kategori
19. Perancangan antar muka lihat data barang pada kategori Gambar pada 3.52 di bawah ini merupakan perancangan antar muka lihat
data barang pada kategori pada operator yang berfungsi sebagai pengolahan data barang.
PR37
Nama Layar : PR37
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data barang | kategori
Edit Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar
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
Gambar 3.52 Perancangan Antar Muka Lihat Data Barang Pada Kategori
20. Perancangan antar muka lihat semua data detail barang Gambar pada 3.53 di bawah ini merupakan perancangan antar muka lihat
semua data detail barang pada operator yang berfungsi sebagai pengolahan data detail barang.
PR15
Nama Layar : PR15
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data detail barang
Tabel data detail barang Edit
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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 edit menuju PR38
Gambar 3.53 Perancangan Antar Muka Lihat Semua Data Detail Barang
21. Perancangan antar muka ubah data detail barang Gambar pada 3.54 di bawah ini merupakan perancangan antar muka ubah
data detail barang pada operator yang berfungsi sebagai halaman ubah data detail barang.
PR38
Nama Layar : PR38
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman data detail barang
Simpan Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Log out Ganti password
Komentar
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 PR15
Klik simpan
menuju PR15 Form ganti data detail barang
Ukuran Harga
Diskon Berat
Stok
Batal
kg
Gambar 3.54 Perancangan Antar Muka Ubah Data Detail Barang
22. Perancangan antar muka laporan pesanan status belum bayar Gambar pada 3.55 di bawah ini merupakan perancangan antar muka laporan
pesanan status belum bayar pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR19
Nama Layar : PR19
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.55 Perancangan Antar Muka Laporan Pesanan Status Belum Bayar
23. Perancangan antar muka laporan pesanan status butuh konfirmasi Gambar pada 3.56 di bawah ini merupakan perancangan antar muka laporan
pesanan status butuh konfirmasi pada operator yang berfungsi sebagai pengolahan laporan pesanan.
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.56 Perancangan Antar Muka Laporan Pesanan Status Butuh Konfirmasi
24. Perancangan antar muka laporan pesanan status sudah dibayar Gambar pada 3.57 di bawah ini merupakan perancangan antar muka laporan
pesanan status sudah dibayar pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR21
Nama Layar : PR21
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.57 Perancangan Antar Muka Laporan Pesanan Status Sudah Dibayar
25. Perancangan antar muka laporan pesanan status proses pengiriman Gambar pada 3.58 di bawah ini merupakan perancangan antar muka laporan
pesanan status proses pengiriman pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR22
Nama Layar : PR22
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.58 Perancangan Antar Muka Laporan Pesanan Status Proses Pengiriman
26. Perancangan antar muka laporan pesanan status pesanan terkirim Gambar pada 3.59 di bawah ini merupakan perancangan antar muka laporan
pesanan status pesanan terkirim pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR23
Nama Layar : PR23
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.59 Perancangan Antar Muka Laporan Pesanan Status Pesanan Terkirim
27. Perancangan antar muka laporan pesanan status retur Gambar pada 3.60 di bawah ini merupakan perancangan antar muka laporan
pesanan status retur pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR24
Nama Layar : PR24
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.60 Perancangan Antar Muka Laporan Pesanan Status Retur
28. Perancangan antar muka laporan pesanan status lainnya Gambar pada 3.61 di bawah ini merupakan perancangan antar muka laporan
pesanan status lainnya pada operator yang berfungsi sebagai pengolahan laporan pesanan.
PR25
Nama Layar : PR25
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 bayar Butuh
konfirmasi Sudah
dibayar Proses
pengiriman 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 3.61 Perancangan Antar Muka Laporan Pesanan Status Lainnya
29. Perancangan antar muka detail laporan pesanan Gambar pada 3.62 di bawah ini merupakan perancangan antar muka detail
laporan pesanan pada operator yang berfungsi sebagai halaman pengolahan detail laporan pesanan.
PR39
Nama Layar : PR39
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 detail kode pesanan
Log out Ganti password
Komentar
Detail pesanan
proses
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 proses menuju PR39
Gambar 3.62 Perancangan Antar Muka Detail Laporan Pesanan
30. Perancangan antar muka laporan penjualan transfer bank Gambar pada 3.63 di bawah ini merupakan perancangan antar muka laporan
penjualan transfer bank pada operator yang berfungsi sebagai halaman pengolahan laporan penjualan.
PR26
Nama Layar : PR26
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 penjualan
Log out Ganti password
Komentar
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
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 PR05
Klik transfer bank menuju PR26
Klik paypal
menuju PR27
Klik cash on delivery menuju
PR28
Gambar 3.63 Perancangan Antar Muka Laporan Penjualan Transfer Bank
31. Perancangan antar muka laporan penjualan paypal Gambar pada 3.64 di bawah ini merupakan perancangan antar muka laporan
penjualan paypal pada operator yang berfungsi sebagai halaman pengolahan laporan penjualan.
PR27
Nama Layar : PR27
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 penjualan
Log out Ganti password
Komentar
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
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 PR05
Klik transfer bank menuju PR26
Klik paypal
menuju PR27
Klik cash on delivery menuju
PR28
Gambar 3.64 Perancangan Antar Muka Laporan Penjualan PayPal
32. Perancangan antar muka laporan penjualan cash on delivery Gambar pada 3.65 di bawah ini merupakan perancangan antar muka laporan
penjualan cash on delivery pada operator yang berfungsi sebagai halaman pengolahan laporan penjualan.
PR28
Nama Layar : PR28
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 penjualan
Log out Ganti password
Komentar
Sampai tanggal : Dari tanggal :
tampilkan
Tabel penjualan Semua
paypal Transfer bank
Cash on delivery
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 PR05
Klik transfer bank menuju PR26
Klik paypal
menuju PR27
Klik cash on delivery menuju
PR28
Gambar 3.65 Perancangan Antar Muka Laporan Penjualan Cash On Delivery
33. Perancangan antar muka tambah data provinsi Gambar pada 3.66 di bawah ini merupakan perancangan antar muka tambah
data provinsi pada operator yang berfungsi sebagai halaman tambah provinsi.
PR31
Nama Layar : PR31
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim
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
PR08
Klik simpan menuju PR08
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Form tambah provinsi
Nama : Tampilkan :
ya tidak
Batal Simpan
Gambar 3.66 Perancangan Antar Muka Tambah Data Provinsi
34. Perancangan antar muka lihat seluruh data kota Gambar pada 3.67 di bawah ini merupakan perancangan antar muka lihat
seluruh data kota pada operator yang berfungsi sebagai halaman pengolahan data kota.
PR32
Nama Layar : PR32
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim | provinsi
Tabel data provinsi
Tambah
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
menuju PR40
Klik edit menuju PR41
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Edit
Gambar 3.67 Perancangan Antar Muka Lihat Seluruh Data Kota
35. Perancangan antar muka tambah data kota Gambar pada 3.68 di bawah ini merupakan perancangan antar muka tambah
data kota pada operator yang berfungsi sebagai halaman pengolahan data kota.
PR40
Nama Layar : PR40
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim | provinsi
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
PR32
Klik simpan menuju PR32
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Form kota
Ongkos kirim : Nama :
Provinsi :
Tampilkan : Ya
Tidak
Batal Simpan
Gambar 3.68 Perancangan Antar Muka Tambah Data Kota
36. Perancangan antar muka ubah data kota Gambar pada 3.69 di bawah ini merupakan perancangan antar muka ubah
data kota pada operator yang berfungsi sebagai halaman pengolahan data kota.
PR41
Nama Layar : PR41
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim | provinsi
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
PR32
Klik simpan menuju PR32
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Form kota
Ongkos kirim : Nama :
Provinsi :
Tampilkan : Ya
Tidak
Batal Simpan
Gambar 3.69 Perancangan Antar Muka Ubah Data Kota
37. Perancangan antar muka tambah kota di provinsi Gambar pada 3.70 di bawah ini merupakan perancangan antar muka tambah
kota di provinsi pada operator yang berfungsi sebagai halaman pengolahan data kota di provinsi.
PR34
Nama Layar : PR34
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim | provinsi
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
PR08
Klik simpan menuju PR08
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Form kota
Ongkos kirim : Nama :
Provinsi :
Tampilkan : Ya
Tidak
Batal Simpan
Gambar 3.70 Perancangan Antar Muka Tambah Kota Di Provinsi
38. Perancangan antar muka tampilkan kota di provinsi Gambar pada 3.71 di bawah ini merupakan perancangan antar muka
tampilkan kota di provinsi pada operator yang berfungsi sebagai pengolahan data kota di provinsi.
PR33
Nama Layar : PR33
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim | provinsi
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
menuju PR34
Klik edit menuju PR41
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Tambah
Tabel data ongkos kirim Edit
Gambar 3.71 Perancangan Antar Muka Tampilkan Kota Di Provinsi
39. Perancangan antar muka ubah data provinsi Gambar pada 3.72 di bawah ini merupakan perancangan antar muka ubah
data provinsi pada operator yang berfungsi sebagai pengolahan data provinsi.
PR35
Nama Layar : PR35
Ukuran Layar : 1024 X 768
Font : arial
Warna Background : putih
header
footer Logo dan nama toko
Akses operator
Halaman ongkos kirim
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
PR08
Klik simpan menuju PR08
Home
Ongkos kirim Penjualan
Pesanan Data barang
Data kategori
Logout Ganti password
Komentar Form ganti provinsi
Nama : Tampilkan :
Ya Tidak
Batal Simpan
Gambar 3.72 Perancangan Antar Muka Ubah Data Provinsi
3.2.3.1.3 Perancangan Antar Muka Member