127

PROTOTYPING MODEL IN INFORMATION SYSTEM DEVELOPMENT OF

AL-RUHAMAA' BOGOR YATIM CENTER FOUNDATION
Dewi Ayu Nur Wulandari1*, Asyil Alfin Halani Bahar2, Muhammad Ghifari Arfananda3, Helina Apriyani4

Sistem Informasi Kampus Kota Bogor

Universitas Bina Sarana Informatika
www.bsi.ac.id
[email protected], [email protected], [email protected], [email protected]

(*) Corresponding Author

Abstract— The information system for providing program Microsoft Excel. Berdasarkan
donations at the Al-Ruhamaa' Bogor Yatim Center permasalahan yang ada, perlunya dikembangkan
Foundation is still not computerized, through sebuah sistem informasi penyaluran donasi yang
donors coming to the location directly or through dapat memudahkan para pengurus dan juga para
bank services, then confirmed via social media such donatur Yayasan Yatim Center Al-Ruhamaa’ Bogor.
as WhatsApp, and receiving proof of donation in the Sistem yang dibuat akan dikembangkan dengan
form of a receipt. The management of the Al- menggunakan salah satu teknik yang biasa
Ruhamaa' Bogor Yatim Center Foundation stills digunakan dalam pengembangan perangkat lunak
using Microsoft Excel to prepare donation reports. yaitu prototyping model. Model prototyping
Based on the existing problems, it is necessary to merupakan suatu teknik untuk mengumpulkan
develop an information system for distributing informasi tertentu tentang kebutuhan-kebutuhan
donations that can facilitate the management and informasi pengguna secara cepat yang dimana fokus
the donors of the Al-Ruhamaa' Bogor Yatim Center kepada aspek-aspek perangkat lunak yang akan
Foundation. The system will be developed using one disajikan yang akan nampak bagi pelanggan atau
of the techniques commonly used in software pemakai. Setelah sistem implementasikan diperoleh
development is called the prototyping model. the hasil bahwa dengan menggunakan Sistem Informasi
prototyping model is a technique to collect certain ini, proses transaksi donasi menjadi lebih efisien.
information about the user's information needs Perhitungan jumlah donasi yang terkumpul juga
quickly which focuses on aspects of the software to dapat dilakukan secara otomatis dan akurat. Dalam
be presented that will be visible to the customer or hal pelaporan, sistem yang dibuat dapat menyajikan
user. After the system is implemented, it is found laporan donasi secara otomatis dan siap cetak setiap
that by using this Information System, the donation saat dibutuhkan. Penyimpanan data dokumentasi
transaction process becomes more efficient. kegiatan yang dilakukan oleh yayasan juga menjadi
Calculation of the number of donations collected can lebih hemat tempat karena semua informasi dapat
be done automatically and accurately. In terms of diakses kapan saja dan di mana saja.
reporting, the system can be present donation
reports automatically and is ready to print Kata kunci— Model Prototyping, Sistem Informasi,
whenever needed. Data storage for documentation Sistem Donasi, Perangkat Lunak, SDLC
of activities carried out by the foundation also saves
space because the information can be accessed
anytime and anywhere. INTRODUCTION

Keywords: Prototyping Model, Information The Al-Ruhamaa' Bogor Yatim Center Foundation is
System, Donation System, Software, SDLC. an institution engaged in social and community
activities with a passion for contributing to efforts
Abstrak— Sistem Informasi pemberian donasi yang for improvement in society, especially orphans and
ada pada Yayasan Yatim Center Al-Ruhamaa’ Bogor women in West Java. In daily activities, the
masih belum terkomputerisasi, yaitu dengan cara foundation receives donations from the general
donatur datang ke lokasi secara langsung maupun public to finance the activities. In the activities of
melalui layanan bank, kemudian melakukan collecting and reporting donations, they still used
konfirmasi melalu media sosial seperti WhatsApp, Microsoft excel. The current donation system still's
dan menerima tanda bukti donasi berupa kwitansi. carried out using donors coming to the location or
Dari sisi pengurus, pengurus Yayasan Yatim Center through bank services. The donor then confirms
Al-Ruhamaa’ Bogor juga masih perlu menyusun through social media such as WhatsApp and
laporan donasi secara manual dengan menggunakan receives proof of receipt via WhatsApp.
128

