Struktur Menu - Perancangan Sistem - Membangun Website Layanan E-Commerce Di Bengkel Pamor Moto

3.2 Perancangan Sistem

3.2.5 Struktur Menu

Struktur menu dirancang sesuai dengan level pengguna yang sistem. Terdapat 3 pengguna aplikasi ini yaitu admin, costumer dan pengunjung. Struktur menunya adalah sebagai berikut :

1. Menu pengunjung

Beranda

Lihat Tambah

Daftar Tentang kami Informasi Hubungi kami shoutbox

Gambar 3.21 struktur menu pengunjung

2. Menu anggota

Lihat Ubah

Sejarah pemesanan Produk Checkout Kontak Logout Beranda

3. Menu admin

Beranda

Anggota produk kategori modul pemesanan pengiriman setting bank informasi database logout

ubah lihat

Gambar 3.23 struktur menu admin

3.2.6 Perancangan Antarmuka sistem

Perancangan antarmuka untuk sistem yang akan dibangun dibedakan sesuai dengan jenis penggunanya, yaitu costumer dan pengunjung. Perancangan antarmuka dan navigasinya dapat dilihat melalui gambar berikut :

1. Perancangan Antar Muka Beranda

Keterangan : Nama Form :T01 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T01

Logo

cari

Halaman Utama

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06

Produk terlaris obrolan

Email Password

Facebook

Aktifitas facebook

Gambar 3.24 antar muka beranda

2. Perancangan antar muka tentang kami

Keterangan : Nama Form :T02 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T02

Logo

Pamor motor sport

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik login menuju T05 -klik daftar menuju T06

Produk terlaris obrolan Email Password

Facebook Aktifitas facebook

3. Perancangan antarmuka informasi

Keterangan : Nama Form :T03 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T03

Logo

Informasi -cara menjadi anggota -cara belanja -cara pembayaran -cakupan wilayah -keuntungan anggota

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06 -klik cara menjadi anggota menuju T02A -klik cara belanja menuju T02B

-klik cara pembayaran menuju T02C -klik cakupan wilayah menuju T02D -klik keuntungan anggota Menuju T02E Produk terlaris obrolan Email Password Login Aktifitas grup pamor

Facebook

Aktifitas facebook

Gambar 3.26 Antarmuka informasi

4. Perancangan antarmuka contact person

Keterangan : Nama Form :T04 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T04

Logo

-chatting -lokasi

Jl.pajajaran no.136 Bandung

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06

Produk terlaris obrolan

Email Password

Aktifitas grup pamor

Facebook Aktifitas facebook

5. Perancangan antarmuka daftar

Keterangan : Nama Form :T05 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T05

Logo

Buat sebuah profil Log In di Pamor Motor Sport yang akan memperkenankan anda untuk berbelanja dengan lebih cepat, menelusuri status pesanan anda saat ini dan memeriksa pesanan-pesanan anda sebelumnya

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06

Produk terlaris obrolan

Email Password

Aktifitas grup pamor

Facebook Aktifitas facebook nama propinsi nama kota/wilayah alamat kode pos bapak ibu nama depan nama belakang telepon alamat email Password Konfirmasi password daftar

Gambar 3.28 Antarmuka daftar

6. Perancangan antarmuka login

Keterangan : Nama Form :T06 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T06

Logo

cari

Halaman Utama

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06 -klik reset password menuju T07 Produk terlaris obrolan Email Password Login Aktifitas grup pamor

Facebook

Aktifitas facebook

7. Perancangan antarmuka reset password

Keterangan : Nama Form :T07 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T07

Logo

Home Tentang kami Informasi contact

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06 -klik reset password menuju T07 Produk terlaris obrolan Email Password Login Aktifitas grup pamor

Facebook Aktifitas facebook

reset

Gambar 3.30 Antarmuka reset password

8. Perancangan antarmuka pemesanan

Keterangan : Nama Form :T08 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T08

Logo Home Tentang kami

Produk kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik informasi menuju T03 -klik contact menuju T04 -klik daftar menuju T05 -klik login menuju T06 -klik reset password menuju T07 -klik produk menuju T09 -klik cek pembayaran menuju T10 -klik cek transaksi menuju T11

-klik logout menuju T12

Produk terlaris obrolan

Selamat datang

Aktifitas grup pamor

Facebook Aktifitas facebook produk Cek pembayaran Cek transaksi Logout

1 2 3 4

cari

Produk terbaru cari

9. Perancangan antarmuka produk

Keterangan : Nama Form :T09 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T09

Logo

Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12 Aktifitas grup pamor

Facebook Aktifitas facebook produk Cek pembayaran Cek transaksi Logout

1 2 3 4 cari Produk terbaru cari Produk kami informasi Pembayaran offline Pembayaran online

Gambar 3.32 Antarmuka produk

10. Perancangan antarmuka cek pembayaran

Keterangan : Nama Form :T10 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T10

Logo Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12

Aktifitas grup pamor

produk Cek pembayaran Cek transaksi Logout

1 2 3 4

SILAHKAN ISI DATA KONFIRMASI PEMBAYARAN DI BAWAH INI JIKA MEMANG ANDA SUDAH MELAKUKAN TRANSFER / PEMBAYARAN

Nomor Transaksi Melalui Bank BNI Mandiri No Rekening Anda

Total Transfer (Contoh : 255000)

Tanggal Transfer

Aktifitas facebook

Facebook

Informasi pembayaran

Segera konfirmasi pembayaran

11. Perancangan antarmuka cek transaksi

Keterangan : Nama Form :T11 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T11

Logo

Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12

