Apps Script - Penjelasan SISKO

 

https://www.youtube.com/watch?v=TRj3MF5G0LY

https://codestudio80.blogspot.com/2025/12/apps-script-aplikasi-sekolah.html

// ================== KONFIGURASI ================== // Ganti dengan ID Spreadsheet Anda var SPREADSHEET_ID = '1wtvDOcy3kWHb6KRM3J264vSedxczu4fccH3pFch9hUQ'; // Ganti dengan ID Spreadsheet Anda var FOLDER_ID = '1jOH8DwRuKzhhMwAYRWokqf_6-AsHIqV7'; // Ganti dengan ID Folder Google Drive untuk menyimpan foto // ================== MAIN FUNCTION ================== function doGet(e) { return HtmlService.createHtmlOutputFromFile('index') .setTitle('Sistem Informasi Sekolah (SISKO DB)') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .addMetaTag("viewport", "width=device-width, initial-scale=1.0") .setFaviconUrl('https://cdn-icons-png.flaticon.com/512/201/201614.png'); } function initializeSheets() { try { var ss = SpreadsheetApp.openById(SPREADSHEET_ID); Logger.log('🚀 Memulai inisialisasi sistem...'); // 1. SETUP SHEET USERS (UPDATE STRUKTUR) var usersSheet = ss.getSheetByName('Users'); if (usersSheet) ss.deleteSheet(usersSheet); usersSheet = ss.insertSheet('Users'); // Header baru: tambahkan 'nama_lengkap' di kolom E usersSheet.appendRow(['username', 'password', 'role', 'nisn', 'nama_lengkap']); usersSheet.getRange(1, 1, 1, 5).setBackground('#4285F4').setFontColor('#FFFFFF').setFontWeight('bold'); // Data User Default dengan Nama Lengkap var usersData = [ ['admin', 'admin123', 'Admin', '', 'Administrator Sistem'], ['guru1', 'guru123', 'Guru', '101', 'Pak Joko Fisika'], ['guru2', 'guru456', 'Guru', '102', 'Bu Sri Matematika'], ['budi', 'budi123', 'Siswa', '2024001', 'Budi Santoso'], ['siti', 'siti123', 'Siswa', '2024002', 'Siti Nurhaliza'] ]; usersSheet.getRange(2, 1, usersData.length, 5).setValues(usersData); // 2. SETUP SHEET DATA SISWA (Tetap Sama) var dataSheet = ss.getSheetByName('DataSiswa'); if (dataSheet) ss.deleteSheet(dataSheet); dataSheet = ss.insertSheet('DataSiswa'); dataSheet.appendRow(['timestamp', 'nama', 'nisn', 'kelas', 'jurusan', 'alamat', 'fotoUrl']); dataSheet.getRange(1, 1, 1, 7).setBackground('#34A853').setFontColor('#FFFFFF').setFontWeight('bold'); var now = new Date(); var siswaData = [ [now, 'Budi Santoso', '2024001', 'XII', 'IPA 1', 'Jl. Merdeka No. 10', ''], [now, 'Siti Nurhaliza', '2024002', 'XII', 'IPA 1', 'Jl. Sudirman No. 25', ''], [now, 'Ahmad Fauzi', '2024003', 'XI', 'IPS 1', 'Jl. Gatot Subroto', ''] ]; dataSheet.getRange(2, 1, siswaData.length, 7).setValues(siswaData); dataSheet.getRange(2, 1, siswaData.length, 1).setNumberFormat('dd/mm/yyyy hh:mm:ss'); // 3. SETUP SHEET DATA GURU (Tetap Sama) var guruSheet = ss.getSheetByName('DataGuru'); if (guruSheet) ss.deleteSheet(guruSheet); guruSheet = ss.insertSheet('DataGuru'); guruSheet.appendRow(['NIP', 'Nama Guru', 'Mata Pelajaran', 'Kelas Ajar', 'Jurusan Ajar']); guruSheet.getRange(1, 1, 1, 5).setBackground('#F4B400').setFontColor('#FFFFFF').setFontWeight('bold'); var guruData = [ ['101', 'Pak Joko Fisika', 'Fisika', 'XII', 'IPA 1'], ['102', 'Bu Sri Math', 'Matematika', 'XII', 'IPA 1'], ['103', 'Pak Budi Sejarah', 'Sejarah', 'XI', 'IPS 1'], ['104', 'Bu Tini Inggris', 'Bahasa Inggris', 'XII', 'Umum'] ]; guruSheet.getRange(2, 1, guruData.length, 5).setValues(guruData); return { success: true, message: 'System Initialized Successfully with User Names!' }; } catch (error) { Logger.log('Error: ' + error.toString()); return { success: false, message: error.toString() }; } }

