Prompt Aplikasi Administrasi Pembelajaran Berbasis Web di Lovable

 

Buatkan kode aplikasi web Administrasi Pembelajaran menggunakan HTML, CSS, dan JavaScript dengan fitur berikut:

1. Kehadiran Siswa

• Form input: Nama siswa (input text), Kelas (input text), Tanggal (date picker), Status kehadiran (dropdown: Hadir, Izin, Sakit, Alfa, Dispensasi).

• Data ditampilkan dalam tabel kehadiran.

• Tombol Simpan untuk menambah data.

• Fitur Hapus untuk setiap baris.

2. Jurnal Pembelajaran

• Form input: Tanggal, Kelas, Mata Pelajaran, Materi Pokok, Metode, Media, Refleksi Guru.

• Data ditampilkan dalam tabel jurnal.

• Tombol Simpan untuk menambah data.

• Fitur Hapus untuk setiap baris.

3. Rekap Data

• Filter berdasarkan tanggal (harian) dan bulan.

• Tampilkan jumlah total Hadir, Izin, Sakit, Alfa secara otomatis.

• Buat ringkasan rekap jurnal per hari/bulan.

4. Fitur Cetak

• Tambahkan tombol Cetak untuk:

  • Cetak Daftar Kehadiran

  • Cetak Jurnal Pembelajaran

  • Cetak Rekap Harian

  • Cetak Rekap Bulanan

• Gunakan window.print() agar mudah dicetak ke PDF/printer.

5. Desain Tampilan

• Gunakan CSS modern, minimalis, responsif.

• Warna dominan: biru (#1E90FF) dan hijau (#28A745).

• Font Google Fonts: Poppins.

• Tambahkan ikon emoji sederhana ✅📘✏️🎓.

• Header aplikasi: “Administrasi Pembelajaran SMAN 4 Pamekasan”.