Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active February 28, 2025 08:49
Show Gist options
  • Save neno-tech/881ceaf5383a234519564052ef682c41 to your computer and use it in GitHub Desktop.
Save neno-tech/881ceaf5383a234519564052ef682c41 to your computer and use it in GitHub Desktop.
Download ZIP
ครูอภิวัฒน์ สอนสร้างสื่อ web app ระบบลงชื่อเข้าใช้
Raw
code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile("index").evaluate()
.setTitle("ระบบ Login")
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function processForm(formObject){
var concat = formObject.searchtext+formObject.searchtext2;
var result = "";
if(concat){
result = search(concat);
}
return result;
}
function search(searchtext){
var spreadsheetId = 'xxx';
var sheetName = "xxx"
var range = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName).getDataRange();
var data = range.getValues();
var ar = [];
data.forEach(function(f) {
if (~[f[x]].indexOf(searchtext)) {
ar.push([f[x],f[x],f[x],f[x]]);
}
});
return ar;
};
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;400&display=swap');
* {
font-family: 'Prompt', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="col">
<center>
<form id="search-form" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<h5 for="searchtext">ลงชื่อเข้าใช้งาน</h5>
</div>
<p>
<div class="form-group mx-sm-3 mb-3">
<input type="text" class="form-control col-sm-6" id="searchtext" name="searchtext" placeholder="ไอดีผู้ใช้" required><br>
<input type="password" class="form-control col-sm-6" id="searchtext2" name="searchtext2" placeholder="รหัสผ่าน" required>
</div>
<p>
<button type="submit" class="btn btn-primary mb-2">เข้าสู่ระบบ</button>
<span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
<span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
<span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
</form>
</center>
</div>
</div>
<div class="row">
<div class="col">
<div id="search-results" class="table-responsive">
<!-- The Data Table is inserted here by JavaScript -->
</div>
</div>
</div>
</div>
<script>
//PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener("load", preventFormSubmit, true);
//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
document.getElementById('resp-spinner5').classList.remove("d-none");
document.getElementById('resp-spinner6').classList.remove("d-none");
document.getElementById('resp-spinner7').classList.remove("d-none");
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("search-form").reset();
};
//CREATE THE DATA TABLE
function createTable(dataArray) {
document.getElementById('resp-spinner5').classList.add("d-none");
document.getElementById('resp-spinner6').classList.add("d-none");
document.getElementById('resp-spinner7').classList.add("d-none");
if(dataArray && dataArray !== undefined && dataArray.length != 0){
var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:1.0em'>"+
"<tr>"+
"<td>"+'ชื่อ สกุล'+"</td>"+
"<td>"+dataArray[0][0]+"</td>"+
"</tr>"+
"<tr>"+
"<td>"+'ลิ้งค์'+"</td>"+
"<td>"+'<a href="'+dataArray[0][1]+'" target="_blank">ดูคลิป</a>'+"</td>"+
"</tr>"+
"<tr>"+
"<td>"+'เบอร์โทร'+"</td>"+
"<td>"+dataArray[0][2]+"</td>"+
"</tr>"+
"<tr>"+
"<td>"+'อีเมล'+"</td>"+
"<td>"+dataArray[0][3]+"</td>"+
"</tr>"+
"</table>";
var div = document.getElementById('search-results');
div.innerHTML = result;
}else{
var div = document.getElementById('search-results');
div.innerHTML = "ไม่มีข้อมูลนี้ในระบบ!";
}
}
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment