Perancangan Struktur Menu - Tabel warna

Gambar 3.6 DFD Level 1

19. Tabel warna

3.4.4 Perancangan Struktur Menu

Perancangan struktur menu menu dan submenu yang berfungsi untuk memudahkan user dalam menggunakan sistem. Menu – menu tersebut dibagi berdasarkan hak akses masing-masing user. Berikut ini gambaran mengenai struktur menu e-commerce yang akan dibangun.

a. Struktur Menu Pengunjung

Menu Utama

Depan ^Pembelian

Saya ^Keranjang ^Masuk ^Daftar ^Kategori ^Spesial

Kerudung Mukenah Pants Skirt Dompet Tas Paling Laku

Paling Dilihat ^Produk

Diskon

b. Struktur Menu Member

Depan ^Pembelian

Saya ^Keranjang ^Akun ^Keluar ^Kategori ^Spesial

Kerudung Mukenah Pants Skirt Dompet Tas Paling Laku Paling Dilihat ^Produk

Diskon Lupa

Password Menu Utama

Gambar 3.32 Struktur Menu Member

c. Struktur Menu Admin

d. Struktur Menu Operator

Depan Profil Saya ^Kelola Kelola Produk Pembelian Kelola Data Master Kelola Member ^Keluar Manual Delivered Input Resi Cetak Alamat Pembayaran Pembelian Aktif Propinsi Kategori Warna Lupa Password Menu Utama Kota ^Jasa Pengiriman Paket

Pengiriman ^{Ongkos Kirim} Manual Delivered Input Resi

Cetak Alamat Retur Aktif

Gambar 3.34 Struktur Menu Operator 3.4.5 Perancangan Antar Muka Aplikasi

Interface atau antar muka merupakan tampilan dari suatu program aplikasi

yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan menyediakan

interface yang mudah dipahami dan digunakan oleh user.

Perancangan antar muka untuk aplikasi E-Commerce pada Nuy Collection’s adalah sebagai berikut :

a. Pengunjung

LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2 Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Depan Pembelian Saya Keranjang Masuk Daftar

Selamat Datang A01 Search Kurs Menu Kategori Produk Menu Kategori Spesial Nama Toko

Alamat & Nomor Telepon Toko ^Facebook

Bank Mandiri Bank BCA

- Klik “Depan” untuk menuju “A01” - Klik “Logo” untuk menuju “A01” - Klik “Pembelian Saya” untuk menuju “A02” - Klik “Keranjang” untuk menuju “A07” - Klik “Masuk” untuk menuju “A02” - Klik “Daftar” untuk menuju “A03” - Klik “Keranjang belanja” untuk menuju “A01” - Klik “Menu kategori produk” untuk menuju “A08” - Klik “Menu kategori spesial” untuk menuju “A09” - Klik “Yahoo messenger” untuk menuju situs yahoo messenger

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Produk” untuk menuju “A06”

Spesial

Syarat & Ketentuan Bantuan

2. Antar muka pengunjung halaman masuk LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2

Depan Pembelian Saya Keranjang A02 Masuk Daftar Menu Kategori Produk Menu Kategori Spesial Search Kurs Nama Toko

Alamat & Nomor Telepon Toko ^{Bank Mandiri} Facebook Bank BCA Masuk Email : Password : Lupa Password ? Masuk Spesial

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Masuk” untuk menuju “B01” - Klik “Lupa password” untuk menuju “A10”

Syarat & Ketentuan Bantuan

Gambar 3.36 Antar muka pengunjung halaman masuk

3. Antar muka pengunjung halaman daftar

LOGO

Keranjang Belanja

Kategori

Yahoo Messenger 1

Yahoo Messenger 2

Depan Pembelian Saya Keranjang A03

Registrasi Member

Email *

Kata Sandi * Ulang Kata Sandi *

Nama Lengkap *

Propinsi * Kota * Alamat *

Kode Pos Telp/Hp Captcha * Kode

Semua field bertanda bintang (*) wajib diisi !

Daftar ! Masuk Daftar Menu Kategori Produk Menu Kategori Spesial Search Kurs Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri

Bank BCA Spesial

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Daftar” untuk menuju “A04”

Syarat & Ketentuan Bantuan

4. Antar muka pengunjung halaman pendaftaran sukses LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2

Depan Pembelian Saya Keranjang A04

Pendaftaran Sukses

Masuk Daftar

