Perancangan Antarmuka - Perancangan Arsitektur Perangkat Lunak

Bab III Analisis dan Perancangan Sistem

III.2 Perancangan Sistem

III.2.2 Perancangan Arsitektur Perangkat Lunak

III.2.2.2 Perancangan Antarmuka

Perancangan antar muka merupakan perancangan yang dibuat untuk memberikan gambaran sebelum aplikasi dibangun. Perancangan antar muka

input/output, struktur dan tampilan dirancang sedemikian rupa agar mudah

dioperasikan oleh user yaitu :

1. Perancangan Tampilan Untuk Pengunjung (Sebelum Login)

Pengunjung dapat melihat menu cara belanja, cara pembayaran, hubungi kami, konfirmasi retur, tracking pesanan dan informasi produk yang di jual di toko IBC Computer.

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk PRODUK TERBARU Pilih merk CARI Produk Diskon Gambar Keterangan Gambar

Gambar 5 Gambar 6 Gambar 7 Gambar 8 Beli Beli Beli Beli Gambar 1 Gambar 2 Gambar 3 Gambar 4

Beli Beli Beli Beli

Banner Bawah

T01

- klik Depan menuju T01 - klik Cara Belanja untuk menuju T02 - klik Cara Pembayaran untuk menuju T03 - klik Hubungi Kami untuk menuju T04 - klik Konfirmasi retur untuk menuju T05 - klik tracking pesanan anda untuk menuju T06 - klik daftar untuk menuju T07 - klik Login untuk menuju T08 - klik Cari pilih merk pada pencarian produk untuk menuju T9 - klik Cari pilih harga pada pencarian produk untuk menuju T10 - klik Beli untuk menuju T11 - klik Gambar untuk menuju T12

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI Gambar 9 Gambar 10 Gambar 11 Gambar 12 Beli Beli Beli Beli

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T02

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI CARA BELANJA Langkah 1 Langkah 2 Langkah 3 Langkah 4 Langkah 5 Langkah 6

Gambar III.29 Tampilan Cara Belanja

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T03

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI CARA PEMBAYARAN Transfer Bank

Silakan transfer pembayaran ke salah satu nomor rekening dibawah ini. Pembayaran Cash On Delivery (COD)

Untuk saat ini pembayaran COD hanya untuk wilayah Bandung. Transfer Paypal

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi KamiKonfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T04

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI HUBUNGI KAMI Nama : Email : Judul : Pesan :

Gambar III.31 Tampilan Hubungi Kami

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi KamiKonfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T05

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI TRACKING PESANAN Nomer Resi : Cari

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T06

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI No. pesanan Nama Pemesan E-mail Keterangan Kerusakan

Kirim Konfirmasi Retur

Gambar III.33 Tampilan Konfirmasi Retur

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T07

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI Nama Depan Tanggal Lahir Provinsi Kota Alamat Kode Pos No. Telepon Email Password Ulangi Password DAFTAR

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

T08

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI E-mail Password Login [ Lupa Password ]

Gambar III.35 Tampilan Login 2. Perancangan Tampilan Untuk Member (Sesudah Login)

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi KamiKonfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

P01

- klik Depan menuju P01 - klik keranjang Belanja untuk menuju P02 - klik history pemesanan untuk menuju P03 - klik konfirmasi pembayaran untuk menuju P04 - klik alamat anda untuk menuju P05 - klik data diri anda untuk menuju P06 - klik ubah password untuk menuju P07

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar

Keterangan Gambar Pilih harga

CARI

INFORMASI AKUN ANDA Email : Nama : Jenis Kelamin : Tgl lahir : Telp : Alamat : MENU Keranjang belanja History pemesanan Konfirmasi pembayaran Alamat anda Data diri anda Ubah password

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal

Keranjang Belanja

Pencarian Produk KERANJANG BELANJA Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

P02

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI NO BELANJA TANGGAL BELANJA KONFIRMASI BAYAR

SUB TOTAL

TOTAL BELANJA ACTION

Gambar III.37 Tampilan Keranjang Belanja

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal

Keranjang Belanja

Pencarian Produk HISTORY PEMESANAN Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

P03

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI NO BELANJA TANGGAL BELANJA KONFIRMASI BAYAR

