Input Output
Info data buku Destination
User Logika Proses
User memilih menu tambah buku, memilih buku yang akan dibeli, memasukan jumlah buku yang
akan dibeli.
16.
No. Proses 8.2
Nama Proses Transaksi Pelanggan
Source User
Input Output
Info data pelanggan Destination
User Logika Proses
User memilih menu transaksi pelanggan, mengisi form isian.
3.3.5.1 Perancangan Struktur Menu
Struktur Menu Admin
Berikut ini adalah antar muka dari struktur menu admin :
Login
Menu Admin
Data Pelanggan Stok
Data Buku Data Admin
Edit Data Hapus Data
Tambah Data Edit Data
Hapus Data Tambah Data
Gambar 3.9 Antar Muka Struktur Menu Admin
Struktur Menu User
Berikut ini adalah antar muka dari struktur menu user :
Menu Utama
Home Keranjang
Cara Belanja Cara Pembayaran
Transaksi selesai Tambah barang
About
Gambar 3.10 Antar Muka Struktur Menu User
3.3.5.2 Perancangan Antar Muka
Interface atau antar muka merupakan tampilan dari suatu program aplikasi
yang berperan sebagai media komunikasi yang digunakan sebagai sarana dialog antara aplikasi dengan user
. Sistem yang akan dibangun diharapkan menyediakan interface
yang sesuai dengan kebutuhan dan karakteristik user. Perancangan interface
untuk penjualan buku online ini adalah sebagai berikut :
Perancangan Antar Muka Admin Form Login
Nama Form : F01 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Isi Username dan Password
dengan benar, Klik login menuju
F02
- Jika username
password salah atau tidak di isi
maka muncul M01
F01
HALAMAN ADMINISTRATOR Silahkan Login
Username : Password :
Login
Gambar 3.11 Perancangan Login
Menu Utama Admin
Nama Form : F02 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik Data Pelanggan
menuju F03 - Klik Stok
menuju F04 - Klik Data Buku
menuju F05 - Klik Data
Admin menuju F08
- Klik Logout from admin
menuju F01 F02
Halaman Administrator Header
Logout from admin
Footer Data Pelanggan
Stok Data Buku
Data Admin
Gambar 3.12 Perancangan Menu Utama Admin
Menu Data Pelanggan
Nama Form : F03 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik Back to admin menu
menuju F02 F03
Data Pelanggan Header
Footer
Back to Admin Menu Back to Admin Menu
No Nama
Email Alamat Kota Provinsi Kode Pos
Gambar 3.13 Perancangan Menu Data Pelanggan
Menu Stok
Nama Form : F04 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik Back to admin menu
menuju F02 F04
Stok Buku Header
Footer
Back to Admin Menu Back to Admin Menu
No Kode
Nama Barang Penulis Penerbit Stok
Jenis Buku
Gambar 3.14Perancangan Menu Stok
Menu Data Buku
Nama Form : F05 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik ubah menuju F06
- Klik hapus menuju M02
- Klik menambah data menuju F07
- Klik Back to admin menu
menuju F02 F05
Data Buku Header
Footer
Back to Admin Menu Back to Admin Menu Menambah Data
Menambah Data
Jenis Buku
No Kode
Nama Penulis Penerbit Harga Ubah Hapus
Modifikasi
Gambar 3.15 Perancangan Menu Data Buku
Menu Edit Data Buku
Nama Form : F06 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik simpan menuju F05
- Klik kembali menuju F05
- Klik Back to admin menu
menuju F02 F06
Edit Data Header
Footer
Back to Admin Menu
Simpan Kembali
Gambar 3.16 Perancangan Menu Edit Data Buku
Menu Tambah Data Buku
Nama Form : F07 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik simpan menuju F05
- Klik batal menuju F05
- Klik Back to admin menu
menuju F02 F07
Tambah Item Header
Footer
Back to Admin Menu
Simpan Batal
Gambar 3. 17 Perancangan Menu Tambah Data Buku
Menu Data Admin
Nama Form : F08 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik ubah menuju F09
- Klik hapus menuju M03
- Klik menambah data menuju F10
- Klik Back to admin menu
menuju F02 F08
Data Admin Header
Footer
Back to Admin Menu Back to Admin Menu Menambah Data
Menambah Data No
Nama Alamat Email No. Telp TTL Ubah Hapus
Modifikasi
Gambar 3.18 Perancangan Menu Data Admin
Menu Edit Data Admin
Nama Form : F09 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik simpan menuju F08
- Klik Back to admin menu
menuju F02 F09
Ubah Data Header
Footer
Back to Admin Menu
Simpan
Gambar 3.19 Perancangan Menu Edit Data Admin
Menu Tambah Data Admin
Nama Form : F10 Ukuran Layar : Dinamis Sesuai Monitor Pengguna
Font : Times New Roman Warna Latar : Hijau
- Klik simpan menuju F08
- Klik Back to admin menu
menuju F02 F10
Tambah Data Header
Footer
Back to Admin Menu
Simpan
Gambar 3.20 Perancangan Menu Tambah Data Admin
3.3.6 Perancangan Antar Muka User
