BAB III ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Sistem
3.2.3 Perancangan Arsitektur
3.2.3.1 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 menyediakaninterfaceyang mudah dipahami dan digunakan olehuser.
Perancangan interface untuk aplikasi E-Commerce JAVA Komunika adalah sebagai berikut :
1. Antar muka pengunjung a. Form home pengunjung
Banner
Home Produk Cara Pemesanan Profil Kontak
Gambar
Produk Terbaru
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A01 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Detail Barang menuju ke form A07 Klik link Teks Kategori menuju ke form A02 Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
85
b. Form ViewBarang
Banner
Home Produk Cara Pemesanan Profil Kontak
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A02 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Produk
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Detail Barang menuju ke form A07 Klik link Teks Kategori menuju ke form A02 Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
c. FormCara Pemesanan
Banner
Home Produk Cara Pemesanan Profil Kontak
Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A03 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Cara Pemesanan
Teks
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Teks Kategori menuju ke form A02 Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
87
d. Form Profil
Banner
Home Produk Cara Pemesanan Profil Kontak
Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A04 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Profil
Teks
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Teks Kategori menuju ke form A02 Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
e. Form Kontak
Banner
Home Produk Cara Pemesanan Profil Kontak
Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A05 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Kontak Teks Email Anda : Judul Pesan : Pesan Verifikasi
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Teks Kategori menuju ke form A02 Klik Tombol Kirim menuju ke form A05 Klik Tombol Batal menuju ke form A05 Kirim Pesan Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
89
f. Form Register Member
g. Form DetailBarang
Banner
Home Produk Cara Pemesanan Profil Kontak
Gambar Teks Detail barang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A07 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Detail Barang
Image Cart
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Teks Kategori menuju ke form A02
Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
91
h. FormLupaPassword
Banner
Home Produk Cara Pemesanan Profil Kontak
Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A06b Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Kontak
Email Anda :
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Teks Kategori menuju ke form A02 Klik Tombol Kirim menuju ke form A05 Klik Tombol Batal menuju ke form A05 Kirim Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
2. Antar muka Konsumen a. Form Register Member
Banner
Home Produk Cara Pemesanan Profil Kontak
Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A06 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Register Member Username Password Konfirmasi Password Email Nama Alamat Kota Telepon Simpan Batal
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Lupa Password menuju ke form A06b Klik link Teks Kategori menuju ke form A02 Klik Tombol Simpan menuju ke form A06 Klik Tombol Batal menuju ke form A06 Teks
Shoping Cart
Pelayanan Online
Gambar
93
b. Form home sebelumlogin
Banner
Home Produk Cara Pemesanan Profil Kontak
Gambar
Produk Terbaru
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A01 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE
Klik link home menuju ke form A01
Klik link Produk menuju ke form A02
Klik link Cara Pemesanan menuju ke form A03 Klik link Profil menuju ke form A04
Klik link Kontak menuju ke form A05
Klik link Register Member menuju ke form A06 Klik link Detail Barang menuju ke form A07 Klik link Teks Kategori menuju ke form A02 Teks Shoping Cart Pelayanan Online Gambar Login Member Username Password Login Register Member Lupa Password
c. Form home sesudahlogin
Banner
Selamt Datang
Gambar
Produk Terbaru
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A08 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Detail Barang menuju ke form A13 Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
95
d. Form ViewBarang
Banner
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A09 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Produk
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang
Gambar Data BarangTeks Detail Barang Selamt Datang
Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Detail Barang menuju ke form A13 Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
e. Form Cara Pemesanan Banner Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A10 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Cara Pemesanan
Teks Selamt Datang
Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
97 f. Form Profil Banner Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A11 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Profil
Teks Selamt Datang
Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
g. Form Kontak Banner Teks Shoping Cart Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A12 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Kontak
Teks Selamt Datang
Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Klik tombol Kirim menuju ke form A12
Klik tombol Batal menuju ke form A12 Email Anda : Judul Pesan : Pesan Verifikasi Kirim Pesan
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
99
h. Form Shopping Card
Banner Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A14 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Shopping Card
Id Selamt Datang
Profil Member
Nama_Barang Gambar Harga Total Proses Hapus Sub Total Update
Pesan Kembali Ke Produk
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Klik Tombol Hapus menuju ke form A14
Klik Tombol Update menuju ke form A14
Klik link Kembali Ke Produk menuju ke form A09 Klik Tombol Pesan menuju ke form A15 Teks Shoping Cart Pelayanan Online Gambar Jumlah
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
i. FormAlamat
101 j. Form Konfirmasi Banner Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A16 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Konfirmasi Pembayaran
Id Selamt Datang
Profil Member
Gambar Harga Jumlah Berat
Pesan Kembali Ke Produk
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Klik Tombol Kembali ke Produk akan menuju ke form A09
Klik Tombol Pesan Akan menuju ke form 17 Subtotal : Total Ongkos : Total Bayar : Teks Shoping Cart Pelayanan Online Gambar Total Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
k. FormUcapan Terima Kasih Banner Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A17 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Teks Selamt Datang
Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Detail Barang menuju ke form A13 Klik link Shopping Card menuju ke form A14 Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
103 l. Form History Banner Selamt Datang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A18 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Detail Barang menuju ke form A13 Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Dibayar menuju ke form A18A
Klik link detail menuju ke form A19
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
Id Username Tgl. Pesan Total Bayar DibayarTotal Tgl di Bayar Tgl_Kirim Status Proses Detail Dibayar Form History Form Pembayaran A18A Id_Pesanan : Total Bayar : Kode Transaksi : Simpan Batal Tanggal bayar : Nama Bank :
m. Formdetail pengiriman Banner Selamt Datang Kategori Teks Kategori Teks Kategori Teks Kategori Go Gambar Teks A19 Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Profil Member
Klik link home menuju ke form A08
Klik link Produk menuju ke form A09
Klik link Cara Pemesanan menuju ke form A10 Klik link Profil menuju ke form A11
Klik link Kontak menuju ke form A12
Klik link Detail Barang menuju ke form A13 Klik link Shopping Card menuju ke form A14 Klik link History menuju ke form A18
Klik link Logout menuju ke form A01
Klik link Teks Kategori menuju ke form A09 Teks
Shoping Cart
Pelayanan Online
Gambar
Home Produk Cara Pemesanan Profil History Kontak Shopping Card Logout
Form Detail Pesanan Nama Pengirim : Alamat Kirim : Kota Kirim :
Id barang Produk Jumlah Harga Detail Alamat Pengiriman barang
105
3. Antar muka Administrator a. Form loginAdministrator
b. Form Home Administrator Banner B02 Home Logout Selamat Datang Profil Administrator
Klik link home menuju ke form B02
Klik link Logout menuju ke form A01
Klik link Tambah Barang menuju ke form B03 Klik link Lihat Barang menuju ke form B04 Klik link Tambah Kategori menuju ke form B05 Klik link Lihat Kategori menuju ke form B06 Klik link Tambah Kota menuju ke form B07 Klik link Lihat Kota menuju ke form B08
Klik link Semua Pesanan menuju ke form B09 Klik link Status Pesanan “Batal” menuju ke form B13 Klik link Status Pesanan “Expired” menuju form B14 Klik link Status Pesanan “Expired” menuju form B17 Klik link lihat Pembayaran menuju form B18 Pengelolaan Barang Tambah Barang Lihat Barang Pengelolaan Kategori Tambah Kategori Lihat Kategori Pengelolaan Kota Tambah Kota Lihat Kota Pengelolaan Pesanan Semua Pesanan Status Pesanan “Dipesan”
Keterangan :
Ukuran Layar : Dinamis (Default 1280x800) Type / Ukuran Font : sans-serif 10px
Warna Latar : #FFFFFF, #0C25B6, #F8C055, #58A4DE Teks
Status Pesanan “Dibayar” Status Pesanan “Dikirim” Status Pesanan “Batal” Status Pesanan “Expired”
Halaman Administrator
Lihat Pembayaran
107
c. FormTambah Barang
Banner B03 Home Logout Selamat Datang Profil Administrator
Klik link home menuju ke form B02
Klik link Logout menuju ke form A01
Klik link Tambah Barang menuju ke form B03 Klik link Lihat Barangl menuju ke form B04 Klik link Tambah Kategori menuju ke form B05 Klik link Lihat Kategori menuju ke form B06 Klik link Tambah Kota menuju ke form B07 Klik link Lihat Kota menuju ke form B08
Klik link Semua Pesanan menuju ke form B09 Klik link Status Pesanan “Dipesan” menuju ke form B10
Klik llink Status Pesanan “Dibayar”menuju ke form B11
Klik link Status Pesanan “Dikirim” menuju ke form B12
Klik link Status Pesanan “Batal” menuju ke form B13 Klik link Status Pesanan “Expired” menuju form B14 Klik Tombol Simpan menuju Ke B03