Penjelasan

kode Google Apps Script untuk aplikasi web sederhana (via doGet) + fungsi inisialisasi struktur Google Sheet (Users, DataSiswa, DataGuru) beserta data defaultnya.

---

1) Bagian Konfigurasi

var SPREADSHEET_ID = '...';
var FOLDER_ID = '...';

• SPREADSHEET_ID: ID file Google Spreadsheet yang jadi database utama.

• FOLDER_ID: ID folder Google Drive untuk simpan foto (di potongan kode ini belum dipakai, tapi biasanya dipakai saat upload foto dan menghasilkan fotoUrl).

---

2) Fungsi doGet(e) (Entry Point Web App)

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('Sistem Informasi Sekolah (SISKO DB)')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag("viewport", "width=device-width, initial-scale=1.0")
    .setFaviconUrl('https://cdn-icons-png.flaticon.com/512/201/201614.png');
}

Fungsi ini dijalankan saat URL Web App dibuka.

Yang dilakukan:

• createHtmlOutputFromFile('index'): memuat file index.html dari project GAS.

• setTitle(...): judul tab browser.

• setXFrameOptionsMode(ALLOWALL): mengizinkan halaman ini di-embed (iframe) dari domain lain (kalau tidak, biasanya diblokir).

• addMetaTag("viewport", ...): supaya tampilan responsif di mobile.

• setFaviconUrl(...): ikon kecil (favicon) di tab.

Parameter e berisi query string / parameter URL (misal ?page=data), tapi di kode ini belum digunakan.

---

3) Fungsi initializeSheets() (Reset & Setup Database Sheet)

Fungsi ini:

1. Membuka spreadsheet berdasarkan SPREADSHEET_ID

2. Menghapus sheet lama jika ada

3. Membuat ulang 3 sheet: Users, DataSiswa, DataGuru

4. Menulis header + memberi style warna header

5. Mengisi data contoh (default)

3.1 Membuka Spreadsheet + Logging

var ss = SpreadsheetApp.openById(SPREADSHEET_ID);
Logger.log('🚀 Memulai inisialisasi sistem...');

• openById: akses spreadsheet target.

• Logger.log: catatan log (lihat di Executions/Logs).

---

4) Setup Sheet Users

var usersSheet = ss.getSheetByName('Users');
if (usersSheet) ss.deleteSheet(usersSheet);
usersSheet = ss.insertSheet('Users');

• Kalau sheet “Users” sudah ada → dihapus total.

• Lalu dibuat ulang.

Header Users

usersSheet.appendRow(['username', 'password', 'role', 'nisn', 'nama_lengkap']);
usersSheet.getRange(1, 1, 1, 5)
  .setBackground('#4285F4')
  .setFontColor('#FFFFFF')
  .setFontWeight('bold');

• Header berisi 5 kolom:

  1. username

  2. password

  3. role (Admin/Guru/Siswa)

  4. nisn (untuk siswa/guru tertentu)

  5. nama_lengkap (ini penambahan struktur baru)

Data Default Users

