เว็บแอป+ฟอร์ม html+Script+pdf


โค้ดรับสมัครนักเรียนด้วย 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);
}
 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น