Tutorial: Membangun Sistem Pengumuman Kelulusan

Mengumumkan hasil kelulusan secara online membutuhkan sistem yang kuat, aman, dan yang terpenting, berbasis waktu yang akurat. Data tidak boleh bocor atau diakses sebelum waktunya. Kita akan melihat bagaimana membangun sistem ini menggunakan dua arsitektur backend yang umum: Jembatan Skrip Otomatis (Google Apps Script) dan API Server Sendiri (PHP/MySQL).

---

Arsitektur 1: Jembatan Skrip Otomatis (Google Apps Script & Spreadsheet)

Model ini ideal bagi Anda yang tidak memiliki server hosting. Jembatan Skrip Otomatis (Google Apps Script) berfungsi sebagai API gratis dan mudah dikelola dengan database spreadsheet online. Logika Pembatasan Waktu Mutlak berada di fungsi doGet(e).

Kode Inti Apps Script (doGet(e)):

Kode ini ditempatkan di editor Apps Script Anda. Ia memeriksa waktu sebelum mencari data di spreadsheet.

function doGet(e) {
  const data = e.parameter;
  const nisn = data.nisn;
  
  // --- KONFIGURASI WAKTU KELULUSAN (Harus di-setting di sini) ---
  const START_TIME = new Date("2025-06-02T16:00:00+07:00").getTime(); 
  const END_TIME = new Date("2025-06-04T16:00:00T+07:00").getTime();
  const now = new Date().getTime();
  
  let response = {status: 'error', message: 'Terjadi kesalahan sistem.'};
  
  // 1. PEMBATASAN WAKTU MUTLAK (SERVER-SIDE)
  if (now < START_TIME) {
    response.message = 'Pengumuman belum dibuka. Cek lagi pada tanggal yang ditentukan.';
    return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
  }
  if (now > END_TIME) {
    response.message = 'Periode cek kelulusan telah berakhir.';
    return ContentService.createTextOutput(JSON.stringify(response)).setMimeType(ContentService.MimeType.JSON);
  }
  
  // 2. PENCARIAN DATA (Dijalankan hanya jika waktu valid)
  if (nisn) {
    const ss = SpreadsheetApp.getActiveSpreadsheet();
    const sheet = ss.getSheetByName("DataKelulusan"); // Ganti nama sheet Anda
    const dataRange = sheet.getDataRange().getValues();
    
    for (let i = 1; i < dataRange.length; i++) {
      const row = dataRange[i];
      // Asumsi kolom NISN adalah kolom pertama (indeks 0)
      if (row[0] == nisn) { 
        response = {
          status: 'success',
          data: {
            nisn: row[0],
            nama: row[1],
            statusLulus: row[2] // Asumsi status ada di kolom ketiga
          }
        };
        break;
      }
    }
    
    if (response.status !== 'success') {
       response.message = 'NISN yang Anda masukkan tidak terdaftar.';
    }
  }

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

Alur Kerja:

1. Deploy Jembatan Skrip untuk mendapatkan URL API unik Anda.
2. Laman Web mengirim NISN ke URL tersebut.
3. Jembatan Skrip menjalankan pemeriksaan waktu. Jika gagal, akses ditolak. Jika berhasil, data dicari di spreadsheet dan dikembalikan sebagai JSON.

---

Arsitektur 2: API Server Sendiri (PHP & MySQL)

Model ini memberikan kontrol penuh atas server hosting Anda. Skrip PHP berfungsi sebagai API yang berbicara langsung dengan database MySQL, memastikan kecepatan dan skalabilitas. Logika Pembatasan Waktu Mutlak berada di file PHP Anda (misalnya, check_lulus.php).

Kode Inti PHP API (check_lulus.php):

Kode ini ditempatkan di server hosting Anda. Ganti variabel koneksi database dan konstanta waktu.

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); // IZIN AKSES DARI SEMUA DOMAIN

