untung99.homes: Membuat Form Upload Tugas Menggunakan Google Drive Sheet

Dalam proses pembelajaran di kampus seringkali dosen memberi tugas kepada mahasiswa dan hasilnya dikirim melalui email, kemudian dosen mengunduh file tugas tersebut satu persatu. Jika mahasiswa yang diampu jumlahnya tidak terlalu banyak mungkin tidak masalah, tapi jika jumlahnya sampai ratusan akan jadi pekerjaan yang kurang efektif. Memanfaatkan aplikasi yang disediakan oleh Google Drive dan Sheet merupakan salah satu cara untuk memanajemen file tugas dari mahasiswa. Data dan file tugas yang dikirim oleh mahasiswa akan langsung masuk ke Google sheet dan drive lewat Form Upload seperti contoh tampilan dibawah ini.

Denga cara diatas akan lebih mudah memanajemen file tugas dan identitas mahasiswa yang sudah mengumpulkan atau telat melebihi waktu yang ditentukan dosen pengampu.

Berikut adalah langkah-langkah pembuatannya :

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

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

3. Buka kembali file sheet yang baru saja dibuat dan pilih file menu Tool > Script editor…

4. Akan tampil halaman “Untitled project”, sekalian anda rubah nama projectnya, misal “Upload Tugas Kuliah”.

5. Ubah isi script code.gs seperti dibawah ini.

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

Dari script diatas, ganti “xxx” pada var SPREADSHEET_FILE_ID dan var folderId dengan id file sheet dan folder drive yang anda buat sebelumnya. Untuk mengetahui id file sheet dan folder drive dengan melihat URL pada browser addres, seperti tampilan dibawah ini. 

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

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

8. Buat file google script baru melalui menu File > New > Script file. Beri nama “GS_Process_Data” 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 = ['npm','name','handphone','email','mkkelas','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";
    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;
}
9. Buat file Html dengan nama “HTML_Body” dan ganti isi scriptnya seperti dibawah ini :




    NPM :
 
    Nama lengkap :

    No. Handphone :

    Email :

    Mata Kuliah / Kelas :


    Jenis file :


     Upload file (pdf/docx/xlsx/jpg/dll) :













Proses upload. Mohon ditunggu sebentar...



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

    
.:: Selesai ::.
 11111_PutTheDataHere_22222
Data anda sudah terkirim.

11. Buat file html dengan nama “JS_Library” dan ganti isi scripnya seperti dibawah ini :
12. Buat file html dengan nama “JS_Main_Form” dan ganti isi scriptnya seperti dibawah ini :
12. Buat file html dengan nama “index” dan ganti isi scriptnya seperti dibawah ini :
13. Tampilan akhir penambahan script seperti dibawah ini :

14. Kemudian klik file menu Resource > Developers Console Project…  akan tampil seperti dibawah ini. Klik nama projectnya, akan tampil halaman API. 15. Jika muncul tampilan “Update to Terms of Service” pilih yes dan Accept.

16. Ketik “Picker” dalam kotak pencarian dan klik “Google Picker API”

17. Pilih “Enable”, jika API sudah aktif, kembalilah ke halaman Project dan tutup window “Developer Console Project”.

18. Klik file menu Publish > Deploy as web app…

19. Isi project version misal “Versi 1”, atur hak akses menjadi “Anyone”, klik “Deploy”

20. Copy link address “Current web app URL”, klik ok. Buka url di tab browser yang baru.

21. Jika semua langkah dilakukan tanpa ada yang salah, maka akan tampil halaman “Form Upload Tugas” seperti contoh dibagian atas tutorial ini. Ujicobalah dengan mengisi semua data yang ada dan upload file dengan ekstensi apa saja, misal file Jpg, Pdf, docx, xlsx dll. Kemudian cek hasil file dan data yang masuk ke drive dan sheet.
22. Semua script atau kode dalam project bisa dimodif sesuai kebutuhan yang diinginkan. Setelah dilakukan perubahan pada script jangan lupa disave dan diupdate lewat file menu Publish > Deploy as web app, ganti versinya lalu update. Url aplikasi tetap sama tidak ada perubahan. Jika kita belum yakin dengan perubahan yang dibuat, bisa dilakukan testing terlebih dahulu sebelum diupdate dengan cara klik “Latest code” seperti tampilan dibawah ini.

23. Untuk lebih mudah diakses, Url addres Form Upload yang cukup panjang bisa diperpendek mengunakan http://s.id atau http://gg.gg
23. SELESAI. dan semoga bermanfaat.