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