Perancanagan Struktur Menu Perancangan Antarmuka

meliputi beberapa perancangan diantaranya perancangan struktur menu, spesifikasi antarmuka, perancangan keluaran dan jaringan semantik.

3.3.1 Perancanagan Struktur Menu

Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat tiga pengguna aplikasi ini yaitu admin, member dan pengunjung. Adapun Struktur menunya adalah sebagai berikut: 1. Perancangan Struktur Menu Pengunjung Home Lelang Cara Pembelian Registrasi Home Hubungi Kami Lihat Tambah Gambar 3.29 Struktur Menu Pengunjung 2. Perancangan struktur Menu Member home login History belanja Hubungi kami keluar Cara pembelian lihat Tambah Ubah Home Lelang Hapus Ubah akun History lelang Gambar 3.30 Struktur Menu Member 3. Perancangan Struktur Menu Admin Menu Utama Login Lupa Password Beranda Pengolahan data admin Pengolahan data master Pengolahan data transaksi Pengolahan data Laporan Logout barang Jasa pengiriman Jenis pengiriman provinsi Kota ongkos kirim kategori Member Lihat Tambah Ubah Hapus Laporan Barang Laporan Harian Laporan Bulanan Laporan Tahunan Rekening Merk Detail merk lelang Kurs Data trasaksi Konfirmasi pembayaran Data lelang Konfirmasi lelang Laporan lelang pengaturan akun Ubah biodata Ubah kata sandi Gambar 3.31 Struktur Menu Admin

3.3.2 Perancangan Antarmuka

Spesifikasi antarmuka merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Spesifikasi antarmuka terdiri dari Perancangan tampilan menu, tampilan form, tampilan pesan, keluaran dan jaringan semantik.

3.3.2.1 Perancangan Antarmuka Pengunjung

1. Perancangan Antamuka Menu Utama Home

Berikut dapat dilihat perancangan antar muka menu utama Home dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.32 dibawah ini: F01 Header | | | | Nama layar : F01 Ukuran Layar : 800x 600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar 3. 32 Perancangan antarmuka menu utama Home

2. Perancangan Antarmuka Menu Registerasi

Berikut dapat dilihat perancangan antarmuka menu Registerasi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.33 dibawah ini: F02 Header | | | | Nama layar : F02 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Nama Lengkap Telepon Kode pos Kota Provinsi Alamat Email Kata sandi Ketik ulang kata sandi Kode captcha Buat Akun Baru Daftar Code Chapcha Gambar 3.33 Perancangan antarmuka menu Registerasi

3. Perancangan Antarmuka Menu Lelang

Berikut dapat dilihat perancangan antarmuka menu lelang dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.34 dibawah ini: F03 Header | | | | Nama layar : F03 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart menuju F10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar Bid Harga Bid Sekarang Nama Sisa Waktu Nama barang yg dilelang Klik Nama barang yang di lelang menuju F 11 Gambar 3. 34 Perancangan antar muka menu Lelang

4. Perancangan Antarmuka Menu Cara Pembelian

Berikut dapat dilihat perancangan antarmuka menu cara pembelian dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.35 dibawah ini: F04 Header Nama layar : F04 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami TEKS Cara Pembelian Gambar 3. 35 perancangan antarmuka menu Cara pembelian

5. Perancangan Antarmuka Menu Hubungi

Berikut dapat dilihat perancangan antarmuka menu Hubungi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.36 dibawah ini: F05 Header Nama layar : F05 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Kontak Kami TEKS Nama Telepon Email Form Komentar Komentar Gambar 3. 36 Perancangan antarmuka menu hubungi

6. Perancangan Antarmuka Menu Login

Berikut dapat dilihat perancangan antarmuka menu login dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.37 dibawah ini: F06 Header | | | | Nama layar : F06 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar 3. 37 Perancangan antar muka menu login

7. Perancangan Antar muka Lupa Kata Sandi

