Student Tuition Fee Management Using Web-Based Application System

— Access to global information online is essential for an institution or group. Users who use web-based apps from their homes or other locations may meet their requirements without traveling to the designated institution. This study aims to determine if stakeholders' demands can be met by the web-based application for tuition fee management at the Islamic boarding school "Bilal Bin Rabah" in Sukoharjo. Both documentation and UML (Unified Modeling Language) modeling techniques were employed in this study. The purpose of this application is to make it simpler for administrative staff to handle information on student fee payments and to evaluate financial information for associated parties. Three people may use this application's payment system: the administrator, the head of the Islamic boarding school, and a parent of a student. The administrator may handle student information, and payment information, charge the student’s parents, and print the necessary reports for the Islamic Boarding School. The school's headmaster has access to student data and may generate reports and examine student invoices. The invoices and transaction history of payments that have been made are visible to parents/guardians of students. The website will continue to be developed to support the mobile platform, allowing users to access the school fee management system via mobile more conveniently. Based on the test results, users of the SPP payment system application are quite satisfied.


I. INTRODUCTION
At Bilal bin Rabah Sukoharjo Islamic Boarding School, the management of education fees is done manually using worksheets and word processing programs (Microsoft Office).There are many limitations of this office application to administrative dynamic data related to recording student education fees.This limitation is increasingly visible when it is associated with different information needs for all parties in need, such as school principals and parents/guardians.The development of information technology has inspired various institutions to utilize it in various fields of work.Ponpes Bilal Bin Rabah took this opportunity to arrange the payment of student tuition so that information could be delivered quickly, affordably, and enjoyably.The management of student education fee payments and the presentation of information can be designed and implemented so that the payment system is carried out easily by users and can meet the needs of users effectively and efficiently.

