BAB III ANALISA DAN PERANCANGAN SISTEM
3.5 Perancangan User Interface
Perancangan user interface merupakan design untuk beberapa halaman dalam sistem yang akan dibangun dan akan ditampilkan untuk pengguna. Pengguna akan mengakses sistem untuk mengetahui berbagai informasi yang ada di dalamnya.
50
Pada saat mengakses sistem pengelolaan penggunaan anggaran belanja, sistem akan menampilkan halaman login terlebih dahulu. Halaman login akan digunakan oleh user.
Berikut ini adalah rancangan user interface sistem yang akan dibangun: 3.5.1 User Interface Halaman Login
Header and Logo
FOOTER
MASUKAN NAMA : MASUKAN PASSWORD:
SUBMIT
Gambar 3.18 user interface login
3.5.2 Perancangan use interface Staf Laboran
3.5.2.1 User Interface halaman Home Staf Laboran
Apabila staf telah melakukan login, maka akan ditampilkan halaman menu utama staf sebagai berikut:
51
HALAMAN UTAMA
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
Gambar 3.19 user interface halaman utama untuk staf laboran
3.5.2.2 User Interface halaman awal Data Pos
Berikut ini adalah contoh user interfase halaman awal pada saat menu
52
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN DATA POS
Jenis Pos Menu Data Pos
Data Pos
Gambar 3.20 user interface halaman utama data pos 3.5.2.2.1. User Interface halaman Menambah Jenis Pos
Di dalam menu “Data Pos”, staf laboratorium dapat melakukan proses menambah, mengedit, dan menghapus jenis pos. Berikut ini contoh rancangan user interface halaman menambah jenis pos:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN DATA POS
ID Jenis Pos: Nama Jenis Pos :
Simpan Data Kembali
Menambah Jenis Pos
Gambar 3.21 user interface halaman menambah jenis pos
53
Di dalam menu “Data Pos”, staf laboratorium dapat melakukan proses menambah, mengedit, dan menghapus jenis pos. Berikut ini contoh rancangan user interface halaman mengedit jenis pos:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN DATA POS
ID Jenis Pos: Nama Jenis Pos :
Ubah Data Kembali
Mengedit Jenis Pos
Gambar 3.22 user interface halaman mengedit jenis pos 3.5.2.2.3. User Interface halaman Menambah Data Pos
Di dalam menu “Data Pos”, staf laboratorium dapat melakukan proses menambah, mengedit, dan menghapus data. Berikut ini contoh rancangan user interface halaman menambah data pos:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN DATA POS
Id Pos : ID Jenis Pos :
Simpan Data Kembali
Menambah Data Pos
Tahun Pos : Jumlah(Rp): Sisa Uang(Rp):
54
3.5.2.2.4. User Interface halaman Mengedit Data Pos
Di dalam menu “Data Pos”, staf laboratorium dapat melakukan proses menambah, mengedit, dan menghapus data. Berikut ini contoh rancangan user interface halaman mengedit data pos:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN DATA POS
Id Pos : ID Jenis Pos :
Update Data Kembali
Update Data Pos
Tahun Pos :
Gambar 3.24 user interface halaman mengedit data pos 3.5.2.3 User Interface halaman Barang
3.5.2.3.1 User Interface halaman awal Menu Barang.
Berikut contoh rancangan user interface tampilan halaman awal menu barang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT HALAMAN BARANG HALAMAN BARANG
Input Data Barang Kembali No Brg Nama Barang Merk
Barang
Harga
Satuan(Rp) Ket Edit | Hapus HALAMAN BARANG
TABEL DATA BARANG
55
3.5.2.3.1 User Interface halaman Menambah Barang
Di dalam menu “Barang”, staf laboratorium dapat melakukan proses menambah data barang. Berikut ini contoh rancangan user interface halaman menambah data barang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT HALAMAN BARANG No Brg : Nama Barang :
Simpan Data Kembali Menambah Barang
Merk Barang : Harga Satuan(Rp)
Gambar 3.26 user interface halaman menambah data barang
3.5.2.3.2 User Interface halaman Mengedit Barang
Di dalam menu “Barang”, staf laboratorium dapat melakukan proses
mengedit data barang. Berikut ini contoh rancangan user interface halaman mengedit data barang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT HALAMAN BARANG No Brg : Nama Barang :
Update Data Kembali Update Barang
Merk Barang :
Harga Satuan(Rp)
56
3.5.2.4 User Interface Halaman R A B
3.5.2.4.1 User Interface halaman awal menu RAB
Berikut contoh rancangan user interface tampilan halaman awal menu rab:
Header and Logo
FOOTER
CARI DATA RAB HALAMAN RAB ID Pos : ID Pos : OK ID Pos : Tahun Pos : HOME DATA POS BARANG PESAN UANG TRANSAKSI PEMBELIAN MENU STAF LOGOUT
Gambar 3.28 user interface halaman awal data rab
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT HALAMAN R A B tabel
Input Data RAB Kembali HALAMAN DATA R A B
Keterangan
Edit | Hapus
57
3.5.2.4.2 User Interface halaman Menambah R A B
Di dalam menu “RAB”, staf laboratorium dapat melakukan proses
menambah data rab. Berikut ini contoh rancangan user interface halaman menambah data rab:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT HALAMAN R A B tabel
Simpan Data Kembali
Menambah RAB No : ID Pos : Nama Barang : Non Usd: Jadwal : Status : Jumlah(Rp) Harga Satuan(Rp): Usd(Rp):
58
3.5.2.4.3 User Interface halaman Mengedit R A B
Di dalam menu “RAB”, staf laboratorium dapat melakukan proses
mengedit data rab. Berikut ini contoh rancangan user interface halaman mengedit data rab:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT HALAMAN R A B
Update Data Kembali Update RAB No : ID Pos : Nama Barang : Non Usd: Jadwal : Status : Jumlah(Rp) Harga Satuan(Rp): Usd(Rp):
59
3.5.2.5 User Interface halaman Pesan Uang
3.5.2.5.1 User Interface halaman awal Pesan Uang
Berikut contoh rancangan user interface tampilan halaman awal menu pesan uang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN PESAN UANG
Buat Pesan Uang
Kembali Lihat Pesan Uang
Pesan Disetujui
Gambar 3.32 user interface halaman awal pesan uang
3.5.2.5.1.1 Halaman Buat Pesan Uang
Di dalam menu “Pesan Uang”, staf laboratorium dapat melakukan
proses menambah data pesan uang. Berikut ini contoh rancangan user interface halaman menambah data pesan uang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN PESAN UANG
No Pesan :
Edit Menambah Pesan Uang
Simpan No Pesan :Tanggal :
ID Pos::
Edit Pesan Uang Kembali
60
3.5.2.5.1.1.1 Halaman Edit Pesan Uang
Di dalam menu “Pesan Uang”, staf laboratorium dapat melakukan
proses mengedit data pesan uang. Berikut ini contoh rancangan user interface halaman mengedit data pesan uang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN PESAN UANG
No Pesan :
Edit Edit Pesan Uang
No Pesan :Tanggal :
ID Pos::
Update Pesan Uang Kembali
61
3.5.2.5.1.2 Halaman Menambah detail Pesan Uang
Di dalam menu “Pesan Uang”, staf laboratorium dapat melakukan
proses menambah detail pesan uang setelah melakukan proses menambah pesan uang terlebih dahulu. Berikut ini contoh rancangan user interface halaman menambah detail pesan uang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT Tambah Kembali
Menambah Detail Pesan Uang
No.Pesan ID Pos :
Status Pesan Uang
Nama Barang Status Pesan Brg: Jenis Bon: Jumlah(Rp) Harga Satuan(Rp): Harga Total(Rp): HALAMAN PESAN UANG
Unit;: Kegiatan::
Waktu Pelaksanaan:
Gambar 3.35 user interface halaman menambah detail pesan uang
62
Di dalam menu “Lihat Data Pesan Uang” terdapat tiga menu yang
dapat dipilih oleh staf yaitu lihata detail, cetak pesan luar, dan cetak pesan gudang. Berikut ini contoh user interface halaman menu “Lihat Data Pesan
Uang” :
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN PESAN UANG
Tabel
Kembali Lihat Data Pesan Uang
Keterangan
Lihat Detail |Cetak Pesan Luar|Cetak Pesan Gudang
Gambar 3.36 user interface halaman melihat detail pesan uang
63
Di dalam menu “Lihat Detail” terdapat dua menu yang dapat
dipilih oleh staf yaitu edit dan hapus data detail pesan uang. Berikut ini contoh user interface halaman menu “Lihat Detail” :
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN PESAN UANG
Tabel
Kembali Detail Pesan Uang
Batal Pesan Uang
Keterangan
Edit | Hapus
Gambar 3.37 user interface halaman data detail pesan uang
64
Di dalam menu “Lihat Detail” terdapat tiga menu yang dapat
dipilih oleh staf yaitu edit,hapus, dan batal pesan uang. Berikut ini contoh user interface halaman edit pada menu “Lihat Detail” :
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN Pesan Uang
Kembali Update Detail Pesan Uang
No Pesan : ID Pos : Unit ; Kegiatan Waktu Pelaksanaan Status Pesan Uang
Jenis Pesan Jenis Bon :
Update Data
Gambar 3.38 user interface halaman mengedit detail pesan uang 3.5.2.5.1.6 User Interface halaman Membatalkan Pesan Uang
Di dalam menu “Lihat Detail” terdapat tiga menu yang dapat
dipilih oleh staf yaitu edit,hapus dan batal pesan uang. Berikut ini contoh user interface halaman batal pesan uang :
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN PESAN UANG
No Pesan :
Edit Batal Pesan Uang
OK Kembali
65
3.5.2.6 User Interface halaman Transaksi Pembelian
3.5.2.6.1 User Interface halaman awal Transaksi Pembelian
Di dalam menu”Transaksi Pembelian” staf laboratorium dapat melakukan dua proses menambah dan mengupdate data transaksi pembelian. Berikut contoh tampilan user interface halaman awal pada menu “Transaksi
Pembelian”:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN TRANSAKSI PEMBELIAN
Buat Transaksi Pembelian
Kembali Menu Transaksi Pembelian
Update Transaksi Pembelian
66
3.5.2.6.2 User Interface halaman Menambah Transaksi Pembelian
Di dalam menu “Transaksi Pembelian” staf dapat melakukan proses menambah data transaksi pembelian. Berikut contoh user interface halaman menambah data transaksi pembelian:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT Kode Transaksi :
Menambah Transaksi Pembelian
No Pesan : No Pesan : ID Staf
Simpan Kembali
HALAMAN TRANSAKSI PEMBELIAN
Tanggal :
Lihat Pesan Uang
Gambar 3.41 user interface halaman menambah transaksi pembelian
3.5.2.6.3 User Interface halaman Update Transaksi Pembelian
Di dalam menu”Transaksi Pembelian”, staf laboratorium dapat melakukan proses mengedit data transaksi pembelian. Berikut contoh tampilan user interface mengedit data transaksi pembelian yang dapat dilakukan di dalam menu “Update Transaksi Pembelian”:
67
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
HALAMAN TRANSAKSI PEMBELIAN
Tabel
Kembali Lihat Data Transaksi Pembelian
Keterangan
Update Sisa Uang|Lihat Detail |Cetak Transaksi
Gambar 3.42 user interface halaman update transaksi pembelian 3.5.2.6.4 User Interface halaman Update Sisa Uang
Di dalam menu “Transaksi Pembelian”, staf laboratorium dapat melakukan proses mengedit sisa uang. Berikut contoh tampilan user interface halaman mengedit sisa uang yang dapat dilakukan di dalam menu ”update
transaksi pembelian”:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT No : Kembali Update Transaksi Uang
HALAMAN TRANSAKSI PEMBELIAN
Update Data
68
3.5.2.6.5 User Interface halaman Lihat Detail Transaksi Pembelian
Di dalam menu “Transaksi Pembelian”, staf laboratorium dapat melakukan proses mengedit detail transaksi pembelian. Berikut ini contoh tampilan user interface halaman mengedit detail transaksi pembelian yang
terdapat dalam menu “Update Transaksi Pembelian”:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT Tabel Kembali Lihat Detail Transaksi Pembelian
Keterangan
Edit |Hapus HALAMAN TRANSAKSI PEMBELIAN
69
3.5.2.6.5.1 User Interface halaman Edit Detail Transaksi Pembelian
Berikut contoh tampilan user interface halaman mengedit detail transaksi pembelian yang terdapat di dalam menu “Update Transaksi
Pembelian”:
Header and Logo
HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT Kode Transaksi : Kembali Update Transaksi Uang
HALAMAN TRANSAKSI PEMBELIAN
Update Data Nama Brg: Jum. Barang : Harga Pesan(Rp) : Harga Beli(Rp) : No.Nota :
Gambar 3.45 user interface halaman mengedit detail transaksi pembelian 3.5.2.6 Halaman Utama Cetak Laporan
Di dalam menu “Cetak Laporan”, staf laboratorium dapat melakukan
proses mencetak laporan yang terdiri dari tiga jenis laporan yaitu “Cetak
RAB”,”Cetak Realisasi RAB”, dan “Cetak LPJ”. Berikut ini contoh tampilan
user interface halaman awal menu”Cetak Laporan”:: Header and Logo
FOOTER
CETAK RAB HALAMAN CETAK LAPORAN
CETAK REALISASI RAB
CETAK LPJ CETAK LPJ Kembali HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
70
3.5.2.6.1 User Interface halaman Cetak RAB
3.5.2.6.1.1 User Interface halaman awal Cetak RAB
Di dalam menu “Cetak Laporan”, staf laboratorium dapat melakukan proses mencetak laporan rab. Berikut contoh tampilan user interface halaman awal pada menu “cetak rab”:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT CETAK RAB HALAMAN CETAK LAPORAN
ID Pos : ID Pos :
OK ID Pos :
Tahun:
Gambar 3.47 user interface halaman awal data cetak rab 3.5.2.6.1.2 User Interface halaman Form Cetak RAB
Di dalam menu “Cetak Laporan”, staf laboratorium dapat melakukan proses mencetak laporan rab. Berikut contoh tampilan user interface halaman form cetak rab:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
RINCIAN ANGGARAN BELANJA PERIODE JANUARI 2015 – DESEMBER 2015 UNIT: LAB KOMPUTER TEKNIK INFORMATIKA(1) – LAB BASIS DATA DAN PERANGKAT LUNAK
PROGRAM STUDI : TEKNIK INFORMATIKA PENANGGUNG JAWAB : JB.BUDI DARMAWAN, S.T., M.Sc HALAMAN CETAK LAPORAN
CETAK RAB Pos Eksploitasi
TABEL DATA
Jumlah
71
3.5.2.6.2 User interface halaman Cetak Realisasi RAB
3.5.2.6.2.1 User Interface halaman awal Cetak Realisasi RAB
Di dalam menu “Cetak Laporan”, staf laboratorium dapat
melakukan proses mencetak laporan realisasi rab. Berikut contoh tampilan user interface halaman awal pada menu “cetak realisasi rab”:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
CETAK REALISASI RAB HALAMAN CETAK LAPORAN
ID Pos : ID Pos :
OK ID Pos :
Tahun:
Gambar 3.49 user interface halaman awal data cetak realisasi rab 3.5.2.6.2.2 User Interface halaman form Cetak Realisasi RAB
Di dalam menu “Cetak Laporan”, staf laboratorium dapat melakukan proses mencetak laporan realisasi rab. Berikut contoh tampilan user interface halaman form cetak realisasi rab:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
RINCIAN ANGGARAN BELANJA PERIODE JANUARI 2015 – DESEMBER 2015 UNIT: LAB KOMPUTER TEKNIK INFORMATIKA(1) – LAB BASIS DATA DAN PERANGKAT LUNAK
PROGRAM STUDI : TEKNIK INFORMATIKA PENANGGUNG JAWAB : JB.BUDI DARMAWAN, S.T., M.Sc HALAMAN CETAK LAPORAN
CETAK RAB Pos Eksploitasi
TABEL DATA
72
Gambar 3.50 user interface halaman form cetak realisasi rab 3.5.2.6.3 User Interface halaman Cetak form Pesan Uang
3.5.2.6.3.1 User Interface halaman Cetak form Pesan Uang
Di dalam menu “Pesan Uang”, staf laboratorium dapat melakukan proses mencetak form pesan uang. Berikut contoh tampilan user interface halaman form pesan uang:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA HALAMAN CETAK LAPORAN
CETAK PESAN Tanggal
TABEL DATA
Yogyakarta,... Pemesan: KA PRODI/KA UNIT
Gambar 3.51 user interface halaman cetak form pesan uang 3.5.2.6.4 User Interface halaman Cetak form Transaksi
3.5.2.6.4.1 User Interface halaman Cetak form Transaksi
Di dalam menu “Pesan Uang”, staf laboratorium dapat melakukan proses mencetak form transaksi pembelian. Berikut contoh tampilan user interface halaman form transaksi pembelian:
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS SANATA DHARMA HALAMAN CETAK LAPORAN
CETAK TRANSAKSI Tanggal
TABEL DATA
Yogyakarta,... Jumlah Uang:
Sisa Uang:
73
Gambar 3.52 user interface halaman cetak form transaksi pembelian 3.5.2.6.5 User Interface halaman awalCetak LPJ
Di dalam menu “Cetak Laporan”, staf laboratorium dapat melakukan
proses mencetak laporan LPJ. Berikut contoh tampilan user interface
halaman awal pada menu “Cetak LPJ”:
Header and Logo
FOOTER
CETAK LPJ HALAMAN CETAK LAPORAN
Kembali Keterangan CETAK LPJ No.Pesan ID Pos Tgl HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT
74
3.5.2.6.5.1 User Interface halaman form cetak LPJ
Di dalam menu “Cetak Laporan”, staf laboratorium dapat melakukan proses mencetak laporan LPJ. Berikut contoh tampilan user interface halaman form cetak LPJ :
LAPORAN PERTANGGUNGJAWABAN LABORATORIUM BASIS DATA & PERANGKAT LUNAK
FAKULTAS TEKNIK UNIV.SANATA DHARMA BULAN TAHUN
PEMASUKAN
Total
No Sumber Jumlah Nomor
Rp. Pengeluaran
A.POS BHP B.POS BIAYA PERAWATAN C.KEGIATAN PENGEMBANGAN
TGL NAMA BARANG Jumlah Harga Satuan Harga Total No.Nota
Total Kegiatan Pengembangan Rp.
JUMLAH TOTAL Rp.
SALDO: Rp -
Gambar 3.54 user interface halaman form cetak laporan LPJ 3.5.2.6.6 User Interface halaman Menu Staf Laboran
75
Header and Logo
FOOTER HOME DATA POS BARANG R A B PESAN UANG TRANSAKSI PEMBELIAN CETAK LAPORAN MENU STAF LOGOUT DATA STAF HALAMAN MENU STAF
KEMBALI
ID Staf Nama Staf Password Tahun Keterangan Edit | Hapus
Gambar 3.55 user interface halaman staf laboran 3.5.3 Perancangan user interface Laboran
3.5.3.1 User Interface halaman Home Laboran
HALAMAN UTAMA
Header and Logo
FOOTER HOME R A B DATA PEMBELIAN CETAK LAPORAN MENU KALAB LOGOUT
Gambar 3.56 user interface halaman utama laboran 3.5.3.2 User Interface halaman RABLaboran
76
Di dalam menu “RAB”, laboran dapat melakukan proses mencari data rab. Berikut contoh tampilan user interface halaman awal mencari data rab:
Header and Logo
FOOTER HOME R A B DATA PEMBELIAN CETAK LAPORAN MENU KALAB LOGOUT Halaman RAB CARI RAB ID Pos Tahun Pos OK Kembali
Gambar 3.57 user interface halaman mencari data rab 3.5.3.2.2 User Interface halaman tampilan data RAB padaLaboran
Di dalam menu “RAB”, laboran dapat melakukan proses mencari data RAB dan melihatnya. Berikut contoh tampilan user interface halaman tampilan data RAB:
Header and Logo
FOOTER HOME R A B DATA PEMBELIAN CETAK LAPORAN MENU KALAB LOGOUT Halaman RAB DATA R A B NAMA POS TAHUN POS TABEL DATA Kembali
Gambar 3.58 user interface halaman tampilan data rab 3.5.3.3 User Interface halaman Data Pembelian padaLaboran
77
Di dalam menu “Data Pembelian”, laboran dapat melakukan proses mencari data pembelian dan melihatnya. Berikut contoh tampilan user interface halaman tampilan data pembelian:
Header and Logo
FOOTER Halaman Pembelian DATA PEMBELIAN TABEL DATA Kembali HOME R A B DATA PEMBELIAN CETAK LAPORAN MENU KALAB LOGOUT
Gambar 3.59 user interface halaman tampilan data pembelian 3.5.3.4 User Interface halaman menu Cetak Laporan
Di dalam menu “Cetak Laporan”, laboran dapat melakukan proses
mencetak laporan yang terdiri dari tiga jenis laporan yaitu cetak rab,cetak realisasi rab, dan cetak lpj. Berikut contoh tampilan user interfae halaman
menu”Cetak Laporan”:
Header and Logo
FOOTER
CETAK RAB HALAMAN CETAK LAPORAN
CETAK REALISASI RAB CETAK LPJ HOME R A B DATA PEMBELIAN