SUB TOTAL

TOTAL BELANJA ACTION

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal

Keranjang Belanja

Pencarian Produk KONFIRMASI PEMBAYARAN Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

P04

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI NO BELANJA TANGGAL BELANJA KONFIRMASI BAYAR

SUB TOTAL

TOTAL BELANJA ACTION

Gambar III.39 Tampilan Konfirmasi Pembayaran

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal

Keranjang Belanja

Pencarian Produk _{ALAMAT ANDA}

Nama : Alamat : UBAH Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

P06

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar

Keterangan Gambar Pilih harga

CARI

BANNER & LOGO

Depan Cara Belanja Cara Pembayaran Hubungi Kami Konfirmasi Retur Tracking Pesanan Anda

Tanggal Keranjang Belanja Pencarian Produk Pilih merk CARI Produk Diskon Gambar Keterangan Gambar Banner Bawah

P07

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Daftar Login

Produk Terlaku

Gambar

Keterangan Gambar

Produk Banyak Dilihat

Gambar Keterangan Gambar Pilih harga CARI UBAH PASSWORD Password lama : Password baru : Ulangi password baru : Update

Gambar III.41 Tampilan Ubah Password

3. Perancangan Tampilan Untuk Admin (Sebelum Login)

BANNER & LOGO

A01

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

E-mail Password

Login

[ Lupa Password ]

4. Perancangan Tampilan Untuk Admin (Sesudah Login)

BANNER & LOGO

DATA ADMIN Nama : Email : Jenis kelamin : Tgl lahir : Alamat : Telp : Data diri anda Alamat anda Ubah password MENU ADMIN * Home

* Pengolahan Data Pesanan * Pengolahan Data Kategori * Pengolahan Data Produk * Pengolahan Data Provinsi * Pengolahan Data Kota * Pengolahan Data Ongkos Kirim * Pengolahan Data Hubungi Kami * Pengolahan Data Member * Pembuatan Laporan * Logout

- klik Home menuju B01 - klik Data diri anda untuk menuju B02 - klik Alamat anda untuk menuju B03 - klik ubah password untuk menuju B04 - klik Pengolahan Data Pesanan untuk menuju B05 - klik Pengolahan Data Kategori untuk menuju B06 - klik Pengolahan Data Produk untuk menuju B07 - klik Pengolahan Data Provinsi untuk menuju B08 - klik Pengolahan Data Kota untuk menuju B09 - klik Pengolahan Data Ongkos kirim untuk menuju B010

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B01

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Gambar III.43 Tampilan Menu Admin

BANNER & LOGO

INFORMASI DATA DIRI ANDA Nama : Email : Jenis kelamin : Tgl lahir : Alamat : Telp :

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B02

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

BANNER & LOGO ALAMAT ANDA Nama : Email : Jenis kelamin : Tgl lahir : Alamat : Telp :

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B03

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Gambar III.45 Tampilan Alamat Anda

BANNER & LOGO

UBAH PASSWORD Password lama : Password baru : Ulangi password baru : Ubah

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B04

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

BANNER & LOGO

DATA PESANAN

No. Pesanan Email Pembeli Tgl Pemesanan Jam Pemesanan Status Pesanan Aksi

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B05

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Gambar III.47 Tampilan Pengolahan Data Pesanan

BANNER & LOGO

DATA KATEGORI

No. Nama Kategori Aksi

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B06

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

BANNER & LOGO

DATA PRODUK

No. Nama Produk Berat Harga Stok Diskon Tgl Masuik Aksi

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B07

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

Gambar III.49 Tampilan Pengolahan Data Produk

BANNER & LOGO

DATA PROVINSI

No. Nama Provinsi Aksi

- klik Pengolahan Data Hubungi Kami untuk menuju B11 - klik Pengolahan Data Member untuk menuju B12 - klik pembuatan laporan untuk menuju B13 - klik Logout untuk menuju B01

B08

Keterangan : Ukuran Layar : Dinamis Tipe/ukuran font ;Arial 14 Warna Latar : Putih

BANNER & LOGO

Dalam dokumen Pembangunan Aplikasi E-Commerce Pada Toko IBC Computer Bandung (Halaman 104-118)