BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.2. Perancangan Sistem
3.2.3 Perancangan Antarmuka
3.2.3.1 Perancangan Antarmuka Admin
Berikut ini beberapa perancangan antarmuka admin, antara lain terdiri dari sebagai berikut :
1. Perancangan Antarmuka Login,
Berikut ini adalah gambar perancangan antarmuka login yang dapat dilihat pada gambar 3.24 di bawah ini :
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.24 Perancangan Antarmuka Login
2. Perancangan Antarmuka Beranda
Berikut ini adalah gambar perancangan antarmuka beranda untuk admin yang dapat dilihat pada gambar 3.25 di bawah ini.
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 gambar laporan pembelian untuk masuk halaman laporan pembelian (T09)
§ Klik gambar laporan penjualan untuk masuk halaman laporan penjualan (T10)
§ Klik gambar peramalan untuk masuk halaman peramalan (T12)
§ Klik gambar log untuk masuk halaman log (T11)
§ Klik gambar daftar faktur penjualan untuk menuju (T15)
§ Klik gambar daftar faktur pembelian untuk menuju (T16)
Pengolahan data master
laporan menu
gambar gambar gambar gambar
gambar gambar · Data barang · Data pegawai · Data supplier · Data pelanggan · Transaksi penjualan · Transaksi pembelian
barang pegawai supplier pelanggan
gambar gambar penjualan
pembelian peramalan log
gambar Barang kritis Beranda Data Master Transaksi Laporan Log Out
gambar Daftar faktur penjualan gambar Daftar faktur pembelian
3. Perancangan Antarmuka Penyajian Info Barang
Berikut ini adalah gambar perancangan antarmuka penyajian info barang yang dapat dilihat pada gambar 3.26 di bawah ini :
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 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 barangKode gudangKode barangNama stok merk kategori Hargabeli Hargajual Tanggalentry aksi
pengurutan kode ASC go
operasi Masukan data baru
Beranda Data Master Monitoring Laporan Log Out
Gambar 3.26 Perancangan Antarmuka Penyajian info Barang
4. Perancangan Antarmuka Pengolahan Data Pegawai
Berikut ini adalah gambar perancangan antarmuka Pengolahan Data Pegawai yang dapat dilihat pada gambar 3.27 di bawah ini :
T04
Latar belakang : Custom Resolusi : 1024 x 768
Deskripsi : Halaman pengolahan data pegawai
§ 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 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 pegawai
§ Pilih field yang akan di urutkan kemudian pilih jenis pengurutan untuk mengurutkan data pegawai
Pengolahan data pegawai menu
· Data barang
· Data pegawai
· Data supplier
· Data pelanggan no id username status nama alamat No_telpon No_ktp aksi
pengurutan kode ASC go
operasi Masukan data baru
Beranda Data Master Transaksi Laporan Log Out
5. Perancangan Antarmuka Penyajian info Supplier
Berikut ini adalah gambar perancangan antarmuka penyajian info supplier yang dapat dilihat pada gambar 3.28 di bawah ini :
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 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.28 Perancangan Antarmuka Penyajian info Supplier
6. Perancangan Antarmuka Penyajian info Pelanggan
Berikut ini adalah gambar perancangan antarmuka penyajian info pelanggan yang dapat dilihat pada gambar 3.29 di bawah ini :.
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 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 pelanggan
§ 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
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 Harga satuan Jumlah harga 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 aksi tanggal 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)
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 aksi tanggal 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 peramalan Jumlah yang disarankan 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)
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 barangKode gudangKode barangNama stok merk kategori Hargabeli Hargajual Tanggalentry 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
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