neno-tech/code.gs

## code.gs
function doGet(e) {
  var template = HtmlService.createTemplateFromFile('xxx')
  return  template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .addMetaTag('viewport', 'width=device-width , initial-scale=1')
}


function getCode(code) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var allss =ss.getSheets();
for (var i in allss){
  var ws =ss.getSheets()[i];
  var data=ws.getDataRange().getDisplayValues().filter(row=>{
    return row[0]==code
    })
    Logger.log(data)
  if(data.length>0) break;
}

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>
        <td><center><a target="_blank" href="${r[5]}" class="p-2 mb-2 bg-success text-white"><i class="fas fa-user-tie"></i> รอเรียกตัว</a></center>
        </td>
         </td>
         </tr>
        </tbody>
        </table>
        `];
});

var position = stdCodesList.indexOf(code);
if(position > -1){
return stdList[position];
} else {
return '*ไม่พบข้อมูล';

  }

}

function getURL(){
return ScriptApp.getService().getUrl()
}

## 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-danger">
        <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>
 <center> <input type="button" class = "btn btn-success btn-lg" id="home-btn" value = "กลับหน้าหลัก" onclick ="Home()" ></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-danger">
                <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) {
  if(data == '*ไม่พบข้อมูล'){
    Swal.fire({
  position: 'center',
  icon: 'error',
  title: 'เสียใจด้วย..ไม่พบข้อมูลของคุณ',
  showConfirmButton: true,
  //timer: 1500
})
 document.getElementById("search").innerHTML = data;
 M.updateTexfields();
}else{
Swal.fire({
  position: 'center',
  icon: 'success',
  title: 'ยินดีด้วย..พบข้อมูลของคุณ',
  showConfirmButton: false,
  timer: 2000
})
 document.getElementById("home-btn").style.visibility="visible"
 document.getElementById("search").innerHTML = data;
 M.updateTexfields();

  }
}
window.onload = function(){document.getElementById("home-btn").style.visibility="hidden"}

function Home(){
google.script.run.withSuccessHandler(function(url){
window.open(url,'_top')
}).getURL()

}

</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></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/popper.js@1.16.0/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>
	function doGet(e) {
	var template = HtmlService.createTemplateFromFile('xxx')
	return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
	.addMetaTag('viewport', 'width=device-width , initial-scale=1')
	}


	function getCode(code) {
	var ss = SpreadsheetApp.getActiveSpreadsheet();
	var allss =ss.getSheets();
	for (var i in allss){
	var ws =ss.getSheets()[i];
	var data=ws.getDataRange().getDisplayValues().filter(row=>{
	return row[0]==code
	})
	Logger.log(data)
	if(data.length>0) break;
	}

	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>
	<td><center><a target="_blank" href="${r[5]}" class="p-2 mb-2 bg-success text-white"><i class="fas fa-user-tie"></i> รอเรียกตัว</a></center>
	</td>
	</td>
	</tr>
	</tbody>
	</table>
	`];
	});

	var position = stdCodesList.indexOf(code);
	if(position > -1){
	return stdList[position];
	} else {
	return '*ไม่พบข้อมูล';

	}

	}

	function getURL(){
	return ScriptApp.getService().getUrl()
	}
	<!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-danger">
	<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>
	<center> <input type="button" class = "btn btn-success btn-lg" id="home-btn" value = "กลับหน้าหลัก" onclick ="Home()" ></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-danger">
	<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) {
	if(data == '*ไม่พบข้อมูล'){
	Swal.fire({
	position: 'center',
	icon: 'error',
	title: 'เสียใจด้วย..ไม่พบข้อมูลของคุณ',
	showConfirmButton: true,
	//timer: 1500
	})
	document.getElementById("search").innerHTML = data;
	M.updateTexfields();
	}else{
	Swal.fire({
	position: 'center',
	icon: 'success',
	title: 'ยินดีด้วย..พบข้อมูลของคุณ',
	showConfirmButton: false,
	timer: 2000
	})
	document.getElementById("home-btn").style.visibility="visible"
	document.getElementById("search").innerHTML = data;
	M.updateTexfields();

	}
	}
	window.onload = function(){document.getElementById("home-btn").style.visibility="hidden"}

	function Home(){
	google.script.run.withSuccessHandler(function(url){
	window.open(url,'_top')
	}).getURL()

	}

	</script>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></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/popper.js@1.16.0/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>