TUGAS BESAR

ANALISIS DAN PERANCANGAN SISTEM INFORMASI

“SISTEM INFORMASI PEMBAYARAN SPP”

Disusun Oleh :

Fendi Pradana (2017-57-017 / 2017)

PROGRAM STUDI TEKNIK INDUSTRI

FAKULTAS TEKNIK
UNIVERSITAS MURIA KUDUS
2019
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa yang
telah memberikan Rahmat dan Karunia-Nya sehingga penulis dapat
menyelesaikan Laporan Tugas Besar APSI yang berjudul “Sistem Informasi
Pembayaran SPP”. Laporan ini disusun dengan tujuan memenuhi Tugas
Besar Analisis dan Perancangan Sistem Informasi. Dalam menyusun laporan ini,
penulis banyak memperoleh bantuan dari berbagai pihak. Oleh karena itu,
penulis ingin menyampaikan ucapan terima kasih kepada :

1. Kepada Ibu Dina Tauhida S.T. M.Sc. selaku dosen Mata Kuliah
Analisis dan Perancangan Sistem Informasi
2. Teman-teman prodi teknik industri maupun teman-teman di luar prodi
teknik industri yang sudah membantu menyelesaikan laporan ini.

Penulis menyadari bahwa dalam menyusun laporan ini masih jauh dari
sempurna, untuk itu penulis sangat mengharapkan kritik dan saran yang sifatnya
membangun guna perbaikan laporan. Penulis berharap semoga laporan ini dapat
bermanfaat bagi pembaca dan masyarakat pada umumnya.

Kudus, 25 November 2019

FENDI PRADANA
201757017

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP i

 BAB 1
PENDAHALUAN

1.1. Latar Belakang

Perkembangan teknologi dan perkembangan ilmu pengetahuan memicu
banyak kalangan untuk mencari alternatif pemecahan masalah dibidang
teknologi sistem informasi. Teknologi Informasi saat ini merupakan
kebutuhan yang sangat penting bagi organisasi atau perusahaan. Teknologi
informasi telah banyak digunakan untuk berbagai aspek seperti manajemen
dan sumber daya manusia. Salah satu contoh Teknologi Informasi yang
digunakan dalam aspek manajemen yaitu proses administratif pembayaran
SPP.
Dengan adanya teknologi dapat membantu dalam pengembangan mutu
maupun kinerja dari sebuah sekolah. Teknologi digunakan untuk
mempermudah pekerjaan dengan cepat tanpa adanya redudansi yang tidak
diperlukan. Peningkatan mutu sekolah harus diiringi dengan penggunaan
teknologi yang mendukung seperti penggunaan aplikasi pembayaran SPP
disekolah agar pencatatan dan proses pembayaran dapat dilakukan secara
efektif, efisien, dan lebih mudah. Pada era modern sekarang masih banyak
sekolah-sekolah yang belum menggunakan kemajuan teknologi untuk
membantu meningkatkan mutu sekolah. Oleh karena itu untuk menunjang
peningkatan mutu sekolah perlu adanya penggantian sistem yang belum
menggunakan teknologi, misalnya seperti aplikasi pembayaran SPP yang
masih menggunakan pencatatan manual di buku, dan masih banyak lagi.
Banyaknya siswa yang ada di sekolah, membuat pihak sekolah
membutuhkan suatu pengelolahan administratif dengan menyediakan data-
data guna untuk melakukan proses pencatatan pembayaran SPP. Pencatatan
pembayaran memiliki peran penting dalam menunjang kegiatan pembelajaran
dan operasional sekolah, sehingga tertatanya pencatatan menjadi poin kunci
untuk keberlangsungan pembayaran.
Proses pengelolaan pencatatan pembayaran SPP membutuhkan tingkat
ketelitihan dalam prosesnya, hal ini berkaitan mengenai pelaporan keuangan

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 1

 perbulan, pelaporan lunas pembayaran dan pelaporan tunggakan perbulan
yang akan dilaporkan ke kepala sekolah dan komite sekolah. Proses
pencatatan pembayaran SPP ini dilakukan secara mandiri oleh siswa yang
dimulai dari siswa mendatangi loket pembayaran, selanjutnya memberikan
kartu pembayaran SPP beserta uang pembayaran yang kemudian akan dicatat
oleh pihak bendahara sekolah di dalam buku pembayaran SPP dan kartu
pembayaran.
Permasalahan muncul ketika bendahara melakukan rekapan data siswa
yang sudah membayar dan yang belum membayar spp, hal ini menyebabkan
banyaknya waktu yang terbuang. Selain itu, buku catatan pembayaran akan
menjadi rusak sehingga pelaporan pembayaran perbulan menjadi terlambat.
Berdasarkan permasalahan diatas, maka dibuatnya aplikasi pengelolahan
pencatatan pembayaran SPP berbasis web sebagai salah satu segi layanan yang
digunakan untuk menunjang kegiatan kebendaharaan dalam hal pencatatan
pembayaran SPP. Sehingga diharapakan dengan adanya pengelolahan
pencatatan pembayaran SPP, pencatatan dan pelaporan dapat diproses dengan
cepat dan tepat.
Aplikasi pembayaran SPP ini di buat dengan menggunakan software
visual studio code sebagai software editor dan software bootstrap sebagai
software framework (desain interface). Pembuatan aplikasi ini bertujuan untuk
mempermudah bagian keuangan agar pekerjaannya lebih efektif, dan efisien
serta mudah dalam proses pelayanan pembayaran. Meskipun semua tidak
lepas dari peran manusia dalam proses operasionalnya, serta pengelolaan
teknologi yang tepat dapat membantu mempermudah dalam pekerjaannya.

