Implementasi Antarmuka Pengguna

BAB IV IMPLEMENTASI SISTEM

B. Implementasi Antarmuka Pengguna

Implementasi antarmuka pengguna dibuat berdasarkan acuan rancangan

yang telah dibuat pada bab sebelumnya. Antarmuka dibuat menggunakan

toolbox yang terdapat pada gambas.

Pada saat awal memasuki sistem, akan muncul antarmuka Login yang

barfungsi sebagai validasi user yang ingin menggunakan sistem.

Gambar 4.1 Halaman Login

Halaman login ini akan meminta user untuk memasukkan id user dan

password user. Jika user salah dalam memasukkan id dan password, maka

sistem akan menampilkan pesan kesalahan bahwa login gagal.

Gambar 4.2 Pesan Kesalahan Login Gagal

Jika id dan password yang dimasukkan user sudah benar, maka user

akan masuk ke dalam sistem sesuai dengan jabatan yang dimiliki oleh user.

1. Halaman Utama Admin/Manager

Halaman ini digunakan oleh manager yang barlaku sebagai admin.

Di dalam halaman ini terdapat menu-menu yang dapat dilakukan oleh

admin. Kegunaan menu tersebut disebutkan dalam petunjuk singkat yang

terdapat pada halaman tersebut. Di dalam halaman tersebut juga terdapat

beberapa keterangan hak akses yang diberikan oleh sistem.

Gambar 4.3 Halaman Utama Admin/Manager

2. Halaman Lihat Data Barang (Manager)

Halaman ini digunakan manager untuk melihat data barang.

Informasi tambahan yang diberikan adalah, data stok barang yang sudah

kurang atau sudah habis, data barang yang hampir atau sudah kadaluarsa.

Informasi tambahan tersebut ditampilkan dalam bentuk warna.

3. Halaman Lihat Detail Data Barang (Manager)

Pada halaman sebelumnya terdapat tombol detail barang, tombol

tersebut menuju ke halaman ini. Dalam halaman ini terdapat grafik

penjualan barang tiap bulan untuk tiap tahun. Untuk tombol cetak barcode

digunakan untuk mencetak barcode barang.

Gambar 4.5 Halaman Detail Data Barang (Manager)

4. Halaman Lihat Data Supplier (Manager)

Menu lihat data supplier pada halaman utama menuju ke sini.

5. Halaman Lihat Laporan

Pada halaman utama terdapat menu lihat laporan. Jika menu

tersebut ditekan, maka akan tampil halaman ini. Halaman ini terdapat 3

tombol, stok barang digunakan untuk melihat laporan stok barang,

penjualan digunakan untuk melihat laporan penjualan barang, tutup untuk

menutup halaman.

Gambar 4.7 Halaman Lihat Laporan

6. Halaman Laporan Stok Barang

Jika stok barang ditekan, maka akan muncul halaman ini.

7. Halaman Lihat Laporan Penjualan

Jika tombol penjualan pada halaman lihat laporan ditekan, maka

akan muncul halaman ini. Dalam halaman ini terdapat 3 kategori utama

laporan yaitu, harian untuk laporan harian, bulanan untuk laporan

bulanan, tahunan untuk laporan tahunan.

Gambar 4.9 Halaman Lihat Laporan Penjualan

8. Halaman Lihat Laporan Penjualan Harian

Jika kategori harian dipilih, maka akan tampil seperti dibawah ini.

Gambar 4.10 Halaman Lihat Laporan Penjualan Harian

Setelah user memilih tanggal menggunakan tombol pilih tanggal,

user dapat melihat laporan dengan menekan tombol OK. Jika tombol OK

ditekan, maka akan tampil halaman laporan penjualan harian.

9. Halaman Laporan Penjualan Harian

Gambar 4.11 Halaman Laporan Penjualan Harian

10.Halaman Lihat Laporan Penjualan Bulanan

Jika kategori bulanan dipilih, maka akan tampil seperti dibawah ini.

Gambar 4.12 Halaman Lihat Laporan Penjualan Bulanan

Setelah user memilih bulan dan tahun menggunakan combo pilih

bulan dan tahun, user dapat melihat laporan dengan menekan tombol OK.

Jika tombol OK ditekan, maka akan tampil halaman laporan penjualan

bulanan.

11.Halaman Laporan Penjualan Bulanan

Gambar 4.13 Halaman Laporan Penjualan Bulanan

12.Halaman Lihat Laporan Penjualan Tahunan

Jika kategori tahunan dipilih, maka akan tampil seperti dibawah ini.

Gambar 4.14 Halaman Lihat Laporan Penjualan Tahunan

Setelah user memilih tahun menggunakan combo pilih tahun, user

dapat melihat laporan dengan menekan tombol OK. Jika tombol OK

ditekan, maka akan tampil halaman laporan penjualan tahunan.

13.Halaman Laporan Penjualan Tahunan

Gambar 4.15 Halaman Laporan Penjualan Tahunan

14.Halaman Lihat Data User

Pada halaman utama terdapat menu lihat data user. Jika menu

tersebut ditekan, maka akan tampil halaman lihat data user.

15.Halaman Lihat Detail Data User

Tombol detail pada halaman lihat data user jika ditekan, maka akan

muncul halaman lihat detail data user. Halaman ini digunakan untuk

melihat atau mengubah data user.

Gambar 4.17 Halaman Lihat Detail Data User

16.Halaman Tambah User

Pada halaman utama atau halaman lihat data user terdapat menu

tambah user atau tombol tambah user. Menu dan tombol tersebut jika

dipilih akan menampilkan halaman seperti dibawah ini.

17.Halaman Utama Kasir

Gambar 4.19 Halaman Utama Kasir

