function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('SIEDOM (Sistem Informasi Evaluasi Dosen oleh Mahasiswa) - Lembaga Penjaminan Mutu');
}
// Fungsi mencari mahasiswa berdasarkan NPM
function cariByNpm(npm) {
const ss = SpreadsheetApp.getActive();
const formSheet = ss.getSheetByName("Form Responses 1");
const matkulSheet = ss.getSheetByName("DaftarMatkul");
const data = formSheet.getDataRange().getValues();
const matkulData = matkulSheet.getDataRange().getValues();
// Kolom sesuai sheet Form Responses (update jika bergeser)
const IDX_NAMA = 1; // Nama Mahasiswa
const IDX_PRODI = 2; // Prodi
const IDX_NPM = 3; // NIM/NPM
const IDX_JK = 4; // Jenis Kelamin
const IDX_SEMESTER = 5; // Semester
const IDX_MATKUL = 7; // Mata Kuliah
// Ambil semua respon mahasiswa
const responMahasiswa = data.filter((row,i) => i>0 && row[IDX_NPM]==npm);
if(responMahasiswa.length==0) return {found:false};
// Ambil info mahasiswa dari baris pertama yang ditemukan
const mahasiswa = responMahasiswa[0];
const nama = mahasiswa[IDX_NAMA];
const prodi = mahasiswa[IDX_PRODI];
const jk = mahasiswa[IDX_JK];
const semester = mahasiswa[IDX_SEMESTER];
// Ambil daftar matkul wajib semester tersebut
const matkulWajib = matkulData.filter((row,i)=>i>0 && row[0]==semester).map(row=>row[1]);
// Normalisasi teks
const normalize = str => str.toString().trim().toLowerCase();
const wajibNorm = matkulWajib.map(normalize);
// Ambil matkul yang sudah diisi mahasiswa
const sudahIsiRaw = responMahasiswa.map(row=>row[IDX_MATKUL]);
// Tandai matkul yang tidak sesuai semester
const sudahIsi = sudahIsiRaw.map(m => {
return wajibNorm.includes(normalize(m)) ? m : m + " ⚠️ (Tidak sesuai semester)";
});
// Tentukan matkul belum diisi
const belumIsi = matkulWajib.filter((m, i) => !sudahIsiRaw.map(normalize).includes(wajibNorm[i]));
return {
found: true,
nama: nama,
prodi: prodi,
npm: npm,
jk: jk,
semester: semester,
sudahIsi: sudahIsi,
belumIsi: belumIsi
};
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@media print {
body * { visibility: hidden; }
#hasilContainer, #hasilContainer * { visibility: visible; }
#hasilContainer { position: absolute; top: 0; left: 0; width: 100%; }
#kopPrint { display: block !important; }
}
</style>
</head>
<body class="bg-gray-50 p-6">
<div class="max-w-xl mx-auto bg-white p-6 rounded-xl shadow">
<!-- Header -->
<div class="flex flex-col items-center mb-6">
<img src="https://staiuisu.ac.id/wp-content/uploads/2025/10/logo-stai-uisu.webp"
class="w-14 mb-2" alt="Logo">
<h3 class="text-xl font-semibold text-center flex flex-col">SIEDOM<span>Sistem Informasi Evaluasi Dosen oleh Mahasiswa</span></h3>
<div>Silahkan cek status pengisian EDOM</div>
<p class="text-sm text-gray-600 text-center">
Lembaga Penjaminan Mutu
(<a href="https://lpm.staiuisu.ac.id" target="_blank" class="text-blue-600 underline">lpm.staiuisu.ac.id</a>)
</p>
</div>
<!-- Input -->
<div class="mb-4">
<input type="text" id="npm"
class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500"
placeholder="Masukkan NPM">
</div>
<!-- Buttons -->
<div class="flex justify-center gap-3 mb-4">
<button onclick="cari()"
class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
Cari
</button>
<button id="printBtn" onclick="printHasil()"
class="hidden bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
Cetak Hasil
</button>
</div>
<!-- Loading -->
<div id="loading" class="hidden text-center mb-4">
<div class="animate-spin h-5 w-5 border-2 border-blue-600 border-t-transparent rounded-full inline-block"></div>
<span class="ml-2 text-blue-600">Mencari data...</span>
</div>
<!-- Kop untuk Print -->
<div id="hasilContainer">
<div id="kopPrint" class="hidden mb-4 text-center">
<div class="flex items-center justify-center mb-2">
<img src="https://staiuisu.ac.id/wp-content/uploads/2025/10/logo-stai-uisu.webp"
class="w-14 h-14 mr-3" alt="Logo">
<div>
<h1 class="text-lg font-bold">Sistem Informasi EDOM</h1>
<p class="text-sm">Sekolah Tinggi Agama Islam "UISU" Pematangsiantar</p>
</div>
</div>
</div>
<!-- Hasil -->
<div id="hasil"></div>
</div>
</div>
<script>
function cari() {
const npm = document.getElementById('npm').value.trim();
if (!npm) return alert("Masukkan NPM");
document.getElementById('hasil').innerHTML = '';
document.getElementById('loading').classList.remove('hidden');
document.getElementById('printBtn').classList.add('hidden');
google.script.run.withSuccessHandler(tampilkan).cariByNpm(npm);
}
function tampilkan(data) {
document.getElementById('loading').classList.add('hidden');
if (!data.found) {
document.getElementById('hasil').innerHTML =
`<div class="bg-yellow-100 text-yellow-700 text-center p-3 rounded-lg">
NPM tidak ditemukan atau belum mengisi EDOM.
</div>`;
return;
}
document.getElementById('printBtn').classList.remove('hidden');
let html = `
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-4">
<div class="font-semibold">Nama:</div> <div>${data.nama}</div>
<div class="font-semibold">Prodi:</div> <div>${data.prodi}</div>
<div class="font-semibold">NPM:</div> <div>${data.npm}</div>
<div class="font-semibold">Jenis Kelamin:</div> <div>${data.jk}</div>
<div class="font-semibold">Semester:</div> <div>${data.semester}</div>
</div>
`;
html += `<h5 class="font-bold mb-2">Mata Kuliah Sudah Diisi</h5>`;
html += `<ul class="space-y-2 mb-4">`;
data.sudahIsi.forEach(m => {
html += `<li class="p-2 rounded-lg ${
m.includes('⚠️') ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'
}">${m}</li>`;
});
html += `</ul>`;
html += `<h5 class="font-bold mb-2">Mata Kuliah Belum Diisi</h5>`;
html += `<ul class="space-y-2 mb-4">`;
if (data.belumIsi.length === 0) {
html += `<li class="p-2 bg-blue-100 text-blue-700 rounded-lg">Semua matkul sudah diisi.</li>`;
} else {
data.belumIsi.forEach(m => {
html += `<li class="p-2 bg-red-100 text-red-700 rounded-lg">${m}</li>`;
});
}
html += `</ul>`;
document.getElementById('hasil').innerHTML = html;
}
function printHasil() {
window.print();
}
</script>
<!-- Footer -->
<footer class="mt-10 text-center text-gray-600 text-sm py-6">
<div class="border-t pt-4">
<p class="font-semibold">Sistem Informasi EDOM – STAI UISU Pematangsiantar</p>
<p class="mt-1">
Lembaga Penjaminan Mutu •
<a href="https://lpm.staiuisu.ac.id" target="_blank" class="text-blue-600 hover:underline">
lpm.staiuisu.ac.id
</a>
</p>
<p class="mt-1">© 2025 – Dikembangkan oleh Unit LPM</p>
</div>
</footer>
<style>
@media print {
footer { display: none !important; }
}
</style>
</body>
</html>
Komentar