BAB III

PEMBAHASAN

3.1 Metode Pengembangan Perangkat Lunak

3.1.1 Laporan keuangan Berbasis Website

Sistem informasi laporan keuangan berbasis website pada sekolah menengah

IT Madani Sukabumi adalah website yang memuat beberapa fitur antara lain landing

page yang berisi informasi instansi dan berita ter-update, fitur dashboard siswa yang

mampu mengetahui tagihan pembayaran siswa baik SPP ataupun non-SPP dan juga

status dari pembayaran tersebut, ketiga fitur dashboard admin instansi yang memiliki

beberapa menu seperti melakukan proses pembukuan dan pembagian hasil laporan

keuangan baik aliran kas pengeluaran dan pemasukan yang dilakukan secara online,

lalu dari laporan tersebut bisa dibagikan hasilnya kepada pihak terkait dengan cara di

download terlebih dahulu lalu dibagikan dengan pihak yang dikehendaki dalam

bentuk export file pdf. Selain itu admin instansi juga bisa mengolah data baik

tambah, edit, ataupun hapus data siswa/i sekaligus mengirimkan tagihan pembayaran

kepada para siswa/i. adapun untuk proses CRUD (Create, Read, Update, and Delete)

admin instansi menggunakan metode upload file csv yang berisi data-data siswa/i

yang kemudian secara realtime terintegrasi dengan database aplikasi. Terakhir,

admin bisa melakukan pembuatan berita atau informasi yang akan ditampilkan di

halaman landing page.

Kelebihan dari sisitem ini antara lain adalah memudahkan dalam proses baik

pembukuan maupun administrasi serta memudahkan penyebaran informasi terkait

instansi, selain itu dengan adanya website ini instansi bisa terbackup data-datanya

secara online. Website laporan keuangan SMP IT Madani memiliki fungsi pertama

bisa menjadi media promosi berbasis website untuk pihak instansi. Kedua, membuat
laporan keuangan berupa catatan pemasukan, tagihan dan pengeluaran kas pihak

instansi secara digital dan bagi siswa bisa melakukan konfirmasi pembayaran melalui

website. Ketiga, membagikan hasil laporan keuangan dari pemasukan, pengeluaran,

dan tagihan dalam bentuk digital ataupun file seperti .csv atau .pdf dan sesuai dengan

export laporan yang diinginkan.

Metode yang digunakan oleh penulis untuk pengembangan perangkat lunak ini

menggunakan metode waterfall menurut Rosa dan Shalahuddin dalam (Juniardi

Dermawan & Hartini, 2017) yang terbagi menjadi lima tahapan, yaitu:

1. Analisis Kebutuhan Perangakat Lunak

Proses pengumpulan yang kebutuhan dilakukan secara intensif untuk

menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami seperti apa

yang dibutuhkan oleh user. Spesifikasi kebutuhan analisis perangkat lunak pada

tahap ini perlu untuk didokumentasikan.

Dalam hal ini kebutuhan yang dimaksud adalah pengembangn fitur dalam

sistem. Beberapa fitur yang mana menjadi solusi dari sistem laporan keuangan

SMP IT Madani Sukabumi antara lain:

a. Sistem terdiri dari halaman landing page yang mana khalayak umum dapat

melihat profil dan postingan berita dari instansi secara online.

b. Sistem terdiri dari halaman dashboard siswa/i yang dapat melihat tagihan

yang harus dibayarkan, serta dapat melakukan pembayaran dengan teknologi

Payment Gateway, serta siswa/i dapat melihat rekapitulasi dari semua

pembayaran yang telah dilakukan.

c. Sistem terdiri dari halaman dashboard admin instansi yang dapat melakukan

proses pembukuan dan pembagian hasil laporan keuangan baik aliran kas

pengeluaran dan pemasukan yang dilakukan secara online, lalu dari laporan
 tersebut bisa dibagikan hasilnya kepada pihak terkait dengan cara di download

terlebih dahulu lalu dibagikan dengan pihak yang dikehendaki dalam bentuk

export file pdf. Selain itu admin instansi juga bisa mengolah data baik tambah,

edit, ataupun hapus data siswa/i sekaligus mengirimkan tagihan pembayaran

kepada para siswa/i. adapun untuk proses CRUD (Create, Read, Update, and

Delete) admin instansi menggunakan metode upload file csv yang berisi data-

data siswa/i yang kemudian secara realtime terintegrasi dengan database

aplikasi.

d. Admin bisa melakukan pembuatan berita atau informasi yang akan

ditampilkan di halaman landing page.

Selain dokumentasi fitur juga diperlukan dokumentasi dari instansi sebagai bukti

bahwa pengerjaan dilakukan dengan sebenar-benarnya. Dokumentasi instansi ini

meliputi profil, visi-misi, bagan struktural dan sebagainya.

2. Desain

Desain perangkat lunak merupakan proses multi langkah yang memfokuskan

pada desain pembuatan program perangkat lunak diantaranya struktur data,

arsitektur perangkat lunak, representasi antar muka, dan prosedur dalam

pengkodean.

Sistem informasi laporan keuangan berbasis website dalam tahap pendesaian

di menggunakan website Figma sebagai bahan pembuatan prototype dari sebuah

website. Dari desain yang sudah dibuat menjadi terlihat flow dari User interface.

Selain itu juga ada ERD (Entitiy Relationship Diagram), LRS (Logical Record

Structure), dan UML (Unified Modelling Language) seperti Usecase diagram,

Activity diagram dan Sequence Diagram yang berfungsi sebagai penggambaran

