7. Perancangan antarmuka laporan pembelian Berikut perancangan antarmuka laporan pembelian bengkel kurnia motor
T09
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman laporan pembelian § Klik link laporan pembelian untuk
masuk ke laporan pembelian T09 § Klik link laporan penjualan untuk
masuk ke laporan penjualan T10 § Klik link log untuk masuk ke
halaman log T11 § Klik link barang kritis untuk masuk
ke halaman barang kritis T13 § Klik link peramalan untuk masuk ke
halaman peramalan T12
Laporan pembelian menu
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
Nama barang Jumlah pembelian
Jumlah harga Harga satuan
Laporan bulan : No.
kode barang Beranda
Data Master Transaksi
Laporan Log Out
Gambar 3.30 Perancangan Antarmuka Laporan Pembelian
8. Perancangan antarmuka laporan penjualan Berikut perancangan antarmuka laporan penjualan bengkel kurnia motor.
T11
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman laporan log
Laporan Log menu
Nama pegawai tabel
tanggal aksi
No. Kode pegawai
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
Beranda Data Master
Transaksi Laporan
Log Out
§ Klik link laporan pembelian untuk masuk ke laporan pembelian T09
§ Klik link laporan penjualan untuk masuk ke laporan penjualan T10
§ Klik link log untuk masuk ke halaman log T11
§ Klik link barang kritis untuk masuk ke halaman barang kritis T13
§ Klik link peramalan untuk masuk ke halaman peramalan T12
Gambar 3.31 Perancangan Antarmuka Laporan Penjualan
9. Perancangan antarmuka laporan Log Berikut perancangan antarmuka log aksi.
T11
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman laporan log
Laporan Log menu
Nama pegawai tabel
tanggal aksi
No. Kode pegawai
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
Beranda Data Master
Transaksi Laporan
Log Out
§ Klik link laporan pembelian untuk
masuk ke laporan pembelian T09 §
Klik link laporan penjualan untuk masuk ke laporan penjualan T10
§ Klik link log untuk masuk ke
halaman log T11 §
Klik link barang kritis untuk masuk ke halaman barang kritis T13
§ Klik link peramalan untuk masuk ke
halaman peramalan T12
Gambar 3.32 Perancangan Antarmuka Laporan Log
10. Perancangan antarmuka laporan peramalan Berikut perancangan antarmuka laporan peramalan.
T12
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman laporan peramalan
Laporan peramalan menu
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
Nama barang stok
Jumlah yang disarankan Jumlah peramalan
Bulan : Beranda
Data Master Transaksi
Laporan Log Out
Kode barang No.
§ Klik link laporan pembelian untuk masuk ke laporan pembelian T09
§ Klik link laporan penjualan untuk masuk ke laporan penjualan T10
§ Klik link log untuk masuk ke halaman log T11
§ Klik link barang kritis untuk masuk ke halaman barang kritis T13
§ Klik link peramalan untuk masuk ke halaman peramalan T12
Gambar 3.33 Perancangan Antarmuka Laporan Peramalan.
11. Perancangan antarmuka laporan barang kritis Berikut perancangan antarmuka laporan barang kritis.
T13
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman laporan barang kritis
Laporan Barang Kritis menu
no Kode
barang Kode
gudang Nama
barang stok
merk kategori
Harga beli
Harga jual
Tanggal entry
aksi Beranda
Data Master Transaksi
Laporan Log Out
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
§ Klik link laporan pembelian untuk masuk ke laporan pembelian T09
§ Klik link laporan penjualan untuk masuk ke laporan penjualan T10
§ Klik link log untuk masuk ke halaman log T11
§ Klik link barang kritis untuk masuk ke halaman barang kritis T13
§ Klik link peramalan untuk masuk ke halaman peramalan T12
Gambar 3.34 Perancangan Antarmuka Laporan Barang Kritis
12. Perancangan antarmuka daftar faktur penjualan Berikut perancangan antarmuka daftar faktur penjualan
T15
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman daftar faktur penjualan
Daftar faktur penjualan menu
no No.faktur
Waktu transaksi Nama pegawai
Nama pelanggan Total transaksi
detail Beranda
Data Master Transaksi
Laporan Log Out
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
§ Klik link laporan pembelian untuk
masuk ke laporan pembelian T09 §
Klik link laporan penjualan untuk masuk ke laporan penjualan T10
§ Klik link log untuk masuk ke
halaman log T11 §
Klik link barang kritis untuk masuk ke halaman barang kritis T13
§ Klik link peramalan untuk masuk ke
halaman peramalan T12
pengurutan Lihat laporan
Go tampilkan
Gambar 3.35 Perancangan Antarmuka Daftar Faktur Penjualan
13. Perancangan antarmuka daftar faktur pembelian Berikut perancangan antarmuka daftar faktur pembelian
T16
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman daftar faktur pembelian
Daftar faktur pembelian menu
no No.faktur
Waktu transaksi Nama pegawai
Nama supplier Total transaksi
detail Beranda
Data Master Transaksi
Laporan Log Out
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
§ Klik link laporan pembelian untuk
masuk ke laporan pembelian T09 §
Klik link laporan penjualan untuk masuk ke laporan penjualan T10
§ Klik link log untuk masuk ke
halaman log T11 §
Klik link barang kritis untuk masuk ke halaman barang kritis T13
§ Klik link peramalan untuk masuk ke
halaman peramalan T12
pengurutan Lihat laporan
Go tampilkan
Gambar 3.36 Perancangan Antarmuka Daftar Faktur Pembelian
14. Perancangan antarmuka lupa password Berikut perancangan antarmuka lupa password
T17
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman lupa password § Masukan jawaban dari
soal yang ditanyakan § Masukan password ke
field § Ulangi
masukan password
untuk menghindari
kesalahan input
Lupa password username
Ulangi password
Ganti Password pertanyaan
Gambar 3.37 Perancangan Antarmuka Lupa Password
3.2.3.2 Perancangan Antarmuka Pegawai
Perancangangan antarmuka pegawai dirancang untuk tampilan antarmuka untuk pegawai.
1. Perancangan Antarmuka Login Pegawai
T01
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman login § Masukan username ke
field username § Masukan password ke
field § Klik tombol login untuk
login
login username
password login
Gambar 3.38 Perancangan Antarmuka Login Pegawai
2. Perancangan Antarmuka Beranda
Berikut perancangan antarmuka beranda untuk pegawai.
T02
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman beranda admin
§ Klik gambar barang untuk masuk ke
pengolahan data barang T03 §
Klik gambar pegawai untuk masuk ke pengolahan data pegawai T04
§ Klik gambar supplier untuk masuk ke
pengolahan data supplier T05 §
Klik gambar pelanggan untuk masuk ke pengolahan data pelanggan T06
§ Klik link transaksi pembelian untuk
masuk ke halaman transaksi pembelian T07
§ Klik link transaksi penjualan untuk
masuk ke halaman transaksi penjualan T08
§ Klik gambar daftar faktur penjualan
untuk menuju T15 §
Klik gambar daftar faktur pembelian untuk menuju T16
Pengolahan data master
Transaksi
laporan menu
gambar gambar
gambar gambar
gambar gambar
gambar gambar
· Data barang
· Data pegawai
· Data supplier
· Data
pelanggan ·
Transaksi penjualan
· Transaksi
pembelian barang
pegawai supplier
pelanggan
pembelian penjualan
Daftar faktur penjualan
Daftar faktur pembelian
Beranda Data Master Transaksi Laporan
Log Out
Gambar 3.39 Perancangan Antarmuka Beranda Pegawai
3. Perancangan Antarmuka Pengolahan Data Barang
Berikut perancangan antarmuka untuk pengolahan data barang.
T03
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman pengolahan data barang § Klik gambar barang untuk masuk ke
pengolahan data barang T03 § Klik gambar pegawai untuk masuk ke
pengolahan data pegawai T04 § Klik gambar supplier untuk masuk ke
pengolahan data supplier T05 § Klik gambar pelanggan untuk masuk
ke pengolahan data pelanggan T06 § Klik link transaksi pembelian untuk
masuk ke
halaman transaksi
pembelian T07 § Klik link transaksi penjualan untuk
masuk ke
halaman transaksi
penjualan T08 § Klik tombol masukan data baru untuk
memanggil dialog form data baru § Pilih aksi hapus untuk memanggil
dialog konfirmasi hapus § Pilih aksi ubah untuk memanggil
dialog form ubah data barang § Pilih field yang akan di urutkan
kemudian pilih jenis pengurutan untuk mengurutka data barang
Pengolahan data barang menu
· Data barang
· Data pegawai
· Data supplier
· Data pelanggan
no Kode
barang Kode
gudang Nama
barang stok
merk kategori
Harga beli
Harga jual
Tanggal entry
aksi pengurutan
kode ASC
go operasi
Masukan data baru Beranda
Data Master Transaksi
Laporan Log Out
Gambar 3.40 Perancangan Antarmuka Pengolahan Data Barang
4. Perancangan Antarmuka Pengolahan Data Supplier
Berikut perancangan antarmuka untuk pengolahan data supplier.
T05
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman pengolahan data supplier § Klik gambar barang untuk masuk ke
pengolahan data barang T03 § Klik gambar pegawai untuk masuk ke
pengolahan data pegawai T04 § Klik gambar supplier untuk masuk ke
pengolahan data supplier T05 § Klik gambar pelanggan untuk masuk
ke pengolahan data pelanggan T06 § Klik link transaksi pembelian untuk
masuk ke
halaman transaksi
pembelian T07 § Klik link transaksi penjualan untuk
masuk ke
halaman transaksi
penjualan T08 § Klik tombol masukan data baru untuk
memanggil dialog form data baru § Pilih aksi hapus untuk memanggil
dialog konfirmasi hapus § Pilih aksi ubah untuk memanggil
dialog form ubah data supplier § Pilih field yang akan di urutkan
kemudian pilih jenis pengurutan untuk mengurutka data supplier
Pengolahan data supplier menu
· Data barang
· Data pegawai
· Data supplier
· Data pelanggan
no nama
perusahaan alamat
No_telpon aksi
pengurutan kode
ASC go
operasi Masukan data baru
Beranda Data Master
Transaksi Laporan
Log Out
Gambar 3.41 Perancangan Antarmuka Pengolahan Data Supplier
5. Perancangan Antarmuka Pengolahan Data Pelanggan
Berikut perancangan antarmuka untuk pengolahan data pelanggan.
T06
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman pengolahan data pelanggan §
Klik gambar barang untuk masuk ke pengolahan data barang T03
§ Klik gambar pegawai untuk masuk ke
pengolahan data pegawai T04 §
Klik gambar supplier untuk masuk ke pengolahan data supplier T05
§ Klik gambar pelanggan untuk masuk
ke pengolahan data pelanggan T06 §
Klik link transaksi pembelian untuk masuk
ke halaman
transaksi pembelian T07
§ Klik link transaksi penjualan untuk
masuk ke
halaman transaksi
penjualan T08 §
Klik tombol masukan data baru untuk memanggil dialog form data baru
§ Pilih aksi hapus untuk memanggil
dialog konfirmasi hapus §
Pilih aksi ubah untuk memanggil dialog form ubah data planggan
§ Pilih field yang akan di urutkan
kemudian pilih jenis pengurutan untuk mengurutka data pelanggan
Pengolahan data pelanggan menu
· Data barang
· Data pegawai
· Data supplier
· Data pelanggan
no nama
alamat Jumlah
utang No_telpon
aksi pengurutan
kode ASC
go operasi
Masukan data baru Tanggal daftar
Beranda Data Master
Transaksi Laporan
Log Out
Gambar 3.42 Perancangan Antarmuka Pengolahan Data Pelanggan
6. Perancangan Antarmuka Transaksi Pembelian
Berikut perancangan antarmuka transaksi pembelian
T07
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman transaksi pembelian § Klik link transaksi pembelian untuk
masuk ke
halaman transaksi
pembelian T07 § Klik link transaksi penjualan untuk
masuk ke
halaman transaksi
penjualan T08 § Klik tombol tambah untuk menambah
record pembelian baru § Klik tombol delete untuk menghapus
record pembelian § Klik submit untuk mengkonfirmasi
transaksi § Isikan nama supplier pada field nama
supplier
Transaksi pembelian menu
· Transaksi penjualan
· Transaksi pembelian
Kode barang Jumlah barang
Harga satuan Nama supplier
tambah delete
submit Beranda
Data Master Transaksi
Laporan Log Out
Gambar 3.43 Perancangan Antarmuka Transaksi Pembelian
7. Perancangan Antarmuka Transaksi Penjualan
Berikut perancangan antarmuka transaksi penjualan
T08
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman transaksi penjualan §
Klik link transaksi pembelian untuk masuk
ke halaman
transaksi pembelian T07
§ Klik link transaksi penjualan untuk
masuk ke
halaman transaksi
penjualan T08 §
Klik tombol tambah untuk menambah record penjualan baru
§ Klik tombol delete untuk menghapus
record penjualan §
Klik submit untuk mengkonfirmasi transaksi
§ Isikan nama pelanggan pada field
nama pelanggan
Transaksi penjualan menu
· Transaksi penjualan
· Transaksi pembelian
Kode barang Jumlah barang
Harga satuan Nama pelanggan
tambah delete
submit Beranda
Data Master Transaksi
Laporan Log Out
Gambar 3.44 Perancangan Antarmuka Transaksi Penjualan
8. Perancangan Antarmuka Daftar Faktur Penjualan
Berikut perancangan antarmuka daftar faktur penjualan
T15
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman daftar faktur penjualan
Daftar faktur penjualan menu
no No.faktur
Waktu transaksi Nama pegawai
Nama pelanggan Total transaksi
detail Beranda
Data Master Transaksi
Laporan Log Out
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
§ Klik gambar barang untuk masuk ke pengolahan data barang T03
§ Klik gambar pegawai untuk masuk ke pengolahan data pegawai T04
§ Klik gambar supplier untuk masuk ke pengolahan data supplier T05
§ Klik gambar pelanggan untuk masuk ke pengolahan data pelanggan T06
§ Klik link transaksi pembelian untuk masuk
ke halaman
transaksi pembelian T07
§ Klik link transaksi penjualan untuk masuk
ke halaman
transaksi penjualan T08
§ Klik gambar daftar faktur penjualan untuk menuju T15
§ Klik gambar daftar faktur pembelian untuk menuju T16
pengurutan Lihat laporan
Go tampilkan
Gambar 3.45 Perancangan Antarmuka Daftar Faktur Penjualan
9. Perancangan Antarmuka Daftar Faktur Pembelian
Berikut ini perancangan antarmuka daftar faktur pembelian
T16
Latar belakang : Custom Resolusi
: 1024 x 768 Deskripsi
: Halaman daftar faktur pembelian
Daftar faktur pembelian menu
no No.faktur
Waktu transaksi Nama pegawai
Nama supplier Total transaksi
detail Beranda
Data Master Transaksi
Laporan Log Out
· Laporan Pembelian
· Laporan Penjualan
· Log
· Peramalan
· Barang Kritis
§ Klik gambar barang untuk masuk ke pengolahan data barang T03
§ Klik gambar pegawai untuk masuk ke pengolahan data pegawai T04
§ Klik gambar supplier untuk masuk ke pengolahan data supplier T05
§ Klik gambar pelanggan untuk masuk ke pengolahan data pelanggan T06
§ Klik link transaksi pembelian untuk masuk
ke halaman
transaksi pembelian T07
§ Klik link transaksi penjualan untuk masuk
ke halaman
transaksi penjualan T08
§ Klik gambar daftar faktur penjualan untuk menuju T15
§ Klik gambar daftar faktur pembelian untuk menuju T16
pengurutan Lihat laporan
Go tampilkan
Gambar 3.46 Perancangan Antarmuka Daftar Faktur Pembelian
3.2.3.3 Perancangan Antarmuka Pesan
Perancangan pesan dibangun untuk menampilkan pesan dari sistem. Perancangan pesan dijelaskan pada tabel 3.27
Tabel 3.27 Perancangan Pesan
No. No. Pesan
Isi Pesan Jenis
Pesan Terdapat Pada
Form
1. M01
Username atau Password Salah Informasi
T01 2.
M02 Field Tidak Boleh Kosong
Informasi T03, T04, T05, T06
T07, T08 4.
M04 Field Harus Angka
Informasi T03, T04, T05, T06
5. M05
Data tidak ditemukan Informasi
T07, T08 6.
M06 Ubah pertanyaan verifikasi berhasil
Informasi T02
7 M07
Ubah pertanyaan verifikasi gagal Informasi
T02 7.
C01 Anda yakin akan menghapus data ini?
Konfirmasi T03, T04, T05,T06
