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.

formupload1

 formupload2

formupload3

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”.

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

formupload5

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

formupload6

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

formupload7

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

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. formupload8

formupload9

formupload10

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

formupload11

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.

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

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

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 :

DeepinScreenshot20161117121219

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

formupload12-1

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

formupload13-1

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

formupload14

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

formupload15

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

formupload16

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

formupload17

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.

formupload18

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.