1.2. Definisi Masalah

Berdasarkan latar belakang masalah yang telah diuraikan di atas maka
masalah yang terjadi dapat diuraiakan sebagai berikut:
1. Bagaimana membuat Aplikasi SPP ?
2. Bagaimana membuat aplikasi yang dapat menghasilkan monitoring
laporan SPP perbulan ?

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 2

 3. Pemanfaatan teknologi informasi belum maksimal khususnya pada
bidang pendidikan.
4. Proses pembayaran SPP masih dicatat secara konvensional.
5. Data pembayaran SPP yang dicatat secara konvensional dalam buku
rawan rusak dan hilang.
6. Sering terjadi penyalah gunaan uang pembayaran SPP oleh siswa.

1.3. Tujuan Penulisan

Adapun tujuan dari pembuatan sistem informasi pembayaran spp sebagai
berikut :
1. Membuat sistem informasi pembayaran SPP.
2. Dapat menyediakan laporan pembayaran SPP.
3. Dapat menyediakan laporan tungakan pembayaran SPP.
4. Menyediakan suatu informasi untuk pengambilan suatu keputusan.

1.4. Batasan Masalah

Adapun batasan masalah dalam pembuatan sistem informasi pencatatan
pembayaran spp ialah sebagai berikut:
1. Sistem informasi dibuat hanya untuk pembayaran SPP siswa.
2. Sistem informasi tidak membahas laporan penggunaan keuangan SPP
ke pihak sekolah.
3. Aplikasi ini dibuat dengan sistem web dengan bahasa pemrograman
PHP dan database MySql.
4. Aplikasi web ini tidak sampai tahap penghostingan atau hanya sampai
tahap implementasi.

1.5. Sistematikas Penulisan

BAB 1 PENDAHULUAN
Merupakan bab yang menguraikan tentang latar belakang
masalah, definisi masalah, tujuan penulisan, batasan masalah,
dan sistematika penulisan.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 3

BAB II LANDASAN TEORI
Merupakan bab yang membahas teori-teori singkat yang
berhubungan dengan laporan. Teori-teori ini dijadikan bahan
refrensi sebagai acuan untuk menyelesaiakan masalah.
BAB III METODOLOGI PERANCANGAN
Merupakan bab yang berisikan tentang metode
sistem, perancangan sistem, diagram-diagram, gambaran
umum perancangan proses dan perancangan antar muka.
BAB IV HASIL DAN IMPLEMENTASI
Merupakan bab yang berisikan hasil dari program yang dibuat
berupa tampilan dan juga lampiran dari sistem perangkat lunak
tersebut.
BAB V PENUTUP
Merupakan bab yang berisikan tentang kesimpulan akhir dari
rumusan masalah yang dikemukakan sebagai hasil dari
keseluruhan pembahasan pada Bab I, II, III, IV, yang berupa
kesimpulan pembuatan aplikasi pencatatan pembayaran spp,
serta saran pengembangan sistem selanjutnya.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 4

 BAB 2
PERENCANAAN PENGEMBANGAN SISTEM & TEORI

2.1. Ruang Lingkup

2.1.1. Lingkup Area
Sistem Pembayaran SPP yang akan dibangun agar membantu proses
pembayaran dan pencatatan pembayaran. Berdasarkan penggunanya sistem
pembayaran SPP terdiri dari 2 user yaitu admin dan non admin .
2.1.2. Lingkup Kajian
Fungsi sistem informasi pembayaran spp meliputi :
1. Input data.
2. Tambah data.
3. Edit dan hapus data.
4. Cetak data.
Metode yang digunakan dalam perancangan sistem informasi
pembayaran SPP adalah model waterfall.Model waterfall atau dikenal
model air terjun atau siklus hidup perangkat lunak. Tahapan model
waterfall ini menentukan kegiatan-kegiatan sebagai berikut :
1. Analisis
Analisi yang dilakukan yaitu kebutuhan-kebutuhan dan
batasan-batasan yang berkaitan dengan pembuatan sistem informasi
pembayaran SPP. Kebutuhan sistem diantaranya kebutuhan
pengguna dan kebutuhan modul pengguna.
2. Perancangan Sistem
Perancangan sistem yaitu mendapatkan daftar-daftar pengguna
dari analisis yang kemudian dibuat perancangan sistem dengan
menentukan modul-modul setiap pengguna. Modul-modul tersebut
dibuat menggunakan DFD (Data Flow Diagram) dan ERD (Entity
Relationship Diagram).
3. Implementasi
Modul yang telah dibuat diimplementasikan dalam bentuk
pembuatan sistem informasi berbasis web, dalam membuat sistem

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 5

 informasi web menggunakan XAMPP v3.2.3 sebagai penyedia
