24 BAB IV DESKRIPSI PEKERJAAN 4 Deskripsi kerja praktik ini, menggambarkan bagaimana penulis merancang sistem yang akan dibuat untuk perusahaan atau organisasi. Sebelum memulai perancangan, tahap awal yang akan dilakukan adalah dengan melakukan pengumpulan data, diperoleh dari informasi yang diberikan oleh pihak kebendaharaan. Kemudian menganalisis kebutuhan informasi dengan cara wawancara, mengamati kinerja yang berjalan, serat mempelajari dokumen fisik yang ada sesuai kebutuhan. Setelah tahap analisis selesai, kemudian dilanjutkan ke tahap perancangan sistem dan desain sistem, perancangan tabel database, serta membuat interface. 4.1 Pengumpulan Data Pengumpulan data yang digunakan sebagai bahan dalam penyusunan laporan dan aplikasi yang akan dibuat dilakukan dengan mempelajari data dan informasi yang didapat. Dari pengumpulan data ini, untuk mendapatkan fakta-fakta kebenaran uraian materi untuk pembahasan. Berikut ini adalah beberapa metode pengumpulan data yang dipakai penulis. 1. Observasi Observasi dilakukan dengan melihat langsung aktifitas yang berjalan pada sistem pembayaran. Pengumpulan data dengan cara observasi ini dilakukan untuk mendapatkan informasi dan data yang berhubungan dengan permasalahan yang terjadi di sistem pembayaran.
25 2. Wawancara Wawancara dilakukan kepeda pihak-pihak yang bersangkutan seperti kebendaharaan, staff TU dan Kepala BK. Wawancara ini bertujuan untuk mendapatkan informasi-informasi yang diperlukan, nantinya dari informasi tersebut didapatkan data yang dapat dibangun sebuah sistem yang diharapakan mampu menangani permasalahan yang dihadapi dalam proses pencatatan pembayaran spp dan iuran siswa. 3. Studi Kepustakaan Tinjauan pustaka dilakukan untuk mengumpulkan dan membandingkan beberapa hasil penelitihan kerja praktik sebelumnya atau sejenisnya, kemujdian mempelajari untuk memperoleh perbandingan kekurangan dan kelebihan dari setiap penelitihan. 4.2 Analisis 4.2.1 Permasalahan SPP Madrasah Aliyah Negeri Trenggalek merupakan institusi pendidikan yang bernaung dibawah Kementerian Agama RI yang memiliki kurang lebih 1099 orang siswa yang terdiri 318 siswa laki-laki dan 781 siswa perempuan yang dimasukkan dalam 30 ruang rombongan belajar dengan 3 jurusan yaitu IPA, IPS, dan Agama. Banyaknya siswa yang ada di MAN Trenggalek, membuat pihak sekolah membutuhankan suatu pengelolahan administratif dengan menyediakan data-data guna untuk melakukan proses pencatatan pembayaran spp dan iuran siswa. memiliki peran penting dalam menunjang kegiatan pembelajaran dan oprasional sekolah, sehingga tertatanya pencatatan menjadi poin kunci untuk keberlangsungan pembayaran. Pencatatan pembayaran yang dilakukan oleh bagian
26 kebendaharaan masih dicatat dalam buku besar pembayaran sehingga membutuhkan banyak kertas yang akan menimbulkan penumpukan berkas atau kemungkinan hilang dan rusak. Pencatatan pembayaran spp dan iuran siswa yang saat ini sudah dilakukan oleh pihak sekolah bagian kebendaharaan masih menemui kendala, yaitu mengenai banyaknya waktu yang terbuang hanya untuk merekap data siswa yang belum membayar atau menunggak, selain itu seluruh pencatatan hanya ditulis secara manual, penggunaan TI semisal Microsoft. Excel masih sebatas pelaporan ke pimpinan. 4.2.2 Document Flow SPP Proses aktifitas pencatatan pembayaran yang terjadi saat ini oleh bagian kebendaharaan dimulai dari siswa mengantri diloket pembayaran, kemudian memberikan kartu pembayaran dan uang kepada bendahara. Kemudian bendahara mencatat pembayaran ke dalam kartu pembayaran serta buku besar pembayaran, jika siswa melakukan pembayaran berupa iuran atau sejenisnya maka akan diberikannya kuintansi pembayaran. Berikut document flow pencatatan pembayaran spp dan iuran siswa;
27 Pencatatan SPP Siswa Bendahara Kepala Sekolah Mulai Menyerahkan Uang dan Kartu Mencatat Masuk Kartu SPP Buku Besar Kartu SPP telah diisi Membuat Laporan Laporan tunggakan siswa Per Bulan Laporan Keuangan Per Bulan Laporan tunggakan siswa Per Bulan Laporan Keuangan Per Bulan Selesai Gambar 4.1Document Flow 4.2.3 Solusi Solusi yang dapat dilakukan dalam menangani permasalahan yang terjadi pada aktifitas pencatatan pembayaran spp dan iuran siswa yaitu dengan membuat sebuah sistem informasi pencatatan pembayaran spp dan iuran siswa yang dapat dan mampu mengolah data-data pegawai, kelas serta data-data pencatatan pembayaran spp dan iuran siswa kususnya yang mampu mengeluarkan output
28 berupa laporan tunggakan siswa beserta laporan keungan siswa yang ditujukan kepada pemangku kepentingan. Sistem ini dapat membantu mengurangi kesalahan dalam hal pencatatan dan pembayaran. 4.2.4 Manfaat Manfaat yang didapatkan dari solusi pembuatan sistem informasi pencatatan pembayaran spp dan iuran siswa sebagai berikut: 1. Bendahara dapat dengan mudah, cepat dan tepat untuk melakukan rekapan tunggakan dan keuangan. 2. Kesalahan dalam pencatatan dan penyimpanan pembayaran dapat dikurangi seperti rekapan data. 3. Bendahara dengan cepat menyajiakan laporan tunggakan dan keuangan. 4.3 Perancangan Kebutuhan sistem oleh Madrasah Aliyah Negeri Trenggalek kususnya kebendaharaan ialah sebuah sistem yang dapat menangani dan memenuhi kebutuhan dalam proses pencatatan pembayaran spp dan iuran siswa secara terkomputerisasi sehingga dalam mencari kebutuhan informasi dapat dengan cepat dan akurat. Sistem ini diharapkan dapat membantu kinerja kebendaharaan dalam proses: 1. Pencatatan pembayaran meliputi pencatatan pembayaran spp, iuran siswa, daftar ulang serta memberikan laporan hasil tunggakan siswa. 2. Pembuatan pelaporan tunggakan siswa, keuangan yang ditujukan kepada pimpinan.
29 4.3.1 Diagram IPO Diagram IPO ini memiliki data input awal yaitu data siswa, data kelas, data jurusan data tingkat kelas, data anggota kelas, data jenis pembayaran, data pembayaran. Data tersebut akan dijadikan inputan untuk diproses dalam sebuah transaksi oleh pihak bendahara. Data siswa akan digunakan sebagai data utama dalam transaksi. Data jurusan akan digunakan untuk data masukan data tingkat kelas. Data pembayaran akan digunakan untuk data masukan data jenis pembayaran. data siswa, Data jenis pembayaran, dan data tingkat kelas akan digunakan untuk proses transaksi pembayaran. Diagram IPO INPUT PROSES OUTPUT Data Siswa Data Jurusan Data Tingkat Kelas Pembuatan Transaksi Data Transaksi Form Kelas Data Transaksi Pembuatan Laporan Laporan Perbulan Gambar 4.2 Bagan Berjenjang
30 4.3.2 Kebutuhan Fungsional Kebutuhan fungsional merupakan suatu layanan sistem yang harus disediakan dan bagaimana sistem berinteraksi dengan pengguna sistem, seperti pengguna dapat melakukan apad saja didalam sistem kebutuhan fungsionalitas dapat dilihat pada tabel 4.1 berikut: Tabel 4.1 Kebutuhan Fungsional No Pengguna Kebutuhan Pengguna Kebutuhan fungsionalitas 1. Staff TU Data siswa Pengelolahan master siswa Data jurusan Pengelolahan master jurusan Data tingkat kelas Pengelolahan master tingkat kelas Data kelas Pengelolahan master kelas 2. Bendahara Data pembayaran Pengelolahan master pembayaran Data Jenis Pengelolahan master jenis pembayaran Data Siswa, Data kelas, data jenis pembayaran Pengelolahan Transaksi Data Transaksi Pembuatan Laporan tunggakan perbulan, laporan lunas perbulan 3. Kepala Sekolah Data Laporan Laporan perbulan A. Fungsi Login Kebutuhan fungsi login untuk dapat menggunakan sistem informasi pembayaran spp dapat dilihat pada Tabel 4.2 sebagai berikut:
31 Tabel 4.2 Fungsi Login Nama Fungsi Fungsi Login Pengguna Staff TU, Bendahara, Kepala Sekolah Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk melakukan login ke aplikasi Kondisi Awal User dan Password Alur Normal Aksi Pengguna Respon sistem Memasukkan user dan password 1. Pengguna Sistem melakukan memasukan user pengecekan terhadap dan password kesesuaian user dengan password. Jika login berhasil maka sistem akan menampilkan halaman beranda awal, jika tidak sesuai maka akan menampilkan pesan login gagal Kondisi Akhir Fungsi ini untuk melakukan login B. Fungsi Pengolahan Master Siswa Kebutuhan fungsi pengolahan master siswa untuk dapat melakukan pengelolahan data siswa dapat dilihat pada tabel 4.3 sebagai berikut: Tabel 4.3 Fungsi Master Siswa Nama Fungsi Fungsi pengelolahan master siswa Pengguna Staff TU Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data master siswa untuk disimpan, diubah maupun dihapus. Kondisi Awal Data siswa Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data siswa 1. Pengguna Sistem akan memilih menu menampilkan master siswa halaman master siswa
32 Nama Fungsi Kondisi Akhir Fungsi pengelolahan master siswa 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang hapus dipillh 3. Pengguna Sistem akan memasukkan data siswa yang melakukan penambahan data ingin ditambah, siswa ke database, diubah atau mengubah data siswa dihapus ke database atau menghapus data siswa yang dipilih dari database Fungsi ini untuk mengelola data siswa C. Fungsi Pengolahan Master Jurusan Kebutuhan fungsi pengolahan master jurusan untuk dapat melakukan pengelolahan data jurusan dapat dilihat pada Tabel 4.4 sebagai berikut: Tabel 4.4 Fungsi Master Jurusan Nama Fungsi Fungsi pengelolahan master jurusan Pengguna Staff TU Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data master jurusan untuk disimpan, diubah maupun dihapus. Kondisi Awal Data jurusan Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data jurusan 1. Pengguna Sistem akan memilih menu menampilkan master jurusan halaman master jurusan 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang hapus dipillh
33 Nama Fungsi Kondisi Akhir Fungsi pengelolahan master jurusan 3. Pengguna Sistem akan memasukkan data jurusan yang melakukan penambahan data ingin ditambah, jurusan ke database, diubah atau mengubah data dihapus jurusan ke database atau menghapus data jurusan yang dipilih dari database Fungsi ini untuk mengelola data jurusan D. Pengolahan Maser Tingkat Kelas Kebutuhan fungsi pengolahan master tingkat kelas untuk dapat melakukan pengelolahan data tingkat kelas dapat dilihat pada Tabel 4.5 sebagai berikut: Tabel 4.5 Fungsi Master Tingkat Kelas Nama Fungsi Fungsi pengelolahan master tingkat kelas Pengguna Staff TU Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data master tingkat kelas untuk disimpan, diubah maupun dihapus. Kondisi Awal Data tingkat kelas Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data tingkat kelas 1. Pengguna Sistem akan memilih menu menampilkan master tingkat halaman master kelas jurusan 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang hapus dipillh 3. Pengguna Sistem akan memasukkan data tingkat kelas melakukan penambahan data yang ingin tingkat kelas ke
34 Nama Fungsi Kondisi Akhir Fungsi pengelolahan master tingkat kelas ditambah, diubah database, mengubah atau dihapus data tingkat kelas ke database atau menghapus data tingkat kelas yang dipilih dari database Fungsi ini untuk mengelola data jtingkat kelas E. Fungsi Pengolahan Master Kelas Kebutuhan fungsi pengolahan master kelas untuk dapat melakukan pengelolahan data kelas dapat dilihat pada Tabel 4.6 sebagai berikut: Tabel 4.6 Fungsi Master Kelas Nama Fungsi Fungsi pengelolahan master kelas Pengguna Staff TU Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data master kelas untuk disimpan, diubah maupun dihapus. Kondisi Awal Data kelas Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data kelas 1. Pengguna Sistem akan memilih menu menampilkan master kelas halaman master kelas 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang hapus dipillh 3. Pengguna Sistem akan memasukkan data kelas yang melakukan penambahan data ingin ditambah, kelas ke database, diubah atau mengubah data kelas dihapus ke database atau menghapus data kelas
35 Nama Fungsi Kondisi Akhir Fungsi pengelolahan master kelas yang dipilih dari database Fungsi ini untuk mengelola data kelas F. Fungsi Pengolahan Master Jenis Kebutuhan fungsi pengolahan master pembayaran untuk dapat melakukan pengelolahan data pembayaran dapat dilihat pada Tabel 4.7 sebagai berikut: Tabel 4.7 Fungsi Master Jenis Nama Fungsi Fungsi pengelolahan pembayaran Pengguna Bendahara Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data master pembayaran untuk disimpan, diubah maupun dihapus. Kondisi Awal Data pembayaran Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data pembayaran 1. Pengguna Sistem akan memilih menu menampilkan master halaman master pembayaran pembayaran 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang hapus dipillh 3. Pengguna Sistem akan memasukkan data pembayaran melakukan penambahan data yang ingin pembayaran ke ditambah, diubah database, mengubah atau dihapus data pembayaran ke database atau menghapus data pembayaan yang dipilih dari database Kondisi Akhir Fungsi ini untuk mengelola data pembayaran
36 G. Fungsi Pengolahan Master Kebutuhan fungsi pengolahan master kelas untuk dapat melakukan pengelolahan data kelas dapat dilihat pada Tabel 4.8 sebagai berikut: Tabel 4.8 Fungsi Master Nama Fungsi Fungsi pengelolahan master kelas Pengguna Staff TU Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data master kelas untuk disimpan, diubah maupun dihapus. Kondisi Awal Data kelas Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data kelas 1. Pengguna Sistem akan memilih menu menampilkan master kelas halaman master kelas 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang Kondisi Akhir hapus 3. Pengguna memasukkan data kelas yang ingin ditambah, diubah dihapus atau Fungsi ini untuk mengelola data kelas dipillh Sistem akan melakukan penambahan data kelas ke database, mengubah data kelas ke database atau menghapus data kelas yang dipilih dari database H. Fungsi Pengolahan Data Transaksi Kebutuhan fungsi pengolahan Transaksi untuk dapat melakukan pengelolahan proses transaksi dapat dilihat pada Tabel 4.9 sebagai berikut:
37 Tabel 4.9 Fungsi Transaksi Nama Fungsi Fungsi pengelolahan Data Transaksi Pengguna Bendahara Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola data transaksi untuk disimpan, diubah maupun dihapus. Kondisi Awal Data Siswa, Data tingkat Kelas, Data jenis pembayaran Alur Normal Aksi Pengguna Respon sistem Memasukkan, mengubah dan menghapus data transaksi 1. Pengguna Sistem akan memilih menu menampilkan transaksi halaman transaksi 2. Pengguna Sistem menampilkan memilih tombol halaman sesuai tambah, ubah, dengan tombol yang hapus dipillh 3. Pengguna Sistem akan memasukkan melakukan data transaksi penambahan data yang ingin transaksi ke database, ditambah, diubah mengubah data atau dihapus transaksi ke database atau menghapus data transaksi yang dipilih dari database Kondisi Akhir Fungsi ini untuk mengelola data transaski I. Fungsi Pengolahan Laporan Kebutuhan fungsi pengolahan lapoaran untuk dapat melakukan pengelolahan proses lapoaran dapat dilihat pada Tabel 4.10 sebagai berikut:
38 Tabel 4.10 Fungsi Laporan Nama Fungsi Fungsi pengelolahan laporan Pengguna Bendahara Deskripsi Fungsi ini merupakan kegiatan yang dilakukan untuk mengelola lapoaran. Kondisi Awal Data Transaksi Alur Normal Aksi Pengguna Respon sistem Memasukan Jenis-Jenis Laporan 1. Pengguna Sistem akan memilih menu menampilkan halaman laporan laporan 2. Pengguna Sistem menampilkan memilih list halaman sesuai jenis laporan dengan list laporan Kondisi Akhir Fungsi ini untuk mengelola laporan 4.3.3 System Flow System flow merupakan bagan atau perangkat diagram grafik yang mengkomunikasikan aliran data dan memiliki arus pekerjaan dari suatu sistem yang menjelaskan urutan prosedur yang terdapat didalam sistem. A. System Flow Login User System login user ini menggambarkan tentan proses login yang dapat dilakukan oleh Staff TU, Bendahara dan Kepala sekolah. Proses ini dimulai dengan memasukkan user dan password yang berbeda pada tiap usernya. Berikut system flow dapat dilihat pada Gambar 4.3 berikut ini:
39 System Flow Login Staff TU, Bendahara, Kepala Sekolah System Start Login Input User dan Password Pengecekan User dan Password Tabel_pegawai Pop Up Login Gagal Pesan Gagal N Sesuai? Y Utama Aplikasi End Gambar 4.3 System Flow Login B. System Flow Pengolahan Master B.1 System Flow Pengolahan Master Siswa System flow ini menggambarkan tentang urutan proses pencatatan data master siswa. Data siswa dapat diolah seperti disimpan, diubah, dan dihapus. Fungsi hapus data dapat dilakukan jika data tersebut belum digunakan oleh master yang lain atau transaksi pembayaran. Pengolahan master ini dapat dilakukan setelah pengguna
40 melakukan login dan memiliki akses untuk melakukan pengolahan master siswa. Pengolahan master ini dapat dilihat pada Gambar 4.4 berikut ini: System Flow Tambah Data Siswa Staff TU System Start Utama Pilih Menu Master Siswa Master Siswa Pilih Button Tambah Data Siswa Data Siswa Form Tambah Data Siswa Tbl_siswa Form Tambah Data Siswa Input Data Siswa Simpan Pengecekan Data Siswa Pop Up Data tidak dapat disimpan Pesan Gagal N Data Siswa Sudah Benar? Y Menyimpan Data Siswa End Gambar 4.4 System Flow Tambah Data Siswa
41 System Flow Ubah Data Siswa Staff TU System Start Utama Pilih Menu Master Siswa Master Siswa Data Siswa Tbl_siswa Edit Data Siswa Berdasarkan yang Dipilih Form Ubah Data Siswa Input Data Siswa yang Dirubah Simpan Pengecekan Data Siswa Pop Up Data tidak dapat diubah Pesan Gagal N Data Siswa Sudah Benar? Y Menyimpan Data Siswa End Gambar 4.5 System Flow Ubah Data Siswa
42 System Flow Hapus Data Siswa Staff TU System Start Utama Pilih Menu Master Siswa Data Siswa Master Siswa Tbl_siswa N Delete Pop Up Apakah yakin ingin dihapus? Mencari Data Siswa Berdasarkan yang Dipilih Ok N Y Pengecekan Relasi Data Siswa Tbl_Transaksi Data Siswa Belum Dipakai? Y Menghapus Data Siswa End Gambar 4.6 System Flow Hapus Data Siswa
43 B.2 System Flow Pengolahan Master Jurusan System flow ini menggambarkan tentang urutan proses pencatatan data master jurusan. Data jurusan dapat diolah seperti disimpan, diubah, dan dihapus. Fungsi hapus data dapat dilakukan jika data tersebut belum digunakan oleh master yang lain atau transaksi pembayaran. Pengolahan master ini dapat dilihat pada Gambar 4.7 berikut ini: System Flow Tambah Data Jurusan Staff TU Start Utama Pilih Menu Master Jurusan Data Jurusan System Tbl_jurusan Master Jurusan Pilih Button Tambah Jurusan Form Tambah Data Jurusan Form Tambah Data Jurusan Input Data Jurusan Simpan Pengecekan Data Jurusan Pop Up Data tidak dapat disimpan Pesan Gagal N Data Jurusan Sudah Benar? Y Menyimpan Data Jurusan End Gambar 4.7 System Flow Tambah Data Jurusan
44 System Flow Ubah Data Jurusan Staff TU System Start Utama Pilih Menu Master Jurusan Master Jurusan Edit Data Jurusan Data Jurusan Berdasarkan yang Dipilih Tbl_jurusan Form Ubah Data Jurusan Input Data Jurusan yang Dirubah Simpan Pengecekan Data Jurusan Pop Up Data tidak dapat diubah Pesan Gagal N Data Jurusan Sudah Benar? Y Menyimpan Data Jurusan End Gambar 4.8 System Flow Ubah Data Jurusan
45 System Flow Hapus Data Jurusan Staff TU System Start Utama Pilih Menu Master Jurusan Data Jurusan N Master Jurusan Delete Pop Up Apakah yakin ingin dihapus? Mencari Data Jurusan Berdasarkan yang Dipilih Tbl_Jurusan Ok Y Pengecekan Relasi Data Jurusan Tbl_kelas N Data Jurusan Belum Dipakai? Y Menghapus Data Jurusan End Gambar 4.9 System Flow Hapus Data Jurusan
46 B.3 System Flow Pengolahan Master Tingkat Kelas System flow ini menggambarkan tentang urutan proses pencatatan data master tingkat_kelas. Data tingkat kelas dapat diolah seperti disimpan, diubah, dan dihapus. Pengolahan master ini dapat dilihat pada gambar 4.10 berikut ini: System Flow Tambah Data Tingkat Kelas Staff TU System Start Utama Pilih Menu Master Tingkat_Kelas Data Tingkat_Kelas Master Tingkat_kelas Tbl_Tingkat_kelas Pilih Menu Tambah Tingkat_Kelas Form Tambah Data Tingkat_Kelas Form Tambah Data Tingkat_Kelas Input Data Tingkat_Kelas Simpan Pengecekan Data Tingkat_kelas Pop Up Data tidak dapat ditambah Pesan Gagal N Data Tingkat_kelas Sudah Benar? Y Menyimpan Data Tingkat_Kelas End Gambar 4.10 System Flow Tambah Data Tingkat Kelas
47 System Flow Ubah Data Tingkat Kelas Staff TU System Start Utama Pilih Menu Master Tingkat_Kelas Master Tingkat_Kelas Edit Data Tingkat_Kelas Data Tingkat_Kelas Berdasarkan yang Dipilih Tbl_Tingkat_kelas Form Ubah Data Tingkat_kelas Input Data Tingkat_Kelas yang Diubah Simpan Pengecekan Data Tingkat_Kelas Pop Up Data tidak dapat diubah Pesan Gagal N Data Tingkat_Kelas Sudah Benar? Y Menyimpan Data Tingkat_Kelas End Gambar 4.11 System Flow Ubah Data Tingkat Kelas
48 System Flow Hapus Data Tingkat Kelas Staff TU System Start Utama Tbl_Tingkat Kelas Pilih Menu Master Tingkat_Kelas Data Tingkat_Kelas Master Tingkat_Kelas Tbl_Kelas N Delete Pop Up Apakah yakin ingin dihapus? Mencari Data Tingkat_Kelas Berdasarkan yang Dipilih Ok N Y Pengecekan Relasi Tingkat_Kelas Data Tingkat_Kelas Belum Dipakai? Y Menghapus DataTingkat_Kelas End Gambar 4.12 System Flow Hapus Data Tingkat Kelas
49 B.4 System Flow Pengolahan Master Kelas System flow ini menggambarkan tentang urutan proses pencatatan data master kelas. Data kelas dapat diolah seperti disimpan, diubah, dan dihapus. Fungsi hapus data dapat dilakukan jika data tersebut belum digunakan oleh master yang lain atau transaksi pembayaran. Pengolahan master ini dapat dilihat pada gambar 4.13 berikut ini: System Flow Tambah Data Kelas Staff TU System Start Utama Pilih Menu Master Kelas Data Kelas Tbl_Kelas Master Kelas Pilih Menu Tambah Kelas Form Tambah Kelas Form Tambah Kelas Input Data Kelas Simpan Pengecekan Data Kelas Pop Up Data tidak dapat ditambah Pesan Gagal N Data Kelas Sudah Benar? Y Menyimpan Data Kelas End Gambar 4.13 System Flow Tambah Data Kelas
50 System Flow Ubah Data Kelas Staff TU System Start Utama Pilih Menu Master Kelas Data Kelas Master Kelas Tbl_Kelas Edit Data Kelas Berdasarkan yang Dipilih Form Ubah Data Kelas Input Data Kelas yang Dirubah Simpan Pengecekan Data Kelas Pop Up Data tidak dapat diubah Pesan Gagal N Data Kelas Sudah Benar? Y Menyimpan Data Kelas End Gambar 4.14 System Flow Ubah Data Kelas
51 System Flow Hapus Data Kelas Staff TU System Start Utama Pilih Menu Master Kelas Data Kelas Master Kelas Tbl_Kelas Delete Mencari Data Kelas Berdasarkan yang Dipilih N Pop Up Apakah yakin ingin dihapus? Tbl_Siswa Ok N Y Pengecekan Relasi Data Kelas Tbl_Transaksi Data Kelas Belum Dipakai? Y Menghapus Data Kelas End Gambar 4.15 System Flow Hapus Data Kelas
52 B.5 System Flow Pengolahan Master Jenis System flow ini menggambarkan tentang urutan proses pencatatan data master jenis pembayaran. Data jenis pembayaran dapat diolah seperti disimpan, diubah, dan dihapus. Fungsi hapus data dapat dilakukan jika data tersebut belum digunakan oleh master yang lain atau transaksi pembayaran. Pengolahan master ini dapat dilihat pada gambar 4.16 berikut ini: System Flow Tambah Data Jenis Bendahara System Start Utama Pilih Menu Jenis Data Jenis Tbl_Jenis Jenis Pilih Menu Tambah Jenis Form Tambah Jenis Form Tambah Jenis Input Data Jenis Pemabayaran Simpan Pengecekan Data Jenis Pembayarn Pop Up Data tidak dapat disimpan Pesan Gagal N Data Jenis Sudah Benar? Y Menyimpan Data Jenis End Gambar 4.16 System Flow Tambah Data Jenis
53 System Flow Ubah Data Jenis Bendahara System Start Utama Pilih Menu Jenis Data Jenis Pembayarn Jenis Pembayarn Edit Data Jenis Berdasarkan yang Dipilih Tbl_Jenis Form Ubah Data Jenis Input Data Jenis yang Dirubah Simpan Pengecekan Data Jenis Pembayarn Pop Up Data tidak dapat diubah Pesan Gagal N Data Jenis Sudah Benar? Menyimpan Data Jenis Pembayarn Y End Gambar 4.17 System Flow Ubah Data Jenis
54 System Flow Hapus Data Jenis Bendahara System Start Utama Pilih Menu Jenis Pembayarn Data Jenis Jenis Delete Mencari Data Jenis Berdasarkan yang Dipilih Tbl_Jenis Pembayarn N Pop Up Apakah yakin ingin dihapus? Ok Y Pengecekan Relasi Jenis Pop Up Data tidak dapat dihapus Pesan Gagal N Data Jenis Belum Dipakai? Menghapus Data Jenis Y End Gambar 4.18 System Flow Hapus Data Jenis
55 B.6 System Flow Pengolahan Master System flow ini menggambarkan tentang urutan proses pencatatan data master pembayaran. Data pembayaran dapat diolah seperti disimpan, diubah, dan dihapus. Fungsi hapus data dapat dilakukan jika data tersebut belum digunakan oleh master yang lain atau transaksi. Pengolahan master ini dapat dilihat pada gambar 4.19 berikut ini System Flow Tambah Data Bendahara Start Utama Pilih Menu Data System Tbl_ Pilih Menu Tambah Form Tambah Data Form Tambah Data Pembayarn Input Data Simpan Pengecekan Data Pop Up Data tidak dapat disimpan Pesan Gagal N Data Sudah Benar? Menyimpan Data Y End Gambar 4.19 System Flow Tambah Data
56 System Flow Ubah Data HRD System Start Utama Pilih Menu Data Edit Data Berdasarkan yang Dipilih Tbl_ Form Ubah Data Input Data yang Dirubah Simpan Pengecekan Data Pop Up Data tidak dapat diubah Pesan Gagal N Data Sudah Benar? Y Menyimpan Data End Gambar 4.20 System Flow Ubah Data
57 System Flow Hapus Data HRD System Start Utama Pilih Menu Data Delete Data Berdasarkan yang Dipilih Tbl_ N Pop Up Apakah yakin ingin dihapus? Ok Y Pengecekan Relasi Data Pop Up Data tidak dapat dihapus Pesan Gagal N Data Belum Dipakai? Menghapus Data Y End Gambar 4.21 System Flow Hapus
58 C. System Flow Pengolahan Transaksi System flow ini menggambarkan tentang urutan proses pencatatan data transaksi. Pengolahan transaksi ini dapat dilihat pada gambar 4.22 berikut ini: System Flow Pegelolaan Transaski HRD System Start Utama Pilih Menu Transaksi Data Kelas Tbl_tingkatkelas Tbl_kelas Tbl_Siswa Tbl_jurusan Transaksi Detil Data Transaksi Per Siswa Form Transaksi Input Simpan Pengecekan Simpan Sementara Simpan Bayar Menyimpan Data Transaksi Tbl_Transaksi End Gambar 4.22 System Flow Tambah Transaksi
59 D. System Flow Pembuatan Laporan System flow ini menggambarkan tentang urutan proses pembuatan laporan. Pembuatan laporan ini dapat dilihat pada gambar 4.23 berikut ini: System Flow Pembuatan Laporan HRD System Start Utama Pilih Menu Laporan Form Filter Laporan Laporan Input Data Filter Laporan Cari Tbl_transaksi data laporan Tampil Data Laporan End Gambar 4.23 System Flow Laporan
60 4.3.4 Context Diagram Context Diagram merupakan sebuah gambaran yang menampilkan secara menyeluruh mengenai aliran data pada data flow diagram. Pada context diagram dapat dilihat mengenai gambaran umum dari Aplikasi SPP berupa data-data apa saja yang dibutuhkan. Adapun gambar context diagram tersebut dapat dilihat pada gambar 4.24. Bendahara Data Jenis Data Data Kelas Data Siswa Staff TU Data Tingkat Kelas 1 Aplikasi Sumbangan Pembinaan Pendidikan (SPP) Data Kelas Data Siswa Data Jurusan Laporan Perbulan Kepala Sekolah Gambar 4.24 Context Diagram 4.3.5 Bagan Berjenjang Bagan berjenjang merupakan diagram yang dapat menampilkan seluruh proses yang terdapat pada suatu aplikasi tertentu dengan jelas dan terstruktur. Bagan berjenjang dapat digambarkan dengan notasi yang terdapat pada notasi
61 proses data flow diagram. Bagan berjenjang dari sistem informasi SPP ini dapat dilihat pada gambar 4.25 0 Rancang Bangun Aplikasi SPP Pada Madrasah Aliyah Negeri Trenggalek Berbasis Web 1 Pengololaan Master 2 Pengelolaan Transaksi 3 Laporan Transaksi 1.1 1.4 2.1 3.1 3.2 Pengelolaan Master Siswa Pengelolaan Master Kelas Pencarian Transaski Perkelas Pelaporan Perbulan Pelaporan Pertahun 1.2 Pengelolaan Master Jurusan 1.5 Pengelolaan Master Jenis 2.2 Proses Transaksi 1.3 Pengelolaan Master Tingkat Kelas 1.6 Pengelolaan Master 2.3 Pencatatan Transaski Persiswa Gambar 4.25 Diagram Berjenjang 4.3.6 Data Flow Diagram Data flow diagram merupakan diagram yang menggambarkan suatu sistem secara logika tanpa mempertimbangkan lingkungan fisik dimana data tersebut mengalir, disimpan. Data flow diagram biasanya digunakan dalam metodologi pengembangan sistem yang terstruktur. Data flow diagram pada sistem informasi
62 penilaian kinerja pegawai ini terdapat 4 level yaitu data flow diagram level 0, level 1, level 2, dan level 3. A. Data Flow Diagram Level 0 Data flow diagram level 0 digambarkan secara global proses-proses yang ada pada Aplikasi SPP. DFD level 0 pada Aplikasi SPP ini dimulai dari pengelolaan data master, transaksi pembayaran dan laporan. Data flow diagram level 0 dapat dilihat pada gambar 4.26. Data transaksi 7 tbl_transaksi Data Transaksi Kepala Sekolah Laporan Perbulan 1.3 Pengolahan Laporan 1.2 Transaksi Staff TU Data Kelas 4 tbl_kelas Data Kelas Data Tingkat Kelas 3 tbl_tingkatkelas Data Jurusan 2 tbl_jurusan Data Data Siswa 1 tbl_siswa Data Siswa Data Kelas Data Tingkat Kelas Data Jurusan Data Siswa 1.1 Pengolahan Data Master Data 6 tbl_ Data Jenis 5 tbl_jenis_ Data Jenis Data Data Siswa Data Kelas Bendahara Gambar 4.26 Data Flow Level 0 SPP
63 B. Data Flow Diagram Level 1 Data flow diagram level 1 merupakan diagram yang menguraikan proses yang ada pada data flow diagram level 0. Pada DFD level 1 digambarkan secara lebih detil proses-proses utama yakni pengolahan data master, pencatatan transaksi, dan pembuatan laporan. B.1 Data Flow Diagram Level 1 Proses Pengelolaan Data Master Data Flow Diagram Level 1 proses pengelolaan data master merupakan detail proses dari proses yang terjadi pada proses data master. Pada DFD ini lebih dijelaskan bagaimana alur data yang terjadi pada proses pengelolaan master. Pada pengelolaan master ini terdapat 7 proses yang terjadi yaitu pengelolaan data master siswa, master jurusan, master tingkat kelas, master kelas, master jenis pembayaran, dan master pembayaran. Dalam penyimpanannya master master tersebut akan disimpan melalui Data-data dari master akan disimpan dalam data source yang meliputi master data siswa disimpan pada data source siswa, master data jurusan akan disimpan pada data source jurusan, master data tingkat kelas akan disimpan pada data source tingkat kelas, master data kelas akan disimpan pada data source kelas, master data jenis pembayaran akan disimpan pada data source jenis pembayaran, master data pembayaran akan disimpan pada data source pembayaran. Data flow diagram level 1 pengelolaan mastern prosesnya dapat dilihat pada gambar 4.27.
64 Data Jurusan 1.1.2 Pengolahan Master Jurusan Data Jurusan Data Jurusan 2 tbl_jurusan [Data Jurusan] Data Tingkat Kelas 1.1.3 Pengolahan Master Tingkat Kelas Data Tingkat Kelas 3 tbl_tingkatkelas [Data Tingkat Kelas] Data Kelas 1.1.4 Pegolahan Master Kelas Data Tingkat Kelas Staff TU [Data Kelas] Data Kelas 4 tbl_kelas Data Kelas Data Kelas Data Siswa 1.1.1 Pengolahan Master Siswa Data Siswa 1 tbl_siswa [Data Siswa] Data Jenis 1.1.5 Pengolahan Master Jenis Data Jenis 5 tbl_jenis_ [Data Jenis ] Bendahara Data Jenis Data 1.1.6 Pengolahan Master Data 6 tbl_ [Data ] Gambar 4.27 Data Flow Level 1 Pengelolaan Master
65 B.2 Data Flow Diagram Level 1 Proses Pengelolaan Transaksi Data Flow Diagram Level 1 proses pengelolaan data transaksi merupakan detail proses dari proses yang terjadi pada proses data transaksi. Pada DFD ini lebih dijelaskan bagaimana alur data yang terjadi pada proses pengelolaan transaksi. Data flow diagram level 1 prosesnya dapat dilihat pada gambar 4.28 Data Kelas 4 tbl_kelas Data Kelas 1.2.1 Data Kelas [Bendahara] Data Siswa Pencarian Transaski Perkelas Data Siswa 1 tbl_siswa Data Siswa Data Siswa 1.2.2 Proses Transaksi 6 tbl_ Data Siswa Data Siswa Data Kelas 1.2.3 Data Data Pencatatan Transaksi Data Transaksi 7 tbl_transaksi Gambar 4.28 Data Flow Level 1 Pengelolaan Transaksi B.3 Data Flow Diagram Level 1 Proses Pembuatan Laporan Data Flow Diagram Level 1 proses pengelolaan Laporan merupakan detail proses dari proses yang terjadi pada proses laporan. Pada DFD ini lebih dijelaskan bagaimana alur data yang terjadi pada proses pengelolaan laporan. Data flow diagram level 1 prosesnya dapat dilihat pada gambar 2.29
66 Kepala Sekolah Pelaporan Pertahun 1.3.2 Pelaporan Pertahun Laporan Perbulan Data Transaksi 1.3.1 Pelaporan Perbulan Data Transaksi 7 tbl_transaksi Gambar 4.29 Data Flow Level 1 Laporan 4.3.7 Perancangan Database Pada tahap perancangan database ini dilakukan penyusunan struktur basis data sebagai struktur dasar penyimpanan data. Rancangan database yang dibuat berupa Entity Relational Diagram (ERD) yang biasa digunakan dalam mempresentasikan model yang terdiri dari entity dan relationship yang ada pada system. A. Entity Relationship Diagram Entity Relationship Diagram (ERD) merupakan sebuah gambaran struktur database dari sistem informasi penilaian kinerja pegawai yang telah dikembangkan. ERD dapat dibagi menjadi dua, yaitu Conceptual Data Model (CDM) secara logika dan Physical Data Model (PDM) secara fisik.
67 A.1 Conceptual Data Model Conceptual Data Model (CDM) merupakan gambaran keseluruhan struktur basis data bagi aplikasi yang akan digunakan dengan bentuk logic. CDM terdiri dari objek yang tidak diimplementasikan secara langsung ke dalam basis data yang sesungguhnya. CDM hanya memberikan gambaran yang lengkap dari struktur basis data yaitu arti, hubungan, dan batasan-batasan. Conceptual Data Model Aplikasi SPP dapat dilihat pada gambar 4.30. A.2 Physical Data Model Physical Data Model (PDM) merupakan penggambaran struktur basis data yang berbentuk fisik dan model yang memiliki sejumlah tabel untuk menggambarkan data serta hubungan antar data-data tersebut. Dalam PDM ini terdapat foreign key yang merujuk pada tabel primary key, hal ini sebagai hubungan yang menghubungkan dua tabel atau lebih. PDM juga merupakan gambaran struktur data yang akan diimplementasikan oleh DBMS.Physical Data Model Sistem Informasi Aplikasi SPP dapat dilihat pada gambar 4.31
68 nim nama alamat no_hp_siswa nim <pi> tbl_siswa <pi> Variable characters (7) <M> Variable characters (30) Variable characters (60) Variable characters (13) terdapat mempunyai id_kelas tahun_ajaran id_kelas <pi> <pi> tbl_kelas Integer <M> Variable characters (3) membayar terdiri id_jurusan nama_jurusan id_jurusan <pi> <pi> tbl_jurusan Integer <M> Variable characters (6) id_tingkat nama_tingkat tahun_ajaran id_tingkat <pi> tbl_tingkat_kelas <pi> Integer <M> Variable characters (3) Variable characters (3) dapat id_jenis nama_pembayaran id_jenis <pi> tbl_jenis_pembayaran <pi> Integer <M> Variable characters (10) meliputi bisa id_pembayaran nominal id_pembayaran tbl_pembayaran <pi> <pi> Integer Integer <M> id_transaksi tanggal bulan tahun <pi> Identifier_1 <pi> id_transaksi Integer <M> Timestamp Integer Variable characters (4) Gambar 4.30 Contceptual Diagram
69 nim id_kelas nama alamat no_hp_siswa... tbl_siswa varchar(7) integer varchar(30) varchar(60) varchar(13) <pk> <fk> id_kelas id_jurusan id_tingkat tahun_ajaran... tbl_kelas integer integer integer varchar(3) <pk> <fk1> <fk2> id_jurusan nama_jurusan tbl_jurusan integer varchar(6) <pk> id_tingkat nama_tingkat tahun_ajaran... tbl_tingkat_kelas integer varchar(3) varchar(3) <pk> tbl_jenis_pembayaran id_jenis nama_pembayaran integer varchar(10) <pk> id_pembayaran id_jenis id_tingkat nominal... tbl_pembayaran integer integer integer integer <pk> <fk1> <fk2> id_transaksi nim id_pembayaran tanggal bulan tahun... id_transaksi integer varchar(7) integer timestamp integer varchar(4) <pk> <fk1> <fk2> Gambar 4.31 Physical Diagram B. Struktur Model Perancangan database harus disesuaikan dengan DFD dan ERD yang telah dibuat. Struktur tabel yang diperlukan meliputi nama tabel, nama atribut, tipe data, serta data pelengkap seperti primary key dan foreign key. Rancangan basis data aplikasi ini terdiri dari tabel tabel sebagai berikut:
70 B.1 Tabel Siswa Nama Tabel Fungsi : Siswa : Menyimpan Data Siswa Primary Key : Nis Foreign Key : Id_Kelas Tabel 4.11 Tabel Siswa No Field Tipe Data Panjang Keterangan 1. Nis Varchar 7 Primery Key 2. Nama Varchar 30 3. Alamat Varchar 60 4. No_Hp_Siswa Varchar 12 5. Id_Kelas Integer Foreign Key B.2 Tabel Jurusan Nama Tabel Fungsi : Jurusan : Menyimpan Data Jursan Primary Key : Id_Jurusan Foreign Key : - Tabel 4.12 Tabel Jurusan No Field Tipe Data Panjang Keterangan 1. Id_Jurusan Integer Primery Key 2. Nama_Jurusan Varchar 6 B.3 Tabel Tingkat Siswa Nama Tabel Fungsi : Tingkat_Kelas : Menyimpan Data Tingkat Kelas
71 Primary Key : Id_Tingkat Foreign Key :Id_Jurusan Tabel 4.13 Tabel Tingkat Kelas No Field Tipe Data Panjang Keterangan 1. Id_Tingkat Integer Primery Key 2. Id_Jurusan Integer Foreign Key 3. Nama_Tingkat Varchar 3 4. Tahun_Ajaran Integer 4 B.4 Tabel Kelas Nama Tabel Fungsi : Kelas : Menyimpan Data Kelas Primary Key : Id_Kelas Foreign Key :Nis, Id_Tingkat Tabel 4.14 Tabel Kelas No Field Tipe Data Panjang Keterangan 1. Id_Kelas Integer Primery Key 2. Id_Tingkat Integer Foreign Key 3. Id_Jurusan Integer Foreign Key 4. Tahun_Ajaran Varchar 3 B.5 Tabel Jenis Nama Tabel Fungsi : Tbl_Jenis_ : Menyimpan Data Jenis_ Primary Key : Id_Jenis Foreign Key : -
72 Tabel 4.15 Tabel Jenis No Field Tipe Data Panjang Keterangan 1. Id_Jenis Integer Primery Key 2. Nama_ Varchar 10 B.6 Tabel Nama Tabel Fungsi : Tbl_ : Menyimpan Data Primary Key : Id_Jenis Foreign Key : Id_Jenis, Id_Tingkat Tabel 4.16 Tabel No Field Tipe Data Panjang Keterangan 1. Id_ Integer Primery Key 2. Id_Jenis Integer Foreign Key 3. Id_Tingkat Integer Foreign Key 4. Nominal Integer B.7 Tabel Transaksi Nama Tabel Fungsi : Tbl_Transaksi : Menyimpan Data Transaksi Primary Key : Id_Transaksi Foreign Key : Nis Tabel 4.17 Tabel Transaksi No Field Tipe Data Panjang Keterangan 1. Id_Transaksi Integer Primery Key 2. Nis Varchar 7 Foreign Key 3. Id_ Int 11 Foreihn Key
73 No Field Tipe Data Panjang Keterangan 3. Tanggal Timestamp 4. Bulan Integer 5. Tahun Varchar 4 4.3.8 Desain Interface I/O (Input/Output) A. Desain Interface Input Desain interface input merupakan perancangan bentuk aplikasi yang ingin dibuat sesuai dengan desain input yang sudah dimiliki. Desain interface input lebih mengarah ke dalam sketsa dari tampilan aplikasi yang ingin aplikasikan. Desain interface input bertujuan sebagai acuan bagi developer sehingga pada saat pembuatan aplikasi, developer hanya akan mengikuti sketsa tampilan desain aplikasi dari desain interface input yang telah dibuat. A.1 Desain Login Desain interface input login pegawai merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini terdapat user dan passwod. Desain interface login dapat dilihat pada gambar 4.32. Gambar 4.32 Desain Interface Login
74 A.2 Desain Interface Menu Desain interface menu merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan dashboard, master dan transaksi. Dalam master terdapat master siswa, master jurusan, master tingkat kelas, master kelas, master jenis pembayaran, dan master pembayara. Kemudian dalam transaksi terdapat menu transaski dan laoran saja.. Desain interface login dapat dilihat pada gambar 4.33. Gambar 4.33 Desain Interface Menu A.3 Desain Interface Master Data Siswa Desain interface master siswa merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data dan input saja. Didalam master ini terdapat juga button update dan button delete. Desain interface siswa dapat dilihat pada gambar 4.34.
75 Gambar 4.34 Desain Interface Master Siswa A.4 Desain Interface Master Data Jurusan Desain interface master tingkat kelas merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data dan input saja. Didalam master ini terdapat juga button update dan button delete. Desain interface jurusan dapat dilihat pada gambar 4.35 Gambar 4.35 Desain Interface Master Jurusan
76 A.5 Desain Interface Master Data Tingkat Kelas Desain interface master tingkat kelas merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data dan input saja. Didalam master ini terdapat juga button update dan button delete. Desain interface tingkat kelas dapat dilihat pada gambar 4.36. Gambar 4.36 Desain Interface Master Tingkat Kelas A.6 Desain Interface Master Data Kelas Desain interface master kelas merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data dan input saja. Didalam master ini terdapat juga button update dan button delete. Desain interface kelas dapat dilihat pada gambar 4.37.
Gambar 4.37 Desain Interface Master Kelas A.7 Desain Interface Master Data Jenis Desain interface master Jenis merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data dan input saja. Didalam master ini terdapat juga button update dan button delete. Desain interface jenis pembayaran dapat dilihat pada gambar 4.38 Gambar 4.38 Desain Interface Master Jenis 77
78 A.8 Desain Interface Master Data Desain interface master merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data dan input saja. Didalam master ini terdapat juga button update dan button delete. Desain interface pembayaran dapat dilihat pada gambar 4.39 Gambar 4.39 Desain Interface A.9 Desain Interface Data Transaksi Desain interface master data transaksi merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan tabel data siswa per-kelas yang akan membayar. Didalam desain ini hanya menampilkan button tampilkan kelas. Selain itu, ada tampilan detil transaski yang akan ditampilkan setelah menekan button detail. Desain interface transaksi dapat dilihat pada gambar 4.40.
79 Gambar 4.40 Desain Interface Transaksi A.10 Desain Interface Data Pelaporan Desain interface data pelaporan merupakan desain tampilan yang akan dijadikan sebagai acuan dalam mendesain aplikasi. Didalam desain ini hanya menampilkan laporan yang dikehendaki bedasarkan bulan atau tahun. Didalam desain ini hanya menampilkan button tampilkan kelas. Desain interface transaksi dapat dilihat pada gambar 4.41 Gambar 4.41 Desain Interface Laporan
80 4.4 Pembuatan Aplikasi 4.4.1 Implementasi Sistem Implementasi sistem ini akan menjelaskan secara detil mengenai sistem informasi Aplikasi SPP spesifikasi hardware dan software pendukung, cara penggunaan program serta fitur-fitur yang terdapat pada aplikasi. Sistem yang digunakan untuk menjalankan aplikasi ini terdiri dari hardware dan software. Adapun hardware dan software adalah sebagai berikut: Spesifikasi hardware pendukung terdiri dari: 1. Memory dengan RAM 512 MB 2. Processor 1.5 Ghz 3. Keyboard & Mouse 4. VGA on Board 5. Monitor Super VGA (1024x768) dengan minimum 256 warna. Spesifikasi software pendukung terdiri dari: 1. Sistem Operasi Microsoft Windows atau Linux 2. XAMPP/WAMPP/LAMPP 3. Browser (Chrome/Mozilla/Microsoft Edge/Internet Explorer) 4.4.2 User Interface Pada sub bab user interface akan dijelaskan mengenai langkah-langkah dalam menjalankan aplikasi, selain itu juga ditampilkan mengenai desain tampilan aplikasi secara keseluruhan.
81 A. Login Login pada Aplikasi SPP ini dapat dilakukan oleh Staff TU, Bendahara, Kepala Sekolah. Hak akses akan dibedakan pada setiap bagian. login dapat dilihat pada gambar 4.42. Gambar 4.42 Form Login B. Menu Beranda pada Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tulisan dan dashboard saja. beranda dapat dilihat pada gambar 4.43. Gambar 4.43 Form Menu
82 C. Form Master Siswa Form Master Siswa Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah, update dan delete. master siswa dapat dilihat pada gambar 4.44. Gambar 4.44 Form Master Siswa D. Form Master Jurusan Form Master jurusan Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah, update dan delete. master jurusan dapat dilihat pada gambar 4.45. Gambar 4.45 Form Master Jurusan
83 E. Form Master Tingkat Kelas Form Master tingkat kelas Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah, update dan delete. master tingkat kelas dapat dilihat pada gambar 4.46. Gambar 4.46 Form Master Tingkat Kelas F. Form Master Kelas Form Master kelas Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah, update dan delete. master kelas dapat dilihat pada gambar 4.47. Gambar 4.47 Form Master Kelas
84 G. Form Master Jenis Form Master jenis pembayaran Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah, update dan delete. master jenis pembayaran dapat dilihat pada gambar 4.47. Gambar 4.48 Form Master Jenis H. Form Master Form Master pembayaran Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah, update dan delete. master pembayaran dapat dilihat pada gambar 4.49. Gambar 4.49 Form Master
85 I. Form Transaksi Form data transaksi Aplikasi SPP ini dapat ditampilkan setelah melakukan login. Pada halaman ini hanya berisi tabel data, button tambah. Transaksi dapat dilihat pada gambar 4.50. Gambar 4.50 Form Data Transaksi J. Form Pelaporan Form Pelaporan Aplikasi SPP ini dapat ditampilkan setelah melakukan Transaksi. Pada halaman ini hanya berisi tabel data, button Tampilkan. Pelaporan dapat dilihat pada gambar 4.51 Gambar 4.51 Laporan Periodik
86 K. Hasil Laporan Hasil laporan Aplikasi SPP ini dapat ditampilkan setelah melakukan input laporan. Pada halaman hanya melaporkan hasil inputan berupa PDF Hasil laporan dapat dilihat pada gambar 4.52. Gambar 4.52 Hasil Laporan Periodik