struktur dan relasi database dan alur dari aplikasi tersebut.

3. Pembuatan Kode Program

Pada tahap Desain dilanjutkan dengan pentranslasikan ke dalam program

perangkat lunak. Hasil dari tahap ini yaitu program komputer harus sesuai dengan

desain yang telah dibuat pada tahap desain. Pentranslasian dari rangkaian

antarmuka yang dibuat sebelumnya ke tahap pembuatan kode program agar sesuai

dengan desain yang dirangkai.

Pembuatan kode program dalam website ini menggunakan framework

ReactJS sebagai pembuatan kode program untuk front-end dan CodeIgniter

sebagai framework untuk backend.

4. Pengujian

Untuk tahap Pengujian memfokuskan pada perangkat lunak yaitu dari segi

logic dan fungsional serta memastikan bahwa semua bagian sudah diuji. Hal ini

dilakukan untuk meminimalisi kesalahan (error) dan memastikan keluaran

(output) yang dihasilkan sesuai dengan yang diinginkan.

5. Pendukung (support) atau pemeliharaan (maintenancce)

Tidak menutup kemungkinan sebuah perangkat lunak (software) mengalami

perubahan ketika sudah dikirimkan ke user. Perubahan perangkat lunak tersebut

bisa terjadi karena adanya suatu kesalahan yang muncul dan tidak terdeteksi pada

saat pengujian atau perangkat lunak harus beradaptasi dengan lingkungan baru.

Tahap ini dapat mengulangi proses pengembangan mulai dari analisis spesifikasi

untuk perubahan perangkat lunak yang sudah ada, akan tetapi tidak untuk

membuat perangkat lunak baru. Oleh karena itu, pemeliharaan harus dilakukan

secara berkala agar dapat memperbaiki kesalahan (error) dan meningkatkan fitur

baru.
3.1.2 Tinjauan Instansi

Profil dari SMP IT Madani meliputi sejarah, visi misi dan bagan struktural.

1. Sejarah SMP IT Madani

Pada tahun 2011, Bapak Dr. Beni Kurniawan mendatangi MD/ MI Al-Ihsan

Jl. Kenari Kota Sukabumi. Dan kebetulan mengantarkan anak satu-satunya yang

Bernama Mochammad Imam Eka Putra mengaji di Madrasah Diniyah Al- Ihsan

Jl. Kenari Kota Sukabumi. Setelah diamat-amati tempat MD Al-Ihsan sangat

bagus untuk didirikan Sekolah SMP. Maka Bapak Dr. Beni Kurniawan

menghadap ke Kepala Sekolah MD Al-Ihsan, untuk menceritakan maksud dan

tujuannya yaitu untuk meminjam tempat untuk dijadikan sekolah SMP IT Madani.

Setelah dikomunikasikan dengan Kepala Sekolah MD Al-Ihsan dan juga dari

pihak Yayasan Al-Ihsan, maka diijinkan untuk mendirikan SMP IT Madani

ditempat tersebut. Maka pada bulan Juni 2011 Bapak Dr. Beni Kurniawan beserta

pengurus Yayasan Al-Ihsan mencari siswa disekitar MD Al-Ihsan. Dan

alhamdulillah dengan kerjasama dengan warga setempat, pada bulan juni 2011

dapatlah siswa pertama sebanyak 7 orang. Lalu bertambah menjadi 12 orang

siswa. Maka operasional sekolah mulai berjalan pada bulan 25 Juli 2011. Pada

tahun 2012, mendapat ijin operasional dari Dinas Pendidikan Kota Sukabumi.

Dan alhamdulillah, pada bulan Juli 2013 dapat membeli tanah dan dibangun di Jl.

Baros RT. 01 RW. 07 Nangela Baros Kota Sukabumi. Dan selesai dibangun

Sekolah SMP IT Madani pada 1 Juli 2014, dan pada tanggal dan bulan tersebut,

sekolah SMP IT Madani pindah ke Alamat JL. Baros RT. 01 RW. 07 Nangela

Baros Kota Sukabumi Jawa Barat.

2. Visi Misi

Adapun visi misi lembaga adalah sebagai berikut:

Visi: BERPRESTASI UNGGUL, BERPERILAKU AKHLAKUL KAROMAH.

Misi:

a. Meningkatkan mutu pembelajaran yang mencakup IPTEK dengan

menjungjung tinggi budaya bangsa dan budi pekerti luhur.

b. Menghasilkan tamatan yang cerdas, terampil, kompetitif, dan mandiri.

c. Menanamkan jiwa kewirausahaan (enterpreneurship).

d. Menghasilkan hubungan yang harmonis dan saling menguntungkan antara

sekolah dunia industri dan dunia usaha.

3. Bagan Struktural

Bagan struktural SMP IT Madani adalah sebagai berikut:

*Sumber: Dokumen SMP IT Madani

Gambar III.1
Struktur Organisasi SMP IT Madani
3.2 Tahapan Pengembangan Perangkat Lunak

Tahapan pengembangan perangkat lunak menjelaskan implementasi dari sub-bab

pertama yakni metode pengembangan perangkat lunak.

3.2.1 Analisis Kebutuhan

Kebutuhan pengguna dalam website yang dibangun dapat dikelompokan

menjadi tiga tingkatan yang dapat mengaksesnya, yaitu khalayak umum, siswa-siswi,

dan admin website yang ditunjuk oleh pihak sekolah. Kebutuhan masing-masing

pengguna antara lain:

1. Khalayak Umum

Website menampilkan profil SMP IT Madani Sukabumi dan juga beberapa

