Membuat Upload Tugas Menggunakan Script Google Drive

Proses pembelajaran yang dilaksanakan guru / dosen seringkali memberi tugas kepada mahasiswa/siswa dan hasilnya dikirim melalui email atau Whatsapp ataupun medi lainnya. Sebenarnya hal ini sudah biasa dilakukan oleh semua orang, dimana ujung-ujungnya guru/dosen tersebut harus mengunduh satu persatu file yang dikirimkan oleh mahasiswa/siswa. Jika mahasiswa/siswa yang diampu jumlahnya tidak terlalu banyak mungkin tidak masalah, tapi jika jumlahnya banyak dan matakuliah atau matapelajaran yang berbeda-beda, ini akan menjadikan pekerjaan yang kurang efektif.

Kita sebagai pendidikan akan mengalami kesulitan melihat ini termasuk tugas apa punya siapa. Nah, dengan memanfaatkan aplikasi yang disediakan oleh Google Drive merupakan salah satu cara untuk memanajemen file tugas. Data dan file tugas yang dikirim oleh mahasiswa akan langsung masuk ke Google sheet dan drive lewat Form Upload seperti contoh tampilan dibawah ini.

Tampilan aplikasi upload tugas

FIle yang sudah diupload mahasiswa

FIle Excel/Spreadsheet sebagai tabel daftar upload

Dengan model manajemen file seperti ini kita akan lebih mudah melihat file yang sudah diupload oleh siswa atau mahasiswa. Karena dari file Excel atau Spreadsheet yang ada sudah menunjukkan link file, dan file tertata rapi dalam satu folder dalam google drive, beda dengan di email yang kita akan kebingungan mencari file. Selain itu file yang diupload lebih besar dari kapasitas file email yang hanya 25MB.

 Bagaimana caranya? Nah berikut adalah langkah-langkahnya :

1. Login dan masuk ke Google Drive dan buat folder baru, misal nama foldernya “Tugas Matakuliah blablabla”.

2. Masuk kedalam folder yang baru saja dibuat dan buatlah file sheet baru, misal nama filenya “Upload Tugas”

3. Buka kembali file sheet yang baru saja dibuat lalu buat Header sesuai kolom yang akan kita isikan

pastikan kolom pertama (A) berisi waktu atau timestamp, yaitu untuk isian otomatis upload

4. Kemudian pilih file menu Tool > Script editor

5. Nama Project Script bisa diubah atau default juga tidak masalah

6. Ubah isi script code.gs atau kode.gs seperti dibawah ini:

var SPREADSHEET_FILE_ID = '1tDPX_GW8g62EF7FrfzgsgiqLAeyBUfyL9U';
var SHEET_NAME_TO_WRITE_DATA_TO = "Sheet1";
var folderId = "1mjMXkldNRr8X1gt_TDLpEzY_W";
var ADD_TIMESTAMP = true;
var ADD_IMAGE_URLS_TO_SHEET = true;function doGet() {
var template = HtmlService.createTemplateFromFile('index');return template.evaluate()
.setTitle('Upload Tugas Mahasiswa')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
};

untuk file ID silakan ganti dengan file ID Anda yang ada di file seperti gambar di bawah ini

untuk folder ID silakan ganti dengan folder ID Anda yang ada di file seperti gambar di bawah ini

untuk nama sheet (Sheet1) sesuaikan dengan nama sheet yang kita gunakan layaknya sheet dalam file excel pada umumnya

7. Buat file Html baru melalui menu File > New > Html file. Beri nama “CSS_Generic.html” dan ubah isi scriptnya seperti dibawah ini:

<style>
.spinner {position: absolute;left:42%;top=35%;}
</style>

8. Buat file Html baru melalui menu File > New > Html file. Beri nama “CSS_Main_Form.html” dan ubah isi scriptnya seperti dibawah ini:

<style type="text/css">

#msgToUsr {
position: absolute;
left: 30%;
width: 40%;
background-color: white;
border: 2px solid red;
text-align: center;
display:none;
}

#titleOfForm {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 6px;
width:488px;
height:40px;
border: solid 1px lightgray;
border-radius: 5px;
background: #73AD21;
padding: 12px;
text-align:center;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
width:500px;
height:170px;
}

form {
width:450px;
padding:30px;
margin: auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}

h2 {
width:450px;
padding:30px;
margin: auto;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 10px;
background: #FF8500;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}

h1 > span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}

label {
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}

input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}

section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}

section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}

input[type="button"],
input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
input[type="button"]:hover,
input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}

</style>

9. Buat file google script baru melalui menu File > New > Script file. Beri nama “GS_Process_Data.gs” dan ubah isi scriptnya seperti dibawah ini:

