โค้ดรับสมัครนักเรียนด้วย Web App มี 3 ส่วน คือ Code.gs , html , javascript
Code.gs
-----------------------------------------------------
function doGet(request) {
return HtmlService.createTemplateFromFile('ชื่อไฟล์ html')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function processForm(formObject) {
var url = "url ของ Google Sheet";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("ชื่อชีต");
var msg = 'นักเรียนสมัครเรียนชื่อ :';
msg += ' \n' + formObject.first_name+" "+formObject.last_name;
ws.appendRow([formObject.first_name,
formObject.last_name,
formObject.iduser,
formObject.gender,
formObject.dateOfBirth,
formObject.phone,
formObject.address,
formObject.nickname,
formObject.class,
formObject.plan,
new Date(),
formObject.email
]);
sendLineNotify(msg);
MailApp.sendEmail("apivat@hoksib.ac.th","สมัครเข้าเรียน","มีคนสมัครเข้าเรียนแล้ว 1 คน");
MailApp.sendEmail(formObject.email, "การสมัครเข้าเรียน", "นักเรียนชื่อ " + formObject.first_name+" "+formObject.last_name+" สมัครเข้าเรียนระดับชั้น"+formObject.class+"ทางโรงเรียนได้รับข้อมูลการสมัครเข้าเรียนเรียบร้อยแล้ว");
}
function sendLineNotify(message) {
var token = "โทเคนของไลน์";
var options = {
"method": "post",
"payload": "message=" + message,
"headers": {
"Authorization": "Bearer " + token
}
};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
/////สร้างไฟล์ pdf
function runPDFs() {
const docFile = DriveApp.getFileById("ไอดีของ doc");
const tempFolder = DriveApp.getFolderById("ไอดีของโฟลเดอร์ temp");
const pdfFolder = DriveApp.getFolderById("ไอดีของโฟลเดอร์ pdf");
const currentSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("ชื่อชีต");
const data = currentSheet.getRange(2, 1, currentSheet.getLastRow()-1,currentSheet.getLastColumn()).getDisplayValues();
data.forEach(row => {
createPDF (
row[0],
row[1],
row[2],
row[3],
row[4],
row[5],
row[6],
row[7],
row[8],
row[9],
row[10],
row[0]+" "+row[1],
docFile,
tempFolder,
pdfFolder);
});
}
function createPDF (
Data0,
Data1,
Data2,
Data3,
Data4,
Data5,
Data6,
Data7,
Data8,
Data9,
Data10,
pdfName,
docFile,
tempFolder,
pdfFolder
) {
const tempFile = docFile.makeCopy(tempFolder);
const tempDocFile = DocumentApp.openById(tempFile.getId());
const body = tempDocFile.getBody();
body.replaceText("{ชื่อ}", Data0);
body.replaceText("{สกุล}", Data1);
body.replaceText("{เลขบัตรประชาชน}", Data2);
body.replaceText("{เพศ}", Data3);
body.replaceText("{วันเกิด}", Data4);
body.replaceText("{เบอร์โทร}", Data5);
body.replaceText("{ที่อยู่}", Data6);
body.replaceText("{ชื่อเล่น}", Data7);
body.replaceText("{ระดับชั้น}", Data8);
body.replaceText("{แผนการเรียน}", Data9);
body.replaceText("{วันที่สมัคร}", Data10);
tempDocFile.saveAndClose();
const pdfContentBlob = tempFile.getAs(MimeType.PDF);
pdfFolder.createFile(pdfContentBlob).setName(pdfName);
tempFolder.removeFile(tempFile);
}
------------------------------------------
Index.html
------------------------------------------
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Prompt' rel='stylesheet' type='text/css'>
<style type='text/css'>
@font-face {
font-family: 'Prompt';
}body { font-family: 'Prompt' !important; }
::placeholder {
color: peachpuff;
font-size: 14px;
text-align: left;
}
</style>
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<img src="url ของรูปภาพหัวเว็บ รร" width="100%" class="img-fluid" alt="Responsive image">
<div class="alert alert-primary" role="alert"><center>
<B><font size=4>ระบบการรับสมัครนักเรียน ประจำปีการศึกษา 2563</font></B>
</center></div>
<div class="alert alert-success" role="alert">
<h6 class="font-weight-bold">
คำแนะนำในการกรอกข้อมูลสมัครเข้าเรียน</h6>
<p>1. ให้นักเรียนกรอกข้อมูลที่เป็นจริงและถูกต้อง และตรวจสอบข้อมูลให้เรียบร้อยก่อนกดปุ่มบันทึก
<br>2. หากสงสัยหรือมีปัญหาในการสมัคร ให้สอบถามข้อมูลเพิ่มเติมได้ที่..โทร 089-xxxxxxx </p>
</div>
<!-- ชื่อ สกุล -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">ชื่อ</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="ชื่อ">
</div>
<div class="form-group col-md-6">
<label for="last_name">สกุล</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="สกุล">
</div>
</div>
<!-- เลขประชาชน -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="iduser">เลขประชาชน</label>
<input type="text" class="form-control" maxlength="13" id="iduser" name="iduser" placeholder="เลขประชาชน">
</div>
<div class="form-group col-md-6">
<label for="email">อีเมล</label>
<input type="text" class="form-control" id="email" name="email" placeholder="อีเมล">
</div>
</div>
<!-- เพศ -->
<div class="form-row">
<div class="form-group col-md-6">
<p>เพศ</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="ชาย">
<label class="form-check-label" for="male">ชาย</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="หญิง">
<label class="form-check-label" for="female">หญิง</label>
</div>
</div></div>
<!-- วันเกิด -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="dateOfBirth">วันเกิด</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
</div>
<!-- เบอร์โทร -->
<div class="form-group col-md-6">
<label for="phone">เบอร์โทร</label>
<input type="tel" class="form-control" id="phone" maxlength="10" name="phone" placeholder="088-888xxxx">
</div>
</div>
<!-- ที่อยู่ -->
<div class="form-row">
<label for="address">ที่อยู่</label>
<input type="text" class="form-control" id="address" name="address" placeholder="ที่อยู่">
</div>
<!-- ชื่อเล่น -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="nickname">ชื่อเล่น</label>
<input type="text" class="form-control" id="nickname" name="nickname" placeholder="ชื่อเล่น">
</div>
</div>
<!-- ระดับชั้น -->
<div class="form-row">
<div class="form-group ">
<p>ระดับชั้นที่สมัคร</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="class" id="class" value="มัธยมศึกษาปีที่ 1">
<label class="form-check-label" for="class1">มัธยมศึกษาปีที่ 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="class" id="class" value="มัธยมศึกษาปีที่ 4">
<label class="form-check-label" for="class4">มัธยมศึกษาปีที่ 4</label>
</div>
</div>
</div>
<!-- แผนการเรียน -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="planselect">แผนการเรียน</label>
<select id="planselect" class="form-control" name = "plan">
<option selected>เลือกแผนการเรียน</option>
<option>แผนการเรียนที่ 1</option>
<option>แผนการเรียนที่ 2</option>
<option>แผนการเรียนที่ 3</option>
</select>
</div>
</div>
<!-- ปุ่มบันทึกข้อมูล -->
<br>
<button type="submit" class="btn btn-primary btn-block">บันทึกข้อมูล</button><br>
</form>
<div class="alert alert-primary" role="alert"><center>
<font size=3>จัดทำโดย</font><br>
<font size=3>นายอภิวัฒน์ วงศ์กัณหา ครู ชำนาญการพิเศษ</font>
</center></div>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
----------------------------------------------
JavaScript.html
---------------------------------------------
<script>
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);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
*******************
******************
/* สร้างเมนู pdf ใน Google Sheet */ function onOpen() { var ui = SpreadsheetApp.getUi(); ui.createMenu('PDF') .addItem('สร้างไฟล์ PDF','run_pdf') .addToUi(); } function run_pdf() { runPDFs(); } /* สร้างไฟล์ pdf */ function runPDFs() { const docFile = DriveApp.getFileById("id doc"); const tempFolder = DriveApp.getFolderById("id temp"); const pdfFolder = DriveApp.getFolderById("id pdf"); const currentSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("แผ่น1"); //ชื่อชีต var patternData=["{วันที่สมัคร}","{ชื่อ สกุล}","{ชื่อเล่น}","{อีเมล}","{เบอร์โทรศัพท์}","{เพศ}","{อายุ}", "{กรุ๊ปเลือด}","{รูปภาพ}","{idรูปภาพ}"]; /* กำหนดช่วงข้อมูลที่จะนำไปสร้างไฟล์ pdf */ const data = currentSheet.getRange(2, 1, currentSheet.getLastRow()-1,currentSheet.getLastColumn()).getDisplayValues(); data.forEach(row => {createPDF(row, patternData,row[1],docFile, tempFolder, pdfFolder)}); } /* กำหนดค่าที่จะนำมาสร้างไฟล์ pdf */ function createPDF ( data, pattern, pdfName, docFile, tempFolder, pdfFolder) { const tempFile = docFile.makeCopy(tempFolder); const tempDocFile = DocumentApp.openById(tempFile.getId()); const body = tempDocFile.getBody(); var replaceTextToImage = function( body,searchText, image, width) { var next = body.findText(searchText); if (!next) return; var r = next.getElement(); r.asText().setText(""); var img = r.getParent().asParagraph().insertInlineImage(0, image); if (width && typeof width == "number") { var w = img.getWidth(); var h = img.getHeight(); img.setWidth(width); img.setHeight(width * h / w); } return next; }; for (var i=0;i<data.length-1;i++){ body.replaceText(pattern[i], data[i]); Logger.log(pattern[i]+" : "+data[i]); } var replaceText = pattern[data.length-1]; //ชื่อข้อความใน doc ที่ต้องการจะเปลี่ยนเป็นรูป var imageFileId = data[data.length-1]; //id ในdrive ตรวจสอบลำดับ คอลัมภ์รูปภาพให้ดีก่อน var image = DriveApp.getFileById(imageFileId).getBlob(); next = replaceTextToImage(body, replaceText, image, 100); tempDocFile.saveAndClose(); const pdfContentBlob = tempFile.getAs(MimeType.PDF); pdfFolder.createFile(pdfContentBlob).setName(pdfName); tempFolder.removeFile(tempFile); }
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น