{"id":307,"date":"2025-07-16T14:52:29","date_gmt":"2025-07-16T14:52:29","guid":{"rendered":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/?page_id=307"},"modified":"2026-01-07T03:53:49","modified_gmt":"2026-01-07T03:53:49","slug":"bankalatukur","status":"publish","type":"page","link":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/p3tpkyarsi\/bankalatukur\/","title":{"rendered":"Bank Alat Ukur"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"id\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Bank Alat Ukur Psikologi<\/title>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <style>\n    body {\n      font-family: sans-serif;\n      background: #f9f9f9;\n      padding: 20px;\n    }\n\n    h1 {\n      text-align: center;\n      color: #333;\n    }\n\n    .filter-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      margin-bottom: 10px;\n    }\n\n    .filter-row input {\n      flex: 1 1 200px;\n      padding: 10px;\n      font-size: 14px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n    }\n\n    .btn-row {\n      margin: 10px 0;\n      display: flex;\n      gap: 10px;\n    }\n\n    .download-btn, .reset-btn {\n      padding: 8px 14px;\n      font-size: 14px;\n      border: none;\n      border-radius: 4px;\n      cursor: pointer;\n      color: white;\n    }\n\n    .download-btn {\n      background-color: #0055aa;\n    }\n\n    .download-btn:hover {\n      background-color: #003f80;\n    }\n\n    .reset-btn {\n      background-color: #888;\n    }\n\n    .reset-btn:hover {\n      background-color: #666;\n    }\n\n    table {\n      border-collapse: collapse;\n      width: 100%;\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 0 10px rgba(0,0,0,0.05);\n      margin-top: 10px;\n    }\n\n    th, td {\n      padding: 12px;\n      text-align: left;\n      border-bottom: 1px solid #eee;\n      vertical-align: top;\n    }\n\n    th {\n      background-color: #f0f0f0;\n    }\n\n    tr:nth-child(even) {\n      background-color: #fefefe;\n    }\n\n    .pagination {\n      margin-top: 20px;\n      text-align: center;\n    }\n\n    .pagination button {\n      margin: 0 3px;\n      padding: 5px 10px;\n      border: none;\n      background-color: #eee;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n\n    .pagination button.active {\n      background-color: #0055aa;\n      color: white;\n    }\n\n    .pagination button.disabled {\n      background-color: #ccc;\n      cursor: not-allowed;\n    }\n\n    #lastUpdated {\n      text-align: center;\n      color: #555;\n      font-size: 14px;\n      margin-top: 10px;\n    }\n\n    .download-link {\n      display: inline-block;\n      padding: 8px 15px;\n      background-color: #0055aa;\n      color: white;\n      text-decoration: none;\n      border-radius: 5px;\n      font-weight: bold;\n      text-align: center;\n    }\n\n    .download-link:hover {\n      background-color: #003f80;\n      text-decoration: underline;\n    }\n\n    \/* Menambahkan logo download pada kolom ke-8 *\/\n    .download-logo {\n      width: 24px;\n      height: 24px;\n      vertical-align: middle;\n    }\n    \n    td:nth-child(9),\n    td:nth-child(10),\n    td:nth-child(11),\n    th:nth-child(9),\n    th:nth-child(10),\n    th:nth-child(11) {\n      display: none;\n    }\n\n  <\/style>\n<\/head>\n<body>\n  <h1>Bank Alat Ukur Psikologi<\/h1>\n\n  <p id=\"lastUpdated\"><\/p>\n\n  <div class=\"filter-row\">\n    <input type=\"text\" id=\"filterKeyTerm\" placeholder=\"Cari Key Term\">\n    <input type=\"text\" id=\"filterAlatUkur\" placeholder=\"Cari Alat Ukur\">\n    <input type=\"text\" id=\"filterJurnal\" placeholder=\"Cari Jurnal Rujukan\">\n    <input type=\"text\" id=\"filterNama\" placeholder=\"Cari Nama\">\n  <\/div>\n\n  <div class=\"btn-row\">\n    <button class=\"download-btn\" onclick=\"downloadCSV()\">Unduh CSV<\/button>\n    <button class=\"reset-btn\" onclick=\"resetFilters()\">Reset Filter<\/button>\n  <\/div>\n\n  <div id=\"tableContainer\"><\/div>\n  <div class=\"pagination\" id=\"paginationContainer\"><\/div>\n\n  <!-- Tombol Prev dan Next -->\n  <div class=\"pagination\">\n    <button id=\"prevPageBtn\" class=\"pagination\" onclick=\"prevPage()\">Prev<\/button>\n    <button id=\"nextPageBtn\" class=\"pagination\" onclick=\"nextPage()\">Next<\/button>\n  <\/div>\n\n  <script>\n    const csvUrl = 'https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTegY_ESkSto7SYVVjOkORw2ACscxG5hv2J_m9rimWMgVwOzioCCydw-NNTzRe3nUX9F8-FrC9HsKE8\/pub?output=csv'; \/\/ Ganti dengan URL CSV Anda\n    const itemsPerPage = 25;\n    let originalCSV = '';\n    let fullData = [];\n    let filteredData = [];\n    let currentPage = 1;\n\n    async function loadCSV(url) {\n      const response = await fetch(url);\n      const data = await response.text();\n      originalCSV = data;\n      return data;\n    }\n\n    function csvToArray(str, delimiter = \",\") {\n      const pattern = new RegExp(\n        (\n          \"(\\\\\" + delimiter + \"|\\\\r?\\\\n|\\\\r|^)\" +\n          \"(?:\\\"([^\\\"]*(?:\\\"\\\"[^\\\"]*)*)\\\"|\" +\n          \"([^\\\"\\\\\" + delimiter + \"\\\\r\\\\n]*))\"\n        ),\n        \"gi\"\n      );\n      const data = [[]];\n      let matches = null;\n      while ((matches = pattern.exec(str))) {\n        const matchedDelimiter = matches[1];\n        if (matchedDelimiter.length && matchedDelimiter !== delimiter) {\n          data.push([]);\n        }\n        const matchedValue = matches[2]\n          ? matches[2].replace(\/\\\"\\\"\/g, \"\\\"\")\n          : matches[3];\n        data[data.length - 1].push(matchedValue);\n      }\n      return data;\n    }\n\n    function createTable(dataArray) {\n      const header = dataArray[0];\n      const start = (currentPage - 1) * itemsPerPage + 1;\n      const end = Math.min(start + itemsPerPage - 1, dataArray.length - 1);\n\n      let table = '<table><thead><tr>';\n      header.forEach(h => {\n        table += `<th>${h}<\/th>`;\n      });\n      table += '<\/tr><\/thead><tbody>';\n\n      for (let i = start; i <= end; i++) {\n        const row = dataArray[i];\n        table += `<tr>`;\n        row.forEach((cell, index) => {\n          if (index === 7) {\n            \/\/ Cek jika kolom Link Alat Ukur kosong, jika kosong tampilkan \"Tidak Tersedia\"\n            const linkText = cell ? `<a href=\"${cell}\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/7\/72\/Download-icon-green.svg\" class=\"download-logo\" alt=\"Download\"><\/a>` : \"Tidak Tersedia\";\n            table += `<td>${linkText}<\/td>`;\n          } else {\n            table += `<td>${cell}<\/td>`;\n          }\n        });\n        table += '<\/tr>';\n      }\n\n      table += '<\/tbody><\/table>';\n      document.getElementById('tableContainer').innerHTML = table;\n      renderPagination(dataArray.length - 1);\n      togglePaginationButtons();\n    }\n\n    function renderPagination(totalItems) {\n      const pageCount = Math.ceil(totalItems \/ itemsPerPage);\n      let buttons = '';\n      for (let i = 1; i <= pageCount; i++) {\n        buttons += `<button class=\"${i === currentPage ? 'active' : ''}\" onclick=\"goToPage(${i})\">${i}<\/button>`;\n      }\n      document.getElementById('paginationContainer').innerHTML = buttons;\n      togglePaginationButtons();\n    }\n\n    function togglePaginationButtons() {\n      const totalPages = Math.ceil(filteredData.length \/ itemsPerPage);\n      document.getElementById(\"prevPageBtn\").style.display = (currentPage === 1) ? \"none\" : \"inline-block\";\n      document.getElementById(\"nextPageBtn\").style.display = (currentPage === totalPages) ? \"none\" : \"inline-block\";\n    }\n\n    function applyFilters() {\n      const filters = [\n        document.getElementById('filterKeyTerm').value.toLowerCase(),\n        document.getElementById('filterAlatUkur').value.toLowerCase(),\n        document.getElementById('filterJurnal').value.toLowerCase(),\n        document.getElementById('filterNama').value.toLowerCase()\n      ];\n      filteredData = fullData.filter((row, index) => {\n        if (index === 0) return true; \/\/ Menjaga header\n        return (\n          row[0]?.toLowerCase().includes(filters[0]) &&  \/\/ Key Term\n          row[1]?.toLowerCase().includes(filters[1]) &&  \/\/ Alat Ukur\n          row[2]?.toLowerCase().includes(filters[2]) &&  \/\/ Jurnal Rujukan\n          row[4]?.toLowerCase().includes(filters[3])     \/\/ Nama, Kolom 5\n        );\n      });\n      currentPage = 1;\n      createTable(filteredData);\n    }\n\n    function addColumnFilters() {\n      const inputs = document.querySelectorAll('.filter-row input');\n      inputs.forEach(input => {\n        input.addEventListener('keyup', applyFilters);\n      });\n    }\n\n    function resetFilters() {\n      document.querySelectorAll('.filter-row input').forEach(input => input.value = '');\n      filteredData = fullData;\n      currentPage = 1;\n      createTable(filteredData);\n    }\n\n    function goToPage(page) {\n      currentPage = page;\n      createTable(filteredData);\n      window.scrollTo(0, 0);  \/\/ Scroll ke atas setelah klik halaman\n    }\n\n    function nextPage() {\n      if (currentPage < Math.ceil(filteredData.length \/ itemsPerPage)) {\n        currentPage++;\n        createTable(filteredData);\n        window.scrollTo(0, 0);  \/\/ Scroll ke atas setelah klik Next\n      }\n    }\n\n    function prevPage() {\n      if (currentPage > 1) {\n        currentPage--;\n        createTable(filteredData);\n        window.scrollTo(0, 0);  \/\/ Scroll ke atas setelah klik Prev\n      }\n    }\n\n    function downloadCSV() {\n      const blob = new Blob([originalCSV], { type: 'text\/csv;charset=utf-8;' });\n      const link = document.createElement(\"a\");\n      const url = URL.createObjectURL(blob);\n      link.setAttribute(\"href\", url);\n      link.setAttribute(\"download\", \"bank-alat-ukur.csv\");\n      link.style.visibility = 'hidden';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    }\n\n    function updateTimestamp() {\n      const now = new Date();\n      const options = {\n        timeZone: 'Asia\/Jakarta',\n        day: '2-digit',\n        month: 'long',\n        year: 'numeric',\n        hour: '2-digit',\n        minute: '2-digit',\n      };\n      const formatted = now.toLocaleString('id-ID', options);\n      document.getElementById('lastUpdated').textContent = `Data terakhir dimuat: ${formatted} WIB`;\n    }\n\n    async function init() {\n      const csvData = await loadCSV(csvUrl);\n      fullData = csvToArray(csvData);\n      filteredData = fullData;\n      createTable(filteredData);\n      addColumnFilters();\n      updateTimestamp();\n    }\n\n    init();\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bank Alat Ukur Psikologi Bank Alat Ukur Psikologi Unduh CSV Reset Filter Prev Next<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":318,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-307","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/pages\/307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":10,"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/pages\/307\/revisions"}],"predecessor-version":[{"id":570,"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/pages\/307\/revisions\/570"}],"up":[{"embeddable":true,"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/pages\/318"}],"wp:attachment":[{"href":"https:\/\/www.yarsi.ac.id\/fakultas-psikologi\/wp-json\/wp\/v2\/media?parent=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}