function processForm(theForm) {
var allTheData,doc,fileBlob,folder,sheet,targetRange,template;
var npm,name,handphone,email,mkkelas,jenis;
var fileUrl;
var arrayOfNamesToWriteToSS,i,L,outerArray,innerArray,thisKey,TS;
//Logger.log(theForm);

arrayOfNamesToWriteToSS = ['nim','nama','jenis'];
L = arrayOfNamesToWriteToSS.length;

fileBlob = theForm.myFile1;


Logger.log(fileBlob)


if (folderId) {
folder = DriveApp.getFolderById(folderId);
} else {
folder = DriveApp.getRootFolder();
};

if (fileBlob.name) {doc = folder.createFile(fileBlob); fileUrl = doc.getUrl();};

template = HtmlService.createHtmlOutputFromFile('HTML_Feedback').getContent();

allTheData = "";
innerArray = [];

if (ADD_TIMESTAMP) {
TS = new Date();
innerArray.push(TS);
};

for (i=0;i<L;i+=1) {
thisKey = arrayOfNamesToWriteToSS[i];
allTheData = allTheData + theForm[thisKey] + " <br>";
innerArray.push(theForm[thisKey]);
};

outerArray = [];
outerArray.push(innerArray);

//Logger.log('theForm.name: ' + theForm.name);
template = template.replace('11111_PutTheDataHere_22222',allTheData);

if (ADD_IMAGE_URLS_TO_SHEET) {
if (fileUrl) innerArray.push(fileUrl);

};

if (!SPREADSHEET_FILE_ID) {return ['err','No Spreadsheet ID',template]};

sheet = SpreadsheetApp.openById(SPREADSHEET_FILE_ID).getSheetByName(SHEET_NAME_TO_WRITE_DATA_TO);
sheet.appendRow(innerArray);

return template;
}

untuk yang diwarna merah disesuaikan dengan kebutuhan kita

10. Buat file Html dengan nama “HTML_Body.html” dan ganti isi scriptnya seperti dibawah ini :

<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<!-- <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU/AMS///9k="> -->

<div id="msgToUsr"></div>

<form id="myForm">
<h1>Form Unggah Tugas Mahasiswa Matakuliah Teknologi Pembelajaran Fisika<span>Isi semua data dengan benar.</span></h1>

Nomor Induk Mahasiswa : <input type="text" name="nim" onchange="clearIt(this)" placeholder="Tulis NIM"/><br/>
Nama Mahasiswa : <input type="text" name="nama" onchange="clearIt(this)" placeholder="Tulis Nama Lengkap Mahasiswa"/><br/>

Jenis Tugas : <select name="jenis" onchange="clearIt(this)">
<option>Individu ke-1</option>
<option>Individu ke-2</option>
<option>Individu ke-3</option>
<option>Individu ke-4</option>
<option>Individu ke-5</option>
<option>Kelompok ke-1</option>
<option>Kelompok ke-2</option>
</select><br/>


Upload SK/Piagam/Sertifikat (pdf/docx/xlsx/jpg/dll) : <input type="file" name="myFile1" onchange="clearIt(this)"/><br/>

<input type="button" value="Kirim" onmouseup="submitForm(this.parentNode)" /><br/>
</form>

</div>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Proses upload. Mohon ditunggu sebentar dengan sabar :)...
</div>

<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>

