BAB III ANALISIS DAN PERANCANGAN SISTEM
3.4 Perancangan Arsitektur
3.4.1 Perancangan Antar Muka
Interfaceatau 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
Perancanganinterface untuk aplikasi E-Commerce pada toko ifio adalah sebagai berikut :
70
1. Antar muka pengunjung a. Form home pengunjung P01
b. Formkategori P02
72
c. Formcara pesan P03
d. Formprofil toko P04
74
e. Formkontak P05
f. Formbuku tamu P06
76
g. formregistrasi P07
i. Forminformasi P08
78
j. FormData produk P09
k. Formdetail barang P10
80
2. Antar muka konsumen a. Formhome
K01
b. Formproduk
K02
82
c. Formpesan masuk K03
d. Formtulis pesan K04
84
e. Formpesanan saya
K05
f. Form kantong belanja K06
86
g. Formberita
K07
h. Form Ubah data member
K08
88
i. Formproduk per kategori K09
j. Detailproduk K10
90
k. Formpemesanan K11
l. Formkonfirmasi K12
92
m. FormDetail Pesan K13
n. Formtransfer K14
94
o. Cara pesan K15
3. Antar muka administrator
a. Form loginadministrator
A0
username
login password
Administrator
96
b. Form home
A01
c. Form kategori barang
A2
LOGO
Hari, Tanggal /bulan/tahun
FOOTER Menu Admin Logout Kategori barang Stock barang Pesanan Pesan dari pelanggan
Tuli pesan Buku tamu pengunjung
Tambah berita depan Tambah berita member
Klik logout menuju ke A0 Klik kategori barang
menuju ke A02 Klik stock barang
menuju ke A03 Klik pesanan menuju
ke A04 Klik pesan dari pelanggan menuju
ke A05 Klik tulis pesan menuju ke A06 Klik buku tamu pengunjung menuju
ke A07 Klik tambah berita
depan menuju ke A08 Klik tambah berita member menuju ke
A09 Klik data kategori
menuju ke A10
Keterangan
ukuran layar : dinamis (default 1080 x 800) Type ukuran font : hevetica 11Px Warna latar : #FFFFFF, # 99CC66
gambar
simpan Pilih kategori
Nama kategori gambar
Data kategori edit hapus
Tambah kategori nama
gambar browse reset
98
d. Form stock barang
A3
LOGO
Hari, Tanggal/bulan/ tahun
FOOTER Menu Admin Logout Kategori barang Stock barang Pesanan Pesan dari pelanggan
Tuli pesan Buku tamu pengunjung
Tambah berita depan Tambah berita member
Klik logout menuju ke A0 Klik kategori barang
menuju ke A02 Klik stock barang
menuju ke A03 Klik pesanan menuju
ke A04 Klik pesan dari pelanggan menuju
ke A05 Klik tulis pesan menuju ke A06 Klik buku tamu pengunjung menuju
ke A07 Klik tambah berita
depan menuju ke A08 Klik tambah berita member menuju ke
A09 Klik tambah stock
menuju ke A11
Keterangan
ukuran layar : dinamis (default 1080 x 800) Type ukuran font : hevetica 11Px Warna latar : #FFFFFF, # 99CC66
Pilih kategori
kategori Nama barang
Data kategori Tambah ukuran Tambah stock stock
Data barang
e. Form pesanan
A04
LOGO
Hari, Tanggal/ bulan/tahun
FOOTER Menu Admin Logout Kategori barang Stock barang Pesanan Pesan dari pelanggan
Tuli pesan Buku tamu pengunjung
Tambah berita depan Tambah berita member
Klik logout menuju ke A0 Klik kategori barang
menuju ke A02 Klik stock barang
menuju ke A03 Klik pesanan menuju
ke A04 Klik pesan dari pelanggan menuju
ke A05
Klik tulis pesan menuju ke A06
Klik buku tamu pengunjung menuju
ke A07
Klik tambah berita depan menuju ke
A08
Klik tambah berita member menuju ke
A09
Klik $produk menuju ke A12
Klik $ pelanggan menuju ke A13
Klik kirim 1 menuju ke A16
Klik kirim menuju ke A17
Keterangan
ukuran layar : dinamis (default 1080 x 800 ) Type ukuran font : hevetica 11 Px Warna latar : #FFFFFF, # 99CC 66
PESANAN YANG BELUM DI BAYAR
TUNGGU PENGIRIMAN
DATA
SUDAH DIKIRIM DATA
DATA
100
f. Form pesan dari pelanggan
A05
LOGO
Hari, Tanggal/ bulan/ tahun
FOOTER Menu Admin Logout Kategori barang Stock barang Pesanan Pesan dari pelanggan
Tuli pesan Buku tamu pengunjung
Tambah berita depan Tambah berita member
Klik logout menuju ke A0 Klik kategori barang
menuju ke A02 Klik stock barang
menuju ke A03 Klik pesanan menuju
ke A04 Klik pesan dari pelanggan menuju
ke A05 Klik tulis pesan menuju ke A06 Klik buku tamu pengunjung menuju
ke A07 Klik tambah berita depan menuju ke
A08 Klik tambah berita member menuju ke
A09
Keterangan
ukuran layar : dinamis (default 1080 x 800 ) Type ukuran font : hevetica 11 Px Warna latar : #FFFFFF, # 99CC66 pesan Isi pesan pengirim tanggal hapus $pengirim $tanggal
g. Form tulis pesan
A06
102
h. Formbuku tamu pengunjung
A07
i. Formtambah berita depan
A08
104
j. Formtambah berita member
A09
k. FormTambah produk berdasarkan kategori
A10
106
l. Formdetail pemesanan
A12
m. Formdata pengiriman A13 LOGO Hari, Tanggal/bulan/tahun FOOTER Menu Admin Logout Kategori barang Stock barang Pesanan Pesan dari pelanggan
Tuli pesan Buku tamu pengunjung
Tambah berita depan Tambah berita member
Klik logout menuju ke A0 Klik kategori barang
menuju ke A02 Klik stock barang
menuju ke A03 Klik pesanan menuju
ke A04 Klik pesan dari pelanggan menuju
ke A05 Klik tulis pesan menuju ke A06 Klik buku tamu pengunjung menuju
ke A07 Klik tambah berita
depan menuju ke A08 Klik tambah berita member menuju ke
A09 Keterangan
ukuran layar : dinamis (default 1080 x 800 ) Type ukuran font : hevetica 11Px Warna latar : #FFFFFF , #99CC 66 Nama Emeil Alamat Kota Provinsi Telpon Kode pos Fax Pekerjaan username Data Pelanggan data data data data data data data data data
Nama jasa pengiriman No pengiriman
konfirmasi
108
n. Formberita lengkap umum
A14
o. Daftar berita lengkap member
A15
110
p. Formtambah ukuran
A16
q. Formtambah stock
A17
112
r. Forminput stock A18