Management of the Al-Ruhamaa' Bogor Yatim users expect can see and interact directly with the
Center Foundation also prepares donation reports description system to be developed (Susanto &
manually using Microsoft Excel so that the Andriana, 2016).
foundation's management has difficulty in Implementation of a web-based
providing donation reports transparently (Sumada information system at the Al-Ruhamaa' Bogor Yatim
et al., 2021). The system an ineffective because it Center Foundation is expected to assist donors and
often takes a long time to find out the donation administrators in receiving donations.
reports within a certain period and the data on
donors who have made donations are also not well MATERIALS AND METHODS
documented, so that active donors cannot be
properly coordinated, especially in terms of In system development, so that the
delivering activities that require donations software created can meet the needs, a software
(Riskiono et al., 2020). It is necessary to develop an development method is needed that will serve as
information system to overcome the problems that the basic framework for system development. This
occurred. study using a model prototyping technique which is
The development of an information system one a part of the system development method in the
requires clear planning and analysis. It's must be System Development Life Cycle (SDLC).
done so it not to cause new problems that will have The prototyping method is a system
an impact on the information system development development technique where the prototype is used
process and will determine the success of the to provide an overview of the system development
system to be developed (Purnomo, 2017). For that will be carried out to the user(Mulyani, 2016).
software development to be successful and run In the prototype method, it allows users to know
according to plan, it must use software development what the stages of the system are like so that the
methods that suit the needs. The software system can function properly according to user
development method is the main framework used in needs (Yoko et al., 2019). The prototyping method
the design and development of software to produce is also an iterative process where user requirements
an information system its user needs(Budi et al., are transformed into a working system that is
2016) continuously improved through collaboration
The information system created will between users and analysts (Muharto & Ambarita,
developed using a prototyping model software 2016). The prototyping method is good to use when
development techniques. The prototyping model is a user cannot explain and determine in detail the
a technique of collecting information based on user input, process, and output stages that will be
needs quickly and the application presented will be expected, so system developers are not sure of the
a focus on the user (Susanto & Andriana, 2016). The efficiency of the algorithm made, making it difficult
model generated by this technique is an initial to determine the operating system and determine
version of the systems and serves as a physical the form of interaction between humans and
model of the system to be developed (Purnomo, machines that will be used (Yurindra, 2017).
2017). The prototype model can be used to clarify
specifications and technical matters that are not There are two types in the prototyping method
understood by the customer to the software technique (Mulyani, 2016) :
developer regarding the specifications of the 1. Evolutionary Prototype
desired requirements (Firmansyah et al., 2019). The prototype is developed continuously so
System design using a highly adaptive prototype that the functions and procedures produced are
method can and easily be adapted to customer following the needs of the system are being
needs so that the system is very friendly and easy to developed.
operate(Sismadi, 2021). 2. Prototype Requirements
Similar research has also been carried out Prototypes are made by developers by defining
but did not mention the information system system functions and procedures where users or
development method used (Riskiono et al., 2020). system owners cannot define system requirements
Similar research was carried out using the waterfall properly
method in the development of a donation
management information system (Sumada et al.,
2021). In this study using the prototyping model
method with the requirements prototype technique.
This study chose to use the prototyping
model technique compared to the waterfall method
because in the prototyping model using prototype
as a description system that will be built, so that
 129

6. Adjusting to User's Desires

The system has been created adjusted to the
user's wishes and system needs. if it's
appropriate then the system is ready for use
7. Using the System
The system used by a user

RESULTS AND DISCUSSION

The information system at the Al-Ruhamaa'

Bogor Yatim Center Foundation was developed
using the model prototyping method using the
requirements prototype technique. The following
describes the steps of system development carried
out following the steps in the Requirement
Prototype technique.

A. System Requirements Analysis

