Login
Section Information Technology Education Method

Web-Based Information System for Recording TPQ Student Learning Outcomes

Sistem Informasi Berbasis Web untuk Pencatatan Hasil Belajar Siswa TPQ
Vol. 20 No. 4 (2025): November:

Fila Juwita Sari (1), Rohman Dijaya (2)

(1) Program Studi Informatika, Universitas Muhammadiyah Sidoarjo, Indonesia
(2) Program Studi Informatika, Universitas Muhammadiyah Sidoarjo, Indonesia
Fulltext View | Download

Abstract:

General Background: The digitization era requires educational institutions, including non-formal Islamic centers, to manage learning data systematically. Specific Background: TPQ Al-Amin still recorded student data, assessments, and reports manually on paper, creating risks of data loss and inefficiency. Knowledge Gap: Many TPQ institutions lack structured information systems to document student learning outcomes securely and accessibly. Aim: This study designed and implemented a web-based information system to manage student, teacher, and assessment data in TPQ using the waterfall development method and Laravel framework. Results: The system produced functional modules including login access, student data management, grade input, report generation, and recap features for administrators and teachers, supported by flowcharts, DFD, and use case diagrams. Novelty: The study provides a structured application of software engineering methods specifically tailored to a Qur’anic education center context. Implications: The system supports more organized documentation, faster data processing, and safer storage of student learning records for TPQ managers and parents.


Highlights:




  • Application of waterfall method for TPQ learning record management.




  • Web system integrating student data, grades, and report generation.




  • Software engineering approach applied in a Qur’anic education setting.




Keywords: Information System, TPQ, Website, Waterfall Method, Learning Records

Pendahuluan

Taman Pembelajaran Al- Qur’ an yaitu suatu lembaga maupun komunitas yang sediakan pembelajaran non- formal dalam bidang keagamaan Islam. Tujuannya merupakan buat mengarahkan Al- Qur’ an serta membagikan uraian tentang dasar- dasar ajaran Islam kepada kanak- kanak umur sekolah bawah ataupun madrasah ibtidaiyah . Selaku lembaga pembelajaran non- formal, keterlibatan warga jadi bagian integral serta berarti[1]. Membaca Al- Qur’ an tidak sama dengan berdiskusi dalam obrolan tiap hari, sehingga selaku seseorang muslim disarankan guna menekuni ilmu tajwid supaya bisa menguasai serta membaca kitab suci dengan benar.[2]

Pembelajaran Al-Quran merupaka dokumen yang harus diajarkan kepada anak sejak kecil. Semua orangtua usahakan memberi pendidikan tersebut, maka dari itu perlu karakter Al-Quran sejak dini. Kata “belajar” dan “Al-Qur’an” merupakan dua kata yang yang diartikan sebagai belajar Al-Qur’an. Pembelajaran dari aspek ini adalah metoda membimbing serta mengajari bacaan Al-Qur’an secara baik dan benar serta dilimpah lanjut dengan pemanfaatanya pada kehidupan sehari-hari.[3]

TPQ Al-Amin adalah salah satu lembaga pendidikan agama islam yang tidak lepas dari penginputan data, mulai dari daa siswa, data guru samapai dengan penilaian hasil belajar prosesnya dilakukan secara manual yatu menggunakan tulisan diatas kertas. Kemajuan dalam inovasi pada dasarnya adalah peralatan untuk membantu mendorong kegiatan, termasuk inovasi data Saat ini, sistem komputer mulai banyak diadopsi dalam dunia bisnis. Dampak perkembangan teknologi yaitu perubahan proses hasil penilaian pembelajaran taman pendidikan al-quran.

Oleh karena itu TPQ Al-Amin perlu inovasi untuk mempermudah proses pendataan sampai dengan laporan hasil penilaian pada TPQ. Berdasarkan uraian permasalahan maka peneliti mengambil judul “Sistem Informasi Hasil Pembelajaran Taman Pendidikan Al-Quran”

Metode

Penelitian tentang pembuatan kerangka data hasil belajaran Al-Quran ini dilakukan melalui lima langkah yang mengacu pada metode waterfall. Langkah-langkah tersebut meliputi

(1) Analisis Kebutuhan,