Jika user yang memiliki jabatan sebagai kasir, maka user akan

memasuki halaman utama kasir. Halaman ini digunakan kasir untuk

mencatat setiap proses penjualan. Dalam mencatat proses penjualan, kasir

akan diminta oleh sistem untuk memasukkan kode barang yang akan

dijual. Format kode yang diijinkan oleh sistem adalah [kode barang] atau

[jumlah jual barang] [*] [kode barang].

Jika kasir menekan tombol enter tanpa memasukkan kode terlebih

dahului, maka sistem akan menampilkan pesan memasukkan kode barang.

Jika kasir salah dalam memasukkan kode, maka sistem akan

menampilkan kesalahan memasukkan kode barang.

Gambar 4.21 Pesan Kesalahan Kode Barang

Bagi kasir yang tidak mengingat kode barang, maka sistem

menyediakan halaman mencari barang untuk kasir. Untuk menggunakan

halaman ini, kasir harus menekan tombol F3/PageDown.

Gambar 4.22 Halaman Cari Barang Untuk Kasir

Kasir dapat mencari data barang dengan memasukkan nama/kode/

jenis/keterangan barang lalu menekan tombol enter. Kemudian kasir

dapat memilih data barang yang akan dijual dengan menekan tombol

arah ke atas atau arah ke bawah lalu tekan enter.

Kasir dapat mengubah data jumlah jual barang dengan menekan

tombol Delete.

Gambar 4.23 Ubah Jumlah Jual Barang

Jika barang yang akan dijual sudah selesai dimasukkan, maka kasir

harus melakukan proses pembayaran dengan menekan tombol Insert

maka akan muncul halaman seperti berikut.

Gambar 4.24 Halaman Pembayaran

18.Halaman Bantuan Kasir

Jika kasir mengalami kesulitan dalam menggunakan sistem, kasir

dapat melihat bantuan dengan menekan tombol F1 maka akan muncul

halaman bantuan kasir.

Gambar 4.25 Halaman Bantuan Kasir

19.Halaman Utama Operator pergudangan

Halaman utama untuk operator pergudangan seperti dibawah ini.

Di dalam halaman utama operator pergudangan terdapat beberapa

menu yang disediakan. Menu-menu tersebut memiliki fungsi seperti di

bawah ini.

20.Halaman Lihat Data Barang (Operator pergudangan)

Jika menu lihat data barang ditekan, maka akan muncul halaman

lihat data barang untuk operator pergudangan. Dalam halaman ini

terdapat informasi tambahan yang diberikan adalah, data stok barang yang

sudah kurang atau sudah habis, data barang yang hampir atau sudah

kadaluarsa. Informasi tambahan tersebut ditampilkan dalam bentuk

warna.

Gambar 4.27 Halaman Lihat Data Barang (Operator pergudangan)

21.Halaman Lihat Detail Data Barang (Operator pergudangan)

Dalam halaman sebelumnya terdapat tombol detail/ubah, tombol

ini digunakan untuk melihat detail barang atau mengubah data barang.

Gambar 4.28 Halaman Lihat Detail Data Barang (Operator pergudangan)

22.Halaman Lihat Data Supplier (Operator pergudangan)

Menu lihat data supplier jika ditekan akan menampilkan halaman

seperti di bawah ini. Halaman ini digunakan untuk menampilkan data

supplier.

23.Halaman Lihat Detail Data Supplier (Operator pergudangan)

Pada halaman sebelumnya terdapat tombol ubah, tombol ini

berfungsi untuk menampilkan halaman detail supplier. Halaman ini

digunakan untuk menampilkan detail supplier atau untuk mengubah data

supplier.

Gambar 4.30 Halaman Lihat Detail Data Supplier (Operator pergudangan)

24.Halaman Tambah Data Barang

Pada halaman utama terdapat menu tambah barang dan pada

halaman lihat data barang terdapat tombol tambah. Menu dan tombol ini

memiliki fungsi yang sama yaitu menampilkan halaman tambah data

barang. Halaman ini digunakan untuk menambah data barang baru. Di

dalam halaman ini terdapat bantuan-bantuan yang akan muncul jika user

melakukan kesalahan dalam pengisian data barang.

Gambar 4.31 Halaman Tambah Data Barang

25.Halaman Tambah Data Supplier

Pada halaman utama terdapat menu tambah supplier dan pada

halaman lihat data barang terdapat tombol tambah. Menu dan tombol ini

memiliki fungsi yang sama yaitu menampilkan halaman tambah data

supplier. Halaman ini digunakan untuk menambah data supplier baru. Di

dalam halaman ini terdapat bantuan-bantuan yang akan muncul jika user

melakukan kesalahan dalam pengisian data supplier.

26.Halaman Ubah Password Operator/Kasir

Halaman ini digunakan oleh kasir dan operator pergudangan untuk

mengubah data password. Pada halaman ini terdapat 3 kolom yang harus

diisi yaitu, kolom pertama masukkan password yang sekarang digunakan,

kolom kedua digunakan untuk memasukkan password yang baru, kolom

ketiga digunakan untuk memasukkan ulang password baru yang telah

dimasukkan sebelumnya.

Gambar 4.33 Halaman Ubah Password Operator/Kasir

27.Halaman Cetak Barcode

Halaman ini digunakan oleh manager dan operator pergudangan

untuk mencetak barcode barang. Untuk menampilkan halaman ini,

manager atau operator pergudangan terlebih dahulu harus melihat dengan

detail data barang yang kode barcode-nya akan dicetak. Karena tombol

cetak barcode terdapat pada halaman lihat detail data barang.

Gambar 4.34 Halaman Cetak Barcode Barang