√ Encode Base64 dengan JavaScript

Encode Base64 dengan JavaScript

8/15/2023

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

Untuk demo dari praktikum encoce 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 string text, lalu setelah button encode diklik akan menampilkan hasil encode base64 dari string 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="btnEncode" type="button">Encode</button>
  <p id="resultEncode"></p>
 </body>
</html>

Lalu tambahkan kode JavaScript berikut.

// prepare variable
const inputToEncode = document.getElementById("inputB64");
const btnEncode = document.getElementById("btnEncode");
const resultArea = document.getElementById("resultEncode");
let encodedText = '';

// event ketika button encode dipencet
btnEncode.addEventListener("click", encodeInput);

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

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

Demo