Berikut dapat dilihat perancangan antarmuka menu lupa kata sandi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.38 dibawah ini: F07 Header Nama layar : F07 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Lupa Password Email : Kirim Email Silahkan Masukkan Alamat Email Untuk Melakukan Verifikasi Lupa Kata Sandi Gambar 3. 38 Perancangan antarmuka menu lupa kata sandi

8. Perancangan Antarmuka Kategori

Berikut dapat dilihat perancangan antarmuka menu kategori dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.39 dibawah ini: F08 Header | | | | Nama layar : F08 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar 3.39 Perancangan antarmuka kategori

9. Perancangan Antar muka Detail barang

Berikut dapat dilihat perancangan antarmuka detail barang pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.40 dibawah ini: F09 Header Nama layar : F09 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Nama Barang GAMBAR Harga Stok Berat Kondisi Informasi Barang Detail Spesifikasi GAMBAR Beli Gambar 3.40 perancangan antarmuka menu detail barang

10. Perancangan Antar muka Shopping cart

Berikut dapat dilihat perancangan antarmuka Shopping cart pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.41 dibawah ini: F10 Header Nama layar : F10 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Belanja Lagi Nama Barang Berat Harga Subtotal Hapus Lanjutkan Jumlah Pembayaran Cek Biaya Pengiriman Jasa pengiriman JNE Jenis pengiriman Reguler ONS one night service Provinsi Kota Biaya Cek Harga Kirim Gambar 3.41 perancangan antarmuka menu Shopping cart

3.3.2.2 Perancangan Antarmuka Member

1. Perancangan Antamuka Menu Utama Home

Berikut dapat dilihat perancangan antar muka menu utama Home dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.42 dibawah ini: F01 Header | | | | Nama layar : F01 Ukuran Layar : 800x 600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar 3. 42 Perancangan antarmuka menu halaman utama Home

2. Perancangan Antarmuka Menu Registerasi

Berikut dapat dilihat perancangan antarmuka menu Registerasi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.43 dibawah ini: F02 Header | | | | Nama layar : F02 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Nama Lengkap Telepon Kode pos Kota Provinsi Alamat Email Kata sandi Ketik ulang kata sandi Kode captcha Buat Akun Baru Daftar Code Chapcha Gambar 3.43 Perancangan antarmuka menu Registerasi

3. Perancangan Antarmuka Menu Lelang

Berikut dapat dilihat perancangan antarmuka menu lelang dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.44 dibawah ini: F03 Header | | | | Nama layar : F03 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart menuju F10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar Bid Harga Bid Sekarang Nama Sisa Waktu Nama barang yg dilelang Klik Nama barang yang di lelang menuju F 11 Gambar 3.44 Perancangan antar muka menu Lelang

4. Perancangan Antarmuka Menu Cara Pembelian

Berikut dapat dilihat perancangan antarmuka menu cara pembelian dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.45 dibawah ini: F04 Header Nama layar : F04 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami TEKS Cara Pembelian Gambar 3. 45 perancangan antarmuka menu Cara pembelian

5. Perancangan Antarmuka Menu Hubungi

Berikut dapat dilihat perancangan antarmuka menu Hubungi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.46 dibawah ini: F05 Header Nama layar : F05 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Kontak Kami TEKS Nama Telepon Email Form Komentar Komentar Gambar 3. 46 Perancangan antarmuka menu hubungi

6. Perancangan Antarmuka Menu Login

Berikut dapat dilihat perancangan antarmuka menu login dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.47 dibawah ini: F06 Header | | | | Nama layar : F06 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar 3. 47 Perancangan antar muka menu login

7. Perancangan Antar muka Lupa Kata Sandi

Berikut dapat dilihat perancangan antarmuka menu lupa kata sandi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.48 dibawah ini: F07 Header Nama layar : F07 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Lupa Password Email : Kirim Email Silahkan Masukkan Alamat Email Untuk Melakukan Verifikasi Lupa Kata Sandi Gambar 3. 48 Perancangan antarmuka menu lupa kata sandi

8. Perancangan Antarmuka Kategori

Berikut dapat dilihat perancangan antarmuka menu kategori dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.49 dibawah ini: F08 Header | | | | Nama layar : F08 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Gambar 3.49 Perancangan antarmuka kategori

