Sabtu, 30 Mei 2026

Rabu, 27 Mei 2026

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:

Code.gs (Logik Backend & Penjana PDF)
Landing.html (Halaman Utama)
Form.html (Borang Pendaftaran Multi-step & Muat Naik Foto)
Dashboard.html (Halaman Pentadbir/Admin & Pengurusan Data)
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)

Cipta Google Spreadsheet baru atau gunakan fail sedia ada yang mempunyai ID: 1fvtolGMLP1c-p4j776tp4aNR5RT2Vz2NL8rHohr7HyQ.
Tukar nama tab helaian pertama (Sheet Name) kepada: Siswa.
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:

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.
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)

Layari script.google.com dan log masuk menggunakan akaun Google anda.
Klik butang New Project (Projek Baharu).
Namakan semula projek anda sebagai: Sistem Portal PPDB SMA.
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)

Di dalam Editor GAS, klik butang Deploy di penjuru kanan atas -> Pilih New deployment (Penyebaran baharu).
Klik pada ikon tetapan roda gerigi (Select type) -> Pilih Web app (Aplikasi Web).
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)
Klik butang Deploy.
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.
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.

MPA - Pendaftaran

https://script.google.com/macros/s/AKfycbwmBwwdX9_ci2GjkDmFx92nhUk0OJiHL74WLiQWZFgGTWchUkN1zje10fTL-pX-O8Tr/exec

https://drive.google.com/drive/folders/1LoNkWI5GNH-v9Lt0YNsvRrZOVnbFWs57

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.

Tujuan Aplikasi

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

Struktur File

Gunakan struktur file berikut:

Code.gs

Config.gs

Auth.gs

Student.gs

Pdf.gs

Drive.gs

Index.html

Landing.html

Dashboard.html

Detail.html

Navbar.html

Sidebar.html

Footer.html

CSS.html

JS.html

Gunakan fungsi include() untuk template reusable.

Contoh:

function include(filename){

return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

Landing Page

Buat landing page modern gaya startup education technology.

Hero Section

Hero section harus memiliki:

Headline besar:

“Sistem Pendaftaran Siswa SMA”

Subheadline:

“Platform digital untuk pendaftaran siswa baru secara cepat, aman, dan modern”

Tombol CTA:

Daftar Sekarang

Visual Style

Gunakan desain:

Modern

Clean

Edu-tech startup

Responsive

Minimalis

Gradient modern

Soft shadow

Rounded card

Warna

Gunakan kombinasi:

Biru

Putih

Navy

Abu modern

Gunakan

Bootstrap 5

Bootstrap Icons

Google Fonts (Poppins)

Database Spreadsheet

Nama Sheet

Sheet: DATA_SISWA

Struktur Kolom

Gunakan auto increment ID.

Fitur CRUD

Create

Form input siswa:

NISN

Nama

Alamat

Asal SMP

Sekolah Tujuan

Upload Foto

Read

Tampilkan data:

Table Bootstrap

Search realtime

Pagination

Sorting

Update

Admin dapat edit data siswa.

Delete

Admin dapat hapus data dengan konfirmasi modal.

Upload Foto

Ketentuan

Foto disimpan di Google Drive

Folder Drive dibuat otomatis

Simpan URL file ke spreadsheet

Foto preview tersedia

Validasi

JPG/PNG

Maksimal 2MB

Dashboard Admin

Fitur Dashboard

Total pendaftar

Jumlah sekolah asal

Statistik harian

Tabel data siswa

Export PDF

Cetak bukti pendaftaran

UI Dashboard

Gunakan:

Card statistik

Sidebar modern

Navbar sticky

DataTable Bootstrap

Generate PDF Bukti Pendaftaran

PDF berisi:

Logo sekolah

Judul bukti pendaftaran

Nomor pendaftaran

Identitas siswa

NISN

Nama lengkap

Alamat

Asal SMP

Sekolah tujuan

Foto siswa

Tanggal pendaftaran

QR Code verifikasi

Format

Layout profesional

A4 Portrait

Bisa di-download

Bisa dicetak

Penyimpanan

PDF otomatis tersimpan di Google Drive

URL PDF disimpan ke spreadsheet

Routing MPA

Gunakan parameter:

?page=landing

?page=register

?page=dashboard

?page=detail&id=1

Contoh:

function doGet(e){

const page = e.parameter.page || 'landing';

if(page == 'register'){

return HtmlService.createTemplateFromFile('Register')

.evaluate();

}

if(page == 'dashboard'){

return HtmlService.createTemplateFromFile('Dashboard')

.evaluate();

}

return HtmlService.createTemplateFromFile('Landing')

.evaluate();

}

Validasi Form

Validasi Client Side

Semua field wajib diisi

Email valid

NISN numerik

Upload foto wajib

Validasi Server Side

Cek duplicate NISN

Sanitasi data

Validasi ukuran file

UX Features

Tambahkan:

Loading spinner

Toast notification

SweetAlert2

Modal Bootstrap

Empty state

Responsive mobile

Smooth animation

Security

Gunakan:

Escape HTML

Sanitasi input

Validasi server-side

Hide spreadsheet ID di Config.gs

Coding Style

Gunakan:

Clean code

Modular architecture

Reusable component

Async google.script.run

Komentar jelas

Output yang Harus Dihasilkan

Generate source code lengkap:

Backend Google Apps Script

Frontend Bootstrap

CRUD functionality

Upload image to Drive

Generate PDF

Responsive UI

Routing MPA

Dashboard admin

Landing page modern

Berikan:

Struktur folder

Kode lengkap setiap file

Penjelasan fungsi

Cara deploy sebagai Web App

Cara setup Spreadsheet dan Drive

Cara publish aplikasi

Studi kasus penggunaan aplikasi

Pastikan seluruh kode production-ready dan dapat langsung dijalankan di Google Apps Script.

Prompt Pengembangan Web App Google Apps Script

Sistem Pendaftaran Siswa SMA (Standalone Script + Arsitektur MPA)

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.

Tujuan Aplikasi

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

Struktur File

Gunakan struktur file berikut:

Code.gs
Config.gs
Auth.gs
Student.gs
Pdf.gs
Drive.gs
Index.html
Landing.html
Register.html
Dashboard.html
Detail.html
Navbar.html
Sidebar.html
Footer.html
CSS.html
JS.html

Gunakan fungsi include() untuk template reusable.

Contoh:

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Landing Page

Buat landing page modern gaya startup education technology.

Hero Section

Hero section harus memiliki:

Headline besar:
“Sistem Pendaftaran Siswa SMA”
Subheadline:
“Platform digital untuk pendaftaran siswa baru secara cepat, aman, dan modern”
Tombol CTA:
- Daftar Sekarang
- Login Admin

Visual Style

Gunakan desain:

Modern
Clean
Edu-tech startup
Responsive
Minimalis
Gradient modern
Soft shadow
Rounded card

Warna

Gunakan kombinasi:

Biru
Putih
Navy
Abu modern

Gunakan

Bootstrap 5
Bootstrap Icons
Google Fonts (Poppins)

Database Spreadsheet

Nama Sheet

Sheet: DATA_SISWA

Struktur Kolom

Gunakan auto increment ID.

Fitur CRUD

Create

Form input siswa:

NISN
Nama
Alamat
Email
Asal SMP
Sekolah Tujuan
Upload Foto

Read

Tampilkan data:

Table Bootstrap
Search realtime
Pagination
Sorting

Update

Admin dapat edit data siswa.

Delete

Admin dapat hapus data dengan konfirmasi modal.

Upload Foto

Ketentuan

Foto disimpan di Google Drive
Folder Drive dibuat otomatis
Simpan URL file ke spreadsheet
Foto preview tersedia

Validasi

JPG/PNG
Maksimal 2MB

Dashboard Admin

Fitur Dashboard

Total pendaftar
Jumlah sekolah asal
Statistik harian
Tabel data siswa
Export PDF
Cetak bukti pendaftaran

UI Dashboard

Gunakan:

Card statistik
Sidebar modern
Navbar sticky
DataTable Bootstrap

Generate PDF Bukti Pendaftaran

PDF berisi:

Logo sekolah
Judul bukti pendaftaran
Nomor pendaftaran
Identitas siswa
NISN
Nama lengkap
Alamat
Email
Asal SMP
Sekolah tujuan
Foto siswa
Tanggal pendaftaran
QR Code verifikasi

Format

Layout profesional
A4 Portrait
Bisa di-download
Bisa dicetak

Penyimpanan

PDF otomatis tersimpan di Google Drive
URL PDF disimpan ke spreadsheet

Routing MPA

Gunakan parameter:

?page=landing
?page=register
?page=dashboard
?page=detail&id=1

Contoh:

function doGet(e){
  const page = e.parameter.page || 'landing';

  if(page == 'register'){
    return HtmlService.createTemplateFromFile('Register')
      .evaluate();
  }

  if(page == 'dashboard'){
    return HtmlService.createTemplateFromFile('Dashboard')
      .evaluate();
  }

  return HtmlService.createTemplateFromFile('Landing')
    .evaluate();
}

Validasi Form

Validasi Client Side

Semua field wajib diisi
Email valid
NISN numerik
Upload foto wajib

Validasi Server Side

Cek duplicate NISN
Sanitasi data
Validasi ukuran file

UX Features

Tambahkan:

Loading spinner
Toast notification
SweetAlert2
Modal Bootstrap
Empty state
Responsive mobile
Smooth animation

Security

Gunakan:

Escape HTML
Sanitasi input
Validasi server-side
Hide spreadsheet ID di Config.gs

Coding Style

Gunakan:

Clean code
Modular architecture
Reusable component
Async google.script.run
Komentar jelas

Output yang Harus Dihasilkan

Generate source code lengkap:

Backend Google Apps Script
Frontend Bootstrap
CRUD functionality
Upload image to Drive
Generate PDF
Responsive UI
Routing MPA
Dashboard admin
Landing page modern

Berikan:

Struktur folder
Kode lengkap setiap file
Penjelasan fungsi
Cara deploy sebagai Web App
Cara setup Spreadsheet dan Drive
Cara publish aplikasi
Studi kasus penggunaan aplikasi

Pastikan seluruh kode production-ready dan dapat langsung dijalankan di Google Apps Script.

MPA Inventaris Cetak

https://script.google.com/macros/s/AKfycbxiaHFq-T6Xogy6L_szXqFutH0rkgZB2EQ5OFkwWMC8qPX7_zgqV11jPZmj_Q7B2-SqWA/exec

https://script.google.com/home/projects/15yMzEIdtbF52gBSvg_4ZmA5EOXpFepxwPgDdRj25RewLRxe9m330NucG/edit

https://drive.google.com/drive/folders/1rsuh2_PzD7Va1g9v_5wYYiVk-RBT9G5p

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

https://docs.google.com/document/d/1Xe7z06o4mgU3hXQ7Wz6nwy2iZ0vbItAY5rFzkGRyc3U/edit?tab=t.0

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

Buatkan contoh studi kasus lengkap dengan fitur landing page hero, CRUD dan cetak PDF

Berikut adalah kode Studi Kasus Lengkap Sistem Manajemen Inventaris (InvenTrack) dengan arsitektur Multi-Page Application (MPA) yang memisahkan Frontend dan Backend menggunakan model standalone script.

Sistem ini sudah mencakup semua fitur yang Anda minta:

Landing Page Modern dengan Hero Section dan tombol Call-to-Action (CTA).
Dashboard Manajemen Stok dengan operasional CRUD Lengkap (Create, Read, Update, Delete) menggunakan modal dialog.
Fitur Cetak PDF Otomatis yang memanfaatkan template Google Docs di Drive, mengisi placeholder {{KODE}}, {{NAMA}}, dll, mengonversinya ke PDF secara real-time, dan langsung mengunduhnya.

🏛️ Struktur File Proyek di Editor Apps Script

Buat 5 file berikut di dalam editor script.google.com:

Code.gs (Semua Logika Backend, Router MPA, & Database CRUD + PDF)
index.html (Layout Induk Dashboard Internal & Navbar)
hero.html (Landing Page Utama / Publik)
dashboard.html (Komponen Antarmuka Form, Tabel Data, & Modal Edit)
javascript.html (Logika Frontend / API Controller Asinkronus)

🛠️ 1. Backend: `Code.gs`

Ganti seluruh kode di file Code.gs Anda. Jangan lupa untuk mengisi SPREADSHEET_ID, GOOGLE_DOC_TEMPLATE_ID, dan DRIVE_FOLDER_ID.

// =========================================================================

// CONFIG DATABASE & FILE SYSTEM (Ganti dengan ID milik Anda)

// =========================================================================

const SPREADSHEET_ID = '1yBsCdnY0ZvJiuWrdF_vAGh8EF3uON7TDr1DhO0ZYtv0';

const SHEET_NAME = 'Inventaris';

const GOOGLE_DOC_TEMPLATE_ID = '1Xe7z06o4mgU3hXQ7Wz6nwy2iZ0vbItAY5rFzkGRyc3U';

const DRIVE_FOLDER_ID = '1LgO3j5O7XIKnc00agk7U_abmlwqsx6Gf';

MPA Sistem Inventaris

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

https://script.google.com/home/projects/1hHIVmLnEVEXt-jTJIe_X8earKF4Q-qqwcpeYCvkKZH0s9LRQ3NjJYSpv/edit

https://drive.google.com/drive/folders/11MnIgLAy-ft3wNkavF6SaqCVhAA5T46v

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

Bertindaklah sebagai apps script expert. Buatkan study kasus sistem inventaris dengan frontend dan backend terpisah. Buatkan landing page dengan hero. Arsitektur MPA. Gunakan model standalone script. File kode terpisah .

PROJECT SUMMARY PROMPT: SISTEM INVENTARIS MP-GAS

1. Ringkasan Arsitektur & Teknologi

Nama Sistem: InvenTrack (Sistem Manajemen Inventaris Pintar)
Arsitektur: Multi-Page Application (MPA) dengan pemisahan Frontend dan Backend yang modular.
Model Script: Standalone Script (Google Apps Script).
Database: Google Spreadsheet (Tab: Inventaris).
Frontend Tech Stack: HTML5, Tailwind CSS (via CDN), JavaScript Vanilla (Asynchronous DOM Manipulation).
Communication Bridge: google.script.run (Asinkronus / AJAX bawaan Apps Script).

2. Struktur File Proyek (Flat Directory)

Sistem ini menggunakan 5 file utama yang diletakkan sejajar di dalam editor Google Apps Script:

Code.gs (Backend): * Mengatur routing aplikasi berbasis parameter URL (?page=...).
- Menyediakan fungsi inklusi file komponen (include()).
- Berisi logikal API CRUD database (getInventoryData() dan addStockItem()) dengan mekanisme case-insensitive column mapping dan pembersihan data (anti-ghost rows filtering).
index.html (Layout Induk Dashboard):
- Berisi struktur core HTML, CDN Tailwind CSS, dan komponen global (Navbar & Status Admin).
- Bertindak sebagai wrapper yang menyuntikkan file visual internal secara dinamis via scriptlet evaluasi Apps Script.
hero.html (Landing Page):
- Halaman publik terpisah dengan desain modern minimalis yang fokus pada pemasaran produk dan Call-to-Action (CTA) link dinamis menuju halaman dashboard internal.
dashboard.html (View/Partial HTML Fitur):
- Kerangka antarmuka fitur utama yang membagi halaman menjadi 2 kolom: Form Tambah Item Baru (Kiri) dan Tabel Real-Time Daftar Stok Barang (Kanan).
javascript.html (Client-Side Controller):
- Berisi logika frontend untuk menangani event submit form, memicu pemuatan data otomatis saat DOM siap, merender manipulasi tabel secara dinamis, dan mengubah state tombol simpan (loading animation).

3. Struktur Database (Google Spreadsheet)

Nama Lembar Kerja (Tab): Inventaris
Struktur Kolom (Baris 1): Timestamp | Kode Barang | Nama Barang | Stok | Kategori
Fitur Fleksibilitas Database: Kode backend didesain case-insensitive dan tahan terhadap pergeseran letak kolom menggunakan pemetaan indeks berbasis .toLowerCase().trim().

4. Alur Kerja Sistem (Data Flow)

Routing: Pengguna mengakses URL Web App standar ➡️ doGet() merender hero.html. Jika mengakses URL dengan ?page=dashboard ➡️ doGet() merender index.html yang membungkus dashboard.html & javascript.html.
Membaca Data (Read): Halaman termuat ➡️ JavaScript frontend memicu getInventoryData() di server ➡️ Server membaca baris Spreadsheet, mengubahnya menjadi Array of Objects yang bersih, lalu mengirimkannya kembali ➡️ Frontend menerimanya dan merender data ke dalam tabel HTML.
Menulis Data (Write): Pengguna menekan tombol simpan ➡️ Tombol dinonaktifkan (state: Menyimpan...) ➡️ Frontend mengirimkan input data ke server via addStockItem() ➡️ Server melakukan .appendRow() ke Google Sheets dan mengembalikan respon sukses ➡️ Frontend mengosongkan form dan otomatis memicu fungsi Read Data ulang tanpa melakukan refresh browser.

💡 Cara Menggunakan Summary Ini untuk Pengembangan Selanjutnya:

Jika Anda ingin menambahkan fitur baru, Anda cukup menyalin teks di atas dan menambahkan perintah tambahan di bawahnya.

Contoh perintah tambahan: "Berdasarkan summary proyek di atas, buatkan modifikasi kode pada dashboard.html dan javascript.html untuk menambahkan tombol Hapus Barang di setiap baris tabel, serta buatkan fungsi backend deleteStockItem(kode) di Code.gs untuk menghapus baris barang yang sesuai di spreadsheet."

Sabtu, 30 Mei 2026

Rabu, 27 Mei 2026

Panduan Penyebaran Portal PPDB SMA Atas Talian

Langkah 1: Persediaan Pangkalan Data (Google Spreadsheet)

Langkah 2: Persediaan Fail Folder Google Drive

Langkah 3: Membuat Projek Google Apps Script (GAS)

Langkah 4: Proses Pelancaran Aplikasi Web (Deployment)

🎉 Selesai!

Prompt Pengembangan Web App Google Apps Script

Sistem Pendaftaran Siswa SMA (Standalone Script + Arsitektur MPA)

Tujuan Aplikasi

Spesifikasi Teknologi

Platform

Arsitektur

Struktur File

Landing Page

Hero Section

Visual Style

Warna

Gunakan

Database Spreadsheet

Nama Sheet

Struktur Kolom

Fitur CRUD

Create

Read

Update

Delete

Upload Foto

Ketentuan

Validasi

Dashboard Admin

Fitur Dashboard

UI Dashboard

Generate PDF Bukti Pendaftaran

PDF berisi:

Format

Penyimpanan

Routing MPA

Validasi Form

Validasi Client Side

Validasi Server Side

UX Features

Security

Coding Style

Output yang Harus Dihasilkan

🏛️ Struktur File Proyek di Editor Apps Script

🛠️ 1. Backend: Code.gs

PROJECT SUMMARY PROMPT: SISTEM INVENTARIS MP-GAS

1. Ringkasan Arsitektur & Teknologi

2. Struktur File Proyek (Flat Directory)

3. Struktur Database (Google Spreadsheet)

4. Alur Kerja Sistem (Data Flow)

💡 Cara Menggunakan Summary Ini untuk Pengembangan Selanjutnya:

🛠️ 1. Backend: `Code.gs`