89
13. Tabel jadwal armada a. Nama File : Tabel jadwal_armada
b. Primary Key : id_jadwal_armada c. Jumlah Field : 9
d. Keterangan : Tabel berisi data jadwal armada
Tabel 0.21 Tabel Jadwal Armada
Nama Field Type Data
Panjang Kunci
Keterangan
Id_jadwal_armada Bigint
20 Primary key Not null
Id_transaksi Bigint
20 Foreign key
Not null Id_petugas
Bigint 20
Foreign key Not null
Id_armada Bigint
20 Foreign key
Not null Tanggal_pengiriman
Varchar 25
- Not null
Lama_hari int
11 -
Not null Nama_armada
Varchar 50
- Not null
Nama_supir Varchar
50 -
Not null Plat_nomor
Varchar 15
- Not null
3.2.2. Perancangan Struktur Menu
Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat empat pengguna aplikasi ini yaitu web admin, order admin, anggota dan
pengunjung. Adapun struktur menunya adalah sebagai berikut :
1. Struktur menu web administrator 2. Struktur menu order administrator
3. Struktur menu anggota 4. Struktur menu pengunjung
90
3.2.2.1.Struktur Menu Web Administrator
Untuk lebih jelasnya struktur menu pada administrator akan ada pada gambar 3.19 sebagai berikut :
Halaman utama
Beranda pengelola
Anggota Pengaturan
transaksi Pengaturan Web
Ganti Profil Ganti Password
Keluar login
Gambar 3.21 Menu Web Admin 3.2.2.2.Struktur Menu Order Admin
Untuk lebih jelasnya struktur menu pada operator akan ada pada gambar 3.20 sebagai berikut
Menu utama Beranda
Kategori Barang
Pemesanan Penjualan
armada Kota
Provinsi Ganti profil
Ganti password Keluar
login
Gambar 3.22 Menu Order Admin
91
3.2.2.3.Struktur Menu Anggota
Untuk lebih jelasnya struktur menu pada anggota akan ada pada gambar 3.21 sebagai berikut :
Menu utama Barang baru
diskon Banyak dilihat
Daftar anggota barang
Keranjang belanja Alamat
Jasa pengiriman pembayaran
Lupa Password login
keluar
Gambar 3.23 Menu anggota 3.2.2.4.Struktur Menu Pengunjung
Untuk lebih jelasnya struktur menu pada pengunjung akan ada pada gambar 3.22 sebagai berikut :
Menu utama
Barang baru diskon
Banyak dilihat Daftar anggota
Login Kategori barang
Gambar 3.24 Menu Pengunjung
92
3.2.3. Perancangan Arsitektur
Setelah melakukan perancangan data pada sistem yang dibangun, maka dilakukanlah perancangan arsitektur. Perancangan arsitektur yang telah dibuat
meliputi beberapa perancangan diantaranya perancangan antar muka, perancangan pesan dan jaringan semantik.
3.2.3.1.Perancangan Antar Muka
Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Spesifikasi perancangan
antar muka terdiri dari :
1. Perancangan antar muka web administrator 2. Perancangan antar muka order administrator
3. Perancangan antar muka anggota 4. Perancangan antar muka pengunjung
3.2.3.1.1. Perancangan antar muka web administrator
1. Perancangan antar muka login
Z01 Email Username
Password Login
Reset Nama Layar : Z01
Ukuran Layar : 1024 X 768 Font : arial
Warna Background : putih - Klik login menuju
Z02
Gambar 3.25 Perancangan Antar Muka Login
93
2. Perancangan antar muka beranda web admin
Z02 Beranda
Nama Layar : Z02 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola Pengaturan Web
Ganti Profil Ganti Password
Keluar Teks
footer - Klik pengelola menuju
Z03 - Klik Anggota menuju Z04
- klik pengaturan transaksi menuju Z05
- klik pengaturan web menuju Z06
- klik ganti profil menuju Z07
- klik ganti password menuju Z08
- klik keluar menuju Z01
Gambar 3.26 Perancangan Antar Muka Beranda Web Admin
3. Perancangan antar muka pengelola web admin
Z03 Pengelola
Nama Layar : Z03 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola
Pengaturan Web Ganti Profil
Ganti Password Keluar
Tabel pengaturan pengelola
footer - Klik beranda menuju
Z02 - Klik Anggota menuju Z04
- klik pengaturan transaksi menuju Z05
- klik pengaturan web menuju Z06
- klik ganti profil menuju Z07
- klik ganti password menuju Z08
- klik keluar menuju Z01
Gambar 3.27 Perancangan Antar Muka Pengelola Web Admin
94
4. Perancangan antar muka anggota web admin
Z04 Anggota
Nama Layar : Z04 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola Pengaturan Web
Ganti Profil Ganti Password
Keluar Tabel anggota
footer - Klik beranda menuju
Z02 - Klik pengelola menuju
Z03 - klik pengaturan transaksi
menuju Z05 - klik pengaturan
web menuju Z06 - klik ganti profil
menuju Z07 - klik ganti password
menuju Z08 - klik keluar menuju Z01
Gambar 3.28 Perancangan Antar Muka Anggota Web Admin 5.
Perancangan antar muka pengaturan transaksi web admin
Z05 Pengaturan Transaksi
Nama Layar : Z05 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola
Pengaturan Web Ganti Profil
Ganti Password Keluar
Tabel pengaturan transaksi
footer - Klik beranda menuju Z02
- Klik pengelola menuju Z03
- Klik Anggota menuju Z04 - klik pengaturan
web menuju Z06 - klik ganti profil
menuju Z07 - klik ganti password
menuju Z08 - klik keluar menuju Z01
Gambar 3.29 Perancangan Antar Muka Pengaturan Transaksi Web Admin
95
6. Perancangan antar muka pengaturan website web admin
Z06 Pengaturan Web
Nama Layar : Z06 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola
Pengaturan Web Ganti Profil
Ganti Password Keluar
Tabel Pengaturan web
footer - Klik beranda menuju Z02
- Klik pengelola menuju Z03
- Klik Anggota menuju Z04 - klik pengaturan transaksi
menuju Z05 - klik ganti profil
menuju Z07 - klik ganti password
menuju Z08 - klik keluar menuju Z01
Gambar 3.30 Perancangan Antar Muka Pengaturan Website Web Admin
7. Perancangan antar muka ganti profil web admin
Z07 Ganti Profil
Nama Layar : Z07 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola Pengaturan Web
Ganti Profil Ganti Password
Keluar Form ganti profil
footer - Klik beranda menuju Z02
- Klik pengelola menuju Z03
- Klik Anggota menuju Z04 - klik pengaturan transaksi
menuju Z05 - klik pengaturan
web menuju Z06 - klik ganti password
menuju Z08 - klik keluar menuju Z01
Gambar 3.31 Perancangan Antar Muka Ganti Profil Web Admin
96
8. Perancangan antar muka ganti password web admin
Z08 Ganti Password
Nama Layar : Z08 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu web administrator Beranda
Pengaturan Transaksi Anggota
Pengelola Pengaturan Web
Ganti Profil Ganti Password
Keluar Teks
footer - Klik beranda menuju Z02
- Klik pengelola menuju Z03
- Klik Anggota menuju Z04 - klik pengaturan transaksi
menuju Z05 - klik pengaturan
web menuju Z06 - klik ganti profil
menuju Z07 - klik keluar menuju Z01
Gambar 3.32 Perancangan Antar Muka Ganti Password Web Admin 9.
Perancangan antar muka keluar
Z01 Email Username
Password Login
Reset Nama Layar : Z01
Ukuran Layar : 1024 X 768 Font : arial
Warna Background : putih - Klik login menuju
Z02
Gambar 3.33 Perancangan Antar Muka Keluar
97
3.2.3.1.2. Perancangan Antar Muka Order Administrator
1. Perancangan antar muka login order admin
Z01 Email Username
Password Login
Reset Nama Layar : Z01
Ukuran Layar : 1024 X 768 Font : arial
Warna Background : putih - Klik login menuju
Z02
Gambar 3.34 Perancangan Antar Muka Login
2. Perancangan antar muka beranda order admin
R02 Beranda
Nama Layar : R02 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Transaksi Pemesanan Barang
Kategori Transaksi Penjualan
Armada Pengiriman Kota
Provinsi Ganti Profil
Teks
footer - Klik kategori menuju
R03 - Klik barang menuju
R04 - klik Transaksi
pemesanan menuju R05 - klik transaksi penjualan
menuju R06 - klik armada pengiriman
menuju R07 - klik kota menuju R08
- Klik provinsi menuju R09 - klik Ganti profil menuju
R10 - klik Ganti password
menuju R11 - klik keluar menuju Z01
Ganti Password Keluar
Gambar 3.35 Perancangan Antar Muka Beranda Order Admin
98
3. Perancangan antar muka kategori order admin
R03 kategori
Nama Layar : R03 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Ganti Profil Ganti Password
Keluar Form Tambah Kategori
Footer Tambah
Tabel Kategori Kategori
Barang Transaksi Pemesanan
Transaksi Penjualan Armada Pengiriman
- Klik beranda menuju R02
- Klik barang menuju R04
- klik Transaksi pemesanan menuju R05
- klik transaksi penjualan menuju R06
- klik armada pengiriman menuju R07
- klik kota menuju R08 - Klik provinsi menuju R09
- klik Ganti profil menuju R10
- klik Ganti password menuju R11
- klik keluar menuju Z01
Kota Provinsi
Gambar 3.36 Perancangan Antar Muka Kategori Order Admin
4. Perancangan antar muka barang order admin
R04 Barang
Nama Layar : R04 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Ganti Profil Ganti Password
Keluar Tabel Barang
Footer Tambah barang
Kategori Barang
Transaksi Pemesanan Transaksi Penjualan
Armada Pengiriman - Klik beranda menuju R02
- Klik kategori menuju R03
- klik Transaksi pemesanan menuju R05
- klik transaksi penjualan menuju R06
- klik armada pengiriman menuju R07
- klik kota menuju R08 - Klik provinsi menuju R09
- klik Ganti profil menuju R10
- klik Ganti password menuju R11
- klik keluar menuju Z01
Provinsi Kota
Gambar 3.37 Perancangan Antar Muka Barang Order Admin
99
5. Perancangan antar muka transaksi pemesanan order admin
R05 Transaksi Pemesanan
Nama Layar : R05 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Ganti Profil Ganti Password
Keluar Tabel Pemesanan
Footer Kategori
Barang Transaksi Pemesanan
Transaksi Penjualan Armada Pengiriman
- Klik beranda menuju R02 - Klik kategori menuju
R03 - Klik barang menuju
R04 - klik transaksi penjualan
menuju R06 - klik armada pengiriman
menuju R07 - klik kota menuju R08
- Klik provinsi menuju R09 - klik Ganti profil menuju
R10 - klik Ganti password
menuju R11 - klik keluar menuju Z01
Kota Provinsi
Gambar 3.38 Perancangan Antar Muka Transaksi Pemesanan Order Admin
6. Perancangan antar muka transaksi penjualan order admin
R06 Transaksi Penjualan
Nama Layar : R06 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Ganti Profil Ganti Password
Keluar Tabel Penjualan
Footer Kategori
Barang Transaksi Pemesanan
Transaksi Penjualan Armada Pengiriman
- Klik beranda menuju R02
- Klik kategori menuju R03
- Klik barang menuju R04
- klik Transaksi pemesanan menuju R05
- klik armada pengiriman menuju R07
- klik kota menuju R08 - Klik provinsi menuju
R09 - klik Ganti profil menuju
R10 - klik Ganti password
menuju R11 - klik keluar menuju Z01
Provinsi Kota
Ga
mbar 3.39 Perancangan Antar Muka Transaksi Penjualan Order Admin
100
7. Perancangan antar muka armada pengiriman order admin
R07 Armada pengiriman
Nama Layar : R07 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Ganti Profil Ganti Password
Keluar Form Tambah Armada
Pengiriman
Footer Tambah
Kategori Barang
Transaksi Pemesanan Transaksi Penjualan
Armada pengiriman Tabel armada pengiriman
- Klik beranda menuju R02
- Klik kategori menuju R03
- Klik barang menuju R04
- klik Transaksi pemesanan menuju R05
- klik transaksi penjualan menuju R06
- klik kota menuju R08 - Klik provinsi menuju
R09 - klik Ganti profil menuju
R10 - klik Ganti password
menuju R11 - klik keluar menuju Z01
Kota Provinsi
Gambar 3.40 Perancangan Antar Muka Armada Pengiriman Order Admin
8. Perancangan antar muka kota order admin
R08 Kota
Nama Layar : R08 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Transaksi Pemesanan Barang
Kategori Transaksi Penjualan
Armada Pengiriman Ganti profil
Ganti Password Keluar
Form tambah kota
Footer - Klik beranda menuju
R02 - Klik kategori menuju
R03 - Klik barang menuju
R04 - klik Transaksi
pemesanan menuju R05 - klik transaksi penjualan
menuju R06 - klik armada pengiriman
menuju R07 - Klik provinsi menuju
R09 - klik Ganti profil menuju
R10 - klik Ganti password
menuju R11 - klik keluar menuju Z01
Kota Provinsi
Tabel kota
Gambar 3.41 Perancangan Antar Muka Kota Order Admin
101
9. Perancangan antar muka provinsi order admin
R09 provinsi
Nama Layar : R09 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Transaksi Pemesanan Barang
Kategori Transaksi Penjualan
Armada Pengiriman Ganti profil
Ganti Password Keluar
Form tambah provinsi
Footer - Klik beranda menuju
R02 - Klik kategori menuju
R03 - Klik barang menuju
R04 - klik Transaksi
pemesanan menuju R05 - klik transaksi penjualan
menuju R06 - klik armada pengiriman
menuju R07 - klik kota menuju
R08 - klik ganti profil menuju
R10 - klik ganti password
menuju R11 - klik keluar menuju Z01
Kota Provinsi
Tabel provinsi
Gambar 3.42 Perancangan Antar Muka Provinsi Order Admin 10.
Perancangan antar muka ganti profil order admin
R10 Ganti Profil
Nama Layar : R10 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Transaksi Pemesanan Barang
Kategori Transaksi Penjualan
Armada Pengiriman Ganti profil
Ganti Password Keluar
Form Ganti Profil
Footer Simpan
- Klik beranda menuju R02
- Klik kategori menuju R03
- Klik barang menuju R04
- klik Transaksi pemesanan menuju R05
- klik transaksi penjualan menuju R06
- klik armada pengiriman menuju R07
- klik kota menuju R08
- klik provinsi menuju R09 - klik ganti password
menuju R11 - klik keluar menuju Z01
Provinsi Kota
Gambar 3.43 Perancangan Antar Muka Ganti Profil Order Admin
102
11. Perancangan antar muka ganti password order admin
R11 Ganti Password
Nama Layar : R11 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
Menu order administrator Beranda
Pemesanan Barang
Kategori Penjualan
Ongkos Kirim Ganti profil
Ganti Password Keluar
Form Ganti Password
Footer Simpan
- Klik beranda menuju R02
- Klik kategori menuju R03
- Klik barang menuju R04
- klik Transaksi pemesanan menuju R05
- klik transaksi penjualan menuju R06
- klik armada pengiriman menuju R07
- klik kota menuju R08
- klik provinsi menuju R09 - klik ganti profil menuju
R10 - klik keluar menuju Z01
Kota Provinsi
Gambar 3.44 Perancangan Antar Muka Ganti Password Order Admin
12. Perancangan antar muka keluar
Z01
Email Username Password
Login Reset
Nama Layar : Z01 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik login menuju Z02
Gambar 3.45 Perancangan Antar Muka Keluar
103
3.2.3.1.3. Perancangan Antar Muka Anggota
1. Perancangan antar muka beranda anggota
B01
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Selamat Datang Di Galuh Mebel
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B01 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menauju B06
- klik kategori Sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.46 Perancangan Antar Muka Beranda Anggota 2.
Perancangan antar muka riwayat pesan
A01
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Spring Bed Furniture
Selamat Datang Member
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : A01 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik nama barang
menuju A06
Ganti password Keluar
Gambar 3.47 Perancangan Antar Muka Riwayat Pesan
104
3. Perancangan antar muka respon saya
A03
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Spring Bed Furniture
Umpan balik Member Data umpan balik
keranjang YM
FB Twitter
Nama Layar : A03 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik nama barang
menuju A06
Ganti password Keluar
Gambar 3.48 Perancanagan Antar Muka Respon Saya
4. Perancangan antar muka profil dan alamat
A04
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Spring Bed Furniture
Form profil dan alamat member Form data profil dan alamat member
keranjang YM
FB Twitter
Nama Layar : A04 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik nama barang
menuju A06
Ganti password Keluar
Gambar 3.49 Perancangan Antar Muka Profil dan Alamat
105
5. Perancangan antar muka ganti password
A05
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Springbed Furniture
Form ganti password Password
keranjang YM
FB Twitter
Nama Layar : A05 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik kleuar menuju B01 - klik nama barang
menuju A06
Ganti password Keluar
Ulangi Password Password baru
Simpan
Gambar 3.50 Perancangan Antar Muka Ganti Password 6.
Perancangan antar muka deskripsi barang
A06
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Springbed Furniture
Nama barang Keterangan barang
keranjang YM
FB Twitter
Nama Layar : A06 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01
Ganti password Keluar
Keranjang
Gambar 3.51 Perancangan Antar Muka Deskripsi Barang
106
7. Perancangan antar muka keranjang belanja
A07
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Springbed Furniture
Keranjang belanja anda Tabel keranjang belanja
keranjang YM
FB Twitter
Nama Layar : A07 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik update keranjang
menuju A07 - klik lanjutkan belanja
menuju A01 - klik selesai belanja
menuju A08
Ganti password Keluar
Update Keranjang Selesai belanja
Lanjutkan belanja
Gambar 3.52 Perancangan Antar Muka Keranjang Belanja 8.
Perancangan antar muka pengisian alamat pengiriman
A08
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Springbed Furniture
Isi alamat pengiriman Form alamat tujuan pengiriman
keranjang YM
FB Twitter
Nama Layar : A08 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik lanjutkan belanja
menuju A01 - klik lanjutkan ke jasa
pengiriman menuju A09
Ganti password Keluar
Lanjutkan ke jasa pengiriman Lanjutkan belanja
Gambar 3.53 Perancangan Antar Muka Pengisian Alamat Pengiriman
107
9. Peancangan antar muka pilih jasa pengiriman
A09
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori springbed Furniture
Pilih jasa pengiriman barang Tabel keterangan pembelian barang
keranjang YM
FB Twitter
Nama Layar : A09 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik checkout menuju
A10
Ganti password Keluar
Tujuan pengiriman barang Checkout
Ganti tujuan pengiriman Tabel jasa pengiriman
Gambar 3.54 Perancangan Antar Muka Pilih Jasa Pengiriman 10.
Perancangan antar muka transaksi pemesanan
A10
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Springbed Furniture
Transaksi pemesanan selesai
Keterangan pembayaran klik disini
keranjang YM
FB Twitter
Nama Layar : A10 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik keluar menuju B01 - klik disini menuju A11
Ganti password Keluar
Gambar 3.55 Perancangan Antar Muka Transaksi Pemesanan
108
11. Perancangan antar muka detail pesanan
A11
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori latex Springbed Furniture
Detail pesanan Tabel keterangan pembelian barang
keranjang YM
FB Twitter
Nama Layar : A11 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01 - klik proses menuju A12
Ganti password Keluar
Form tipe pembayaran Proses
Gambar 3.56 Aerancangan Antar Muka Detail Pesanan
12. Perancangan antar muka konfirmasi pesanan
A12
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Menu Member
Beranda Anggota Profil dan alamat
Riwayat Pesanan Respon Saya
Kategori Barang Kategori Sofa
Kategori Springbed Furniture
Konfirmasi pesanan Tabel pesanan barang
keranjang YM
FB Twitter
Nama Layar : A12 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik Beranda Anggota menuju A01
- klik Riwayat pesanan menuju A02
- klik respon anggota menuju A03
- klik profil dan alamat menuju A04
- klik ganti password menuju A05
- klik kleuar menuju B01
Ganti password Keluar
Keterangan pembayaran
Gambar 3.57 Perancangan Antar Muka Konfirmasi Pesanan
109
3.2.3.1.4. Perancangan Antar Muka Pengunjung
1. Perancangan antar muka beranda pengunjung
B01
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Selamat Datang Di Galuh Mebel
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B01 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menauju B06
- klik kategori Sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.58 Perancangan Antar Muka Beranda Pengunjung 2.
Perancangan antar muka barang baru
B02
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Terbaru
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B02 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.59 Perancangan Antar Muka Barang Baru
110
3. Perancangan antar muka diskon
B03
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Diskon
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B03 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.60 Perancangan Antar Muka Diskon
4. Perancangan antar muka banyak dilihat
B04
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Banyak Dilihat
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B04 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.61 Perancangan Antar Muka Banyak Dilihat
111
5. Perancangan antar muka daftar anggota
B05
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Form Pendaftaran member baru
Form pengisian keranjang
YM FB
Twitter
Nama Layar : B05 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Daftar Reset
Gambar 3.62 Perancangan Antar Muka Daftar Anggota
6. Perancangan antar muka pencarian
B06
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Pencarian
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B06 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik kategori sofa menuju B07
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.63 perancangan antar muka pencarian
112
7. Perancangan antar muka kategori sofa
B07
footer Beranda
Barang Baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Kategori Sofa
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B07 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori springbed menuju B08
- klik login menuju A01
Gambar 3.64 Perancangan Antar Muka Kategori Sofa
8. Perancangan antar muka kategori spring bed
B08
footer Beranda
Barang baru Diskon
Banyak Dilihat Daftar Anggota
Cari Gambar Mebel
Nama Mebel Login Anggota
Email Password
Login Kategori Barang
Kategori Sofa Kategori Springbed
Furniture Kategori springbed
Gambar barang, nama, dan harga keranjang
YM FB
Twitter
Nama Layar : B08 Ukuran Layar : 1024 X 768
Font : arial Warna Background : putih
- Klik beranda menuju B01
- Klik barang baru menuju B02
- klik diskon menuju B03
- klik banyak dilihat menuju B04
- klik daftar anggota menuju B05
- klik pencarian menuju B06
- klik kategori sofa menuju B07
- klik login menuju A01
Gambar 3.65 Perancangan Antar Muka Kategori Springbed
113
3.2.3.2.Jaringan Semantik
Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program
akan digambarkan dalam sebuah jaringan semantik. Jaringan semantik yang akan dijelaskan pada gambar terdiri dari jaringan semantik web administrator, jaringan
semantik order administrator, jaringan semantik anggota dan jaringan semantik pengunjung.
1. Jaringan semantik web administrator
Z01 Z02
Z03 Z05
Z07 Z08
Z06 Z04
Gambar 3.66 Jaringan Semantik Web Admin
114
2. Jaringan semantik order administrator
Z01
R09 R08
R07 R06
R10 R05
R04 R03
R02
R11
Gambar 3.67 Jaringan Semantik Order Admin 3.
Jaringan semantik anggota
A01
A10 A08
A07 A06
B01 A05
A04 A03
A02
A12 A11
A09
Gambar 3.68 Jaringan Semantik Anggota
115
4. Jaringan semantik pengunjung
B01 B02
B05
B07 B06
B04 B03
B08
Gambar 3.69 Jaringan Semantik Pengunjung 3.2.3.3.Perancangan Prosedural
Sebagai langkah terakhir dalam perancangan yaitu perancangan prosedural yang akan di implementasikan ke dalam sistem. Prosedur ini akan digunakan
sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan prosedural untuk pembangunan sistem e-commerce pada toko galuh
mebel yang akan dibangun adalah sebagai berikut :
116
1. Prosedur Login Anggota
Mulai
Masukan email dan
password
Tampilkan pesan email atau
password salah Cek validasi email
dan password
Ya Tidak
Selesai Berhasil login
dan masuk menu anggota
Gambar 3.70 Prosedur Login Anggota
117
2. Prosedur Daftar Anggota
Mulai
Tampil pesan data salah
Cek validasi data pendaftaran
ya tidak
Selesai Input data daftar
anggota
Tampil pesan terima kasih
berhasil daftar Pendaftaran
berhasil Simpan data
Gambar 3.71 Prosedur Daftar Anggota
118
3. Prosedur Ubah Data Anggota
Mulai
Input data anggota yang
akan diubah
Tampil pesan data tidak
lengkap Cek data apakah
sudah lengkap atau tidak
ya
Selesai tidak
Tampil pesan data berhasil
dirubah Data
berhasil diubah
Simpan data
Gambar 3.72 Prosedur Ubah Data Anggota
119
4. Prosedur Ubah Data Petugas
Mulai
Input data petugas yang
akan diubah
Tampil pesan data tidak
lengkap Cek data apakah
sudah lengkap atau tidak
ya
Selesai tidak
Tampil pesan data berhasil
dirubah Data
berhasil dirubah
Simpan data
Gambar 3.73 Prosedur Ubah Data Petugas
120
5. Prosedur Pembelian Dilakukan Anggota
Mulai
Selesai Tampilkan pesan
email atau password salah
tidak
tidak Alamat utama
anggota jadi memilih atau tidak
tidak Pilih barang
yang akan dipesan
lanjut Tampil detail
barang Pilih tombol
beli Masukan
jumlah yang akan dibeli
Jumlah barang yang dipesan
melebihi stok ya
Kembali belanja ?
ya
Alamat anggota atau
alamat lain Tampilkan info
alamat anggota
Lanjut atau kembali ke
keranjang Kembali ke keranjang
Tampil form armada
Pilih armada
Tampil form pembayaran
Bayar sekarang atau
nanti Tampil pesan
terima kasih telah belanja
Bayar nanti Masukan data
pembayaran
Bayar sekarang Data yang
dimasukan kosong
Tampil pesan data tidak
lengkap ya
tidak
Gambar 3.74 Prosedur Pembelian Anggota
121
6. Prosedur Tambah Data Barang Dilakukan Order Admin
Mulai
Tampil pesan data barang
sama Cek Data apakah
ada yang sama atau tidak
tidak ya
Selesai Pilih kategori
Tampil pesan data berhasil
disimpan Tambah
data barang terbaru
berhasil Memasukan
barang baru
Simpan barang terbaru
Gambar 3.75 Prosedur Tambah Data Barang
122
7. Prosedur Ubah Data Barang Dilakukan Order Admin
Mulai
Input data barang yang
akan diubah
Tampil pesan data tidak
lengkap Cek data apakah
sudah lengkap atau tidak
ya
Selesai tidak
Tampil pesan data berhasil
dirubah Data
berhasil diubah
Simpan data
Gambar 3.76 Prosedur Ubah Data Barang
123
8. Prosedur Informasi Barang Terbaru
Mulai
Tampil data barang
Tampil informasi barang lama
Apakah barang 2 bulan
ya
Selesai tidak
Pengecekan barang
Tampil informasi barang baru
Gambar 3.77 Prosedur Informasi Barang Terbaru
124
BAB 4 IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi Sistem
Tahap implementasi merupakan tahap penciptaan perangkat lunak, tahap kelanjutan dari kegiatan perancangan sistem. Tahap ini merupakan
tahap dimana sistem siap untuk dioperasikan, yang terdiri dari penjelesan mengenai lingkungan implementasi, dan implementasi program.
4.1.1 Lingkungan Sistem
Untuk mendukung aplikasi yang akan diterapkan pada lingkungan implementasi, maka dalam hal ini menggunakan perangkat keras dan
perangkat lunak yang menunjang dalam pembangunan aplikasi e-commerce pada toko Galuh Mebel
4.1.1.1 Perangkat Keras Yang Digunakan
Spesifikasi perangkat keras yang digunakan dapat tercantum pada Tabel 4.1 sebagai berikut :
Tabel 4.1 Tabel Perangkat Keras Yang digunakan No
Komponen Spesifikasi
1 Prosesor
Kecepatan 2,3 GHz 2
RAM 1024 Mb
3 VGA
512 Mb 4
HDD Free 80 Gb
5 Monitor
Monitor 6
Keyboard dan mouse
Standar
