Perancangan Antarmuka Admin Perancangan Antar Muka Program Aplikasi

6. Perancangan antar muka menu utama MERK A08 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 merk Member baru Order masuk Retur masuk Last visit sigout howadmin merk Tambah merk Data merk Merk edit delate edit delate PD. PIPIK PUTRA SHOP DASHBOARD admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.60 Perancangan Antarmuka Merk 7. Perancangan antar muka menu utama TAMBAH MERK A09 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Tambah merk Member baru Order masuk Retur masuk Last visit sigout howadmin Adminmerk Nama merk Tambah merk save reset back PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.61 Perancangan Antarmuka Tambah Merk 8. Perancangan antar muka menu utama PRODUK A10 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 produk Member baru Order masuk Retur masuk Last visit sigout howadmin produk Data dataproduk jenis barang merk produk edit delate delate Tambah produk edit PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.62 Perancangan Antarmuka Produk 9. Perancangan antar muka menu utama TAMBAH PRODUK A11 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Tambah produk Member baru Order masuk Retur masuk Last visit sigout howadmin Admintambah produk save reset back Jenis barang merk Nama produk Gambar utama brows Gambar utama brows tambah hapus reset berat harga deskripsi PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.63 Perancangan Antarmuka Tambah Produk 10. Perancangan antar muka menu utama STOK A12 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 produk Member baru Order masuk Retur masuk Last visit sigout howadmin produkstock Data stock produk Nama produk stock edit edit PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.64 Perancangan Antarmuka Stok 11. Perancangan antar muka menu utama EDIT STOK A13 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Update stock produk Member baru Order masuk Retur masuk Last visit sigout howadmin stock produkupdate stock produk Nama produk Update stock produk save reset back Jumlah stock produk PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.65 Perancangan Antarmuka Edit Stok 12. Perancangan antar muka menu utama KABUPATENKOTA A09 Klik tombol HOME menuju Ke M01 Klik tombol LOGIN menuju Ke M02 Klik tombol LUPA PASSWORD menuju Ke M03 Klik tombol HISTORY ORDER menuju Ke M04 Klik tombol KONFIRMASI menuju Ke M05 Klik tombol PROFIL menuju Ke M06 Klik tombol UPDATE menuju Ke M07 Klik tombol UBAH PASSWORD menuju Ke M08 Klik tombol CHECKOUT menuju Ke M09 Klik tombol KONFIRMASI PEMBAYARAN menuju Ke M10 Klik tombol PEMBAYARAN TRANSFER menuju Ke M011 Klik tombol RETUR menuju Ke M012 Tambah merk Member baru Order masuk Retur masuk Last visit sigout howadmin Adminmerk Nama merk Tambah merk save reset back A14 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Kabupatenkota Member baru Order masuk Retur masuk Last visit sigout howadmin kabupatenkota Data kabupaten kota Kabupaten kota edit delate edit delate Tambah kabupaten kota PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.66 Perancangan Antarmuka Kabupaten Kota 13. Perancangan antar muka menu utama TAMBAH KABUPATENKOTA A15 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Tambah kabupatenkota Member baru Order masuk Retur masuk Last visit sigout howadmin provinsitambah kabupatenkota Tambah kabupaten kota save reset back Kabupatenkota PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.67 Perancangan Antarmuka Tambah Kabupatenkota 14. Perancangan antar muka menu utama PETUNJUK A16 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 petunjuk Member baru Order masuk Retur masuk Last visit sigout howadmin petunjuk Data petunjuk Petunjuk edit delate edit delate Tambah petunjuk PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.68 Perancangan Antarmuka Petunjuk 15. Perancangan antar muka menu utama PAKET JASA A19 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Paket Jasa pengiriman Member baru Order masuk Retur masuk Last visit sigout howadmin paket jasa pengiriman Data paket jasa pengiriman paket pengiriman edit delate edit delate Tambah paket jasa pengiriman PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.69 Perancangan Antarmuka Paket Jasa 16. Perancangan antar muka menu utama TAMBAH PAKET JASA A20 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Tambah paket jasa pengiriman Member baru Order masuk Retur masuk Last visit sigout howadmin paket jasa pengirimantambah paket jasa pengiriman Paket jasa Tambah paket jasa pengiriman save reset back PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.70 Perancangan Antarmuka Tambah Paket Jasa 17. Perancangan antar muka menu utama ONGKOS KIRIM A21 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Ongkos kirim Member baru Order masuk Retur masuk Last visit sigout howadmin ongkos pengiriman Data ongkos pengiriman Paket pengiriman kabupatenkota pengiriman edit delate edit delate Tambah ongkos pengiriman PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.71 Perancangan Antarmuka Ongkos Kirim 18. Perancangan antar muka menu utama TAMBAH ONGKOS KIRIM A22 Klik tombol DASHBORD menuju Ke A02 Klik tombol ADMIN menuju Ke A03 Klik tombol MEMBER menuju Ke A05 Klik tombol KATEGORI menuju Ke A06 Klik tombol SUBKATEGORI menuju Ke A08 Klik tombol MERK menuju Ke A10 Klik tombol PRODUK menuju Ke A12 Klik tombol STOK menuju Ke A14 Klik tombol PROVINSI menuju Ke A16 Klik tombol KABUPATENKOTA menuju Ke A18 Klik tombol PETUNJUK menuju Ke A20 Klik tombol JASA PENGIRIMAN menuju Ke A21 Klik tombol PAKET JASA PENGIRIMAN menuju Ke A23 Klik tombol ONGKOS menuju Ke A25 Klik tombol ORDER PRODUK menuju Ke A27 Klik tombol RETUR PRODUK menuju Ke A28 Klik tombol LAPORAN PENJUALAN menuju Ke A29 Klik tombol LAPORAN PRODUK menuju Ke A30 Tambah ongkos pengiriman Member baru Order masuk Retur masuk Last visit sigout howadmin ongkos pengirimantambah ongkos pengiriman Tambah ongkos pengiriman save reset back Jasa pengiriman Kabupatenkota ongkos PD. PIPIK PUTRA SHOP admin member Jenis barang merk 2 produk stock wilayah 2 Kabupatenkota petunjuk Jasa dan paket pengiriman 3 Jasa pengiriman Paket jasa pengiriman Ongkos pengiriman File manager 2 Backup database Backup file Gambar 3.72 Perancangan Antarmuka Tambah Ongkos Kirim

