{"id":27982,"date":"2026-09-11T16:33:09","date_gmt":"2026-09-11T09:33:09","guid":{"rendered":"https:\/\/informatika.uin-malang.ac.id\/?p=27982"},"modified":"2026-09-11T16:37:25","modified_gmt":"2026-09-11T09:37:25","slug":"schedule-of-practicum-assistant","status":"publish","type":"post","link":"https:\/\/informatika.uin-malang.ac.id\/ar\/schedule-of-practicum-assistant\/","title":{"rendered":"Schedule of Practicum Assistant"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"27982\" class=\"elementor elementor-27982\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f290304 e-flex e-con-boxed e-con e-parent\" data-id=\"f290304\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7380bcc elementor-widget elementor-widget-html\" data-id=\"7380bcc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Container Utama -->\n<div class=\"custom-table-container\">\n  \n  <!-- Form Pencarian -->\n<!-- Form Pencarian dengan Judul Label -->\n<div class=\"search-box\">\n  <label for=\"searchInput\" class=\"search-label\">Cari Data Tabel<\/label>\n  <div class=\"input-wrapper\">\n    <input \n      type=\"text\" \n      id=\"searchInput\" \n      placeholder=\"Ketik kata kunci (misal: nama, kode, status)...\" \n      onkeyup=\"filterTable()\"\n    \/>\n  <\/div>\n<\/div>\n\n  <!-- Loading State -->\n  <div id=\"loadingText\" class=\"loading-state\">Memuat data dari Google Sheets...<\/div>\n\n  <!-- Tabel Data -->\n  <div class=\"table-wrapper\">\n    <table id=\"dataTable\" style=\"display: none;\">\n      <thead id=\"tableHeader\"><\/thead>\n      <tbody id=\"tableBody\"><\/tbody>\n    <\/table>\n  <\/div>\n\n<\/div>\n\n<!-- CSS Styling (Tampilan Aplikasi Profesional) -->\n<style>\n  \/* Import Font Modern (Inter) *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&display=swap');\n\n  \/* Container Utama *\/\n  .custom-table-container {\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    max-width: 100%;\n    margin: 24px 0;\n    background: #ffffff;\n    border-radius: 12px;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n    border: 1px solid #e2e8f0;\n    padding: 24px;\n    box-sizing: border-box;\n  }\n\n  \/* Form Pencarian Interaktif dengan Ikon Hijau *\/\n  .search-box {\n    position: relative;\n    margin-bottom: 20px;\n  }\n\n  .search-box input {\n    width: 100%;\n    padding: 12px 16px 12px 42px;\n    font-size: 14px;\n    font-family: inherit;\n    color: #0f172a;\n    background-color: #f8fafc;\n    border: 1px solid #cbd5e1;\n    border-radius: 8px;\n    outline: none;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    box-sizing: border-box;\n  }\n\n  \/* SVG Ikon Pencarian Bernuansa Hijau *\/\n  .search-box::before {\n    content: '';\n    position: absolute;\n    left: 14px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 18px;\n    height: 18px;\n    \/* Warna stroke SVG diubah ke hijau Emerald (#059669) *\/\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 24 24' stroke='%3C%23059669'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C\/path%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: contain;\n    pointer-events: none;\n  }\n\n  \/* Fokus Input dengan Ring Hijau Emerald *\/\n  .search-box input:focus {\n    background-color: #ffffff;\n    border-color: #10b981;\n    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);\n  }\n\n  .search-box input::placeholder {\n    color: #94a3b8;\n  }\n\n  \/* Loading State *\/\n  .loading-state {\n    text-align: center;\n    padding: 40px 20px;\n    color: #059669;\n    font-size: 14px;\n    font-weight: 500;\n  }\n\n  \/* Scrollbar Kustom & Container Responsif *\/\n  .table-wrapper {\n    overflow-x: auto;\n    border-radius: 8px;\n    border: 1px solid #e2e8f0;\n  }\n\n  .table-wrapper::-webkit-scrollbar {\n    height: 8px;\n  }\n\n  .table-wrapper::-webkit-scrollbar-track {\n    background: #f8fafc;\n  }\n\n  .table-wrapper::-webkit-scrollbar-thumb {\n    background: #a7f3d0;\n    border-radius: 4px;\n  }\n\n  .table-wrapper::-webkit-scrollbar-thumb:hover {\n    background: #10b981;\n  }\n\n  \/* Tabel Utama *\/\n  table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    text-align: left;\n    font-size: 14px;\n  }\n\n  \/* Header Tabel Gradient Soft Green *\/\n  th {\n    background: linear-gradient(180deg, #ecfdf5 0%, #e6f4ea 100%);\n    color: #065f46;\n    font-weight: 600;\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    padding: 14px 18px;\n    border-bottom: 2px solid #a7f3d0;\n    white-space: nowrap;\n    position: sticky;\n    top: 0;\n  }\n\n  th:first-child {\n    border-top-left-radius: 8px;\n  }\n\n  th:last-child {\n    border-top-right-radius: 8px;\n  }\n\n  \/* Baris & Sel Data *\/\n  td {\n    padding: 14px 18px;\n    border-bottom: 1px solid #f1f5f9;\n    color: #334155;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n  }\n\n  \/* EFEK HOVER BARIS BERNUANSA HIJAU *\/\n  tr:hover td {\n    background-color: #f0fdf4; \/* Warna latar hijau pastel sangat lembut *\/\n    color: #064e3b;            \/* Teks berubah menjadi hijau tua *\/\n  }\n\n  \/* Highlight aksen garis hijau di sebelah kiri baris yang di-hover *\/\n  tr:hover td:first-child {\n    box-shadow: inset 4px 0 0 #10b981;\n  }\n\n  \/* Menghilangkan garis bawah pada baris terakhir *\/\n  tr:last-child td {\n    border-bottom: none;\n  }\n\n  \/* Styling Responsif untuk Layar Kecil *\/\n  @media (max-width: 640px) {\n    .custom-table-container {\n      padding: 16px;\n      border-radius: 8px;\n    }\n\n    th, td {\n      padding: 10px 12px;\n      font-size: 13px;\n    }\n  }\n<\/style>\n<!-- JavaScript Fetch & Filter -->\n<script>\n  \/\/ 1. MASUKKAN SHEET ID ANDA DI SINI\n  const SHEET_ID = '1yuLKjpwCNGO16AkceG4o2AlSRVpKgW8U';\n  \n  \/\/ URL Endpoint Google Visualization API\n  const jsonUrl = `https:\/\/docs.google.com\/spreadsheets\/d\/${SHEET_ID}\/gviz\/tq?tqx=out:json`;\n\n  \/\/ Fetch Data dari Google Sheets\n  fetch(jsonUrl)\n    .then(response => response.text())\n    .then(data => {\n      \/\/ Membersihkan wrapper JSON bawaan Google API\n      const rawJson = JSON.parse(data.substring(47, data.length - 2));\n      const cols = rawJson.table.cols;\n      const rows = rawJson.table.rows;\n\n      renderTable(cols, rows);\n    })\n    .catch(error => {\n      document.getElementById('loadingText').innerText = 'Gagal memuat data. Pastikan Sheet ID dan akses berbagi sudah benar.';\n      console.error('Error fetching data:', error);\n    });\n\n  function renderTable(cols, rows) {\n  const tableHeader = document.getElementById('tableHeader');\n  const tableBody = document.getElementById('tableBody');\n\n  \/\/ 1. Identifikasi indeks kolom mana saja yang memiliki isi (tidak kosong)\n  const validColumnIndexes = [];\n\n  cols.forEach((col, colIndex) => {\n    \/\/ Cek apakah label header ada combines\/isinya\n    const hasHeaderLabel = col.label && col.label.trim() !== '';\n    \n    \/\/ Cek apakah ada minimal satu sel dalam kolom ini yang memiliki data\n    const hasDataInRows = rows.some(row => {\n      const cell = row.c[colIndex];\n      return cell && cell.v !== null && cell.v !== undefined && String(cell.v).trim() !== '';\n    });\n\n    \/\/ Simpan indeks kolom jika header atau datanya tidak kosong\n    if (hasHeaderLabel || hasDataInRows) {\n      validColumnIndexes.push(colIndex);\n    }\n  });\n\n  \/\/ 2. Render Header (Hanya kolom yang valid)\n  let headerHtml = '<tr>';\n  validColumnIndexes.forEach(colIndex => {\n    const colLabel = cols[colIndex] ? (cols[colIndex].label || '') : '';\n    headerHtml += `<th>${colLabel}<\/th>`;\n  });\n  headerHtml += '<\/tr>';\n  tableHeader.innerHTML = headerHtml;\n\n  \/\/ 3. Render Body (Hanya sel dari kolom yang valid)\n  let bodyHtml = '';\n  rows.forEach(row => {\n    bodyHtml += '<tr>';\n    validColumnIndexes.forEach(colIndex => {\n      const cell = row.c[colIndex];\n      const cellValue = cell && cell.v !== null && cell.v !== undefined ? cell.v : '';\n      bodyHtml += `<td>${cellValue}<\/td>`;\n    });\n    bodyHtml += '<\/tr>';\n  });\n  tableBody.innerHTML = bodyHtml;\n\n  \/\/ Sembunyikan pesan loading, tampilkan tabel\n  document.getElementById('loadingText').style.display = 'none';\n  document.getElementById('dataTable').style.display = 'table';\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cari Data Tabel Memuat data dari Google Sheets&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[134,29],"tags":[],"class_list":["post-27982","post","type-post","status-publish","format-standard","hentry","category-asisten-praktikum","category-pengumuman"],"_links":{"self":[{"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/posts\/27982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/comments?post=27982"}],"version-history":[{"count":6,"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/posts\/27982\/revisions"}],"predecessor-version":[{"id":27987,"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/posts\/27982\/revisions\/27987"}],"wp:attachment":[{"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/media?parent=27982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/categories?post=27982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatika.uin-malang.ac.id\/ar\/wp-json\/wp\/v2\/tags?post=27982"}],"curies":[{"name":"\u062f\u0628\u0644\u064a\u0648 \u0628\u064a","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}