9. Perancangan Antar muka Detail barang

Berikut dapat dilihat perancangan antarmuka detail barang pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.50 dibawah ini: F09 Header Nama layar : F09 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Nama Barang GAMBAR Harga Stok Berat Kondisi Informasi Barang Detail Spesifikasi GAMBAR Beli Gambar 3.50 perancangan antarmuka menu detail barang

10. Perancangan Antar muka Shopping cart

Berikut dapat dilihat perancangan antarmuka detail barang pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.51 dibawah ini: F10 Header Nama layar : F10 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Belanja Lagi Nama Barang Berat Harga Subtotal Hapus Lanjutkan Jumlah Pembayaran Cek Biaya Pengiriman Jasa pengiriman JNE Jenis pengiriman Reguler ONS one night service Provinsi Kota Biaya Cek Harga Kirim Gambar 3.51 perancangan antarmuka menu Shopping cart

11. Perancangan Antar muka Detail Lelang

Berikut dapat dilihat perancangan antarmuka detail lelang pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.52 dibawah ini: F09 Header Nama layar : F09 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Nama Barang GAMBAR Harga barang Bid History Berat Kondisi Informasi Barang Lelang Detail Spesifikasi GAMBAR Bid Waktu Berakhir Harga bid terakhir : Rp.25 Max Bid rp.25 Gambar 3.52 perancangan antarmuka menu detail lelang

12. Perancangan Antar muka Login Member

Berikut dapat dilihat perancangan antarmuka login member pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.53 dibawah ini: F12 Header | | | | Nama layar : F12 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih menu Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Josep Ubah Akun Keluar Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Gambar detail Prev 1 2 next Gambar Detail Gambar Detail Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Gambar Daftar Barang Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami History Lelang History belanja Gambar 3.53 perancangan antarmuka menu login member

13. Perancangan Antar muka Ubah Akun

Berikut dapat dilihat perancangan antarmuka ubah akun pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.54 dibawah ini: F13 Header | | | | Nama layar : F13 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, Putih Masuk Kategori GAMBAR DH FOTO Kata Kunci Teks Kategori Teks Kategori Username Password Masuk Lupa kata sandi Klik Home Menuju F 01 Klik lelang menuju F 03 Klik Registrasi F 02 Klik Hubungi kami Menuju F 05 Klik Login Menuju F06 Klik Lupa Kata Sandi Menuju F 07 Klik Kategori Menuju F 08 Klik detail Menuju F 09 Shopping Cart Gambar Total 0 Items Cari Barang Pencarian Informasi Pembayaran Gamb ar Gamb ar Gamb ar Gamb ar Barang Terbaru Barang Sering Dilihat Barang Terlaku Gambar Gambar Gambar Layanan Online Gambar Pemenang Lelang Cari Masukkan no resi anda Lacak Pengiriman Paket Gambar Testimonial Shopping Cart Gambar 1 USD = 8700 Klik cara pembelian meunuju F04 Gambar Search Klik Shopping Cart F 10 Home Lelang Cara Pembelian Registrasi Hubungi Kami Nama Lengkap Telepon Kode pos Kota Provinsi Alamat Email Kata sandi Ketik ulang kata sandi Buat Akun Baru Daftar Kosongkan Kata Sandi Jika Tidak Ingin Diganti Gambar 3.54 perancangan antarmuka menu ubah akun

3.3.2.3 Perancangan Antarmuka Admin

