Prompt dan Source Code Aplikasi Panitia Ibadah Qurban

🕋

Prompt dan Source Code Aplikasi Sikurban

Sistem Manajemen Qurban Modern & Anti Ribet

Apa Itu Ibadah Qurban?

Ibadah Qurban adalah salah satu ibadah sangat mulia dalam ajaran agama Islam yang dilaksanakan pada bulan Dzulhijjah (tepatnya pada Hari Raya Idul Adha dan hari-hari Tasyrik). Ibadah ini dilakukan dengan menyembelih hewan ternak (seperti sapi, kambing, domba, atau unta) dengan niat mendekatkan diri (taqarrub) kepada Allah SWT.

Selain bernilai ibadah yang sangat tinggi, Qurban juga memiliki dimensi sosial yang luar biasa. Daging hewan qurban didistribusikan kepada kaum fakir miskin, kerabat, tetangga, serta warga sekitar. Pengelolaan dan pendistribusian yang adil menuntut panitia untuk bekerja secara profesional dan terorganisir.

Teknologi Di Balik "Sikurban": Google Apps Script & Blogger

Aplikasi Sikurban diciptakan agar panitia dapat mengelola dana iuran peserta, mencetak kwitansi/kartu ber-stempel dan tanda tangan digital, hingga menerbitkan kupon daging anti-ganda (dilengkapi scanner barcode).

Apa Itu Google Apps Script (GAS)?

Google Apps Script adalah platform berbasis JavaScript dari Google yang memungkinkan kita membuat aplikasi "Back-End" secara gratis. Dalam aplikasi ini, GAS berfungsi sebagai otak yang menyimpan semua data peserta dan keuangan langsung ke dalam Google Sheets (Spreadsheet).
Manfaat untuk Panitia: Data aman, tidak akan hilang, bisa diakses dari mana saja, dan tidak memerlukan biaya sewa server/hosting (100% Gratis).

Apa Itu Blogger (XML Template)?

Blogger adalah platform blogging gratis dari Google. Kita menyulap Blogger menjadi "Front-End" (Tampilan Layar) dari aplikasi Sikurban dengan memasukkan kode HTML/XML khusus.
Manfaat untuk Panitia: Sangat responsif (mudah dibuka di HP panitia), tampilannya seperti aplikasi premium sungguhan, mudah diedit, dan loadingnya sangat ringan tanpa batas limit traffic.

Buat Mandiri Menggunakan AI (Prompt Detail)

Bagi Anda yang ingin meminta AI untuk membangun aplikasi ini dari awal secara mandiri, Anda dapat menggunakan perintah (prompt) komprehensif di bawah ini.

Bertindaklah sebagai Expert Full-Stack Developer. Buatkan saya aplikasi manajemen qurban bernama "Sikurban V3.2 Platinum".

Aplikasi terdiri dari 2 bagian:
1. FRONTEND: Menggunakan XML Blogger murni yang menyertakan Tailwind CSS, Html5Qrcode (untuk scan), dan jsPDF + AutoTable (untuk cetak dokumen). Harus satu file utuh yang responsif dan mobile friendly. Menu navigasi dapat digeser (horizontal scroll).
2. BACKEND: Menggunakan Google Apps Script yang terhubung ke Google Sheets dengan 4 sheet otomatis: 'Peserta', 'Kas', 'Settings', dan 'Scanned'. Wajib menggunakan LockService agar aman dari tabrakan data (Concurrency).

Fitur Frontend yang wajib ada:
- Tab Peserta: Input nama, jenis hewan (sapi/kambing), target iuran, status lunas, dan tombol bayar cicilan.
- Tab Keuangan: Dashboard total kas, pemasukan, pengeluaran, input pengeluaran, dan tabel riwayat transaksi.
- Tab Cetak Laporan: Cetak Laporan Keuangan (A4), Kartu Cicilan (PDF A5 dilengkapi QR code TTD, Barcode keaslian, Stempel Panitia dinamis via canvas), Laporan Distribusi Kupon, dan Cetak Kupon Daging massal (maksimal 100 per proses agar tidak memory crash).
- Tab Pengaturan: Input URL Google Apps Script, Nama Masjid, Alamat, Tahun H/M, Nama Ketua, Bendahara, Tempat TTD, dan tombol Reset Scanner.
- Tab Scan: Scanner barcode kamera (bisa swap kamera untuk desktop/HP) yang mencegah kupon ganda dan bisa validasi dokumen asli.
Tampilan harus modern dengan warna utama Emerald dan Slate. Gunakan SweetAlert2 untuk semua notifikasi dan konfirmasi. Jangan sertakan tag head bawaan blogger, gunakan b:include.

Cara Cepat (Copy-Paste Skrip Database)

Jika Anda tidak ingin repot meng-generate melalui AI, berikut adalah Source Code Backend Google Apps Script (GS) yang sudah siap pakai, lengkap dengan proteksi *anti-tabrakan data*.

// ====================================================================
// SIKURBAN V3.2 PLATINUM - GOOGLE APPS SCRIPT BACKEND (ANTI TABRAKAN)
// ====================================================================

function setup() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheets = ['Peserta', 'Kas', 'Settings', 'Scanned'];
  const headers = {
    'Peserta': ['id', 'nama', 'jenis', 'urutan', 'target'],
    'Kas': ['id', 'pid', 'tgl', 'ket', 'jenis', 'jumlah'],
    'Settings': ['key', 'value'],
    'Scanned': ['barcode']
  };

  sheets.forEach(name => {
    let sheet = ss.getSheetByName(name);
    if (!sheet) {
      sheet = ss.insertSheet(name);
      sheet.appendRow(headers[name]);
      sheet.getRange("A1:F1").setFontWeight("bold").setBackground("#d1fae5"); 
    }
  });
}