(2) Perencanaan kerangka,

(3) Eksekusi atau penulisan kode,

(4) pengujian,

(5) Penilaian dan pemeliharaan.

Tahapan rancangan waterfall dapat dilihat pada gambar di bawah ini.

Figure 1. Metode Waterfall

Berikut penjelasan dari metode waterfall :

  1. Analisa pada tahap ini peneliti melakukan analisis kebutuhan para pengguna aplikasi dan batasan-batasan pada perangkat lunak yang akan peneliti.
  2. Desain, peneliti akan memaparkan gambaran dari pada aplikasi yang akan dibangun untuk menjelaskan tampilan pada aplikasi dan cara kerja aplikasi.
  3. Koding, setelah didapatkan data yang diperlukan untuk bahan aplikasi tahap ini peneliti akan melakukan pembangunan pada aplikasi.
  4. Percobaan, tahap ini akan dilakukan pengjian terhadap aplikasi, pada situs web.
  5. Pemeliharaan, aplikasi yang telah peneliti bangun akan dicoba kepada pengguna untuk mencari tahu kekurangan pada situs web untuk dapat dilakukan pengembangan kembali terhadap aplikasi.[4]

Hasil dan Pembahasan

Setelah melakukan pengumpulan data serta analisis sistem , maka dilanjutkan dengan perancangan sistem yang efisien.

A. Flowchart

Flowchart adalah bagan yang menunjukkan bagaimana data diproses didalam suatu program dari awal hingga akhir dengan cara yang logis. Flowchart terdiri dari gambar yang membahas elemen langkah- langkah program dan garis aliran yang menunjukkan permintaan di mana gambar akan dieksekusi.[5]

Pemanfaatan flowchart sama halnya dengan perhitungan, yaitu untuk mengetikkan alur program namun dalam bentuk gambar atau foto. Diagram alur diklasifikasikan menjadi dua kategori: diagram yang menggambarkan aliran sistem dan diagram yang menggambarkan aliran program.[6] Diagram alur sistem adalah representasi visual dari alur kerja sistem secara keseluruhan yang juga menjelaskan urutan pelaksanaan prosedur sistem.[7]

Pada gambar 2 yaitu flowchart admin dan guru, admin dapat menginput data user, data guru, data siswa serta data rapor siswa. Sedangkan guru hanya bisa menginput data nilai dan data rapor siswa.

Figure 2. Flowchart

B. Diagram Konteks

Diagram konteks adalah diagram yang menunjukkan ruang lingkup suatu sistem dan mencakup suatu proses. Tuas paling atas dari DFD, Diagram Konteks, menggambarkan setiap masukan ke dalam sistem dan setiap keluaran yang berasal darinya.[8]

Diagram konteks dibuat bertujuan untukmengetahui keadaan sistem yang akan di bangun.[9] Grafik pengaturan dapat menjadi peralatan untuk menggambarkan aplikasi secara umum atau keseluruhan..[10]

Berikut diagram konteks Sistem Informasi Hasil Pembelajaran TPQ :

Figure 3. Diagram Konteks

C. DFD

Data flow diagram (DFD) adalah suatu diagram aliran data, yang menggunakan sejumlah simbol tertentu untuk mewakili pergerakan data yang terjadi selama operasi sistem bisnis.[11] DFD dapat digunakan sebagai alat untuk menjelaskan interaksi di dalam suatu kerangka kerja dengan lingkungannya dalam bentuk informasi yang masuk ke dalam kerangka kerja tersebut dan keluar dari kerangka kerja tersebut.[12]

Figure 4. DFD

D. Use Case Diagram

Memanfaatkan grafik kasus dapat menjadi strategi untuk memperlihatkan hubungan antara pengguna kerangka kerja dan kerangka kerja itu sendiri. Hasilnya dapat berupa diagram dasar untuk memudahkan klien mempelajari dan memperoleh data yang diberikan.[13]

Berikut merupakan rancangan use case diagram dari sistem informasi rapor berbasis website yang akan dibuat dan use case terdiri 2 aktor yaitu admin dan guru.

Figure 5.

E. User Interface

1. Login Page

