Bertindak sebagai ahli Google Apps Script.
Tugas Anda:
Menganalisis dataset dan merekomendasikan aplikasi CRUD yang sesuai lengkap dengan filter ataupun sorting per kategori.
Membangun aplikasi viewer interaktif yang berfungsi penuh sebagai Aplikasi Web Google Apps Script menggunakan html dan Bootstrap.
Persyaratan:
Menggunakan metode bound script
Berkas terpisah:
Code.gs, Index.html, JavaScript.html, css.html
Menggunakan fungsi include() sisi server
Menormalkan semua data di sisi server (tanggal, angka, boolean)
Memastikan grafik dimuat dengan benar tanpa kesalahan tersembunyi
Output:
Kode lengkap yang berfungsi
Langkah-langkah penerapan sederhana untuk pengguna non-teknis
Buatkan skrip JavaScript frontend (untuk file HTML di lingkungan Google Apps Script) yang mengelola interaksi CRUD data siswa hasil Tes Kemampuan Akademik (TKA) secara dinamis menggunakan Bootstrap 5 dan Google Charts. Skrip harus mencakup fitur-fitur berikut:
1. **Inisialisasi & State Management**:
- Menyimpan state data siswa (`allStudents`), data terfilter (`filteredStudents`), dan daftar sekolah unik (`schoolList`).
- Menginisialisasi Bootstrap Modal untuk aksi Tambah/Edit dan Konfirmasi Hapus.
- Memuat Google Charts secara dinamis dan otomatis menggambar ulang (resize) chart saat layar berubah ukuran.
2. **Sinkronisasi Data Sisi Server (Google Apps Script)**:
- Membaca data menggunakan `google.script.run` dengan fungsi `getNormalizedData`.
- Mengirim data form baru atau pembaruan melalui `saveOrUpdateRecord`.
- Melakukan penghapusan baris data melalui fungsi `deleteRecordByTka`.
- Menyediakan fungsi penanganan sukses (`withSuccessHandler`) dan gagal (`withFailureHandler`) yang mumpuni.
3. **Penyaringan & Pengurutan Tingkat Lanjut (Filter & Sort)**:
- Pencarian instan (real-time) berdasarkan Nama, Nomor TKA, NISN, atau Sekolah.
- Filter dropdown berdasarkan Sekolah, Kategori Nilai Matematika, dan Kategori Nilai B. Indonesia.
- Fitur pengurutan (sorting) dinamis berdasarkan Nama (A-Z/Z-A) serta Nilai Tertinggi/Terendah Matematika dan B. Indonesia.
4. **Render Tabel & Pagination**:
- Menampilkan data secara bertahap menggunakan pagination (maksimal 10 item per halaman) lengkap dengan kontrol tombol halaman (Previous, Angka Halaman, Next).
- Menampilkan badge kategori nilai dengan pewarnaan dinamis (Istimewa, Baik, Memadai, Kurang).
5. **Interaksi CRUD & Notifikasi Kustom**:
- Fungsi penanganan form Tambah (buka modal baru) dan form Edit (mengisi data siswa lama dan mengunci field kunci unik/Nomor TKA).
- Proses hapus data yang aman menggunakan modal konfirmasi kustom Bootstrap (bukan `alert` browser).
- Sistem notifikasi Toast kustom yang muncul di pojok kanan bawah dengan efek slide-in dan otomatis menghilang dalam 4 detik.
Tidak ada komentar:
Posting Komentar