√ Decode Base64 dengan JavaScript

Decode Base64 dengan JavaScript

8/15/2023

Halo temen-temen, apa kabar? semoga semua dalam keadaan baik-baik saja. Pada kesempatan ini akan membahas mengenai decode Base64 menggunakan javascript.

Untuk demo dari praktikum ini ada di bawah.

Perlu diketahui, javascript memiliki fungsi bawaan btoa() dan atob() fungsi ini terdapat pada fitur Web Api, untuk lebih jelasnya nanti saya akan berikan link di bagian referensi.

fungsi btoa() digunakan mendekode string data yang telah dikodekan menggunakan pengkodean Base64. sedangkan fungsi atob() digunakan untuk membuat string ASCII berenkode Base64 dari string biner (yaitu, string di mana setiap karakter dalam string diperlakukan sebagai byte data biner).

Kita akan menggunakan fungsi btoa()untuk praktikum ini.

Sebelum ke koding saya akan menjelaskan bagaimana nanti cara kerja nya, yang pertama akan ada field input tempat memasukkan encoded text base64, lalu setelah button decode diklik akan menampilkan hasil decode dari string base64 yang telah di inputkan.

Dari penjelasan di atas, setidaknya kita memerlukan :

Input type text
Button
Result Area, bisa sebuah tag <div> atau tag <p>

Pada praktikum ini saya menggunakan <p> sebagai result area.

Berikut adalah kodingan HTML lengkapnya.

<html>
 <head></head>
 <body>
  <input autocomplete="off" id="inputB64" type="text"> <button id="btnDecode" type="button">Decode</button>
  <p id="resultDecode"></p>
 </body>
</html>

Lalu tambahkan kode JavaScript berikut.

// prepare variable
const inputToDecode = document.getElementById("inputB64");
const btnDecode = document.getElementById("btnDecode");
const resultArea = document.getElementById("resultDecode");
let decodedText = '';

// event ketika button decode dipencet
btnDecode.addEventListener("click", decodeInput);

// fungsi decode
function decodeInput(e) {
	// biar tidak lari ke halaman lain, karena btn pakenya tag anchor
    e.preventDefault();
    // cek apakah inputan isi atau kosong
    if (inputToDecode.value != '') {
    	// decode text
        decodedText = window.atob(inputToDecode.value);
        // tampilkan ke result
        resultArea.innerHTML = decodedText;
        // scroll ke result
        window.scroll(0, resultArea.offsetTop);
    }
}

Penjelasan koding sudah saya letakkan di dalamnya ya. Berikut adalah demo dari decode base64 menggunakan javascript

Demo