Untuk menggunakan aplikasi yang telah dibuat, User Admin dan User Guru dapat menggunakanalamat aplikasi yang telah ditentukan. Pada Gambar 7 di bawah. User melakukan proses login dengan username dan password yang sudah dibuat

Figure 6. Halaman Login

2. Halaman Admin

Untuk dapat menggunakan aplikasi, ada beberapa fungsi dengan menekan menu.

Figure 7.

Hasil dan Pembahasan

A. Implementasi

Berdasarkan hasil dari penelitian ini yaitu Sistem Informasi Hasil Pemelajaran Taman Pendidikan Al-Qur’an untuk mempermudah mencatat laporan hasil pembelajaran TPQ. Berikut ini tampilan pada website sistem antara lain.

1. Halaman Login

Halaman Login digunakan agar user dapat melakukan login ke sistem, user harus melakukan proses pengisian username dan password

Figure 8.

2. Halaman Dashboard

Halaman ini yaitu terdiri dari menu jumlah data guru, data siswa dan rapor yang telah di input oleh Admin

Figure 9.

3. Halaman Jilid Santri

Pada halaman jilid santri yaitu terdapat menu tambah santri dan tampilan jumlah data santri

Figure 10.

4. Halaman Nilai Santri

Halaman nilai santri digunakan guru untuk menginput nilai-nilai santri, adapun menu untuk mengunduh hasil nilai

Figure 11.

5. Halaman Rekap Nilai Santri

Halaman rekap nilai santri digunakan admin untuk melihat hasil dan adapun menu untuk mengunduh hasil nilai

Figure 12.

6. Halaman Rapor Santri

Pada halaman rapor santri yaitu terdapat tampilan nilai-nilai santri yang sudah diinput dan akan diunduh

Figure 13.

7. Halaman Data Santri

Halaman data santri merupakan menu dimana admin dapat menambahkan data santri baru maupun mengedit data santri lama serta menghapus

Figure 14.

8. Detail Halaman Santri

Halaman detail santri dimana admin dapat menginput pendaftaran santri baru seperti nis, nama santri, alamat dan lain-lain. Serta dapat mengunduh hasil nilai santri

Figure 15.

9. Halaman Guru

Halaman guru merupakan halaman yang dimana terdapat menu tambah data guru baru serta dapat mengedit data guru

Figure 16.

10. Halaman Cetak

Pada halaman tersebut terdapat hasil akhir penilaian santri yang berupa rapor santri

Figure 17.

Simpulan

Peneitian ini dirancang dan dilakukan berdasarkan kebutuhan Taman Pendidikan Al-Qur’an Al-Amin. Sistem informasi TPQ yang mempermudah pekerjaan yaitu input data siswa, data guru dan data penilaian. Dengan proses terkomputasi ini penginputan dapat dipercepat, serta data yang dihasilkan lebih akurat dan siap pakai lebih cepat sehingga meminimalisir kesalahan. Metode waterfall yang digunakan menunjukkan bahwa fase-fase yang dilewati menunggu penyelesaian fase sebelumnya dan harus diselesaikan secara berurutan. Untuk pengembangan selanjutnya diharapkan aplikasi ini lebih meningkatkan keamanan sistem karena sistem bersifat online dan perlu maintenance untuk mengetahui fitur apa saja yang perlu ditambahkan pada sistem informasi tersebut.

Ucapan Terima Kasih

Ucapan terima kasih kepada Dosen Pembimbing, Pembimbing, dan pihak Perguruan Tinggi Muhammadiyah Sidoarjo yang telah memberikan kontribusi dan dukungan dalam penyelesaian penulisan artikel ini serta mendukung penyelesaian penulisan artikel ini. Penulis berharap dapat memperoleh tanggapan yang baik dari Jurnal Ilmiah Perancangan Informatika dalam penerbitan jurnal.

References

[1] A. Halim, A. Zamroni, W. Ahdi, and M. S. Shobirin, “Pembelajaran Al-Qur’an di Taman Pendidikan Al-Qur’an Roudlotul Tholabah Dusun Jemparing Desa Pakel,” Jumat Keagamaan: Jurnal Pengabdian Masyarakat, vol. 3, no. 1, pp. 50–54, 2022, doi: 10.32764/abdimas_agama.v3i1.2556.