localhost dan database, untuk editor program menggunakan Visual
Studio Code.
4. Integrasi
Sistem Informasi dinyatakan layak akan di online kan sehingga
sistem informasi tersebut dapat benar-benar digunakan oleh
pengguna. Dalam menghosting sistem informasi ini mengambil dari
penyedia hosting phpnet.us
5. Pemeliharaan
Setelah sistem informasi ter-hosting dilakukan pemelihara
sistem agar tetap bekerja dengan baik, baik dari segi penggunaan
data ,kesalahan dari sistem itu sendiri, dan perbaikan serta
pengembangan sistem.
2.1.3. Lingkup Kegiatan
Interaksi dari masing-masing user dalam sistem informasi pembayaran
SPP, sebagai berikut:
User Kegiatan yang mungkin dilakukan
Admin - Login
- Input Jurusan
- Input Siswa
- Input Kelas
- Input Jenis Pembayaran
- Input Konfigurasi Tahun Pelajaran
- Input User
- Cetak Pembayaran
- Cetak Rekap Pembayaran
- Cetak Tagihan Pembayaran
- Edit dan hapus data
- Ganti Password akun
- Logout
Non Admin - Login
- Input Jurusan

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 6

 - Input Siswa
- Input Kelas
- Cetak Pembayaran
- Cetak Rekap Pembayaran
- Cetak Tagihan Pembayaran
- Edit dan hapus data
- Ganti Password akun
- Logout
2.1.4. Alternatif Sistem
Dalam pembuatan sistem ini memerlukan alat–alat seperti PHP,
MySQLi, XAMPP, JavaScript (JQuery), Visual Studio Code, Bootstrap dan
alat–alat lainnya. Sebelum sistem informasi pembayaran SPP ini di
terapkan, sistem akan di uji terlebih dahulu dengan menggunakan metode
Black Box, dari hasil pengujian tersebut mendapatkan sebuah sistem
informasi pembayaran SPP.

2.2. Identifikasi Kebutuhan Sistem

Identifikasi kebutuhan sistem sangat dibutuhkan dalam mendukung
kinerja sistem. Apakah sistem yang dibuat sudah sesuai dengan yang
dibutuhkan atau belum, karena kebutuhan sistem akan mendukung tercapainya
tujuan suatu instansi atau perusahaan. Dengan adanya sistem baru yang telah
dibuat diharapakan dapat lebih membantu dalam kinerja sistem dan
mempemudah bendahara dalam memperoleh informasi – informasi yang
diperlukan. Untuk mempermudah analisis sistem dalam menentukan
keseluruhan kebutuhan secara lengkap, maka dibagi kebutuhan sistem menjadi
dua jenis yaitu kebutuhan fungsional dan nonfungsional.

2.2.1. Kebutuhan Fungsional

Kebutuhan fungsional sama artinya dengan layanan yang harus
disediakan, dan bagaimana reaksi sistem terhadap input dan apa yang harus
dilakukan sistem pada situasi tertentu. Berikut ini adalah kebutuhan sistem
yang dilihat dari sudut pandang pengguna :

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 7

 1. Sistem mampu memberikan informasi data jurusan, data siswa dan
data kelas.
2. Sistem mampu memberikan informasi rekap pembayaran spp.
3. Sistem mampu memberikan informasi pembayaran spp siswa.
4. Sistem mampu memberikan informasi laporan tagihan pembayaran
spp.
5. Sistem mampu memberikan informasi data kelas.

Kebutuhan sistem yang dilihat dari sudut pandang admin :

1. Sistem mampu memberikan informasi data jurusan, data siswa dan
data kelas.
2. Sistem mampu memberikan informasi rekap pembayaran spp.
3. Sistem mampu memberikan informasi pembayaran spp siswa.
4. Sistem mampu memberikan informasi laporan tagihan pembayaran
spp.
5. Sistem mampu memberikan informasi data kelas.
6. Sistem mampu memberikan informasi jenis bayar dan tahun
pelajaran.
7. Sistem mampu memberikan informasi user.

2.2.2. Kebutuhan Nonfungsional

Sistem mampu memberikan informasi laporan pembayaran spp :
1. Operational (Operasional)
a. Bisa digunakan pada sistem operasi berbasis web php versi
apapun.
2. Security (Keamanan)
a. Programmer, yaitu orang yang bertugas membuat sistem serta
melakukan maintenance dan melakukan perbaikan jika terjadi
kesalahan atau kerusakan sistem.
b. Administrator, yaitu memiliki akses penuh dalam melakukan
pengaturan sistem. Admin dapat melakukan input, edit, delete,
dan update data.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 8

 3. Information (Informasi)
a. Digunakan untuk menginformasikan data siswa, pembayaran
siswa, dan tagihan pembayaran.
4. Performance (Kinerja)
a. Sistem ini dapat memberikan informasi pembayaran spp dan
dilengkapi dengan laporan rekap pembayaran dan tagihan
pembayaran.
b. Waktu yang dibutuhkan relative lebih cepat, lebih efisien dan
efektif.

2.3. Dasar Teori

