Encode Base64 dengan JavaScript
Programming
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.
Baca juga : Decode Base64 dengan JavaScript
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
Hasil :
Mungkin cukup sampai disini artike kali ini, semoga dapat bermanfaat, terima kasih.
Referensi :
- https://developer.mozilla.org/en-US/docs/Web/API/btoa
- https://developer.mozilla.org/en-US/docs/Web/API/atob