In this step, users and system developers
discuss the system requirements to be developed.
Information about the business processes, as well as
the constraints faced, are obtained by the system
developer from the users at these steps. Needs
analysis is a step that requires system developers to
find out exactly what the user needs in the hope that
the system created can later be used.
In designing system requirements, it's using
use case diagrams. Use case diagrams can describe
a complete description of the interactions that
occurred between the actors and the system being
developed. The first thing to do when making a use
case diagram is identified the actors who will be
involved in the system (Nugroho, 2009)
Three users will be involved in system
Source : (Bahar et al., n.d.) development, namely members, operators, and
Figure 1. Steps of the Requirement Technique in admins. The needs of each user are as follows:
the Prototype Method a. Member
Members can log in on the website, view news
Figure 1 describes the steps of the updates, view information on orphans, view contact
requirements technique in the prototyping model info, view photo galleries, make donation
method. The explanation of each stage is as follows: transactions, change profiles and leave comments
1. Analyze User Needs on the web.
Users and system developers discuss the b. Operator
system requirements needed by users Operators can manage articles, manage news
2. Creating a Prototype updates, manage photo galleries, validate donors
The system developer makes prototypes of the who confirm donations and view and print donation
developed system has been describing by the reports.
user c. Admin
3. Adjusting the Prototype to the User's Desire Admins can carry out activities as carried out
The system developer asks the user about the by operators, but there are additional functions that
prototype that has been made whether it is can be performed by admins such as managing
under the system needs or not accounts, deleting comments, managing users, and
4. Creating a New System managing categories on the web.
System developers use prototypes that have
been made to create new systems
5. Doing System Testing
Users conduct trials on the developed system
130

Source : (Bahar et al., n.d.)

Figure 4. Category Page Prototype Design
Source : (Bahar et al., n.d.) Figure 4 is a category page. On this page,
Figure 2. Use Case Diagram Member of Al- admins or operators can see what categories
Ruhamaa' Bogor Yatim Center Information System already exist and can add, edit and delete category
Foundation data.
Figure 2 is a description of the business process for
members, where members can perform these
activities when interacting with the system.

Source : (Bahar et al., n.d.)

Figure 5. Prototype Design Of Add Category Pages

Figure 5 is an added category page, where the

admin or operator on this page can input new
category data.
Source : (Bahar et al., n.d.)
Figure 3. Use Case Diagram Operator And
Administrator of Al-Ruhamaa' Bogor Yatim Center
Information System Foundation

Figure 3 is a description of the business process for

operator and administrator, where they can
perform these activities when interacting with the
system

B. Making Prototype
After obtaining information about user needs,
the next step is to make a prototype of the system Source : (Bahar et al., n.d.)
that will be developed under the business processes Figure 6. Prototype Design Of Edit Category Pages
described by the user. The design of the prototype
system to be developed is divided into three main Figure 6 is a category edit page, where admins
parts, namely the master form design, transaction or operators can edit the existing categories
form, and report.
1) Master Form Prototype Design 2) Transaction Form Prototype Design
The prototype master form design consists of The prototype design of the transaction form
pages for adding, editing and delete category data described is the donation form page and
confirmation of donation payment's
 131

3) Report Prototype Design

The prototype report design created is a page
to display the donation reports

Source : (Bahar et al., n.d.)

Figure 7. Prototype Design Of Donation
Confirmation Pages

Figure 7 is a donation payment confirmation

page. Those who use this page are operators or Source : (Bahar et al., n.d.)
admins. The operator will provide validation in the Figure 9. Design of Report Page Prototype
form of a statement of acceptance or rejection of the
donation payment data entered by the member or Figure 9 is a report page. On this page,
donor. operators or admins can view and print donation
reports with a choice of reporting periods that can
be selected according to their needs.

C. Adjusting the Prototype to the User's Desire

After the system prototype has been created,
the next step for the system developer is to ask the
user whether the prototype is made following the
system requirements. If there are still things that
are not appropriate, then the developer will re-
adjust the prototype to the user's needs

D. Creating a New System