Aktifitas grup pamor

produk Cek pembayaran Cek transaksi Logout

1 2 3 4 Aktifitas facebook

Facebook Nomor transaksi

Cek transaksi

Gambar 3.34 Antarmuka cek transaksi

12. Perancangan antarmuka detail produk

Keterangan : Nama Form :T13 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T13

Logo

Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12 -klik add to cart menuju T14

Aktifitas grup pamor

produk Cek pembayaran Cek transaksi Logout

1 2 3 4 Aktifitas facebook Facebook Produk kami Jumlah pesan Share to facebook Add a comment... produk 1 Add to cart

13. Perancangan antarmuka keranjang belanja

Keterangan : Nama Form :T14 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T14

Logo

Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12 -klik add to cart menuju T14

Aktifitas grup pamor

produk Cek pembayaran Cek transaksi Logout

1 2 3 4 Aktifitas facebook Facebook informasi Bergabung bersama kami Keranjang belanja

c h e c k o u t edit hapus total

Gambar 3.36 Antarmuka keranjang belanja

14. Perancangan antarmuka data diri tujuan pengiriman

Keterangan : Nama Form :T15 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T15

Logo

Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12 -klik add to cart menuju T14

-klik lanjut menuju T16 Aktifitas grup pamor

produk Cek pembayaran Cek transaksi Logout

1 2 3 4 Aktifitas facebook Facebook informasi c h e c k o u t

Silahkan Lengkapi Informasi Tujuan Pengiriman Anda

Buatlah data selengkap mungkin agar mudah dikenali saat pengiriman.

Bapak ibu Nama Depan Nama Belakang Nama Propinsi Nama Kota/Wilayah Alamat Kode Pos Telepon lanjut

15. Perancangan antarmuka jasa pengiriman

Keterangan : Nama Form :T16 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T16

Logo Home Tentang kami

-klik home menuju T01 -klik tentang kami menuju T02

-klik logout menuju T12 -klik add to cart menuju T14

-klik lanjut menuju T16

Aktifitas grup pamor

produk Cek pembayaran Cek transaksi Logout

1 2 3 4 Aktifitas facebook Facebook informasi c h e c k o u t Bergabung bersama kami Pembayaran online Pembayaran offline

Data diri tujuan pengiriman

edit

Keranjang belanja

Jasa pengiriman

Cetak faktur paypal

Gambar 3.38 Antarmuka jasa pengiriman

16. Perancangan antarmuka halaman login admin

Keterangan : Nama Form :T17 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T17

Logo

-klik reset menuju T17A

Username : Password :

17. Perancangan antarmuka halaman home admin

Keterangan : Nama Form :T18 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T18

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27

home customer produk kategori modul pemesanan pengiriman transfer database logout

Web admin Nama Email Alamat Kode pos telepon Account setting simpan

Gambar 3.40 antarmuka halaman home admin

18. Perancangan antarmuka customer

Keterangan : Nama Form :T19 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T19

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27

home customer produk kategori modul pemesanan pengiriman transfer database logout

customer

19. Perancangan antarmuka produk

Keterangan : Nama Form :T20 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T20

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27

home customer produk kategori modul pemesanan pengiriman transfer database logout

produk

Gambar 3.42 antarmuka halaman produk

20. Perancangan antarmuka kategori

Keterangan : Nama Form :T21 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T21

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27

home customer produk kategori modul pemesanan pengiriman transfer database logout

kategori

21. Perancangan antarmuka modul

Keterangan : Nama Form :T22 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T22

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27 home customer produk kategori modul pemesanan pengiriman transfer database logout

modul

Gambar 3.44 antarmuka modul

22. Perancangan antarmuka pemesanan

Keterangan : Nama Form :T23 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T23

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27

home customer produk kategori modul pemesanan pengiriman transfer database logout

pemesanan

23. Perancangan antarmuka pengiriman

Keterangan : Nama Form :T24 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T24

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27 home customer produk kategori modul pemesanan pengiriman transfer database logout

pengiriman

Gambar 3.46 antarmuka pengiriman

24. Perancangan antarmuka transfer

Keterangan : Nama Form :T25 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T25

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27

home customer produk kategori modul pemesanan pengiriman transfer database logout

transfer

25. Perancangan antarmuka database

Keterangan : Nama Form :T26 Ukuran layar : 1024 x 768 Font ; Times new roman Warna layar :hitam

T26

Logo

-klik customer menuju T19

-klik produk menuju T20 -klik kategori menuju T21 -klik modul menuju T22 -klik pemesanan menuju T23

-klik pengiriman menuju T24

-klik transfer menuju T25 -klik database menuju T26

-klik logout menuju T27 home customer produk kategori modul pemesanan pengiriman transfer database logout

database

Gambar 3.48 antarmuka database

3.2.7 Perancangan Antarmuka Pesan

1. Pesan kesalahan login member.

M01

Username atau password salah

M03

Nama Propinsi harus diisi Nama Kota/Wilayah harus diisi Kode Pos harus diisi Bapak Ibu harus diisi Nama Depan harus diisi Nama Belakang harus diisi Telepon harus diisi Alamat Email harus diisi Password harus diisi

Konfirmasi Password ulangi password

2. Pesan akan muncul ketika pencarian produk tidak ditemukan

M02

Data tidak ditemukan

Gambar 3.50 pesan kesalahan pada pencarian produk tidak ditemukan

3. Pesan kesalahan akan muncul ketika proses pendaftaran belum lengkap

Dalam dokumen Membangun Website Layanan E-Commerce Di Bengkel Pamor Motor Sport (Halaman 119-135)