129
Antar muka produk pengunjung P03
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P03
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke P03
2. Klik tombol “Cara belanja” untuk
menuju ke P05 3.
Klik tombol “testimonial” untuk menuju ke P04
4. Klik tombol “Kontak kami” untuk
menuju ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk menuju ke
P07 7.
Klik tombol “info” untuk menuju ke P08
8. Klik tombol “beli” untuk menuju ke
P09 9. klik tombol cari untuk melakukan
pencarian produk. Cari Produk
cari DAFTAR
LOGIN |
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE DOMPET TAS
INFO IMAGE
IMAGE INFO
BELI BELI
HUBUNGI KAMI Keranjang
belanja Lihat detail
Gambar 3.26 Perancangan Tampilan produk pengunjung
Antar muka testimonial P04
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P04
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Cari Produk cari
DAFTAR LOGIN
|
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE KIRIM
HUBUNGI KAMI PESAN :
NAMA : Keranjang
belanja Lihat detail
Gambar 3.27 Perancangan Tampilan testimonial
130
Antar muka cara belanja P05
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P05
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Cari Produk cari
DAFTAR LOGIN
|
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE CARA BELANJA
HUBUNGI KAMI Keranjang
belanja Lihat detail
Gambar 3.28 Perancangan Tampilan cara belanja
Antar muka kontak kami P06
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P06
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Cari Produk cari
DAFTAR LOGIN
|
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE KONTAK KAMI
HUBUNGI KAMI Keranjang
belanja Lihat detail
Gambar 3.29 Perancangan Tampilan kontak kami
131
Antar muka Login P07
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P07
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Keranjang belanja
Lihat detail Cari Produk
cari DAFTAR
LOGIN |
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE LOGIN MEMBER
HUBUNGI KAMI Jika anda belum menjadi
anggota member kami silahkan klik daftar
Silahkan masukan email dan password anda dengan
benar... Email
Password Remember me?
Login Lupa password?
Gambar 3.30 Perancangan Tampilan login Antar muka info P08
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P08
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Cari Produk cari
DAFTAR LOGIN
|
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE INFO PRODUK
HUBUNGI KAMI Keranjang
belanja Lihat detail
image Produk :
Model produk : Warna :
Ukuran : Stok yang tersedia :
Harga : Diskon :
Harga diskon :
Kembali
Gambar 3.31 Perancangan Tampilan info
132
Antar muka beli P09
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
P09
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Cari Produk cari
DAFTAR LOGIN
|
PRODUK SPECIAL image
INFO BELI
CONTACT LIVE PEMBELIAN PRODUK
HUBUNGI KAMI Keranjang
belanja Lihat detail
image Produk :
Model produk : Warna :
Ukuran : Stok yang tersedia :
Harga : Diskon :
Harga diskon : Qty :
Beli Kembali
Gambar 3.32 Perancangan Tampilan beli
2. Perancangan Antar Muka Member
Antar muka home M01
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
Selengkapnya
M01
Selengkapnya Selengkapnya
MENU MEMBER
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “info” untuk menuju M08 7.
Klik link “beli” untuk menuju ke M10
8. Klik link “profil member” untuk
menuju M11 9.
Klik link “ganti password” untuk menuju M03
10. klik tomboL “kirim
testimoni”menuju ke M08 Cari Produk
cari LOGOUT
Selamat datang |
CONTACT LIVE PRODUK TERBARU
DOMPET TAS
INFO
IMAGE IMAGE
IMAGE
INFO BELI
INFO BELI
BELI HUBUNGI KAMI
Keranjang belanja
Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
Gambar 3.33 Perancangan Tampilan Home Member
133
Antar muka lupa password M02
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
Masukan Email anda
M02
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. KLIK “next” untuk lupa password
Cari Produk cari
CONTACT LIVE LUPA PASSWORD
HUBUNGI KAMI Keranjang
belanja Lihat detail
NEXT PRODUK SPECIAL
image INFO
BELI DAFTAR
LOGIN |
Gambar 3.34 Perancangan Tampilan lupa password Antar muka ganti passwordM03
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M03
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. KLIK “ganti password” untuk
mengganti password Cari Produk
cari Profil member
Ganti password Kirim testimoni
Lihat transaksi MENU MEMBER
CONTACT LIVE GANTI PASSWORD
HUBUNGI KAMI Keranjang
belanja Lihat detail
Password lama : Password baru :
Ulangi Password lama :
GANTI PASSWORD
LOGOUT Selamat datang |
Gambar 3.35 Perancangan Tampilan ganti password
134
Antar muka produk M04
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M04
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “info” untuk menuju M08 7.
Klik link “beli” untuk menuju ke M10
8. Klik link “profil member” untuk
menuju M11 9.
Klik link “ganti password” untuk menuju M03
10. klik tomboL “kirim
testimoni”menuju ke M08 Cari Produk
cari Profil member
Ganti password Kirim testimoni
Lihat transaksi MENU MEMBER
CONTACT LIVE DOMPET TAS
INFO IMAGE
IMAGE INFO
BELI BELI
HUBUNGI KAMI Keranjang
belanja Lihat detail
LOGOUT Selamat datang |
Gambar 3.36 Perancangan Tampilan produk Antar muka cara belanja memberM05
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M05
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
Cari Produk cari
CONTACT LIVE CARA BELANJA
HUBUNGI KAMI Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER LOGOUT
Selamat datang |
Gambar 3.37 Perancangan cara belanja
135
Antar muka kontak kami member M06
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M06
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
Cari Produk cari
CONTACT LIVE KONTAK KAMI
HUBUNGI KAMI Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER LOGOUT
Selamat datang |
Gambar 3.38 kontak kami Antar muka testimonial M07
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M07
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. klik tombol “kirim” untuk mengirim
testimonial Cari Produk
cari
CONTACT LIVE KIRIM
HUBUNGI KAMI PESAN :
NAMA : Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER LOGOUT
Selamat datang |
Gambar 3.39 Perancangan testimonial
136
Antar muka info M08
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M08
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. klik “kembali”untuk menuju ke M04
Cari Produk cari
CONTACT LIVE INFO PRODUK
HUBUNGI KAMI Keranjang
belanja Lihat detail
image Produk :
Model produk : Warna :
Ukuran : Stok yang tersedia :
Harga : Diskon :
Harga diskon :
Kembali Profil member
Ganti password Kirim testimoni
Lihat transaksi MENU MEMBER
LOGOUT Selamat datang |
Gambar 3.40 Perancangan Tampilan info
Antar muka keranjang belanja M09
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M09
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan pencarian
produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. klik tombol “kembali” untuk menuju ke
M13 Cari Produk
cari
CONTACT LIVE KERANJANG BELANJA
HUBUNGI KAMI Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER Merk
barang Produk
Harga satuan diskon Qty
Berat Berat per barang dihitung 1 Kg
Aksi Ubah
Hapus Jumlah
SUB TOTAL BELANJA 1 Kg : Rp PILIHAN CARGO
KEMBALI PILIHAN KOTA TUJUAN
Harga Kirim Silahkan Pilih Kota untuk menampilkan harga kirim dan Total Pembayaran
Dan untuk memunculkan form penerima Tiki JNEONS
Tiki JNEREGULER LOGOUT
Selamat datang |
Gambar 3.41 Perancangan Tampilan keranjang belanja
137
Antar muka Beli M10
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M10
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. klik tombol “kembali” untuk menuju
ke M04 Cari Produk
cari
CONTACT LIVE PEMBELIAN PRODUK
HUBUNGI KAMI Keranjang
belanja Lihat detail
image Produk :
Model produk : Warna :
Ukuran : Stok yang tersedia :
Harga : Diskon :
Harga diskon : Qty :
Beli Kembali
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER LOGOUT
Selamat datang |
Gambar 3.42 Perancangan Tampilan beli
Antar muka profil member M11
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M11
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “ganti password” untuk menuju M03
7. klik tomboL “kirim
testimoni”menuju ke M08 8.
klik tombol “kembali” untuk menuju ke M01
Cari Produk cari
CONTACT LIVE HUBUNGI KAMI
Keranjang belanja
Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER Email
: Nama Depan
: Nama Belakang
: Jenis Kelamin
: Alamat
: Kota
: Telepon
: Kode pos
: Profil Anda
EDIT PROFIL KEMBALI
LOGOUT Selamat datang |
Gambar 3.43Perancangan Tampilan profil member
138
Antar muka lihat transaksi M12
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M12
MENU MEMBER
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. klik tombol “bayar” untuk menuju ke
M14 10.
klik tombol “lihat detail” untuk menuju ke M15
Cari Produk cari
LOGOUT Selamat datang |
PRODUK SPECIAL
CONTACT LIVE HUBUNGI KAMI
Keranjang belanja
Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
TRANSAKSI
NO TRANSAKSI AKSI
STATUS PEMBAYARAN
TOTAL TANGGAL TRANSAKSI
Bayar Lihat detail
Gambar 3.44 Perancangan Tampilan lihat transaksi
Antar muka penerima barang M13
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M13
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan pencarian
produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
9. klik tombol “kembali” untuk menuju ke
M04 10. klik lanjutkan untuk melihat
konfirmasi produk yang dipesan Cari Produk
cari
CONTACT LIVE KERANJANG BELANJA
HUBUNGI KAMI Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER Merk
barang Produk
Harga satuan diskon Qty
Berat Berat per barang dihitung 1 Kg
Aksi Ubah
Hapus Jumlah
SUB TOTAL BELANJA 1 Kg : Rp PILIHAN CARGO
PILIHAN KOTA TUJUAN Harga Kirim
Tiki JNEONS Tiki JNEREGULER
Nama Penerima :
Alamat Penerima :
Nama Belakang :
Kode Pos :
No.Tlp Penerima : Pastikan Data Yang Anda Masukan Benar
Kembali Lanjutkan
PENERIMA BARANG LOGOUT
Selamat datang |
Gambar 3.45 Perancangan Tampilan penerima barang
139
Antarmuka pembayaran transaksi M14
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M14
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
Cari Produk cari
CONTACT LIVE PEMBAYARAN TRANSAKSI
HUBUNGI KAMI Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER NO TRANSAKSI
: Pilih Media Pembayaran :
: No. Rek Bayar
: Atas Nama
: SUBMIT
LOGOUT Selamat datang |
Gambar 3.46 Perancangan Tampilan pembayaran transaksi
Antarmuka lihat detail transaksi M15
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M15
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “Produk kami” untuk menuju ke M04
2. Klik tombol “Cara belanja” untuk
menuju ke M05 3.
Klik tombol “Kontak kami” untuk menuju ke M06
4. Klik tombol “testimonial” untuk
menuju ke M016 5. Klik cari untuk melakukan
pencarian produk 6.
Klik link “profil member” untuk menuju M11
7. Klik link “ganti password” untuk
menuju M03 8.
klik tomboL “kirim testimoni”menuju ke M08
Cari Produk cari
CONTACT LIVE HUBUNGI KAMI
Keranjang belanja
Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER TRANSAKSI
NO TRANSAKSI AKSI
STATUS PEMBAYARAN
TOTAL TANGGAL TRANSAKSI
Bayar Lihat detail
DETAIL TRANSAKSI
MODEL PRODUK SUBTOTAL
QTY PRODUK
Total Transaksi PENERIMA BARANG
NAMA PENERIMA
TELPHP KODE POS
KOTA ALAMAT PENERIMA
STATUS PENGIRIMAN
LOGOUT Selamat datang |
Gambar 3.47 Perancangan Tampilan detail transaksi
140
Antarmuka testimonial M16
HEADER HOME
PRODUK KAMI
CARA BELANJA
KONTAK KAMI TESTIMONIAL BERITA
M16
CARA PEMBAYARAN TESTIMONIAL
JAM OPERASIONAL TEKS
Navigasi : 1.
Klik tombol “produk” untuk menuju ke P03
2. Klik tombol “Guest book” untuk
menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk menuju
ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk melakukan
login dan menuju ke M01 7.
Klik link “teks product” untuk menuju ke P09
Cari Produk cari
CONTACT LIVE TESTIMONIAL
HUBUNGI KAMI Keranjang
belanja Lihat detail
Profil member Ganti password
Kirim testimoni Lihat transaksi
MENU MEMBER LOGOUT
Selamat datang |
Gambar 3.48 Perancangan Tampilan pembayaran transaksi
3. Perancangan Antar Muka Admin
Antar muka Login Admin A39
ADMINISTRATOR
image Alamat email
Password Login
F01
Navigasi 1.
Klik tombol “Login” untuk melakukan login dan menuju ke A01
2.
Jika proses login gagal maka akan muncul pesan
Gambar 3.49 Perancangan Tampilan Login admin
141
Antar muka home admin A01
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
ISI PESAN Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. Klik tombol “contact” untuk menuju
ke P06 s product” untuk menuju ke P09
PESAN KOMENTAR PENGUNJUNG MEMBER
EMAIL 1 2 3
AKSI LOGIN TERAKHIR
NAMA MEMBER A01
Gambar 3.50 Perancangan Tampilan Home admin Antar muka view merk produk A02
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A03
5. klik “edit” umtuk menuju A04
6 . klik “hapus” umtuk menju A05
7. klik cari untuk mencari produk TAMBAH
CARI EDIT
NAMA PRODUK AKSI
MERK PRODUK Cari berdasarkan
merk produk produk
HAPUS REFRESH
BERIKUTNYA MERK PRODUK
A02
Gambar 3.51 Perancangan Tampilan view merk produk
142
Antar muka tambah merk produk A03
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “tambah” untuk
menambah merk produk 6. klik tombol batal untuk menuju A02
TAMBAH MERK PRODUK A03
Nama produk : Merk produk :
Tambah Batal
Gambar 3.52 Perancangan Tampilan tambah merk produk
Antar muka edit merk produk A04
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “edit” untuk mengedit
merk produk 6. klik tombol batal untuk menuju A02
EDIT MERK PRODUK A04
Nama produk : Merk produk :
Edit Batal
Gambar 3.53 Perancangan Tampilan edit merk produk
143
Antar muka view model produk A05
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan
data ” untuk menuju ke
A01,A02,A03,A04,A05,A06,A0 7,A08,A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk
menuju ke A14,A15 4.
klik “tambah” umtuk menuju A06
5. klik “edit” umtuk menuju A07
6 . klik “hapus” maka akan
muncul pesan 7. klik cari untuk mencari
produk TAMBAH
CARI
EDIT MODEL
PRODUK AKSI
MODEL PRODUK Cari berdasarkan
model produk
HAPUS REFRESH
BERIKUTNYA AKTIF
INFO PRODUK
SET PRODUK TERBARU
SET SPECIAL
HARGA SATUAN
BERAT STOK
DESC WARNA
FILE GAMBAR
A05
Gambar 3.54 Perancangan Tampilan view model produk Antar muka tambah model produk A06
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “tambah” untuk
menambah model produk 6. klik tombol batal untuk menuju A05
TAMBAH MODEL PRODUK A06
Type produk File gambar
Tambah Batal
Unggah gambar Warna
ukuran
Diskon Harga
Berat Stok
Gambar 3.55 Perancangan Tampilan tambah model produk
144
Antar muka edit model produk A07
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “edit” untuk mengedit
model produk 6. klik tombol batal untuk menuju A05
EDIT MODEL PRODUK A07
Type produk File gambar
EDIT Batal
Unggah gambar Warna
ukuran
Diskon Harga
Berat Stok
Gambar 3.57 Perancangan Tampilan edit model produk Antar mula view type produkA08
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A09
5. klik “edit” umtuk menuju A10
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari produk
TAMBAH CARI
EDIT MERK PRODUK
AKSI TYPE PRODUK
Cari berdasarkan type produk
HAPUS REFRESH
BERIKUTNYA TYPE PRODUK
A08
Gambar 3.58 Perancangan Tampilan view type produk
145
Antar muka tambah type produk A09
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “tambah” untuk
menambah type produk 6. klik tombol batal untuk menuju A08
TAMBAH TYPE PRODUK A09
Merk produk : Type produk :
Tambah Batal
Gambar 3.59 Perancangan Tampilan tambah type produk Antar muka edit type produk A10
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “edit” untuk menngedit
type produk 6. klik tombol batal untuk menuju A08
EDIT TYPE PRODUK A10
Merk produk : Type produk :
Edit Batal
Gambar 3.60 Perancangan Tampilan edit type produk
146
Antar muka view produk A11
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A13
5. klik “edit” umtuk menuju A14
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari produk
TAMBAH CARI
EDIT NAMA PRODUK
AKSI PRODUK
Cari berdasarkan nama produk
HAPUS REFRESH
BERIKUTNYA A11
Gambar 3.61 Perancangan Tampilan view produk Antar muka tambah produk A12
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “tambah” untuk
menambah type produk 6. klik tombol batal untuk menuju A12
TAMBAH PRODUK A12
Nama produk : Tambah
Batal
Gambar 3.62 Perancangan Tampilan tambah produk
147
Antar muka edit produk A13
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4. klik cari untuk mencari produk
5. klik tombol “edit” untuk mengedit
type produk 6. klik tombol batal untuk menuju A12
EDIT PRODUK A13
Nama produk : Tambah
Edit
Gambar 3.63 Perancangan Tampilan edit produk Antar muka view kwalitas produk A14
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A16
5. klik “edit” umtuk menuju A17
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari kwalitas
produk
TAMBAH CARI
EDIT KWALITAS PRODUK
AKSI KWALITAS PRODUK
Cari berdasarkan desc kwalitas
produk
HAPUS REFRESH
BERIKUTNYA A14
Gambar 3.64 Perancangan Tampilan view kwalitas produk
148
Antar muka tambah kwalitas A15
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah kwalitas produk
5. klik tombol batal untuk menuju A16 TAMBAH KWALITAS PRODUK
A15
Kwalitas produk :
Tambah Batal
Gambar 3.65 Perancangan Tampilan tambah kwalitas Antar muka edit kwalitas A16
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk menambah kwalitas produk
5. klik tombol batal untuk menuju A16 EDIT KWALITAS PRODUK
A16
Kwalitas produk :
EDIT Batal
Gambar 3.66 Perancangan Tampilan edit kwalitas
149
Antar muka view provinsi A17
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A21
5. klik “edit” umtuk menuju A22
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari provinsi
TAMBAH CARI
EDIT NAMA PROVINSI
AKSI PROVINSI
Cari berdasarkan Nama provinsi
HAPUS REFRESH
BERIKUTNYA A17
Gambar 3.67 Perancangan Tampilan view provinsi Antar muka tambah provinsi F18
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah provinsi
5. klik tombol batal untuk menuju A18 TAMBAH PROVINSI
A18
Nama provinsi : Tambah
Batal
Gambar 3.68 Perancangan Tampilan tambah provinsi
150
Antar muka edit provinsi A19
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk mengedit provinsi
5. klik tombol batal untuk menuju A18 EDIT PROVINSI
A19
Nama provinsi : Edit
Batal
Gambar 3.69 Perancangan Tampilan edit provinsi Antar muka view kota A20
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A22
5. klik “edit” umtuk menuju A23
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari provinsi
TAMBAH CARI
EDIT NAMA PROVINSI
AKSI KOTA KABUPATEN
Cari berdasarkan nama kota
HAPUS REFRESH
BERIKUTNYA NAMA KOTA
KABKOTA A20
Gambar 3.70 Perancangan Tampilan view kota
151
Antarmuka tambah kota A21
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah kota
5. klik tombol batal untuk menuju A20 TAMBAH KOTA
A21
Id_provinsi
Tambah Batal
Nama kota : Kabkota :
Gambar 3.71 Perancangan Tampilan tambah kota
Antar muka edit kota A22
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk mengedit kota
5. klik tombol batal untuk menuju A20 EDIT KOTA
A22
Id_provinsi
Edit Batal
Nama kota : Kabkota :
Gambar 3.72 Perancangan Tampilan ubah kota
152
Antar muka view cargo A23
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A25
5. klik “edit” umtuk menuju A26
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari cargo
TAMBAH CARI
EDIT NAMA CARGO
AKSI CARGO INDONESIA
Cari berdasarkan Nama nama cargo
HAPUS REFRESH
BERIKUTNYA A23
Gambar 3.73 Perancangan Tampilan view cargo Antarmuka tambah cargo A24
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah cargo
5. klik tombol batal untuk menuju A24 TAMBAH CARGO
A24
Nama cargo Tambah
Batal
Gambar 3.74 Perancangan Tampilan tambah cargo
153
Antar muka edit cargo A25
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk mengedit cargo
5. klik tombol batal untuk menuju A24 EDIT CARGO
A25
Nama cargo Edit
Batal
Gambar 3.75Perancangan Tampilan edit cargo Antar muka view layanan cargo A26
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A28
5. klik “edit” umtuk menuju A29
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari layanan
cargo
TAMBAH CARI
EDIT NAMA CARGO
AKSI LAYANAN CARGO
Cari berdasarkan nama layanan
cargo
HAPUS REFRESH
BERIKUTNYA NAMA LAYANAN
CARGO HARGA KIRIM KG
A26
Gambar 3.76Perancangan Tampilan view layanan cargo
154
Antarmuka tambah layanan cargo A27
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah layanan cargo
5. klik tombol batal untuk menuju A27 TAMBAH LAYANAN CARGO
A27
Nama cargo
Tambah Batal
Nama layanan Harga kirim
Gambar 3.77 Perancangan Tampilan tambah layanan cargo Antar muka edit layanan cargo A28
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk mengedit layanan cargo
5. klik tombol batal untuk menuju A27 EDIT LAYANAN CARGO
A28
Nama cargo
Edit Batal
Nama layanan Harga kirim
Gambar 3.728Perancangan Tampilan edit layanan cargo
155
Antar muka view harga cargo A29
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A31
5. klik “edit” umtuk menuju A32
6 . klik “hapus” maka akan muncul
pesan 7. klik cari untuk mencari provinsi
TAMBAH CARI
EDIT NAMA LAYANAN CARGO
AKSI HARGA CARGO
Cari berdasarkan harga cargo
HAPUS REFRESH
BERIKUTNYA NAMA KOTA
HARGA CARGO LAMA PENGIRIMAN
A29
Gambar 3.79 Perancangan Tampilan view harga cargo Antarmuka tambah harga cargo A30
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah harga cargo
5. klik tombol batal untuk menuju A30 TAMBAH HARGA CARGO
A30
Tambah Batal
Nama layanan Kota
Harga
Gambar 3.80 Perancangan Tampilan tambah harga cargo
156
Antar muka edit harga cargo A31
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk menambah harga cargo
5. klik tombol batal untuk menuju A30 EDIT HARGA CARGO
A31
Edit Batal
Nama layanan Kota
Harga
Gambar 3.81 Perancangan Tampilan edit harga cargo
Antar muka view transaksi A32
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “product” untuk
menuju ke P03 2.
Klik tombol “Guest book” untuk menuju ke P04
3. Klik tombol “shiping” untuk
menuju ke P05 4.
Klik tombol “contact” untuk menuju ke P06
5. Klik link “Daftar” untuk
melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk
melakukan login dan menuju ke M01
7. Klik link “teks product” untuk
menuju ke P09
TAMBAH CARI
EDIT NO
TRANSAKSI AKSI
TRANSAKSI Cari berdasarkan
model produk
HAPUS REFRESH
BERIKUTNYA STATUS PENGIRIMAN
STATUS PEMBAYARAN TOTAL
TANGGAL Tampilkan data berdasarkan status
pembayaran Tampilkan data berdasarkan
status pengiriman
TOTAL PENDAPATAN A32
Gambar 3.82 Perancangan Tampilan view transaksi
157
Antarmuka view laporan data barang A33
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
CETAK Navigasi :
1. Klik tombol “product” untuk
menuju ke P03 2.
Klik tombol “Guest book” untuk menuju ke P04
3. Klik tombol “shiping” untuk
menuju ke P05 4.
Klik tombol “contact” untuk menuju ke P06
5. Klik link “Daftar” untuk
melakukan registrasi dan menuju ke P02
6. Klik link “Login” untuk
melakukan login dan menuju ke M01
7. Klik link “teks product” untuk
menuju ke P09 Jumlah stok barang yang habis : Tampilkan
MODEL PRODUK
JUMLAH TERJUAL
LAPORAN DATA BARANG
REFRESH INFO
PRODUK JUMLAH
HARGA DISKON
HARGA SATUAN
STOK DESC
UKURAN DESC
WARNA FILE
GAMBAR CARI
Cari berdasarkan model produk
A33
Gambar 3.83 Perancangan Tampilan view laporan data barang Antar muka view laporan transaksi A34
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “product” untuk menuju ke P03
2. Klik tombol “Guest book”
untuk menuju ke P04 3.
Klik tombol “shiping” untuk menuju ke P05
4. Klik tombol “contact” untuk
menuju ke P06 5.
Klik link “Daftar” untuk melakukan registrasi dan menuju
ke P02 6.
Klik link “Login” untuk melakukan login dan menuju ke
M01 7.
Klik link “teks product” untuk menuju ke P09
CARI
NO TRANSAKSI
TOTAL TRANSAKSI
Cari berdasarkan No transaksi
HAPUS
REFRESH CETAK
STATUS PENGIRIMAN STATUS PEMBAYARAN
TOTAL TANGGAL
Tampilkan data berdasarkan status pembayaran
Tampilkan data berdasarkan status pengiriman
DETAIL TRANSAKSI MODEL PRODUK
NAMA PRODUK QTY
SUBTOTAL DATA PENGIRIMAN
NAMA PENERIMA
ALAMAT KOTA
SUBTOTAL BIAYA
PENGIRIMAN CARGO
TELP KODE
POS A34
Gambar 3.84 Perancangan Tampilan view laporan transaksi
158
Antar muka view ukuran A35
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
KEMBALI Navigasi :
1. Klik tombol “Pengolahan data”
untuk menuju ke A01,A02,A03,A04,A05,A06,A07,A08,
A09,A10,A11,A12 2.
Klik tombol “Pengolahan data transaksi
” untuk menuju ke A13 3.
Klik tombol “laporan” untuk menuju ke A14,A15
4. klik “tambah” umtuk menuju A44
5. klik “edit” umtuk menuju A45
6 . klik “hapus” umtuk menju A46
7. klik cari untuk mencari ukuran TAMBAH
CARI EDIT
NAMA PRODUK AKSI
UKURAN Cari berdasarkan
nama ukuran
HAPUS REFRESH
BERIKUTNYA UKURAN
A35
Gambar 3.85 Perancangan Tampilan view ukuran Antarmuka tambah ukuran A36
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “tambah” untuk menambah ukuran
5. klik tombol batal untuk menuju A43 TAMBAH UKURAN
A36
Tambah Batal
Nama produk Ukuran
Gambar 3.86 Perancangan Tampilan tambah ukuran
159
Antar muka edit ukuran A37
ADMINISTRATOR HALAMAN
UTAMA PENGOLAHAN
DATA PENGOLAHAN
TRANSAKSI LAPORAN
Navigasi : 1.
Klik tombol “Pengolahan data” untuk menuju ke
A01,A02,A03,A04,A05,A06,A07,A08, A09,A10,A11,A12
2. Klik tombol “Pengolahan data
transaksi ” untuk menuju ke A13
3. Klik tombol “laporan” untuk menuju
ke A14,A15 4.
klik tombol “edit” untuk mengedit ukuran
5. klik tombol batal untuk menuju A43 EDIT UKURAN
A37
Edit Batal
Nama produk Ukuran
Gambar 3.87 Perancangan Tampilan edit ukuran
3.3.2 Perancangan Struktur Menu
1. Struktur Menu pengunjung
home
Berita Contact me
Product Informasi
Shipping Daftar
tambah view
Gambar 3.77 Struktur Menu pengunjung
160
2. Struktur Menu Member
home login
Contact Informasi
cara pesan News
Keranjang Belanja
profile logout
product history
view tambah
edit Ubah Profil
member Ubah
Password
Gambar 3.78 Struktur Menu Member
3. Struktur Menu Admin
login
Admin
Management data
Layanan cargo
Cargo Kota
Ganti password
Provinsi Kw produk
Type produk Model
produk Merk produk
Type produk Data
transaksi
view tambah
ubah hapus
logout Produk
Member News
Shipping
Gambar 3.79 Struktur Menu Operator
161
3.3.3 Perancangan Pesan
Perancangan pesan yang terdapat pada sistem ini dapat dilihat pada gambar berikut :
M01
Field ini harus diisi Hanya huruf
M02
Field ini harus diisi Invalid alamat email
M03
Field ini harus diisi
M04
Field ini harus diisi Hanya angka
M05
Field ini harus diisi Invalid nomer telepon
M06
Field ini harus diisi 6-11 karakter
Login gagal
M07
Diantara 6-300 karakter diperbolehkan
M08
M09
Data berhasil ditambah
M10
Data berhasil dihapus Data berhasil diubah
M11 M12
Registrasi berhasil
M13
Silahkan lakukan pembayaran
M14
Terima kasih
M15
Anda belum login
M16
Anda yakin untuk menghapus data ini
OK BATAL
Wajib diisi
M17
Wajib dipilih
M18
Ada kesalahan didalam pengisian data,Silahkan cek
kembali
M19
Gambar 3.81 Perancangan Pesan
