Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active October 3, 2023 03:29
Show Gist options
  • Save neno-tech/08e1f06e5d2abe34ff3361a200faa022 to your computer and use it in GitHub Desktop.
Save neno-tech/08e1f06e5d2abe34ff3361a200faa022 to your computer and use it in GitHub Desktop.
Download ZIP
Web App ค้นหา+SweetAlert2
Raw
code.gs
function doGet(e) {
var template = HtmlService.createTemplateFromFile('index')
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
}
function setPlainText() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheets = ss.getSheets();
for(var i = 0; i < sheets.length; i++) {
var setPlainText = ss.getSheets()[i];
var sheetColumnA = setPlainText.getRange("A1:A");
sheetColumnA.setNumberFormat("@");
}
}
function getCode(code) {
var ws = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var data = ws.getRange(1, 1, ws.getLastRow(), 6).getValues();
var stdCodesList = data.map (function(r) { return r[0]; });
var stdList = data.map(function(r) {
return [`
<table class="table table-bordered">
<thead class="thead-light">
<tr>
<th scope="col"><center>เลขประจำตัวนักเรียน</center></th>
<th scope="col"><center>ชื่อ - สกุล</center></th>
<th scope="col"><center>ระดับชั้นเรียน</center></th>
<th scope="col"><center>ห้อง</center></th>
<th scope="col"><center>ครูที่ปรึกษา</center></th>
</tr>
</thead>
<tbody>
<tr>
<td>${r[1]}</td> <td>${r[2]}</td> <td>${r[3]}</td> <td>${r[4]} <td>${r[5]}</td>
</td>
</tr>
</tbody>
</table>
`];
});
var position = stdCodesList.indexOf(code);
if(position > -1){
return stdList[position];
} else {
return '*ไม่พบข้อมูล';
}
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<base target="_top">
<!--font awesome-->
<script src="https://kit.fontawesome.com/ad42651166.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Sarabun' rel='stylesheet' type='text/css'>
<style type='text/css'>
@font-face {
font-family: 'Sarabun';
}
body { font-family: 'Sarabun' !important; }
::placeholder {
color: peachpuff;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#"></a>
<h4 class="prompt text-white"><img src="https://drive.google.com/uc?id=1SQSVYCkY46_eqDIWDFvxfovotPAGnqMy" weight="60" height="60">ระบบตรวจสอบรายชื่อนักเรียน </h4>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="https://www.apivat.com/" target="_blank"><i class="fas fa-home mr-2"></i> เว็บไซต์ออนไลน์ครูอภิวัฒน์</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="alert alert-warning" role="alert" background-color: #ffed00>
<h6 class="font-weight-bold"><i class="fas fa-book-reader "></i>
วิธีการค้นหาข้อมูล</h6>
<p>1. ให้ผู้สมัครพิมพ์รหัสประจำตัวประชาชนจำนวน 13 หลัก ลงในช่องค้นหา
<br>2. รอสักครู่ ระบบจะแสดงข้อมูลให้โดยอัตโนมัต หากมีปัญหาติดต่อครูอภิวัฒน์</p>
</div>
<br>
<div class="container">
<div class="row">
<div class="col">
<!-- 1 of 3 -->
</div>
<div class="col-md-auto">
<div class="card border-primary">
<h5 class="card-header text-white bg-primary"><i class="far fa-address-card mr-3"></i>พิมพ์เลขบัตรประชาชน 13 หลัก</h5>
<div class="card-body"><input class="form-control form-control-lg" type="text" id="idStudent" placeholder="พิมพ์หมายเลขบัตรประชาชน" maxlength="13"></div>
</div>
</div>
<div class="col">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md">
</div>
<div class="col-md">
<br>
</div>
<div class="col-md">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col-5">
<center><span class="badge badge-primary">ผลการค้นหาข้อมูล</span></center>
</div>
<!-- Result Header End -->
<br>
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col-md-auto">
<br>
<div class="container">
<div id="search">
<textarea style="border:none;resize:none;" id="search" readonly></textarea>
</div>
</div>
</div>
<div class="col">
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="container">
<footer><br>
<div class="bg-primary">
<div class="container">
<br>
<div class="row">
<div class="clo-lg-3 col-md-auto">
<h6 class="prompt text-white"><i class="fa fa-user-circle-o mr-3"></i>นายอภิวัฒน์ วงศ์กัณหา โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</h6>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- ปิดแทก Footer -->
<script>
document.getElementById("idStudent").addEventListener("input", findCode);
function findCode() {
var code = document.getElementById("idStudent").value;
if(code.length === 13){
google.script.run.withSuccessHandler(updateData).getCode(code);
}
}
function updateData(data) {
document.getElementById("search").innerHTML = data;
M.updateTexfields();
}
</script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment