MPA - Bukti Pendaftaran

 

https://script.google.com/macros/s/AKfycbw1NyiOCuf1kvPEHau3viii_943iUX5CTQJ3hQRM97ng_BMNLsAITQzjUKmp25TYBvx/exec

https://drive.google.com/drive/folders/1iyv5USLtDdZi8gM94qyj7Wz5lEBkK1Oc

https://docs.google.com/spreadsheets/d/1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ/edit?gid=0#gid=0

https://script.google.com/home/projects/1GyAbDbcbDSv4PxXe_EfMYxqLo2LhtZ5Ej9hzsBHUwOejK1BxSZ0tfaSl/edit

PROMPT

Act as a senior Google Apps Script developer, UI/UX designer, dan system architect.

Bangun sebuah aplikasi web menggunakan Google Apps Script dengan metode Standalone Script dan arsitektur MPA (Multi Page Application) untuk sistem pendaftaran siswa SMA berbasis online. id spreadsheet : 1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ

sheetname : Siswa

id Drive bukti pendaftaran : 1Q7QmXJzlGrdPrMcfYkx8isZgSie-ZFaj

id Drive foto :17rSN4bUIHjIDHVLaPRbDK5pxr-yGaxkL. Aplikasi digunakan untuk proses pendaftaran siswa baru SMA secara online dengan fitur:

Landing page modern

Form pendaftaran siswa

CRUD data pendaftaran

Upload dan penyimpanan foto ke Google Drive

Generate dan cetak PDF bukti pendaftaran

Dashboard admin

Responsive UI modern

Spesifikasi Teknologi

Platform

Google Apps Script (Standalone Script)

Google Spreadsheet sebagai database

Google Drive sebagai penyimpanan foto dan PDF

HTML Service untuk frontend

Arsitektur

Gunakan arsitektur:

MPA (Multi Page Application)

Setiap halaman dipisah menjadi file HTML berbeda 

Berikut adalah seluruh kod sumber yang telah dipecahkan kepada fail-fail berasingan mengikut struktur projek Google Apps Script (GAS) MPA yang profesional, lengkap dengan reka bentuk UI/UX yang premium dan panduan langkah demi langkah untuk proses deployment.

Kita akan mencipta 5 fail berikut:

1. Code.gs (Logik Backend & Penjana PDF)

2. Landing.html (Halaman Utama)

3. Form.html (Borang Pendaftaran Multi-step & Muat Naik Foto)

4. Dashboard.html (Halaman Pentadbir/Admin & Pengurusan Data)

5. Panduan_Deploy.md (Langkah Deployment & Persediaan Google Drive/Spreadsheet)

Panduan Penyebaran Portal PPDB SMA Atas Talian

Dokumen panduan ini bertujuan untuk membantu proses deployment dan konfigurasi kod sumber di atas ke Google Apps Script (GAS).

Langkah 1: Persediaan Pangkalan Data (Google Spreadsheet)

1. Cipta Google Spreadsheet baru atau gunakan fail sedia ada yang mempunyai ID: 1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ.

2. Tukar nama tab helaian pertama (Sheet Name) kepada: Siswa.

3. Sediakan 10 kepala kolum (Headers) berikut pada baris pertama (Baris 1 dari Kolum A hingga J):

   • A1: ID

   • B1: NISN

   • C1: Nama

   • D1: Alamat

   • E1: Email

   • F1: Asal SMP

   • G1: URL Foto

   • H1: Sekolah Tujuan

   • I1: Timestamp

   • J1: URL PDF

Langkah 2: Persediaan Fail Folder Google Drive

Sistem memerlukan dua folder khusus di dalam Google Drive untuk penyimpanan dokumen digital. Cipta folder baharu dan salin ID foldernya:

1. Folder Foto Siswa:

   • Cipta folder baharu dan namakannya Foto Siswa PPDB.

   • Kongsi folder ini secara terbuka: Klik Kanan -> Kongsi -> Pilih Sesiapa sahaja yang mempunyai pautan boleh melihat (Viewer).

   • Salin ID foldernya (cth: 17rSN4bUIHjIDHVLaPRbDK5pxr-yGaxkL) dan kemas kini pemalar photoFolderId dalam CONFIG fail Code.gs.

2. Folder Bukti PDF:

   • Cipta folder kedua bernama Kad PDF Bukti Pendaftaran.

   • Setkan akses kongsi folder kepada: Sesiapa sahaja yang mempunyai pautan boleh melihat (Viewer).

   • Salin ID foldernya (cth: 1Q7QmXJzlGrdPrMcfYkx8isZgSie-ZFaj) dan kemas kini pemalar pdfFolderId dalam CONFIG fail Code.gs.

Langkah 3: Membuat Projek Google Apps Script (GAS)

1. Layari script.google.com dan log masuk menggunakan akaun Google anda.

2. Klik butang New Project (Projek Baharu).

3. Namakan semula projek anda sebagai: Sistem Portal PPDB SMA.

4. Cipta fail-fail baharu mengikut senarai di bawah (Gunakan butang + -> Pilih format HTML atau Script):

Nama Fail di GAS	Jenis Fail	Sumber Kandungan (Sila Salin dari Atas)
Code.gs	Script	Salin semua kod daripada bahagian Code.gs
Landing.html	HTML	Salin kandungan HTML dari fail Landing.html
Form.html	HTML	Salin kandungan HTML dari fail Form.html
Dashboard.html	HTML	Salin kandungan HTML dari fail Dashboard.html

Langkah 4: Proses Pelancaran Aplikasi Web (Deployment)

1. Di dalam Editor GAS, klik butang Deploy di penjuru kanan atas -> Pilih New deployment (Penyebaran baharu).

2. Klik pada ikon tetapan roda gerigi (Select type) -> Pilih Web app (Aplikasi Web).

3. Konfigurasikan tetapan penyebaran seperti berikut:

   • Description: PPDB Versi Pelancaran Stabil

   • Execute as: Me (emel_anda@gmail.com) (Ini penting bagi membenarkan kod mengakses Drive & Spreadsheet bagi pihak aplikasi)

   • Who has access: Anyone (Pendaftar luar boleh membuka halaman borang pendaftaran)

4. Klik butang Deploy.

5. Sekiranya permohonan kebenaran keselamatan dipaparkan, klik Authorize Access, log masuk ke akaun Google anda, klik Advanced -> Pilih Go to Sistem Portal PPDB SMA (unsafe) untuk memberikan kebenaran.

6. Selepas selesai, sistem akan memaparkan Web app URL. Salin pautan URL ini untuk dipautkan di laman sosial atau diakses secara rasmi oleh pelajar.

🎉 Selesai!

Portal PPDB MPA anda kini sedia menerima pendaftaran siswa baharu secara langsung. Semua data yang diisi, fail pas foto yang dimuat naik, serta fail PDF kad bukti pendaftaran akan disimpan secara automatik dalam Workspace Google anda.