berita atau informasi lainnya. Halaman ini disebut landing page.

2. Siswa-siswi

a. Melakukan login atau masuk menggunakan akun yang sudah disediakan oleh

pihak sekolah untuk mengakses dashboard siswa-siswi.

b. Melihat rekapitulasi pembayaran yang sudah atau belum dibayarkan.

c. Melakukan pembayaran tagihan baik SPP atau non-SPP melalui kode yang

telah dilakukan.

3. Admin Website

a. Melakukan login atau masuk menggunakan akun yang sudah disediakan oleh

pihak sekolah untuk mengakses dashboard admin.

b. Melihat grafik pemasukan dan pengeluaran dan total di kas dihalaman

dashboard.

c. Menambah, melihat, mengedit, menghapus, dan export data penerimaan di

halaman penerimaan di dashboard admin.

 d. Menambah, melihat, mengedit, menghapus, dan export data pengeluaran di

halaman penerimaan di dashboard admin.

e. Melihat dan meng-export, rekapitulasi data pembayaran tagihan oleh siswa di

halaman reakpitulasi di dashboard admin.

f. Menambah, melihat, mengedit dan menghapus data siswa dengan metode

upload file .csv di halaman data siswa di dashboard admin.

g. Menambah, melihat, mengedit dan menghapus data berita atau infomasi

lainnya di halaman berita di dashboard admin.

3.2.2 Rancangan Dokumen

Rancangan dokumen terdiri dari:

1. Rancangan dokumen masukan

Rancangan dokumen masukan berfungsi untuk menjelaskan mengenai

dokumen masukan yang digunakan pada sistem website. Dokumen berisi data-

data yang kemudia dijadikan bahan untuk menghasilkan dokumen keluaran yang

diinginkan sesuai kebutuhan.

1 Nama Dokumen : Data Siswa dan siswi

Fungsi : Sebagai data siswa dan siswi yang terdafatar di

instansi

Sumber : Siswa dan siswi SMP IT Madani

Tujuan : Admin

Media : Tampilan Layar

Jumlah :-

Frekuensi : Tahunan

Bentuk : .csv
2. Rancangan dokumen keluaran

Rancangan dokumen masukan berfungsi untuk menjelaskan mengenai dokumen

keluaran yang dihasilkan pada sistem website.

1 Nama Dokumen : Data Jumlah Penerimaan

Fungsi : Sebagai data penerimaan yang diperoleh instansi

Sumber : dana penerimaan meliputi SPP dan BOS dan lain

sebagainya di SMP IT Madani

Tujuan : Admin

Media : Tampilan Layar

Jumlah :-

Frekuensi : Tahunan

Bentuk : .pdf

2 Nama Dokumen : Data Jumlah Belanja

Fungsi : Sebagai data belanja / pengeluaran yang belanjakan

instansi

Sumber : dana belanja yang diterima oleh SMP IT Madani dan

dibelanjakan

Tujuan : Admin

Media : Tampilan Layar

Jumlah :-

Frekuensi : Tahunan

Bentuk : .pdf
3.2.3 Desain

Desain disini meliputi bebrapa hal seperti ERD (Entitiy Relationship

Diagram), LRD (Logical Record Structure), dan desain User Interface.

1. ERD (Entitiy Relationship Diagram)

*sumber : dokumen pribadi

Gambar III.2
ERD (Entitiy Relationship Diagram)
2. LRS (Logical Record Structure)

*sumber : dokumen pribadi

Gambar III.3
LRS (Logical Record Structure)
3. UML (Unifed Modelling Language)

UML ini terdiri dari beberapa diagram diantaranya:

a. Usecase Diagram

Usecase diagram terdiri dari beberapa diagram didasarkan pada role

atau pengguna website:

1) Usecase Diagram User Umum

*sumber : dokumen pribadi

Gambar III.4
Usecase Diagram User Umum
 Tabel III.1
Deskripsi Usecase Diagram User Umum

Usecase Mengakses halaman https://smpitmadani.sch.id/

Name

Requirment A

Goal Dapat Mengakses halaman

https://smpitmadani.sch.id/ dan melihat informasi
Instansi dan melihat artikel

Pre- User belum mengakses

Condition

Post- User bisa mengakses halaman

Condition

Failed- Tidak bisa mengakses halaman

Condition

Main Flow 1. User membuka software pengakses baik

Google Chrome, Mozila Firefox, atau
Microsoft Edge
2. Mengakses/memasukkan url
https://smpitmadani.sch.id/
3. Masuk ke halaman website SMP IT
Madani

Invariant -
2) Usecase Diagram Siswa

*sumber : dokumen pribadi

Gambar III.5
Usecase Diagram Siswa
 Tabel III.2
Deskripsi Usecase Diagram Siswa Melihat Artikel

Usecase Melihat artikel

Name

Requirment A

Goal Dapat Mengakses halaman

https://smpitmadani.sch.id/ dan melihat informasi
Instansi dan melihat artikel

Pre- User belum mengakses

Condition

Post- User bisa mengakses halaman

Condition

Failed- Tidak bisa mengakses halaman

Condition

Main Flow 1. User membuka software pengakses baik

Google Chrome, Mozila Firefox, atau
Microsoft Edge
2. Mengakses/memasukkan url
https://smpitmadani.sch.id/
3. Masuk ke halaman website SMP IT Madani
4. Melihat Artikel dan Informasi SMP IT
Madani

Invariant -

Tabel III.3
Deskripsi Usecase Diagram Siswa Login Dashboard

Usecase Login
Name

Requirment A

