114
Tabel 3. 20 Tabel gambar Field
Jenis Panjang Null
Pk Fk keterangan
GAMBAR_ID int
11 √
PRODUK_ID int
11 √
Ref. produkproduk _id GAMBAR
varchar 100
GAMBAR_NAMA varchar
50 DIHAPUS
Char 1
3.2 Perancangan Arsitektur
Setelah melakukan perancangan data pada sistem yang dibangun, maka dilakukanlah perancangan arsitektur. Perancangan arsitektur yang telah dibuat
meliputi beberapa perancangan diantaranya perancangan struktur menu, spesifikasi antarmuka, perancangan keluaran dan jaringan semantik.
3.2.1 Perancangan 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:
115
1. Struktur Menu pengunjung
Perancangan struktur menu pengunjung yang terdapat pada sistem ini dapat dilihat pada gambar 3.26.
home
Login kontak
Registrasi Testimonial
Produk
Profil perusahaan
Gambar 3. 26 Struktur Menu pengunjung
2. Struktur Menu Member
Perancangan struktur menu pengunjung yang terdapat pada sistem ini dapat dilihat pada gambar 3.27.
home login
testimonial Logout
Cara pemesanan
profil Perusahaan
Keranjang Belanja
Detail produk
Lihat history Ubah Profil
member Ubah
Password Retur
Lupa Password
Gambar 3. 27 Struktur Menu Member
116
3. Struktur Menu Administrator
Perancangan struktur menu pengunjung yang terdapat pada sistem ini dapat dilihat pada gambar 3.28.
Menu utama login
Logout Pengolahan data
laporan Pengolahan data
transaksi Home
Pengolahan data master
Laporan bulanan Laporan harian
Pengolahan data kategori
Pengolahan data ukuran
Pengolahan data produk
Pengolahan data detail produk
Pengolahan data provinsi
Pengolahan data kota
Pengolahan data shipping
Pengolahan data admin
Gambar 3. 28 Struktur Menu Administrator
3.2.2 Perancangan Antar Muka
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 interface untuk aplikasi E-Commerce di MOIST CLOTHING adalah sebagai berikut.
117
1. Perancangan Antar Muka Pengunjung
Antar muka ini adalah antar muka home P01 yang dijelaskan pada gambar 3.29.
P01
Usename Password
Form Login Login
Belum jadi member? daftar HOME
profile Cara Pembelian
keranjang testimonial
keranjang Customer Service
image SELAMAT DATANG
image Nama barang
image Nama barang
image Nama barang
image Nama barang
image Nama barang
image Nama barang
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03 Klik Registrasi menuju ke
P04 Klik Login menuju ke P05
Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju
P08
Gambar 3. 29 Perancangan Tampilan Home
Antar muka profil perusahaan P02 yang dijelaskan pada gambar 3.30
118
P02
HOME profile
Cara Pembelian keranjang
testimonial
SELAMAT DATANG
GAMBAR
TEKS
Usename Password
Form Login Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
Teks kategori Teks kategori
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03 Klik Registrasi menuju ke
P04 Klik Login menuju ke P05
Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju
P08
Gambar 3. 30 Perancangan Tampilan Profil Perusahaan Antar muka Menu Produk P03 yang dijelaskan pada gambar 3.31
P03
HOME profile
Cara Pembelian keranjang
testimonial
PRODUK
image Nama barang
image Nama barang
image Nama barang
image Nama barang
image Nama barang
image Nama barang
Usename Password
Form Login Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03 Klik Registrasi menuju ke
P04 Klik Login menuju ke P05
Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju
P08
Gambar 3. 31Perancangan Tampilan Menu Produk
Antar muka Registrasi P04 yang dijelaskan pada gambar 3.32
119
P04
HOME profile
Cara Pembelian keranjang
testimonial
REGISTRASI
Nama depan Nama belakang
E-mail Kota
Telepon Alamat
Provinsi Kodepos
Password Confirm Password
Daftar Usename
Password Form Login
Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
Teks kategori Teks kategori
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03 Klik Registrasi menuju ke
P04 Klik Login menuju ke P05
Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju
P08
Gambar 3. 32 Perancangan Tampilan Registrasi
Antar muka Login P05 yang dijelaskan pada gambar 3.33
P05
HOME profile
Cara Pembelian keranjang
testimonial
SELAMAT DATANG image
Nama barang image
Nama barang image
Nama barang
image Nama barang
image Nama barang
image Nama barang
Usename Password
Form Login Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03 Klik Registrasi menuju ke
P04 Klik Login menuju ke P05
Klik Lupa Password Menuju P06
Klik Kategori Menuju P07 Klik Detail produk Menuju
P08
Gambar 3. 33 Perancangan Tampilan Login
120
Antar muka Lupa Password P06 yang dijelaskan pada gambar 3.34
P06
HOME profile
Cara Pembelian keranjang
testimonial
LUPA PASSWORD
E-mail :
Kirim Usename
Password Form Login
Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01
Klik Profil menuju ke P02 Klik Produk menuju ke
P03 Klik Registrasi menuju ke
P04 Klik Login menuju ke
P05 Klik Lupa Password
Menuju P06 Klik Kategori Menuju P07
Klik Detail produk Menuju P08
Gambar 3. 34 Perancangan Tampilan Lupa Pasword Antar muka kategori produk P07 yang dijelaskan pada gambar 3.35
P07
HOME profile
Cara Pembelian keranjang
testimonial
KATEGORI image
Nama barang image
Nama barang image
Nama barang
image Nama barang
image Nama barang
image Nama barang
Usename Password
Form Login Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03
Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password
Menuju P06 Klik Kategori Menuju P07
Klik Detail produk Menuju P08
Gambar 3. 35 Perancangan Tampilan Kategori produk
121
Antar muka Detail Produk P08 yang dijelaskan pada gambar 3.36
P08
Usename Password
Form Login Login
Belum jadi member? daftar
GO
HOME profile
Cara Pembelian keranjang
testimonial
keranjang Customer Service
image DETAIL BARANG
image Nama barang
Add to chart
Lupa Password
Harga barang Stok barang
Ukuran barang Deskripsi barang
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
Navigasi :
Klik Home menuju ke P01 Klik Profil menuju ke P02
Klik Produk menuju ke P03
Klik Registrasi menuju ke P04
Klik Login menuju ke P05 Klik Lupa Password
Menuju P06 Klik Kategori Menuju P07
Klik Detail produk Menuju P08
Gambar 3. 36 Perancangan Tampilan Detail produk
122
Perancangan Antar Muka Member
Antar muka Menu Home F01 yang dijelaskan pada gambar 3.37.
F01
HOME profile
Cara Pembelian keranjang
testimonial
SELAMAT DATANG image
Nama barang image
Nama barang image
Nama barang
image Nama barang
image Nama barang
image Nama barang
Usename Password
Form Login Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Login menuju ke F01 Klik Lupa Password menuju
ke F02 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju
F09 Klik keranjang add to
chart menuju F10
Gambar 3. 37 Perancangan Tampilan Login
Antar muka Lupa Password F02 yang dijelaskan pada gambar 3.38
F02
HOME profile
Cara Pembelian keranjang
testimonial
LUPA PASSWORD
E-mail :
Kirim Usename
Password Form Login
Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Login menuju ke F01 Klik Lupa Password menuju
ke F02 Klik Home menuju ke F03
Klik Produk menuju ke F06 KlikTestimonial menuju ke
F07 Klik Kategori Menuju F08
Klik Detail produk Menuju F09
Klik keranjang add to chart menuju F10
Gambar 3. 38 Perancangan Tampilan Lupa Password
123
Antar muka menu member F03 yang dijelaskan pada gambar 3.39.
F03
HOME profile
Cara Pembelian keranjang
testimonial
SELAMAT DATANG image
Nama barang image
Nama barang image
Nama barang
image Nama barang
image Nama barang
image Nama barang
keranjang Customer Service
image ·
Teks kategori ·
Teks kategori ·
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Selamat Datang
Ubah Profil Ubah Password
History Retur
Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password
menuju ke F05 Klik Produk menuju ke
F06 KlikTestimonial menuju
ke F07 Klik Kategori Menuju F08
Klik Detail produk Menuju F09
Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 39 Perancangan antarmuka menu home
Antar muka Ubah Profil F04 yang dijelaskan pada gambar 3.40.
F04
HOME profile
Cara Pembelian keranjang
testimonial
UBAH PROFIL
Nama depan Nama belakang
E-mail Kota
Telepon Alamat
Provinsi Kodepos
Simpan keranjang
Customer Service image
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Selamat Datang
Ubah Profil Ubah Password
History Retur
Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju
F09 Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 40 Perancangan Tampilan Ubah profil
124
Antar muka Ubah Password F05 yang dijelaskan pada gambar 3.41.
F05
HOME profile
Cara Pembelian keranjang
testimonial
UBAH PROFIL Password Lama
Password Baru Confirm Password
Simpan keranjang
Customer Service image
Teks kategori Teks kategori
Teks kategori KATEGORI
image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Selamat Datang
Ubah Profil Ubah Password
History Retur
Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 41 Perancangan antarmuka menu produk
Antar muka menu Produk F06 yang dijelaskan pada gambar 3.42.
F06
HOME profile
Cara Pembelian keranjang
testimonial
PRODUK image
Nama barang image
Nama barang image
Nama barang
image Nama barang
image Nama barang
image Nama barang
keranjang Customer Service
image ·
Teks kategori ·
Teks kategori ·
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Selamat Datang
Ubah Profil Ubah Password
History Retur
Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju
F09 Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 42 Perancangan antarmuka menu Produk
125
Antar muka Testimonial F07 yang dijelaskan pada gambar 3.43.
F07
HOME profile
Cara Pembelian keranjang
testimonial
TESTIMONIAL
Keterangan
Daftar Usename
Password Form Login
Login
Belum jadi member? daftar
keranjang Customer Service
image
Lupa Password
· Teks kategori
· Teks kategori
· Teks kategori
KATEGORI image
STATISTIK Produk terbaru
GO
Testimonial
Share Join
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju
F09 Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 43 Perancangan Tampilan Testimonial
Antar muka kategori produk F08 yang dijelaskan pada gambar 3.44
F08
HOME profile
Cara Pembelian keranjang
testimonial
KATEGORI image
Nama barang image
Nama barang image
Nama barang
image Nama barang
image Nama barang
image Nama barang
keranjang Customer Service
image ·
Teks kategori ·
Teks kategori ·
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Selamat Datang Ubah Profil
Ubah Password History
Retur Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju
F09 Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 44 Perancangan Tampilan Kategori produk
126
Antar muka Detail Produk F09 yang dijelaskan pada gambar 3.45.
F09
HOME profile
Cara Pembelian keranjang
testimonial
DETAIL BARANG image
Nama barang Deskripsi barang
keranjang Customer Service
image ·
Teks kategori ·
Teks kategori ·
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Harga Stok
Ukuran Beli
Selamat Datang Ubah Profil
Ubah Password History
Retur Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 Klik Produk menuju ke F06
KlikTestimonial menuju ke F07
Klik Kategori Menuju F08 Klik Detail produk Menuju
F09 Klik keranjang menuju F10
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 45 Perancangan Tampilan Detail produk
Antar muka Keranjang F10 yang dijelaskan pada gambar 3.46.
F10
HOME profile
Cara Pembelian keranjang
testimonial
KERANJANG BELANJA
Checkout
No Nama barang
Berat Qty
Total Hapus
Total bayar
Belanja Lagi Update
keranjang Customer Service
image ·
Teks kategori ·
Teks kategori ·
Teks kategori KATEGORI
image STATISTIK
Produk terbaru GO
Testimonial
Share Join
Selamat Datang Ubah Profil
Ubah Password History
Retur Logout
Navigasi :
Klik Home menuju ke F03 Klik ubah Profil menuju ke
F04 Klik Ubah Password menuju
ke F05 KlikTestimonial menuju ke
F07 Klik Kategori Menuju F08
Klik Detail produk Menuju F09
Klik keranjang menuju F10 Klik checkout Menuju F11
Klik History Menuju F12 Klik retur Menuju F13
Gambar 3. 46 Perancangan Tampilan Keranjang
127
2. Perancangan Antar Muka Admin
Antar muka home A01 yang dijelaskan pada gambar 3.47
A01
Administrator Halaman ini hanya dipergunakan oleh
administratoruntuk mengolah situs ini ID admin
Password Login
Login
Footer
Navigasi : Klik Home menuju ke A01
Gambar 3. 47 Perancangan antarmuka home Admin
Antar muka menu data master A02 yang dijelaskan pada gambar 3.48.
A02
Administrator Halaman ini hanya dipergunakan oleh
administratoruntuk mengolah situs ini Data Kategori
Footer Data Ukuran
Data provinsi Data Kota
Data Jasa Pengiriman Data Ongkir
Data Gambar Data Produk
Data master Transaksi
Laporan Testimonial
Logout Retur
Data Member Backup Data
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke
A03 Klik Laporan menuju ke A04
Klik Kategori menuju ke A05 Klik Ukuran menuju ke A06
Klik Produk Menuju A07 Klik provinsi Menuju A08
Klik kota Menuju A09 Klik Detail produk menuju A10
Klik Shipping menuju A11
Gambar 3. 48 Perancangan antarmuka menu data master
128
Antar muka
Menu transaksi
A03 yang dijelaskan pada gambar 3.49.
A03
Administrator
Footer
No Data Transaksi
Detail Action
Data master Transaksi
Laporan Testimonial
Logout
Filter
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke
A03 Klik Laporan menuju ke A04
Gambar 3. 49 Perancangan antarmuka Menu transaksi
Antar muka
laporan
A04 yang dijelaskan pada gambar 3.50.
A04
Administrator Laporan Harian
Footer Laporan Bulanan
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Laporan harian menuju
ke A12 Klik Laporan bulanan menuju
ke A13
Gambar 3. 50 Perancangan antarmuka Menu Laporan
129
Antar muka kategori A05 yang dijelaskan pada gambar 3.50.
A05
Administrator Data Kategori
Footer Tambah
Lihat Kategori Pencarian
ID Kategori Action
Nama Kategori
Dihapus Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Kategori menuju ke A05
Klik tambah kategori menuju A14
Klik edit kategori menuju A35 Klik hapus kategori menuju
A36
Gambar 3. 51 Perancangan antarmuka Menu Kategori
Antar muka ukuran A06 yang dijelaskan pada gambar 3.52.
A06
Administrator Data Ukuran
Footer Tambah
Lihat Ukuran Pencarian
Kode ukuran Action
Nama ukuran
Dihapus Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke
A03 Klik Laporan menuju ke A04
Klik Ukuran menuju ke A06 Klik tambah ukuran menuju A16
Klik edit ukuran menuju A23 Klik hapus ukuran menuju A24
Gambar 3. 52 Perancangan antarmuka pengolahan data ukuran
130
Antar muka produk A07 yang dijelaskan pada gambar 3.53.
A07
Administrator Data Ukuran
Footer Tambah
Lihat Produk Pencarian
Produk Harga
Produk ID
Action Nama
Kategori Dihapus
Nama Produk Deskripsi
Berat Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Produk Menuju A07
Klik tambah produk menuju A15
Klik edit produk menuju A27 Klik hapus produk menuju A28
Gambar 3. 53 Perancangan antarmuka pengolahan data produk
Antar muka provinsi A08 yang dijelaskan pada gambar 3.54.
A08
Administrator Data Provinsi
Footer Tambah
Lihat Provinsi Pencarian
Kode Provinsi
Action Nama
provinsi Dihapus
Kode provinsi
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke
A03 Klik Laporan menuju ke A04
Klik provinsi Menuju A08 Klik tambah provinsi menuju A19
Klik edit provinsi menuju A25 Klik hapus provinsi menuju A26
Gambar 3. 54 Perancangan antarmuka pengolahan data provinsi
131
Antar muka kota A09 yang dijelaskan pada gambar 3.55.
A09
Administrator Data Kota
Footer Tambah
Lihat Kota Pencarian
Action Nama kota
Dihapus Kode Kota
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke
A03 Klik Laporan menuju ke A04
Klik kota Menuju A09 Klik tambah kota menuju A20
Klik edit kota menuju A29 Klik hapus kota menuju A30
Gambar 3. 55 Perancangan antarmuka pengolahan data Kota
Antar muka detail produk A10 yang dijelaskan pada gambar 3.56.
A10
Administrator Data Detail Produk
Footer Tambah
Lihat Detail produk Pencarian
Ukuran Tgl
Action Produk
detail_ID Dihapus
Produk ID
Diskon Stok
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Detail produk menuju A10
Klik tambah detail produk menuju A18
Klik edit detail produk menuju A31
Klik hapus detail produk menuju A32
Gambar 3. 56 Perancangan antarmuka pengolahan data Detail produk
132
Antar muka Shipping A11 yang dijelaskan pada gambar 3.57.
A11
Administrator Data shipping
Footer Tambah
Lihat shipping Pencarian
Ongkir ID NO.
Action Jasa ID
Dihapus Kota ID
Ongkos kirim
Stok Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Shipping menuju A11
Klik tambah shipping menuju A22
Klik edit shipping menuju A33 Klik hapus shipping menuju
A34
Gambar 3. 57 Perancangan antarmuka pengolahan data Shipping
Antar muka pengolahan laporan harian A12 yang dijelaskan pada gambar 3.58.
A12
Administrator Laporan harian
Footer Tgl
Proses
Laporan bulanan Bln
Thn
Batal Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Laporan harian menuju ke
A12 Klik Laporan bulanan menuju ke
A13
Gambar 3. 58 Perancangan antarmuka pengolahan laporan harian
133
Antar muka pengolahan laporan bulanan A13 yang dijelaskan pada gambar 3.59.
A12
Administrator
Footer Laporan harian
Bln
Proses
Laporan bulanan Thn
Batal Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Laporan harian menuju ke A12
Klik Laporan bulanan menuju ke A13
Gambar 3. 59 Perancangan antarmuka pengolahan laporan bulanan
Antar muka Tambah kategori A14 yang dijelaskan pada gambar 3.60.
A14
Administrator Data kategori
Footer Tambah
Lihat kategori Pencarian
batal simpan
Nama kategori
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Kategori menuju ke A05
Klik tambah kategori menuju A14
Gambar 3. 60 Perancangan antarmuka tambah kategori
134
Antar muka Tambah produk A15 yang dijelaskan pada gambar 3.61
A15
Administrator Data produk
Footer Tambah
Edit Produk Pencarian
batal simpan
Nama kategori Nama produk
Harga Berat
Deskripsi
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke
A03 Klik Laporan menuju ke A04
Klik Produk Menuju A07 Klik tambah produk menuju A15
Gambar 3. 61 Perancangan antarmuka tambah produk
Antar muka Tambah ukuran A16 yang dijelaskan pada gambar 3.62.
A16
Administrator Data ukuran
Footer Tambah
Lihat ukuran Pencarian
batal simpan
Nama ukuran Kode ukuran
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Ukuran menuju ke A06
Klik tambah ukuran menuju A16
Gambar 3. 62 Perancangan antarmuka tambah ukuran
135
Antar muka Tambah gambar A17 yang dijelaskan pada gambar 3.63.
A17
Administrator Data gambar
Footer Tambah
Lihat gambar Pencarian
batal simpan
Nama gambar Nama produk
File gambar
Browse Data master
Transaksi Laporan
Testimonial Logout
Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik tambah gambar menuju
A17
Gambar 3. 63 Perancangan antarmuka tambah gambar
Antar muka Tambah Detail produk A18 yang dijelaskan pada gambar 3.64.
A18
Administrator Data detail produk
Footer Tambah
Lihat detail produk Pencarian
batal simpan
Ukuran Nama produk
Diskon Stok
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Detail produk menuju
A10 Klik tambah detail produk
menuju A18
Gambar 3. 64 Perancangan antarmuka tambah detail produk
136
Antar muka Tambah provinsi A19 yang dijelaskan pada gambar 3.65.
A19
Administrator Data provinsi
Footer Tambah
Lihat provinsi Pencarian
batal simpan
Nama provinsi
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik provinsi Menuju A08
Klik tambah provinsi menuju A19
Gambar 3. 65 Perancangan antarmuka tambah provinsi
Antar muka Tambah Kota A20 yang dijelaskan pada gambar 3.66.
A20
Administrator Data kota
Footer Tambah
Lihat kota Pencarian
batal simpan
Nama kota Nama provinsi
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke
A01 Klik Data Master menuju
ke A02 Klik Menu transaksi
menuju ke A03 Klik Laporan menuju ke
A04 Klik kota Menuju A09
Klik tambah kota menuju A20
Gambar 3. 66 Perancangan antarmuka tambah kota
137
Antar muka Tambah jasa pengiriman A21 yang dijelaskan pada gambar 3.67.
A21
Administrator Data Jasa Pengiriman
Footer Tambah
Lihat jasa Pencarian
batal simpan
Nama jasa Kode jasa
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju ke
A01 Klik Data Master menuju
ke A02 Klik Menu transaksi
menuju ke A03 Klik Laporan menuju ke
A04 Klik tambah jasa
pengiriman menuju A21
Gambar 3. 67 Perancangan antarmuka tambah jasa pengiriman
Antar muka Tambah shipping A22 yang dijelaskan pada gambar 3.68.
A22
Administrator Data shipping
Footer Tambah
Lihat shipping Pencarian
batal simpan
Provinsi Jasa Pengiriman
Ongkir ID Ongkos kirim
Kota
Data master Transaksi
Laporan Testimonial
Logout Retur
Navigasi : Klik Home menuju
ke A01 Klik Data Master
menuju ke A02 Klik Menu transaksi
menuju ke A03 Klik Laporan menuju
ke A04 Klik Shipping
menuju A11 Klik tambah shipping
menuju A22
Gambar 3. 68 Perancangan antarmuka tambah shipping
138
3.2.3 Perancangan Pesan
