{"id":54,"date":"2025-12-14T00:48:55","date_gmt":"2025-12-14T00:48:55","guid":{"rendered":"https:\/\/edu.yahdifa.org\/diklat\/?page_id=54"},"modified":"2026-01-09T01:20:23","modified_gmt":"2026-01-09T01:20:23","slug":"verifikasi-sertifikat","status":"publish","type":"page","link":"https:\/\/edu.yahdifa.org\/diklat\/verifikasi-sertifikat\/","title":{"rendered":"Verifikasi Sertifikat"},"content":{"rendered":"\n<!DOCTYPE html>\n\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.2\/css\/all.min.css\">\n\n\n\n<style>\n\n    \/* CSS Khusus Verifikasi *\/\n\n    .verification-result { \n\n        text-align: center; \n\n        padding: 20px; \n\n        border-radius: 8px; \n\n        margin-top: 10px; \n\n        animation: fadeIn 0.5s ease; \n\n        font-family: 'Inter', sans-serif;\n\n    }\n\n    .verification-result.valid { \n\n        background-color: #f0fff4; \n\n        border: 1px solid #c6f6d5; \n\n        color: #22543d; \n\n    }\n\n    .verification-result.invalid { \n\n        background-color: #fff5f5; \n\n        border: 1px solid #fed7d7; \n\n        color: #742a2a; \n\n    }\n\n    .verification-result .status-icon { \n\n        font-size: 56px; \n\n        margin-bottom: 20px; \n\n    }\n\n    .verification-result.valid .status-icon { color: #38a169; }\n\n    .verification-result.invalid .status-icon { color: #e53e3e; }\n\n    \n\n    .verification-result h2 { \n\n        margin: 0 0 10px 0; \n\n        font-size: 22px; \n\n        font-weight: 700; \n\n    }\n\n    .verification-result .details { \n\n        margin-top: 25px; \n\n        text-align: left; \n\n        background-color: rgba(255, 255, 255, 0.6); \n\n        padding: 15px; \n\n        border-radius: 8px; \n\n        border-left: 5px solid #38a169; \n\n    }\n\n    .verification-result.invalid .details { display: none; }\n\n    \n\n    \/* Style untuk baris data *\/\n\n    .verification-result .details p { \n\n        margin: 8px 0; \n\n        font-size: 14px; \n\n        border-bottom: 1px solid rgba(0,0,0,0.05); \n\n        padding-bottom: 8px; \n\n        display: flex; \/* Agar label dan isi rapi *\/\n\n        justify-content: space-between;\n\n    }\n\n    .verification-result .details p strong {\n\n        font-weight: 600;\n\n        margin-right: 10px;\n\n        min-width: 110px; \/* Lebar label agar sejajar *\/\n\n    }\n\n    \n\n    @keyframes fadeIn { \n\n        from { opacity: 0; transform: translateY(10px); } \n\n        to { opacity: 1; transform: translateY(0); } \n\n    }\n\n<\/style>\n\n\n\n<div class=\"max-w-3xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 font-sans my-8\">\n\n    \n\n    <div class=\"bg-gradient-to-r from-teal-500 to-teal-700 p-8 text-white text-center\">\n\n        <h2 class=\"text-3xl font-bold mb-2\"><i class=\"fas fa-certificate mr-2\"><\/i> Verifikasi Keaslian<\/h2>\n\n        <p class=\"opacity-90\">Cek validitas data sertifikat Anda dalam database Cloud<\/p>\n\n    <\/div>\n\n\n\n    <div class=\"p-8\">\n\n        <div class=\"flex flex-col md:flex-row gap-4 mb-6\">\n\n            <input type=\"text\" id=\"verify-input\" class=\"flex-grow px-5 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500 text-lg text-gray-700\" placeholder=\"Masukkan 5 Digit ID (Contoh: 001A1)...\">\n\n            \n\n            <button id=\"btn-verify\" class=\"bg-teal-600 hover:bg-teal-700 text-white px-8 py-3 rounded-xl font-bold text-lg shadow-md transition-all cursor-pointer\">\n\n                <i class=\"fas fa-check-circle mr-2\"><\/i> Verifikasi\n\n            <\/button>\n\n        <\/div>\n\n\n\n        <p id=\"verify-status-message\" class=\"text-center text-gray-500 italic mb-4 text-sm\">\n\n            <i class=\"fas fa-spinner fa-spin\"><\/i> Menghubungkan ke database&#8230;\n\n        <\/p>\n\n        \n\n        <div id=\"verify-results-container\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n\n\n<script>\n\ndocument.addEventListener('DOMContentLoaded', function() {\n\n    \/\/ 1. Konfigurasi Google Sheet (SUMBER DATA DIPERBARUI DISINI)\n\n    \/\/ ID Sheet baru diambil dari link: 2PACX-1vRuDiJibs7tbcpEpyHbcVhsyBaRDMonLblItnxhEqxuoWbJ7PL2LZKxMpAjvJQcsqy4_mQtvRnroK7h\n\n    const VERIFY_SHEET_ID = '2PACX-1vRuDiJibs7tbcpEpyHbcVhsyBaRDMonLblItnxhEqxuoWbJ7PL2LZKxMpAjvJQcsqy4_mQtvRnroK7h';\n\n    \/\/ GID disesuaikan menjadi 811071960 sesuai link yang Anda berikan\n\n    const VERIFY_CSV_URL = `https:\/\/docs.google.com\/spreadsheets\/d\/e\/${VERIFY_SHEET_ID}\/pub?gid=811071960&single=true&output=csv`;\n\n\n\n    let certificateData = [];\n\n    let isDataLoaded = false;\n\n\n\n    \/\/ 2. Fungsi Parsing CSV\n\n    function parseCSV(csv) {\n\n        const lines = csv.split('\\n').filter(line => line.trim() !== '');\n\n        if (lines.length > 0) lines.shift(); \/\/ Hapus header\n\n        return lines.map(line => {\n\n            const cols = line.split(\/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)\/);\n\n            const cleanCols = cols.map(col => col ? col.trim().replace(\/^\"|\"$\/g, '') : '');\n\n            \n\n            \/\/ Mengambil kolom ke-4 (Index 3) sebagai Penandatangan\n\n            if (cleanCols.length >= 3) {\n\n                return { \n\n                    id: cleanCols[0], \n\n                    nama: cleanCols[1], \n\n                    kegiatan: cleanCols[2], \n\n                    penandatangan: cleanCols[3] || '-' \/\/ Default tanda strip jika kosong\n\n                };\n\n            }\n\n            return null;\n\n        }).filter(item => item !== null);\n\n    }\n\n\n\n    \/\/ 3. Ambil Data\n\n    async function fetchVerifyData() {\n\n        const statusMessage = document.getElementById('verify-status-message');\n\n        try {\n\n            const response = await fetch(VERIFY_CSV_URL);\n\n            if (!response.ok) throw new Error(\"Gagal mengambil data\");\n\n            const text = await response.text();\n\n            certificateData = parseCSV(text);\n\n            isDataLoaded = true;\n\n            statusMessage.innerHTML = '<i class=\"fas fa-check-circle text-green-600\"><\/i> Database siap. Silakan verifikasi.';\n\n        } catch (error) {\n\n            console.error(error);\n\n            statusMessage.innerHTML = '<span class=\"text-red-500\"><i class=\"fas fa-exclamation-triangle\"><\/i> Gagal memuat database. Coba refresh halaman.<\/span>';\n\n        }\n\n    }\n\n\n\n    \/\/ 4. Logika Tombol Verifikasi\n\n    function performVerification() {\n\n        const inputElement = document.getElementById('verify-input');\n\n        const query = inputElement.value.trim();\n\n        const container = document.getElementById('verify-results-container');\n\n        const statusMessage = document.getElementById('verify-status-message');\n\n\n\n        if (!isDataLoaded) { \n\n            alert(\"Data sedang dimuat, mohon tunggu sebentar.\"); \n\n            return; \n\n        }\n\n        \n\n        if (!query) { \n\n            alert(\"Mohon masukkan kode sertifikat.\"); \n\n            return; \n\n        }\n\n\n\n        if (query.length !== 5) {\n\n            container.innerHTML = `\n\n                <div class=\"verification-result invalid\">\n\n                    <div class=\"status-icon\"><i class=\"fas fa-exclamation-circle\"><\/i><\/div>\n\n                    <h2>Format Kode Salah<\/h2>\n\n                    <p>Mohon masukkan tepat <strong>5 digit pertama<\/strong>.<\/p>\n\n                <\/div>`;\n\n            return;\n\n        }\n\n        \n\n        if(statusMessage) statusMessage.style.display = 'none';\n\n\n\n        const result = certificateData.find(item => item.id.toLowerCase().startsWith(query.toLowerCase()));\n\n\n\n        if (!result) {\n\n            container.innerHTML = `\n\n                <div class=\"verification-result invalid\">\n\n                    <div class=\"status-icon\"><i class=\"fas fa-times-circle\"><\/i><\/div>\n\n                    <h2>Data Tidak Ditemukan<\/h2>\n\n                    <p>Kode <strong>${query}<\/strong> tidak terdaftar.<\/p>\n\n                <\/div>`;\n\n        } else {\n\n            \/\/ MENAMPILKAN HASIL (UPDATED)\n\n            container.innerHTML = `\n\n                <div class=\"verification-result valid\">\n\n                    <div class=\"status-icon\"><i class=\"fas fa-check-circle\"><\/i><\/div>\n\n                    <h2>Sertifikat Valid<\/h2>\n\n                    <h3 style=\"color:#2c3e50; font-size: 24px; font-weight:bold; margin: 10px 0;\">${result.nama}<\/h3>\n\n                    <div class=\"details\">\n\n                        <p><strong>ID Sertifikat<\/strong> <span>${result.id}<\/span><\/p>\n\n                        <p><strong>Nama<\/strong> <span>${result.nama}<\/span><\/p>\n\n                        <p><strong>Kegiatan<\/strong> <span>${result.kegiatan}<\/span><\/p>\n\n                        <p><strong>Penandatangan<\/strong> <span>${result.penandatangan}<\/span><\/p>\n\n                        <p><strong>Status<\/strong> <span class=\"bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full font-bold\">Terverifikasi<\/span><\/p>\n\n                    <\/div>\n\n                <\/div>`;\n\n        }\n\n    }\n\n\n\n    document.getElementById('btn-verify').addEventListener('click', performVerification);\n\n    \n\n    document.getElementById('verify-input').addEventListener('keyup', function(event) {\n\n        if (event.key === 'Enter') performVerification();\n\n    });\n\n\n\n    fetchVerifyData();\n\n});\n\n<\/script> \n","protected":false},"excerpt":{"rendered":"<p>Verifikasi Keaslian Cek validitas data sertifikat Anda dalam database Cloud Verifikasi Menghubungkan ke database&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":6,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/54\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}