2.3.1. Konsep Dasar Web
World Wide Web (WWW), lebih dikenal dengan web, merupakan salah
satu layanan yang didapat oleh pemakai komputer yang terhubung ke
Internet (Sidik, 2007: 1).
Menurut Arief (2011:7) “Web adalah salah satu aplikasi yang berisikan
dokumen-dokumen multimedia (teks, gambar, suara, animasi, video) di
dalamnya yang menggunakan protokol HTTP (Hypertext Transfer
Protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang
disebut browser”.
Dapat disimpulkan bahwa web adalah sebuah layanan yang berisi
dokumen multimedia yang dapat diaskses dengan browser lewat komputer
yang terhubung ke internet..

2.3.2. Website
Di dalam sebuah website, ada beberapa komponen pendukung agar
sebuah website dapat diakses oleh pemakai, diantaranya:
1. Internet
Menurut Kotler dan Armstrong (2010:24) “Internet merupakan
jaringan global dari jaringan-jaringan komputer yang luas dan
berkembang tanpa adanya manajemen atau kepemilikan terpusat”. Saat
ini, internet menghubungkan individu dan perusahaan satu sama lain

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 9

 dengan informasi di seluruh dunia. Internet menyediakan koneksi
informasi, hiburan, dan komunikasi kapanpun, dimanapun. Perusahaan
menggunakan internet untuk membangun hubungan yang lebih baik
dengan pelanggan dan rekan bisnis, serta untuk mendistribusikan dan
menjual produk-produk mereka dengan lebih efektif dan efisien.
2. Web Browser
Menurut Arief (2011:19) “Web Browser merupakan program yang
berfungsi untuk menampilkan dokumen-dokumen web dalam format
HTML”.
Menurut Limantara (2009:1) “Web Browser adalah aplikasi
perangkat lunak yang memungkinkan penggunanya untuk berinteraksi
dengan teks, image, video, games, dan informasi lainnya yang
berlokasi pada halaman web pada World Wide Web (WWW) atau
Local Area Network (LAN)”.
Teks dan image pada halaman web dapat berisi hyperlink ke
halaman web lain pada website yang sama maupun berbeda. Dengan
web browser, seorang pengguna bisa mengakses informasi yang di
sediakan pada banyak website secara cepat dan mudah. Web Browser
memformat informasi HTML untuk ditayangkan, oleh karena itu
penampakan halaman web akan agak berbeda dan satu browser ke
browser lain. Web Browser yang paling populer adalah google chrome
buatan google.
3. Web Server
Menurut Supardi (2010:2) “Web Server merupakan perangkat
lunak yang mengelola (mengatur) permintaan user dari browser dan
hasilnya dikembalikan kembali ke browser”. Contoh web server
adalah IIS (Internet Information Services) produk Microsoft Corp.
Web Server bekerja sebagai penyedia layanan yang dapat diakses
oleh banyak pengguna. Dukungan perangkat lunak sangat dibutuhkan
agar web server dapat berjalan secara optimal. Setiap perangkat lunak
web server memiliki karakteristik dan teknologi yang dibutuhkan
untuk mengatur kerja sistemnya.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 10

2.3.3. Bahasa Pemrograman
Bahasa pemrograman yang digunakan dalam perancangan website,
antara lain:
1. HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa
dasar bahasa markup untuk memformat konten halaman web yang
digunakan untuk merancang halaman website statis (Wahana
Komputer, 2012:3).
Menurut Sibero (2013:19) “Hypertext Markup Language atau
HTML adalah bahasa yang digunakan pada dokumen web sebagai
bahasa untuk pertukaran dokumen web. Struktur dokumen HTML
terdiri dari tag pembuka dan tag penutup”.
Berdasarkan defenisi di atas, dapat disimpulkan bahwa HTML
merupakan bahasa pemrograman web yang digunakan untuk mengatur
format dan tampilan konten/isi dari halaman website.
2. PHP
Menurut Anhar (2010:49) “PHP merupakan bahasa
pemrograman web server-side yang bersifat open source”. PHP
merupakan script yang terintegrasi dengan HTML dan berada pada
server (server side HTML embedded scripting).
Dengan kata lain, PHP merupakan bahasa pemrograman web
yang bersifat sebagai server, memudahkan dalam pengelolaan
database, serta dapat digunakan dalam file HTML.
3. Jquery
Menurut Wahana Komputer (2012:2) “JQuery merupakan
pustaka JavaScript yang dibangun untuk mempercepat dan
memperingkas serta menyederhanakan manipulasi dokumen HTML,
penanganan event, animalasi, dan interaksi Ajax untuk mempercepat
pengembangan web”.
Jquery pertama kali dirilis tahun 2006 oleh John Resig Jquery
menjadi sangat populer hingga digunakan oleh banyak website kelas

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 11

 dunia seperti Google, Amazon, Twitter, ESPN, dan lain-lain.
4. JavaScript
Menurut Sibero (2013:150) “JavaScript adalah suatu bahasa
pemrograman yang dikembangkan untuk dapat berjalan pada web
browser. Pada awalnya JavaScript dikembangkan pada web browser
Netscape oleh Brenden Eich dengan nama Mocha, kemudian berubah
menjadi Live-Script dan yang akhirnya menjadi JavaScript”.
Menurut Arifin dan Community (2008:28) “JavaScript adalah
script program berbasis client yang di eksekusi oleh browser sehingga
membuat halaman web melakukan tugas-tugas tambahan yang tidak
bisa dilakukan oleh script HTML biasa”.

2.3.4. Basis Data

Menurut Aditama (2012:7) “Database adalah tempat media
penyimpanan data kita dalam membuat sebuah program yang berisikan
tabel, field dan record yang diselimuti namanya DBMS (Database
Management System)”.
Di dalam DBMS (Database Management System), terdapat struktur
query yang digunakan untuk mengolah database yang dikenal dengan SQL.
Dalam proses pembuatan database SQL diperlukan sebuah perangkat lunak
yang dikenal dengan nama MySQL. MySQL merupakan salah satu
perangkat lunak untuk sistem manajemen database SQL. MySQL
merupakan tipe data relasional yang artinya MySQL menyimpan datanya
dalam bentuk tabel-tabel yang saling berhubungan. (Wahana Komputer,
2011:15)

2.3.5. Aplikasi Perancangan Web

Dalam perancangan website ini, ada beberapa aplikasi yang digunakan,
diantaranya:
1. Xampp Server
Dalam pembangunan sebuah website pastinya setiap programmer
memerlukan bantuan web server untuk mengkoneksikan file-file

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 12

 website ke basis data. Beberapa web server yang sering digunakan
diantaranya: Apache Web Server, Sun Java System Web Server, Xampp
Server,Wamp server, Xitami Web Server, dan sebagainya. Dalam hal
ini, penulis menggunakan Xampp Server dalam membangun web
tersebut.
Menurut Winpec Solution (2010:1) “XAMPP merupakan suatu
paket instalasi Apache, PHP, dan MySQL”. Dengan aplikasi ini, anda
dapat langsung melakukan instalasi Apache, PHP, dan MySQL
sekaligus Aplikasi XAMPP ini dapat diperoleh cukup dengan
melakukan download.
2. Visual Studio Code
Visual Studio Code adalah Sofware yang sangat ringan, namun
kuat editor kode sumbernya yang berjalan dari desktop. Muncul
dengan built-in dukungan untuk JavaScript, naskah dan Node.js dan
memiliki array beragam ekstensi yang tersedia untuk bahasa lain,
termasuk C ++, C # , Python, dan PHP. Hal ini didasarkan sekitar
Github ini Elektron, yang merupakan versi cross-platform dari Atom
komponen kode-editing, berdasarkan JavaScript dan HTML5. Editor
ini adalah fitur lengkap lingkungan pengembangan terpadu (IDE)
dirancang untuk pengembang yang bekerja dengan teknologi cloud
yang terbuka Microsoft. Visual Studio Code menggunakan open source
NET perkakas untuk memberikan dukungan untuk ASP.NET C # kode,
membangun alat pengembang Omnisharp NET dan compiler Roslyn.
Antarmuka yang mudah untuk bekerja dengan, karena didasarkan pada
gaya explorer umum, dengan panel di sebelah kiri, yang menunjukkan
semua file dan folder Anda memiliki akses ke panel editor di sebelah
kanan, yang menunjukkan isi dari file yang telah dibuka. Dalam hal
ini, editor telah dikembangkan dengan baik, dan menyenangkan pada
mata. Ia juga memiliki fungsi yang baik, dengan intellisense dan
autocomplete bekerja dengan baik untuk JSON, CSS, HTML,
{kurang}, dan Node.js.
Visual Studio Code telah dirancang untuk bekerja dengan alat-

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 13

 alat yang ada, dan Microsoft menyediakan dokumentasi untuk
membantu pengembang bersama, dengan bantuan untuk bekerja
dengan ASP.NET 5, Node.js, dan Microsoft naskah, serta alat-alat
yang dapat digunakan untuk membantu membangun dan mengelola
aplikasi Node.js. Visual Studio Code benar-benar sedang ditargetkan
pada pengembang JavaScript yang ingin alat pengembangannya
lengkap untuk scripting server-side mereka dan yang mungkin ingin
usaha dari Node.js untuk kerangka berbasis NET. Visual Studio Code,
adalah belum solid, lintas platform kode Editor ringan, yang dapat
digunakan oleh siapa saja untuk membangun aplikasi untuk Web.
3. Bootstrap
Bootsrap merupakan Framework ataupun Tools untuk membuat
aplikasi web ataupun situs web responsive secara cepat, mudah dan
gratis. Bootstrap terdiri dari CSS dan HTML untuk mengahasilkan
Grid, Layout, Typography, Table, Form, Navigation, dan lain-lain. Di
dalam Bootstrap juga sudah terdapat jQuery plugins untuk
menghasilkan komponen UI yang cantik seperti Transitions, Modal,
Dropdown, Scrollspy, Tooltip, Tab, Popover, Alert, Button, Carousel
dan lain-lain.
Dengan bantuan Bootstrap, kita bisa membuat responsive
website dengan cepat dan mudah dan dapat berjalan sempurna pada
browser-browserpopuler seperti Chrome, Firefox, Opera dan Internet
Explorer.
Bootstrap diciptakan oleh dua orang programmer di Twitter,
yaitu Mark Otto dan Jacob Thornton pada tahun 2011. Pada saat itu
para programmer di twitter menggunakan berbagai macam tool dan
libary yang mereka kenal dan suka untuk melaksanakan pekerjaan
mereka, sehingga tidak ada standarisasi dan akibatnya sulit untuk
dikelola sehingga Mark Otto dan Jacob Thornton tergerak untuk
menciptakan satu tool ataupun framework yang dapat digunakan
bersama di lingkungan internal twitter. Oleh karena faktor historis
tersebut, walaupun nama resminya hanyalah Bootstrap, namun terkenal

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 14

 di kalangan developer sebagai Twitter Bootstrap.
Sejak diluncurkan pada bulan agustus 2011, Bootstrap telah
berevolusi dari sebuah proyek yang hanya berbasis CSS menjadi
sebuah tool ataupun frameworkyang lebih lengkap yang juga berisi
Javascript Plugin, Icon, Forms dan Button.
Pada januari 2012, Bootstrap merelease versi 2.0 yang
didalamnya sudah memasuki fitur responsive layout. Sejak itu,
popularitas Bootstrap tak tertahankan lagi dan sampai buku ini ditulis,
Bootstrap merupakan project GitHub yang paling banyak dilihat lebih
dari 54.000 user dan juga yang paling banyak di copy(forked) yaitu
sekitar 18.500 kali.
2.3.6. Data Flow Diagram
Pendekatan analisis terstruktur dikembangkan oleh Chris Gane dan
Gane Sarson (1979) melalui buku metodologi struktur analisis dan desain
sistem informasi. Mereka menyarankan untuk menggunakan Data Flow
Diagram (DFD) dalam menggambarkan atau membuat model sistem.
Namanya, Data Flow Diagram seakan-akan mencerminkan penekanan pada
data, namun sebenarnya DFD lebih menekankan segi proses. Adapun
pengertian secara umum dari Data Flow Diagram ini adalah suatu network
yang menggambarkan suatu sistem automat/komputerisasi, manualisasi
atau gabungan dari keduanya, yang penggambarannya disusun dalam
bentuk kumpulan komponen sistem yang saling berhubungan sesuai dengan
aturan mainnya. (Rosa, 2013:69)
DFD sering juga digunakan untuk menggambarkan suatu sistem yang
telah ada atau sistem yang baru yang akan dikembangkan secara logika
tanpa mempertimbangkan lingkungan fisik dimana data tersebut mengalir
(misal lewat telepon atau surat) serta lingkungan fisik dimana data tersebut
akan disimpan (misal hard disk atau disket).
2.3.7. Entity Relationship Diagram
Al Fatta (2007:121) mendefinisikan bahwa “ERD (Entity Relationship
Diagram) adalah gambar atau diagram yang menunjukkan informasi
dibuat, disimpan, dan digunakan dalam sistem bisnis”.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 15

 ERD merupakan representasi data sebagai entitas, atribut dan relasi.
Entitas menggambarkan kumpulan dari segala data, lalu Atribut atau
elemen data merupakan unit terkecil dari data yang dapat menjelaskan apa
yang dimiliki oleh suatu entitas (karakteristik dari entitas) sedangkan relasi
menjelaskan keterkaitan di antara dua entitas yang berbeda.
Entity Relationship Diagram digunakan untuk mempermudah dalam
perancangan database yang mengutamakan untuk permodelan desain
konseptual. Karena Entity Relationship Diagram menggambarkan struktur
dan keterkaitan tabel-tabel data yang menyusun database secara detail.
Sifat hubungan atau relasi antar entitas dapat dibedakan menjadi tiga
jenis (Marimin, 2006:112) sebagai berikut:
1. Hubungan Satu-ke-Satu (One-to-One Relationship)
Akan terjadi jika setiap entitas dalam suatu himpunan entitas
hanya berhubungan dengan satu entitas pada himpunan entitas lain,
dan sebaliknya.
2. Hubungan Satu-ke-Banyak (One-to-Many-Relationship)
Terjadi jika setiap entitas dalam suatu himpunan entitas dapat
berhubungan dengan beberapa entitas pada himpunan entitas lain,
tetapi tidak sebaliknya
3. Hubungan Banyak-ke-Banyak (Many-to-Many-Relationship)
Terjadi jika setiap entitas dalam suatu himpunan entitas dapat
berhubungan dengan beberapa entitas pada himpunan entitas lain,
demikian juga sebaliknya.
Menurut Riyanto (2005:22) “Logical Record Structur (LRS)
merupakan representasi dari struktur record-record pada tabel-tabel yang
terbentuk dari hasil relasi antar himpunan entitas”. Menentukan
kardinalitas, jumlah tabel, dan foreign key (FK).

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 16

 BAB 3
STRUKTUR SISTEM

3.1. Identifikasi Data dan Informasi

Identifikasi data dan informasi diperlukan untuk mengetahui arus data
yang akan masuk ataupun keluar dari masing-masing entitas. Berikut
identifikasi data dan informasi pada sistem informasi pembayaran spp.
Table 3.1 Informasi pada sistem pembayaran SPP
Arus Data
No Entitas
Keluar Masuk
 Data Siswa
 Data Jurusan
 Data Kelas  Informasi Rekap
 Data Jenis Bayar Pembayaran SPP
1 Admin
 Data Tahun  Informasi Tagihan
Pelajaran Pembayaran SPP
 Data User
 Pembayaran Siswa
 Data Siswa  Informasi Rekap
 Data Jurusan Pembayaran SPP
2 Non Admin
 Data Kelas  Informasi Tagihan
 Pembayaran Siswa Pembayaran SPP

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 17

3.2. Alur Proses Sistem Informasi (Flowchart)
Alur program aplikasi dinyatakan dalam sebuah flowchart seperti yang
dapat dilihat pada gambar dibawah ini.
MULAI

Menu Admin
LOGIN

HOME  Home
 From Pembayaran
 From Laporan Rekap Pembayaran
 From Laporan Cetak Tagihan
 From Jurusan
Profil  From Kelas Username & Password
 From Siswa
 From Jenis Bayar
 From User
 From Tahun Pelajaran
Ganti Password  Profil
 Ganti Password
 Logout
Salah
Validasi
LOGOUT Username & Password

Form Laporan
Form Menu Non
Rekap
Pembayaram Admin
END Pembayaran

 Input NIS
 Input  Input tanggal
Pembayaran  Tampilan data HOME
 Tampilan data pembayaran  Home
pembayaran  Cetak rekap  From Pembayaran
 Cetak pembayaran  From Laporan Rekap Pembayaran
pembayaran
Profil  From Laporan Cetak Tagihan
 From Jurusan
 From Kelas
Form Laporan  From Siswa
Form Jurusan
Cetak tagihan  Profil
Ganti Password  Ganti Password
 Logout

 Tampilan data  Tambah

tagihan program studi
LOGOUT
pembayaran  Edit program
 Cetak tagihan studi
pembayaran  Hapus program
studi
 Tampilan data Form Laporan
Form
program studi Rekap
Pembayaram
END Pembayaran

 Input NIS
Form Kelas Form Siswa  Input  Input tanggal
Pembayaran  Tampilan data
 Tampilan data pembayaran
pembayaran  Cetak rekap
 Cetak pembayaran
 Tambahkan  Tambah siswa pembayaran
Kelas  Edit siswa
 Input Siswa  Hapus siswa
 Tampilkan data  Tampilan data Form Laporan
kelas siswa siswa Form Jurusan
Cetak tagihan

 Tampilan data  Tambah

Form Jenis
Form User tagihan program studi
Pembayaran
pembayaran  Edit program
 Cetak tagihan studi
pembayaran  Hapus program
studi
 Tambahkan  Tambah data  Tampilan data
user  Edit data program studi
 Hapus user  Hapus data
 Edit user  Tampilan data
 Tampilkan data jenis
user pembayaran
Form Kelas Form Siswa

Form Tahun
Pelajaran
 Tambahkan  Tambah siswa
Kelas  Edit siswa
 Input Siswa  Hapus siswa
Database  Tampilkan data  Tampilan data
 Tambahkan
phpbayar kelas siswa siswa
Tahun
 Hapus Tahun
 Edit Tahun
 Tampilkan data
tahun pelajaran

Database
phpbayar

Gambar 3.1 Flowchart sistem informasi pembayaran SPP

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 18

3.3. Context Diagram dan Data Flow Diagram
3.3.1. Context Diagram
Context diagram merupakan proses – proses yang berada dalam
sistem, serta proses – proses yang berkaitan dengan user – user yang ada
dalam sistem ini. Berikut merupakan context diagram yang ada dalam
sistem informasi pembayaran spp:

Data Siswa
Data Jurusan
Data Kelas
Data Jenis Bayar
Data Tahun Data Siswa
Pelajaran Data Jurusan
Data User Data Kelas
Pembayaran Siswa Sistem Pembayaran Siswa
Informasi
Admin Non Admin
Pembayaran
SPP
Informasi Siswa Informasi Siswa
Informasi User Informasi Rekap Pembayaran SPP
Informasi Rekap Pembayaran SPP Informasi Tagihan Pembayaran SPP
Informasi Tagihan Pembayaran SPP

Gambar 3.2 DFD level 0 (Context Diagram)

Setelah dibuat context diagram, selanjutnya dibuat Data Flow
Diagram. Pada sistem ini terdapat 2 DFD yaitu DFD level 0, DFD level 1,
dan DFD level 2. DFD level 1 merupakan subproses dari DFD level 0
tersebut, sedangkan DFD level 2 merupakan subproses dari DFD level 1.
Berikut merupakan bentuk DFD level 0 dari sistem informasi beasiswa yang
dibangun :

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 19

3.3.2. Data Flow Diagram
3.3.2.1. Level 1
Tbl_pembayaran Informasi Laporan

Record
Informasi Laporan

Data Pembayaran

Login
4.0
Laporan
1.0 2.0
Login Proses Confirm Tbl_user Hak Akses Pengolahan
Data Pembayaran Login Hak Akses Hak Akses

Non Admin
Hak Akses
Informasi Pembayaran
Admin
3.0
Data Pembayaran Record Tbl_pembayaran Informasi Pembayaran
Pembayaran
Data Master
Informasi Data Master

Data Pembayaran
5.0
Data Master
Data Master

Tbl_kelas
Record Tbl_prodi Informasi Data Master
Record

Tbl_siswa

Tbl_kelas
Tbl_user
Tbl_siswa
Tbl_tapel
Tbl_prodi
Tbl_jenis_bayar

Gambar 3.3 DFD level 1

3.3.2.2. Level 2 Proses 4
Data Pembayaran

4.1
Data Pembayaran Rekap Record Tbl_pembayaran
Pembayaran

Laporan Rakap Pembayaran SPP

Laporan Rakap Pembayaran SPP
Admin Non Admin
Laporan Tagihan Pembayaran SPP
Laporan Tagihan Pembayaran SPP

4.2
Data Pembayaran Cetak Record Tbl_pembayaran
Tagihan

Data Pembayaran

Gambar 3.4 DFD level 2 Proses 4

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 20

3.3.2.3. Level 2 Proses 5

Tbl_jenis_bayar

Tbl_prodi
Informasi Program Studi

Informasi Jenis Bayar

Informasi Program Studi

Record

Record
5.4
Jenis Bayar
5.1
Data Jurusan
Jurusan
Data Jenis Bayar

Data Kelas

Data Jurusan
5.3
Data Kelas Record Tbl_kelas Informasi Kelas
Kelas
5.5 Non Admin
Data User Admin
User Informasi Kelas
Informasi Siswa Informasi Siswa
Informasi User

Data Tahun Pelajaran

Record 5.2
Data Kelas Record Tbl_siswa
Siswa

Informasi Tahun Pelajaran Data Siswa

Tbl_user

5.6
Tahun Record Tbl_tapel
Pelajaran

Gambar 3.5 DFD level 2 Proses 5

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 21

3.4. Entity Relationship Diagram
Alur aplikasi dinyatakan dalam sebuah ERD (Entity Relationship
Diagram) seperti yang dapat dilihat pada gambar dibawah ini.
iduser

username
idprodi
M M
password user Mencatat prodi
prodi
admin

fullname

Memiliki

M kelas
kelas
Tgl_bayar
kelas Th_pelajaran
Pembayaran nis
jumlah
nis
Bulan
1

Memiliki
Melakukan

M nis

M
Jenis pembayaran Menentukan Siswa nama

idprodi
Th_pelajaran
jumlah

tingkat

Gambar 3.6 ERD Sistem Informasi Pembayaran SPP

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 22

 BAB 4
DESAIN SISTEM
4.1. Desain Database
Desain database sistem informasi pembayaran SPP mempunyai 1
database dan didalamnya terdapat 6 tabel dinyatakan dalam rankaian detail
seperti yang dapat dilihat pada gambar 4.1.

Gambar 4.1 Desain Database

4.2. Desain Interface
4.2.1. Login
Login digunakan admin dan non admin untuk masuk ke aplikasi dengan
memasukan username dan password pada gambar 4.2.

Gambar 4.2 Interface Login

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 23

4.2.2. Menu Home
Menu home adalah untuk tampilan pertama kali setelah login seperti pada
gambar 4.3.

Gambar 4.3 Interface Data Home

4.2.3. Data Pembayaran
Form pembayaran digunakan untuk proses pembayaran SPP yang bisa
dilakukan oleh semua user seperti pada gambar 4.4.

Gambar 4.4 Interface Data Pembayaran

4.2.4. Data Laporan Rekap Pembayaran
Form laporan rekap pembayaran SPP untuk mengetahui siapa saja yang
sudah membayar SPP pada rentang bulan tertentu seperti gambar 4.5

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 24

 Gambar 4.5 Interface Data Laporan Rekap Pembayaran
4.2.5. Data Laporan Catak Tagihan
Form laporan cetak tagihan pembayaran SPP untuk mengetahui siapa saja
yang sudah membayar dan belum membayar SPP seperti gambar 4.6.

Gambar 4.6 Interface Data Laporan Cetak Tagihan

4.2.6. Data Jurusan
Form jurusan digunakan untuk menambah, menghapus, dan mengedit
data program studi yang bisa dilakukan oleh semua user seperti gambar
4.7.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 25

 Gambar 4.7 Interface Data Jurusan
4.2.7. Data Siswa
Form siswa digunakan untuk menambah, menghapus, dan mengedit data
siswa yang bisa dilakukan oleh semua user seperti gambar 4.8.

Gambar 4.8 Interface Data Siswa

4.2.8. Data Kelas
Form kelas digunakan untuk menambah dan menghapus data kelas yang
bisa dilakukan oleh semua user seperti gambar 4.9.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 26

 Gambar 4.9 Interface Data Kelas
4.2.9. Data Jenis Bayar
Form jenis bayar digunakan untuk menambah, menghapus, mengedit data
jenis pembayaran dan hanya bisa dilakukan petugas yang statusnya admin
seperti pada gambar 4.10.

Gambar 4.10 Interface Data Jenis Pembayar

4.2.10. Data User
Form user digunakan untuk menambah, menghapus, mengedit data user
dan hanya bisa dilakukan petugas yang statusnya admin seperti pada
gambar 4.11.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 27

 Gambar 4.11 Interface Data User
4.2.11. Data Tahun Pelajaran
Form tahun pelajaran digunakan untuk menambah, menghapus, mengedit
data tahun pelajaran dan hanya bisa dilakukan petugas yang statusnya
admin seperti pada gambar 4.12.

Gambar 4.12 Interface Data Tahun Pelajaran

4.2.12. Data Profil
Form data profil digunakan untuk mengetahui identitas profil user yang
digunakan seperti pada gambar 4.13.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 28

 Gambar 4.13 Interface Data Profil
4.2.13. Data Ganti Password
Form data ganti password digunakan untuk menganti password user
dengan menginput password lama dan mengganti password baru seperti
gambar 4.14.

Gambar 4.14 Interface Data Ganti Password

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 29

 BAB 5
PENUTUPAN
5.1. Kesimpulan
SPP dalam pendidikan mempunyai peran penting dalam aktivitas
kegiatan sekolah. Sistem informasi pembayaran SPP berbasis web yang
diterapkan dapat berjalan baik dan memiliki fitur seperti data jurusan, data
siswa, data siswa, data jenis pembayaran, data user, data tahun pelajaran,
data pembayaran spp, laporan rekap pembayaran, dan laporan tagihan spp.
Sistem informasi pembayaran SPP ini dapat mempermudah bendahara
dalam mengelola data administrasi pembayaran SPP siswa. Semua data
dapat saling berintegrasi sehingga sangat efektif dan efisien. Pembayaran
SPP berbasis web ini sangat membantu bendahara dalam menyelesaikan
kendala-kendala yang terjadi.
5.2. Saran
Berdasarkan hasil yang telah diuraikan, maka saran dalam penelitian
sebagai berikut:
a.) Adanya proses keterangan pembayaran, apakah pembayaran
dengan bantuan beasiswa atau tidak.
b.) Pada sistem informasi ini belum terdapat validasi pembayaran
tunggakan untuk dapat memberikan sanksi pada siswa yang
melakukan pembayaran tunggakan lebih dari waktu yang
ditentukan.
c.) Agar sistem ini dikembangkan sehingga laporan yang ditampilkan
bisa dalam bentuk grafik.
d.) Pada perangkat lunak ini belum terdapat keterangan pembayaran
spp yang dicicil.

FENDI PRADANA-201757017 | APLIKASI PEMBAYARAN SPP 30