II. LITERATURE REVIEW
There are various literature studies on the tuition fee payment system, namely the creation of an SMS Gateway-based education development contribution information system (Mufariya et al., 2019).Leverage the Codelgniter 3 framework to automate the Tuition Fee Payment Information System (Jariah & Ardi, 2021;Suhartini et al., 2019).As a comparison of data showing the importance of this research conducted, the design of the SOG (School Operational Grants) fund information system for Surakarta Citizen High School was included.One way that institutions can be helped is to create a web-based system to control the cost of student education (Haris et al., 2014).
Students at school make parcels known as Education Development (tuition fee) parcels.The purpose of tuition fees is to help schools pay for the costs associated with providing students with a quality education.Students often pay tuition once a month (Mufariya et al., 2019).A website is an entire web page with links between them, information, and a summary of the domain.Hyperlinks are connections between sites, while hypertext is the text that serves as an intermediary.Information is often displayed using text, graphics, animation, sound, and video (Sa'ad, 2020).Web-based information system helps employees can be accessed online (Setiawan et al., 2022).The web-based wedding organizer can provide information to customers regarding package rental schedules without having to come in person, to make it easier for scheduling and to check the available stock of goods and help users to order wedding packages online (Nuranisyah et al., 2022).The TEPIAN Vol. 4 No. 2 (June 2023) p-ISSN 2721-5350 e-ISSN 2721-5369 Susilo, D., Nugroho, M. D., & Ruswanti, D. (2023).Student Tuition Fee Management Using Web-Based Application System.TEPIAN,4(2).
-81 -web-based information system can assist the admin in processing the futsal field schedule, provide information about the futsal field schedule without having to come in person, and help members to order futsal courts online (Ardin et al., 2020).A database is a large data store that is interconnected with each other and can be accessed by many users.A group of orderly, interconnected, dependent, and integrated elements, variables, or components is referred to as a system.Data that has been processed to make it more useful and relevant to the recipient and to reduce ambiguity in the decision-making process is known as information (Anggraeni & Irviani, 2017).The database combines many previous entries and consists of logically connected data items.A database management system (DBMS) acts as a bridge between application software and database servers by using basic SQL (Structured Query Language) instructions.Since MySQL is a DBMS, it uses words like rows, columns, and tables.DBMS systems contribute to the development of software for managing data, including data storage, retrieval, security, and integrity (Sa'ad, 2020).The work of workers and managers in documenting sales reports generated in Kita-Kita.Net can be facilitated with web-based applications (Siregar et al., 2019).
The system built can display food and drinks online, and display and produce data on transaction reports and overall transaction report data (Amalia & Rendi, 2020).Web-based employee payroll information system is easier for admins to access salary data by accessing the web (Handayani et al., 2023).The web-based accounting application can organize student financial data and can be found faster by parents (Amalia & Gunawan, 2020).

III. RESEARCH METHODS
The research was conducted at Bilal Bin Rabah Sukoharjo Islamic Boarding School.It used four methods, there were documentation methods, UML, SDLC, and User Satisfaction Testing.Documentation was a research method used for data collection, while UML (Unified Modelling Language) modeling and SDLC (Software Development Life Cycle) models are used for system design and implementation, and PHP and MySQL are used for application coding.To define, develop, and record complex software systems, UML (Unified Modeling Language) is a visual language for software modeling.System structure and behavior are only a small part of the system features graphically represented by UML (Rosa & Shalahudin, 2018).The simplest SDLC (Software Development Life Cycle) paradigm is the waterfall model (Rosa & Shalahudin, 2018).For software development with constant specifications, this paradigm works well.The linear sequential model or traditional life cycle is another name for this paradigm.SDLC is divided into six stages: requirements analysis, system design, system implementation, system testing, and system maintenance (Haris et al., 2014).PHP, or Hypertext Preprocessor, is a server-side scripting language created specifically for web development.Since PHP is handled on a server computer, PHP is referred to as a server-side programming language.This contrasts with client-side programming languages, which are processed by web browsers (clients), such as JavaScript.Databases are used by PHP to create dynamic websites.PHP's built-in server is a powerful web server that supports a lot of traffic, such as Apache or Nginx, which is quite easy to install and manage.With PHP, with just one command, a web server can run on a computer machine.A web server exists for nothing more than software that runs on a machine and listens for requests from a specific port.Usually, this port is 80, but it can also be other available ports (Lopez, 2016).

A. System Design
The Student Tuition Payment System website at Bilal Bin Robah Islamic Boarding School is designed using the UML method.This application design has 3 user access rights, namely Administrator, Leader, and Parents/ guardian of the student.Each user can access the process according to their access rights.

B. System Implementation
CodeIgniter 4 framework, PHP programming language, and MySQL database are used to build the Student Tuition Fee Management System.A framework called Codelgniter was developed using the design pattern of the view controller model, or MVC as it is sometimes called.A design pattern is a group of explanations on how to solve problems often encountered during the software design process (Hapsari & Priyadi, 2017).In general, this application has 3 users: Administrator as the system manager, Leader as an information user, and Parents as recipients of information on student education fee payments.

Administrator Access
Selecting "Admin Login" at the bottom of the user login screen will take you to the administrator login page.Using the previously registered login and password, the can log in to the system.profile, accessible transaction menu options, student data menu options, report data, and payment information can all be viewed on the admin home page.Administrators can change the current profile information, as shown in Picture 3. Picture 3. Admin Home Page.
The Student Data page will provide a student table along with menu buttons to add, import, view student information, delete, and improve students by selecting students who will move up.Picture 4 illustrates a page containing student data.

Picture 4. Student data page by Administrator
Admins can add new student info on this page.Name, NIS, NISN, class, address, place of birth, date of birth, phone number, and year of entry are the data elements entered.The user can edit his own data, but the system will automatically create a login and password that will be used by the student's parents.Picture 5 shows how the page for newly added students is displayed.Picture 5. Add Student page.
To bulk add students using the current format, visit the import student data page.'.xls' or '.xlsx' is the file extension for spreadsheets, which is the format used.Picture 6 shows the display of the student data import procedure.

Student Import Page.
This page provides information for each student that has been added, either manually or through student import.Student info can also be changed by admins.Picture 10.List of students who will make payments.
A list of students can be displayed on this page.The administrator selects the students who will pay and then selects the payment based on the class, the required payment amount, and payment details.If yes, it will be displayed a registration payment page (Picture 11).
Picture 11.Registration payment page.
A table listing all students will appear at the top of the page.The administrator will then select the student who submitted the payment.Administrators select payments depending on the month of payment once they reach the payment page.Notice the display in Picture 12.
Picture 12. Pay Tuition Fee page.
A table listing all students will appear at the top of the page.The administrator will then select the student who submitted the payment.The admin selects payment depending on the payment month after arriving at the payment page.Picture 13 is an illustration for a presentation.
Picture 13.Pay for Laundry page.
A table of students will be displayed on this page, after which the admin will select the student who will make the payment.Successful payments are removed from the selection and shown in the table below when admins select them by payment name.Picture 14 shows how things are going in this case.

Leader Access
Selecting "Admin Login" page at the bottom of the user login page will take you to the principal login page.Use -86 -the login and password previously registered by the admin to log in to the leader.
This homepage displays profiles and menu items with accessible information, including reports, student information, and payment information.Current profile info can be changed by the leader.Picture 20 shows more information.
Picture 20.User Leader Page.
The Student Data page will display a student list table and student details menu when the leader has access rights.Picture 21 shows a screenshot of the student data details page.-87 -

C. System Testing
The website has not fully provided enough quality information for the public, but it has some deficiencies in the presentation of information (Puling & Sitokdana, 2020).Some of the shortcomings found are generally caused by pages that use contrasting colors and too many animations (Magal & Sitokdana, 2021).The application tested is suitable and suitable for use in the correspondence information system at the plantation office and is expected to be developed with a more attractive appearance and can be used better (Istiqomah et al., 2021).
The variables that affect the website or its design.Website appearance, user-friendliness, website navigation, and user experience all work to improve visitor perception and engagement with the website (Amelia & Pradesan, 2019;Hapsari & Priyadi, 2017).Table 1 contains information on the results of user satisfaction surveys with a total of 25 respondents who test this system.Based on the test results, it can be concluded that users are satisfied with this application because the average value of user satisfaction metrics is 3.1.

V. CONCLUSION
The Student Tuition Fee Management System application has three levels of user access with different capabilities available on this website: Administrator, Leader, and Parent.Administrators could import or update student data, modify student data, add payment detail data, perform student payment transactions, send invoices to parents, and print reports.Leaders have access to student data, reports, and invoices.Parents have access to transaction history information and bill payment options.
Based on the test results, users of the student payment system application are quite satisfied.So, administrators, leaders, and parents/guardians can use this system for any role of them.
Since these online applications do not yet have a database security system, security measures such as the use of SSL for hosting and the implementation of data encryption must be developed.The website will continue to be developed to support the mobile platform, allowing users to access the tuition fee management system via mobile more conveniently.
Administrators can access the processes of Manage Student Data, Manage Reports, Manage Payment Transactions, Manage Payment Details, and Manage User Data.Leaders can access the Manage Student Data and Manage Reports.Parents can access View Payment Student Data and Change Username and Password.These access rights can be seen in Picture 1. TEPIAN Vol. 4 No. 2 (June 2023) p-ISSN 2721-5350 e-ISSN 2721-5369 Susilo, D., Nugroho, M. D., & Ruswanti, D. (2023).Student Tuition Fee Management Using Web-Based Application System.TEPIAN, 4(2).-82 -Picture 1. Usecase of Student Tuition Fee Management System The Student Tuition Payment System website at Bilal Bin Rabah Islamic Boarding School is designed using the UML method.The system designed by 3 user's access rights, Administrator, Leader, and Parents.Class diagrams, which display classes, properties, and activities performed in relationships between objects, are helpful for understanding the structure of the system.The class diagram of the Bilal bin Rabah Islamic Boarding School tuition fee management system will show class information, quality, operation, and linkage.Picture 2 shows the layout of the class diagram.Picture 2. Class Diagram of Student Fee Payment System Picture 7 shows what the student detail page looks like.Picture 7. Student Details Page.Data on student payments can also be accessed by admins.This page can provide payment information such as name or type of payment, class and year of registration, and payment amount.To administer the payments, there are additional buttons for adding data, changing data, and deleting data (Picture 8).TEPIAN Vol. 4 No. 2 (June 2023) p-ISSN 2721-5350 e-ISSN 2721-5369 Susilo, D., Nugroho, M. D., & Ruswanti, D. (2023).Student Tuition Fee Management Using Web-Based Application System.TEPIAN, 4(2).-84 -Picture 8. Payment Details Page.A pop-up form that can be filled with additional payment information is displayed when you click the option to add payment data.Picture 9 shows what additional payments look like.Picture 9. Add Payment Data page.Relisting transactions (Picture 10), Tuition transactions (Picture 11), laundry transactions (Picture 12), and miscellaneous transactions (Picture 13) are the four options available on the transaction page.

TEPIAN Vol. 4
No. 2 (June 2023) p-ISSN 2721-5350 e-ISSN 2721-5369 Susilo, D., Nugroho, M. D., & Ruswanti, D. (2023).Student Tuition Fee Management Using Web-Based Application System.TEPIAN, 4(2).-85 -Picture 14.Other Pay pages.Based on each student's form of payment and report, this page shows the appropriate report type.The WhatsApp button, which will directly connect you to the WhatsApp website or WhatsApp app with the destination number on the student information page, allows administrators to submit tuition and laundry bills as well (Picture 15).Picture 15.Report page by Admininistrator The report form will be filtered as necessary depending on the type of payment.The class year and class are used as filters in the relist.Use payment month and class filters in SPP and laundry.Payment names and classes are used to filter other payments.When you press the print button after filtering, Picture 16 will be displayed as a print page.Picture 16.Print Payment Reports.Total statistics will be displayed on the individual student report form.Picture 17 shows what a printed student report looks like.Picture 17. Print Student Reports.Any student whose invoice has not been paid off will be displayed on the student invoice form.Picture 18 shows the student bill.Picture 18. Student Bill A list of administrators who have the necessary access permissions to the website administrator's area is displayed on this page.Picture 19 illustrates the layout of the Admin page.19.Admin Page.

Figure 21 .
Figure 21.Student Data Page from LeadersBased on each student's form of payment and report, this page displays different types of reports.This can be seen in Picture 22 for more information.To demonstrate, a sample of printed reports based on the type of tuition payment for 7th graders in August was selected.Picture 23 illustrates what a printed report looks like.