Membuat Pengumuman Ujian dengan Google Spreadsheet
Format Spreadsheet yang Dibutuhkan
| NO | NISN | NAMA SEKOLAH | JENJANG | SKL | LINK |
|:--:|:------:|:------------:|:--------:|:---:|--------------|
| 1 | 123456 | SMA JAYA | OTOMOTIF | YA | https://link |
| | | | | | |
| | | | | | |Kode GScript dan HTML
Berikut kode gscriptnya:
function doGet() {
var template = HtmlService.createTemplateFromFile('Page');
return template.evaluate();
}
function searchNPSN(npsn) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("SKL"); // Ganti Sheet1 dengan nama sheet Anda
var data = sheet.getDataRange().getValues();
var result = [];
for (var i = 1; i < data.length; i++) { // Mulai dari baris kedua karena baris pertama adalah header
if (data[i][1] == npsn) { // Kolom NPSN berada di indeks 1
result.push(data[i]);
}
}
if (result.length > 0) {
return result;
} else {
return "Data Tidak Ditemukan";
}
}
Berikut kode htmlnya:
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link
rel="stylesheet"
href="https://kalingga.my.id/font-awesome-6.5.1-pro-full/css/all.css"
/>
<style>
.db-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(52, 58, 64)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.db-toggler.navbar-toggler {
border-color: rgba(52, 58, 64);
}
img.tentang{
float: left;
margin-right: 10px;
}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<header>
<div class="bg-warning collapse" id="navbarHeader" style="">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-dark">Tentang</h4><img class="tentang" src="https://lh7-us.googleusercontent.com/u/0/docs/AHkbwyLpVyV0gl_CsRXGbQIV6Tt_7ZKp291XKlsWbTOIvl_5Ulu70k8Qv_oUExR19tWMLrjVg3KIpH_XlRQPE8fUIKoT6OuB1T3FWqh0FU0IQjbmB38tNOB98nEw0ZYin3Qo1txFt6s1IGCZjjC6FUPKgCg5UNkhnbDsBew7DYudXO5PyxWgKAbhNUq1oAeLS_ZSvfsqgUiGgy29uN-5vy4E1HPCuYarXQtsvUB0x2Mf0H63yC8WNAd3qiZN-FiXFf9B6TJrENODgPEtnFR78RZouC75Kv3NXLyV0W5GQqNUCQXV4-X-XRmlKJMTCefxwdJtC_nQ0y_EfUpOcvrjmMoWmcwjWYVKUFu-uE0QHTLC1p5ji8IlcOSOVVeWI4qenRxSsZ6B-VA_ywyy5cCJPACWkJQduyOnUxijjtllMQ6iDlS9SdbtP39SvC5ZYTrcujZwlBtL9KpEHhnVIrX70EFgyACBSDGkIhcs6heNiNp48sLlHeMZkBN2Yo-GuSARzJJJlm07zUl_N-xUSTViIgUR-G3wv-ehAbhvy4SzQuWSUlmiDeZKe_7Ty-qxkM7l_i8ZMnyEZeKXDbLd7AnoR5TiEk5CwD5yNZPpMoN33bkFUYlEWyy4nTLjTxpKBS7rwilezGK1pyTil-2cqzDEQQDqIEPMgn_-nHA7F72oxKubq_IgOGL0NcYd3UQ0FacmYrrGWjzzUViNrwyoYGHQOHJkXBCsHU1evicxSUrQ9IRLngQP40ITgNVnItDhilu2RxAF89bAxfWaH6ssbvxllJDHTf0n6axEGNsQ1z7KfOn-6IvDW6YUrkbwdzCAGnoNz6wPH-GQnCDu_JUCX3vBWki_KY9R4gBb5ZMsF9w7tMT36byyf8__Z-S6pi8Sxb_fky13T_rcCIxDDu497gi-UIjYMDJ5TEN8FSQ" alt="">
<p class="text-muted"><strong>SMK Dharma Bhakti Tangerang</strong> dikenal karena menyediakan beragam program keahlian yang relevan dengan tuntutan industri saat ini. Kami berkomitmen untuk memberikan pendidikan berkualitas serta persiapan yang baik bagi siswa untuk memasuki dunia kerja atau melanjutkan pendidikan ke jenjang yang lebih tinggi.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-dark">Kontak</h4>
<ul class="list-unstyled">
<li><span class="text-dark">Jln. KH. Hasyim Ashari Km. 9, Kel. Sudimara Pinang Kec. Pinang Kota Tangerang<br/> Provinsi Banten.</span></li>
<li><span class="text-dark"><i class="fa-duotone fa-phone-volume" aria-hidden="true"></i> (021) 7321645</span></li>
<li><span class="text-dark"><i class="fa-duotone fa-envelope" aria-hidden="true"></i> [email protected]</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-warning bg-warning box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center text-dark">
<i class="fa-duotone fa-book-open-cover"></i>
<strong> SMK Dharma Bhakti</strong>
</a>
<button class="navbar-toggler collapsed db-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<div class="container">
<div class="py-5 text-center">
<div class="d-flex justify-content-center">
<form class="form-inline">
<label class="sr-only" for="grupnisn">nisn</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa-duotone fa-user-graduate fa-beat"></i>
</div>
</div>
<input
type="text"
class="form-control"
name="nisn"
id="grupnisn"
placeholder="Masukkan NISN"
/>
<div class="input-group-append">
<input
class="btn btn-warning"
type="button"
value="Cari"
onclick="search()"
id="searchBtn"
>
</input>
</div>
</div>
</form>
</div>
<div class="d-flex justify-content-center">
<div id="result"></div>
</div>
</div>
</div>
<footer class="mt-auto">
<div class="container">
<div class="row text-center">
<div class="col-lg-12 col-sm-12 col-xs-12">
<div class="footer_copyright">
<p>© 2021 Tim IT SMKDB. All Rights Reserved.</p>
</div>
</div><!--- END COL -->
</div><!--- END ROW -->
</div><!--- END CONTAINER -->
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
function search() {
var nisn = document.getElementById("nisn").value;
google.script.run.withSuccessHandler(displayResult).searchNISN(nisn);
}
function displayResult(result) {
var resultDiv = document.getElementById("result");
if (result == "Data Tidak Ditemukan") {
resultDiv.innerHTML = "<div class='error'>Data Tidak Ditemukan</div>";
} else {
var table = "<table>";
table +=
"<tr><th>NO</th><th>NISN</th><th>NAMA SEKOLAH/CLC</th><th>JENJANG</th><th>TAHUN</th><th>SKL</th></tr>";
for (var i = 0; i < result.length; i++) {
table +=
"<tr><td>" +
(i + 1) +
"</td><td>" +
result[i][1] +
"</td><td>" +
result[i][2] +
"</td><td>" +
result[i][3] +
"</td><td>" +
result[i][4] +
"</td><td><a href='" +
result[i][5] +
"' target='_blank'>Download</a></td></tr>";
}
table += "</table>";
resultDiv.innerHTML = table;
}
}
document
.getElementById("grupnisn")
.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("searchBtn").click();
}
});
</script>
</body>
</html>
Newsletter
Jika Anda menyukai posting ini, daftar untuk mendapatkan pembaruan di email Anda. Ketika saya menulis sesuatu yang baru! Tidak pernah ada spam.
Berlangganan Newsletter