2. 3. Perancangan Arsitektur 2. 3. 1 Perancangan Antar Muka
L01
· Klik Masuk untuk menuju form A01
· Klik masuk apabila input kosong tampil informasi login pesan
PS01 · Klik masuk apabila input salah
tampil informasi login pesan PS02
Admin panel login
Email Password
MASUK Nama Layar : L01
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Informasi Login
Gambar III.29 Perancangan antarmuka Login Adminpemilikoperator
2. Perancangan antarmuka halaman utama pemilik Perancangan antar muka beranda pada pemilik yang berfungsi sebagai
halaman utama pemilik dapat dilihat pada Gambar III.30
A01
Header Data Konsumen
Footer
Profile Pemilik
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data Konsumen untuk menuju form A02
· Klik Data Petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
Nama Layar : A01 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Administrator : Nama Pemilik
Info Pemilik Profile Pemilik
Data Petugas Laporan
Backup Restore Logout
Gambar III.30 Perancangan antarmuka halaman utama pemilik
3. Perancangan antarmuka halaman pemilik data konsumen Perancangan antar muka data konsumen pada pemilik yang berfungsi
sebagai halaman pengolahan data konsumen dapat dilihat pada Gambar III.31
A02 HEADER
Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan Text
Text Text
Text Text
Text Text
Text Text
Text Text
Text
Image ubah data
Image ubah data
Image ubah data
Image ubah data
1 2 3 4 5 .. n Halaman :
A02
Header Data konsumen
Footer
Data Konsumen
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
· Klik Ubah untuk menuju
form A08
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Administrator : Nama Pemilik
Tabel Konsumen Profile Pemilik
Data petugas Laporan
Backup Restore Logout
Ubah Hapus
Pesan berhasil gagal
Gambar III.31 Perancangan antarmuka halaman pemilik data konsumen
4. Perancangan antarmuka menu pemilik data admin Perancangan antar muka data admin pada pemilik yang berfungsi sebagai
halaman pengolahan data admin dapat dilihat pada Gambar III.32
A02 HEADER
Data petugas Informasi admin
Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan Text
Text Text
Text Text
Text Text
Text Text
Text Text
Text
Image ubah data
Image ubah data
Image ubah data
Image ubah data
1 2 3 4 5 .. n Halaman :
A03
Header Data konsumen
Footer
Data Petugas
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data Petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
· Klik Tambah untuk menuju
form A06 ·
Klik Ubah untuk menuju form A07
Nama Layar : A03 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Administrator : Nama Pemilik
Tabel Petugas Profile Pemilik
Data petugas Laporan
Backup Restore Logout
Ubah hapus
Tambah
Pesan berhasil gagal
Gambar III.32 Perancangan antarmuka menu pemilik data admin
5. Perancangan antarmuka halaman pemilik laporan Perancangan antar muka laporan pada pemilik yang berfungsi sebagai
halaman laporan dapat dilihat pada Gambar III.33
A02 HEADER
Beranda Data petugas
Informasi admin Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan Text
Text Text
Text Text
Text Text
Text
Image ubah data
Image ubah data
Image ubah data
Image ubah data
1 2 3 4 5 .. n Halaman :
A04
Header Data konsumen
Footer
Laporan
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data Petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
Nama Layar : A04 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Administrator : Nama Administrator
Profile Pemilik Data petugas
Laporan Backup Restore
Logout
Lihat Dari
Sampai
Gambar III.33 Perancangan antarmuka halaman pemilik laporan
6. Perancangan antarmuka halaman backup restore Perancangan antar muka backup dan restore pada pemilik yang berfungsi
sebagai halaman backup dan restore data website dapat dilihat pada Gambar III.34
A02 HEADER
Beranda Data pelanggan
Data petugas Informasi admin
Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan Text
Text Text
Text Text
Text Text
Text Text
Text Text
Text
Image ubah data
Image ubah data
Image ubah data
Image ubah data
1 2 3 4 5 .. n Halaman :
A05
Header Data konsumen
Footer
Backup Restore Database
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data Petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
Nama Layar : A05 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logout
Administrator : Nama Administrator Profile Pemilik
Data petugas Laporan
Backup Restore
Backup Restore
Form Backup Restore
Gambar III.34 Perancangan antarmuka halaman pemilik backup restore
7. Perancangan antarmuka halaman pemilik tambah admin Perancangan antar muka tambah petugas pada pemilik yang berfungsi
sebagai halaman tambah petugas dapat dilihat pada Gambar III.35
A02 HEADER
Beranda Data pelanggan
Data petugas Informasi admin
Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan
1 2 3 4 5 .. n Halaman :
A06
Header Data konsumen
Footer
Data Form Petugas
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data Petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik simpan untuk menuju form A03 muncul informasi
pesan berhasilgagal ·
Klik batal untuk menuju form A03
· Klik Logout untuk menuju
form L01
Nama Layar : A06 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Administrator : Nama Administrator
Profile Pemilik Data petugas
Laporan Backup Restore
Logout
Tambah Petugas Nama
Email Simpan
Batal Password
No Telepon Level
Gambar III.35 Perancangan antarmuka halaman pemilik tambah petugas
8. Perancangan antarmuka halaman pemilik ubah petugas Perancangan antar muka ubah petugas pada pemilik yang berfungsi
sebagai halaman ubah data petugas dapat dilihat pada Gambar III.36
A02 HEADER
Data pelanggan Informasi admin
Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan
1 2 3 4 5 .. n Halaman :
A07
Header Data konsumen
Footer
Data Form Petugas
· Klik Profile Pemilik untuk
menuju form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
Nama Layar : A07 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Administrator : Nama Pemilik
Profile Pemilik Data petugas
Laporan Backup Restore
Logout
Ubah Petugas Nama
Email TEXT
TEXT
Simpan Batal
Ubah aktifasi petugas Kontak
TEXT Level
TEXT Diaktifkan
TEXT TEXT
Gambar III.36 Perancangan antarmuka halaman pemilik ubah petugas
9. Perancangan antarmuka halaman pemilik ubah konsumen Perancangan antar muka ubah konsumen pada pemilik yang berfungsi
sebagai halaman ubah data konsumen dapat dilihat pada Gambar III.37
A02 HEADER
Beranda Data pelanggan
Data petugas Informasi admin
Logout
Footer Data Pelanggan
- Klik Beranda untuk menuju form A01 - Klik Data pelanggan untuk menuju form
A02 - Klik data petugas untuk menuju form
A03 - Klik informasi petugas untuk menuju
form A04 - Klik Logout untuk menuju form L01
- Klik tombol image ubah data untuk menuju form A05
Nama Layar : A02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif ID
Nama Pelanggan Email pelanggan
Diaktifkan
1 2 3 4 5 .. n Halaman :
A08
Header Data konsumen
Footer
Data Konsumen
· Klik Beranda untuk menuju
form A01 ·
Klik Data konsumen untuk menuju form A02
· Klik Data petugas untuk
menuju form A03 ·
Klik Laporan untuk menuju form A04
· Klik Backup Restore untuk
menuju form A05 ·
Klik Logout untuk menuju form L01
· Klik simpan untuk menuju
form A02 dengan pesan berhasilgagal
· Klik batal untuk menuju
form A02
Nama Layar : A08 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Administrator : Nama Administrator
Beranda Data admin
Laporan Backup Restore
Logout
Form Ubah Konsumen Nama
Email Simpan
Batal Ubah aktifasi konsumen
TEXT TEXT
TEXT Tanggal daftar
TEXT Kontak
TEXT Diaktifkan
TEXT
Gambar III.37 Perancangan antarmuka halaman pemilik ubah konsumen
ff Perancangan antarmuka halaman operator 1. Perancangan antarmuka halaman utama operator
Perancangan antar muka beranda pada petugas yang berfungsi sebagai halaman halaman utama operator dapat dilihat pada Gambar III.38
K01
HEADER Profile Operator Data Pembayaran
Footer Informasi Profile Operator
· Klik Profile Operator untuk
menuju form K01 ·
Klik Data Pembayaran untuk menuju form K02
· Klik Data Pesanan untuk menuju
form K03 ·
Klik Data Konsumen untuk menuju form K04
· Klik Logout untuk menuju form
L01
Nama Layar : K01 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Data Konsumen
Petugas : nama kasir Logout
Data Pesanan
Gambar III.38 Perancangan antar muka halaman utama operator
2. Perancangan antar muka halaman data pembayaran Perancangan antar muka data pembayaran pada operator yang berfungsi
sebagai halaman pengolahan data pembayaran dapat dilihat pada Gambar III.39
K02
HEADER
Footer Tabel pembayaran
· Klik Beranda untuk menuju form
K01 ·
Klik Data Pembayaran untuk menuju form K02
· Klik Data Pesanan untuk menuju
form K03 ·
Klik Data Konsumen untuk menuju form K04
· Klik Logout untuk menuju form
L01 ·
Klik tombol proses untuk menuju form K05
· Klik semua pembayaran, baru,
tunggu konfirmasi untuk menuju form K02
Nama Layar : K02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logo Semua
pembayaran
Pengolahan Data Pembayaran
Proses Baru
Profile Operator Data Pembayaran Data Konsumen
Tunggu Konfirmasi
Data Pesanan
Gambar III.39 Perancangan antarmuka halaman data pembayaran
3. Perancangan antar muka halaman data pesanan Perancangan antar muka data pesanan pada operator yang berfungsi
sebagai halaman informasi data pesanan dapat dilihat pada Gambar III.40
K03
HEADER
Footer ·
Klik Profile Operator untuk menuju form K01
· Klik Data Pembayaran untuk
menuju form K02 ·
Klik Data Pesanan untuk menuju form K03
· Klik Data Konsumen untuk
menuju form K04 ·
Klik Logout untuk menuju form L01
· Klik Semua Pemesanan untuk
menuju form K03 ·
Klik Lunas untuk menuju form K03
· Klik Pesanan Dikirim untuk
menuju form K03 ·
Klik Pesanan Diterima untuk menuju form K03
· Klik Pesanan Diretur untuk
menuju form K03 ·
Klik Pesanan Kadaluarsa untuk menuju form K03
Nama Layar : K03 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout Profile Operator
Data Pembayaran Data Konsumen
Data Pesanan Data Pesanan
Pengolahan Data Pesanan
Semu Pesanan Lunas
Pesanan Dikirim Pesanan Diterima
Pesanan Diretur Pesanan Kadaluarsa
Gambar III.40 Perancangan antar muka data konsumen
1. Perancangan antar muka halaman data konsumen Perancangan antar muka data Konsumen pada operator yang berfungsi
sebagai halaman informasi data konsumen dapat dilihat pada Gambar III.41
K04
HEADER
Footer ·
Klik Profile Operator untuk menuju form K01
· Klik Data Pembayaran untuk
menuju form K02 ·
Klik Data Pesanan untuk menuju form K03
· Klik Data Konsumen untuk
menuju form K04 ·
Klik Logout untuk menuju form L01
Nama Layar : K04 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout Profile Operator
Data Pembayaran Data Konsumen
Data Informasi Konsumen
Data Konsumen Data Pesanan
Gambar III.41 Perancangan antar muka data konsumen
gg Perancangan antarmuka halaman admin 1. Perancangan antarmuka halaman utama admin
Perancangan antar muka beranda pada admin yang berfungsi sebagai halaman halaman utama admin dapat dilihat pada Gambar III.42
P01
HEADER Admin profile
Kelola Data Kelola Pesanan
Footer Informasi
· Klik Beranda untuk menuju form
P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05,
P06,P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
Nama Layar : P01 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Kelola Laporan
Petugas : nama petugas Logout
Kelola Komentar Kelola Operator
Gambar III.42 Perancangan antarmuka halaman utama admin
2. Perancangan antarmuka halaman admin data kategori Perancangan antar muka data kategori pada admin yang berfungsi sebagai
halaman pengolahan data kategori dapat dilihat pada Gambar III.43
P02
HEADER
Footer Tabel Kategori
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P13 ·
Klik tombol cari untuk menuju form P02
· Klik tombol Ubah untuk menuju
form P14 ·
Klik tombol Hapus untuk menuju form P02
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P02
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
+ Tambah Kategori
Ubah Hapus
Cari Admin profile
Kelola Data Kelola Pesanan
Kelola laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.43 Perancangan antarmuka halaman admin kategori
3. Perancangan antarmuka halaman admin barang Perancangan antar muka data barang pada admin yang berfungsi sebagai
halaman pengolahan data barang dapat dilihat pada Gambar III.44
P03
HEADER
Footer Tabel Barang
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P15 ·
Klik tombol cari untuk menuju form P03
· Klik tombol Ubah untuk menuju
form P16 ·
Klik tombol Hapus untuk menuju form P03
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P03
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
+ Tambah Barang
Ubah Hapus
Cari Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.44 Perancangan antarmuka halaman admin barang
4. Perancangan antarmuka halaman admin provinsi Perancangan antar muka data provinsi pada admin yang berfungsi sebagai
halaman pengolahan data provinsi dapat dilihat pada Gambar III.45
P04
HEADER
Footer Tabel Provinsi
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P17 ·
Klik tombol cari untuk menuju form P04
· Klik tombol Ubah untuk menuju
form P18 ·
Klik tombol Hapus untuk menuju form P04
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P04
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
+ Tambah Provinsi
Ubah Hapus
Cari Admin profile
Kelola data Kelola pesanan
Kelola laporan Kelola komentar Kelola operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.45 Perancangan antarmuka halaman admin provinsi
5. Perancangan antarmuka halaman admin kota Perancangan antar muka data kota pada admin yang berfungsi sebagai
halaman pengolahan data kota dapat dilihat pada Gambar III.46
P05
HEADER
Footer Tabel Kota
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P19 ·
Klik tombol cari untuk menuju form P05
· Klik tombol Ubah untuk menuju
form P20 ·
Klik tombol Hapus untuk menuju form P04
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P05
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Logout +
Tambah Kota
Ubah Hapus
Cari Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.46 Perancangan antarmuka halaman admin kota
6. Perancangan antarmuka halaman admin Jasa Pengiriman Perancangan antar muka data jasa pengiriman pada admin yang berfungsi
sebagai halaman pengolahan data jasa pengiriman dapat dilihat pada Gambar III.47
P06
HEADER
Footer Tabel Jasa Pengiriman
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P21 ·
Klik tombol cari untuk menuju form P06
· Klik tombol Ubah untuk menuju
form P22 ·
Klik tombol Hapus untuk menuju form P06
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P06
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Logout +
Tambah Jasa Pengiriman
Ubah Hapus
Cari Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.47 Perancangan antarmuka halaman admin jasa pengiriman
7. Perancangan antarmuka halaman admin Paket Pengiriman Perancangan antar muka data paket pengiriman pada admin yang berfungsi
sebagai halaman pengolahan data paket pengiriman dapat dilihat pada Gambar III.48
P07
HEADER
Footer Tabel Jasa Pengiriman
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P23 ·
Klik tombol cari untuk menuju form P07
· Klik tombol Ubah untuk menuju
form P24 ·
Klik tombol Hapus untuk menuju form P07
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P07
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Logout +
Tambah Paket Pengiriman
Ubah Hapus
Cari Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.48 Perancangan antarmuka halaman admin paket pengiriman
8. Perancangan antarmuka halaman admin menu ongkos kirim Perancangan antar muka data ongkos kirim pada admin yang berfungsi
sebagai halaman pengolahan data ongkos kirim dapat dilihat pada Gambar III.49
P08
HEADER
Footer Tabel Ongkos Kirim
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P25 ·
Klik tombol cari untuk menuju form P08
· Klik tombol Ubah untuk menuju
form P26 ·
Klik tombol Hapus untuk menuju form P08
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 Nama Layar : P08
Ukuran : 920px Font : verdana, arial, helvetica, sans-serif
Logout +
Tambah Ongkos Kirim
Ubah Hapus
Cari Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Bank
Gambar III.49 Perancangan antarmuka halaman admin ongkos kirim
9. Perancangan antarmuka halaman admin Bank Perancangan antarmuka data bank pada admin yang berfungsi sebagai
halaman pengolahan data bank dapat di lihat pada Gambar III.50
P27
HEADER
Footer Tabel Bank
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P08 ·
Klik Kelola Pesanan untuk menuju form P09
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol tambah untuk
menuju form P25 ·
Klik tombol cari untuk menuju form P08
· Klik tombol Ubah untuk menuju
form P26 ·
Klik tombol Hapus untuk menuju form P08
· Klik Data Kategori untuk menuju
P02 ·
Klik Data Barang untuk menuju P03
· Klik Data Provinsi untuk menuju
P04 ·
Klik Data Kota untuk menuju P05
· Klik Jasa Pengiriman untuk
menuju P06 ·
Klik Paket Pengiriman untuk menuju P07
· Klik Ongkos Kirim untuk menuju
P08 ·
Klik Bank untuk menuju P27 ·
Klik tambah bank untuk menuju P28
Nama Layar : P27 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logout
+ Tambah Bank
Hapus Cari
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Bank
Gambar III.50 DFD level Perancangan antarmuka halaman admin bank
10. Perancangan antarmuka halaman admin laporan Perancangan antar muka laporan pada admin yang berfungsi sebagai
halaman pengolahan laporan penjualan dapat dilihat pada Gambar III.51
P10
HEADER
Footer Tabel penjualan
· Klik Admin Profile untuk menuju
form P01 ·
Klik Kelola Data untuk menuju form P02, P03, P04, P05, P06,
P07,P13 ·
Klik Kelola Pesanan untuk menuju form P08
· Klik Kelola Komentar untuk
menuju form P10 ·
Klik Kelola Operator untuk menuju form P11
· Klik Kelola Laporan untuk
menuju form P12 ·
Klik Logout untuk menuju form L01
· Klik tombol cari untuk menuju
form P08 ·
Klik tombol proses untuk menuju form P09
Nama Layar : P10 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Pengolahan Laporan
Cari Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar
Kelola Operator Dari tanggal
Sampai tanggal
Gambar III.51 Perancangan antarmuka halaman admin laporan
11. Perancangan antarmuka halaman admin komentar Perancangan antar muka data komentar pada admin yang berfungsi
sebagai halaman pengolahan data komentar dapat dilihat pada Gambar III.52
P11
HEADER
Footer ·
Klik Beranda untuk menuju form P01
· Klik Data Master untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Pesanan untuk menuju form
P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik tombol cari untuk menuju form P08
· Klik tombol proses untuk menuju
form P09
Nama Layar : P11 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Pengolahan Komentar
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator
Table Komentar
Tampilkan Proses
Pesan berhasil gagal
Gambar III.52 Perancangan antarmuka halaman admin komentar
12. Perancangan antarmuka halaman admin menu profil Perancangan antar muka profil pada admin yang berfungsi sebagai
halaman pengolahan data admin dapat dilihat pada Gambar III.53
P12
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik tombol cari untuk menuju form P08
· Klik tombol proses untuk menuju
form P09
Nama Layar : P12 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout Admin Profile
Kelola Data Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Operator
Tabel operator Status
Gambar III.53 Perancangan antarmuka halaman admin kelola operator
13. Perancangan antarmuka halaman admin menu tambah kategori Perancangan antar muka data tambah kategori pada admin yang berfungsi
sebagai halaman menambah kategori dapat dilihat pada Gambar III.54
P13
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P03
· Pilih Batal untuk menuju P03
Nama Layar : P13 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Tambah Data Kategori
Admin Profile Kelola Data
Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Nama Kategori Ditampilkan
Simpan Batal
Gambar III.54 Perancangan antarmuka halaman admin tambah kategori
14. Perancangan antarmuka halaman admin ubah kategori Perancangan antar muka data ubah kategori pada admin yang berfungsi
sebagai halaman menambah kategori dapat dilihat pada Gambar III.55
P14
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P03
· Pilih Batal untuk menuju P03
Nama Layar : P14 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Ubah Data Kategori
Admin Profile Kelola Data
Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Text Nama Kategori
Ditampilkan Text
Simpan Batal
Gambar III.55 Perancangan antarmuka halaman admin ubah kategori
15. Perancangan antarmuka halaman admin menu tambah barang Perancangan antar muka data tambah barang pada admin yang berfungsi
sebagai halaman menu tambah barang dapat dilihat pada Gambar III.56
P15
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P02
· Pilih Batal untuk menuju P02
Nama Layar : P15 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Tambah Data Barang
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Text
Kategori Kode Barang
Simpan Batal
Nama Barang Harga
Diskon Deskripsi
Ditampilkan Text
Gambar III.56 Perancangan antarmuka halaman admin tambah barang
16. Perancangan antarmuka halaman admin menu ubah barang Perancangan antar muka data ubah barang pada admin yang berfungsi
sebagai halaman merubah data barang dapat dilihat pada Gambar III.57
P16
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P02
· Pilih Batal untuk menuju P02
Nama Layar : P16 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Ubah Data Barang
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Text
Kategori Kode Barang
Text
Simpan Batal
Nama Barang Text
Harga Text
Diskon Text
Deskripsi Text
Ditampilkan Text
Gambar III.57 Perancangan antarmuka halaman admin ubah barang
17. Perancangan antarmuka halaman admin tambah provinsi Perancangan antar muka data tambah provinsi pada admin yang berfungsi
sebagai halaman menu tambah provinsi dapat dilihat pada Gambar III.58
P17
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P04
· Pilih Batal untuk menuju P04
Nama Layar : P17 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Tambah Data Provinsi
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Nama Provinsi
Simpan Batal
Gambar III.58 Perancangan antarmuka halaman admin tambah provinsi
18. Perancangan antarmuka halaman admin menu ubah provinsi
Perancangan antar muka data ubah provinsi pada admin yang berfungsi sebagai halaman merubah data provinsi dapat dilihat pada Gambar III.59
P18
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P04
· Pilih Batal untuk menuju P04
Nama Layar : P18 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Ubah Data Provinsi
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Text
Nama Provinsi Simpan
Batal
Gambar III.59 Perancangan antarmuka halaman admin ubah provinsi
19. Perancangan antarmuka halaman admin tambah kota Perancangan antar muka data tambah kota pada admin yang berfungsi
sebagai halaman menu tambah kota dapat dilihat pada Gambar III.60
P19
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P23
· Pilih Batal untuk menuju P05
Nama Layar : P19 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Tambah Data Kota
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Nama kota
Simpan Batal
Provinsi
Gambar III.60 Perancangan antarmuka halaman admin tambah kota
20. Perancangan antarmuka halaman admin ubah kota Perancangan antar muka data ubah kota pada admin yang berfungsi
sebagai halaman merubah data kota dapat dilihat pada Gambar III.61
20
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P23
· Pilih Batal untuk menuju P05
Nama Layar : P20 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Ubah Data Kota
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Text
Nama kota Simpan
Batal Text
Provinsi
III.61 Perancangan antarmuka halaman admin ubah kota
21. Perancangan antarmuka halaman admin menu tambah jasa pengiriman Perancangan antar muka data tambah jasa pengiriman pada admin yang
berfungsi sebagai halaman menu tambah jasa pengiriman dapat dilihat pada Gambar III.62
P21
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P06
· Pilih Batal untuk menuju P06
Nama Layar : P21 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Tambah Data Jasa Pengiriman
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Nama Jasa Pengiriman
Simpan Batal
Url Jasa Pengiriman Ditampilkan
Gambar III.62 Perancangan antarmuka admin tambah jasa pengiriman
22. Perancangan antarmuka halaman admin ubah jasa pengiriman Perancangan antar muka data ubah jasa pengiriman pada admin yang
berfungsi sebagai halaman merubah data jasa pengiriman dapat dilihat pada Gambar III.63
P22
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P06
· Pilih Batal untuk menuju P06
Nama Layar : P22 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Ubah Data Jasa Pengiriman
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator Data Kategori
Data Barang Data Provinsi
Data Kota Jasa Pengiriman
Ongkos Kirim Paket
Pengiriman Text
Nama Jasa Pengiriman Simpan
Batal Text
Url Jasa Pengiriman Ditampilkan
Gambar III.63 Perancangan antarmuka admin ubah jasa pengiriman
23. Perancangan antarmuka halaman admin tambah paket pengiriman Perancangan antar muka data tambah paket pengiriman pada admin yang
berfungsi sebagai halaman menu tambah paket pengiriman dapat dilihat pada Gambar III.64
P23
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P13
· Pilih Batal untuk menuju P13
Nama Layar : P23 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
Tambah Paket Pengiriman
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Nama Jasa Pengiriman Simpan
Batal Paket Pengiriman
Gambar III.64 Perancangan antarmuka admin tambah paket pengiriman
24. Perancangan antarmuka halaman admin menu ubah paket pengiriman Perancangan antar muka data ubah paket pengiriman pada admin yang
berfungsi sebagai halaman merubah data paket pengiriman dapat dilihat pada Gambar III.65
P24
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P13
· Pilih Batal untuk menuju P13
Nama Layar : P24 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
Ubah Paket Pengiriman
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Nama Jasa Pengiriman Simpan
Batal Paket Pengiriman
Gambar III.65 Perancangan antarmuka admin ubah paket pengiriman
25. Perancangan antarmuka halaman admin tambah ongkos kirim Perancangan antar muka data tambah ongkos kirim pada admin yang
berfungsi sebagai halaman menu tambah ongkos kirim dapat dilihat pada Gambar III.66
P25
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P07
· Pilih Batal untuk menuju P07
Nama Layar : P25 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
Tambah Ongkos Kirim
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Jasa Pengiriman Simpan
Batal Paket Pengiriman
Provinsi Kota
Ongkos Kirim
Gambar III.66 Perancangan antarmuka admin tambah ongkos kirim
26. Perancangan antarmuka halaman admin ubah ongkos kirim Perancangan antar muka data ubah ongkos kirim pada admin yang
berfungsi sebagai halaman merubah ongkos kirim dapat dilihat pada Gambar III.67
P26
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P07
· Pilih Batal untuk menuju P07
Nama Layar : P27 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Petugas : nama petugas Logout
Ubah Ongkos Kirim
Admin Profile Kelola Data
Kelola Pesanan Kelola Laporan
Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Jasa Pengiriman Simpan
Batal Paket Pengiriman
Provinsi Kota
Text Ongkos Kirim
Gambar III.67 Perancangan antarmuka halaman admin ubah ongkos kirim
27. Perancangan antarmuka halaman admin tambah bank Perancangan antarmuka data tambah bank pada admin yang berfungsi sebagai
halaman menambah data bank dapat dilihat pada Gambar III.68
P27
HEADER
Footer ·
Klik Admin Profile untuk menuju form P01
· Klik Kelola Data untuk menuju
form P02, P03, P04, P05, P06, P07,P13
· Klik Kelola Pesanan untuk
menuju form P08 ·
Klik Kelola Komentar untuk menuju form P10
· Klik Kelola Operator untuk
menuju form P11 ·
Klik Kelola Laporan untuk menuju form P12
· Klik Logout untuk menuju form
L01 ·
Klik Data Kategori untuk menuju P03
· Klik Data Barang untuk menuju
P02 ·
Klik Data Provinsi untuk menuju P04
· Klik Data Kota untuk menuju
P05 ·
Klik Jasa Pengiriman untuk menuju P06
· Klik Paket pengiriman untuk
menuju P13 ·
Klik Ongkos Kirim untuk menuju P08
· Pilih Simpan untuk menuju P03
· Pilih Batal untuk menuju P03
Nama Layar : P28 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Petugas : nama petugas
Logout
Tambah Data Bank
Admin Profile Kelola Data
Kelola Pesanan
Kelola Laporan Kelola Komentar Kelola Operator
Data Kategori Data Barang
Data Provinsi Data Kota
Jasa Pengiriman Ongkos Kirim
Paket Pengiriman
Nama Bank Simpan
Batal Atas nama
Rekening
Gambar III.68 Perancangan antarmuka halaman admin tambah barang
hh Perancangan antarmuka halaman pengunjung 1. Perancangan antarmuka beranda
Perancangan antar muka beranda yang berfungsi sebagai halaman utama dapat dilihat pada Gambar III.69
TP01
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
Nama Layar :TP01 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Beranda Barang
Probably Login
Toko Kami Kontak
Gambar Social Network
Tracking Barang Jasa Pengiriman
No resi Lacak
Email Password
Gambar III.69 Perancangan antarmuka beranda
2. Perancangan antarmuka halaman Barang Perancangan antar muka barang yang berfungsi sebagai halaman untuk
menampilkan barang dapat dilihat pada Gambar III.70
TP02
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik daftar untuk menuju TP11
· Klik lupa password untuk
menuju TP12 ·
Klik kategori1,2,3 untuk menuju T02
· Klik Terlaris untu menuju TP02
· Klik Terbaru untuk menuju TP02
· Klik Rekomendasi untuk menuju
TP02 ·
Klik nama barang untuk menuju TP13
· Klik gambar barang untuk
menuju TP13
Nama Layar :TP02 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Logo
Beranda Barang
Probably Toko Kami
Kontak
Gambar Kategori
Kategori1 Kategori2
Kategori3 Daftar barang
Rekomendasi Terbaru
Terlaris Gambar
Gambar Gambar
Nama barang Nama barang
Nama barang Nama barang
Gambar Gambar
Gambar Gambar
Nama barang Nama barang
Nama barang Nama barang
Keranjang Jumlah
Total Email
Password
Login
Daftar Lupa Password
Gambar
Gambar III.70 Perancangan antarmuka barang
3. Perancangan antarmuka Probably Perancangan antar muka Probably yang berfungsi sebagai halaman
informasi mengenai Probably Strret Wear dapat dilihat pada Gambar III.71
TP03
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Produk untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik daftar untuk menuju TP11
· Klik lupa password untuk
menuju TP12 ·
Klik kategori1,2,3 untuk menuju T02
· Klik Rekomendasi untu menuju
TP02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02
Nama Layar :TP03 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Logo
Beranda Produk
Probably Toko Kami
Kontak
Text Kategori
Kategori1 Kategori2
Kategori3 Daftar barang
Rekomendasi Terbaru
Terlaris Keranjang
Jumlah Total
Email Password
Login
Daftar Lupa Password
Probably
Gambar
Gambar III.71 Perancangan antarmuka probably
4. perancangan antarmuka toko kami Perancangan antar muka toko kami yang berfungsi sebagai halaman
informasi mengenai toko kami menjual barang dapat dilihat pada Gambar III.72
TP04
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Produk untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik daftar untuk menuju TP11
· Klik lupa password untuk
menuju TP12 ·
Klik kategori1,2,3 untuk menuju T02
· Klik Terlaris untu menuju TP02
· Klik Terbaru untuk menuju TP02
· Klik Rekomendasi untuk menuju
TP02
Nama Layar :TP04 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Logo
Beranda Produk
Probably Toko Kami
Kontak
Text Kategori
Kategori1 Kategori2
Kategori3 Daftar barang
Rekomendasi Terlaris
Terbaru Keranjang
Jumlah Total
Email Password
Login
Daftar Lupa Password
Toko Kami
Gambar
Gambar III.72 Perancangan antarmuka toko kami
5. Perancangan antarmuka kontak Perancangan antar muka kontak yang berfungsi sebagai halaman informasi
mengenai bagaimana untuk berkomikasi dengan distro Probably dapat dilihat pada Gambar III.73
TP05
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik daftar untuk menuju TP11
· Klik lupa password untuk
menuju TP12 ·
Klik kategori1,2,3 untuk menuju T02
· Klik Terlaris untu menuju TP02
· Klik Terbaru untuk menuju TP02
· Klik Banyak dilihat untuk menuju
TP02 ·
Klik Diskon untuk menuju TP02
Nama Layar :TP05 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif
Logo
Beranda Barang
Probably Toko Kami
Kontak
Gambar
Social network Email
Password
Login
Daftar Lupa Password
Kontak
Chat Plugin
Text Text
Text
Gambar III.73 Perancangan antarmuka menu kontak
6. Perancangan antarmuka daftar Perancangan antar muka bantuan yang berfungsi sebagai halaman daftar
menjadi konsumen dapat dilihat pada Gambar III.74
TP11
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Apabila data kosong maka akan
muncul pesan PS19, PS20, PS21, PS22, PS23, PS24.
Nama Layar :TP11 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Nama Lengkap Email
Password No TelpHp
Alamat Lengkap Provinsi
Kota Kodepos
Daftar Beranda
Barang Probably
Toko Kami Kontak
Email Password
Login Daftar
Lupa Password Isi data dengan benar
Social Network Tracking Barang
Jasa Pengiriman No resi
Lacak
Masukan kode berikut
Informasi untuk login
Ulangi Password
Informasi konsumen
Captcha
Gambar III.74 Perancangan antarmuka Daftar
7. Perancangan antarmuka Lupa password Perancangan antar muka lupa password yang berfungsi sebagai halaman
untuk mendapatkan password kembali dapat dilihat pada Gambar III.75
TP12
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik menu Daftar untuk menu
TP11 ·
Klik daftar untuk menuju TP11 ·
Klik lupa password untuk menuju TP12
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
Nama Layar :TP12 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Lupa password
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Masukkan Email anda Kirim
Beranda Barang
Probably Toko Kami
Kontak Email
Password Login
Daftar Lupa Password
Keranjang Jumlah
Total Gambar
Masukan kode Captcha
Gambar III.75 Perancangan antarmuka lupa password
8. Perancangan antarmuka Detail barang Perancangan antar muka detail barang yang berfungsi sebagai halaman
melihat detail barang dapat dilihat pada Gambar III.76
TP13
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik menu Daftar untuk menu
TP11 ·
Klik daftar untuk menuju TP11 ·
Klik lupa password untuk menuju TP12
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik Tambah ke keranajng untuk
menuju TP09
Nama Layar :TP13 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Nama barang
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Harga
Tambahkan ke keranjang
Kode Barang Stok
Diskon Deskripsi
Quantity Ukuran
Text Text
Text Text
Gambar Beranda
Barang Probably
Toko Kami Kontak
Email Password
Login Daftar
Lupa Password Keranjang
Jumlah Total
Rating Text
Gambar
Gambar III.76 Perancangan antarmuka detail barang
9. Perancangan antarmuka Keranjang Perancangan antarmuka keranjang yang berfungsi sebagai keranjang
belanja dapat dilihat pada Gambar III.77
TP09
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik menu Daftar untuk menu
TP11 ·
Klik daftar untuk menuju TP11 ·
Klik lupa password untuk menuju TP12
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik diskon untuk menuju TP02
· Klik lanjutkan Belanja untuk
menuju TP02
Nama Layar :TP09 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Nama barang
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Kode barang Ukuran
Harga Diskon Keranjang Belanja Anda
Quantity Total
Aksi Text
Text Text
Text Text
Text Hapus Total Bayar : Rp. text
Perbaharui Keranjang | Kosongkan Keranjang | Selesai Lanjutkan belanja
Keterangan Text
Beranda Barang
Probably Toko Kami
Kontak Email
Password Login
Daftar Lupa Password
Keranjang Jumlah
Total Gambar
Gambar III.77 Perancangan antarmuka keranjang
ii Perancangan antarmuka halaman konsumen 1. Perancangan antarmuka info alamat
Perancangan antarmuka info alamat yang berfungsi sebagai informasi alamat konsumen dapat dilihat pada Gambar III.78
TP14
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik Retur untuk menuju TP08
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik logout untuk menuju TP01 ·
Klik ubah untuk menuju TP22
Nama Layar :TP14 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Informasi Alamat Pengiriman Menu Konsumen
Info Alamat
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Nama
Ubah Alamat
Kota Provinsi
Kodepos Handphone
Text Text
Text Text
Text Info Akun
Pesanan Text
Beranda Barang
Probably Toko Kami
Kontak Logout
Selamat Datang Konsumen Keranjang
Jumlah Total
Gambar
Gambar III.78 Perancangan antar muka info alamat
2. Perancangan antarmuka ubah alamat Perancangan antarmuka ubah alamat yang berfungsi sebagai mengubah
alamat konsumen dapat dilihat pada Gambar III.79
TP22
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik nama barang untuk menuju
TP13 ·
Klik info alamat untuk menuju TP14
· Klik info akun untuk menuju
TP15 ·
Klik pesanan untuk menuju TP16
· Klik logout untuk menuju TP01
Nama Layar :TP22 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Informasi Alamat Pengiriman
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Nama
Ubah Alamat
Kota Provinsi
Kodepos Handphone
text text
text text
text text
Batal Beranda
Barang Probably
Toko Kami Kontak
Logout Selamat Datang Konsumen
Keranjang Jumlah
Total Menu Konsumen
Info Alamat Info Akun
Pesanan Gambar
Gambar III.79 Perancangan antarmuka ubah alamat
3. Perancangan antarmuka info akun Perancangan antarmuka info akun yang berfungsi sebagai informasi akun
konsumen dapat dilihat pada Gambar III.80
TP15
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik logout untuk menuju TP01
Nama Layar :TP15 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Informasi akun
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Nama Text
Beranda Barang
Probably Toko Kami
Kontak Logout
Selamat Datang Konsumen Keranjang
Jumlah Total
Menu Konsumen Info Alamat
Info Akun Pesanan
Email Alamat
Text Text
Gambar Ubah Password
Gambar III.80 Perancangan antarmuka informasi akun
4. Perancangan antarmuka pesanan Perancangan antarmuka info akun yang berfungsi sebagai history pesanan
dapat dilihat pada Gambar III.81
TP16
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik Detail untuk menuju TP17 ·
Klik Bayar untuk menuju TP18 ·
Klik logout untuk menuju TP01
Nama Layar :TP16 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Informasi pesanan anda
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
No Kode Pesanan Tanggal Pesanan Total Bayar Status Pembayaran Aksi
Text Text
Text Text
Text Detail | Bayar
Keranjang Jumlah
Total Menu Konsumen
Info Alamat Info Akun
Pesanan Beranda
Barang Probably
Toko Kami Kontak
Logout Selamat Datang Konsumen
Gambar
Gambar III.81 Perancangan antarmuka pesanan
5. Perancangan antarmuka detail pesanan Perancangan antarmuka detail pesanan yang berfungsi untuk melihat detail
barang yang di pesan dapat dilihat pada Gambar III.82
TP17
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02Klik toko kami untuk
menuju TP04 ·
Klik info alamat untuk menuju TP14
· Klik info akun untuk menuju
TP15 ·
Klik pesanan untuk menuju TP16
· Klik logout untuk menuju TP01
Nama Layar :TP17 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Informasi pesanan anda
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
No Pesanan Penerima
Tanggal Pesanan Alamat
Kodepos Handphone
Text Text
Text Text
Text Jasa Pengiriman
Tanggal Kadaluarsa
No Pesanan Alamat Pengiriman
Paket Pengiriman Text
Text Text
Text Text
Detail Pesanan
Kode Pesanan Nama Ukuran Quantity Harga
Diskon Subtotal
Text Text
Text Text
Text Text
Total Ongkos Kirim
Total Bayar Text
Text Text
Status text
Keranjang Jumlah
Total Menu Konsumen
Info Alamat Info Akun
Pesanan Beranda
Barang Probably
Toko Kami Kontak
Logout Selamat Datang Konsumen
Gambar
Gambar III.82 Perancangan antarmuka detail pesanan
6. Perancangan antarmuka konfirmasi pembayaran Perancangan antarmuka konfirmasi pembayaran yang berfungsi sebagai
konfirmasi pembayaran pesanan dapat dilihat pada Gambar III.83
TP18
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Barang untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik Toko Kami untuk menuju TP04
· Klik Kontak untuk menuju TP05
· Klik Keranjang untuk TP09
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik logout untuk menuju TP01
Nama Layar :TP18 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Konfirmasi Pembayaran
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Text Kode Pesanan Nama Ukuran Quantity
Harga Diskon
Subtotal Text
Text Text
Text Text
Text Total
Ongkos Kirim Total Bayar
Text Text
Text Kode Pesanan
Text Jenis Pembayaran
Transfer dari bank Transfer ke bank
Total Transfer Tanggal
Simpan Beranda
Barang Probably
Toko Kami Kontak
Logout Selamat Datang Konsumen
Keranjang Jumlah
Total Menu Konsumen
Info Alamat Info Akun
Pesanan
Gambar III.83 Perancangan antarmuka detail pembayaran
7. Perancangan antarmuka Pilih Alamat Utama Perancangan antarmuka pilih alamat utama yang berfungsi sebagai pilihan
pengiriman ke alamat utama dapat dilihat pada Gambar III.84
TP19
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Belanja untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik toko kami untuk menuju TP04
· Klik kontak untuk menuju TP05
· Klik keranjang belanja untuk
TP07 ·
Klik kategori1,2,3 untuk menuju T02
· Klik Terlaris untu menuju TP02
· Klik Terbaru untuk menuju TP02
· Klik Rekomendasi untuk menuju
TP02 ·
Klik info alamat untuk menuju TP14
· Klik info akun untuk menuju
TP15 ·
Klik pesanan untuk menuju TP16
· Klik logout untuk menuju TP01
· Klik Lanjutkan untuk menuju
TP21 ·
Klik Kembali untuk menuju TP07 ·
Klik Alamat Baru untuk menuju TP 20
Nama Layar :TP19 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Cek Pesanan
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Text Kode Pesanan Nama Ukuran Quantity
Harga Diskon
Subtotal Text
Text Text
Text Text
Text Total
Ongkos Kirim Total Bayar
Text Text
Text Nama
Text Alamat
Kota Provinsi
Kodepos Handphone
Text Text
Text Text
Text Lanjutkan
Kirim pesanan ke alamat Utama Sesuai dengan yang ada diakun
Jasa Kirim Paket pengiriman
Ongkos Kirim Text
Kembali Kirim Pesanan ke alamat baru Berbeda dengan alamat saat mendaftar
Alamat baru Beranda
Barang Probably
Toko Kami Kontak
Logout Selamat Datang Konsumen
Keranjang Jumlah
Total Menu Konsumen
Info Alamat Info Akun
Pesanan Gambar
Gambar III.84 Perancangan antarmuka pilih alamat utama
8. Perancangan antarmuka Pilih Alamat Baru
Perancangan antarmuka pilih alamat baru yang berfungsi sebagai pilihan pengiriman ke alamat berbeda dengan alamat utama dapat dilihat pada Gambar
III.85
TP20
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Belanja untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik toko kami untuk menuju TP04
· Klik kontak untuk menuju TP05
· Klik keranjang untuk TP07
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik logout untuk menuju TP01 ·
Klik Lanjutkan untuk menuju TP21
· Klik Kembali untuk menuju TP07
· Klik Alamat Baru untuk menuju
TP 20
Nama Layar :TP20 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Alamat Baru Keranjang
Info Alamat
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Jumlah Info Akun
Pesanan Nama
Alamat Kota
Provinsi Kodepos
Handphone Text
Text Text
Text Text
Lanjutkan Jasa Kirim
Paket pengiriman Ongkos Kirim
Text Kembali
Beranda Barang
Probably Toko Kami
Kontak Logout
Total Gambar
Gambar III.85 Perancangan antarmuka pilih alamat baru
9. Perancangan antarmuka konfirmasi pesanan Perancangan antarmuka pilih konfirmasi pesanan yang berfungsi sebagai
konfirmasi pesanan dapat dilihat pada Gambar III.86
TP21
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Belanja untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik toko kami untuk menuju TP04
· Klik kontak untuk menuju TP05
· Klik keranjang untuk TP07
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik logout untuk menuju TP01 ·
Klik Lanjutkan untuk menuju TP23
· Klik Kembali untuk menuju
TP19TP20 ·
Klik Simpan untuk menuju TP22
Nama Layar :TP21 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Konfirmasi pesanan Keranjang
Info Alamat
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Jumlah Info Akun
Pesanan Text
Kode Pesanan Nama Ukuran Quantity Harga
Diskon Subtotal
Text Text
Text Text
Text Text
Total Ongkos Kirim
Total Bayar Text
Text Text
Simpan Nama
Alamat
Kembali Silahkan Periksa kembali pesanan anda
bila sudah benar, Pilih Tombol Simpan Pesanan Bila masih ada yang salah silahkan pilih tombol Kembali
Berat Text
Text Total Ongkos
Text Kota
Provinsi Kodepos
Handphone Jasa Pengiriman
Paket Pengiriman Ongkos Kirim
Text Text
Text Text
Text Text
Text Text
Text Beranda
Barang Probably
Toko Kami Kontak
Logout Total
Gambar
Gambar III.86 Perancangan antarmuka pilih konfirmasi pesananan
10. Perancangan antarmuka simpan pesanan Perancangan antarmuka simpan pesanan yang berfungsi sebagai simpan
pesanan dapat dilihat pada Gambar III.87
TP22
HEADER
Footer ·
Klik Beranda untuk menuju TP01
· Klik Belanja untuk menuju TP02
· Klik Probably untuk menuju
TP03 ·
Klik toko kami untuk menuju TP04
· Klik kontak untuk menuju TP05
· Klik kategori1,2,3 untuk menuju
T02 ·
Klik Terlaris untu menuju TP02 ·
Klik Terbaru untuk menuju TP02 ·
Klik Rekomendasi untuk menuju TP02
· Klik info alamat untuk menuju
TP14 ·
Klik info akun untuk menuju TP15
· Klik pesanan untuk menuju
TP16 ·
Klik logout untuk menuju TP01
Nama Layar :TP22 Ukuran : 920px
Font : verdana, arial, helvetica, sans-serif Logo
Konfirmasi pesanan Keranjang
Info Alamat
Kategori
Kategori2 Kategori3
Daftar barang
Rekomendasi Terbaru
Terlaris Kategori1
Jumlah Info Akun
Pesanan Terima Kasih Telah berbelanja Di Probably Street Wear Co.
Nomor Pesanan anda : no pesanan Silahan lakukan pembayaran untuk proses pengiriman barang
melalui transfer Bank atau pembayaran online Paypal, Setelah anda melakukan pembayaran dengan transfer Bank atau Paypal
silahkan melakukan konfirmasi pembayaran anda dengan klik link di bawah, khusus untuk pembayaran Paypal proses konfirmasi
akan dilakukan secara otomatis Beranda
Barang Probably
Toko Kami Kontak
Logout
Total Gambar
Transfer Paypal
Untuk melakukan transfer bank silahkan kirim ke rekening dibawah ini
Nama Bank Atas Nama
Rekening Text
Text Text
Gambar III.87 Perancangan antarmuka simpan pesanan