After the prototype design is by the user's
needs, then the system developer will use the
prototype that has been made to build a new system.
The system developed is a web-based information
system using the PHP programming language.
In making the new system, the database design
that will be used is also carried out using the Entity-
Relationship Model using the Entity-Relationship
Diagram (ERD) (Kusrini, 2007). The database is a
collection of interconnected data which is one of the
main components supporting the application
program because it is used as a data storage area
(Pahlevi, 2013). Database created by using MySQL.
Source : (Bahar et al., n.d.)
Figure 8. Donation Pages Prototype Design

Figure 8 is the donation page. On this page

members or donors can input data on donations
that have been made by filling in payment data and
uploading proof of transfer of donation payments
1) Database And Table Design
that have been made.
132

Figure 11 is on the category page. The operator

or admin can see all the category data that has been
inputted. Users can also add, edit, search or delete
categories.

Source : (Bahar et al., n.d.)

Figure10. Entity Relationship Diagram of the Al- Source : (Bahar et al., n.d.)
Ruhamaa Foundation Information System Figure 12. Add Category Page Display

Figure 10 illustrates the ERD design for the Figure 12 is To add a new category, press the
developed system. after the ERD is designed, the Add Category button. After the Add Category page
next step is to create a database containing the files appears, type the name of the category. Then select
that are the result of the ERD transformation using for the article section or orphaned info. Then click
MySQL. The file created is stored in the "alruhama" Save, then the page will be redirected to category
database. The following are some examples of file data again.
specifications created in the development of
information systems at the Al-Ruhamaa 'Bogor
Foundation.
The user file is used to store user data
consisting of members, operators, and admins. Each
user can be given different access rights to access
the system developed according to the system
requirements that have been defined.

2) User Interface Design

The next step is to display the program user Source : (Bahar et al., n.d.)
interface based on the prototype design that has Figure 13. Edit Category Page Display
been designed and approved by the user (members,
operators, and admins). The following are some Figure 13 is to edit a category, press the Edit
examples of the display of programs that exist in the button on one of the category rows. Once the
information system at the Al Ruhamaa orphan category edit page appears, change the category
foundation: name or select an orphaned article or info section.
When finished, click the save button then the page
will be redirected back to category data. To search
for category data, type the name of the category in
the search field, then the category data will appear.
To delete a file, press the Delete button on the row
of the category you want to delete.

Source : (Bahar et al., n.d.)

Figure 11. Category Page Display
 133

Source : (Bahar et al., n.d.) Source : (Bahar et al., n.d.)

Figure 14. Edit Category Page Display Figure 16. Donation Report Page View

Figure 14 is admin can change the status of the Figure 16, to print the report, the user selects
donation confirmation that has been made by the the period of donation that he wants to print, then
member on the payment confirmation page by selects the status of the donation, and then clicks the
pressing the eye icon button to view the donation print button.
details. Checklist icon to accept donations, the cross
icon to reject donations, and the trash icon to delete E. Testing System
data. After the system has been created, the next
step is user testing the system developed using the
BlackBox testing method. Blackbox testing is done
by observing the results through test data and
checking the functionality of the software (Habibi &
Aprilian, 2019) In BlackBox testing, the software is
tested in terms of functional specifications to find
out whether the input and output functions of the
software made are in accordance with the required
specifications (Cholifah et al., 2018). Table 2 shows
some of the test results from the user acceptance
test (UAT) that have been carried out

Table 2. User Acceptance Test (UAT)

User Acceptance Test (UAT) Result
No Usecase Success/ Test Date of
Failed ed Test
By
1. Test Name: Login success Asyil 22 June
2021
Test Description:
Registered users can
access web pages
according to the access
rights granted

Source : (Bahar et al., n.d.) Test Case:

Figure 15. Donation Page Display - Username : <correct>
- Password : <correct>
Figure 15, users can input the donation data
Expected results :
that has been given by first inputting the bank name, - If true, the system
account number, donation amount, uploading proof receives a login to
of payment, and can also add a message if needed. access and then if
Furthermore, the user just waits for confirmation of the admin/operator
will be directed to
the status of the donation by the admin. the dashboard page
if a member it will go
to the home
- If wrong, the system
will deny login
access and display
the message
“Username not
134

User Acceptance Test (UAT) Result Source : (Bahar et al., n.d.)

