Skip to content

Instantly share code, notes, and snippets.

@apivat60

apivat60/โค้ดล่าสุด เว็บแอปแจ้งเกรด 20 พย 63

Last active November 1, 2022 05:21
Show Gist options
  • Save apivat60/81a00183e5a06c641c69d16c86919ac8 to your computer and use it in GitHub Desktop.
Save apivat60/81a00183e5a06c641c69d16c86919ac8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
โค้ดล่าสุด เว็บแอปแจ้งเกรด 20 พย 63
---พัฒนาโค้ดโดย อภิวัฒน์ วงศ์กัณหา เวอร์ชั่นอัปเดทล่าสุด สมบูรณ์แบบที่สุด ^_^
--ขอขอบคุณ อ.ดรัณภพ ที่ช่วยปรับโค้ด index.html ให้ได้ออกมาตามที่ต้องการ
------CODE.GS------------
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('index');
htmlOutput.search='';
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">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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=1PO_CTljdmsnvVnbcWnquVsfu-vSlh-yx" 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">ค้นหา</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-warning" id="nameCell"> </tr>`)
$('table').append(`<tr id="image"> </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()
$('#image').append(`<td colspan="3" style="font-size:25px">
<img src="https://drive.google.com/uc?export=view&id=${rowArray[12]}" width="60" height="60"></td>`)
$('#nameCell').append(`<td colspan="3" style="font-size:25px"> ผลการเรียนของ : ${rowArray[1]}</td>`)
$('#url').attr('href', rowArray[rowArray.length - 2])
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>
-----------SCRIPT----------
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 = "700px" 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