3.3.3 Perancangan Antarmuka
Antarmuka adalah bagian yang berhubungan langsung dengan pengguna sistem. Pengguna memasukan data kedalam sistem melalui antar muka, begitu
pula sebaliknya sistem menampilkan menyampaikan data kepada pengguna melalui antarmuka sehingga data yang dikirim sistem diubah menjadi informasi
yang mudah dipahami pengguna. Perancangan antarmuka untuk aplikasi e- commerce took Cyber War Computer adalah sebagai berikut:
1. Antarmuka untuk Administrator a. Halaman Login
Email Password
Silakan login
Login Lupa Password?
BA01
Keterangan Nama Halaman : Login
Ukuran Layar : dinamis Type Ukuran Font : Tahoma 15pt
Warna Latar : putih ·
jika memasukan email dan password dengan benar dan klik tombol Login, tampilkan BA04
· Jika salah memasukan email dan password, tampilkan BA02
· Pilih menu Lupa Password untuk masuk ke BA03
Gambar 3. 45 Perancangan halaman login administrator
b. Halaman gagal login
Email Password
Silakan login
Login Lupa Password?
BA02 LOGIN TIDAK BERHASIL
Keterangan Nama Halaman : Gagal login
Ukuran Layar : dinamis Type Ukuran Font : Tahoma 15pt
Warna Latar : putih ·
jika memasukan email dan password dengan benar dan klik tombol Login, tampilkan BA04
· Jika salah memasukan email dan password, tampilkan BA02
· Pilih menu Lupa Password untuk masuk ke BA03
Gambar 3. 46 Perancangan halaman gagal login administrator
c. Halaman lupa password
Masukan email Anda Reset password
BA03
Kami akan memeriksa apakah email yang anda masukan telah terdaftar pada sistem kami. Bila email telah terdaftar, kami akan mengirimkan
password baru ke alamat email tersebut
Keterangan Nama Halaman : Lupa password
Ukuran Layar : dinamis Type Ukuran Font : Tahoma 15pt
Warna Latar : putih
· Jika memasukan email yang telah terdaftar dan klik tombol
reset password, tampilkan BA01 dan pesan berhasil reset password
· Jika memasukan email yang belum terdaftar, reload BA03
dengan pesan gagal reset password
Gambar 3. 47 Perancangan halaman lupa password administrator
d. Halaman Beranda
· BA04
BERANDA | LOGOUT Menu Untuk Administrator
Kurs Saat ini : Update nilai kurs
SELAMAT DATANG ADMINOPERATOR
Silahkan gunakan menu yang tersedia untuk memulai pengolahan data
STATISTIK Barang
Transaksi
Jumlah Barang : Jumlah Detail Barang:
Jumlah Semua Stok : Jumlah Barang Kehabisan stok :
Jumlah Transaksi : Jumlah Status Transaksi dipesan :
Jumlah Status Transaski Cek Bayar : Jumlah Status Transaksi dibayar :
Jumlah Status Transaksi dikirim: Jumlah Status Transaksi dibatalkan
Pembayaran
Jumlah Pembayaran : Total Nilai Pembayaran :
Jumlah Status Pembayaran dipesan : Jumlah Status Pembayaran Cek Bayar :
Jumlah Status Pembayaran dibayar : Jumlah Status Pembayaran dikirim:
Pengiriman
Jumlah Pengiriman : Jumlah Status Pengiriman dipesan :
Jumlah Status Pengiriman Cek Bayar : Jumlah Status Pengiriman dibayar :
Jumlah Status Pengiriman dikirim: Jumlah Status Pengiriman Dibatalkan :
· Operator
· Biaya Kirim
· Jenis Paket Kirim
· Kategori
· Propinsi
· Kota
· Merek
· Pekerjaan
· Warna
· Bank
· Akun Bank
· Backup
Keterangan Nama halaman :Beranda
Ukuran Layar : Statis default 1100 X dinamis Type Ukuran Font : Tahoma 15pt
Warna Latar : Abu - abu Warna Header
: Header hitam, Warna Footer : Footer hitam
· Masukan nilai kurs terbaru dan klik tombol
Update nilai kurs untuk memperbaru kurs yang digunakan toko
· Klik beranda untuk masuk ke BA04
· Klik Logout untuk keluar sistem dan
tampilkan BA01 ·
Klik menu Operaotr untuk masuk BA05 ·
Kik menu Biaya Kirim untuk masuk BA08 ·
Klik menu Jenis Paket Kirim untuk masuk BA11
· Klik menu Kategori untuk masuk BA14
· Klik menu Propinsi untuk masuk BA17
· Klik menu Kota untuk masuk BA20
· Klik menu Merek untuk masuk BA23
· Klik menu Pekerjaan untuk masuk BA26
· Klik menu Warna untuk masuk BA29
· Klik menu Bank untuk masuk BA32
· Klik menu Akun Bank untuk masuk 35
· Klik menu Backup untuk masuk BA38
Gambar 3. 48 Perancangan halaman beranda administrator
e. Halaman pengolahan operator
· BM01
BERANDA | LOGOUT Menu Untuk Administrator
· Operator
· Biaya Kirim
· Jenis Paket Kirim
· Kategori
· Propinsi
· Kota
· Merek
· Pekerjaan
· Warna
· Bank
· Akun Bank
· Backup
TAMBAH
Daftar Operator
ID Nama
Email Jabatan
Operasi BA05
Keterangan Nama Form : Daftar Operator
Ukuran Layar : Statis default 1100 X dinamis Type Ukuran Font : Tahoma 15pt
Warna Latar : Abu - abu Warna Header
: Header hitam, Warna Footer : Foother hitam
· Klik beranda untuk masuk ke BA04
· Klik Logout untuk keluar sistem dan
tampilkan BA01 ·
Klik menu Operator untuk masuk BA05 ·
Kik menu Biaya Kirim untuk masuk BA08 ·
Klik menu Jenis Paket Kirim untuk masuk BA11
· Klik menu Kategori untuk masuk BA14
· Klik menu Propinsi untuk masuk BA17
· Klik menu Kota untuk masuk BA20
· Klik menu Merek untuk masuk BA23
· Klik menu Pekerjaan untuk masuk BA26
· Klik menu Warna untuk masuk BA29
· Klik menu Bank untuk masuk BA32
· Klik menu Akun Bank untuk masuk 35
· Klik menu Backup untuk masuk BA38
· Klik tombol tambah untuk masuk BA06
· Klik menu edit pada kolom operasi untuk
masuk BA07
Gambar 3. 49 Perancangan halaman pengolahan operator
f. Halaman tambah operator
BA06
Tambah Operator Nama Operator :
Email Operator : Jabatan Operator :
Password Operator :
V Simpan
Batal Keterangan
Nama Halaman : Tambah operator baru Ukuran Layar : dinamis default 400 x 400
Type Ukuran Font : Tahoma 15pt Warna Latar : putih
· Jika Administrator memasukan data
dengan benar dan klik tombol Simpan, reload BA05 dan tutup halaman ini
· Jika Administrator tidak lengkap mengisi
formulir tampilkan Ms01 ·
Klik tombol Batal untuk menutup halaman ini
Gambar 3. 50 Perancangan halaman tambah operator
g. Halaman edit data operator
BA07
Edit Operator Nama Operator :
Email Operator : Jabatan Operator :
Password Operator :
V Simpan
Batal Keterangan
Nama Halaman : Edit operator Ukuran Layar : dinamis default 400 x 400
Type Ukuran Font : Tahoma 15pt Warna Latar : putih
· Jika Administrator memasukan data
dengan benar dan klik tombol Simpan, reload BA05 dan tutup halaman ini
· Jika Administrator tidak lengkap mengisi
formulir tampilkan Ms01 ·
Klik tombol Batal untuk menutup halaman ini
Gambar 3. 51 Perancangan halaman edit data operator
h. Halaman pengolahan biaya pengiriman
· BM01
BERANDA | LOGOUT Menu Untuk Administrator
· Operator
· Biaya Kirim
· Jenis Paket Kirim
· Kategori
· Propinsi
· Kota
· Merek
· Pekerjaan
· Warna
· Bank
· Akun Bank
· Backup
TAMBAH
Daftar Biaya Kirim
ID Propinsi
NamaJenis Kota Pengirim
Paket BA08
Cari : Biaya Rp
Operasi
Keterangan Nama Halaman : Daftar biaya kirim
Ukuran Layar : Statis default 1100 X dinamis Type Ukuran Font : Tahoma 15pt
Warna Latar : abu-abu
· Klik beranda untuk masuk ke BA04
· Klik Logout untuk keluar sistem dan
tampilkan BA01 ·
Klik menu Operator untuk masuk BA05 ·
Kik menu Biaya Kirim untuk masuk BA08 ·
Klik menu Jenis Paket Kirim untuk masuk BA11
· Klik menu Kategori untuk masuk BA14
· Klik menu Propinsi untuk masuk BA17
· Klik menu Kota untuk masuk BA20
· Klik menu Merek untuk masuk BA23
· Klik menu Pekerjaan untuk masuk BA26
· Klik menu Warna untuk masuk BA29
· Klik menu Bank untuk masuk BA32
· Klik menu Akun Bank untuk masuk 35
· Klik menu Backup untuk masuk BA38
· Klik tombol tambah untuk masuk BA09
· Klik menu edit pada kolom operasi untuk
masuk BA10
Gambar 3. 52 Perancangan halaman pengolahan biaya kirim
Kategori