Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active December 18, 2022 13:43
Show Gist options
  • Save neno-tech/1a9cb39190c62e3bdba76d383b2330ae to your computer and use it in GitHub Desktop.
Save neno-tech/1a9cb39190c62e3bdba76d383b2330ae to your computer and use it in GitHub Desktop.
Download ZIP
EP-1 Web App การสร้างฟอร์มพร้อมอัพโหลดไฟล์ส่งงาน แบบไม่ต้อง Login (อัพเดต 2021)
Raw
code.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('xxx');
}
function uploadFiles(form) {
try {
var dropbox = "HomeWork";
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('xxx')
sh.appendRow([new Date(), name, classroom, subject,num, 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" >
<div class="row g-3">
<div class="col-md-6">
<label >เลือกรายวิชาที่เรียน:</label>
<select name="mySubject">
<option value="เทคโนโลยี">เทคโนโลยี</option>
<option value="การสร้างเกม">การสร้างเกม</option>
<option value="การ์ตูนเอนิเมชั่น">การ์ตูนเอนิเมชั่น</option>
<option value="การตัดต่อภาพยนตร์">การตัดต่อภาพยนตร์</option>
</select>
</div>
</div>
<div class="col-md-3">
<label for="myName" class="form-label">ชื่อ-สกุล</label>
<input type="text" class="form-control" name="myName" id="myName" required>
</div>
<div class="col-md-2">
<label for="myClass" class="form-label">ระดับชั้น</label>
<input type="text" class="form-control" name="myClass" id="myClass" required>
</div>
<div class="col-md-1">
<label for="myNum" class="form-label">เลขที่</label>
<input type="text" class="form-control" name="myNum" id="myNum" required>
</div>
<label >เลือกไฟล์ส่งงาน:</label><input type="file" name="myFile">
<label >ส่งงาน:</label><input type="submit" class="btn btn-success btn-lg" value="<คลิกส่งงาน>"
onclick="this.value='กำลังอัพโหลดไฟล์...';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</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 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