produk dimasukkan
Tgl_masuk timestamp
Tangal produk dimasukkan
3.2.8 Struktur Menu
Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat tiga pengguna aplikasi ini yaitu operator owner, kasir, gudang,
direktur, sekertaris, member, dan pengunjung. Struktur menunya adalah sebagai berikut:
1. Struktur Menu Pengunjung
Gambar 3.21 Struktur Menu Pengunjung
2. Struktur Menu Member
Gambar 3.22 Struktur Menu Member
3. Struktur Menu Owner
Gambar 3.23 Struktur Menu Owner
4. Struktur Menu Gudang
Gambar 3.24 Struktur Menu Gudang
5. Struktur Menu kasir
2
Gambar 3.25 Struktur Menu kasir
6. Struktur Menu Direktur
Gambar 3.26 Struktur Menu Direktur
7. Struktur Menu Sekretaris
Gambar 3.27 Struktur Menu Sekretaris
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
Gambar 3.104 Jaringan Semantik Pengunjung
Gambar 3.105 Jaringan Semantik Member
Gambar 3.106 Jaringan Semantik Owner
; ;
; , ;
; ;
; ;
; , ; ,
;
; ;
, ;
; ;
Gambar 3.107 Jaringan Semantik Gudang
Gambar 3.108 Jaringan Semantik Kasir
7
7 - 7
7 7
7 7
7 7
7 - 7 -
-0
7 7 ,
Gambar 3.110 Jaringan Semantik Direktur dan sekretaris
3.2.11 Perancangan Prosedural
Sebagai langkah terakhir dalam perancangan yaitu merancang prosedural yang akan diimplementasikan ke dalam system. Prosedur ini
akan digunakan sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan procedural untuk pembangunan website e-
commerce yang akan dibangun yang direferensi Indrajani, S.kom.,MM 2010, Perancangan Basis Data dalam All in 1, Jakarta adalah sebagai
berikut:
a. Prosedural Login
Gambar 3.110 Prosedur login
b. Prosedural daftar Prosedural Daftar, prosedur ini dilakukan ketika pengunjung akan
melakukan pendaftaran member.
Gambar 3.111 Prosedur Daftar
c. Prosedural Setting Password Member Prosedural setting password member, merupakan prosedur yang terjadi
ketika member ingin mengedit password.
Gambar 3.112 Prosedur Setting Password Member
d. Prosedural Pemesanan Prosedural pemesanan, prosedur ini dilakukan ketika member akan
melakukan pemesanan.
Gambar 3.113 Prosedur Pemesanan
e. Prosedural Tambah Data Kategori Prosedural tambah data kategori, prosedur ini dilakukan ketika admin akan
melakukan penambahan data kategori.
Gambar 3.114 Prosedur Tambah Data Kategori
f. Prosedural Ubah Kategori Prosedural ubah kategori, prosedur ini dilakukan ketika admin akan
melakukan perubahan data kategori.
Gambar 3.115 Prosedur Ubah Data Kategori
g. Prosedural Tambah Subkategori Prosedural tambah subkategori, prosedur ini dilakukan ketika admin akan
melakukan penambahan data subkategori.
Gambar 3.116 Prosedur Tambah SubKategori
h. Prosedural Ubah Data Subkategori Prosedural ubah subkategori, prosedur ini dilakukan ketika admin akan
melakukan perubahan data subkategori.
Gambar 3.117 Prosedur Ubah SubKategori
i. Prosedural Tambah Data produk Prosedural tambah data produk, prosedur ini dilakukan ketika admin akan
melakukan penambahan data barang.
Gambar 3.118 Prosedur Tambah Data Produk
j. Prosedural Ubah Data Produk Prosedural ubah produk, prosedur ini dilakukan ketika admin akan
melakukan perubahan data produk.
Gambar 3.119 Prosedur Ubah Data Produk
k. Procedural Tambah SubProduk Prosedural tambah subproduk, prosedur ini dilakukan ketika admin akan
melakukan penambahan data detail barang.
Gambar 3.120 Prosedur Tambah SubProduk
l. Prosedural Ubah SubProduk
Prosedural ubah subproduk, prosedur ini dilakukan ketika admin akan
melakukan pengubahan data detail produk.
Gambar 3.121 Prosedur Ubah SubProduk
m. Prosedural Tambah Gambar Prosedural tambah gambar, prosedur ini dilakukan ketika admin akan
melakukan penambahan gambar.
Gambar 3.122 Prosedur Tambah gambar
n. Prosedural Ubah Ongkos Kirim Prosedur ubah Ongkos kirim, prosedur ini dilakukan ketika admin akan
melakukan perubahan ongkos kirim.
Gambar 3123 Prosedur Ubah Ongkos kirim
o. Prosedural Diskon Prosedur ubah diskon ini dilakukan ketika admin akan melakukan
penambahan diskon.
Gambar 3.124 Prosedur Diskon
p. Prosedural Retur Prosedur Retur, prosedur ini dilakukan ketika admin akan melakukan
transaksi retur.
Gambar 3.125 Prosedur Retur
187
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi Sistem
Pada bab ini akan dijelaskan mengenai implementasi sistem yang merupakan tahap penciptaan perangkat lunak dan pengujian sistem yang
dibangun. Hasil dari perancangan pada tahap sebelumnya diimplementasikan dalam bahasa pemrograman. Setelah tahap implementasi selesai, dilanjutkan
dengan tahap pengujian terhadap sistem yang dibangun. Untuk mendukung aplikasi yang akan diterapkan pada lingkungan
implementasi, maka dalam hal ini Toko Dentz Wibiksana menggunakan perangkat keras dan perangkat lunak yang menunjang dalam pembangunan
aplikasi E-Commerce berbasis web.
4.1.1 Perangkat Keras Yang Digunakan
Spesifikasi perangkat keras yang digunakan dalam pembangunan aplikasi di Toko Dentz Wibiksana adalah tercantum pada tabel sebagai
berikut :
Tabel 4.1 Perangkat keras yang digunakan
Perangkat Spesifikasi
Processor Intel Pentium IV 2.0 GHz
RAM 1 GB DDR2
Harddisk 800 Gb HDD
Monitor Resolusi 1024 x 678
VGA 256
Mb
Kategori