Goal Siswa dapat login ke Dashboard Siswa

Pre- Siswa memilih menu login

Condition

Post- Siswa dapat login untuk mengakses Dashboard

Condition

Failed- Siswa tidak dapat login ke Dashboard

Condition

Main Flow 1. Siswa memilih menu login

2. Siswa Memasukkan username & password
yang sudah terdaftar

Invariant -

Tabel III.4
Deskripsi Usecase Diagram Siswa Bayar Tagihan

Usecase Siswa Bayar Tagihan

Name

Requirment A

Goal Siswa dapat melihat detail tagihan pembayaran di

Dashboard Siswa dan membayar lewat pihak ketiga
(Payment Gateway)

Pre- Siswa memilih menu tagihan di Dashboard Siswa

Condition

Post- Siswa dapat mendapatkan kode bayar dan melakukan

Condition transfer dari pihak ketiga(Payment Gateway)

Failed- Siswa tidak dapat membayar tagihan

Condition

Main Flow 1. Siswa memilih menu Tagihan di Dashboard

siswa
2. Siswa klik bayar dan akan mendapatkan kode
untuk transfer

Invariant -

Tabel III.5
Deskripsi Usecase Diagram Siswa Rekapitulasi Tagihan

Usecase Rekapitulasi Tagihan Siswa

Name

Requirment A

Goal Siswa dapat melihat Rekapitulasi Tagihan yang

 sudah dibayarkan

Pre- Siswa memilih menu rekapitulasi di Dashboard

Condition Siswa

Post- Siswa dapat melihat detail rekapitulasi pembayaran

Condition

Failed- Siswa tidak dapat melihat rekapitulasi pembayaran

Condition

Main Flow 1. Siswa memilih menu Rekapitulasi di

Dashboard siswa

Invariant -

3) Usecase Diagram Admin

*sumber : dokumen pribadi

Gambar III.6
Usecase Diagram Admin

Tabel III.6
Deskripsi Usecase Diagram Admin Login Dashboard

Usecase Login
Name

Requirment A

Goal Admin dapat login ke Dashboard Admin

Pre- Admin memilih menu login

Condition

Post- Admin dapat login untuk mengakses Dashboard

Condition

Failed- Admin tidak dapat login ke Dashboard

Condition

Main Flow 1. Admin memilih menu login

2. Admin Memasukkan username & password
yang sudah terdaftar

Invariant -

Tabel III.7
Deskripsi Usecase Diagram Admin Mengelola Artikel

Usecase Admin mengelola Artikel

Name

Requirment A

Goal Admin dapat menambah, mengedit dan menghapus

artikel

Pre- Admin telah login

Condition

Post- Data artikel tersimpan, terupdate, atau terhapus

Condition

Failed- Admin tidak dapat mengelola artikel

Condition

Main Flow 1. Admin melakukan login

2. Admin mengelola Artikel

Invariant -
Tabel III.8
Deskripsi Usecase Diagram Admin Mengelola Pemasukan

Usecase Admin mengelola pemasukan

Name

Requirment A

Goal Admin dapat menambah, mengedit dan menghapus

pemasukan

Pre- Admin telah login

Condition

Post- Data pemasukan tersimpan, terupdate, atau terhapus

Condition

Failed- Admin tidak dapat mengelola artikel

Condition

Main Flow 1. Admin melakukan login

2. Admin mengelola pemasukan

Invariant -

Tabel III.9
Deskripsi Usecase Diagram Admin Mengelola Pengeluaran

Usecase Admin mengelola pengeluaran

Name

Requirment A

Goal Admin dapat menambah, mengedit dan menghapus

pengeluaran

Pre- Admin telah login

Condition

Post- Data pengeluaran tersimpan, terupdate, atau

Condition terhapus

Failed- Admin tidak dapat mengelola pengeluaran

Condition

Main Flow 1. Admin melakukan login

2. Admin mengelola pengeluaran

Invariant -

Tabel III.10
Deskripsi Usecase Diagram Admin Mengelola Tagihan

Usecase Admin mengelola tagihan

Name

Requirment A

Goal Admin dapat menambah, mengedit dan menghapus

tagihan

Pre- Admin telah login

Condition

Post- Data tagihan tersimpan, terupdate, atau terhapus

Condition

Failed- Admin tidak dapat mengelola tagihan

Condition

Main Flow 1. Admin melakukan login

2. Admin mengelola tagihan

Invariant -

Tabel III.11
Deskripsi Usecase Diagram Admin Mengelola Data Siswa

Usecase Admin mengelola data siswa

Name

Requirment A

Goal Admin dapat menambah, mengedit dan menghapus

data siswa

Pre- Admin telah login

Condition

Post- Data siswa tersimpan, terupdate, atau terhapus

Condition
Failed- Admin tidak dapat mengelola data siswa
Condition

Main Flow 1. Admin melakukan login

2. Admin mengelola data siswa

Invariant -

Tabel III.12
Deskripsi Usecase Diagram Admin Melihat Rekapitulasi

Usecase Admin melihat rekapitulasi data pembayaran

Name

Requirment A

Goal Admin dapat melihat rekapitulasi data pembayaran

dari siswa

Pre- Admin telah login

Condition

Post- menampilkan rekapitulasi pembayaran siswa 

Condition

Failed- Admin tidak dapat me;lihat data rekapitulasi

Condition pembayaran

Main Flow 1. Admin melakukan login

2. Admin melihat rekapitulasi pembayaran
siswa

Invariant -
b. Activity Diagram

1. Activity Diagram Membuat Tagihan

