Script Script Script Script Script SCR Ipt

Js

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.
js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-
sweetalert2/11.1.9/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></scr
ipt>


<script>
// Example starter JavaScript for disabling form submissions if there are invalid f
ields
function validasi(){
var itemDivalidasi = document.querySelectorAll('#form_surat keluar');
return Array.prototype.every.call(itemDivalidasi, function(item){
return item.checkValidity()
})
}
</script>


<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 kirimForm(itemIsian){

if(validasi()){
google.script.run.prosesForm(itemIsian);
document.getElementById("form_biodata").reset();
} //akhir if
}
</script>
<script>
const myForm = document.querySelector('form');
const myUpload = document.querySelector('input[name="upFile"]');
const message = document.querySelector('.message');
myForm.addEventListener('submit',(e)=>{
e.preventDefault();
message.textContent = 'Form Submitted';
const file = myUpload.files[0];
const fileR = new FileReader();
fileR.onload = function(e){
const vals = fileR.result.split(',');
const obj = {
fileName:file.name,
mimeType :file.type,
data : vals[1]
}
console.log(obj);
google.script.run.withSuccessHandler(myResult).adderFile(obj);
}
fileR.readAsDataURL(file);
})
function myResult(val){
message.innerHTML = `<a href="${val.url}" target="_blank">${val.name}</a>`;
}

</script>

Css
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/c
ss/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0-beta2/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-
sweetalert2/11.1.9/sweetalert2.min.css" />
Index
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body>
<div class="message"></div>

<div class="container-fluid">
<h3 class="mt-2 text-center">Form Surat Keluar</h3>


<form id="form_surat" name="form_surat" class="needs-validation" onsubmi
t="kirimForm(this)" action="<?= url ?>" autocomplete="off">

<div class="row g-3">
<div class="col">
<label for="pengolah" class="form-label">Pengolah</label>
<input type="text" class="form-control" name="pengolah">


</div>

<div class="col">
<label for="kode_surat" class="form-label">Kode Surat</label>
<select id="kode_surat" class="form-select" name="kode_surat">
<option selected>Pilih...</option>
<option>S</option>
<option>MO</option>
<option>ND</option>
</select>
</div>

</div>

<div class="col">
<label for="isi_ringkasan" class="form-label">Isi Ringkasan</label>
<input type="text" class="form-control" name="isi_ringkasan">


</div>


<div class="col">
<label for="dari" class="form-label">Dari</label>
<input type="text" class="form-control" name="dari">
</div>

</div>

<div class="col">
<label for="kepada" class="form-label">Kepada</label>
<input type="text" class="form-control" name="kepada">


</div>

<div class="col">
<label for="tanggal_surat" class="form-label">Tanggal Disurat</label>
<input type="date" class="form-control" name="tanggal_surat">
</div>


</div>

<div class="col">
<label for="sifat" class="form-label">Sifat</label>
<select id="sifat" class="form-select" name="sifat">
<option>Biasa</option>
<option>Rahasia</option>
<option>Segera</option>
</select>


</div>

<div class="col">
<label for="upFile" class="form-label">Lampiran</label>
<input type="file" class="form-control" name="upFile">
</div>

</div>

<div class="col">
<label for="bidang" class="form-label">Bidang</label>
<select id="bidang" class="form-select" name="bidang">
<option>Bid. I</option>
<option>Bid. II</option>
<option>Bid. III</option>
<option>TU</option>
</select>

</div>

<div class="col">
<label for="jumlah" class="form-label">Jumlah</label>
<input type="text" class="form-control" name="jumlah">
</div>

</div>


<button type="submit" class="btn btn-primary">Kirim Data</button>

</form>

</div>
<?!= include('js'); ?>
</body>
</html>
Kode.gs
let SS = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/1kIZsEkjkVw
B0MQLy5Ltg3hRz0WWj8bOXUp3WWw2mDb4/edit#gid=253309841');
let WsData = SS.getSheetByName('data')
function doGet(){
let template = HtmlService.createTemplateFromFile('index');
template.url = getURL();

let output = template.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setTitle('Form Surat Keluar');
return output;
}
// fungsi untuk menyisipkan file
function include(namaFile){
return HtmlService.createHtmlOutputFromFile(namaFile).getContent();
}
/**
* mengambil URL deploy
*/
function getURL(){
var url = ScriptApp.getService().getUrl();
return url;
}
// mengirim data ke spreadsheets
function prosesForm(item_isian){
WsData.appendRow([
new Date(),
item_isian.pengolah,
item_isian.kode_surat,
item_isian.isi_ringkasan,
item_isian.dari,
item_isian.kepada,
item_isian.tanggal_surat,
item_isian.sifat,
item_isian.bidang,
item_isian.jumlah
])
function adderFile(data){
const myFile = Utilities.newBlob(Utilities.base64Decode(data.data),data.mimeType,da
ta.fileName);
const id = '1y8X67_az8cb-D5jzF69yx3HoeD8tHDl5';
const sid = '1kIZsEkjkVwB0MQLy5Ltg3hRz0WWj8bOXUp3WWw2mDb4';
const folder = DriveApp.getFolderById(id);
const fileAdded = folder.createFile(myFile);
const ss = SpreadsheetApp.openById(sid ).getSheetByName('data');
ss.appendRow([fileAdded.getUrl()]);
const rep = {
'upFile' : fileAdded.getUrl()

};
return rep;
}

Script Script Script Script Script SCR Ipt

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Script Script Script Script Script SCR Ipt

Uploaded by

Copyright:

Available Formats

Js

You might also like