Terima kasih Anda telah mendaftarkan sebagai member NUY COLLECTIONS. Silahkan masuk ke email Anda untuk aktifasi akun

Terima kasih. NUY COLLECTIONS Menu Kategori Produk Menu Kategori Spesial Search Kurs Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri

Bank BCA Spesial

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

Syarat & Ketentuan Bantuan

Gambar 3.38 Antar muka pengunjung halaman pendaftaran sukses

5. Antar muka pengunjung halaman aktivasi berhasil

LOGO

Keranjang Belanja

Kategori

Yahoo Messenger 1

Yahoo Messenger 2

Depan Pembelian Saya Keranjang A05

Aktivasi Akun

Masuk Daftar

Aktivasi Akun Berhasil

Selamat, akun Anda telah aktif. Silahkan berbelanja produk kami. NUY COLLECTIONS Kurs Menu Kategori Produk Menu Kategori Spesial Search Nama Toko

Alamat & Nomor Telepon Toko ^Facebook Bank Mandiri

Bank BCA Spesial

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

Syarat & Ketentuan Bantuan

6. Antar muka pengunjung halaman Detail produk LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2

Depan Pembelian Saya Keranjang A06

Nama Produk

Masuk Daftar

Detail Gambar Produk

Gambar Produk

Detail Kategori Warna Pilihan Warna Jumlah Beli Kurs Search Menu Kategori Produk Menu Kategori Spesial Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri Bank BCA

Halo,...!

Spesial

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Beli” untuk menuju “A07”

Syarat & Ketentuan Bantuan

Gambar 3.40 Antar muka pengunjung halaman Detail produk

7. Antarmuka pengunjung halaman menu kategori

LOGO

Keranjang Belanja

Kategori

Yahoo Messenger 1

Yahoo Messenger 2

Depan Pembelian Saya Keranjang A08 Masuk Daftar Menu Kategori Produk Menu Kategori Spesial Search Kurs Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri Bank BCA Gambar

Kategori : „Nama Kategori‟

Gambar Spesial Nama Produk Harga Nama Produk Harga

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Produk” untuk menuju “A06”

Syarat & Ketentuan Bantuan

8. Antarmuka pengujung halaman menu kategori spesial LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2

Depan Pembelian Saya Keranjang A08 Masuk Daftar Menu Kategori Produk Menu Kategori Spesial Search Kurs Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri Bank BCA Gambar Produk Spesial Gambar Spesial Nama Produk Harga Nama Produk Harga

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Produk” untuk menuju “A06”

Syarat & Ketentuan Bantuan

Gambar 3.42 antarmuka pengunjung halaman kategori spesial

9. Antarmuka pengunjung halaman lupa password

LOGO

Keranjang Belanja

Kategori

Yahoo Messenger 1

Yahoo Messenger 2

Depan Pembelian Saya Keranjang A08 Masuk Daftar Menu Kategori Produk Menu Kategori Spesial Search Kurs Nama Toko

Alamat & Nomor Telepon Toko ^{Bank Mandiri} Facebook Bank BCA

Lupa Password

Spesial

Untuk membuat kata sandi baru, masukkan email yang Anda gunakan untuk login ke NUY COLLECTIONS.

Lanjutkan

- Klik “Bank Mandiri” untuk menuju untuk menuju situs Bank Mandiri

- Klik “Bank BCA” untuk menuju untuk menuju situs Bank BCA

- Klik “Facebook” untuk menuju untuk menuju situs Facebook

Syarat & Ketentuan Bantuan

b. Member

1. Antar muka member halaman Depan

LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2 Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Spesial Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Gambar Produk Nama Produk Harga Depan Pembelian Saya Keranjang Akun Keluar

Selamat Datang B01 Search Kurs Menu Kategori Produk Menu Kategori Spesial Nama Toko

Alamat & Nomor Telepon Toko ^{Bank Mandiri} Facebook Bank BCA

- Klik “Depan” untuk menuju “B01” - Klik “Logo” untuk menuju “B01” - Klik “Pembelian Saya” untuk menuju “B11” - Klik “Keranjang” untuk menuju “B03” - Klik “Akun” untuk menuju “B12” - Klik “Keluar” untuk menuju “A01” - Klik “Menu kategori” untuk menuju “B14” - Klik “Yahoo messenger” untuk menuju situs yahoo messenger

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Produk” untuk menuju “B02”

Bantuan Syarat & Ketentuan

