Perancangan Struktur Menu Perancangan Antarmuka

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