3.2.9 Perancangan Antarmuka
Perancangan antarmuka untuk sistem yang akan dibangun dibedakan sesuai dengan jenis penggunanya, yaitu admin, petugas, pemesan dan
pengunjung. Perancangan antarmuka dan navigasinya dapat dilihat melalui gambar berikut:
3.2.9.1 Perancangan Tampilan untuk pengunjungsebelum login
Gambar 3.28 Halaman Beranda
Gambar 3.29 Halaman Tentang Kami
43 7447 9
6 : --
-
23 462 72
;772 77727 ;
6 42
67 =
7 ;7 974
57 ;772
77727 ; 6 42
67 =
3; 832
62 76:617 7 32
7872= 3;
7 7 32 =
;772 27
; 77727 ;
6 42 572;7
67 = ;772
27 ;
77727 ; 6 42
572;7 67 =
;772 27
; 77727 ;
6 42 572;7
67 = ;772
27 ;
77727 ; 6 42
572;7 67 =
;772 27
; 77727 ;
6 42 572;7
67 = ;772
27 ;
77727 ; 6 42
572;7 67 =
3;3 627
7 6 7 ;47
23 447
4627 ?7 ;6 7 ?7 1 4
627 7
+ 1 4
6 7 ;47 +
1 4 23
447 +
1 4 4627 ?7 ;6 7 ?7
, 1 4
+ 1 4
+ 1 4
+
A:: B
.
;772 27
; 77727 ;
6 42 572;7
67 = ;772
27 ;
77727 ; 6 42
572;7 67 =
;772 27
; 77727 ;
6 42 572;7
67 = ;772
27 ;
77727 ; 6 42
572;7 67 =
;772 27
; 77727 ;
6 42 572;7
67 = ;772
27 ;
77727 ; 6 42
572;7 67 =
Gambar 3.30 Halaman Produk Kami
43 7447 9
6 : --
-
23 462 72
;772 77727 ;
6 42
67 =
7 ;7 974
57 ;772
77727 ; 6 42
67 =
3; 832
62 76:617 7 32
7872= 3;
7 7 32 =
3;3 627
7 6 7 ;47
23 447
4627 ?7 ;6 7 ?7 1 4
627 7
+ 1 4
6 7 ;47 +
1 4 23
447 +
1 4 4627 ?7 ;6 7 ?7
, 1 4
+ 1 4
+ 1 4
+
A:: B
.
,
6 7 7 23
4 4627 ?7 ;6 7 ?7
Gambar 3.31 Halaman Keranjang Belanja
Gambar 3.32 Halaman detail
Gambar 3.33 Halaman Daftar
Gambar 3.34 Halaman Lupa Password
3.2.9.2 Perancangan Tampilan untuk Member setelah Login
Gambar 3.35 Halaman Beranda
Gambar 3.36 Halaman Tentang Kami
Gambar 3.37 Halaman Produk Kami
Gambar 3.38Halaman Keranjang Belanja
Gambar 3.39 Halaman Detail
Gambar 3.40 Halaman Histori Belanja
23 462 72
;772 77727 ;
6 42
67 =
7 ;7 974
57 ;772
77727 ; 6 42
67 =
3;3 627
7 6 7 ;47
23 447
4627 ?7 ;6 7 ?7 1 4
627 7
+ 1 4
6 7 ;47 +
1 4 23
447 +
1 4 4627 ?7 ;6 7 ?7 ,
1 4 +
1 4 5
+ +
1 4 +
A:: B
. 7
83662 5 C 77662
5 32 6 7 ?7D 6 ;D 3;3
Gambar 3.41 Halaman Setting
3.2.9.3 Perancangan Tampilan untuk Admin
1. Perancangan Tampilan untuk Owner
= =
= 2
= 7
2732 627
7 6 ;7 27
46 72
1 4 627
7 + 7
1 4 6 ;7 27
+ 7 1 4
7 + 7
1 4 7
+ 7 1 4
4 +
, 1 4
+ 7 , 1 4 6
+ 7 , 1 4 5
+ 7 ,. 1 4
4 7
1 4 + 7
1 4 6 + 7
1 4 57 + 7
. 1 4
+ 7 1 4
+ 7 1 4 6
+ 7 1 4 57
+ 7 .
1 4 + 7
1 4 + 7
1 4 6 + 7
1 4 57 + 7 .
1 4 ;
+ 7 14
+ 7 1 4
+ 7 - 1 4
+ 7 - 1 4 6
+ 7 - 1 4 57
+ 7 -. 1 4
4 4
+ 7 1 4
+ 7 1 4 6
+ 7 1 4 57
+ 7 .
1 4 3
4 + 7
1 4 + 7
1 4 6 + 7
1 4 57 + 7
. 1 4
+ 7 1 4
+ 7 1 4
+ 7 7
7 ?
4 A4
4 A
4 A
; A ;
7 =
4 =
4 =
= =
; =
= 4
: =
3 4
= .
. 1
1? 1 .
1 ? 1 .
1 1? 1
. 1 ? 1
. 1
1? 1 .
1 ? 1 .
1 1? 1
. 1 ? 1
. 1
1? 1 .
1 ? 1 .
1 1? 1
. 1 ? 1
.
. 1 1
B
4 .
Gambar 3.42 Halaman Beranda
Gambar 3.43 Halaman Pengaturan
= =
= 7
2732 627
7 6 ;7 27
46 72
4 4
4 6
=5 =
E E
B 6
=5 =
6 =5
=
7 ,
7 =
4 =
4 =
= =
; =
= 4
= 3
4 =
476;32 1 4 627
7 + 7
1 4 6 ;7 27 + 7
1 4 7
+ 7 1 4
7 + 7
1 4 4
+ ,
1 4 + 7 ,
1 4 6 + 7 ,
1 4 5 + 7 ,.
1 4 4
7 1 4
+ 7 1 4 6
+ 7 1 4 57
+ 7 .
1 4 + 7
1 4 + 7
1 4 6 + 7
1 4 57 + 7
. 1 4
+ 7 1 4
+ 7 1 4 6
+ 7 1 4 57
+ 7 . 1 4
; + 7
14 + 7
1 4 + 7 -
1 4 + 7 -
1 4 6 + 7 -
1 4 57 + 7 -.
1 4 4
4 + 7
1 4 + 7
1 4 6 + 7
1 4 57 + 7
. 1 4
3 4
+ 7 1 4
+ 7 1 4 6
+ 7 1 4 57
+ 7 .
1 4 + 7
1 4 + 7
1 4 + 7
Gambar 3.44 Halaman Data Kategori
Gambar 3.45 Halaman Tambah Kategori
Gambar 3.46 Halaman Edit Kategori
Gambar 3.47 Halaman SubKategori
Gambar 3.48 Halaman Tambah SubKategori
Gambar 3.49Halaman Edit SubKategori
Gambar 3.50 Halaman Produk
Gambar 3.51Halaman Tambah Produk
Gambar 3.52 Halaman Edit Produk
Gambar 3.53Halaman DetailProduk
Gambar 3.54 Halaman Tambah SubProduk
Gambar 3.55 Halaman Edit SubProduk
Gambar 3.56 Halaman Gambar Produk
Gambar 3.57 Halaman Tambah Gambar Produk
Gambar 3.58 Halaman Propinsi
Gambar 3.59Halaman Tambah Propinsi
Gambar 3.60 Halaman Edit Propinsi
Gambar 3.61 Halaman KabKota
Gambar 3.62 Halaman Tambah KabKota
Gambar 3.63 Halaman Edit KabKota
Gambar 3.64 Halaman Ongkos Kirim
Gambar 3.65 Halaman Laporan Pesanan
Gambar 3.66 Halaman Laporan Pembayaran
Gambar 3.67 Halaman Laporan Pengiriman
Gambar 3.68 Halaman Laporan Retur Produk
2. Perancangan Tampilan untuk Gudang
Gambar 3.69 Halaman Beranda
Gambar 3.70 Halaman Pengaturan
Gambar 3.71 Halaman kategori
Gambar 3.72 Halaman Tambah kategori
Gambar 3.73 Halaman Edit kategori
7 2732
627 7
6 ;7 27 46
72
4 4
4 6
=5 =
6 =5
= ; ,
4 =
4 =
= =
; =
476;32 1 4 627
7 + ;
1 4 6 ;7 27 + ;
1 4 4
+ ; 1 4
+ ; 1 4 6
+ ; 1 4 5
+ ; . 1 4
4 ; ,
1 4 + ; ,
1 4 6 + ; ,
1 4 5 + ; ,.
1 4 + ;
1 4 + ;
1 4 6 + ;
1 4 5 + ;
. 1 4
+ ; 1 4
+ ; 1 4
+ ; 1 4 F .
+ ; . 1 4 6
+ ; 1 4 5
+ ; 1 4
; + ;
14 + ;
Gambar 3.74 Halaman Subkategori
Gambar 3.75 Halaman Tambah Subkategori
Gambar 3.76 Halaman Edit Subkategori
Gambar 3.77 Halaman Produk
Gambar 3.78 Halaman Tambah Produk
Gambar 3.79 Halaman Edit Produk
7 2732
627 7
6 ;7 27 46
72
5 ;
, G
6 =5
= ;
, G
6 =5
=
; 4
= 4
= =
= ;
= 1 4 627
7 + ;
1 4 6 ;7 27 + ;
1 4 4
+ ; 1 4
+ ; 1 4 6
+ ; 1 4 5
+ ; . 1 4
4 ; ,
1 4 + ; ,
1 4 6 + ; ,
1 4 5 + ; ,.
1 4 + ;
1 4 + ;
1 4 6 + ;
1 4 5 + ;
. 1 4
+ ; 1 4
+ ; 1 4
+ ; 1 4 F .
+ ; . 1 4 6
+ ; 1 4 5
+ ; 1 4
; + ;
14 + ;
Gambar 3.80 Halaman detail Produk
Gambar 3.80 Halaman Tambah detail Produk
Gambar 3.81 Halaman Gambar
Gambar 3.82 Halaman Tambah Gambar 3.
Perancangan Tampilan untuk Kasir
Gambar 3.83 Halaman Beranda
Gambar 3.84 Halaman Pengaturan
Gambar 3.84 Halaman Produk
Gambar 3.85 Halaman Detail Produk
Gambar 3.86 Halaman Pesanan
Gambar 3.87 Halaman Pembayaran
Gambar 3.88 Halaman Pengiriman
Gambar 3.89 Halaman Retur 4.
Perancangan tampilan untuk direktur dan seketaris
7 2732
627 7
6 ;7 27 46
72 1 4 627
7 +
1 4 6 ;7 27 +
1 4 +
1 4 +
1 4 6 +
1 4 5 + .
1 4 4
4 + ,
1 4 + ,
1 4 6 + ,
1 4 5 + ,.
1 4 3
4 +
1 4 6 +
1 4 +
1 4 +
1 4 + -
1 4 2
+ 7
? 4
A4 4
A 4
A ;
A ; .
. 1
1? 1 .
1 ? 1 .
1 1? 1
. 1 ? 1
. 1
1? 1 .
1 ? 1 .
1 1? 1
. 1 ? 1
. 1
1? 1 .
1 ? 1 .
1 1? 1
. 1 ? 1
.
. 1 1
B
4 .
= =
= 2
= =
4 :4
= 3
4 =
Gambar 3.90 Halaman Beranda
Gambar 3.91 Halaman Pengaturan
Gambar 3.92 Halaman Propinsi
Gambar 3.93 Halaman Tambah Propinsi
Gambar 3.94 Halaman Edit Propinsi
Gambar 3.95 Halaman Kabkota
Gambar 3.96 Halaman Tambah Kabkota
Gambar 3.97 Halaman Edit Kabkota
Gambar 3.98 Halaman Ongkir
Gambar 3.99 Halaman Edit Ongkir
Gambar 3.100 Halaman Laporan Pesanan
Gambar 3.101 Halaman Laporan Pesanan
Gambar 3.102 Halaman Laporan Pengiriman
Gambar 3.103 Halaman Laporan Retur
M01 M02
M03
M04 M05
M06
M07 M08
M09
Konfirmasi hapus
Apakah anda Yakin akan menghapus Kategori?
3.2.10 Jaringan Semantik