49
Tabel 3.27 ini memiliki atribut data detail pembelian yang akan diinputkan ke sistem. Tabel ini memiliki atribut kode transaksi
pembelian yang mengambil nilai dari tabel transaksi pembelian untuk menginputkan data detail pembelian berdasarkan kode
transaksi pembelian sebelumnya. Dan memiliki idPosBarang yang mengambil nilai dari tabel pos barang untuk memilih data pos
barang yang akan digunakan saat melakukan proses pembelian.
Tabel 3.29 tabel detail pembelian Nama Field
Tipe Keterangan
kodeTransaksiPembelian number
FK untuk menghubungkan ke tabel transaksi
pembelian
idPosBarang number
FK untuk menghubungkan ke tabel detail pos barang
jumlah number
Field untuk jumlah harga pembelian
hrgPesan number
Field untuk harga pesan barang dari rab
hrgBeli Number
Field untuk harga beli barang dari toko
no_nota varchar220 Field untuk no nota per
barang
9. Tabel Staf
Tabel 3.28 ini berisi atribut data staf yang akan diinputkan ke sistem.
Tabel 3.30 tabel staf Nama Field
Tipe Keterangan
idStaf number
PK untuk table staf pass
number Field untuk password
staf varchar2100 Field untuk staf
tahun number
Field untuk tahun
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
“Data Pos” dipilih:
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
3.5.2.2.2. User Interface halaman Mengedit 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 : JumlahRp:
Sisa UangRp:
Gambar 3.23 user interface halaman menambah data pos
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 SatuanRp
Ket Edit | Hapus
HALAMAN BARANG TABEL DATA BARANG
Gambar 3.25 user interface halaman utama 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 SatuanRp
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 SatuanRp
Gambar 3.27 user interface halaman mengedit data barang
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
Gambar 3.29 user interface halaman tampilan data rab
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 :
JumlahRp Harga SatuanRp:
UsdRp:
Gambar 3.30 user interface halaman menambah data rab
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 :
JumlahRp Harga SatuanRp:
UsdRp:
Gambar 3.31 user interface halaman mengedit data rab
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
Gambar 3.33 user interface halaman menambah pesan uang
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
Gambar 3.34 user interface halaman mengedit pesan uang
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:
JumlahRp Harga SatuanRp:
Harga TotalRp: HALAMAN PESAN UANG
Unit;: Kegiatan::
Waktu Pelaksanaan:
Gambar 3.35 user interface halaman menambah detail pesan uang
3.5.2.5.1.3 Halaman Lihat data 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
3.5.2.5.1.4 User Interface halaman Lihat 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
3.5.2.5.1.5 User Interface halaman Mengedit 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
Gambar 3.39 user interface halaman membatalkan pesan uang
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
Gambar 3.40 user interface halaman awal 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
Gambar 3.43 user interface halaman update sisa uang data transaksi pembelian
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
Gambar 3.44 user interface halaman lihat detail 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 PesanRp :
Harga BeliRp : 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
Gambar 3.46 user interface halaman utama cetak laporan
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 INFORMATIKA1 – 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
Gambar 3.48 user interface halaman form cetak rab
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 INFORMATIKA1 – 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
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 PRODIKA 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
Gambar 3.53 user interface halaman awal cetak laporan LPJ
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 RAB Laboran 3.5.3.2.1 User Interface halaman Cari RAB Laboran
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 pada Laboran 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 pada Laboran
77
Di dal am 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 CETAK LAPORAN
MENU KALAB
LOGOUT
CETAK LPJ Kembali
Gambar 3.60 user interface halaman menu cetak laporan
3.5.3.4.1 User Interface halaman Cetak RAB
78
3.5.3.4.1.1 User Interface halaman Cari Cetak RAB Di dalam menu “Cetak Laporan”, laboran dapat melakukan proses
mencetak laporan rab. Berikut contoh tampilan user interface halaman awal pada menu “cetak rab”:
Header and Logo
FOOTER
CETAK RAB HALAMAN CETAK LAPORAN
ID Pos : ID Pos :
OK ID Pos :
Tahun Pos : HOME
R A B DATA PEMBELIAN
CETAK LAPORAN MENU KALAB
LOGOUT
Gambar 3.61 user interface halaman awal cetak rab
3.5.3.4.1.2 User Interface halaman tampilan data Cetak RAB pada laboran Di dalam menu “Cetak Laporan”, laboran laboratorium dapat
melakukan proses mencetak laporan rab. Berikut contoh tampilan user interface
halaman data cetak rab:
Header and Logo
FOOTER CETAK RAB
HALAMAN CETAK LAPORAN
TABEL RAB
CETAK RAB HOME
R A B DATA PEMBELIAN
CETAK LAPORAN MENU KALAB
LOGOUT
Gambar 3.62 user interface halaman tampilan data cetak rab
3.5.3.4.1.3 Halaman Form Cetak RAB
79
Di dalam menu “Cetak Laporan”, laboran laboratorium dapat melakukan proses mencetak laporan rab. Berikut contoh tampilan user
interface halaman form cetak rab:
Header and Logo
FOOTER
RINCIAN ANGGARAN BELANJA PERIODE JANUARI 2015 – DESEMBER 2015
UNIT: LAB KOMPUTER TEKNIK INFORMATIKA1 – 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
HOME R A B
DATA PEMBELIAN CETAK LAPORAN
MENU KALAB
LOGOUT
Gambar 3.63 user interface halaman form cetak rab
3.5.3.4.4 User Interface halaman Cetak LPJ Di dalam menu “Cetak Laporan”, laborandapat 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.64 user interface halaman form cetak lpj
80
3.5.3.4.5 User Interface halaman Menu Laboran
Header and Logo
FOOTER
DATA STAF HALAMAN MENU STAF
KEMBALI ID Staf
Nama Staf Password
Tahun Keterangan
Edit | Hapus HOME
R A B DATA PEMBELIAN
CETAK LAPORAN MENU KALAB
LOGOUT
Gambar 3.65 user interface halaman menu laboran
81
BAB IV IMPLEMENTASI SISTEM
4.1 Analisa Sistem
Sistem ini dibuat dengan berdasarkan pada kondisi di laboratorium basis data Universitas Sanata Dharma Yogyakarta. Dimana pada laboratorium
basis data ini belum memiliki sistem terkomputerisasi untuk mengelola anggaran belanja terkhususnya pada pos eksploitasi. Staf laboratorium
biasanya mengelola anggaran belanja secara manual dengan menggunakan excel. Staf laboratorium lebih memilih menggunakan excel karena dapat
melakukan perhitungan angka dengan mudah. Tetapi kekurang jika menggunakan excel adalah data anggaran yang banyak dan terpisah satu
sama lain menyebabkan staf laboratorium kesulitan dalam mengakses dan mengelola data anggaran, maka Sistem Pengelolaan Anggaran Belanja Pos
Eksploitasi dibuat dengan menggunakan perhitungan otomatis agar staf laboratorium dapat dengan mudah mengelola data anggaran. Sistem ini juga
dibuat dengan tampilan interface yang sederhana untuk memudahkan staf laboratorium dalam mengoperasikan sistem ini.
4.2 Implementasi Sistem
4.2.1 Implentasi Sistem untuk Staf Laboran
4.2.1.1 Login
Tampilan Login adalah tampilan pertama saat staf laboran atau kalab mengakses sistem ini. Pada halaman ini staf maupun kalab
memasukan username dan password .
Gambar 4.1 Halaman Login