[2] A. Syaifullah, F. M. Rahmah, F. Salamah, and T. Srisantyorini, “Penerapan Ilmu Tajwid dalam Pembelajaran Al-Qur’an untuk Mengembangkan Bacaan Al-Qur’an,” Artikel, pp. 1–4, 2021.

[3] R. B. Rohimah and I. Ngulwiyah, “Tren Metode Pembelajaran Al-Qur’an di Indonesia Tahun 2019–2023: Sebuah Systematic Review,” Jurnal Pendidikan Abad Ke-21, vol. 1, no. 2, pp. 85–94, 2023, doi: 10.53889/jpak.v1i2.329.

[4] F. Rosi, “Urgensi Pembelajaran Al-Qur’an Bagi Siswa Madrasah Ibtidaiyah,” Auladuna: Jurnal Prodi Pendidikan Guru Madrasah Ibtidaiyah, vol. 3, no. 2, pp. 36–53, 2021, doi: 10.36835/au.v3i2.579.

[5] A. Amirudin and M. A. Gustalika, “Perancangan Sistem Informasi TPQ Aisyah Maulida Hasanah Berbasis Website,” Jurnal Ilmiah Informatika, vol. 11, no. 01, pp. 77–84, 2023, doi: 10.33884/jif.v11i01.7159.

[6] T. Innovation, “Analisis Perancangan Sistem Informasi Perpustakaan Menggunakan Model Waterfall dalam Peningkatan Inovasi Teknologi,” vol. 1, no. 1, pp. 26–36, 2021.

[7] S. Laia, R. Siringoringo, and G. Lumbantoruan, “Sistem Informasi Penjualan Baju Adat Nias pada Toko Waristo Berbasis Web,” TAMIKA: Jurnal Tugas Akhir Manajemen Informatika dan Komputerisasi Akuntansi, vol. 3, no. 1, pp. 44–50, 2023, doi: 10.46880/tamika.vol3no1.pp44-50.

[8] Juliana, D. Driyani, and S. Khotijah, “Pengenalan Cerita Rakyat dan Game Edukasi untuk Anak Menggunakan Android,” Jurnal Ilmiah Informatika, Arsitektur, dan Lingkungan, vol. 14, no. 2, pp. 103–110, 2019.

[9] P. Informatika, F. Teknik, U. N. Jadid, K. Kunci, S. Pakar, and D. P. Mata, “Manusia Menggunakan Metode Forward Chaining,” vol. 1, no. 1, 2020.

[10] Safwandi, “Analisis Perancangan Sistem Informasi Sekolah Menengah Kejuruan 1 Gandapura dengan Model Diagram Konteks dan Data Flow Diagram,” Jurnal Teknologi Terapan Sains 4.0, vol. 2, no. 2, 2021.

[11] D. Y. Siringoringo, V. Sihombing, and U. Labuhanbatu, “Analisis Sistem Menggunakan Diagram Konteks dan DFD,” vol. 4, 2021, doi: 10.37600/tekinkom.v4i1.232.

[12] A. Sahi, “Tematik: Jurnal Teknologi Informasi dan Komunikasi,” vol. 7, no. 1, pp. 120–129, Jun. 2020.

[13] M. Muliadi, M. Andriani, and H. Irawan, “Perancangan Sistem Informasi Pemesanan Kamar Hotel Berbasis Website Menggunakan Data Flow Diagram (DFD),” JISI: Jurnal Integrasi Sistem Industri, vol. 7, no. 2, p. 111, 2020, doi: 10.24853/jisi.7.2.111-122.

[14] A. R. Simatupang and S. Nafisah, “Analisis Proses pada Senayan Library Information Management System (SLIMS) Cendana Berbasis Data Flow Diagram (DFD) di Perpustakaan Universitas Kristen Duta Wacana Yogyakarta,” vol. 5, no. 1, pp. 1–15, 2020.

[15] R. F. Wijaya and R. B. Utomo, “Metode Waterfall dalam Rancang Bangun Sistem Informasi Manajemen Kegiatan Masjid Berbasis Web,” KLIK: Kajian Ilmiah Informatika dan Komputer, vol. 3, no. 5, pp. 563–571, 2023.