Postingan

Menampilkan postingan dengan label Tutorial

Tutorial Upload File ke Google Drive dari Website

Oleh -
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...
Posting Komentar
Baca selengkapnya

Cek Broken Link pada File PDF dengan PyPDF2 dan Google Sheets

Oleh -
Gambar
Latar Belakang Kadang diperlukan juga, untuk mengecek hyperlink yang terdapat dalam dokumen PDF, apakah link-link tersebut valid, mengarah pada halaman yang tersedia atau tidak. Contohnya dokumen PDF akreditasi yang diupload dan akan dibaca oleh asesor. Dokumen seperti ini perlu dipastikan bahwa seluruh hyperlink-nya valid, sebab jika asesor mencoba dan menemukan invalid link, dapat berpotensi pada pengurangan nilai.  Disclaimer Penulis sebenarnya tidak suka Python, namun karena belum dapat membuat library PDF Reader sendiri, maka mohon maaf penulis tetap menggunkan PyPDF2, untuk mempercepat pekerjaan saja. Langkah Pertama-tama, letakkan file extract Hyperlink.py dan PDF yang akan di cek hyperlink-nya dalam satu folder. Dalam contoh posting ini, file PDF yang akan di cek bernama SURVEYLANCE_LED A-B_PSSI (1).pdf . Lalu tuliskan script Python di bawah ini, pada file extract Hyperlink.py. Kode extract Hyperlink.py import PyPDF2 import urllib.request as urllib2 PDFFile = open("SURV...
Posting Komentar
Baca selengkapnya

Membandingkan Kesamaan Text dengan Apps Script and Python

Oleh -
Gambar
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...
Posting Komentar
Baca selengkapnya

Contoh Countdown Timer untuk Halaman Web dengan Javascript

Oleh -
Gambar
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...
Posting Komentar
Baca selengkapnya

Memperoleh Data Terbaru dari Join Dua Tabel di MySQL

Oleh -
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...
Posting Komentar
Baca selengkapnya

Permintaan Penambahan Ad ID Permission dari Google Play

Oleh -
Gambar
Pada tanggal 15 Maret 2022, penulis mendapatkan email dari Google Play terkait permintaan penambahan Ad ID Permission pada setiap aplikasi penulis di Edugameapp, sebelum 1 April 2022. Penambahan permission ini penting, karena dapat mengakibatkan tidak akan tampilnya iklan dalam aplikasi. Yang juga berarti dapat berpotensi terjadinya pengurangan terhadap pendapatan, jika penulis sebagai developer mengabaikannya. <uses-permission android:name="com.google.android.gms.permission.AD_ID"/> Mulanya, penulis pikir perlu menambahkan kode di atas, pada masing-masing manifest setiap app. Dengan jumlah aplikasi yang telah lebih dari 50 buah, sehingga akan menjadi pekerjaan yang melelahkan sendiri, meski hanya menambahkan satu permission saja. Untungnya Google tidak sejahat itu. Dengan hanya melakukan upgrade SDK iklan terbaru, permission tersebut secara otomatis ditambahkan ke manifest, yang lebih detailnya dapat dilihat di bagian merge manifest.
Posting Komentar
Baca selengkapnya

Membuat Widget HTML untuk Polylang Wordpress

Oleh -
Gambar
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...
Posting Komentar
Baca selengkapnya

Menambahkan Custom Top Sidebar di Theme OceanWP

Oleh -
Gambar
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__( '...
Posting Komentar
Baca selengkapnya

Progress Loader Tengah Vertical dan Horizontal dengan CSS

Oleh -
Gambar
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...
Posting Komentar
Baca selengkapnya

Preview File Gambar sebelum di Upload dengan Javascript

Oleh -
Gambar
Seringkali, ketika akan mengupload file gambar, perlu dipastikan dahulu gambar yang akan diupload dalam bentuk preview. Dan teknologi HTML5 telah menambahkan kemampuan upload banyak file dengan hanya satu element input dengan tag type='file' dan multiple. Sangat mudah. Entah penulis yang ketinggalan informasi atau gimana, sebab penulis teringat jaman dahulu, perlu menambahkan satu persatu, sesuai jumlah file yang akan ditambahkan melalui appendChild, jika diperlukan upload banyak file pada form. Di bawah ini adalah kode preview image ketika input file berubah (onchange), dan gambar akan ditampilkan pada element dengan Id='imgpreview'. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <h1>The input multiple attribute</h1> <form action="/action_page.php" enctype="multipart/form-data">...
Posting Komentar
Baca selengkapnya

Contoh Circle Progressbar untuk Loading Website

Oleh -
Gambar
Dalam membuat sebuah website, adakalanya diperlukan untuk menambahkan progressbar berbentuk lingkaran (circle) yang berputar, untuk menandakan halaman website sedang dimuat. Meskipun sederhana, penambahan progressbar ini menurut penulis penting, karena akan memberikan perintah secara halus kepada pengunjung, untuk menunggu dan menandakan bahwa website kita sedang di proses. Sebab, penulis sendiri, lebih sering untuk pergi ke website lain, ketika website yang sedang penulis kunjungi serasa berhenti (stuck) tanpa adanya tanda progres. Berikut ini salah satu kode circle progressbar dengan CSS: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .boxloader{ position: fixed; top: 50%; right: 50%; text-align:center; } .loader { border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; width: 20px; height: 20px; -webkit-animation: spin 0.5s linear infinite;...
Posting Komentar
Baca selengkapnya

Aplikasi Java Mencari dan Merubah Kode dalam Banyak File

Oleh -
Gambar
Dalam membangun website dengan PHP dari nol, adakalanya diperlukan penggantian syntax yang sama dalam beberapa file. Misalnya untuk keperluan authentifikasi admin, yang semula menggunakan variable id harus sama dengan 1, karena pertimbangan keamanan, authentifikasinya harus diubah menjadi suatu kode tertentu yang disematkan dalam tiap halaman. Contohnya diganti dengan kode 'A2136578', sebagaimana Gambar di atas. Jika filenya cuma satu, mungkin tidak apa-apa dengan mengeditnya langsung, tidak butuh usaha yang tinggi. Namun jika jumlah file yang perlu diedit telah banyak, akan membutuhkan waktu dan kejelian editing yang lumayan memakan waktu. Salah satu solusinya adalah dengan membuat aplikasi dekstop, yang dapat dijalankan secara offline, untuk mencari kode yang lama dalam file, lalu mengganti (replace) ke kode yang baru. Pilihan penulis adalah membuat aplikasi dekstopnya menggunakan Java. Selain karena Java bersifat free, kode aplikasinya cukup singkat seperti ditunjukkan kode ...
Posting Komentar
Baca selengkapnya

Membuat Aplikasi OCR Android dengan Tesseract

Oleh -
Gambar
App OCR (Optical Character Recognition) sangat diminati oleh pengguna Android. Hal ini terlihat dari jumlah banyaknya pendownload yang terlihat app OCR di Play Store. Bisa saja karena banyak pengguna yang membutuhkan untuk mengubah gambar text ke text, seperti pengalaman penulis sewaktu bekerja sebagai penjaga Warnet, sekitar tahun 2009. Hampir tiap minggunya, seorang dosen Universitas Brawijaya Malang, datang dan meminta penulis untuk menulis ulang beberapa kalimat yang tertulis dalam buku. Tulisan tersebut beliau gunakan sebagai kutipan dalam modul ajar. Karena waktu itu teknologi OCR masih umumnya menggunakan mesin scanner, lama waktu yang digunakan untuk menyecan buku dengan mesin, masih lebih lambat dibanding waktu untuk menulisnya langsung ke komputer. Sehingga penulis lebih memilih untuk menuliskannya langsung ke komputer. Dan sekarang, dengan teknologi Tesseract dari Google, cukup dengan smartphone yang berkamera beresolusi tinggi, scan-menyecan menjadi urusan yang cepat dan g...
Posting Komentar
Baca selengkapnya

Solusi Javascript Hasil Kali Bilangan Prima yang Jumlahnya 12345

Oleh -
 Terusik dengan soal matematika Olimpiade Sain Nasional (OSN) dibawah ini: Jumlah dua bilangan prima adalah 12345, hasil kali kedua bilangan tersebut adalah... 24668 24686 26486 26686 Penulis sangat berkeinginan untuk menyelesaikan dengan menggunakan kode program. Dan karena tidak ingin repot-repot, penulis menggunakan Javascript dengan tampilan kode sebagai berikut: <html> <head> <title>Contoh Javascript</title> </head> <body> <script> function getNextPrime(x) { var ketemu=false; while(!ketemu){ x++; var lanjut=false; for(var i=2;i<x;i++){ if(x%i==0){ lanjut=true; break; } } if(lanjut)continue; ketemu=true; break; } return ketemu?x:-1; } var a=2,b=2; while(a<100000){ while(b<100000){ if(a+b==12345){ document.write(a+" "+b+" "+(a*b)); break; } b=getNextPrime(b); } a=getNextPrime(a); } </script> </body> </html> Caranya, tentu saja dengan mencoba...
Posting Komentar
Baca selengkapnya

Contoh Penggunaan Billing Class di Android

Oleh -
Untuk keperluan pembelian In-App Purchase (microtransaction), saat tulisan ini ditulis, Play Store mewajibkan setidaknya menggunakan billing library v3 ke atas. Sedangkan dalam posting ini, penulis hanya mencoba memberikan contoh penggunaan Billing Library v4, hasil uji coba penulis dalam menambahkan fitur pembelian dalam aplikasi-aplikasi Android milik penulis di Computational Lab . Yang mana skenarionya adalah, pertama kali dibuka, aplikasi dicek apakah sudah dibeli/berlangganan atau belum (biasanya penulis tempatkan di halaman Splashscreen). Lalu jika belum, maka pada halaman berikutnya (MainActivity) akan menampilkan iklan, dan jika sudah dibeli/berlangganan maka iklan tidak perlu di download untuk ditampilkan (method callIklan). Kode Billing Class yang penulis gunakan adalah sebagai berikut: package com.edugameapp.yourapp; import android.app.Activity; import com.android.billingclient.api.AcknowledgePurchaseParams; import com.android.billingclient.api.AcknowledgePurchaseResp...
Posting Komentar
Baca selengkapnya