ANALISIS DAN PERANCANGAN SISTEM
3.5 Perancangan Arsitektur
3.5.2 Perancangan antarmuka
3.5.2.1 Perancangan antarmuka Admin 1 Perancangan antarmuka login
Berikut dapat dilihat perancangan antarmuka untuk admin di halaman login pada gambar III-29 dibawah ini :
B01
- Klik login ke halaman administrastor B02 Username : Password : Login Login Nama Layar : B01 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
Gambar III-28 Halaman Login Admin
2. Perancangan Antarmuka Home
Berikut dapat dilihat perancangan antarmuka home dari pembangunan aplikasi e-commerce pada gambar III-30 dibawah ini:
B02
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02
Nama Layar : B02 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Text Footer * Data Kota * Data Provinsi * Data Ongkir * Laporan Penjualan * Setting * Logout
Gambar III-29 Halaman Home Admin
3. Perancangan Antarmuka Pengolahan Data Produk
Berikut ini adalah halaman pengolahan data produk untuk admin, dimana admin mengklik salah satu navigasi menu produk yang ada di aplikasi e- commerce pada gambar III-31 dibawah ini :
B02
Header
Data Produk | Data Detail Produk | Data Kategori | B03
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
Nama Layar : B03 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Produk :. id_produk : Nama : Deskripsi : id_kategori : Data Produk Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Produk Nama Deskripsi Id_kategori Keterangan
Detail edit hapus * Data Kota * Data Provinsi * Data Ongkir * Laporan Penjualan * Setting * Logout
Gambar III-30 Halaman Pengolahan Data Produk
Berikut ini adalah halaman perancangan antarmuka pengolahan data akategori untuk admin, saat admin mengklik kategori di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-32 dibawah ini :
B02
Header
Data Produk | Data Detail Produk | Data Kategori | B04
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
Nama Layar : B04 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Kategori :. id_kategori :
Nama :
Keterangan :
Data Kategori
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Kategori Nama Keterangan Action
Detail Edit Hapus * Data Kota * Data Provinsi * DataOngkir * Laporan Penjualan * Setting * Logout
Gambar III-31 Halaman Pengolahan Data Kategori
5. Perancangan Antarmuka Pengolahan Data Detail Produk
Berikut ini adalah perancangan antarmuka pengolahan data detail produk untuk admin, dimana admin mengklik detail produk di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-33 dibawah ini :
B02
Header
Data Produk | Data Detail Produk | Data Kategori | B05
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05
Nama Layar : B05 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Detail Produk :.
id_detail_produk : Warna : Ukuran : id_produk : Harga : Stok : Berat : Diskon : Gambar : Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset * Data Kota * Data Provinsi * Data Ongkir * Laporan Penjualan * Setting * Logout Pilih Berkas Pilih Berkas Pilih Berkas
Id detail produk Warna Ukuran Harga Stok Berat Diskon Gambar Action
Detail Edit Hapus
Gambar III-32 Halaman Pengolahan Data Detail Produk
6. Perancangan Antarmuka Pengolahan Data Pemesanan
Berikut ini adalah perancangan antarmuka pengolahan data pemesanan untuk admin, dimana admin mengklik pemesanan di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-34 dibawah ini :
B02
Header B06
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06 Nama Layar : B06 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Pemesanan :.
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
* Data Kota * Data Provinsi * Data Ongkir * Laporan Penjualan * Setting * Logout
7. Perancangan Antarmuka Pengolahan Data Member
Berikut ini adalah perancangan antarmuka pengolahan data member untuk admin, dimana admin mengklik member di navigasi menu aplikasi e- commerce yang dapat dilihat di gambar III-35 dibawah ini :
B02
Header B07
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk menuju ke halaman pengolahan data member B07
Nama Layar : B07 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Member :.
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
* Data Kota * Data Provinsi * Data Ongkir * Laporan Penjualan * Setting * Logout Id_member Action detail delete
Gambar III-34 Halaman Pengolahan Data Member
8. Perancangan Antarmuka Pengolahan Data Pembayaran
Berikut ini adalah perancangan antarmuka pengolahan data pembayaran untuk admin, dimana admin mengklik pembayaran di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-36 dibawah ini :
B02
Header B08
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk menuju ke halaman pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data pembayaran B08
Nama Layar : B08 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Pembayaran:.
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
* Data Kota * Data Provinsi * Data Ongkir * Laporan Penjualan * Setting * Logout Anda mempunyai request pembayaran klik disini untuk
menampilkan
Gambar III-35 Halaman Pengolahan Data Pembayaran
9. Perancangan Antarmuka Pengolahan Data Kota
Berikut ini adalah perancangan antarmuka pengolahan data kota untuk admin, dimana admin mengklik data kota di navigasi menu aplikasi e- commerce yang dapat dilihat di gambar III-37 dibawah ini :
B02
Header
Data Produk | Data Detail Produk | Data Kategori | B09
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk menuju ke halaman pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data pembayaran B08 - Klik data kota untuk menuju halaman pengolahan data kota B09
Nama Layar : B09 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Kota :.
id_kota :
Nama kota : Id_Provinsi :
Data Kota
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Kota Nama Kota Id_Provinsi Action
Detail Edit * Data Kota * Data Provinsi * DataOngkir * Laporan Penjualan * Setting * Logout
Gambar III-36 Halaman Pengolahan Data Kota
Berikut ini adalah perancangan antarmuka pengolahan data provinsi untuk admin, dimana admin mengklik provinsi di navigasi menu aplikasi e- commerce yang dapat dilihat di gambar III-38 dibawah ini :
B02
Header
Data Produk | Data Detail Produk | Data Kategori | B10
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk menuju ke halaman pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data pembayaran B08 - Klik data kota untuk menuju halaman pengolahan data kota B09 - Klik data kota untuk menuju halaman pengolahan data provinsi B10
Nama Layar : B10 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Form Pengolahan Data Provinsi :. id_Provinsi : Nama Provinsi :
Data Provinsi
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tambah Reset
Id_Kota Nama Kota Action
Detail Edit * Data Kota * Data Provinsi * DataOngkir * Laporan Penjualan * Setting * Logout
Gambar III-37 Halaman Pengolahan Data Provinsi
11.Perancangan Antarmuka Pengolahan Data Laporan Harian
Berikut ini adalah perancangan antarmuka pengolahan data laporan harian untuk admin, dimana admin mengklik Laporan Penjualan lalu mengklik harian di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-39 dibawah ini :
B02
Header B11
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk menuju ke halaman pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data pembayaran B08 - Klik data kota untuk menuju halaman pengolahan data kota B09 - Klik data kota untuk menuju halaman pengolahan data provinsi B10
- Klik Laporan Penjualan maka akan muncul haria, bulanan , tahunan, klik harian ke B11
Nama Layar : B11 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Pengolahan Data Laporan Harian :.
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tanggal Keterangan Produk Qty
* Data Kota * Data Provinsi * DataOngkir * Laporan Penjualan * Harian * Bulanan * Tahunan * Setting * Logout Tanggal : Cari
Jenis Pembayaran Total No
Gambar III-38 Halaman Pengolahan Data Harian
12.Perancangan Antarmuka Pengolahan Data Laporan Bulanan
Berikut ini adalah perancangan antarmuka pengolahan data laporan bulanan untuk admin, dimana admin mengklik Laporan Penjualan lalu mengklik bulanan di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-40 dibawah ini :
B02
Header B12
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk
menuju ke halaman
pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data pembayaran B08 - Klik data kota untuk
menuju halaman
pengolahan data kota B09 - Klik data kota untuk
menuju halaman
pengolahan data provinsi B10
- Klik Laporan Penjualan maka akan muncul haria, bulanan , tahunan, klik harian ke B11 - Klik bulanan untuk menuju halaman B12
Nama Layar : B12
Ukuran Layar : 1024 x 640
Font : Arial
Warna : Putih
.: Pengolahan Data Laporan Bulanan :.
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tanggal Keterangan Produk Qty
* Data Kota * Data Provinsi * DataOngkir * Laporan Penjualan * Harian * Bulanan * Tahunan * Setting * Logout Bulan : Cari
Jenis Pembayaran Total
No
Gambar III-39 Halaman Pengolahan Data Laporan Bulanan
13.Perancangan Antarmuka Pengolahan Data Laporan Tahunan
Berikut ini adalah perancangan antarmuka pengolahan data laporan tahunan untuk admin, dimana admin mengklik Laporan Penjualan lalu mengklik tahunan di navigasi menu aplikasi e-commerce yang dapat dilihat di gambar III-41 dibawah ini :
B02
Header B13
Header
- Klik login ke halaman administrastor B02 - Klik Home menuju B02 - Klik Produk ke halaman pengolahan data produk di B03
- Klik kategori ke halaman pengolahan data kategori B04
- Klik detail produk ke halaman pengolahan data detail produk B05 - Klik pemesanan menuju ke halaman pemesanan B06
- Klik member untuk menuju ke halaman pengolahan data member B07
- Klik pembayaran untuk menuju pengolahan data pembayaran B08 - Klik data kota untuk menuju halaman pengolahan data kota B09 - Klik data kota untuk menuju halaman pengolahan data provinsi B10
- Klik Laporan Penjualan maka akan muncul haria, bulanan , tahunan, klik harian ke B11 - Klik bulanan untuk menuju halaman B12
Nama Layar : B12 Ukuran Layar : 1024 x 640 Font : Arial Warna : Putih
.: Pengolahan Data Laporan Bulanan :.
Footer
Home | Produk | Kategori | Detail Produk | Pemesanan | Member | Pembayaran
Tanggal Keterangan Produk Qty
* Data Kota * Data Provinsi * DataOngkir * Laporan Penjualan * Harian * Bulanan * Tahunan * Setting * Logout Tahun Cari
Jenis Pembayaran Total No
Gambar III-40 Halaman Pengolahan Data Laporan Tahunan
3.5.2.2 Perancangan Antarmuka Pengunjung dan Member