Gambar 3.44 antarmuka member halaman depan

2. Antar muka member halaman detail produk

LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2 Spesial

Depan Pembelian Saya Keranjang B02

Nama Produk

Detail Gambar Produk

Gambar Produk

Detail Pembayaran Pengiriman Kategori Warna Pilihan Warna Jumlah Beli Kurs Search Menu Kategori Produk Menu Kategori Spesial Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri Bank BCA

Halo,...!

Akun Keluar

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Beli” untuk menuju “B03”

Bantuan Syarat & Ketentuan

3. Antar muka member halaman keranjang belanja LOGO Kategori Yahoo Messenger 1 Yahoo Messenger 2 Spesial

Depan Pembelian Saya Keranjang B03 1. Keranjang Belanja Jumlah (pcs) Total Berat (gram) Total Harga IDR Produk Batal Nama Produk Gambar Produk Warna : Harga : Rp. Berat : gram

Update Keranjang Kosongkan Keranjang Total Pembelian Rp.

(Belum termasuk biaya pengiriman)

Kembali Berbelanja Lanjutkan

2. Alamat Pengiriman

3. Paket Pengiriman

4. Periksa Seluruh Informasi Belanja

5. Selesai Menu Kategori Produk Menu Kategori Spesial Kurs Search Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri

Bank BCA

Halo,...!

Akun Keluar

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Kembali berbelanja” untuk menuju “B01” - Klik “Lanjutkan” untuk menuju “B04”

Bantuan Syarat & Ketentuan

4. Antar muka member halaman alamat pengiriman

LOGO

Kategori

Spesial

Depan Pembelian Saya Keranjang B04

1. Keranjang Belanja

Akun Keluar

2. Alamat Pengiriman

3. Paket Pengiriman 4. Periksa Seluruh Informasi Belanja 5. Selesai Menu Kategori Produk Menu Kategori Spesial Kurs Search

Tentukan alamat tujuan pengiriman barang. Pilihan penerima barang pesanan : Ke alamat akun Kepada : Alamat : Kota, Propinsi : Kodepos : Telp/Hp : Nama Toko

Alamat & Nomor Telepon Toko Facebook

Bank Mandiri Bank BCA

Halo,...!

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Keranjang belanja” untuk menuju “B03” - Klik “Langkah selanjutnya” untuk menuju “B05”

Bantuan Syarat & Ketentuan Ke alamat lain

Keranjang Belanja Langkah Selanjutnya

Semua field bertanda bintang (*) wajib diisi !

Email * Propinsi * Kota * Alamat * Kode Pos Telp/Hp

5. Antar muka member halaman paket pengiriman

LOGO

Kategori

Spesial

Depan Pembelian Saya Keranjang B05

1. Keranjang Belanja

Akun Keluar

2. Alamat Pengiriman

3. Paket Pengiriman

4. Periksa Seluruh Informasi Belanja

5. Selesai Menu Kategori Produk Menu Kategori Spesial Kurs Search

Pilih Jasa Pengiriman Pilihan Jasa Pengiriman

Langkah Selanjutnya

Yahoo Messenger 1

Yahoo Messenger 2

Nama Toko

Alamat & Nomor Telepon Toko Facebook Bank Mandiri

Bank BCA

Halo,...!

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Langkah Selanjutnya” untuk menuju “B06”

Bantuan Syarat & Ketentuan

Pilih Paket Pengiriman Pilihan Paket Pengiriman

Langkah sebelumnya

6. Antar muka member halaman detail pemesanan

LOGO

Kategori

Spesial

Depan Pembelian Saya Keranjang B06

1. Keranjang Belanja

Akun Keluar

2. Alamat Pengiriman

3. Paket Pengiriman 4. Periksa Seluruh Informasi Belanja

5. Selesai Menu Kategori Produk Menu Kategori Spesial Kurs Search Yahoo Messenger 1 Yahoo Messenger 2 Jumlah (pcs) Total Berat (gram) Total Harga IDR Produk Nama Produk Gambar Produk Warna : Harga : Rp. Berat : gram Keranjang Belanja TOTAL Total Belanja Rp. Total Item Total Berat Paket Pengiriman JNE - OK

Total Biaya Pengiriman Rp.

Total Pembayaran Rp.

Tujuan Pengiriman Nama dan Alamat

Langkah Sebelumnya Selesaikan Pemesanan

Nama Toko

