Naufal Ainurrochman (1), Rohman Dijaya (2)
General Background Zakat institutions require modernized technological solutions to manage public funds with high accountability and operational speed. Specific Background Lazismu faces operational bottlenecks in manual donation recording and financial reporting, which hinders public trust and organizational performance. Knowledge Gap Existing web platforms for charitable donations often lack integrated real-time tracking combined with automated multi-channel payment verification tailored for non-profit zakat management. Aims This study aims to develop and implement an integrated web-based donation information system to streamline donation collection and public reporting workflows at Lazismu. Results Built using JavaScript, React, Node.js, and MongoDB through Agile methodologies, the developed system achieved a 30% reduction in processing time during functional black box testing while providing transparent automated visual financial dashboards. Novelty The platform combines agile full-stack architecture with localized automated reporting mechanisms designed specifically for Islamic philanthropic operations. Implications Deploying this digital architecture provides non-profit management with scalable tools to increase public credibility, accelerate fundraising workflows, and modernize charitable fund distribution.
Key Findings Highlights
Full-stack web system integration streamlines donation collection and reporting workflows.
Automated visual reporting features provide public access to verified financial transaction data.
System implementation demonstrates a 30% reduction in donation data management processing time.
Keywords Donation Information System, Web Application Development, Zakat Management, Financial Transparency, Agile Development
Lazismu adalah lembaga zakat resmi yang didirikan oleh Muhammadiyah, salah satu organisasi Islam terbesar di Indonesia. LAZISMU berfungsi sebagai badan yang mengelola zakat, infaq, dan sedekah dari masyarakat untuk disalurkan kepada mereka yang membutuhkan sesuai dengan prinsip-prinsip syariah. Selama program magang di LAZISMU, penulis diberi tugas untuk mengembangkan sistem Infaq dan Shadaqah berbasis web yang terintegrasi, dari fokus utama perusahaan Di era digital ini [1]. Sistem ini dirancang untuk membantu mempermudah peningkatan transparansi dan akuntabilitas pengelolaan dana zakat, Pengelolaan dan penyaluaran secara manual yang dilakukan secara umum cenderung kurang efisien dan rentan terhadap kesalahan, yang pada akhirnya berdampak pada akurasi data dana yang terkumpul dan kelancaran penyalurannya, suatu keharusan untuk membangun kepercayaan pada masyarakat.
Dalam era digital yang semakin berkembang pesat, teknologi advanced memainkan peran yang sangat penting dalam mendukung kegiatan lembaga sosial. LAZISMU sebagai salah satunya yang merasakan dampak dari perkembangan teknologi, khususnya dalam hal sistem informasi. Penggunaan teknologi informasi, terutama sistem berbasis web, mampu memberikan kemudahan dan efisiensi dalam mengelola berbagai aspek sosial, termasuk proses donasi, inventarisasi,transparansi, dan manajemen penyaluran donasi. Sistem informasi berbasis web menjadi solusi yang semakin relevan bagi lembaga sosial di bidang ini untuk meningkatkan efektifitas [2].
Perkembangan sistem informasi donas berbasis web memberikan berbagai keunggulan, seperti aksesibilitas yang tinggi, integrasi data secara real-time, serta peningkatan efisiensi operasional. Penguna dapat dengan mudah mengakses informasi donasi dan melakukan donasi secara mandiri melalui platform yang tersedia kapan saja dan di mana saja [3]. Hal ini tidak hanya meningkatkan kepuasan penguna, tetapi juga memberikan kepercayaan bagi penguna dalam berdonasi serta meminimalkan kemungkinan ketidak tepatan penyaluran yang umum terjadi dalam proses manual [4].
Dalam penelitian ini, penulis mengembangkan sistem donasi berbasis web yang memudah penguna Beberapa penelitian menunjukkan bahwa sistem informasi berbasis web dapat menjadi solusi dalam menyederhanakan proses pengumpulan donasi dan meningkatkan kepercayaan publik. Dengan menggunakan teknologi yang tepat[5].
Sistem yang dikembangkan ini diharapkan dapat mempercepat proses pengumpulan dana, mengurangi kesalahan pencatatan, dan memberikan laporan yang transparan. Penelitian ini bertujuan untuk mengembangkan sistem informasi donasi berbasis web yang terintegrasi di Lazismu [6].
Metode penelitian ini terdiri dari tahapan-tahapan sebagai berikut:
Usercase Use case menggambarkan skenario interaksi antara pengguna dan sistem, memastikan setiap fitur memenuhi persyaratan fungsional. Pada use case ini, pengguna utama sistem meliputi penguna yang melakukan Login dan transaksi.
Diagram use case menunjukkan alur interaksi tipikal dalam sistem dan menggambarkan bagaimana pengguna dapat melakukan berbagai tindakan, seperti melakukan Login, memili menu, dan melakukan Transaksi [9].
Figure 1.
Gambar2.Usecase
Flowchart menggambarkan alur proses yang terjadi dalam sistem manajemen penjualan. Alur ini dimulai dari proses login penguna, yang kemudian memili menu, hingga melakukan transaksi. Setiap tahapan yang digambarkan dalam flowchart ini bertujuan untuk memastikan keakuratan proses operasional, yang pada akhirnya akan berdampak pada kecepatan dan keandalan manajemen penyaluran di lembaga [10].
Figure 2.
Gambar3.Flowchat sistem informasi donasi LAZISMU
1. Hasil Pengembangan Site Lazismu Pengembangan site Lazismu telah menghasilkan sebuah stage advanced yang berfungsi sebagai sarana donasi online dan pusat informasi kegiatan sosial. Fitur utama yang berhasil diimplementasikan antara lain:
Halaman Donasi Online:
Fitur ini memungkinkan pengguna melakukan donasi secara langsung melalui site dengan metode pembayaran yang mudah dijangkau. Informasi donasi, seperti pilihan program, jumlah donasi, dan opsi pembayaran, ditampilkan secara jelas sehingga memudahkan pengguna dalam proses berdonasi.
Transparansi Laporan Keuangan:
Site memuat laporan penggunaan dana yang dapat diakses oleh publik. Laporan ini mencakup informasi dana yang diterima serta penyalurannya dalam berbagai program Lazismu, yang diupdate secara berkala. Fitur ini bertujuan untuk membangun kepercayaan dengan menyediakan informasi yang transparan kepada donatur [13].
Tersedia halaman khusus yang menampilkan deskripsi program, target penerima manfaat, serta capaian kegiatan Lazismu. Halaman ini memberikan wawasan kepada masyarakat mengenai dampak yang telah dihasilkan oleh program yang didukung donatur.
Informasi Program dan Kegiatan:
2. Pengalaman Pengguna dan Aksesibilitas Berdasarkan uji coba yang melibatkan calon pengguna (donatur dan staf Lazismu), site memperoleh penilaian positif terkait kemudahan navigasi, kejelasan informasi, dan desain antarmuka yang menarik. Fitur-fitur inti, seperti donasi dan laporan transparansi, dirancang dengan tata letak yang sederhana dan intuitif sehingga pengguna merasa nyaman mengaksesnya. Pengguna juga mengapresiasi adanya beberapa pilihan metode donasi yang memudahkan transaksi.
3. Peningkatan Transparansi dan Kepercayaan Donatur Keberadaan laporan keuangan yang dapat diakses publik terbukti meningkatkan kepercayaan donatur. Pengguna yang telah mencoba site merasa lebih yakin dan terdorong untuk berdonasi karena mereka dapat melihat secara langsung bagaimana dana dikelola dan digunakan. Site ini tidak hanya menjadi sarana donasi, tetapi juga berperan sebagai jembatan komunikasi yang transparan antara Lazismu dan masyarakat.
4. Kendala dan Solusi Salah satu kendala yang dihadapi dalam pengembangan adalah kebutuhan untuk menjaga keamanan information pengguna, terutama information donasi. Untuk mengatasi ini, diterapkan protokol keamanan, termasuk enkripsi information dan pengaturan autentikasi pengguna. Selain itu, perbaikan minor dilakukan berdasarkan hasil criticism dari uji coba, seperti memperbaiki kecepatan akses dan optimalisasi tampilan untuk perangkat portable.
5. Implikasi Pengembangan Site bagi Lembaga Sosial Pengembangan site Lazismu ini menjadi show yang relevan bagi lembaga sosial lain yang ingin meningkatkan transparansi dan memfasilitasi donasi online. Integrasi teknologi computerized membantu lembaga sosial memperluas jangkauan layanan dan mengadaptasi perubahan perilaku masyarakat yang lebih menyukai transaksi online. Dengan menyediakan akses yang mudah dan informasi yang transparan, site dapat meningkatkan keterlibatan masyarakat dan memperkuat akuntabilitas lembaga.
User interface :
Pengembangan sistem ini memanfaatkan prinsip antarmuka yang user-friendly dan navigasi yang jelas untuk memudahkan pengguna dalam mengoperasikan sistem[14]. Dengan desain yang responsif, aplikasi ini dapat digunakan di berbagai perangkat, meningkatkan fleksibilitas penggunaan.
1. Login
Figure 3.
Gambar1.Halaman login
Gambar 1. Akan menampilkan halaman login untuk user. User Interface pada sistem dibuat dengan menggunakan html agar tampilan sistem bisa lebih interaktif dan user friendly. Tampilan ini terdapat 2 input untuk memasukkan email dan password. Jika email dan password terdaftar makaakan langsung diarahkan ke halaman Homepage. Jika email dan password tidak terdaftar akan menampilkan eror [15].
2. Homepage
Figure 4.
Gambar2.Halaman Homepage
3. Tentang kami
Gambar2.Halaman homepage website Lazismu menampilkan informasi utama secara ringkas dan menarik. Di bagian atas, terdapat banner besar dengan ajakan untuk berdonasi dan pilihan program unggulan, seperti bantuan kesehatan, pendidikan, dan kemanusiaan..
Figure 5.
Gambar3.Halaman tentang kami
Gambar 3. alaman ini menjelaskan komitmen Lazismu dalam membantu masyarakat melalui program-program sosial, kesehatan, pendidikan, dan pemberdayaan ekonomi. Selain itu, ditampilkan juga nilai-nilai dasar organisasi, pencapaian, serta pengenalan singkat tim yang bekerja untuk mengelola dana donasi dengan transparan dan profesional.
4. Donasi
Figure 6.
Gambar4.Halaman Donasi
Gambar 4. Tampilan halaman Donasi ini menyajikan Halaman donasi Halaman donasi Lazismu dibuat sederhana agar mudah digunakan. Di sini, pengguna bisa memilih program yang ingin didukung, melihat tujuan dan dampaknya, serta memilih jumlah donasi dan metode pembayaran (transfer bank, e-wallet, atau kartu kredit).
Penelitian ini berhasil mengembangkan sistem informasi donasi berbasis web yang mampu meningkatkan akurasi, kecepatan, dan transparansi dalam proses penerimaan dan pelaporan donasi di Lazismu. Lembaga zakat seperti Lazismu memiliki tantangan dalam memastikan efisiensi dan transparansi pengelolaan donasi. Sistem yang berhasil dikembangkan ini mampu mengintegrasikan berbagai metode pembayaran digital, memungkinkan otomatisasi proses pencatatan, dan menyediakan laporan berbasis data visualisasi yang mudah dipahami. Berdasarkan hasil uji coba, sistem menunjukkan peningkatan efisiensi hingga 30% dalam waktu pengelolaan donasi. Website ini diharapkan dapat menjadi solusi yang efektif dalam meningkatkan kinerja lembaga zakat, khususnya dalam pengelolaan dana masyarakat secara transparan dan efisien.
Ucapan Terima Kasih
Terima Dengan penuh rasa syukur, kami mengucapkan terima kasih kepada Tuhan Yang Maha Esa atas segala rahmat dan karunia-Nya, sehingga laporan magang ini dapat diselesaikan dengan baik. Kami juga menyampaikan penghargaan yang sebesar-besarnya kepada mas Aditia Yudono, S.E , pembimbing magang di LAZISMU, yang telah memberikan bimbingan, arahan, serta kesempatan untuk mengembangkan keterampilan dan pengetahuan kami selama menjalani program magang. Pengalaman dan pengetahuan yang diberikan selama periode ini sangat berharga bagi kami. Terima kasih juga kepada semua pihak yang telah mendukung, baik secara langsung maupun tidak langsung,
Ziakis, M. Vlachopoulou, T. Kyrkoudis, and M. Karagkiozidou, "Important Factors for Improving Google Search Rank," Future Internet, vol. 11, no. 2, art. no. 32, 2019, doi: 10.3390/fi11020032.
Barabas, O. Panasiuk, and A. Kryvonos, "Formation of the Company’s Digital Competitive Advantages," Mechanism of an Economic Regulation, no. 2(100), pp. 12–18, 2023, doi: 10.32782/mer.2023.100.02.
N. Nuryadi, "Web-Based Batik Clothing Information System on CV. Desta," Journal of Information Systems, vol. 3, no. 2, pp. 198–207, 2022.
G. Jingzu, L. Siyu, W. Mengling, Q. Yang, A. Al Mamun, and N. Hayat, "Sustainable Entrepreneurship Through Customer Satisfaction and Reuse Intention of Online Food Delivery Applications: Insights from China," Journal of Innovation and Entrepreneurship, vol. 13, no. 1, 2024, doi: 10.1186/s13731-024-00399-z.
S. Device, "Sistem Informasi Berbasis Web Menggunakan Metode Rapid Application Development," Jurnal Teknologi Informasi, pp. 13–18, 2002.
L. Php and U. Mysql, Learn PHP 8: Programming, Problem Solving and Data Science Application with Modern PHP. Berkeley, CA, USA: Apress, 2021.
Y. Aleryani and I. Researcher, "Evaluation of Web Application Frameworks for Modern Software Development," European Modern Studies Journal, vol. 8, no. 1, pp. 313–320, 2024, doi: 10.59573/emsj.8(1).2024.28.
M. Javed and Y. Lin, "Iterative Process for Generating ER Diagram from Unrestricted Requirements," in Proceedings of the 13th International Conference on Enterprise Information Systems (ENASE 2018), 2020, pp. 192–204, doi: 10.5220/0006778701920204.
E. Zimmermann, E. E. King, and D. D. Bose, "Mixed-Methods Study Design and Implementation in Educational Research," American Journal of Pharmaceutical Education, vol. 88, no. 1, p. 100591, 2024, doi: 10.1016/j.ajpe.2023.100591.
N. Garzón-Orjuela, H. Vornhagen, C. Blake, and A. Vellinga, "Evaluation of Different Landing Pages on Behavioural Engagement with the CARA Dashboard: A User Research Protocol," Journal of User Experience Design, pp. 1–6, 2024.
T. Alrashed, D. P. B, O. Benjelloun, and Y. Sheng, "Dataset or Not? A Study on the Veracity of Semantic Markup for Dataset Pages," Journal of Data and Information Quality, vol. 2, pp. 338–356, 2021.
M. Nasir and I. Solikin, "Rancang Bangun E-Commerce Toko Raffamart Palembang Menggunakan Macromedia Dreamweaver," Jurnal Ilmiah MATRIK, vol. 20, no. 3, pp. 247–257, 2018.
Guzmaliza, "Perangkat Lunak Bantu Administrasi Keuangan Sekolah Tinggi Teknologi Pagar Alam dengan PHP dan MySQL," Jurnal Ilmiah BETRIK, vol. 10, no. 01, pp. 28–37, 2019, doi: 10.36050/betrik.v10i01.24.
R. Sitanggang, T. U. Dachi, and H. G. I. Manurung, "Rancang Bangun Sistem Penjualan Tanaman Hias Berbasis Web Menggunakan PHP dan MySQL," TEKESNOS, vol. 4, no. 1, pp. 84–90, 2022.
R. Setyorini et al., "Crowd Farming Dengan Hydroponik & Aquaponik Sebagai Bisnis Mandiri Desa Di Komunitas Muda Berseri Desa Rancatungku," IJCD: Indonesian Journal of Community Dedication, vol. 1, no. 1, pp. 29–37, 2023.