*sumber : dokumen pribadi

 Gambar III.7
Activity Diagram Pembuatan Tagihan

2. Activity Diagram Pembayaran Tagihan

*sumber : dokumen pribadi

Gambar III.8
 Activity Diagram Proses Pembayaran Tagihan

3. Activity Diagram Pembuatan Penerimaan

*sumber : dokumen pribadi

Gambar III.9
Activity Diagram Pembuatan Penerimaan

4. Activity Diagram Laporan Tagihan

 *sumber : dokumen pribadi

Gambar III.10
Activity Diagram Laporan Tagihan

c. Sequence Diagram
 1. Sequence Diagram Login Siswa & Admin

*sumber : dokumen pribadi

Gambar III.11
Sequence Diagram Login Siswa & Admin

2. Sequence Diagram Tambah Tagihan Pembayaran Siswa

*sumber : dokumen pribadi

Gambar III.12
Sequence Diagram Tambah Tagihan Pembayaran Siswa

3. Sequence Diagram Pembayaran Tagihan oleh Siswa

 *sumber : dokumen pribadi

Gambar III.13
Sequence Diagram Pembayaran Tagihan oleh Siswa

1. UI (User Interface)

Dalam pendesainan UI penulis menggunkan website figma dan

untuk tampilan yang ditampilkan penulis disini meliputi halaman

Homepage/Landingpage, Login, Dashboard Admin dan Dashboard Siswa/i,

tambah tagihan, dan daftar tagihan.

a. Homepage / Landingpage
 *sumber : dokumen pribadi

Gambar III.14
Halaman Landingpage

b. Login page
 *sumber : dokumen pribadi

Gambar III.15
Halaman Login Page

c. Dashboard Admin

*sumber : dokumen pribadi

Gambar III.16
Dashboard Admin

d. List dan tambah tagihan ke siswa

 *sumber : dokumen pribadi

Gambar III.17
Dashboard Tambah Tagihan Admin

*sumber : dokumen pribadi

Gambar III.18
Dashboard Tambah Tagihan Admin

e. List dan bayar tagihan oleh siswa

 *sumber : dokumen pribadi

Gambar III.19
Dashboard Tabel Tagihan Siswa

3.2.4 Pembuatan Kode Program

Pembuatan kode program dalam sistem laporan keuangan berbasis website

SMP IT Madani menggunakan framework ReactJs untuk frontend dan CodeIgniter

untuk backend.

1. Frontend

Login

FE

src/pages//auth/login.jsx

import { GoogleLogin } from "@react-oauth/google";

import {

Checkbox,

Col,
 Image,

Input,

Row,

Typography,

Button,

message,

Form,

} from "antd";

import jwtDecode from "jwt-decode";

import React, { useEffect, useRef, useState } from "react";

import { Link, useNavigate } from "react-router-dom";

import { googleClient } from "../../config/google";

import { useAuthPersist } from "../../store/authPersist";

import { ColorPallete } from "../../utils/colorPalette";

import {

useLaptopQuery,

useSmallMobileQuery,

useTabletQuery,

} from "../../hooks/useMediaQuery";

import { usersRepository } from "../../repository/auth";

import axios from "axios";

import { baseurl } from "../../config/baseUrl";