3.2.6 Perancangan pesan

Pada tabel dan gambar dibawah ini merupakan perancangan pesan yang terdapat pada aplikasi e-commerce di Toko Buku Risalah. Adapun tampilan pesan yang ada adalah sebagai berikut : 1. Perancangan Pesan Tabel 3.25 Perancangan Pesan No No.Pesan Isi Pesan No.Form 1. M01 Username atau Password Salah T29 2. M02 Keranjang Belanja Masih Kosong T14 3. M03 Data Masih Kosong T08 4. M04 Data Produk Berhasil Diinputkan T18 5. M05 Data Tidak Ditemukan T39 2. Perancangan Konfirmasi Pesan Konfirmasi hapus Apakah anda Yakin akan menghapus Petunjuk? Ya Tidak M12 Konfirmasi hapus Apakah anda Yakin akan menghapus Paket jasa? Ya Tidak M07 Konfirmasi hapus Apakah anda Yakin akan menghapus Produk? Ya Tidak M09 Konfirmasi hapus Apakah anda Yakin akan menghapus Kota? Ya Tidak M13 Konfirmasi hapus Apakah anda Yakin akan menghapus Ongkos Kirim? Ya Tidak M14 Konfirmasi hapus Apakah anda Yakin akan menghapus kota Pengiriman? Ya Tidak M16 Konfirmasi hapus Apakah anda Yakin akan menghapus Keranjang belanja? Ya Tidak M10 Konfirmasi hapus Apakah anda Yakin akan menghapus Gambar? Ya Tidak M11 Konfirmasi Orders Apakah anda Yakin akan Mengupdate status pengiriman menjadi di terima ? Ya Tidak M19 Konfirmasi Orders Apakah anda Yakin akan Mengupdate status bayar menjadi Lunas ? Ya Tidak M17 Konfirmasi Orders Apakah anda Yakin akan Mengupdate No Resi ? Ya Tidak M18 Konfirmasi Orders Apakah anda Yakin akan Mengupdate status bayar menjadi Lunas ? Ya Tidak M15 Konfirmasi hapus Apakah anda Yakin akan menghapus admin Ya Tidak M08 Gambar 3.73 Perancangan Konfirmasi pesan

3.2.7 Perancangan Prodsedural

Adapun perancangan procedural adalah sebagai berikut: 1. Prosedur login Diagram alir pada prosedur login adalah sebagai berikut: mulai User_id dan password Cek user_id dan password Tampilkan pesan Login valid Masuk form menu selesai valid invalid Gambar 3.74 Perancangan Prosedur Login 2. Prosedur tambah data Diagram alir pada prosedur tambah adata adalah sebagai berikut: simpan mulai Cek ada Input tambah data ya selesai Tampilkan pesan tidak Data tersimpan Gambar 3.75 Perancangan Tambah Data