1. Perancangan Antar muka login Berikut dapat dilihat perancangan antarmuka login admin dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.55 dibawah ini:  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Nama layar : A01 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Putih , biru A01 Email Password Lupa Password ? Administrator Sign In Cancel Gambar 3. 55 Perancangan antarmuka login 2. Perancangan Antarmuka Home Berikut dapat dilihat perancangan antarmuka home dari pembangunan situs e- commerce pada toko kamera DH foto yang tercantum pada gambar 3.56 dibawah ini: Nama layar : A02 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A02 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Pengaturan Akun Selamat Datang Selamat Datang Gambar 3. 56 Perancangan antar muka home 3. Perancangan Antarmuka Pengolahan data admin Berikut dapat dilihat perancangan antarmuka pengolahan data Admin dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.57 dibawah ini: Nama layar : A01 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A03 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Pengaturan Akun No Nama member Alamat No telepon Email Delete Pengolahan data admin Cari berdasarkan Kata kunci Semua Cari + Gambar 3. 57 Perancangan antarmuka pengolahan data admin 4. Perancangan Antarmuka Pengolahan Data Master Berikut dapat dilihat perancangan antarmuka pengolahan data master dari pembangunan situs e-commerce pada toko kamera DH foto pada yang tercantum gambar 3.58 dibawah ini: Nama layar : A04 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A04 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Pengaturan Akun Kategori Barang Provinsi Kota Jasa pengiriman Jenis pengiriman Ongkos kirim Member Rekening Merk Detail Merk Lelang Kurs Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Gambar 3. 58 Perancangan antarmuka pengolahan data master 5. Perancangan Antarmuka Pengolahan Data Transaksi Berikut dapat dilihat perancangan antarmuka pengolahan data transaksi dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.59 dibawah ini : Nama layar : A05 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A05 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Pengaturan Akun Data transaki Konfirmasi pembayaran Data lelang Konfirmasi lelang Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Gambar 3. 59 Perancangan antarmuka pengolahan data transaksi 6. Perancangan Antarmuka Pengolahan Laporan Berikut dapat dilihat perancangan antarmuka pengolahan data laporan dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.60 dibawah ini : Nama layar : A06 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A06 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Pengaturan akun Laporan harian Laporan bulanan Laporan tahunan Laporan barang Laporan lelang Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Gambar 3. 60 Perancangan antarmuka pengolahan data laporan 7. Perancangan Antarmuka Pengaturan akun Berikut dapat dilihat perancangan antarmuka ubah profil dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.61 dibawah ini: Nama layar : A07 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A07 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Pengaturan akun Ubah biodata Ubah kata sandi Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Gambar 3. 61 Perancangan antarmuka pengaturan akun 8. Perancanagan Antarmuka Pengolahan Data Kategori Berikut dapat dilihat perancangan antarmuka pengolahan data kategori dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.62 dibawah ini: Nama layar : A08 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A08 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Pengaturan akun Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Pengolahan data Kategori No Ubah Hapus Ubah Nama Kategori Hapus Deskripsi Gambar 3. 61 Perancangan antarmuka pengolahan data kategori 9. Perancanagan Antarmuka Pengolahan Data barang Berikut dapat dilihat perancangan antarmuka pengolahan data barang dari pembangunan situs e-commerce pada toko kamera DH foto yang tercantum pada gambar 3.63 dibawah ini: Nama layar : A09 Ukuran Layar : 800x600 Font : Verdana, arial Warna Bacground : Hitam, abu- abu A09 Home Pengolahan data admin Pengolahan Data Master Pengolahan Data Transaksi Pengolahan Laporan Pengaturan akun Keluar Selamat Datang  Klik Sign In menuju A01  Klik Home menuju A02  Klik pengolahan data Admin menuju A03  Klik Pengolahan data master menuju A04  Klik Pengolahan data transaksi menuju A05  Klik Pengolahan data laporan menuju A06  Klik Pengaturan akun menuju menuju A07  Klik Pengolahan data Kategori menuju A08  Klik Pengolahan data barang menuju A09  Klik Pengolahan data Provinsi menuju A10  Klik Pengolahan data Kota menuju A 11  Klik Pengolahan data Jasa Pengiriman menuju A12  Klik Pengolahan data Jenis Pengiriman menuju A13  Klik Pengolahan data Ongkos kirim menuju A14  Klik Pengolahan data Member menuju A15  Klik Pengolahan data rekening menuju A16  Klik Pengolahan data Merk menuju A17  Klik Pengolahan data Detail Merk menuju A19  Klik Pengolahan data Lelang menuju A20  Klik Pengolahan data Kurs menuju A21  Klik Pengolahan data transaksi menuju A22  Klik Pengolahan data Konfirmasi Pembayaran menuju A23  Klik Pengolahan data lelang menuju A24  Klik Pengolahan data konfirmasi Lelang menuju A23  Klik Pengolahan data laporan harian menuju A24  Klik Pengolahan data laporan bulanan menuju A25  Klik Pengolahan data laporan tahunan menuju A26  Klik Pengolahan data laporan Barang menuju A27  Klik Pengolahan data Laporan Lelang menuju A28  Klik ubah biodata menuju A29  Klik ubah kata sandi menuju A30 Pengolahan data Kategori NO Nama detail Kategori Harga Nama Barang Deskripsi Berat Edit Hapus Edit Hapus + Gambar 3.62 Perancangan antarmuka pengolahan data barang

