BAB IV HASIL PERANCANGAN SISTEM
4.1 Rancangan Layar Untuk Halaman Pengunjung 4.1.1 Tampilan Halaman Utama Pengunjung
Gambar 4.1 Tampilan Halaman Utama
Pada halaman utama (BERANDA) pengunjung ini terdapat beberapa menu yang dapat dipilih oleh pengunjung diantaranya ada menu beranda, prosedur, tentang, dan penggunaan dana serta terdapat kolom login untuk admin dapat mengelola anggaran Bantuan Operasional Sekolah.
72 http://digilib.mercubuana.ac.id/z
73
4.1.2 Tampilan Menu Prosedur untuk Pengunjung
Gambar 4.2 Tampilan Menu Prosedur
Didalam halaman menu PROSEDUR terdapat penjelasan singkat tentang petunjuk teknis penggunaan anggaran Dana Bantuan Operasional Sekolah. Petunjuk teknis itu berisi tentang apa apa saja yang diperbolehkan dan tidak diperbolehkan dalam penggunaan dana yang diberikan oleh pusat.
73 http://digilib.mercubuana.ac.id/z
74
4.1.3 Tampilan Menu Tentang untuk Pengunjung
Gambar 4.3 Tampilan Menu Tentang
Pada halaman menu TENTANG itu berisi identitas sekolah dimana terdapat nama sekolah, alamat sekolah, NISN sekolah, nama kepala sekolah dan lain lain.
74 http://digilib.mercubuana.ac.id/z
75
4.1.4 Tampilan Menu Penggunaan Dana untuk Pengunjung
Gambar 4.4 Tampilan Menu Penggunaan Dana
Pada halaman menu PENGGUNAAN DANA berisi informasi mengenai rekapitulasi per komponen penggunaan dana Bantuan Operasional Sekolah ditahun terakhir.
75 http://digilib.mercubuana.ac.id/z
76
4.2 Rancangan Layar Untuk Admin 4.2.1 Tampilan Login Admin
Gambar 4.5 Tampilan Login Admin
Untuk kolom login admin ini berada disetiap halaman pengunjung.Kolom Login Admin ini hanya diperuntukan untuk operator yang memiliki wewenang untuk dapat mengelola laporan pemasukan dan pengeluaran anggaran serta memanipulasi data yang terdapat dihalam pengunjung.
76 http://digilib.mercubuana.ac.id/z
77
4.2.2 Tampilan Menu Utama Admin Setelah Login
Gambar 4.6 Tampilan Menu Utama Admin
Halaman UTAMA ADMIN ini akan tampil setelah admin login terlebih dahulu. Didalam halaman utama admin terdapat beberapa button menu yang dapat dipilih sesuai kebutuhan.Diantaranya menu Input Pemasukan, Input Pengeluaran, Laporan, Prosedur, Identitas Sekolah, dan Report Penggunaan Dana Tahun Terakhir.Disebelah kanan atas juga terdapat menu logout.
77 http://digilib.mercubuana.ac.id/z
78
4.2.3 Tampilan Menu Input Pemasukan
Gambar 4.7 Tampilan Menu Input Pemasukan
Pada halamann menu INPUT PEMASUKAN terdapat 5 kolom yang harus diisi oleh operator/admin.Kolom-kolom tersebut yaitu tanggal, nomor kode, nomor bukti, uraian dan anggaran. Data pada menu input pemasukan juga dapat diedit atau dihapus sesuai dengan kebutuhan. Untuk dapat mengedit atau menghapus data operator harus mencetang terlebih dahulu data yang ingin diedit atau dihapus pada kolom aksi.
78 http://digilib.mercubuana.ac.id/z
79
4.2.4 Tampilan Menu Input Pengeluaran
Gambar 4.8 Tampilan Menu Input Pengeluaran
Pada halaman menu INPUT PENGELUARAN terdapat 6 kolom yang harus diisi oleh operator/admin. Kolom-kolom tersebut yaitu tanggal, nomor kode, nomor bukti, komponen pembiayaan, item dan anggaran. Pada kolom komponen pembiayaan dan item sudah terdapat pilihan pembiayaan. Data pada menu input pengeluaran juga dapat diedit atau dihapus sesuai dengan kebutuhan. Untuk dapat mengedit atau menghapus data operator harus mencetang terlebih dahulu data yang ingin diedit atau dihapus pada kolom aksi.
79 http://digilib.mercubuana.ac.id/z
80
4.2.5 Tampilan Menu Laporan
Gambar 4.9 Tampilan Menu Laporan
Pada halaman menu LAPORAN terdapat 2 kolom yang harus diisi untuk memilih laporan jenis apa yang ingin dilihat. Pada kolom jenis laporan terdapat 4 pilihan jenis laporan diantaranya laporan K4, K5, K7 dan K7a. Kemudian ada tanggal yang harus diisi juga sesuai dengan kebutuhan staff TU.
80 http://digilib.mercubuana.ac.id/z
81
4.2.6 Tampilan Menu Laporan K4
Gambar 4.10 Tampilan Menu Laporan K4
Gambar 4. 11 Tampilan Cetak Laporan K-4 Tampilan diatas merupakan tampilan LAPORAN K4 yaitu merupakan laporan Buku Pembantu Kas. Terdapat nama sekolah dan alamat sekolah serta beberapa kolom hasil pencatatan sebelumnya. Kolom tersebut diantaranya adalah Tanggal, No.Kode, No.Bukti, Uraian, Penerimaan (Debit), Pengeluaran (Kredit) dan Saldo. 81 http://digilib.mercubuana.ac.id/z
82
4.2.7 Tampilan Menu Laporan K5
Gambar 4. 12 Tampilan Menu Laporan K5
Gambar 4. 13 Tampilan Cetak Laporan K-5 Tampilan diatas merupakan tampilan LAPORAN K5 yaitu merupakan laporan Buku Pembantu Bank. Terdapat nama sekolah dan alamat sekolah serta beberapa kolom hasil pencatatan sebelumnya. Kolom tersebut diantaranya adalah Tanggal, No.Kode, No.Bukti, Uraian, Penerimaan (Debit), Pengeluaran (Kredit) dan Saldo.
82 http://digilib.mercubuana.ac.id/z
83
4.2.8 Tampilan Menu Laporan K7
Gambar 4. 14 Tampilan Menu Laporan K7
Gambar 4. 15 Tampilan Cetak Laporan K-5 Tampilan diatas merupakan tampilan LAPORAN K7 yaitu merupakan laporan Realisasi Penggunaan Dana Tiap Jenis Komponen. Terdapat nama sekolah dan alamat sekolah serta banyak kolom dari hasil pencatatan sebelumnya. Kolom tersebut diantaranya adalah No.Kode, Uraian Kegiatan, Jumlah, Penggunaan Danaper Sumber Dana. 83 http://digilib.mercubuana.ac.id/z
84
4.2.9 Tampilan Menu Laporan K7a
Gambar 4.16 Tampilan Menu Laporan K7a
Gambar 4. 17 Tampilan Cetak Laporan K-5 Tampilan diatas merupakan tampilan LAPORAN K7a yaitu merupakan laporan Rekapitulasi Realisasi Penggunaan Dana BOS. Terdapat nama sekolah dan alamat sekolah serta banyak kolom dari hasil pencatatan sebelumnya. Kolom tersebut diantaranya adalah No.Urut, Program/Kegiatan, serta 13 kolom yang sesuai dengan komponen komponen yang diperbolehkan dalam Juknis BOS 2017.
84 http://digilib.mercubuana.ac.id/z
85
4.2.10 Tampilan Menu Admin Prosedur
Gambar 4.18 Tampilan Menu Admin Prosedur
Pada halaman menu ADMIN PROSEDUR ini admin bisa menambahkan atau mengurangi informasi mengenai Prosedur Penggunaan Dana Bantuan Operasional Sekolah yang ditampilkan di halaman utama sistem. Terdapat link Edit yang dapat klik.
85 http://digilib.mercubuana.ac.id/z
86
Gambar 4.19 Tampilan Menu Admin Prosedur - Edit
Tampilan diatas merupakan tampilan setelah admin setelah mengklik link Edit. Setelah Staff TU selesai mengedit maka dapat mengklik link Simpan.
86 http://digilib.mercubuana.ac.id/z
87
4.2.11 Tampilan Menu Admin Identitas Sekolah
Gambar 4.20 Tampilan Menu Admin Identitas Sekolah
Pada halaman menu ADMIN IDENTITAS SEKOLAH ini admin bisa menambahkan atau mengurangi informasi mengenai Identitas Sekolah yang ditampilkan pada laporan dan di halaman utama sistem. Terdapat link Edit yang dapat klik.
87 http://digilib.mercubuana.ac.id/z
88
Gambar 4.21 Tampilan Menu Admin Identitas Sekolah – Edit
Tampilan diatas merupakan tampilan setelah admin setelah mengklik link Edit. Setelah Staff TU selesai mengedit maka dapat mengklik link Simpan.
88 http://digilib.mercubuana.ac.id/z
89
4.2.12 Tampilan Menu Admin Report Penggunaan Dana Tahun Terakhir
Gambar 4.22 Tampilan Menu Admin Report Penggunaan Dana
Pada halaman menu ADMIN REPORT PENGGUNAAN DANA ini admin bisa mengganti informasi laporan mengenai Realisasi Penggunaan Dana BOS Tiap Jenis Komponen yang hasilnya ditampilkan pada halaman utama sistem. Terdapat link Edit yang dapat klik.
89 http://digilib.mercubuana.ac.id/z
90
Gambar 4.23 Tampilan Menu Admin Report Penggunaan Dana - Edit
Tampilan diatas merupakan tampilan setelah admin setelah mengklik link Edit. Setelah Staff TU selesai mengedit maka dapat mengklik link Simpan.
90 http://digilib.mercubuana.ac.id/z