function LoginPage() {

const [isLoading, setLoading] = useState(false);

const { data, create, remove, update, clear, isAuthenticated } =

useAuthPersist();

let Navigate = useNavigate();

const usernameRef = useRef();

const passwordRef = useRef();

const checkboxRef = useRef();

//responsive

const isSmallMobile = useSmallMobileQuery();

const isLaptop = useLaptopQuery();

const isTablet = useTabletQuery();

let dataLogin = ''

const handleSubmit = async (values) => {

try {

setLoading(true);

const formData = {

username: values.username,

password: values.password,

};

const result = await usersRepository.api.useLogin(formData);

await create(true, {

id: new Date().toISOString(),

isAuthenticated: true,

data: jwtDecode(result.data.access_token),
 accessToken: result.data.access_token,

});

dataLogin = jwtDecode(result.data.access_token)

if (dataLogin.role == "ADMIN") {

message.success('Selamat Datang Admin')

await Navigate("/dashboard");

await setLoading(false);

} else if (dataLogin.role == "STUDENT") {

message.success('Selamat Datang Siswa')

await Navigate(`/siswa/dashboard/tagihan/${dataLogin.username}`)

setLoading(false);

} else {

await setLoading(false);

} catch (error) {

console.log("ini error => ", error);

message.info(error.response.data.message);

setLoading(false);

};

useEffect(() => {

const timeout = setTimeout(() => {

if (isAuthenticated && data[0].credential.data.role == "ADMIN") {

message.info("Anda sudah login");

 Navigate("/dashboard");

} else if (isAuthenticated && data[0].credential.data.role == "SISWA") {

message.info("Anda SISWA sudah login");

}, 5000);

return () => {

clearTimeout(timeout);

};

}, [isAuthenticated]);

return (

<div>

<Row justify={"center"} align={"middle"} className="position-relative">

<Col lg={{ span: 16 }} md={{ span: 16 }} sm={{ span: 24 }}>

<div className="min-vh-100">

<Row

justify={"start"}

align={"middle"}

className={`${

isLaptop ? "min-vh-100" : isSmallMobile ? "" : null

}`}

>

<Col

lg={{ span: 12, offset: 4 }}

md={{ span: 16, offset: 2 }}

sm={{ span: 22, offset: 1 }}

xs={{ span: 24 }}

>

<Typography.Title className="text-center mb-5 mt-5">

Wellcome Back!

</Typography.Title>

<Form

name="basic"

initialValues={{

remember: false,

}}

onFinish={handleSubmit}

onFinishFailed={(e) => console.log(e)}

autoComplete="off"

layout="vertical"

>

<Form.Item

label="Username atau NIS"

name="username"

rules={[

required: true,

message: "Please input your username!",

},

]}
>

<Input

className="border border-2 border-primary"

placeholder="Masukan Username atau Nomer Induk Siswa"

/>

</Form.Item>

<Form.Item

label="Password"

name="password"

rules={[

required: true,

message: "Please input your password!",

},

]}

>

<Input.Password

className="border border-2 border-primary"

placeholder="Masukan Password"

/>

</Form.Item>

<Form.Item>

<Button
 type="primary"

htmlType="submit"

className="w-100"

loading={isLoading}

>

Submit

</Button>

</Form.Item>

</Form>

</Col>

</Row>

</div>

</Col>

<Col lg={{ span: 8 }} md={{ span: 8 }} sm={{ span: 8 }}>

{isLaptop ? (

<div

className="min-vh-100"

style={{ backgroundColor: ColorPallete.primary }}

/>

) : isTablet ? (

<div

className="min-vh-100"

style={{ backgroundColor: ColorPallete.primary }}

/>

) : isSmallMobile ? null : null}

</Col>

{isLaptop ? (

<div>

<div className="position-absolute top-50 start-50 translate-middle-y">

<Image src="/laptop.svg" preview={false} alt="laptop" />

</div>

<div className="position-absolute bottom-0 start-0 translate-bottom-y">

<Image

src="/Rectangle-login1.svg"

preview={false}

width={"65%"}

height={"auto"}

alt="laptop"

/>

</div>

<div className="position-absolute bottom-0 start-0 translate-bottom-y">

<Image

src="/Rectangle-login2.svg"

preview={false}

width={"65%"}

height={"auto"}

alt="laptop"

/>

</div>

</div>
) : isTablet ? (

<div>

<div className="position-absolute top-50 start-50 translate-middle-y">

<Image src="/laptop.svg" preview={false} alt="laptop" />

</div>

<div className="position-absolute bottom-0 start-0 ">

<Image

src="/Rectangle-login1.svg"

preview={false}

width={"65%"}

height={"auto"}

alt="laptop"

/>

</div>

<div className="position-absolute bottom-0 start-0 ">

<Image

src="/Rectangle-login2.svg"

preview={false}

width={"65%"}

height={"auto"}

alt="laptop"

/>

</div>

</div>

) : null}
 </Row>

</div>

);

export default LoginPage;

Dashboard admin

FE

src/pages/dashboard/home.jsx

import React from "react";

import { Card, Col, Image, Layout, Row } from "antd";

import { Container } from "react-bootstrap";

import { BsCash } from "react-icons/bs";

import CardDashboard from "../../components/dashboard/cardDashboard";

import LineChartDashboard from

"../../components/dashboard/lineChartDashboard";

import PieChartDashboard from

"../../components/dashboard/pieChartDashboard";

function HomeDashboard() {

const { Content } = Layout;

return (

<Content className="mt-5">

<Container>

<CardDashboard />

<br />

<Row justify={"space-around"} align={"top"} className="">

<Col span={15}>

{" "}

<Card

title={

<div className="mt-2">

<h3>Result</h3>{" "}

<p style={{ marginTop: "-10px", color: "grey" }}>

SMP IT Madani

</p>

</div>

extra={<a href="#">More</a>}

bodyStyle={{ height: "500px" }}

>

<LineChartDashboard />

</Card>

</Col>

<Col span={7}>

<Card
title={

<div className="mt-2">

<h3>Chart</h3>{" "}

<div

className="d-flex justify-content-start gap-3"

style={{ alignItems: "center", alignContent: "center" }}

>

<div

style={{

width: 10,

height: 10,

backgroundColor: "#2153E2",

borderRadius: "50%",

}}

/>

<p style={{ width: 10, height: 10 }}>Kas</p>

</div>

<div

className="d-flex justify-content-start gap-3"

style={{ alignItems: "center", alignContent: "center" }}

>

<div

style={{

width: 10,

height: 10,
 backgroundColor: "#FF7675",

borderRadius: "50%",

}}

/>

<p style={{ width: 10, height: 10 }}>Pemasukan</p>

</div>

<div

className="d-flex justify-content-start gap-3"

style={{ alignItems: "center", alignContent: "center" }}

>

<div

style={{

width: 10,

height: 10,

backgroundColor: "#41355C",

borderRadius: "50%",

}}

/>

<p style={{ width: 10, height: 10 }}>Pengeluran</p>

</div>

</div>

bodyStyle={{ height: "300px" }}

>

<PieChartDashboard />
 </Card>

</Col>

</Row>

</Container>

</Content>

);

export default HomeDashboard;

Tambah tagihan

FE

/src/pages/dashboard/tagihanTambah.jsx

import React, { useState } from "react";

import CardDashboard from "../../components/reusable/cardDashboard";

import {

Button,

Checkbox,

Input,

Form,

DatePicker,

InputNumber,

Select,

} from "antd";

import { useNavigate } from "react-router-dom";

function TagihanTambah() {

const navigate = useNavigate();

const [jumlahValue, setJumlahValue] = useState(1);

const onFinish = (fieldValues) => {

const date = new Date();

const values = {

jatuhTempo: fieldValues["jatuhTempo"].format("YYYY-MM-DD"),

namaTagihan: fieldValues.namaTagihan,

jumlah: fieldValues.jumlah,

kode_tagihan: fieldValues.kode,

deskripsi: fieldValues.deskripsi,

};

console.log("Success:", values);

};

const onFinishFailed = (errorInfo) => {

console.log("Failed:", errorInfo);

};

const handleBatal = () => {

navigate(-1);

};

const parseRupiah = (value) => {

if (!value) return NaN;

const parsedValue = value.replace(/[^0-9]/g, "");

return parseInt(parsedValue, 10);

};
const formatRupiah = (value) => {

if (!value) return "";

const formattedValue = value

.toString()

.replace(/\B(?=(\d{3})+(?!\d))/g, ".");

return `Rp ${formattedValue}`;

};

const handleJumlahChange = (value) => {

setJumlahValue(value);

};

const config = {

rules: [

type: "object",

required: true,

message: "Please select time!",

},

],

};

return (

<div>

<CardDashboard titleCard={"Tambah Tagihan"} mode={"tambah_tagihan"}>

<Form

name="basic"

onFinish={onFinish}
onFinishFailed={onFinishFailed}

autoComplete="off"

layout="vertical"

>

<Form.Item

label="Nama Tagihan"

name="namaTagihan"

rules={[

required: true,

message: "Please input your Nama Tagihan!",

},

]}

>

<Select

style={{ border: "1px solid #0F123F", borderRadius: "5px" }}

options={[

value: "SPP",

label: "SPP",

},

value: "Non-SPP",

label: "Non-SPP",

},
 ]}

placeholder={"--> Silahkan Pilih Nama Tagihan"}

/>

</Form.Item>

<Form.Item

label="Kode"

name="kode"

rules={[

required: true,

message: "Please input your Kode!",

},

]}

>

<Input style={{ border: "1px solid #0F123F" }} />

</Form.Item>

<Form.Item

label="Deskripsi"

name="deskripsi"

rules={[

required: true,

message: "Please input your Deskripsi!",

},

]}
>

<Input style={{ border: "1px solid #0F123F" }} />

</Form.Item>

<Form.Item name="jatuhTempo" label="Jatuh Tempo" {...config}>

<DatePicker

style={{ border: "1px solid #0F123F", width: "100%" }}

allowClear

/>

</Form.Item>

<Form.Item

label="Jumlah"

name="jumlah"

rules={[

required: true,

message: "Please input your Jumlah!",

},

type: "number",

message: "Format yang dimasukan salah!",

},

]}

