3 rate_value
int 11
-
Jumlah rating
4 sess_id
varchar 100
-
Session rating
5 rate_time
int 11
-
Waktu rating
3.3 Perancangan Arsitektur
3.3.1 Perancangan Antar Muka
Interface atau antar muka merupakan tampilan dari suau program aplikasi
yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan
menyediakan interface yang mudah dipahami dan digunakan oleh user Perancangan interface untuk aplikasi E-Commerce di PD. WARINGIN
adalah sebagai berikut :
1. Perancangan Antar Muka Pengunjung
Antar muka home P01
HEADER
P01
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI
COPYRIGHT WARINGIN JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN SLIDE SHOW
GAMBAR PRODUK PRODUK TERLARIS
file_gambar nama_barang
harga file_gambar
nama_barang harga
file_gambar nama_barang
harga PRODUK TERBARU
nama_barang harga
nama_barang harga
file_gambar nama_barang
harga file_gambar
file_gambar
diskon diskon
diskon MOST VIEWER
file_gambar nama_barang
harga nama_barang
harga nama_barang
harga file_gambar
file_gambar beli
beli beli
beli beli
beli beli
beli beli
KOLEKSI BARANG PRODUK
KATEGORI BARANG PELANGGAN
User : Password :
Login Pendaftaran baru
Lupa Password
PRODUK DISKON file_gambar
nama_barang harga
nama_barang harga
nama_barang harga
file_gambar file_gambar
beli beli
beli MENU UTAMA
HOME PROFIL TOKO
KONTAK KAMI TATA CARA BELANJA
Navigasi : 1.
Klik link “profil toko” untuk menuju P02
2. Klik link “kontak kami”
untuk menuju P03 3.
Klik “panduan berbelanja” untuk menuju P04
4. Klik link “kategori barang”
untuk menuju P05 5.
Klik link “koleksi barang” untuk menuju P06
6. Klik tombol “cari” untuk
munuju P12 7.
Klik link “Pendaftaran baru” untuk menuju P07
8. Klik link “lupa password”
untuk menuju P10
Gambar 3.33 Perancangan Tampilan Home
Antar muka profil toko P02
HEADER
P02
PROFIL TOKO
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI
COPYRIGHT WARINGIN JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN IMG
KOLEKSI BARANG PRODUK
KATEGORI BARANG PELANGGAN
User : Password :
Login Pendaftaran baru
Lupa Password MENU UTAMA
HOME PROFIL TOKO
KONTAK KAMI TATA CARA BELANJA
Navigasi : 1.
Klik link “home” untuk menuju P01
2. Klik link “kontak kami”
untuk menuju P03 3.
Klik “panduan berbelanja” untuk menuju P04
4. Klik link “kategori barang”
untuk menuju P05 5.
Klik link “koleksi barang” untuk menuju P06
6. Klik tombol “cari” untuk
munuju P12 7.
Klik link “Pendaftaran baru” untuk menuju P07
8. Klik link “lupa password”
untuk menuju P10
Gambar 3.34 Perancangan Tampilan Profil Toko
Antar muka kontak kami P03
HEADER
P03
KONTAK KAMI
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI
COPYRIGHT WARINGIN JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN TEKS
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
Navigasi : 1.
Klik link “home” untuk menuju P01
2. Klik “panduan berbelanja”
untuk menuju P04 3.
Klik link “kategori barang” untuk menuju P05
4. Klik link “koleksi barang”
untuk menuju P06 5.
Klik tombol “cari” untuk munuju P12
6. Klik link “Pendaftaran baru”
untuk menuju P07 7.
Klik link “lupa password” untuk menuju P10
Gambar 3.35 Perancangan Tampilan Kontak Kami
Antar muka panduan berbelanja P04
HEADER
P04
PANDUAN BERBELANJA
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN COPYRIGHT WARINGIN
TEKS
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
Navigasi : 1.
Klik link “home” untuk menuju P01
2. Klik “panduan berbelanja”
untuk menuju P04 3.
Klik link “kategori barang” untuk menuju P05
4. Klik link “koleksi barang”
untuk menuju P06 5.
Klik tombol “cari” untuk munuju P12
6. Klik link “Pendaftaran baru”
untuk menuju P07 7.
Klik link “lupa password” untuk menuju P10
Gambar 3.36 Perancangan Tampilan Panduan Berbelanja
Antar muka kategori barang P05
HEADER
P05
KATEGORI
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN COPYRIGHT WARINGIN
nm_kategori nm_kategori
nm_kategori nm_kategori
nm_kategori nm_kategori
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
Navigasi : 1.
Klik link “home” untuk menuju P01
2. Klik “panduan berbelanja”
untuk menuju P04 3.
Klik link “kategori barang” untuk menuju P05
4. Klik link “koleksi barang”
untuk menuju P06 5.
Klik tombol “cari” untuk munuju P12
6. Klik link “Pendaftaran baru”
untuk menuju P07 7.
Klik link “lupa password” untuk menuju P10
Gambar 3.37 Perancangan Tampilan kategori barang
Antar muka Koleksi Barang P06
HEADER
P06
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN COPYRIGHT WARINGIN
DAFTAR KOLEKSI BARANG file_gambar
nama_barang harga
diskon harga
beli file_gambar
nama_barang harga
diskon harga
beli MENU UTAMA
HOME PROFIL TOKO
KONTAK KAMI PANDUAN BERBELANJA
KOLEKSI BARANG PRODUK
KATEGORI BARANG PELANGGAN
User : Password :
Login Pendaftaran baru
Lupa Password
Navigasi : 1.
Klik link “home” untuk menuju P01
2. Klik “panduan berbelanja”
untuk menuju P04 3.
Klik link “kategori barang” untuk menuju P05
4. Klik link “koleksi barang”
untuk menuju P06 5.
Klik tombol “cari” untuk munuju P12
6. Klik link “Pendaftaran baru”
untuk menuju P07 7.
Klik link “lupa password”
untuk menuju P10
Gambar 3.38 Perancangan Tampilan Koleksi Barang
Antar muka Pendaftaran Pelanggan P07
HEADER
P07
PILIH TIPE DAFTAR PELANGGAN
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI A. TIPE PERSONAL
Daftar Personal
COPYRIGHT WARINGIN JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN Daftar Medium
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
B. TIPE MEDIUM
Navigasi : 1.
Klik tombol “daftar
personal” untuk menuju P08 2.
Klik tombol “daftar
medium” untuk menuju P09
Gambar 3.39 Perancangan Tampilan Pendaftaran Pelanggan
Antar muka Pendaftaran Pelanggan Personal P08
HEADER
P08
PENDAFTARAN PELANGGAN BARU
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI Data Pribadi
Nama Lengkap Jenis Kelamin
Email Data Alamat Pengiriman
Kota Kecamatan
Alamat Kode Post
Data No Kontak No. Telepon
No. Handphone No. Faksimili
Data Login Nama User ID
Password ID Confirm Password
Simpan
COPYRIGHT WARINGIN JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN Pria
Wanita
Reset
Tanda Wajib Diisi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
Navigasi : 1.
Klik link “home” untuk
menuju P01 2.
Klik tombol “simpan” untuk melakukan proses daftar
Gambar 3.40 Perancangan Tampilan Pendaftaran Pelanggan Personal
Antar muka Pendaftaran Pelanggan Medium P09
HEADER
P09
PENDAFTARAN PELANGGAN BARU
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI Data Pribadi
Nama Lengkap Jenis Kelamin
Email Data Alamat Pengiriman
Kota Kecamatan
Alamat Kode Post
Data No Kontak No. Telepon
No. Handphone No. Faksimili
Data Login Nama User ID
Password ID Confirm Password
Simpan
COPYRIGHT WARINGIN JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN Pria
Wanita
Reset
Tanda Wajib Diisi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
Navigasi : 1.
Klik link “home” untuk
menuju P01 2.
Klik tombol “simpan” untuk menuju P12
Gambar 3.41 Perancangan Tampilan Pendaftaran Pelanggan Medium
Antar muka Lupa Password P10
HEADER
P10
Lupa Password
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN
Email
Kirim Password
COPYRIGHT WARINGIN MENU UTAMA
HOME PROFIL TOKO
KONTAK KAMI PANDUAN BERBELANJA
KOLEKSI BARANG PRODUK
KATEGORI BARANG PELANGGAN
User : Password :
Login Pendaftaran baru
Lupa Password
Navigasi : 1.
Klik link “home” untuk
menuju P01 2.
Klik tombol “kirim password” untuk mengirim
password
Gambar 3.42 Perancangan Tampilan Lupa Password
Antar muka Detail Barang P11
HEADER
P11
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN COPYRIGHT WARINGIN
Detail barang File gambar
Nama Barang : Berat Barang :
Kategori : Stok Barang :
Keterangan Barang harga
diskon harga
nama_barang berat_barang
nm_kategori stok
keterangan MENU UTAMA
HOME PROFIL TOKO
KONTAK KAMI PANDUAN BERBELANJA
KOLEKSI BARANG PRODUK
KATEGORI BARANG PELANGGAN
User : Password :
Login Pendaftaran baru
Lupa Password
Navigasi : 1.
Klik tombol “beli” untuk menuju P13
Gambar 3.43 Perancangan Tampilan Detail Barang
Antar muka Cari Barang P12
HEADER
P12
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN COPYRIGHT WARINGIN
Cari Barang file_gambar
nama_barang harga
diskon harga
beli file_gambar
nama_barang harga
diskon harga
beli MENU UTAMA
HOME PROFIL TOKO
KONTAK KAMI PANDUAN BERBELANJA
KOLEKSI BARANG PRODUK
KATEGORI BARANG PELANGGAN
User : Password :
Login Pendaftaran baru
Lupa Password
Navigasi : 1.
Klik link “home” untuk menuju P01
2. Klik tombol “beli” untuk
menuju P13
Gambar 3.44 Perancangan Tampilan Cari Barang
Antar muka Validasi Pengunjung P13
HEADER
P13
ANDA BELUM LOGIN
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI JASA
PENGIRIMAN JASA
PEMBAYARAN REKENING
PERUSAHAAN COPYRIGHT WARINGIN
Maaf anda belum bisa mengakses halaman ini, Untuk mengakses halaman ini Anda silakan melakukan login terlebih dahulu. Apabila belum memiliki account, silahkan daftar disini [ daftar ]
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA KOLEKSI BARANG
PRODUK KATEGORI BARANG
PELANGGAN User :
Password : Login
Pendaftaran baru Lupa Password
Navigasi : 1.
Klik link “daftar” untuk
menuju P07
Gambar 3.45 Perancangan Tampilan Validasi Pengunjung
2. Perancangan Antar Muka Pelanggan
Antar muka home M01
HEADER
M01
COPYRIGHT WARINGIN SLIDE SHOW
GAMBAR PRODUK PRODUK TERLARIS
file_gambar nama_barang
harga file_gambar
nama_barang harga
file_gambar nama_barang
harga PRODUK TERBARU
nama_barang harga
nama_barang harga
file_gambar nama_barang
harga file_gambar
file_gambar
diskon diskon
diskon MOST VIEWER
file_gambar nama_barang
harga nama_barang
harga nama_barang
harga file_gambar
file_gambar beli
beli beli
beli beli
beli beli
beli beli
PRODUK DISKON file_gambar
nama_barang harga
nama_barang harga
nama_barang harga
file_gambar file_gambar
beli beli
beli PELANGGAN
User : Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Navigasi : 1.
Klik tombol “beli” untuk menuju M02
2. Klik link “kantong belanja”
untuk menuju M02 3.
Klik link “lanjutkan transaksi” untuk menuju
M03 4.
Klik link “konfirm pembayaran” untuk menuju
M04 5.
Klik link “status transaksi” untuk menuju M05
6. Klik link “retur” untuk
menuju M07 7.
Klik link “status retur” untuk menuju M08
Gambar 3.46 Perancangan Tampilan Home
Antar muka kantong belanjaM02
HEADER
COPYRIGHT WARINGIN
M02
KANTONG BELANJA file_gambar
Gambar Nama Barang
Total Rp. nama_barang
Harga Rp Stok :stok
Jumlah Total Belanja Rp :
lanjutkan update
Kembali ke katalog PELANGGAN
User : Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
KETERANGAN TOMBOL Klik tombol ini jika anda masih ingin mencari barang yang lainnya.
Klik tombol ini jika anda sudah selesai memilih barang dan ingin melanjutkan transaksimengisi alamat pengiriman dan cara pembayaran.
Klik tombol ini jika anda ingin update jumlah pembelian barang Kembali ke katalog
lanjutkan update
subtot total
file_gambar nama_barang
Stok :stok subtot
Navigasi : 1.
Klik tombol “lanjutkan” untuk menuju M03
2. Klik
tombol “update” untuk update jumlah pembelian
Gambar 3.47 Perancangan Tampilan Kantong Belanja
Antar muka Lanjutkan Transaksi M03
HEADER
COPYRIGHT WARINGIN
M03
KONFIRMASI PENGIRIMAN Pengiriman barang berdasarkan alamat registrasi
Lanjutkan Nama Lengkap
Kota No. Telepon
Kecamatan Kode Post
Alamat
Lanjutkan Nama Lengkap
Kota No. Telepon
kecamatan Kode Pos
Alamat Pengiriman barang berdasarkan alamat Lain
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Klik untuk alamat registrasi à
Klik untuk alamat lain à nama
nm_kota nm_kecamatan
alamat kdpost
telp_rumah
Navigasi : 1.
Klik tombol “lanjutkan” untuk menuju M09
Gambar 3.48 Perancangan Tampilan Lanjutkan Transaksi
Antar muka Konfirmasi PembayaranM04
HEADER
COPYRIGHT WARINGIN
M04
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Konfirmasi Pembayaran No
No Pesan Aksi
i | batalkan pemesanan
Tanggal Status
no_pesan tanggal
status i
| batalkan pemesanan no_pesan
tanggal status
konfirm konfirm
Navigasi : 1.
Klik tombol “konfirm” untuk menuju M10
Gambar 3.49 Perancangan Tampilan Konfirmasi Pembayaran
Antar muka Status Transaksi M05
HEADER
COPYRIGHT WARINGIN
M05
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Status Transaksi No
No Pesan Aksi
i Tanggal
Status no_pesan
tanggal status
lihat
i no_pesan
tanggal status
lihat
Navigasi : 1.
Klik tombol “lihat” untuk
menuju M11
Gambar 3.50 Perancangan Tampilan Status Transaksi
Antar muka retur M06
HEADER
COPYRIGHT WARINGIN
M06
Logout PELANGGAN
User : Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
RETUR BARANG NO
No. Pesan Aksi
i Tanggal
Status no_pesan
tanggal status_retur
retur i
no_pesan tanggal
status_retur retur
Navigasi : 1.
Klik tombol “retur” untuk
menuju M12
Gambar 3.51 Perancangan Tampilan Retur
Antar muka status retur M07
HEADER
COPYRIGHT WARINGIN
M07
Logout PELANGGAN
User : Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
RETUR BARANG NO
No. Pesan Aksi
i Tanggal
Status no_pesan
tanggal status_retur
lihat i
no_pesan tanggal
status_retur lihat
Navigasi : 1.
Klik link “lihat” untuk menuju M13
Gambar 3.52 Perancangan Tampilan Status Retur
Antar muka detail barang M08
HEADER
COPYRIGHT WARINGIN
M08
Detail barang File gambar
Nama Barang : Berat Barang :
Kategori : Stok Barang :
Keterangan Barang harga
diskon harga
beli PELANGGAN
User : Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
nama_barang berat_barang
nm_kategori stok
keterangan
Navigasi : 1.
Klik tombol “beli” untuk menuju M02
Gambar 3.53 Perancangan Tampilan Detail Barang
Antar muka konfirmasi transaksi M09
HEADER
COPYRIGHT WARINGIN
M09
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Konfirmasi Transaksi Nama Barang
Harga Rp nama_barang
Jumlah Total Rp
harga diskon
harga jumlah
subtot
Lanjutkan Total Belanja Rp.
Total uang yang harus anda transfersetorkan adalah: Rp. =================================================
Pembayaran dapat dilakukan dengan melakukan transfer ke : nomer rekening : ,atas nama .
nomer rekening : ,atas nama : Setelah transfer masuk Menu Konfirm Pembayaran untuk konfirmasi
pembayaran. ==================================================
Kami akan mengirimkan barang pesanan anda ke alamat yang tertera dibawah ini:
Nama nama1
Kota nm_kota
Kecamatan nm_kecamatan Alamat
alamat1 Kode Post
kd_post No. Telepon
telepon
nama_barang harga
diskon harga
jumlah subtot
total totbayar
Navigasi : 1.
Klik tombol “Lanjutkan” untuk menuju M01
Gambar 3.54 Perancangan Tampilan Konfirmasi Transaksi
Antar muka Detail Konfirmasi Pembayaran M10
HEADER
COPYRIGHT WARINGIN
M10
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
KONFIRMASI PEMBAYARAN No. Pesan
no_pesan
Cara Bayar No. Transaksi
Jumlah bayar Tanggal bayar
bayar
Nama Barang Harga Rp
nama_barang Jumlah
Total Rp harga
diskon harga
jumlah subtot
Total Belanja Rp. nama_barang
harga diskon
harga jumlah
subtot total
DAFTAR BARANG DETAIL TRANSAKSI DETAIL
No. Transaksi Tanggal Transaksi
ID Pelanggan Dikirim Kepada
Alamat Kirim : no_pesan
: tanggal : uid_plg
: nama1 : alamat1 nm_kota kode pos kd_post
pembayaran melalui PAYPAL : logo PAYPAL
Navigasi : 1.
Klik tombol “bayar” untuk menuju M04
Gambar 3.55 Perancangan Tampilan Konfirmasi Pembayaran
Antar muka Transaksi Detail M11
HEADER
COPYRIGHT WARINGIN
M11
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Nama Barang Harga Rp
nama_barang
Jumlah Total Rp
harga diskon
harga jumlah
subtot
Total Belanja Rp.
nama_barang harga
diskon harga
jumlah subtot
total
DAFTAR BARANG DETAIL TRANSAKSI DETAIL
No. Transaksi Tanggal Transaksi
ID Pelanggan Dikirim Kepada
Alamat Kirim : no_pesan
: tanggal : uid_plg
: nama1 : alamat1 nm_kota kode pos kd_post
Navigasi : 1.
Klik link “status transaksi” untuk menuju M05
Gambar 3.56 Perancangan Tampilan Transaksi Detail
Antar muka detail retur M12
HEADER
COPYRIGHT WARINGIN
M12
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Nama Barang No.
Jumlah Retur no
DAFTAR BARANG DETAIL PILIH BARANG YANG AKAN DI RETUR
No. Transaksi Tanggal Transaksi
ID Pelanggan Nama Pemesan
Alamat Pemesan : no_pesan
: tanggal : uid_plg
: nama : alamat
nama_barang no
nama_barang simpan
reset
Navigasi : 1.
Klik tombol “simpan” untuk menyimpan data retur
Gambar 3.57 Perancangan Tampilan detail retur
Antar muka detail status retur M13
HEADER
COPYRIGHT WARINGIN
M13
PELANGGAN User :
Password :
CHAT DENGAN KAMI MESSENGER
Cari barang cari
INFORMASI KOLEKSI BARANG
PRODUK KATEGORI BARANG
Kantong Belanja Lanjutkan Transaksi
Konfirm Pembayaran Status Transaksi
MENU UTAMA HOME
PROFIL TOKO KONTAK KAMI
PANDUAN BERBELANJA
KELOLA TRANSAKSI
JASA PENGIRIMAN
JASA PEMBAYARAN
REKENING PERUSAHAAN
Retur Status Retur
KELOLA RETUR Logout
Nama Barang No.
Alasan
no
DAFTAR BARANG DETAIL RETUR DETAIL
No. Transaksi Tanggal Transaksi
Status Retur Alasan
: no_pesan : tanggal
: status retur : alamat
nama_barang no
nama_barang
Navigasi : 1.
Klik link “”status retur” untuk menuju M07
Gambar 3.58 Perancangan Tampilan detail status retur
3. Perancangan Antar Muka Operator
Antar muka ini adalah antar muka home O01
HEADER
COPYRIGHT WARINGIN
O01
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi :
1. Klik lin
k “kategori barang” untuk menuju O02
2. Klik link “koleksi barang” untuk
menuju O03 3.
Klik link “Data kecamatan” untuk menuju O04
4. Klik link “Data kota” untuk menuju
O05 5.
Klik l ink “Pelanggan” untuk menuju
O06 6.
Klik l ink “Aktifasi medium” untuk
menuju O07 7.
Klik lin k “Belum Bayar” untuk
menuju O08 8.
Klik link “Sudah Bayar” untuk menuju O09
9. Klik link “Lunas” untuk menuju O10
10. Klik link “Belum dikirim” untuk
menuju O11 11.
Klik link “dikirim” untuk menuju O12 12.
Klik link “diterima” untuk menuju O13
13. Klik link “konfirmasiCOD” untuk
menuju O14 14.
Klik link “dikirimCOD” untuk menuju O15
15. Kl
ik link “Retur” untuk menuju O16 16.
Klik link “Laporan Keuangan” untuk menuju O17
17. Klik link “Laporan Barang” untuk
menuju O19 18.
Klik link “Laporan Transaksi” untuk menuju O18
19. Klik link “Logout” untuk keluar
sistem
Gambar 3.59 Perancangan Tampilan Home
Antar muka kategori barang O02
HEADER
COPYRIGHT WARINGIN
O02
DAFTAR KATEGORI BARANG Kode
Nama Kategori Barang Operasi
kd_kategori nm_kategori
Ubah | Hapus TAMBAH KATEGORI
kd_kategori nm_kategori
Ubah | Hapus User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “Tambah Kategori” untuk menuju
O20 2.
Klik link “Ubah” untuk menuju O21
3. Klik link “Hapus” untuk
menghapus kategori
Gambar 3.60 Perancangan Tampilan Kategori Barang
Antar muka koleksi barangO03
HEADER
COPYRIGHT WARINGIN
O03
DAFTAR KOLEKSI BARANG No.
Nama Barang Operasi
no Ubah | Hapus
TAMBAH KOLEKSI BARANG
Gambar Jumlah
Harga nama_barang
file_ gambar
harga stok
URUTKAN DATA Kategori Barang:
[All Kategori] Show
no Ubah | Hapus
nama_barang file_
gambar harga
stok User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “Tambah Koleksi Barang” untuk
menuju O22 2.
Klik link “ubah” untuk menuju O23
3. Klik link “hapus” untuk
hapus koleksi barang
Gambar 3.61 Perancangan Tampilan Koleksi Barang
Antar muka Data Kecamatan O04
HEADER
COPYRIGHT WARINGIN
O04
DATA KECAMATAN No
Kode Operasi
Ubah | Hapus TAMBAH KECAMATAN
Nama Kecamatan no
kd_kecamatan nm_kecamatan
Ubah | Hapus no
kd_kecamatan nm_kecamatan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “tambah kecamatan” untuk menuju
O24 2.
Klik link “ubah” untuk menuju O25
3. Klik link hapus untuk
hapus kecamatan
Gambar 3.62 Perancangan Tampilan Data Kecamatan
Antar muka Data Kota O05
HEADER
COPYRIGHT WARINGIN
O05
DATA KOTA No
Operasi Ubah | Hapus
TAMBAH KOTA Kode
no kd_kota
Nama Kota nm_kota
Ubah | Hapus no
kd_kota nm_kota
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “tambah kota” untuk menuju O26
2. Klik link “ubah” untuk
menuju O27 3.
Klik link hapus untuk menghapus kota
Gambar 3.63 Perancangan Tampilan Data Kota
Antar muka Pelanggan O06
HEADER
COPYRIGHT WARINGIN DAFTAR PELANGGAN
No Kode
Tipe Tipe_pelanggan
Username Nama Lengkap
no uid_plg
userID nama
Operasi Detail | Ubah | Hapus
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
O06
Navigasi : 1.
Klik link “detail” untuk menuju O28
2. Klik link “ubah” untuk
menuju O29
Gambar 3.64 Perancangan Tampilan Pelanggan
Antar muka Aktifasi Medium O07
HEADER
COPYRIGHT WARINGIN Aktifasi Pelanggan Medium
No Kode
Tipe Tipe_pelanggan
Username Nama Lengkap
no uid_plg
userID nama
Operasi Aktifkan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
O07
Navigasi : 1.
K lik link “aktifkan” untuk
aktifkan pelanggan medium
Gambar 3.65 Perancangan Tampilan Aktifasi Medium
Antar muka Belum Bayar O08
HEADER
COPYRIGHT WARINGIN
O08
TRANSAKSI BELUM BAYAR No
No Pesan Status
status_bayar Pemesan
Tanggal i
no_pesan nama
tanggal Aksi
tampil
status_bayar i
no_pesan nama
tanggal
tampil
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “tampil” untuk menuju O30
Gambar 3.66 Perancangan Tampilan Belum Bayar
Antar muka Sudah Bayar O09
HEADER
COPYRIGHT WARINGIN
O09
Transaksi Sudah Bayar No Pesan
Jumlah Bayar
jumlah_bayar Tanggal Bayar
Pembayaran Melalui
no_pesan tgl_bayar
cara_bayar Aksi
konfirm
No. i
No. Transaksi
rekening jumlah_bayar
no_pesan tgl_bayar
cara_bayar
konfirm
i rekening
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “konfirm” untuk melakukan proses
konfirmasi
Gambar 3.67 Perancangan Tampilan Sudah Bayar
Antar muka Lunas O10
HEADER
COPYRIGHT WARINGIN
O10
TRANSAKSI LUNAS No Pesan
Pemesan Tanggal Bayar
no_pesan nama
Tgl_bayar
Status Bayar Status_bayar
i No.
no_pesan nama
Tgl_bayar
Status_bayar i
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “no pesan” untuk menuju O30
Gambar 3.68 Perancangan Tampilan Lunas
Antar muka Belum Dikirim O11
HEADER
COPYRIGHT WARINGIN
O11
TRANSAKSI BELUM DIKIRIM No
No Pesan Status kirim
status_kirim Pemesan
Tanggal Bayar i
no_pesan nama
Tgl_Bayar Aksi
kirim
status_kirim i
no_pesan nama
Tgl_Bayar
kirim
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Surat Jalan
cetak cetak
Navigasi : 1.
Klik link “no_pesan” untuk menuju O30
2. Klik tombol kirim untuk melakukan proses
pengiriman 3.
Klik link “cetak” untuk mencetak surat jalan
Gambar 3.69 Perancangan Tampilan Belum Dikirim
Antar muka Dikirim O12
HEADER
COPYRIGHT WARINGIN
O12
TRANSAKSI DIKIRIM No
No Pesan Status kirim
status_kirim Pemesan
Tanggal Kirim i
no_pesan nama
Tgl_kirim Aksi
terima
status_kirim i
no_pesan nama
Tgl_kirim
terima
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Nama Penerima
Navigasi : 1.
Klik tombol “terima” untuk melakukan proses
terima barang
Gambar 3.70 Perancangan Tampilan Dikirim
Antar muka Diterima O13
HEADER
COPYRIGHT WARINGIN
O13
TRANSAKSI DITERIMA No
No Pesan Status kirim
status_kirim Pemesan
Tanggal Terima i
no_pesan nama
Tgl_Terima status_kirim
i no_pesan
nama Tgl_terima
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Nama Penerima
Navigasi : 1.
Klik link “no_pesan” untuk menuju O30
Gambar 3.71 Perancangan Tampilan Diterima
Antar muka Konfirmasi COD O14
HEADER
COPYRIGHT WARINGIN
O14
TRANSAKSI COD No
No Pesan Status
status_bayar Pemesan
Tanggal Pemesanan i
no_pesan nama
tanggal status_bayar
i no_pesan
nama tanggal
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
aksi kirim
kirim
Navigasi : 1.
Klik link “kirim” untuk melakukan proses
pengiriman
Gambar 3.72 Perancangan Tampilan Konfirmasi COD
Antar muka Dikirim COD O15
HEADER
COPYRIGHT WARINGIN
O15
TRANSAKSI COD-DIKIRIM No
No Pesan Status kirim
status_kirim Pemesan
Tanggal Kirim i
no_pesan nama
Tgl_kirim Aksi
terima
status_kirim i
no_pesan nama
Tgl_kirim
terima
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Nama Penerima Jumlah Bayar
Navigasi : 1.
Klik tombol “terima” untuk melakukan proses
penerimaan barang
Gambar 3.73 Perancangan Tampilan Dikirim COD
Antar muka Retur O16
HEADER
COPYRIGHT WARINGIN
O16
RETUR No
No Pesan Status
status_retur Pemesan
Tanggal i
no_pesan nama
tanggal Aksi
tampil
status_retur i
no_pesan nama
tanggal
tampil
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “tampil” untuk menuju O31
Gambar 3.74 Perancangan Tampilan Retur
Antar muka Laporan Keuangan O17
HEADER
COPYRIGHT WARINGIN
O17
LAPORAN KEUANGAN No
No Pesan Total Pembayaran
total_belanja Pemesan
Tanggal Bayar i
no_pesan nama
tgl_bayar total_belanja
i no_pesan
nama tgl_bayar
Total Pendapatan : total_pendapatan
Total Pendapatan pembayaran melalui PAYPAL : total_paypal
LAPORAN KEUANGAN bulan
tahun sampai
tanggal Lihat Data Berdasarkan
sampai sampai
Print PDF lihat
lihat lihat
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “lihat” untuk melihat laporan keuangan
Gambar 3.75 Perancangan Tampilan Laporan Keuangan
Antar muka Laporan Transaksi O18
HEADER
COPYRIGHT WARINGIN
O18
LAPORAN SELURUH TRANSAKSI No Pesan
Status status_bayar
Pemesan Tanggal
no_pesan nama
tanggal Aksi
tampil status_bayar
no_pesan nama
tanggal tampil
no no
no User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “tampil” untuk menuju O30
Gambar 3.76 Perancangan Tampilan Laporan Transaksi
Antar muka Laporan Barang O19
HEADER
COPYRIGHT WARINGIN
O19
Kode barang No.
Nama barang
no
Laporan Barang
Cari berdasarkan kode nama barang
Kd_barang Nama_barang
no Kd_barang
Nama_barang
cari
Jumlah terjual
jumlah jumlah
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
stok
stok stok
Navigasi : 1.
Klik tombol “cari” untuk melihat laporan barang
Gambar 3.77 Perancangan Tampilan Laporan Barang
Antar muka Tambah Kategori O20
HEADER
COPYRIGHT WARINGIN
O20
MASUKAN DATA KATEGORI
simpan Kode Kategori
Nama Kategori Keterangan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “simpan” untuk menyimpan data
kategori
Gambar 3.78 Perancangan Tampilan Tambah Kategori
Antar muka Ubah Kategori O21
HEADER
COPYRIGHT WARINGIN
O21
UBAH DATA KATEGORI BARANG
Ubah Kode Kategori
Nama Kategori Keterangan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “ubah” untuk mengubah data kategori
Gambar 3.79 Perancangan Tampilan Ubah Kategori
Antar muka Tambah Koleksi Barang O22
HEADER
COPYRIGHT WARINGIN
O22
MASUKAN DATA KOLEKSI BARANG
simpan Kode Barang
Kategori Barang Nama Barang
Berat barang gram
File Gambar Browse..
Harga Diskon Personal
Jumlah Keterangan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Diskon Medium Diskon High
Navigasi : 1.
Klik tombol “simpan” untuk menyimpan data
koleksi barang
Gambar 3.80 Perancangan Tampilan Tambah Koleksi Barang
Antar muka Ubah Koleksi Barang O23
HEADER
COPYRIGHT WARINGIN
O23
FORM UBAH KOLEKSI BARANG
ubah User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Kode Barang Kategori Barang
Nama Barang Berat barang
gram File Gambar
Browse.. Harga
Diskon Personal Jumlah
Keterangan Diskon Medium
Diskon High
Navigasi : 1.
Klik tombol “ubah” untuk mengubah data koleksi
barang
Gambar 3.81 Perancangan Tampilan Ubah Koleksi Barang
Antar muka Tambah Kecamatan O24
HEADER
COPYRIGHT WARINGIN
O24
MASUKAN DATA kecamatan simpan
Nama kecamatan Nama kota
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “simpan” untuk menyimpan data
kecamatan
Gambar 3.82 Perancangan Tampilan Tambah kecamatan
Antar muka Ubah Kecamatan O25
HEADER
COPYRIGHT WARINGIN
O25
FORM UBAH DATA KECAMATAN User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
simpan Nama kecamatan
Nama kota
Navigasi : 1.
Klik tombol “simpan” untuk mengubah data
kecamatan
Gambar 3.83 Perancangan Tampilan Ubah Kecamatan
Antar muka Tambah Kota O26
HEADER
COPYRIGHT WARINGIN
O26
MASUKAN DATA KOTA simpan
Nama Kota User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Kabkota
Navigasi : 1.
Klik tombol “simpan” untuk menyimpan data
kota
Gambar 3.84 Perancangan Tampilan Tambah Kota
Antar muka Ubah kota O27
HEADER
COPYRIGHT WARINGIN
O27
FORM UBAH DATA KOTA User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
simpan Nama Kota
Kabkota
Navigasi : 1.
Klik tombol “simpan” untuk mengubah data kota
Gambar 3.85 Perancangan Tampilan Ubah Kota
Antar muka Detail Pelanggan O28
HEADER
COPYRIGHT WARINGIN
O28
Data Lengkap Pelanggan Kode
Nama Lengkap Kelamin
kota Alamat Kirim
kecamatan Kode Post
No. Telp No. HP
Email
No. Fax Tipe Pelanggan
Uid_plg nama
kelamin nm_kota
alamat Nm_kecamatan
Kdpost Telp_rumah
Telp_hp Email
No_fax Tipe_pelanggan
[Tampil Semua] User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “tampil semua” untuk menuju O06
Gambar 3.86 Perancangan Tampilan Detail Pelanggan
Antar muka Ubah Pelanggan O29
HEADER
COPYRIGHT WARINGIN
O29
UBAH DATA PELANGGAN Data Pribadi
Nama Lengkap Jenis Kelamin
Email Data Alamat Pengiriman
Kota Kecamatan
Alamat Kode Post
Data No Kontak No. Telepon
No. Handphone No. Faksimili
Data Login Nama User ID
Password ID Confirm Password
ubah Pria
Wanita User :
Password : Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik tombol “ubah” untuk mengubah data pelanggan
Gambar 3.87 Perancangan Tampilan Ubah Pelanggan
Antar muka Transaksi Detail O30
HEADER
COPYRIGHT WARINGIN
O30
Nama Barang Harga Rp
nama_barang
Jumlah Total Rp
harga diskon
harga jumlah
subtot
Total Belanja Rp.
nama_barang harga
diskon harga
jumlah subtot
total
DAFTAR BARANG DETAIL TRANSAKSI DETAIL
No. Transaksi Tanggal Transaksi
ID Pelanggan Dikirim Kepada
Alamat Kirim : no_pesan
: tanggal : uid_plg
: nama1 : alamat1 nm_kota kode pos kd_post
Status Pelanggan : status_pelanggan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “Belum Bayar” untuk menuju O08
Gambar 3.88 Perancangan Tampilan Transaksi Detail
Antar muka Detail Retur O31
HEADER
COPYRIGHT WARINGIN
O31
Nama Barang No.
Alasan
no
DAFTAR BARANG DETAIL RETUR DETAIL
No. Transaksi Tanggal Transaksi
Status Retur Alasan
: no_pesan : tanggal
: status retur : alamat
nama_barang alasan
no nama_barang
alasan
User : Password :
Username
STATUS BAYAR
LAPORAN MANAJEMEN DATA MASTER
Kategori Barang Koleksi Barang
Data Kecamatan Data kota
MANAJEMEN PELANGGAN Belum Bayar
Sudah Bayar Lunas
Laporan Keuangan Laporan Transaksi
Laporan Barang Pelanggan
Aktifasi Medium
Logout STATUS KIRIM
Belum Dikirim Dikirim
Diterima KELOLA COD
Konfirmasi Dikirim
KELOLA RETUR Retur
Navigasi : 1.
Klik link “retur” untuk menuju O16
Gambar 3.89 Perancangan Tampilan Detail Retur
4. Perancangan Antar Muka Admin
Antar muka home A01
HEADER
COPYRIGHT WARINGIN
A01
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
Navigasi : 1.
Klik link “Operator” untuk
menuju ke A02 2.
K lik link “Back-up
database” untuk menuju A03 3.
Klik link “restore database” untuk menuju A04
4. Klik link “gambar barang”
untuk menuju A05 5.
Klik link “website” untuk menuju A06
6. Klik link “logout” keluar
dari sitem
Gambar 3.90 Perancangan Tampilan Home
Antar muka Tampilan Operator A02
HEADER
COPYRIGHT WARINGIN
A02
DAFTAR OPERATOR NO
NAMA OPERATOR Operasi
no userID
Ubah | Hapus TAMBAH OPERATOR
no userID
Ubah | Hapus MANAJEMEN OPERATOR
Operator User :
Password : Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
Navigasi : 1.
Klik link “Tambah
Operator ” untuk menuju ke
A07 2.
Klik link “ubah” untuk menuju A08
3. Klik link “hapus” untuk
hapus operator
Gambar 3.91 Perancangan Tampilan Operator
Antar muka Back-up database A03
HEADER
COPYRIGHT WARINGIN
A03
BACKUP DATABASE Proses Backup
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
Navigasi : 1.
Klik tombol “proses backup” untuk backup database
Gambar 3.92 Perancangan Back-up database
Antar muka Restore database A04
HEADER
COPYRIGHT WARINGIN
A04
RESTORE DATABASE Restore
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
browse
Navigasi : 1.
Klik tombol “restore” untuk
restore database
Gambar 3.93 Perancangan Restore database
Antar muka Gambar Barang A05
HEADER
COPYRIGHT WARINGIN
A05
BACKUP GAMBAR BARANG
backup Restore
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
RESTORE GAMBAR BARANG
browse
Navigasi : 1.
Klik tombol “backup” untuk backup
gambar barang 2.
Klik tombol “restore” untuk
restore gambar barang
Gambar 3.94 Perancangan Gambar Barang
Antar muka Website A06
HEADER
COPYRIGHT WARINGIN
A06
BACKUP FILES Proses Backup
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
Navigasi : 1.
Klik tombol “proses backup” untuk backup seluruh file
website
Gambar 3.95 Perancangan Website
Antar muka Tambah Operator A07
HEADER
COPYRIGHT WARINGIN
A07
Masukan Data Operator Simpan
Password Nama Operator
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
Navigasi : 1.
Klik tombol “simpan” untuk
menyimpan data operator
Gambar 3.96 Perancangan Tambah Operator
Antar muka Ubah Operator A08
HEADER
COPYRIGHT WARINGIN
A08
Ubah Data Operator ubah
Password Nama Operator
MANAJEMEN OPERATOR Operator
User : Password :
Username
Back-Up Database Restore Database
Gambar Barang Website
Logout BACKUP - RESTORE
Navigasi : 1.
Klik tombol “ubah” untuk
mengubah data operator
Gambar 3.97 Perancangan Ubah Operator
6.3.2 Perancangan Struktur Menu
Kategori