Tabel 3.24 Tabel retur detail Nama field
Tipe data ukuran keterangan
Id_retur_detail int11
Primary key, auto_increment Username
Varvhar50 Username pemesan
Id_retur int11
Foreign key tabel retur Id_detail_barang
int11 Detail barang pemesanan
Jumlah int11
Jumlah barang yang diretur Kondisi
Varvhar50 Kondisi barang
alasan Varchar200
Alasan diretur
Tabel 3.25 Tabel retur temp Nama field
Tipe data ukuran keterangan
Id_retur_temp int11
Primary key, auto_increment No_pemesanan
int 11 Foreignkey tabel pemesanan
username Varvhar50
Ukuran barang Id_detail_barang
Int11 Foreign key tabel detail barang
jumlah Int11
Jumlah barang yang diretur Kondisi
Varvhar30 Kondisi barang
Alasan Varchar100
Alasan diretur
3.5 Perancangan Struktur Menu
Struktur menu dirancang sesuai dengan level pengguna sistem. Terdapat tiga pengguna aplikasi ini yaitu pengurus, pemesan dan pengunjung. Adapun
struktur menunya adalah sebagai berikut: 1. Struktur Menu Pengunjung
Gambar 3.26 berikut adalah struktur menu untuk pengunjung :
Menu
Beranda Kategori
Testimoni Berita
Login regristasi
Cari produk
Gambar 3.26
Struktur Menu Pengunjung
2. Struktur Menu Pemesan Gambar 3.27 berikut adalah struktur menu pemesan :
Menu
Beranda Kategori
Testimoni Berita
Keranjang belanja Konfirmasi
pembayaran Histori transaksi
Login
Cari produk Logout
Gambar 3.27 Struktur Menu Pemesan
3. Struktur Menu Admin Gambar 3.28 berikut adalah struktur menu admin :
Login Menu
Kelola pemesan Kelola pelanggan
Kelola retur
Kelola barang Kelola kategori
Kelola gambar Kelola merk
Kelola ukuran Kelola warna
Tambah Edit
Hapus Kelola kota
Kelola ongkir
Detail barang Kelola berita
Kelola testimoni Ubah status
Cetak laporan
Gambar 3.28 Struktur Menu Admin
3.6 Perancangan Antarmuka
Interface atau antar muka merupakan tampilan dari suau program aplikasi
yang berperan sebagai media komunikasi yang digunakan sebagai sarana berdialog antara program dengan user. Sistem yang akan dibangun diharapkan
menyediakan interface yang mudah dipahami dan digunakan oleh user. Perancangan antarmuka sistem yang akan dibangun dibedakan sesuai dengan jenis
penggunanya, yaitu admin, pemesan dan pengunjung. Perancangan antarmuka dan navigasinya dapat dilihat melalui gambar berikut :
F01
Keterangan : - Klik katalog menuju F01
- Klik testimonial menuju F02
- Klik berita menuju F03 - Klik login menuju ke F04
Katalog Berita
Testimonial Login
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Gambar
Detail Nama barang
Harga Merk
Logo
Footer regeristrasi
Gambar Detail
Nama barang Harga
Merk Gambar
Detail Nama barang
Harga Merk
Gambar Detail
Nama barang Harga
Merk Gambar
Detail Nama barang
Harga Merk
Gambar Detail
Nama barang Harga
Merk
Barang Terbaru
Gambar 3.29 Perancangan Antarmuka Beranda
F02
Keterangan : - Klik katalog menuju F01
- Klik testimonial menuju F02
- Klik berita menuju F03 - Klik login menuju ke F04
Katalog Berita
Testimonial Login
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer
Testimonial
Kirim Nama
Email Wabsite
Testimoni regeristrasi
Gambar 3.30 Perancangan Antarmuka Testimoni
F03
Keterangan : - Klik katalog menuju F01
- Klik testimonial menuju F02
- Klik berita menuju F03 - Klik login menuju ke F04
Katalog Berita
Testimonial Login
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer
Berita
regeristrasi
Gambar 3.31 Perancangan Antarmuka Berita
F04
Keterangan : - Klik katalog menuju F01
- Klik testimonial menuju F02
- Klik berita menuju F03 - Klik login menuju ke F04
- Klik register menuju F5 - Klik
lupa password
menuju ke F6
Katalog Berita
Testimonial Login
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer
Login
Password Username
Regristasi || Lupa Password regeristrasi
Gambar 3.32 Perancangan Antarmuka Login Pengunjung
F05
Keterangan : - Klik katalog menuju F01
- Klik testimonial menuju F02
- Klik berita menuju F03 - Klik login menuju ke F04
Katalog Berita
Testimonial Login
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer
Regristasi
Email Username
Password Ulang password
Nama lengkap Jenis kelamin
Alamat Kota kota kabupaten
kodepos daftar
regeristrasi
No telepon
Gambar 3.33 Perancangan Antarmuka Regristasi F06
Keterangan : - Klik katalog menuju F01
- Klik testimonial menuju F02
- Klik berita menuju F03 - Klik login menuju ke F04
Katalog Berita
Testimonial Login
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer
Lupa Password
username Password harap diingat dan dirahasiakan agar tidak
disalahgunakan Reset password
regeristrasi
Gambar 3.34 Perancangan Antarmuka Lupa Password
A01 Keterangan :
- Klik login menuju ke F8
Login
Login Admin
Password Username
Gambar 35Gambar 3.35 Perancangan Antarmuka Login Admin
F08
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke F16
- Klik kelola merk menuju ke F17 - Klik kelola pelanggan menuju ke
F35 - Klik kelola berita menuju ke F36
- Klik kelola testimonial menuju ke F40
- Klik kelola ongkir menuju ke F41 - Klik kelola warna menuju ke F43
- Klik kelola kota menuju ke F45 - Klik kelola ukuran menuju ke F48
- Klik kelola gambar menuju ke F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir
Kelola warna Kelola retur
Kelola ukuran
Pemesan Pelanggan
Dipesan Dibayar
Lunas Dikirim
diterima No order
aksi Nama Konsumen
Tanggal order Status
detail kadaluarsa
Cetak laporan Kelola kota
Kelola gambar
Logout
Gambar 3.36 Perancangan Antarmuka Kelola Pemesan
F09
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke F16
- Klik kelola merk menuju ke F17 - Klik kelola pelanggan menuju ke
F35 - Klik kelola berita menuju ke F36
- Klik kelola testimonial menuju ke F40
- Klik kelola ongkir menuju ke F41 - Klik kelola warna menuju ke F43
- Klik kelola kota menuju ke F45 - Klik kelola ukuran menuju ke F48
- Klik kelola gambar menuju ke F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita
Kelola testimonial Kelola ongkir Kelola warna
Kelola retur Kelola
ukuran
Pemesan Pelanggan
Dipesan Dibayar
Lunas Dikirim
diterima No order
aksi Nama Konsumen
Tanggal order Status
Detail Order
No order : Tanggal order :
Ongkor per kg : Status Order
Ubah status
Nama Pembeli Alamat Pengiriman
Kota Kodepos
Email
Data customer
Nama barang jumlah
Berat Kg Harga
Sub total Kelola kota
Kelola gambar
Logout kadaluarsa
Cetak laporan
Gambar 3.37 Perancangan Antarmuka detail pemesan F10
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke
F16 - Klik kelola merk menuju ke F17
- Klik kelola pelanggan menuju ke F35
- Klik kelola berita menuju ke F36 - Klik kelola testimonial menuju
ke F40 - Klik kelola ongkir menuju ke F41
- Klik kelola warna menuju ke F43 - Klik kelola kota menuju ke F45
- Klik kelola ukuran menuju ke
F48 - Klik kelola gambar menuju ke
F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir
Kelola warna Kelola retur
Kelola gambar
Pemesan Pelanggan
Dipesan Dibayar
Lunas Dikirim
diterima
Cetak Laporan
Cetak laporan pesanan Tanggal awal
Tanggal akhir Cetak laporan
Kelola kota Kelola ukuran
Logout kadaluarsa Cetak laporan
Status pesanan :
Cetak pembyaran pemesanan Tanggal awal
Tanggal akhir Cetak laporan
Pembayaran melalui
Gambar 3.38 Perancangan Antarmuka cetak laporan
F11
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke
F16 - Klik kelola merk menuju ke F17
- Klik kelola pelanggan menuju ke F35
- Klik kelola berita menuju ke F36 - Klik kelola testimonial menuju
ke F40 - Klik kelola ongkir menuju ke F41
- Klik kelola warna menuju ke F43 - Klik kelola kota menuju ke F45
- Klik kelola ukuran menuju ke
F48 - Klik kelola gambar menuju ke
F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang Kelola kategori
Kelola merk Kelola pelanggan
Kelola berita Kelola testimonial Kelola ongkir Kelola warna
Kelola retur Kelola
gambar
Kelola Produk
No Nama produk
merk kategori
Tgl masuk Tambah produk
Edit | hapus Detail produk
Aksi Kelola kota
Kelola ukuran Logout
Cetaik lapran barang
Detail produk
Gambar 3.39 Perancangan Antarmuka kelola produk
F12
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke
F16 - Klik kelola merk menuju ke F17
- Klik kelola pelanggan menuju ke F35
- Klik kelola berita menuju ke F36 - Klik kelola testimonial menuju
ke F40 - Klik kelola ongkir menuju ke F41
- Klik kelola warna menuju ke F43 - Klik kelola kota menuju ke F45
- Klik kelola ukuran menuju ke
F48 - Klik kelola gambar menuju ke
F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir
Kelola warna Kelola retur
Kelola gambar
Tambah Produk
Nama Produk :
Kategori :
Merk :
diskon Deskripsi
simpan batal
Kelola kota Kelola ukuran
Logout
Gambar 3.40 Perancangan Antarmuka tambah produk
F13
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke
F16 - Klik kelola merk menuju ke F17
- Klik kelola pelanggan menuju ke F35
- Klik kelola berita menuju ke F36 - Klik kelola testimonial menuju
ke F40 - Klik kelola ongkir menuju ke F41
- Klik kelola warna menuju ke F43 - Klik kelola kota menuju ke F45
- Klik kelola ukuran menuju ke
F48 - Klik kelola gambar menuju ke
F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir
Kelola warna Kelola retur
Kelola gambar
Nama produk
No Harga jual
Harga beli berat
warna Tambah detai
Edit | hapus stok
Aksi Kelola kota
Kelola ukuran Logout
Cetaik lapran barang
Detail produk ukuran
Gambar 3.41 Perancangan Antarmuka detail produk
F14
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke
F16 - Klik kelola merk menuju ke F17
- Klik kelola pelanggan menuju ke F35
- Klik kelola berita menuju ke F36 - Klik kelola testimonial menuju
ke F40 - Klik kelola ongkir menuju ke F41
- Klik kelola warna menuju ke F43 - Klik kelola kota menuju ke F45
- Klik kelola ukuran menuju ke
F48 - Klik kelola gambar menuju ke
F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir
Kelola warna Kelola retur
Kelola gambar
Nama barang
Harga jual : Harga beli :
berat :
warna Ukuran
Stok simpan
batal Kelola kota
Kelola ukuran Logout
Gambar 3.42 Perancangan Antarmuka tambah detail produk
F15
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke F16
- Klik kelola merk menuju ke F17 - Klik kelola pelanggan menuju ke
F35 - Klik kelola berita menuju ke F36
- Klik kelola testimonial menuju ke F40
- Klik kelola ongkir menuju ke F41 - Klik kelola warna menuju ke F43
- Klik kelola kota menuju ke F45 - Klik kelola ukuran menuju ke F48
- Klik kelola gambar menuju ke F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang
Kelola kategori Kelola merk
Kelola pelanggan Kelola berita Kelola testimonial Kelola ongkir
Kelola warna Kelola retur
Kelola gambar
Kelola kota Kelola ukuran
Logout
Gambar produk
No Nama produk
Gambar produk aksi
Tambah gambar
Gambar 43Gambar 3.43 Perancangan Antarmuka kelola gambar
F16
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke F16
- Klik kelola merk menuju ke F17 - Klik kelola pelanggan menuju ke
F35 - Klik kelola berita menuju ke F36
- Klik kelola testimonial menuju ke F40
- Klik kelola ongkir menuju ke F41 - Klik kelola warna menuju ke F43
- Klik kelola kota menuju ke F45 - Klik kelola ukuran menuju ke F48
- Klik kelola gambar menuju ke F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang Kelola kategori
Kelola merk Kelola pelanggan
Kelola berita Kelola testimonial Kelola ongkir Kelola warna
Kelola retur Kelola
gambar
Kelola kategori
No Nama
kategori Aksi
Tambah kategori Edit | hapus
Kelolan kota Kelola ukuran
Logout
Gambar 3.44 Perancangan Antarmuka Kelola kategori
F17
Keterangan : - Klik pemesanan menuju ke F08
- Klik kelola barang menuju F11 - Klik kelola kategori menuju ke F16
- Klik kelola merk menuju ke F17 - Klik kelola pelanggan menuju ke
F35 - Klik kelola berita menuju ke F36
- Klik kelola testimonial menuju ke F40
- Klik kelola ongkir menuju ke F41 - Klik kelola warna menuju ke F43
- Klik kelola kota menuju ke F45 - Klik kelola ukuran menuju ke F48
- Klik kelola gambar menuju ke F50 - Klik kelola retur menuju ke F52
- Klik logout menuju ke A01
pemesanan Kelola barang Kelola kategori
Kelola merk Kelola pelanggan
Kelola berita Kelola testimonial Kelola ongkir Kelola warna
Kelola retur Kelola
gambar
Kelola Merk
No Nama merk
Aksi Tambah merk
Edit | hapus Kelola kota
Kelola ukuran Logout
Gambar 3.45 Perancangan Antarmuka kelola merk
F25 Keterangan :
- Klik beranda menuju ke F25
- Klik testimonial menuju F35
- Klik berita menuju ke F36 - Klik
konfirmasi pembayaran menuju ke
F30 - Klik histori transaksi
menuju ke F32 - Klik logout menuju ke F01
- Klik detail menuju ke F26
beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Gambar
Detail Nama barang
Harga Merk
Logo
Footer Histori Transaksi
Logout
Gambar Detail
Nama barang Harga
Merk Gambar
Detail Nama barang
Harga Merk
Gambar Detail
Nama barang Harga
Merk Gambar
Detail Nama barang
Harga Merk
Gambar Detail
Nama barang Harga
Merk
Produk terbaru
Gambar 3.46 Perancangan Antarmuka home pemesan
F26
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi
pembayaran menuju ke F30
- Klik histori transaksi menuju ke F32
- Klik logout menuju ke F01 - Klik beli menuju ke F27
beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Gambar
Nama barang Harga
Merk Logo
Footer Histori Transaksi
Logout
Tersedia dalam : Ukuran
Harga Berat stok
warna Beli
Ukuran Harga
Berat stok warna
Beli Gambar
Gambar
Gambar 3.47 Perancangan Antarmuka detail barang F27
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju ke
F32 - Klik logout menuju ke F01
- Klik selesai belanja ke F28
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout No
Keranjang belanja
Nama produk
Berat jumlah
harga subtotal hapus
Belanja lagi Update cart
Belanja lagi
Gambar 3.48 Perancangan Antarmuka keranjang belanja
F28
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju ke
F32 - Klik logout menuju ke F01
- Klik selesai ke F29
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout Data Pengiriman
Nama Alamat
Propinsi Kabkota
Kode pos No telp
Pilih jenis pengiriman Ganti alamat
lanjut JNE reguler
JNE YES COD
Gambar 3.49 Perancangan Antarmuka alamat pengiriman F29
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju
ke F32 - Klik logout menuju ke F01
- Klik kembali ke F29
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout Review pesanan
Nama pelanggan Alamat pengiriman
Kota Kodepos
No telp Ongkos kirim perKG
No nama berang jumlah total berat harga total harga kembali
selesai
Gambar 3.50 Perancangan Antarmuka review pesanan
F30
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju
ke F32 - Klik logout menuju ke F01
-
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Produk terlaris Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout
Pembayaran
No order | nama pemesanan | Total | Via Bank | Via Paypal konfirmasi
Paypal
Gambar 3.51 Perancangan Antarmuka konfirmasi pembayaran F31
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju ke
F32 - Klik logout menuju ke F01
-
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout
Pembayaran
No order | nama pemesanan | Total | Via Bank | Via Paypal konfirmasi
Paypal No Order :
Email :
Tanggal :
Bank pengirim : Jumlah
: Tujuan Bank
: No Transaksi
Kirim
Gambar 3.52 Perancangan Antarmuka konfirmasi pembayaran via bank
F32
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju
ke F32 - Klik logout menuju ke F01
-
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout
Histori Transaksi
No Order | Atas Nama | Tanggal Order | Status Barang | Total | aksi Pembelian
Gambar 3.53 Perancangan Antarmuka histori transaksi F33
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju
ke F32 - Klik logout menuju ke F01
- Klik kembali F32
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Paling dicari Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout Data kostumer
Nama pelanggan Alamat pengiriman
Kota Kodepos
No telp Ongkos kirim perKG
Nama produk berat jumlah harga satuan sub total aksi
kembali Data pemesanan
No order :
Gambar 3.54 Perancangan Antarmuka detail histori
F34
Keterangan : - Klik beranda menuju ke F25
- Klik testimonial menuju F35 - Klik berita menuju ke F36
- Klik konfirmasi pembayaran
menuju ke F30 - Klik histori transaksi menuju ke
F32 - Klik logout menuju ke F01
-
Beranda Berita
Testimonial Konfirmasi Pembayaran
Keranjang Cari
Facebook Kategori
Produk terlaris Costumer Service
Pembayaran Kontak info
Cari Logo
Footer Histori Transaksi
Logout
Retur Barang
No order : Nama produk
: Jumlah Barang
: kondisi
: alasan
Kirim
Gambar 3.55 Perancangan Antarmuka retur barang
3.7 Perancangan Pesan