>

<InputNumber

min={1}
 type="text"

value={jumlahValue}

formatter={formatRupiah}

parser={parseRupiah}

onChange={handleJumlahChange}

style={{ border: "1px solid #0F123F", width: "100%" }}

/>

</Form.Item>

<Form.Item>

<div className="d-flex justify-content-between">

<Button

type="default"

size="large"

className="px-4"

onClick={() => handleBatal()}

>

Batal

</Button>

<Button

type="primary"

size="large"

className="px-4"

htmlType="submit"

>

Simpan
 </Button>

</div>

</Form.Item>

</Form>

</CardDashboard>

</div>

);

export default TagihanTambah;

Dashboar siswa, bayar tagihan

/src/pages/siswa/tagihan.jsx

import React, { useState } from "react";

import CardDashboard from "../../components/reusable/cardDashboard";

import TableView from "../../components/reusable/tableView";

import { Avatar, Button, Col, Row, Space, Tooltip } from "antd";

import { BsFillCursorFill } from "react-icons/bs";

import { ColorPallete } from "../../utils/colorPalette";

import { FaTrash } from "react-icons/fa";

import { useNavigate } from "react-router-dom";

import { FcInfo } from "react-icons/fc";

import { UserOutlined } from "@ant-design/icons";

import FormatRupiah from "../../components/reusable/formatNumber";

function TagihanSiswa() {
 const [page, setPage] = useState(1);

const Navigate = useNavigate();

const sampleData = [

id: 1,

namaTagihan: "Spp - Siswa",

status: "Belum Lunas",

jatuhTempo: "Des 25, 2023",

jumlah: 200000,

},

id: 2,

namaTagihan: "Non Spp - Siswa",

status: "Lunas",

jatuhTempo: "Nov, 25, 2023",

jumlah: 120000,

},

];

const columns = () => {

return [

key: "no",

dataIndex: "no",

title: "No",
 width: "5%",

render: (t, r, index) => `${(page - 1) * 10 + index + 1}`,

},

title: "Nama Tagihan",

dataIndex: "namaTagihan",

key: "namaTagihan",

},

title: "Jatuh Tempo",

dataIndex: "jatuhTempo",

key: "jatuhTempo",

},

title: "Jumlah",

dataIndex: "jumlah",

key: "jumlah",

render: (_, record) => {

const number = record.jumlah;

return <div>{FormatRupiah(number)}</div>;

},

},

title: "Status",

dataIndex: "status",
 key: "status",

},

title: "Action",

key: "action",

render: (_, record) => (

<Space size="middle" key={record.id}>

{record.status == 'Lunas' ? <Button

type="primary"

style={{ fontWeight: 500 }}

>

Export

</Button>

<Button

type="primary"

style={{ fontWeight: 500 }}

>

Bayar

</Button>

</Space>

),

},
 ];

};