No Usecase Success/ Test Date of
Failed ed Test
By F. Adjusting to User's Desires
found!” or “Wrong Testing of the systems that have been
password” developed is carried out to adjust to user needs. If
2. Test Name: success Asyil 22 June the results of system testing are by user needs and
Donation Transaction 2021
Confirmation
the organization's business processes, then the
system is ready to be implemented. If it is not
Test Description: appropriate, then the developer must make
Member confirms the adjustments to the systems created. Testing of the
donation paid via the
web by inputting the
admin and member interfaces is carried out by the
required data management of the Alruhama Foundation. For
testing the member interface, it was tested by four
Test Case: BSI university lecturers
input bank name,
account number,
donation amount, and Tabel 1. Member Interface Test Result
upload proof of Acces
payment, and you can Logi Donati
Partici Registr Dona Orph
add a message if n News on
pan ation tion an
necessary. Then click User Update Transa
info Info
send, then the next ction
donation will be 1 √ √ √ √ √ √
confirmed by the 2 √ √ √ √ √ √
admin 3 √ √ √ √ √ √
4 √ √ √ √ √ √
Expected results : Succee
- If successful, the 4 4 4 4 4 4
d
system will accept the 100 100 100
delivery and redirect Result 100% 100% 100%
% % %
to the donation history Source : (Bahar et al., n.d.)
page
- If it fails because
there is still empty Tabel 2. Operator and Administrator Interface Test
data or an error in Result
uploading the proof of Don Manage
transaction file type, ation
the system will refuse Parti confi New
delivery and display cipa rmat art
acco us s
the message “The n ion icl Galery Report
unt er Upd
filetype you are trying valid e
ate
to upload is not ation
allowed” in the proof 1 √ √ √ √ √ √ √
of transfer column and
display the message 2 √ √ √ √ √ √ √
“The field is required ”
in the column that is 3 √ √ √ √ √ √ √
not allowed is empty Succ
3 3 3 3 3 3 3
3. Test Name: Success Asyil 22 June eed
Print Donation Report 2021 10 10
Resu 100 100 100
0 0 100% 100%
Test Description: lt % % %
% %
Operators or admins
print donation reports
based on the selected
Table 1 and Table 2 show that the results of system
time range testing are in accordance with user needs and
organizational business processes. Thus it can be
Test Case: concluded that the system is ready to be
Selecting date and
implemented.
status column

Expected results : G. System Implementation

The system will accept After going through a series of processes and
the request and
display a new page
stages, the last stage of this method is the system
according to the date used by the user. Before the system is used, the
period with the system handed over to the user first. The system
selected status and that has been created can then be accessed online
ready to print
via the https://yatimcenter-alruhamaa.org/
 135

ACKNOWLEDGEMENT

Our gratitude goes to the administrators of the

Ruhamaa' Yatim Center Foundation, and our friends
who we cannot mention one by one one by one who
has helped us so this information system can be
completed properly

REFERENCE

Bahar, A. A. H., Arfananda, M. G., Wulandari, D. A. N.,