// --- KONFIGURASI DATABASE ---
$servername = "localhost";
$username = "user_db"; 
$password = "pass_db";
$dbname = "kelulusan_db";

// --- KONFIGURASI WAKTU KELULUSAN (Format UNIX Timestamp) ---
// Ganti tanggal di bawah dengan tanggal pengumuman Anda
$startTime = strtotime("2025-06-02 16:00:00"); 
$endTime = strtotime("2025-06-04 16:00:00");
$now = time();

$response = ['status' => 'error', 'message' => 'NISN tidak ditemukan.'];

// 1. PEMBATASAN WAKTU MUTLAK (SERVER-SIDE)
if ($now < $startTime) {
    $response['message'] = 'Pengumuman belum dibuka. Cek lagi pada tanggal yang ditentukan.';
    echo json_encode($response);
    exit;
}
if ($now > $endTime) {
    $response['message'] = 'Periode cek kelulusan telah berakhir.';
    echo json_encode($response);
    exit;
}

// 2. PROSES PENCARIAN DATABASE (Dijalankan hanya jika waktu valid)
if (isset($_GET['nisn'])) {
    $nisn = $_GET['nisn'];
    
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        $response['message'] = "Koneksi database gagal.";
        echo json_encode($response);
        exit;
    }
    
    $stmt = $conn->prepare("SELECT nama, status_lulus FROM data_kelulusan WHERE nisn = ?");
    $stmt->bind_param("s", $nisn);
    $stmt->execute();
    $result = $stmt->get_result();

    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $response = [
            'status' => 'success',
            'data' => [
                'nisn' => $nisn,
                'nama' => $row['nama'],
                'statusLulus' => $row['status_lulus']
            ]
        ];
    } else {
        $response['message'] = 'NISN yang Anda masukkan tidak terdaftar.';
    }

    $stmt->close();
    $conn->close();
} else {
    $response['message'] = 'Harap masukkan NISN Anda.';
}

echo json_encode($response);
?>

Alur Kerja:

1. Buat Database MySQL dengan tabel yang berisi NISN dan Status Lulus.
2. Upload Skrip PHP ke server hosting Anda.
3. Laman Web mengirim NISN ke URL skrip PHP.
4. Skrip PHP menjalankan pemeriksaan waktu. Jika gagal, akses ditolak. Jika berhasil, ia melakukan Query SQL untuk mencari data dan mengembalikannya dalam format JSON.

---

Kode Frontend (JavaScript) untuk Kedua Metode

Terlepas dari apakah Anda menggunakan Apps Script atau PHP, kode JavaScript di laman web Anda akan terlihat sangat mirip, karena tugasnya hanya mengirim permintaan dan memproses balasan JSON.

<script>
// Ganti dengan URL API Anda (Apps Script Web App URL atau PHP file URL)
const API_URL = 'PASTIKAN_URL_API_ANDA_DI_SINI'; 

document.getElementById('checkForm').addEventListener('submit', function(e) {
    e.preventDefault(); 
    const nisnInput = document.getElementById('nisn').value.trim();
    
    // Kirim permintaan GET ke API
    fetch(`${API_URL}?nisn=${encodeURIComponent(nisnInput)}`)
        .then(response => response.json())
        .then(res => {
            let html = '';
            
            // Logika pemrosesan hasil JSON
            if (res.status === 'success') {
                const status = res.data.statusLulus.toUpperCase();
                html = `<p>Status Kelulusan: <strong>${status}</strong></p>`;
                // Tambahkan lebih banyak logika tampilan (warna, pesan, dll.) di sini
            } else {
                html = `<p style="color: red;">${res.message}</p>`;
            }
            
            document.getElementById('resultContainer').innerHTML = html;
        })
        .catch(error => {
            document.getElementById('resultContainer').innerHTML = '<p style="color: red;">Gagal terhubung ke server.</p>';
        });
});
</script>

Oleh Opan
Dipostkan January 04, 2025
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.