return (

<div>

<CardDashboard

titleCard={"Tagihan"}

mode={"tagihan-siswa"}

extraButton={false}

>

<TableView

dataSource={sampleData}

columns={columns()}

pagination={{

onChange(current) {

console.log(current, "ini pagination");

setPage(current);

},

}}

mode="tagihan-siswa"

/>

</CardDashboard>

</div>

export default TagihanSiswa

2. Backend

API login

AuthController.php

<?php

namespace Modules\Auth\Controllers;

use App\Controllers\BaseController;

use App\Exceptions\UnauthorizedException;

use CodeIgniter\API\ResponseTrait;

use Modules\Auth\Services\AuthService;

use Modules\Auth\Utils\AuthUtil;

class AuthController extends BaseController

use ResponseTrait;

private $authService;

public function __construct()

$this->authService = new AuthService();

public function login()

{
 $username = $this->request->getVar('username');

$password = $this->request->getVar('password');

try {

$jwt = $this->authService->getJWT($username, $password);

$data = ['access_token' => $jwt, 'type' => 'Bearer'];

return $this->respondCreated($data);

} catch (UnauthorizedException $e) {

return $this->respond(['message' => 'username/NIS atau password salah.'],

401);

public function getUser()

$user = AuthUtil::getUser();

$data = ['data' => $user];

return $this->respond($data);

API CRUD tagihan

TagihanController.php

<?php

namespace Modules\Tagihan\Controllers;
use CodeIgniter\API\ResponseTrait;

use CodeIgniter\Debug\Toolbar\Collectors\BaseCollector;

use Modules\Tagihan\Services\TagihanService;

class TagihanController extends BaseCollector

use ResponseTrait;

private $tagihanService;

public function __construct()

$this->tagihanService = new TagihanService();

public function create()

$request = [

'nama' => $this->request->getVar('name'),

'kode' => $this->request->getvar('kode'),

'deskripsi' => $this->request->getVar('deskripsi'),

'jatuh_tempo' => $this->request->getVar('jatuh_tempo'),

'jumlah' => $this->request->getVar('jumlah')

];
 try {

$this->tagihanService->create($request);

return $this->respond(['message' => 'tagihan berhasil dibuat']);

} catch (\Throwable $th) {

return $this->respond(['message' => 'tagihan gagal dibuat'], 400);

public function getAll()

$data = $this->tagihanService->getAll();

return $this->respond(['data' => $data]);

public function getOne($id)

$data = $this->tagihanService->getOne($id);

if ($data !== null) {

return $this->respond(['data' => $data]);

} else {

return $this->respond(['message' => 'tagihan tidak ditemukan'], 404);

public function cancle()

 {

try {

$this->tagihanService->cancle();

return $this->respond(['message' => 'tagihan berhasil dibatalkan']);

} catch (\Throwable $th) {

return $this->respond(['message' => 'tagihan gagal dibatalkan'], 400);

public function export()

$data = $this->tagihanService->export();

$this->response->setContentType('application/pdf');

return $data;

3.2.5 Pengujian

Pengujian yang dilakukan pada website laporan keuangan sekolah SMP IT

Madani menggunakan pengujian blackbox testing yang berfokus pada proses

masukan dan keluaran program.

1. Halaman login

Tabel III.13
Hasil Pengujian Testing Form Login
 No Test Case Hasil yang Hasil yang Ket
Diharapkan Diperoleh
1. User tidak User tidak bisa Sistem tetap Berhasil
mengisi username masuk ke dalam pada page
dan password sistem/ dashboard login dan
menampilkan
untuk mengisi
username dan
password
2. User hanya User tidak bisa Sistem tetap Berhasil
mengisi username masuk ke dalam pada page
atau password sistem/dashboard login dan
saja menampilkan
untuk mengisi
username dan
password
3. User salah User tidak bisa Sistem akan Berhasil
mengisi username masuk ke dalam menampilkan
sistem/dashboard pesan jika
username dan
password salah
4. User salah User tidak bisa Sistem akan Berhasil
mengisi password masuk ke dalam menampilkan
sistem/dashboard pesan jika
username dan
password salah
5. User salah User tidak bisa Sistem akan Berhasil
mengisi username masuk ke dalam menampilkan
dan password sistem/ dashboard pesan jika
username dan
password salah
6. User mengisi User masuk ke Sistem akan Berhasil
username dan dalam sistem/ beralih halam
password dengan dashboard ke dalam
benar dashboard
sesuai role user

3.2.6 Pendukung

Pada tahap support menjelaskan tentang publikasi web, dan spesifikasi

hardware dan software yang akan digunakan untuk menjalankan sistem yang dibuat.
 1. Publikasi Web

Untuk dapat digunakan website perlu adanya publikasi dengan cara

mengupload ke salah satu webhosting, pada kesempatan ini aplikasi

webhosting yang digunakan adalah webhosting versi berbayar dari

niagahoster.com berikut detail dari webhosting yang dimaksud:

Tabel III.14
Data Publikasi Web

Domain smpitmadani.sch.id

Username -

Password -

Disk Usage Unlimited

Bandwidth Unlimited

Home Root smpitmadani.sch.id

Server Home

IP Address 83.136.216.117

Actived On Jumat, 14 April 2023

2. Spesifikasi Hardware dan Software

Kebutuhan hardware dan software standard yang akan digunakan

oleh aplikasi ini dapat dilihat dalam tabel dibawah ini:

Tabel III.15
Spesifikasi Hardware dan Software

Kebutuhan Keterangan
Sistem Operasi Microsoft Windows 7 or Above
Processor Intel Pentium dual core 2.2 GHZ
RAM 2GB
Hardisk 320GB
Monitor 14’’
Keyboard 108 Key
Mouse Optimal Mouse/Touch Pad
Web server Apache
Software Visual Studio Code, Google Chrome