BAB 4 IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi
4.1.2 Implementasi Halaman Web
Implementasi halaman web merupakan tampilan aplikasi dibuat agar pengguna dapat berinteraksi dengan aplikasi yang dibangun. Berikut adalah antarmuka yang terdapat pada aplikasi ini.
4.1.2.1 Halaman Login
Berikut adalah tampilan halaman login Modern Silver.
Gambar 4-1 Implementasi Halaman Login
4.1.2.2 Halaman Admin
Halaman admin adalah berisi tampilan menu-menu yang ada di halaman admin. Berikut menu yang terdapat di halaman admin.
Gambar 4-2 Implementasi Halaman Admin
4.1.2.3 Halaman Supervisor
Halaman supervisor adalah berisi tampilan menu-menu yang ada di halaman supervisor. Berikut menu yang terdapat di halaman supervisor.
Gambar 4-3 Implementasi Halaman Supervisor
4.1.2.4 Halaman Data Toko
Halaman data toko adalah berisi data yang telah diinputkan. Terdapat menu tambah data dan edit data.
Penjelasan fungsionalitas :
a. Menu tambah : digunakan untuk menambahkan data baru.
b. Menu edit : digunakan untuk mengubah data.
4.1.2.5 Halaman Form Toko
Halaman form toko merupakan halaman form penginputan data toko. Berikut adalah halaman form penginputan toko.
Gambar 4-5 Implementasi Halaman Form Toko
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data Toko.
4.1.2.6 Halaman Form Edit Toko
Halaman form edit toko merupakan halaman form edit data toko. Berikut adalah halaman form edit data toko.
Gambar 4-6 Implementasi Halaman Form Edit Toko
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data Toko.
4.1.2.7 Halaman Data Petugas
Halaman data petugas adalah berisi data yang telah diinputkan. Terdapat menu tambah data dan edit data.
Gambar 4-7 Implementasi Halaman Data Petugas
Penjelasan fungsionalitas :
a. Menu tambah : digunakan untuk menambahkan data baru.
4.1.2.8 Halaman Form Petugas Supervisor
Halaman form petugas supervisor merupakan halaman form penginputan data petugas supervisor. Berikut adalah halaman form penginputan data petugas.
.
Gambar 4-8 Implementasi Halaman Form Petugas Supervisor
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data petugas.
4.1.2.9 Halaman Form Petugas Layanan
Halaman form petugas layanan merupakan halaman form penginputan data petugas layanan. Berikut adalah halaman form penginputan data petugas.
Gambar 4-9 Implementasi Halaman Form Petugas Layanan
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data petugas.
4.1.2.10 Halaman Form Edit Petugas Supervisor
Halaman form edit petugas supervisor merupakan halaman form mengedit data petugas supervisor. Berikut adalah halaman form mengedit data petugas.
Gambar 4-10 Implementasi Halaman Form Edit Petugas Supervisor
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data petugas.
4.1.2.11 Halaman Form Edit Petugas Layanan
Halaman form edit petugas layanan merupakan halaman form mengedit data petugas layanan. Berikut adalah halaman form mengedit data petugas.
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data petugas.
4.1.2.12 Halaman Data Supplier
Halaman data Supplier adalah berisi data yang telah diinputkan. Terdapat menu tambah data dan edit data.
Gambar 4-12 Implementasi Halaman Data Supplier
Penjelasan fungsionalitas :
a. Menu tambah : digunakan untuk menambahkan data baru.
b. Menu edit : digunakan untuk mengubah data.
4.1.2.13 Halaman Form Supplier
Halaman form supplier merupakan halaman form penginputan data supplier. Berikut adalah halaman form penginputan data supplier.
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data supplier.
4.1.2.14 Halaman Form Edit Supplier
Halaman form edit supplier merupakan halaman form mengedit data supplier. Berikut adalah halaman form mengedit data supplier.
Gambar 4-14 Implementasi Halaman Form Edit Supplier
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data supplier.
4.1.2.15 Halaman Data Barang
Halaman data barang adalah berisi data yang telah diinputkan. Terdapat menu tambah data dan edit data.
Gambar 4-15 Implementasi Halaman Data Barang
4.1.2.16 Halaman Form Barang
Halaman form barang merupakan halaman form penginputan data barang. Berikut adalah halaman form penginputan data barang.
Gambar 4-16 Implementasi Halaman Form Barang
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data barang.
4.1.2.17 Halaman Form Edit Barang
Halaman form edit barang merupakan halaman form mengedit data barang. Berikut adalah halaman form mengedit data barang.
Gambar 4-17 Implementasi Halaman Form Edit Barang
Penjelasan fungsionalitas :
a. Tombol simpan : digunakan untuk menyimpan data.
b. Tombol kembali: digunakan untuk kembali ke halaman data barang.
4.1.2.18 Halaman Stok Toko Cabang
Berikut ini adalah tampilan stok toko cabang, terlebih dahulu kita memilih toko cabang. Setelah memilih maka akan menampilkan data stok toko cabang.
4.1.2.19 Halaman Form Transaksi penerimaan
Halaman form transaksi penerimaan merupakan halaman form tambah transaksi penerimaan barang dari supplier. Berikut adalah halaman form transaksi penerimaan barang.
Gambar 4-19 Implementasi Halaman Form Transaksi Penerimaan
4.1.2.20 Halaman Data Penerimaan Barang
Halaman data penerimaan barang merupakan halaman data penerimaan barang dari supplier yang telah ditambah.
Gambar 4-20 Implementasi Halaman Data Penerimaan Barang
Penjelasan fungsionalitas :
4.1.2.21 Halaman Form Transaksi Pengiriman
Halaman form transaksi pengiriman merupakan halaman form tambah transaksi pengiriman barang ke toko cabang. Berikut adalah halaman form transaksi pengiriman barang.
Gambar 4-21 Implementasi Halaman Form Transaksi Pengiriman
4.1.2.22 Halaman Data Pengiriman Barang
Halaman data pengiriman barang merupakan halaman data pengiriman barang ke toko cabang yang telah ditambah.
4.1.2.23 Tampilan Cetak Pengiriman Barang
Berikut ini adalah tampilan cetak data pengiriman barang kantor pusat ke toko cabang Modern Silver .
Gambar 4-23 Implementasi Tampilan Cetak Pengiriman Barang
4.1.2.24 Halaman Notifikasi Tambahan Stok Barang
Halaman notifikasi tambahan stok barang merupakan halaman pemberitahuan tentang tambahan data barang dari kantor pusat Modern Silver.
Gambar 4-24 Implementasi Halaman Notifikasi Tambahan Stok Barang
4.1.2.25 Tampilan Stok Toko Cabang
Tampilan stok toko cabang merupakan tampilan data stok barang yang ada di toko cabang. Berikut ini adalah tampilan stok toko cabang.
Gambar 4-25 Implementasi Tampilan Stok Toko Cabang
4.1.2.26 Halaman Form Transaksi Penjualan
Halaman form transaksi penjualan merupakan halaman form tambah transaksi penjualan barang. Berikut adalah halaman form transaksi penjualan barang.
Gambar 4-26 Implementasi Halaman Form Transaksi Penjualan
4.1.2.27 Halaman Data Transaksi Penjualan
Halaman data transaksi penjualan merupakan halaman data penjualan barang yang telah ditambah.
Gambar 4-27 Implementasi Halaman Data Transaksi Penjualan
Penjelasan fungsionalitas :
a. Tombol Hapus : digunakan untuk menghapus data barang.
b. Tombol Cetak : digunakan untuk mencetak data penjualan barang.
4.1.2.28 Tampilan Cetak Transaksi Penjualan
Berikut ini adalah tampilan struk penjualan barang Modern Silver.
4.1.2.29 Halaman Form Transaksi pembelian
Berikut ini adalah tampilan dari halaman form transaksi pembelian.
Gambar 4-29 Implementasi Halaman Form Transaksi Pembelian
4.1.2.30 Halaman Transaksi Pembelian Tidak Rusak
Berikut ini adalah tampilan dari halaman transaksi pembelian tidak rusak.
Gambar 4-30 Implementasi Halaman Transaksi Pembelian Tidak Rusak
Gambar 4-31 Implementasi Halaman Transaksi Pemelian Rusak Ringan
4.1.2.32 Halaman Transaksi Pembelian Rusak Berat
Berikut ini adalah tampilan dari halaman transaksi pembelian rusak berat.
Gambar 4-32 Implementasi Halaman Transaksi Pembelian Rusak Berat
4.1.2.33 Halaman Data Transaksi Pembelian
Gambar 4-33 Implementasi Halaman Data Transaksi Pembelian
4.1.2.34 Tampilan Cetak Transaksi Pembelian
Berikut ini adalah tampilan cetak transaksi pembelian sebagai tanda bukti barang telah di beli oleh toko Modern Silver.
Gambar 4-34 Implementasi Tampilan Cetak Transaksi Pembelian
4.1.2.35 Halaman Laporan
Ada 3 laporan yang nantinya akan diberikan kepada admin Modern Silver yaitu laporan transaksi penjualan, laporan transaksi pembelian dan laporan omset. Berikut adalah contoh tampilan laporan tersebut dan terdapat menu cetak.
4.1.2.35.1 Halaman Laporan Penjualan
Berikut ini adalah contoh tampilan laporan penjualan pada Modern Silver Cirebon. Penjelasan fungsionalitas :
b. Form penginputan tanggal: digunakan untuk menginputkan dari tanggal dan sampai tanggal laporan yang diinginkan.
c. Menu cetak : digunakan untuk men-download laporan yang akan dicetak.
Gambar 4-35 Implementasi Halaman Laporan Penjualan
4.1.2.35.2 Halaman Laporan Pembelian
Berikut ini adalah contoh tampilan laporan pembelian pada Modern Silver Cirebon.
Penjelasan fungsionalitas :
a. Form penginputan toko : digunakan untuk penginputan toko laporan yang diinginkan.
b. Form penginputan tanggal: digunakan untuk menginputkan dari tanggal dan sampai tanggal laporan yang diinginkan.
4.1.2.35.3 Halaman Laporan omset
Berikut ini adalah contoh tampilan laporan omset pada Modern Silver Cirebon.
Penjelasan fungsionalitas :
d. Form penginputan toko : digunakan untuk penginputan toko laporan yang diinginkan.
e. Form penginputan tanggal: digunakan untuk menginputkan dari tanggal dan sampai tanggal laporan yang diinginkan.
f. Menu cetak : digunakan untuk men-download laporan yang akan dicetak.