var usersData = [
  ['admin', 'admin123', 'Admin', '', 'Administrator Sistem'],
  ['guru1', 'guru123', 'Guru', '101', 'Pak Joko Fisika'],
  ['guru2', 'guru456', 'Guru', '102', 'Bu Sri Matematika'],
  ['budi', 'budi123', 'Siswa', '2024001', 'Budi Santoso'],
  ['siti', 'siti123', 'Siswa', '2024002', 'Siti Nurhaliza']
];
usersSheet.getRange(2, 1, usersData.length, 5).setValues(usersData);

• Mengisi data mulai baris 2 kolom 1, sebanyak usersData.length baris dan 5 kolom.

Catatan penting:

• Password masih plain text (belum di-hash). Ini oke untuk demo, tapi untuk produksi sebaiknya hashing.

---

5) Setup Sheet DataSiswa

var dataSheet = ss.getSheetByName('DataSiswa');
if (dataSheet) ss.deleteSheet(dataSheet);
dataSheet = ss.insertSheet('DataSiswa');

Header DataSiswa

dataSheet.appendRow(['timestamp', 'nama', 'nisn', 'kelas', 'jurusan', 'alamat', 'fotoUrl']);
dataSheet.getRange(1, 1, 1, 7)
  .setBackground('#34A853')
  .setFontColor('#FFFFFF')
  .setFontWeight('bold');

Kolom:

1. timestamp (waktu input)

2. nama

3. nisn

4. kelas

5. jurusan

6. alamat

7. fotoUrl (link foto di Drive/hosting; saat ini diisi kosong)

Data Default Siswa + Format Tanggal

var now = new Date();
var siswaData = [
  [now, 'Budi Santoso', '2024001', 'XII', 'IPA 1', 'Jl. Merdeka No. 10', ''],
  [now, 'Siti Nurhaliza', '2024002', 'XII', 'IPA 1', 'Jl. Sudirman No. 25', ''],
  [now, 'Ahmad Fauzi', '2024003', 'XI', 'IPS 1', 'Jl. Gatot Subroto', '']
];
dataSheet.getRange(2, 1, siswaData.length, 7).setValues(siswaData);
dataSheet.getRange(2, 1, siswaData.length, 1).setNumberFormat('dd/mm/yyyy hh:mm:ss');

• Mengisi 3 data siswa.

• setNumberFormat(...) hanya untuk kolom timestamp (kolom 1), agar tampil rapi.

---

6) Setup Sheet DataGuru

var guruSheet = ss.getSheetByName('DataGuru');
if (guruSheet) ss.deleteSheet(guruSheet);
guruSheet = ss.insertSheet('DataGuru');

Header

guruSheet.appendRow(['NIP', 'Nama Guru', 'Mata Pelajaran', 'Kelas Ajar', 'Jurusan Ajar']);
guruSheet.getRange(1, 1, 1, 5)
  .setBackground('#F4B400')
  .setFontColor('#FFFFFF')
  .setFontWeight('bold');

Kolom:

1. NIP (di contoh ini seperti kode guru: 101,102,…)

2. Nama Guru

3. Mata Pelajaran

4. Kelas Ajar

5. Jurusan Ajar

Data Default Guru

var guruData = [
  ['101', 'Pak Joko Fisika', 'Fisika', 'XII', 'IPA 1'],
  ['102', 'Bu Sri Math', 'Matematika', 'XII', 'IPA 1'],
  ['103', 'Pak Budi Sejarah', 'Sejarah', 'XI', 'IPS 1'],
  ['104', 'Bu Tini Inggris', 'Bahasa Inggris', 'XII', 'Umum']
];
guruSheet.getRange(2, 1, guruData.length, 5).setValues(guruData);

---

7) Return Sukses / Error Handling

return { success: true, message: 'System Initialized Successfully with User Names!' };

Kalau berhasil, mengembalikan objek JSON-like (berguna jika dipanggil dari frontend via google.script.run).

Kalau error:

catch (error) {
  Logger.log('Error: ' + error.toString());
  return { success: false, message: error.toString() };
}