function doPost(e) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  
  // Menggunakan LockService Mencegah Tabrakan Data (Concurrency)
  const lock = LockService.getScriptLock();
  
  try {
    // Tunggu maksimal 10 detik jika ada admin lain yang sedang menyimpan data
    lock.waitLock(10000); 
    
    const postData = JSON.parse(e.postData.contents);
    const action = postData.action;

    if (action === 'read') {
      setup();
      const data = {
        peserta: readSheet(ss.getSheetByName('Peserta')),
        kas: readSheet(ss.getSheetByName('Kas')),
        scanned: readSheet(ss.getSheetByName('Scanned')).map(r => r.barcode),
        settings: readSettings(ss.getSheetByName('Settings'))
      };
      return response(data);
    }

    if (action === 'save') {
      setup(); 
      writeSheet(ss.getSheetByName('Peserta'), postData.data.peserta, ['id', 'nama', 'jenis', 'urutan', 'target']);
      writeSheet(ss.getSheetByName('Kas'), postData.data.kas, ['id', 'pid', 'tgl', 'ket', 'jenis', 'jumlah']);

      const scannedSheet = ss.getSheetByName('Scanned');
      scannedSheet.clearContents();
      scannedSheet.appendRow(['barcode']);
      if(postData.data.scanned && postData.data.scanned.length > 0) {
         const scanRows = postData.data.scanned.map(code => [code]);
         scannedSheet.getRange(2, 1, scanRows.length, 1).setValues(scanRows);
      }

      writeSettings(ss.getSheetByName('Settings'), postData.data.settings);
      return response({status: 'success'});
    }

  } catch (err) {
    return response({error: err.message});
  } finally {
    // Selalu lepas kunci setelah selesai, error maupun sukses
    lock.releaseLock();
  }
}

// --- FUNGSI HELPER --- //
function readSheet(sheet) {
  if(!sheet) return [];
  const data = sheet.getDataRange().getValues();
  if(data.length < 2) return [];
  const headers = data[0];
  const result = [];
  for(let i=1; i 0) {
    const rows = dataArray.map(obj => headers.map(h => obj[h] !== undefined ? obj[h] : ''));
    sheet.getRange(2, 1, rows.length, headers.length).setValues(rows);
  }
}

function readSettings(sheet) {
   if(!sheet) return {};
   const data = sheet.getDataRange().getValues();
   const settings = {};
   for(let i=1; i 0) {
     sheet.getRange(2, 1, rows.length, 2).setValues(rows);
   }
}

function response(data) {
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

Download Template Blogger (Frontend)

Silakan unduh file XML Tema Blogger yang berisi tampilan interaktif dan fungsionalitas utuh dari aplikasi Sikurban melalui tombol di bawah ini (File akan langsung terunduh secara otomatis).

DOWNLOAD TEMA XML SEKARANG

Langkah-Langkah Instalasi & Setup

Ikuti panduan di bawah ini secara berurutan agar aplikasi dapat berjalan sempurna!

Tahap 1: Setup Database di Google Sheets

• Buka Google Sheets Baru menggunakan akun Google Anda. Beri nama file tersebut (misal: "Database Sikurban").
• Pada menu atas, klik Ekstensi lalu pilih Apps Script.
• Hapus kode bawaan yang ada di editor, lalu Paste/Tempelkan kode skrip Backend yang sudah Anda salin pada langkah sebelumnya.
• Klik ikon Simpan (Disket) atau tekan Ctrl+S.
• Klik tombol Terapkan (Deploy) berwarna biru di sudut kanan atas > pilih Deployment Baru.
• Pilih Jenis (ikon roda gigi) > pilih Aplikasi Web.
• Pada bagian "Siapa yang memiliki akses", WAJIB pilih "Siapa saja" (Anyone). Lalu klik Terapkan.
• Berikan izin akses (Autorisasi). Jika ada peringatan keamanan, klik Lanjutan (Advanced) > Buka/Go to (Tidak aman) > Izinkan.
• Salin URL Aplikasi Web yang muncul. Simpan link ini, kita akan menggunakannya sebentar lagi!

Tahap 2: Install Tema di Blogger

• Buka dashboard Blogger Anda, buat Blog baru, dan beri nama "Aplikasi Qurban".
• Pergi ke menu Tema (Theme) di bilah kiri.
• Klik ikon panah kecil di sebelah tombol Sesuaikan, lalu pilih Edit HTML.
• Hapus seluruh kode yang ada di dalam kotak editor HTML tersebut.
• Buka file XML yang baru saja Anda download dari tombol pelangi di atas (menggunakan Notepad atau text editor), Copy semua isinya, dan Paste ke dalam Blogger.
• Klik ikon Simpan di pojok kanan atas.

Tahap 3: Menghubungkan Aplikasi & Database

• Kembali ke Dashboard Blogger, klik menu Lihat Blog di bagian bawah kiri.
• Aplikasi Sikurban akan terbuka! Pergi ke tab menu ⚙️ Pengaturan.
• Paste/Tempelkan URL Aplikasi Web (Script URL) yang Anda dapatkan dari Tahap 1 ke dalam kolom pertama yang tersedia.
• Isi data nama Masjid, Ketua Panitia, dan pengaturan lainnya.
• Klik SIMPAN PENGATURAN & SYNC. Selamat! Aplikasi Sikurban Platinum Anda siap digunakan secara penuh.