Azril Syamin

Hai semua! Pernah tak korang rasa leceh nak kena catat kehadiran kawan-kawan dalam kelas setiap hari? Sebagai ketua kelas atau wakil pelajar, tugasan ni nampak macam remeh tapi kalau buat manual, penat juga nak asingkan siapa yang hadir dan siapa yang tak hadir beserta sebabnya.

Sebab itulah saya bangunkan Class-Attendance, satu projek open source ringkas yang asalnya saya buat untuk kegunaan peribadi di kelas saya, Computer System 4B. Projek ini dibina menggunakan asas web sahaja iaitu HTML, CSS, dan JavaScript supaya sesiapa pun boleh host dan gunakan tanpa perlukan server yang kompleks.

Paling penting, projek ini sekarang dilesenkan di bawah Lesen MIT. Maksudnya, korang bebas nak guna, ubah suai, dan kongsi semula kod saya ni!

Apa Kelebihan Sistem Ini?

Sistem ini direka untuk memudahkan aliran kerja (workflow) harian korang:

Paparan Senarai Nama: Semua nama pelajar terus keluar kat homepage.
Ambil Kehadiran: Korang hanya perlu tick pada nama kawan yang tak hadir.
Rekod Sebab: Masukkan sebab kenapa mereka tak masuk (contoh: MC, urusan keluarga).
Auto-Sorting: Sistem akan automatik bahagikan senarai kepada dua kumpulan: Hadir dan Tidak Hadir (beserta alasan).

Bagaimana Sistem Ini Berfungsi? (Flow Projek)

Sistem ini tidak memerlukan pangkalan data (database) yang rumit. Ia menggunakan logik yang mudah:

Papar Senarai: Bila anda buka homepage, senarai nama semua pelajar (atau ahli) akan dipaparkan.
Ambil Kehadiran: Ketua kelas hanya perlu tanda (tick) pada nama pelajar yang TIDAK HADIR sahaja. Jimat masa, tak perlu tanda semua orang.
Isi Sebab: Untuk pelajar yang tidak hadir, ketua kelas perlu masukkan sebab kenapa mereka ponteng atau tak dapat datang.
Jana Laporan: Bila dah selesai, sistem akan secara automatik memecahkan senarai tadi kepada 2 kumpulan:
- Senarai Pelajar yang Hadir.
- Senarai Pelajar yang Tidak Hadir (beserta sebabnya).

Mudah, bukan? Laporan ini siap untuk di copy-paste dan dihantar terus kepada guru kelas!

Teknologi di Sebalik Projek Ini

Bagi anda yang berminat dengan teknikal, anda mungkin terkejut mengetahui betapa lightweight sistem ini. Ia tidak menggunakan framework berat atau backend server.

Sistem ini dibina 100% menggunakan:

HTML: Untuk struktur halaman website.
CSS: Untuk mencantikkan rupa paras sistem.
JavaScript & JSON: Untuk menguruskan logik pengambilan kehadiran dan menyimpan data senarai nama pelajar.

Disebabkan ini, sistem ini sangat laju dan boleh dijalankan di mana-mana browser (Chrome, Firefox, Safari) dalam laptop atau telefon pintar.

Cara Penggunaan (Panduan Cepat)

Kerana projek ini menggunakan fail statik (HTML/JS), cara nak gunakannya tersangatlah mudah. Anda tak perlu install apa-apa software server seperti XAMPP.

Langkah-langkah:

Muat Turun (Download): Pergi ke repositori GitHub projek ini di https://github.com/AzrilSyamin/Class-Attendance dan muat turun sebagai ZIP, atau clone jika anda tahu caranya.
Ekstrak fail: Ekstrak fail ZIP yang dimuat turun tadi ke folder komputer anda.
Buka Fail: Cari fail bernama index.html dalam folder tersebut.
Double Click: Klik dua kali pada index.html. Ia akan terbuka secara automatik dalam web browser anda.

Sistem sedia untuk digunakan!

Langkah Demi Langkah: Cara Setup Sendiri

Bagi korang yang nak guna tapi tak tahu sangat pasal koding, jangan risau. Saya dah permudahkan prosesnya. Korang hanya perlu edit satu fail data dan tukar satu link sahaja.

Langkah 1: Sediakan Data Pelajar (JSON) Sistem ini membaca data daripada fail format JSON. Ini contoh struktur data yang korang perlukan. Korang boleh guna Notepad atau VS Code untuk buat fail bernama data.json.dan letakkan dalam folder projek yang sudah anda download tadi.

{
  "class": {
    "name": "5B",
    "Course": "Computer System 5B"
  },
  "students": [
    "AHMAD SYAHMI BIN ZULKIFLI",
    "NUR AISYAH HUMAIRA BINTI RAMLI",
    "MUHAMMAD DANISH HAFIZ",
    "SITI NURHALIZA BINTI ABDULLAH",
    "WAN MUHAMMAD AMIRUL",
    "LIM WEI JIE",
    "SIVAKUMAR A/L RAJOO"
  ]
}

Tips: Pastikan nama terakhir dalam senarai tidak mempunyai tanda koma (,) di hujungnya.

Langkah 2: Sambungkan Fail Data ke Skrip Sekarang, korang perlu beritahu sistem di mana fail JSON tadi berada. Buka fail script.js. Kalau korang tengok pada baris ke-9 (atau cari fungsi getData), korang akan jumpa kod untuk fetch data.

Korang hanya perlu gantikan pautan URL tersebut dengan nama fail korang atau pautan hos fail tersebut. Contohnya:

// Contoh fungsi getData dalam script.js
async function getData() {
    // Tukar pautan di bawah ini kepada nama fail JSON korang
    const response = await fetch('data.json'); 
    const data = await response.json();
    
    // Kod seterusnya akan memproses data tersebut...
    displayStudents(data.students);
    updateHeader(data.class);
}

Langkah 3: Jalankan Sistem Setelah korang tukar link tu, buka sahaja fail index.html menggunakan pelayar web (Chrome/Edge). Sistem akan secara automatik melakukan auto-fetch dan paparkan senarai nama yang korang dah tulis dalam JSON tadi!

Kenapa Korang Patut Cuba?

Selain daripada memudahkan urusan kelas, projek ini sangat bagus untuk korang yang baru nak belajar pasal Web Development. Korang boleh nampak macam mana JavaScript berinteraksi dengan data luaran secara asynchronous.

Kalau korang rasa projek ni membantu, jemputlah singgah ke repositori GitHub saya di AzrilSyamin/Class-Attendance. Korang boleh fork, bagi star, atau kalau ada idea nak tambah baik (macam nak buat integrasi dengan Google Sheets), jom kita collaborate!

Semoga bermanfaat untuk semua ketua kelas di luar sana! Anda juga boleh lihat preview disini .

Jom Contribute!

Projek ini adalah contoh terbaik bagaimana kod yang simple boleh menyelesaikan masalah harian. Memandangkan ia open-source, anda dijemput untuk melihat kod sumbernya, belajar daripadanya, atau memberikan sumbangan untuk menambah baik sistem ini.

Mungkin anda boleh tambah fungsi untuk eksport laporan ke PDF atau Excel?

Sila lawati repositori rasmi di GitHub untuk bermula: 👉 AzrilSyamin/Class-Attendance

Jangan lupa berikan Star ⭐ kepada projek ini jika anda rasa ia bermanfaat!