BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.2 Perancangan Sistem
3.2.3 Perancangan Antarmuka
3.2.3.2 Perancangan Antarmuka Shop Keeper
Perancangan antarmuka shop keeper dalam aplikasi yang dibuat memiliki beberapa bagian sebagai berikut :
1. Perancangan Antarmuka Beranda Shop Keeper
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan
pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur
Pemesanan pada Data
Transaksi menuju TSK0302
· Klik Pengiriman
Pemesanan pada
Pengiriman menuju TSK0401
· Klik Pengiriman Retur
Pemesanan pada
Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer
menuju TSK05
· Klik Daftar Laporan pada
Laporan menuju TSK0601
· Klik Transaksi Pemesanan
pada Laporan menuju TSK0602
· Klik LogOut untuk keluar sebagai Shop Keeper dan menuju TO01 Ukuran Layar : 1024 x 768
Jenis Font : Arial Warna Latar : #ffffff
TSK01
Akses login anda sebagai : Shoop Keeper
Halaman Utama
Selamat Datang,,, administrator
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
L o g o
Gambar 3.41 Perancangan Antarmuka Beranda Shop Keeper
2. Perancangan Antarmuka Daftar Member
· Klik Beranda menuju TSK02
· Klik Daftar Member menuju TSK03
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK041
· Klik Transaksi Retur Pemesanan
pada Data Transaksi menuju TSK042
· Klik Pengiriman Pemesanan pada Pengiriman menuju TSK051
· Klik Pengiriman Retur Pemesanan
pada Pengiriman menuju TSK052
· Klik Konfirmasi Transfer menuju TSK06
· Klik Daftar Laporan pada Laporan
menuju TSK071
· Klik Transaksi Pemesanan pada Laporan menuju TSK072
· Klik Pertama menuju halaman pertama
· Klik Sebelumnya menuju halaman sebelumnya
· Klik Selanjutnya menuju halaman selanjutnya
· Klik Terakhir menuju halaman terakhir
· Klik untuk menghapus data member
· Klik LogOut untuk keluar sebagai Store Manager dan menuju TO01 Ukuran Layar : 1024 x 768
Jenis Font : Arial Warna Latar : #ffffff
TSK02
Data Member
Tampil….. Data Cari :
Tindakan Terakhir Selanjutnya 1 Sebelumnya Pertama No Nama Member 1 2 3 4 Email Telp
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
L o g o
3. Perancangan Antarmuka Daftar Data Transaksi
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur Pemesanan
pada Data Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur Pemesanan
pada Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer menuju TSK05
· Klik Daftar Laporan pada Laporan
menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik Pertama menuju halaman pertama
· Klik Sebelumnya menuju halaman sebelumnya
· Klik Selanjutnya menuju halaman selanjutnya
· Klik Terakhir menuju halaman terakhir
· Klik LogOut untuk keluar sebagai Store Manager dan menuju TO01
· Klik menuju TSK030101
· Klik menuju TSK030102 Ukuran Layar : 1024 x 768
Jenis Font : Arial Warna Latar : #ffffff
TSK0301
Daftar Data Transaksi
Tampil….. Data Cari :
Tindakan
No Order ID Tgl Transaksi Member Biaya Pembayaran Status
1 2 3
4 <status>
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
Terakhir Selanjutnya 1 Sebelumnya Pertama L o g o
Gambar 3.43 Perancangan Antarmuka Daftar Data Transaksi
4. Perancangan Antarmuka Lihat Daftar Data Transaksi
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur Pemesanan pada Data Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur Pemesanan pada Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer menuju TSK05
· Klik Daftar Laporan pada Laporan menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik LogOut untuk keluar sebagai Shop Keeper dan menuju TO01
· Klik Kembali menuju TSK041
· Klik Ubah Status Proses menuju TSK042
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
TSK030101
Nama Produk Harga Banyak Sub Total Diskon Total
Daftar Data Transaksi
Nama Depan : <nama_depan> Nama Belakang : <nama_belakang> Provinsi : <provinsi> Kota : <kota> Alamat : <alamat> Kode Pos : <kode_pos> Telp : <telp>
Nama Depan : <nama_depan2> Nama Belakang : <nama_belakang2> Provinsi : <provinsi2> Kota : <kota2> Alamat : <alamat2> Kode Pos : <kode_pos2> Telp : <telp2>
ID Order : <id_order> Tanggal : <tgl_transfer> Pembayaran : <pembayaran> Sub Total : <sub_total> Ongkos Kirim : <ongkos_kirim> Grand Total : <grand_total> Order Status : <status>
Kembali Ubah Status Proses
ALAMAT PEMESAN ALAMAT PENGIRIMAN INFORMASI PEMESANAN
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
<harga> <bnyk> <sub_total> <diskon> <grand_total>
gambar Kode Produk : Berat Produk : <kode_produk><berat>
Biaya Pemesanan : <grand_total>
L o g o
5. Perancangan Antarmuka Transaksi Retur Pemesanan
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur Pemesanan
pada Data Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur Pemesanan
pada Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer menuju TSK05
· Klik Daftar Laporan pada Laporan
menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik Pertama menuju halaman pertama
· Klik Sebelumnya menuju halaman sebelumnya
· Klik Selanjutnya menuju halaman selanjutnya
· Klik Terakhir menuju halaman terakhir
· Klik LogOut untuk keluar sebagai Store Manager dan menuju TO01
· Klik menuju TSK030201
· Klik menuju TSK030202 Ukuran Layar : 1024 x 768
Jenis Font : Arial Warna Latar : #ffffff
TSK0302
Daftar Data Retur
Tampil….. data Cari :
Tindakan
No ID Retur Nama Member Tgl Retur ID Transaksi Status Retur
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
Terakhir Selanjutnya 1 Sebelumnya Pertama L o g o
Gambar 3.45 Perancangan Antarmuka Transaksi Retur Pemesanan
6. Perancangan Antarmuka Pengiriman Pemesanan
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur Pemesanan
pada Data Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur Pemesanan
pada Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer menuju TSK05
· Klik Daftar Laporan pada Laporan
menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik Pertama menuju halaman pertama
· Klik Sebelumnya menuju halaman sebelumnya
· Klik Selanjutnya menuju halaman selanjutnya
· Klik Terakhir menuju halaman terakhir
· Klik LogOut untuk keluar sebagai Store Manager dan menuju TO01
· Klik menuju TSK05101 Ukuran Layar : 1024 x 768
Jenis Font : Arial Warna Latar : #ffffff
TSK0401
Data Pengiriman Produk
Tampil….. Data Cari :
Tindakan
No ID Retur Nama Member Jenis
Pengiriman Tujuan
pengiriman Tanggal
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
Status Terakhir Selanjutnya 1 Sebelumnya Pertama L o g o
7. Perancangan Antarmuka Daftar Data Transaksi
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan
pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur
Pemesanan pada Data
Transaksi menuju TSK0302
· Klik Pengiriman
Pemesanan pada
Pengiriman menuju TSK0401
· Klik Pengiriman Retur
Pemesanan pada
Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer
menuju TSK05
· Klik Daftar Laporan pada
Laporan menuju TSK0601
· Klik Transaksi Pemesanan
pada Laporan menuju TSK0602
· Klik Kembali menuju TSK0401
· Klik Simpan Pengiriman
untuk mengubah status menjadi dikirim dan menuju TSK0401
· Klik Cetak label untuk mencetak label pengiriman
· Klik LogOut untuk keluar sebagai Store Manager dan menuju TO01
TSK040101
Daftar Data Transaksi
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
Nama Produk Harga Banyak Sub Total Diskon Total
Nama Depan : <nama_depan>
Nama Belakang : <nama_belakang>
Provinsi : <provinsi>
Kota : <kota>
Alamat : <alamat>
Kode Pos : <kode_pos>
Telp : <telp>
Nama Depan : <nama_depan2>
Nama Belakang : <nama_belakang2>
Provinsi : <provinsi2>
Kota : <kota2>
Alamat : <alamat2>
Kode Pos : <kode_pos2>
Telp : <telp2>
ID Order : <id_order>
Tanggal : <tgl_transfer>
Pembayaran : <pembayaran>
Sub Total : <sub_total>
Ongkos Kirim : <ongkos_kirim>
Grand Total : <grand_total>
Order Status : <status>
<harga> <bnyk> <sub_total> <diskon> <grand_total>
gambar Kode Produk : Berat Produk : <kode_produk><berat>
Biaya Pemesanan : <grand_total>
Jenis Pengirman : <jenis_pengiriman>
Nomor Pengiriman : Tanggal Kirim :
<nomor_pengiriman> <tgl_kirim>
kembali
Cetak Label Simpan Pengiriman
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff L o g o
Gambar 3.47 Perancangan Antarmuka Daftar Data Transaksi
8. Perancangan Antarmuka Laporan Pengiriman Retur Pemesanan
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan
pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur
Pemesanan pada Data
Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan
pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur
Pemesanan pada Pengiriman
menuju TSK0402
· Klik Konfirmasi Transfer
menuju TSK05
· Klik Daftar Laporan pada
Laporan menuju TSK0601
· Klik Transaksi Pemesanan
pada Laporan menuju TSK0602
· Klik LogOut untuk keluar sebagai Shop Keeper dan menuju TO01
· Klik menuju TSK040201 Ukuran Layar : 1024 x 768
Jenis Font : Arial Warna Latar : #ffffff
TSK0402
Data Pengiriman Produk Retur
Tampil….. Data Cari :
Tindakan
No Retur ID Tgl Retur Nama Member Tujuan
Pengiriman
Status Pengiriman
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
Terakhir Selanjutnya 1 Sebelumnya Pertama L o g o
9. Perancangan Antarmuka Konfirmasi Transfer
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur Pemesanan
pada Data Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur Pemesanan
pada Pengiriman menuju TSK0402
· Klik Konfirmasi Transfer menuju TSK05
· Klik Daftar Laporan pada Laporan
menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik Pertama menuju halaman pertama
· Klik Sebelumnya menuju halaman sebelumnya
· Klik Selanjutnya menuju halaman selanjutnya
· Klik Terakhir menuju halaman terakhir
· Klik LogOut untuk keluar sebagai Store Manager dan menuju TO01
· Klik menuju TSK0501
TSK05
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Konfirmasi Pembayaran
Tampil….. Data Cari :
Tindakan
No Tgl
KonfirmasiNama Bank Nama Nasabah Tujuan Bank Nominal
No Rekening 1 2 3 4
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
Terakhir Selanjutnya 1 Sebelumnya Pertama Transaksi ID L o g o
Gambar 3.49 Perancangan Antarmuka Konfirmasi Transfer
10. Perancangan Antarmuka Laporan Daftar Produk
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur
Pemesanan pada Data
Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan
pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur
Pemesanan pada Pengiriman
menuju TSK0402
· Klik Konfirmasi Transfer
menuju TSK05
· Klik Daftar Laporan pada
Laporan menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik LogOut untuk keluar sebagai Shop Keeper dan menuju TO01
· Klik Reset Untuk membatalkan cetak laporan
· Klik Cetak Laporan untuk mencetak laporan produk
TSK0601
Laporan Produk
Kategori Produk : Jumlah Stok :
Reset Cetak Laporan
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
L o g o
11.Perancangan Antarmuka Laporan Transaksi Pemesanan
· Klik Beranda menuju TSK01
· Klik Daftar Member menuju TSK02
· Klik Transaksi Pemesanan pada Data Transaksi menuju TSK0301
· Klik Transaksi Retur Pemesanan
pada Data Transaksi menuju TSK0302
· Klik Pengiriman Pemesanan
pada Pengiriman menuju TSK0401
· Klik Pengiriman Retur
Pemesanan pada Pengiriman
menuju TSK0402
· Klik Konfirmasi Transfer menuju TSK05
· Klik Daftar Laporan pada
Laporan menuju TSK0601
· Klik Transaksi Pemesanan pada Laporan menuju TSK0602
· Klik LogOut untuk keluar sebagai Shop Keeper dan menuju TO01
· Klik Reset Untuk membatalkan cetak laporan
· Klik Cetak Laporan untuk mencetak laporan produk
TSK0602
Laporan Transaksi Penjualan
Tanggal Awal : Tanggal Akhir :
Cetak Laporan Reset
Ukuran Layar : 1024 x 768 Jenis Font : Arial Warna Latar : #ffffff
Akses login anda sebagai : Shoop Keeper
Beranda | Daftar Member | Data Transaksi | Pengiriman | Konfirmasi Transfer | Laporan | LogOut
L o g o
Gambar 3.51 Perancangan Antarmuka Laporan Transaksi Pemesanan