Alamat & Nomor Telepon Toko Facebook

Bank Mandiri Bank BCA

Halo,...!

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Langkah sebelumnya” untuk menuju “B06” - Klik “Selesaikan pemesanan” untuk menuju “B07”

Bantuan Syarat & Ketentuan

7. Antar muka member halaman selesai pemesanan

LOGO

Kategori

Spesial

Terima Kasih atas Pembelian Anda ! Halo,………..

Terima kasih atas kepercayaan Anda berbelanja di NUY COLLECTIONS.

· Nomor Pemesanan Anda adalah ……..

· Besar tagihan adalah Rp. ………...

· Jatuh tempo pembayaran……….

Jika hingga batas jatuh tempo pemesanan ini belum dibayar, kami menganggap Anda membatalkan pesanan.

Untuk pembayaran, Anda dapat melakukan transfer ke rekening berikut ini :

· Rekening Bank Mandiri 999 999 9999 a.n. NUY COLLECTIONS

· Rekening Bank BCA 111 222 3333 a.n. NUY COLLECTIONS

Lakukan konfirmasi pembayaran sekarang atau Anda dapat menemukan tautan untuk konfirmasi pembayaran ini dengan melihat detail pembelian Anda pada menu Pembelian Saya.

Bayar dengan PayPal?

Kami juga pembayaran melalui PayPal. Untuk melakukan pembayaran PayPal, lakukan disini. Tautan ini dapat Anda temukan dengan melihat detail Pembelian Anda pada menu Pembelian Saya. Jika ada yang ingin Anda tanyakan, jangan ragu untuk menghubungi customer service kami. Terima kasih atas kepercayaan Anda berbelanja di NUY COLLECTIONS. NUY COLLECTIONS.

Depan Pembelian Saya Keranjang B07 Akun Keluar Menu Kategori Produk Menu Kategori Spesial Kurs Search Yahoo Messenger 1 Yahoo Messenger 2 Nama Toko

Alamat & Nomor Telepon Toko ^{Bank Mandiri} Facebook Bank BCA

Halo,...!

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Konfirmasi pembayaran” untuk menuju “B08”

- Klik “disini” untuk menuju “B10”

Bantuan Syarat & Ketentuan

Gambar 3.50 antarmuka member halaman selesai pemesanan

8. Antar muka member halaman pembayaran bank

LOGO Keranjang Belanja Kategori Yahoo Messenger 1 Yahoo Messenger 2 Spesial

Depan Pembelian Saya Keranjang B08

Konfirmasi Pembayaran untuk Pemesanan 000008 Keluar Total Pembelian Rp. Biaya Kirim Rp. Total Pembayaran Rp. Kurs Menu Kategori Produk Menu Kategori Spesial Search Akun Rekening Tujuan Pilihan Rekening Tujuan Metode Transfer Pilihan Metode Transfer Tanggal Bayar

Jumlah Transfer Rp. Pemilik Rekening Pengirim

Nomor Rekening Pengirim

Masukan Konfirmasi Pembayaran

Nama Toko

Alamat & Nomor Telepon Toko ^{Bank Mandiri} Facebook Bank BCA

Halo,...!

- Klik “Bantuan” untuk menuju “B15” - Klik “Syarat & Ketentuan” untuk menuju “B16” - Klik “Facebook” untuk menuju untuk menuju situs Facebook

- Klik “Masukkan konfirmasi pembayaran” untuk menuju “B09”

Bantuan Syarat & Ketentuan

9. Antar muka member halaman konfirmasi pembayaran LOGO Kategori Spesial Terima Kasih ! Sukses

Terima Kasih Anda telah melakukan konfirmasi pembayaran.

Kami akan mengabari Anda lewat email setelah kami memeriksa informasi konfirmasi pembayaran Anda. NUY COLLECTIONS

Depan Pembelian Saya Keranjang B09 Akun Keluar Menu Kategori Produk Menu Kategori Spesial Kurs Search Yahoo Messenger 1 Yahoo Messenger 2

Kembali ke Halaman Pembelian Saya

Nama Toko

Alamat & Nomor Telepon Toko ^{Bank Mandiri} Facebook Bank BCA

Halo,...!

- Klik “Depan” untuk menuju “B01” - Klik “Logo” untuk menuju “B01”

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN SISTEM. mengetahui masalah, penyusunan alternatif pemecahan masalah yang timbul, (Halaman 112-152)