Judul form (warna merah dapat disesuaikan dengan kebutuhan

11. Buat file html dengan nama “HTML_Feedback.html” dan ganti isi scriptnya seperti dibawah ini :

<div>
<h2>.:: Unggahan Data Berhasil ::.<br><br/>Terima kasih telah unggah data Tugas.</h2>
<br><br/>Ttd. <br/>Dosen Pengampu Matakuliah <br/><b>(HM Rohmadi)</b>
</div>

12. Buat file html dengan nama “JS_Library.html” dan ganti isi scriptnya seperti dibawah ini :

<script>
window.AlanWells_shwSpnr = function(a,b) {
//console.log('a: ' + a)
AlanWells_displayinline(a);
var daSpinHtml = '<div><img src="http://www.fairfieldelections.com/images/load_fancy.gif" alt="Smiley face" height="42" width="42"></div>';
AlanWells_inHtml(a,daSpinHtml);
};

window.AlanWells_hideSpnr = function(a,b) {
AlanWells_inHtml(a,"");//If spinner was displayed, make sure it gets turned off
AlanWells_hide(a);
};

window.AlanWells_displayinline = function(a) {
document.getElementById(a).style.display = "inline";
};

window.AlanWells_inHtml = function(a,b) {
document.getElementById(a).innerHTML = b;
};

window.AlanWells_hide = function(a) {
document.getElementById(a).style.display = "none";
};
</script>

13. Buat file html dengan nama “JS_Main_Form.html” dan ganti isi scriptnya seperti dibawah ini :

<script>
window.clearIt = function(thisEl) {
document.getElementById('msgToUsr').style.display = 'none';
thisEl.style.backgroundColor = "";
};

window.submitForm = function(myForm) {
var key,value,requiredList=[],nameName,thisEl,errElmt,inputType,die;
die = false;

requiredList = ['npm','name','myFile1'];//This is a list of the names of questions that must be filled out

for (key in myForm) {
/*console.log('key: ' + key);
console.log('value: ' + myForm[key]);

console.log('value: ' + myForm[key].value);
console.log(myForm[key].value === "");
*/
thisEl = myForm[key];
if (thisEl===null) continue;

nameName = thisEl.name;
if (requiredList.indexOf(nameName) === -1) {continue;};//If the name is not in the required list

value = thisEl.value;
inputType = thisEl.type;


/*console.log('inputType: ' + inputType);
console.log('value: ' + value);
console.log('name: ' + nameName);

console.log(value === "");
*/
if (value === "") {
//console.log('inside if block')
//console.log(requiredList.indexOf(nameName) === -1);

if (requiredList.indexOf(nameName) === -1) {continue;};//If the name is not in the required list
die = true;
//then it's not required, keep on checking other entries
toggle_visibility('inProgress');
toggle_visibility('formDiv');

thisEl.style.backgroundColor = "red";//Turn the background red
thisEl.focus();//Move focus to the element with missing data
window.scrollTo(0,0);//Scroll to the top
errElmt = document.getElementById('msgToUsr');
errElmt.textContent = "Semua data harus diisi lengkap! klik pesan ini untuk menutup";
errElmt.style.display = 'inline-block';
errElmt.style.top = "45%";
errElmt.addEventListener("click", function(){
this.style.display = "none";});
};
};

//console.log('right before google.script.run');
//console.log(die);

if (die) return;

toggle_visibility('formDiv');
toggle_visibility('inProgress');
AlanWells_shwSpnr('idSpnr');

google.script.run
.withSuccessHandler(updateOutput)
.processForm(myForm)

};

// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(dataReturned) {
var html,outputDiv;

console.log('dataReturned: ' + dataReturned);
console.log('typeof dataReturned: ' + typeof dataReturned);

if (typeof dataReturned === 'object') {
html = "<div>Data was not saved to spreadsheet</div><div>No Spreadsheet ID is set</div>" + dataReturned[2];
} else {
html = dataReturned;
};
toggle_visibility('inProgress');
outputDiv = document.getElementById('output');
outputDiv.innerHTML = html;
AlanWells_hideSpnr('idSpnr');
}

// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e;
//console.log('toggle_visibility ran' + id);

e = document.getElementById(id);
if(e.style.display !== 'none')//Modified this line
e.style.display = 'none';
else
e.style.display = 'block';
}

/* I modified the code for the function named toggle_visibility

if(e.style.display !== 'none')//Modified this line

Was:

if(e.style.display === 'block')
The style could be many different settings. If it's inline for example, then that would break the code.
But if it's !== "none", then if it's anything but none, then it's obviously being displayed.
*/
</script>

14. Buat file html dengan nama “index.html” dan ganti isi scriptnya seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<!-- Use a templated HTML printing scriptlet to import stylesheet -->
<?!= HtmlService.createHtmlOutputFromFile('CSS_Main_Form').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('CSS_Generic').getContent(); ?>
</head>
<body>
<?!= HtmlService.createHtmlOutputFromFile('HTML_Body').getContent(); ?>
</body>

<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('JS_Main_Form').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('JS_Library').getContent(); ?>

<div id="idSpnr" class="spinner"></div>
</html>

15. Silakan Pilih File->Save All atau File–>Simpan Semua. Maka tampilan akhir penambahan script seperti dibawah ini :

14. Kemudian klik file menu Publikasikan-> Terapkan sebagai Aplikasi Web, akan tampil seperti dibawah ini:

15. Isikan sesuai keterangan di gambar di bawah, lalu pilih Deploy.

16. berikutnya muncul link upload tugas:

17. Silakan dicoba, jika diperlukan hak akses menulis file silakan ijinkan agar daapt upload tugas.

18. Untuk memperpendek link dapat menggunakan http://s.id atau http://gg.gg atau htp://bit.ly dan lainnya

19. Selamat form upload tugas sudah bisa digunakan

20. Catatan: untuk memperoleh space google drive unlimited gunakan GSuite for Education menggunakan domain sekolah/Perguruan Tinggi Anda.

Follow

Share on Tumblr