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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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