Skip to content

Instantly share code, notes, and snippets.

@apivat60

apivat60/โค้ด web app แจ้งผลการเรียน(อัปเดท) 19 พ.ย.2563

Last active November 19, 2020 16:00
Show Gist options
  • Save apivat60/4f2979e16481f50db28443987752e51f to your computer and use it in GitHub Desktop.
Save apivat60/4f2979e16481f50db28443987752e51f to your computer and use it in GitHub Desktop.
Download ZIP
โค้ดแจ้งผลการเรียนออนไลน์ 18 พ.ย.2563
Raw
โค้ด web app แจ้งผลการเรียน(อัปเดท) 19 พ.ย.2563
-----code.gs-----------
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('index');
htmlOutput.search='';
//return htmlOutput.evaluate();
return render('index');
}
function doPost(e) {
var search =e.parameter.search;
var htmlOutput = HtmlService.createTemplateFromFile('index');
htmlOutput.search= search;
return htmlOutput.evaluate();
}
function getSheetData() {
var ss= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName('แผ่น1');
var dataRange = dataSheet.getDataRange();
var dataValues = dataRange.getDisplayValues();
return dataValues;
}
function getUrl(){
var url =ScriptApp.getService().getUrl();
return url;
Logger.log(url)
}
--------html-----------------
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prompt">
<style>
body {
font-family: "Prompt";
font-size: 16px;
}
th,
td {
text-align: center
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<title>ระบบแจ้งผลการเรียนออนไลน</title>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
<span class="navbar-brand mb-0 h1">📣 ระบบแจ้งผลการเรียนออนไลน์<br>โรงเรียนอภิวัฒน์สอนสร้างสื่อวิทยาคม</span>
<img src="https://drive.google.com/uc?export=view&id=1EO76CV-NG739BDlxh8KaTx1exFkXzLfH" width="60" height="60" alt="" loading="lazy">
</nav>
<div class="container-fluid" align="center">
<?var url = getUrl();?>
<div>
<label>พิมพ์รหัสนักเรียน 🔍</label><br>
<input type="text" name="search" id="search" value="" />
<button id="searchButton">Search</button>
</div><br>
<div id="resultdiv">
<table class="table teble-hover" id="tableId" border="1" cellpadding="5px"></table>
<div style="margin: 30px;">
<a href="" id="url">ดาวน์โหลดไฟล์</a>
</div>
</div>
<h6>💡 พัฒนาระบบโดย นายอภิวัฒน์ วงศ์กัณหา <br>หากพบปัญหา แจ้งมาได้ที่ 📞 089-1234567</h6>
</div>
<script>
var tableData = []
var tableHeaders = ['ลำดับ', 'ชื่อวิชา', 'ผลการเรียน']
window.onload = () => {
$('#resultdiv').hide()
google.script.run.withSuccessHandler(createTable).getSheetData()
}
$('#searchButton').click(() => {
$('#resultdiv').show()
$('#tableId tr').remove()
let table = document.getElementById(" tableId")
let search = $("#search").val()
if (search == "") { $('#resultdiv').hide() } $('table').append(`<tr class="table-info" id="nameCell">
</tr>`)
//สร้าง headers ให้ตาราง
$('table').append(`<tr class="table-info" id="tableHeaders"></tr>`)
tableHeaders.forEach(header => {
$('#tableHeaders').append(`<th>${header}</th>`)
})
let gpa = 0
let rowArray = tableData.find(row => row[0].toString().toLowerCase() == search.toLowerCase())
if (rowArray != null) {
$('#resultdiv').show()
$('#nameCell').append(`<td colspan="3" style="font-size:25px"> ผลการเรียนของ ${rowArray[1]}</td>`)
$('#url').attr('href', rowArray[rowArray.length - 1])
rowArray.forEach((col, j) => {
if (tableData[0][j] == 'เกรดเฉลี่ย') gpa = col
if (j > 1 && j < rowArray.length - 3) {
$('table').append(`<tr id="TR${tableData[0][j]}">
</tr>`)
$('#TR' + tableData[0][j]).append(`<td style="width:5%">${j - 1}</td>`)
$('#TR' + tableData[0][j]).append(`<td>${tableData[0][j]}</td>`)
$('#TR' + tableData[0][j]).append(`<td style="width:15%">${col}</td>`)
}
})
$('table').append(`<tr>
<td></td>
<td>เกรดเฉลี่ย</td>
<td>${gpa}</td>
</tr>`)
} else {
alert('กรุณากรอกรหัสนักเรียนที่ถูกต้อง')
$('#resultdiv').hide()
}
})
function createTable(data) {
tableData = data
}
document.getElementById('search').addEventListener("keyup", function (event) {
// Number 13 is the "Enter" key on the keyboard
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
document.getElementById("searchButton").click();
}
});
</script>
</body>
</html>
-------render------------
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function render(file, argsObject){
var tmp = HtmlService.createTemplateFromFile(file);
if(argsObject) {
var keys = Object.keys (argsObject);
keys.forEach(function(key){
tmp[key] = argsObject[key];
});
}
return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode. ALLOWALL);
}
//// iframe//////
<!DOCTYPE html>
<html>
<body style="display:flex;position:relative;margin:0; justify-content: center;">
<div align="center">
<iframe src="url webapp" width = "600px" height = "1000px" style="border:none;" title="ระบบแจ้งเกรดออนไลน์"></iframe>
<div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment