Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active May 12, 2021 16:24
Show Gist options
  • Save neno-tech/a5b15066bd5a099b93fa8e2ffa3cf9fc to your computer and use it in GitHub Desktop.
Save neno-tech/a5b15066bd5a099b93fa8e2ffa3cf9fc to your computer and use it in GitHub Desktop.
Download ZIP
Ep-2 Webapp Responsive ระบบป้องกันการส่งฟอร์มค่าว่าง และส่งงานแยกโฟลเดอร์ เครดิต อ.ดรัณภพ
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 uploadFiles(form) {
try {
var dropbox = "xxx"
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var home = 'xxx'
var file = folder.createFile(form.myFile);
file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.COMMENT);
var url = file.getUrl()
var subject = form.mySubject
var name = form.myName
var classroom = form.myClass
var num = form.myNum
var ss = SpreadsheetApp.openById('xxx')
var sh = ss.getSheetByName('แผ่น1')
sh.appendRow([new Date(), name, classroom, num, subject,url])
return "คุณ.." + name + " ชั้น " + classroom+ " ส่งงานเรียบร้อยแล้ว <p><p><a href ='"+url+"' >คลิกดูงานที่ส่ง</a> <p><a href ='"+home+"' >กลับหน้าหลัก</a>"
} catch (error) {
return error.toString();
}
}
Raw
index.html
//เครดิต อ.ดรัณภพ ช่วยปรับโค้ดให้
<!DOCTYPE html>
<html lang="th">
<head>
<base target="_top">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Prompt' rel='stylesheet' type='text/css'>
<title>แบบฟอร์มส่งงานออนไลน์</title>
<style type='text/css'>
.prompt {
font-family: 'Prompt', sans-serif;
}
body {
font-family: 'Prompt' !important;
}
</style>
</head>
<body>
<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="90" height="90">แบบฟอร์มส่งงาน ห้องเรียนออนไลนครูอภิวัฒน์ วงศ์กัณหา </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>
<section>
<br>
<div class="container">
<div class="card text-black mb-12" style="max-width: 100rem; background-color: #ffed00">
<h2 class="card-header prompt">ขั้นตอนการส่งงานออนไลน์</h2>
<div class="card-body">
<p class="card-text mali">
<ul>
<li>เลือกรายวิชาที่เรียนให้ตรงกับที่นักเรียนกำลังศึกษาอยู่ในปัจจุบัน</li>
<li>กรอกชื่อ-นามสกุลนักเรียนให้สมบูรณ์ เช่น นายสมชาย เรียนดี</li>
<li>พิมพ์ระดับชั้นและห้องเรียนให้เรียบร้อย เช่น ม.4/3</li>
<li>เลือกไฟล์ที่นักเรียนจะอัพโหลดส่งงาน ควรลดขนาดภาพ กรณีที่ไฟล์มีขนาดใหญ่</li>
</ul>
</div>
</div>
</div>
</section>
<br>
<!-- กรอกข้อมูล -->
<div class="container">
<form id="myForm" class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6">
<label class="form-label">เลือกรายวิชาที่เรียน</label>
<select name="mySubject" class="form-select" required>
<option value="" disabled selected>เลือก..</option>
<option value="เทคโนโลยี">เทคโนโลยี</option>
<option value="การสร้างเกม">การสร้างเกม</option>
<option value="การ์ตูนเอนิเมชั่น">การ์ตูนเอนิเมชั่น</option>
<option value="การตัดต่อภาพยนตร์">การตัดต่อภาพยนตร์</option>
</select>
<div class="invalid-feedback">
กรุณาเลือก รายวิชา
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mt-2">
<label for="myName" class="form-label">ชื่อ-สกุล</label>
<input type="text" class="form-control" name="myName" id="myName" required>
<div class="invalid-feedback">
กรุณาใส่ ชื่อสกุล
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-md-2 mt-2">
<label for="myClass" class="form-label">ระดับชั้น</label>
<input type="text" class="form-control" name="myClass" id="myClass" required>
<div class="invalid-feedback">
กรุณาใส่ ระดับชั้น
</div>
</div>
<div class="col-6 col-md-1 mt-2">
<label for="myNum" class="form-label">เลขที่</label>
<input type="text" class="form-control" name="myNum" id="myNum" required>
<div class="invalid-feedback">
กรุณาใส่ เลขที่
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-2">
<label class="form-label">เลือกไฟล์ส่งงาน</label>
<input type="file" name="myFile" class="form-control" required>
<div class="invalid-feedback">
กรุณาอัพโหลดไฟล์งาน
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 mt-4">
<button type="submit" class="btn btn-success btn-lg" id="btn">คลิกส่งงาน</button>
</div>
</div>
</form>
<div id="output"></div>
<!-- Footer -->
<footer><br>
<div class="bg-primary">
<div class="container">
<br>
<div class="row">
<div class="clo-lg-3 col-md-6">
<h4 class="prompt text-white"><i class="fa fa-user-circle-o mr-3"></i> นายอภิวัฒน์ วงศ์กัณหา
</h4>
<h5 class="prompt text-white">โรงเรียนหกสิบพรรษาวิทยาคม อุบลราชธานี
</h5>
<h6 class="prompt text-white">สำนักงานเขตพื้นที่การศึกษามัธยมศึกษาอุบลราชธานี เขต 29</h6>
</div>
</div>
</div>
</div>
</footer>
<!-- ปิดแทก Footer -->
</div>
</body>
</html>
<script>
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}else{
formSubmit()
}
form.classList.add('was-validated')
}, false)
})
})()
let form = document.getElementById('myForm')
function formSubmit() {
event.preventDefault();
document.getElementById('btn').innerHTML = 'กำลังอัพโหลดไฟล์...';
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(form);
}
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
Swal.fire({
position: 'center',
icon: 'success',
title: 'อัพโหลดไฟล์เรียบร้อยแล้ว',
showConfirmButton: false,
timer: 2000
})
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment