3.3.2.1 Perancangan Struktur Menu
Berikut adalah perancangan struktur menu Aplikasi Penjualan Alat Listrik dan Elektronik di Toko Bunga Electric Bandung Berbasis Web :
a. Struktur Menu Administrator Struktur menu pada aplikasi Penjualan Alat Listrik dan Elektronik
Berbasis Web untuk Admin gambar 3.23:
Login Menu
Administrator Home
Logout Pemesanan
Brands Kategori
Barang Buku Tamu
Berita Admin
Hapus Lihat
Tampil Ubah
Tambah
Gambar 3.23 Struktur Menu Administrator
b. Struktur Menu Pelanggan Struktur menu pada aplikasi Penjualan Alat Listrik dan Elektronik
Berbasis Web untuk pelanggan gambar 3.24 :
Login Menu
Pelanggan Logout
Pembayaran Home
Profil Berita
Pemesanan
Lihat Tambah
Shopping chart
Gambar 3.24 Struktur Menu Pelanggan c. Struktur Menu Pengunjung
Struktur menu pada aplikasi Penjualan Alat Listrik dan Elektronik Berbasis Web untuk pengunjung gambar 3.25 :
Menu Pengunjung
View Barang
Berita Home
Buku Tamu
Profil
Lihat Tambah
Gambar 3.25 Struktur Menu Pengunjung
3.3.2.2 Perancangan Antarmuka
1. [F.01] Rancangan Antar Muka Form menu utama Aplikasi Penjualan Alat
Listrik dan Elektronik di Toko Bunga Electric Bandung Berbasis Web sebagai berikut gambar 3.26 :
NAVIGASI
Ø Klik Home maka
akan tampil menu utama F.01
Ø Klik Kategori maka
akan tampil menu kategori F.02
Ø Klik Brands maka
akan tampil menu Brands F.03
Ø Klik BUKU TAMU
maka akan tampil menu buku tamu
F.04 Ø
Klik Service maka akan muncul menu
service F.05 Ø
Klik Hubungi Kami maka akan muncul
menu hubungi kami F.06
Ø Klik profile maka
akan muncul menu profile F.07
Ø Isi field
username,password Klik tombol login
maka akan muncul menu F.08, F.10
Ø Klik pendaftaran
baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul
menu F.10 Ø
Klik Metode Pembayaran maka
akan muncul menu F.11
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
Gambar 3.26 Form menu utama Aplikasi Penjualan Alat Listrik dan Elektronik di Toko Bunga Electric Bandung Berbasis Web
2. [F.02] Rancangan Antar Muka Form Kategori Barang dapat dilihat pada
gambar 3.27:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka
akan tampil menu utama F.01
Ø Klik Kategori maka
akan tampil menu kategori F.02
Ø Klik Brands maka
akan tampil menu Brands F.03
Ø Klik BUKU TAMU
maka akan tampil menu buku tamu
F.04 Ø
Klik Service maka akan muncul menu
service F.05 Ø
Klik Hubungi Kami maka akan muncul
menu hubungi kami F.06
Ø Klik profile maka
akan muncul menu profile F.07
Ø Isi field
username,password Klik tombol login
maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru
maka akan muncul menu pendaftaran
F.13 Ø
Klik Metode belanja maka akan muncul
menu F.10 Ø
Klik Metode Pembayaran maka
akan muncul menu F.11
Ø Klik shooping Chart
maka akan muncul F.08
Ø Klik checkout maka
akan muncul F.09
Gambar 3.27 Rancangan Antar Muka Form Kategori Barang
3.
[F.03] Rancangan Antar Muka Form Brands Barang dapat dilihat pada gambar
3.28:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka akan
tampil menu utama F.01 Ø
Klik Kategori maka akan tampil menu kategori
F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka
akan tampil menu buku tamu F.04
Ø Klik Service maka akan
muncul menu service F.05
Ø Klik Hubungi Kami maka
akan muncul menu hubungi kami F.06
Ø Klik profile maka akan
muncul menu profile F.07 Ø
Isi field username,password Klik
tombol login maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru
maka akan muncul menu pendaftaran F.13
Ø Klik Metode belanja
maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11
Ø Klik shooping Chart
maka akan muncul F.08 Ø
Klik checkout maka akan muncul F.09
Gambar 3.28 Rancangan Antar Muka Form Brands Barang
4. [F.04] Rancangan Antar Muka Form Buku Tamu dapat dilihat pada gambar
3.29:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka akan
tampil menu utama F.01 Ø
Klik Kategori maka akan tampil menu kategori
F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka
akan tampil menu buku tamu F.04
Ø Klik Service maka akan
muncul menu service F.05
Ø Klik Hubungi Kami maka
akan muncul menu hubungi kami F.06
Ø Klik profile maka akan
muncul menu profile F.07 Ø
Isi field username,password Klik
tombol login maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru
maka akan muncul menu pendaftaran F.13
Ø Klik Metode belanja
maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11
Ø Klik shooping Chart
maka akan muncul F.08 Ø
Klik checkout maka akan muncul F.09
Gambar 3.29 Rancangan Antar Muka Form Buku Tamu
5. [F.05] Rancangan Antar Muka Form Service dapat dilihat pada gambar 3.30:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka akan
tampil menu utama F.01 Ø
Klik Kategori maka akan tampil menu kategori
F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka
akan tampil menu buku tamu F.04
Ø Klik Service maka akan
muncul menu service F.05
Ø Klik Hubungi Kami maka
akan muncul menu hubungi kami F.06
Ø Klik profile maka akan
muncul menu profile F.07 Ø
Isi field username,password Klik
tombol login maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru
maka akan muncul menu pendaftaran F.13
Ø Klik Metode belanja
maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11
Ø Klik shooping Chart
maka akan muncul F.08 Ø
Klik checkout maka akan muncul F.09
Gambar 3.30 Rancangan Antar Muka Form Service
6. [F.06] Rancangan Antar Muka Form Hubungi Kami dapat dilihat pada gambar
3.31:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI Ø
Klik Home maka akan tampil menu utama F.01
Ø Klik Kategori maka akan
tampil menu kategori F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka akan
tampil menu buku tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka akan
muncul menu hubungi kami F.06
Ø Klik profile maka akan muncul
menu profile F.07 Ø
Isi field username,password Klik tombol login maka akan
muncul menu F.08, F.10 Ø
Klik pendaftaran baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11 Ø
Klik shooping Chart maka akan muncul F.08
Ø Klik checkout maka akan
muncul F.09
Gambar 3.31 Rancangan Antar Muka Form Hubungi Kami
7. [F.07] Rancangan Antar Muka Form Profile Toko dapat dilihat pada gambar
3.32:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI Ø
Klik Home maka akan tampil menu utama F.01
Ø Klik Kategori maka akan tampil
menu kategori F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka akan
tampil menu buku tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka akan
muncul menu hubungi kami F.06 Ø
Klik profile maka akan muncul menu profile F.07
Ø Isi field username,password Klik
tombol login maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru maka akan
muncul menu pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran maka
akan muncul menu F.11 Ø
Klik shooping Chart maka akan muncul F.08
Ø Klik checkout maka akan muncul
F.09
Gambar 3.32 Rancangan Antar Muka Form Profile Toko
8. [F.08] Rancangan Antar Muka Form Shopping Cart dapat dilihat pada gambar
3.33:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka akan
tampil menu utama F.01 Ø
Klik Kategori maka akan tampil menu kategori F.02
Ø Klik Brands maka akan
tampil menu Brands F.03 Ø
Klik BUKU TAMU maka akan tampil menu buku
tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka
akan muncul menu hubungi kami F.06
Ø Klik profile maka akan
muncul menu profile F.07 Ø
Isi field username,password Klik tombol login maka akan
muncul menu F.08, F.10 Ø
Klik pendaftaran baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11
Ø Klik shooping Chart maka
akan muncul F.08 Ø
Klik checkout maka akan muncul F.09
Gambar 3.33 Rancangan Antar Muka Form Shopping Cart
9. [F.09] Rancangan Antar Muka Form Checkout dapat dilihat pada gambar
3.34:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI Ø
Klik Home maka akan tampil menu utama F.01
Ø Klik Kategori maka akan
tampil menu kategori F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka akan
tampil menu buku tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka akan
muncul menu hubungi kami F.06
Ø Klik profile maka akan muncul
menu profile F.07 Ø
Isi field username,password Klik tombol login maka akan
muncul menu F.08, F.10 Ø
Klik pendaftaran baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11 Ø
Klik shooping Chart maka akan muncul F.08
Ø Klik checkout maka akan
muncul F.09
Gambar 3.34 Rancangan Antar Muka Form Checkout
10. [F.10] Rancangan Antar Muka Form Metode Belanja dapat dilihat pada
gambar 3.35:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI Ø
Klik Home maka akan tampil menu utama F.01
Ø Klik Kategori maka akan
tampil menu kategori F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka akan
tampil menu buku tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka akan
muncul menu hubungi kami F.06
Ø Klik profile maka akan muncul
menu profile F.07 Ø
Isi field username,password Klik tombol login maka akan
muncul menu F.08, F.10 Ø
Klik pendaftaran baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11 Ø
Klik shooping Chart maka akan muncul F.08
Ø Klik checkout maka akan
muncul F.09
Gambar 3.35 Rancangan Antar Muka Form Metode Belanja
11. [F.11] Rancangan Antar Muka Form Metode Pembayaran dapat dilihat pada
gambar 3.36:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI Ø
Klik Home maka akan tampil menu utama F.01
Ø Klik Kategori maka akan
tampil menu kategori F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka
akan tampil menu buku tamu F.04
Ø Klik Service maka akan
muncul menu service F.05 Ø
Klik Hubungi Kami maka akan muncul menu hubungi
kami F.06 Ø
Klik profile maka akan muncul menu profile F.07
Ø Isi field username,password
Klik tombol login maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru maka
akan muncul menu pendaftaran F.13
Ø Klik Metode belanja maka
akan muncul menu F.10 Ø
Klik Metode Pembayaran maka akan muncul menu
F.11 Ø
Klik shooping Chart maka akan muncul F.08
Ø Klik checkout maka akan
muncul F.09
Gambar 3.36 Rancangan Antar Muka Form Metode Pembayaran
12. [F.12] Rancangan Antar Muka Form Detail Barang dapat dilihat pada gambar
3.37:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka akan
tampil menu utama F.01 Ø
Klik Kategori maka akan tampil menu kategori F.02
Ø Klik Brands maka akan
tampil menu Brands F.03 Ø
Klik BUKU TAMU maka akan tampil menu buku
tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka
akan muncul menu hubungi kami F.06
Ø Klik profile maka akan
muncul menu profile F.07 Ø
Isi field username,password Klik tombol login maka akan
muncul menu F.08, F.10 Ø
Klik pendaftaran baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11
Ø Klik shooping Chart maka
akan muncul F.08 Ø
Klik checkout maka akan muncul F.09
Ø Klik beli maka akan muncul
menu F.08
Gambar 3.37 Rancangan Antar Muka Form Detail Barang
13. [F.13] Rancangan Antar Muka Form Tampil Buku Tamu dapat dilihat pada
gambar 3.38:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI Ø
Klik Home maka akan tampil menu utama F.01
Ø Klik Kategori maka akan
tampil menu kategori F.02 Ø
Klik Brands maka akan tampil menu Brands F.03
Ø Klik BUKU TAMU maka akan
tampil menu buku tamu F.04 Ø
Klik Service maka akan muncul menu service F.05
Ø Klik Hubungi Kami maka akan
muncul menu hubungi kami F.06
Ø Klik profile maka akan muncul
menu profile F.07 Ø
Isi field username,password Klik tombol login maka akan
muncul menu F.08, F.10 Ø
Klik pendaftaran baru maka akan muncul menu
pendaftaran F.13 Ø
Klik Metode belanja maka akan muncul menu F.10
Ø Klik Metode Pembayaran
maka akan muncul menu F.11 Ø
Klik shooping Chart maka akan muncul F.08
Ø Klik checkout maka akan
muncul F.09
Gambar 3.38 Rancangan Antar Muka Form Tampil Buku Tamu
14. [F.14] Rancangan Antar Muka Form Pendaftaran dapat dilihat pada gambar
3.39:
Keterangan : Ukuran 1024x768
Font family Arial 12 Warna Biru
NAVIGASI
Ø Klik Home maka akan tampil
menu utama F.01 Ø
Klik Kategori maka akan tampil menu kategori F.02
Ø Klik Brands maka akan tampil
menu Brands F.03 Ø
Klik BUKU TAMU maka akan tampil menu buku tamu F.04
Ø Klik Service maka akan
muncul menu service F.05 Ø
Klik Hubungi Kami maka akan muncul menu hubungi kami
F.06 Ø
Klik profile maka akan muncul menu profile F.07
Ø Isi field username,password
Klik tombol login maka akan muncul menu F.08, F.10
Ø Klik pendaftaran baru maka
akan muncul menu pendaftaran F.13
Ø Klik Metode belanja maka
akan muncul menu F.10 Ø
Klik Metode Pembayaran maka akan muncul menu F.11
Ø Klik shooping Chart maka
akan muncul F.08 Ø
Klik checkout maka akan muncul F.09
Gambar 3.39 Rancangan Antar Muka Form Pendaftaran
15. [T01] Rancangan Antar Muka Form Login Administrator dapat dilihat pada
gambar 3.40:
Image Bunga Electric
Demi keamanan apabila telah selesai menggunakan fasilitas Pegawai ini jangan lupa untuk LOGOUT terlebih dahulu
Tanggal Berita Isi Berita
: :
Vony
Login
Copyright 2009 Bunga Electric
Navigasi : - Klik Login
maka akan menuju ke
T02
Keterangan : - Ukuran
1024x 768 - Font family
Arial 12 - Warna Biru
T01
Login administrator
Image
Gambar 3.40 Rancangan Antar Muka Form Login Administrator
16. [T02] Rancangan Antar Muka Form Home Administrator dapat dilihat pada
gambar 3.41:
Image Bunga Electric
Demi keamanan apabila telah selesai menggunakan fasilitas Administrator ini jangan lupa untuk LOGOUT terlebih dahulu
Selamat Datang di Halaman Administrator
Menu Pegawai
Copyright 2009 Bunga Electric
Navigasi : - klik pengolahan pegawai
maka akan menuju T03 - klik pengolahan pelanggan
maka akan menuju ke T06 - klik pengolahan brands
maka akan menuju ke T08 - klik pengolahan kategori
maka akan menuju ke T11 - klik pengolahan barang
maka akan menuju ke T14 - klik pengolahan buku tamu
maka akan menuju ke T14 - klik pengolahan kota maka
akan menuju ke T19 - klik pengolahan pemesanan
maka akan menujuke T22 - klik pengolahan berita maka
akan menuju ke 24 - klik Logout maka akan
kembali ke form Login
Keterangan : - Ukuran
1024x 768 - Font family
Arial 12 - Warna Biru
Pengolahan Pegawai Pengolahan Pelanggan
Pengolahan Brand Pengolahan Kategori
Pengolahan Barang Pengolahan Buku Tamu
Pengolahan Kota Pengolahan Pemesanan
Pengolahan Berita Logout
T02
Home
Sebelum memulai bekerja mohon harap diperhatikan tata tertib berikut ini :
1. Data yang dimasukan harus sesuai keberadaannya.
2. Apabila anda akan memasukan data harap Teliti. 3. Apabila terjadi kesalahan dalam memasukan
data harap segera diperbaiki. 4. Apabila telah selesai bekerja harap untuk terlebih
dahulu Logout. 5. Selamat Bekerja.
Gambar 3.41 Rancangan Antar Muka Form Home Administrator
3.3.2.3 Perancangan Pesan