5. Perancangan Antarmuka Help N5
Funbox Production N5
Home Tentang Kami
Daftar Contact
Photos Help
Login Email
Password
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Login
Kategori Help
Navigasi : 1. Klik Home untuk menuju N1
2. Klik Tentang Kami untuk menuju
N2 3.
Klik Daftar untuk menuju N3 4.
Klik Photos Kami untuk menuju N4
5. Klik Contact untuk menuju N6
Gambar 3.68 Tampilan Help
6. Perancangan Antarmuka Contact N6
Funbox Production N6
Home Tentang Kami
Daftar Contact
Photos Help
Login Email
Password
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Login
Kategori Contact
Navigasi : 1. Klik Home untuk menuju N1
2. Klik Tentang Kami untuk menuju
N2 3.
Klik Daftar untuk menuju N3 4.
Klik Photos Kami untuk menuju N4
5. Klik Help untuk menuju N5
Gambar 3.69 Tampilan Contact
3.1.9.3 Perancangan Antarmuka Pelanggan
1. Perancangan Antarmuka Home P1
Funbox Production P1
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Katalog
G A
M B
A R
G A
M B
A R
G A
M B
A R
G A
M B
A R
Navigasi : 1.
Klik Keranjang untuk menuju P2 2.
Klik Transaksi untuk menuju P3 3.
Klik Riwayat Transaksi untuk menuju P4
4. Klik Profile untuk menuju P5
5. Klik Photos untuk menuju P6
6. Klik Help untuk menuju P7
7. Klik Contact untuk menuju P8
8. Klik Logout untuk menuju N1
Gambar 3.70 Tampilan Home
2. Perancangan Antarmuka Keranjang P2
Funbox Production P2
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Keranjang Belanja No. Invoice
qty diskon
Nama Produk subtotal
Harga T
total Edit Hapus
Pemesanan Nama Penerima
: Tujuan Pengiriman
:
Chekout Ganti Penerima
Pilih type jasa Biaya kirimKg
Biaya kirim Total bayar
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Transaksi untuk menuju P3
3. Klik Riwayat Transaksi untuk
menuju P4 4.
Klik Profile untuk menuju P5 5.
Klik Photos untuk menuju P6 6.
Klik Help untuk menuju P7 7.
Klik Contact untuk menuju P8 8.
Klik Logout untuk menuju N1 9.
Klik editt untuk menuju P8 10. Klik Ganti untuk menuju P9
Gambar 3.71 Tampilan Keranjang
3. Perancangan Antarmuka Transaksi P3
Funbox Production P3
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Status Pemesanan No. invoice
Tanggal Pemesanan
Total Harga Biaya Kirim
Total Bayar Status
Pembayaran T
Bayar Detail
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Riwayat Transaksi untuk
menuju P4 4.
Klik Profile untuk menuju P5 5.
Klik Photos untuk menuju P6 6.
Klik Help untuk menuju P7 7.
Klik Contact untuk menuju P8 8.
Klik Logout untuk menuju N1 9.
Klik Detail untuk menuju P12
Gambar 3.72 Tampilan Transaksi
4. Perancangan Antarmuka Riwayat Transaksi P4
Funbox Production P4
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
History Waktu
Keterangan
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Profile untuk menuju P5
5. Klik Photos untuk menuju P6
6. Klik Help untuk menuju P7
7. Klik Contact untuk menuju P8
8. Klik Logout untuk menuju N1
Gambar 3.73 Tampilan Riwayat Transaksi
5. Perancangan Antarmuka profile P5
Funbox Production P5
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Profile Nama Depan
: Nama belakang
: Provinsi
: Kota
: Alamat
: Kode Pos
: Telepon
: Update
Batal Ganti Password
Password Lama :
Password baru :
Retype Password Baru :
Ganti
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Photos untuk menuju P6 6.
Klik Help untuk menuju P7 7.
Klik Contact untuk menuju P8 8.
Klik Logout untuk menuju N1
Gambar 3.74 Tampilan Profile
6. Perancangan Antarmuka Photos P6
Funbox Production P6
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Photos
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Help untuk menuju P7 7.
Klik Contact untuk menuju P8 8.
Klik Logout untuk menuju N1
Gambar 3.75 Tampilan Photos
7. Perancangan Antarmuka Help P7
Funbox Production P7
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Help
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Photos untuk menuju P6 7.
Klik Contact untuk menuju P8 8.
Klik Logout untuk menuju N1
Gambar 3.76 Tampilan Help
8. Perancangan Antarmuka Contact P8
Funbox Production P8
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Contact
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Photos untuk menuju P6 7.
Klik Help untuk menuju P7 8.
Klik Logout untuk menuju N1
Gambar 3.77 Tampilan Contact
9. Perancangan Antarmuka Edit Pemesanan P9
Funbox Production P9
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Edit Pemesanan Jumlah
Update
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Photos untuk menuju P6 7.
Klik Help untuk menuju P7 8.
Klik contact untuk menuju P8 9.
Klik Logout untuk menuju N1
Gambar 3.78 Tampilan Edit Pemesanan
10. Perancangan Antarmuka ganti Pengirim P10
Funbox Production P10
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
Keranjang Belanja No. Invoice
qty Sub. Total
Nama Produk Berat
Harga T
Diskon Edit Hapus
Pengiriman Nama Penerima
: Provinsi Tujuan
: Kota Tujuan
: Alamat Tujuan
: Kode Pos
: Simpan
Batal Pemesanan
Total Harga :
Total Biaya Kirim :
Total Bayar :
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Photos untuk menuju P6 7.
Klik Help untuk menuju P7 8.
Klik contact untuk menuju P8 9.
Klik Logout untuk menuju N1
Gambar 3.79 Tampilan Ganti Penriman
11. Perancangan Antarmuka Konfirmasi Penerimaan P12
Funbox Production P12
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
No Invoice Produk
Harga Qty
Diskon Sub Total
Status Konfirmasi penerimaan barang
T Terima
Nama barang qty
Submit
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Photos untuk menuju P6 7.
Klik Help untuk menuju P7 8.
Klik contact untuk menuju P8 9.
Klik Logout untuk menuju N1
Gambar 3.80 Tampilan Konfirmasi Penerimaan
12. Perancangan Antarmuka Retur P13
Funbox Production P13
Home Profile
Contact Logout
Photos Help
Aksesoris Busana Penganten Pria
Busana Penganten Wanita Kategori
Menu Keranjang
Transaksi Riwayat Transaksi
No Invoice Produk
Harga Qty
Diskon Sub Total
Status Konfirmasi penerimaan barang
T Retur
Nama barang qty
Submit Alasan
No. Resi Pengiriman refund
rekening Wesel
Rekening Refund No. Rekening
Atas Nama Nama Bank
Cabang
Navigasi : 1. Klik Home untuk menuju P1
2. Klik Keranjang untuk menuju P2
3. Klik Transaksi untuk menuju P3
4. Klik Riwayat Transaksi untuk
menuju P4 5.
Klik Profile untuk menuju P5 6.
Klik Photos untuk menuju P6 7.
Klik Help untuk menuju P7 8.
Klik contact untuk menuju P8 9.
Klik Logout untuk menuju N1
Gambar 3.81 Tampilan Retur
3.1.10 Perancangan Pesan
Perancangan pesan yang terdapat pada sistem ini dapat dilihat pada gambar berikut :
E-Mail yang anda masukan tidak
terdaftar
Terima kasih telah melakukan konfirmasi
pembayaran, harap mengirimkan bukti
transfer melalui email Tanggal pembayaran
tidak bisa sebelum tanggal order
Tanggal harus diisi Pembayaran tidak
sesuai Pembayaran harus
diisi Rekening harus
diisi Yakin mau d
hapus...? Pilih Jasa Kirim
Stok tidak sesuai Jumlah yang anda
masukan tidak valid
Jumlah harus diisi. Pilih Ukuran
Pendaftaran berhasil kode konfirmasi telah
dikirim ke E-Mail anda. Silahkan periksa E-Mail
anda
Jawaban Keamanan harus
diisi Email harus diisi
Retype Password harus diisi
Password minimal 8 Digit
Password harus diisi
Kode pos harus 5 digit
Hanya bisa angka Kode pos harus
diisi Alamat harus diisi
Kota harus dipilih Nama harus diisi
Password yang anda masukan
salah
Apakah anda yakin akan
menghapus data produk
Apakah anda yakin akan
menghapus data kategori
Apakah anda yakin akan
menghapus data provinsi
Apakah anda yakin akan
menghapus data kota
Apakah anda yakin akan
menghapus data provinsi
Apakah anda yakin akan menghapus data
pelanggan Julia?
silahkan isi cabang bank
silahkan isi atas nama
silahkan isi no rekening
silahkan pilih pengiriman refund
silahkan isi no resi silahkan pilih retur
produk m11
M3 M4
M12 M28
M5
M27 M26
M25 M24
M23 M22
M21 M38
M37 M36
M35 M34
M33 M32
M31 M1
M14 M15
M10 M6
M2 M20
M30 M29
M19 M18
M17 M16
M13 M9
M8 M7
Update pemesanan
berhasi M39
Update status pembayaran
berhasil M40
Pengiriman barang berhasil
M41
Gambar 3.82Perancangan pesan
3.1.11 Jaringan Semantik
1. Jaringan Semantik Admin
A1
A13
A12 A14
A15 A11
A10 A9
A8 A7
A6 A5
A4
A3
A2 A17
A16 A18
A20 A19
A22 A21
M 2
m 34
m 35
m37
m 38
m3 9
m 4
m 41
Gambar 3.83 Jaringan Semantik Admin
2. Jaringan Semantik Pengunjung
A1
N2 N6
N5 N4
N3
M1 M2
M3 M4
M5 M6
M7 M8
M9 M10
M11 M12
M13 M14
M15
Gambar 3.84 Jaringan Semantik Pengunjung
3. Jaringan Semantik Pelanggan
P1
P2 P6
P5 P4
P3
P9 P8
P12 P11
M 21
M 22
M 23
M 24
M 25
M 26
M 27
M 28
M 29
M 30
M 31
M 32
M15 M16
M17 M18
M1 9
m2
Gambar 3.85 Jaringan Semantik Pelanggan
3.1.12 Perancanagan Prosedural
Sebagai langkah terakhir dalam perancangan yaitu perancangan prosedural yang akan di implementasikan ke dalam sistem. Prosedur ini akan digunakan
sebagai algoritma dasar dalam mengkodekan prosedur yang ada. Adapun perancangan prosedural untuk pembangunan sistem e-commerce pada Funbox
Production yang akan dibangun adalah sebagai berikut :
1. Prosedur Login
Mulai
Pengecekan E-Mail E-Mail
terdaftar? Pesan E-Mail
tidak terdaftar tidak
Pengecekan Password
Password sesuai?
Data pelanggan
Pesan Password tidak sesuai
tidak Lupa
password? tidak
Lupa password ya
Data password
ya
ya Selesai
Data E-Mail dan
Password
Login valid Data
password
Gambar 3.86 Prosedur Login 2.
Prosedur Lupa Password
Mulai
Data E-Mail Pengecekan E-Mail
E-Mail terdaftar?
Pesan E-Mail tidak terdaftar
tidak Data jawaban
pertanyaan keamanan
Cek apakah jawaban
keamanan benar ?
ya
Pengecekan jawaban keamanan
Jawaban salah tidak
Selesai ya
Data password
baru Data pelanggan
Gambar 3.87 Prosedur Lupa Password
3. Prosedur Pendaftaran
Mulai
Pengecekan validasi data
Cek validasi Pesan validasi
tidak Kirim verifikasi
pendaftaran via email Data
pengunjung ya
Selesai Data
Pendaftaran
Pendaftaran berhasil
Verifikasi pendaftaran
Gambar 3.88 Prosedur pendaftaran 4.
Prosedur Pemesanan
Chekout berhasil dan kirim informasi ke mail
server Mulai
Cek stok cukup ?
ya Ganti pengiriman
tidak
Apakah anda yakin mengganti alamat
pengiriman ? ya
Pilij jasa pengiriman checkout
Selesai Data pemesanan
ya Isi jumlah item
Data item produk Data produk
Data pengiriman
Anda yakin mau checkout
? tidak
tidak Catat jumlah
item
Catat alamat pengirman
Gambar 3.88 Prosedur Pemesanan
5. Prosedur Pembayaran
Mulai
Selesai Cek
pembayaran transfer atau
online Pembayaran via
PayPal online
transfer Data
pembayaran
Pembayaran sesuai ?
tidak Pesan data
tidak valid
ya Pembayaran
berhasil Data pemesanan
yang akan dibayar
Konfirmasi pembayaran
Data pembayaran
Pilih metode pembayara
Kirim Data pembayaran
ke paypal
ya Data
pemesanan
Pembayaran berhasil
Pembayaran sesuai ?
tidak
Gambar 3.89 Prosedur Pembayaran 6.
Prosedur Ubah Status Pemesanan
Mulai
Update status pemesanan
Cek Stok produk apakah mencukupi?
Status Pemesanan disetujui dan kirim
informasi ke mail server
ya tidak
Selesai Data
pemesanan
Status Pemesanan
dibatalkan Data pemesanan
Data detail produk
Gambar 3.90 Prosedur Ubah Status Pemesanan
7. Prosedur Ubah Status Pembayaran
Ubah status pembayaran
Pembayaran lunas?
Status Pembayaran lunas dan kirim
informasi ke mail server ya
tidak
Selesai Mulai
Cek tipe bayar bank
Tidak usah update status
paypal Data pemesanan
yang akan di ubah status
pembayarannya
Status Pembayaran
ditunda Data
pembayaran Data
pemesanan
Gambar 3.91Prosedur Ubah Status Pembayaran 8.
Prosedur Ubah Status Pengiriman
mulai
Ubah status pengiriman
Ubah status Status
barang telah dikirim
dan kirim info ke mail
server selesai
ya tidak
Data pemesanan
yang akan dikirim
Status barang sudah pernah
dikirim Data
pengiriman Data
pemesanan
Gambar 3.92 Prosedur Update Status Pengiriman