3.3.2.4 Perancangan Pesan

Pada gambar dibawah ini merupakan perancangan pesan yang terdapat pada pembangunan situs e-commerce pada toko kamera DH foto. Adapun tampilan pesan yang ada adalah sebagai berikut : M01 Field ini harus diisi Invalid alamat email M02 Field ini harus diisi Format email salah M03 Nama Harus diisi M04 Alamat Harus diisi M05 Provinsi Harus diisi M06 Kota Harus diisi Kodepos Harus diisi M07 Password Harus Diisi M08 M09 Konfirmasi Harus diisi M10 Konfirmasi Password Salah Maaf Kode spam Salah M11 M12 Terima Kasih Anda Telah Berhasil Registrasi. Silahkan Melakukan Aktivasi M13 Verifikasi Telah Dilakukan Silahkan Login M14 Maaf account tidak di temukan M15 Terima Kasih telah menghubungi kami, Kami Akan Konfirmasi Pesan Anda M16 Maaf, email yang anda masukan telah terdaftar Ukuran Baju belum dipilih M17 Stok Tidak Mencukupi M18 stok tidak cukup untuk barang yang dibeli hanya tersedia .. potong M19 Data Berhasil Ditambah M20 Data Gagal Disimpan M25 Verifikasi Password Baru Telah Dikirim Ke Email M26 Maaf, Masukkan Password Dengan Benar M27 Terima kasih sudah berkunjung M28 Data Berhasil Diubah M21 Data Berhasil Dihapus M22 Data Telah Tersedia M23 Apakah anda yakin ? M24 Ya Tidak Gambar 3. 64 Perancangan pesan

3.3.2.5 Jaringan Simantik

Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program akan digambarkan dalam sebuah jaringan simantik.

1. Jaringan Simantik Admin

A24 A25 A26 A27 A28 A29 A30 A31 A32 A33 A14 A09 A21 A22 A10 A12 A11 A13 A15 A23 A02 A04 M20, M21, M22,M23,M 24 M20, M21, M22, M23, M 24 M20, M21, M22,M23, M24 M20 , M 21, M 22 ,M 23 , M 24 M 2 , M 21 , M 2 2 ,M 2 3 , M 2 4 M 2 , M 2 1 , M 2 2 ,M 2 3 ,M 2 4 M20, M21, M22,M23, M24 M20, M21, M22,M23, M24 M 20 , M 21 , M 22 ,M 23 , M 24 M 2 , M 2 1 , M2 2, M 23 , M 24 M20, M21, M22,M 23,M24 M20 , M21 , M22 ,M2 3, M24 M20, M21, M22,M 23 ,M24 A07 A05 A35 A16 A08 A01 A34 A06 A03 A17 A18 A20 A19 A27 M1 0, Gambar 3. 65 Jaringan simantik admin

2. Jaringan Simantik Pengunjung

F01 F02 F03 F04 F05 F06 F07 F08 M s0 1, Ms 02 , Ms 03 , M s0 4, M s0 5, Ms 06 , Ms 13 , Ms 17 F09 M14 Gambar 3. 66 Jaringan simantik pengunjung 3. Jaringan Simantik Member F01 F02 F03 F04 F05 F06 F07 F08 F09 M18 F10 F11 F13 F12 F17 F14 F15 F16 M 20 M14 Gambar 3. 67 Jaringan simantik member

3.4 Perancangan Prosedural