& Apriyani, H. (n.d.). SISTEM INFORMASI
YAYASAN YATIM CENTER AL-RUHAMAA’
BOGOR.
Budi, D. S., Siswa, T. A. Y., & Abijono, H. (2016).
Analisis Pemilihan Penerapan Proyek
Metodologi Pengembangan Rekayasa
Perangkat Lunak. Teknika, 5(1), 24–31.
Cholifah, W. N., Yulianingsih, Y., & Sagita, S. M.
(2018). Pengujian Black Box Testing pada
Aplikasi Action & Strategy Berbasis Android
dengan Teknologi Phonegap. STRING (Satuan
Source : (Bahar et al., n.d.) Tulisan Riset Dan Inovasi Teknologi), 3(2), 206.
Figure 16. The Handover Activities of the Information https://doi.org/10.30998/string.v3i2.3048
System Application of the Al-Ruhamaa' Bogor Yatim Firmansyah, Y.-, Maulana, R., & Arivianti, D. (2019).
Center Foundation Prototipe Sistem Informasi Pelelangan Barang
Berbasis Web Sebagai Media Pengolah
CONCLUSIONS Informasi Data Pelelangan. Jurnal Khatulistiwa
Informatika, 7(2), 134–140.
The information system at the website-based https://doi.org/10.31294/jki.v7i2.6655
Al-Ruhamaa' Bogor Yatim Center Foundation has Habibi, R., & Aprilian, R. (2019). Tutorial dan
been completed and implemented. It concluded that Penjelasan Aplikasi E-Office Berbasis Web
by using the Information System, the donation Menggunakan Metode RAD (R. Habibi (ed.)).
transaction process became more efficient. Donors Kreatif Industri Nusantara.
no longer need to come to the location directly to Kusrini. (2007). Strategi Perancangan dan
donate. Donors can confirm the donation has been Pengelolaan Basis Data (A. H. Triyuliana (ed.);
giving from the web. Donors only fill out the form Pertama). CV. Andi Offset.
provided and upload proof of transfer for further Muharto, & Ambarita, A. (2016). Metode Penelitian
verification by the management. Donors can also Sistem Informasi : Mengatasi Kesulitan
directly print proof of donation or invoice after Mahasiswa Dalam Menyusun Proposal
confirming. Calculation of the number of donations Penelitian (S. Hasan (ed.)). Deepublish.
collected can be done automatically and accurately. Mulyani, S. (2016). Metode Analisis dan
Management of the Al-Ruhamaa' Bogor Yatim Perancangan Sistem. Abdi Sistematika.
Center Foundation does not need reports using Nugroho, A. (2009). Rekayasa Perangkat Lunak
Microsoft Excel. Managers only need to press the Menggunakan UML dan JAVA (N. WK (ed.)). CV.
print button to print reports with a period as needed Andi Offset.
and ready to print whenever needed, to facilitate the Pahlevi, S. M. (2013). Tujuh Langkah Praktis
work of the administrators. For further system Pembangunan Basis Data. Elex Media
development, it's recommended to update the Komputindo.
donation feature using a payment gateway so that Purnomo, D. (2017). Model Prototyping Pada
transaction activities between donors and Pengembangan Sistem Informasi. J I M P -
administrators become easy and more efficient. In Jurnal Informatika Merdeka Pasuruan, 2(2),
addition, it is also necessary to create a live chat 54–61.
feature to replace WhatsApp to make it easier for https://doi.org/10.37438/jimp.v2i2.67
donors to contact the management directly when Riskiono, S. D., Hamidy, F., & Ulfia, T. (2020). Sistem
the donor is accessing the web https://yatimcenter- Informasi Manajemen Dana Donatur Berbasis
alruhamaa.org/. Web Pada Panti Asuhan Yatim Madani. Journal
136

of Social Sciences and Technology for Ilmiah UNIKOM, 14(1), 41–46.

Community Service (JSSTCS), 1(1), 21. https://doi.org/10.34010/miu.v14i1.174
https://doi.org/10.33365/jta.v1i1.670 Yoko, P., Adwiya, R., & Nugraha, W. (2019).
Sismadi. (2021). Penerapan Model Prototipe Penerapan Metode Prototype dalam
Aplikasi Perangkat Lunak Pemesanan Air Perancangan Aplikasi SIPINJAM Berbasis
Bersih PDAM Tirta Pakuan Kota Bogor. Inti Website pada Credit Union Canaga Antutn.
Nusa Mandiri, 15(2), 119–126. Jurnal Merpati, 7(3), 212–223.
Sumada, P., Anggara, I. N. Y., & Estiyanti, N. M. Yurindra. (2017). SOFTWARE ENGINEERING :
(2021). Pengembangan Sistem Informasi Pendekatan Model Proses Pengembangan
Manajemen Pengelolaan Dana Donatur Perangkat Lunak Pendekatan Model Proses
Berbasis Web. JASIEK (Jurnal Aplikasi Sains, Kematangan & Penilaian Perangkat Lunak (E.
Informasi, Elektronika Dan Komputer), 2(2), R. Fadilah (ed.); Pertama). Deepublish.
144~150.
Susanto, R., & Andriana, A. D. (2016). Perbandingan
Model Waterfall Dan Prototyping Untuk
Pengembangan Sistem Informasi. Majalah