Jumat, 14 Juni 2013

Javascript cookie pengingat nama pengguna


javascript cookie

Singkat saja kode cookie javascript kali ini fungsinya untuk mengingat username atau nama pengguna sesuai nama yang telah diisi melalui formulir Prompt javascript ini dibuat W3Schools.

ILUSTRASI

Baiklah, silahkan isi nama anda pada kotak yang muncul, lalu lihat apa yang akan terjadi, setelah anda melihat apa yang terjadi silahkan refresh kembali browser anda dan lihat cara javascript ini bekerja, ok jika anda sudah lihat efek dari script ini maka anda bisa lihat javascript aslinya dibawah ini....

<!DOCTYPE html>
<html>
<head>
<script>
//Cookie dimulai
function getCookie(c_name) {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if(c_start == -1) {
    c_start = c_value.indexOf(c_name + "=");
  }
  if(c_start == -1) {
    c_value = null;
  } else {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if(c_end == -1) {
      c_end = c_value.length;
    }
    c_value = unescape(c_value.substring(c_start, c_end));
  }
  return c_value;
}

function setCookie(c_name, value, exdays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
  document.cookie = c_name + "=" + c_value;
}
//Akhir Cookie
//dibawah ini fungsi untuk pengetesan saja, yaitu saat user mengetikan nama maka
//scriptnya akan membuat cookie dengan nama username dan menyimpannya dibrowser
function checkCookie() {
  //membuat cookie dengan nama username
  var username = getCookie("username"),
      //mendapatkan elemen dengan ID 'g'
       g = document.getElementById("g");
  //Jika username sudah terisi maka Cookie akan mengingat nama yang telah user masukan
  if(username != null && username != "") {
  //agar pengunjung ingat bahwa dia pernah mengunjungi situs anda maka teksnya dirubah
    g.innerHTML = "Met Datang Kembali " + username
  } else {
//jika user baru pertama mengunjungi situs anda maka javascript akan memunculkan prompt
//yang berisi form untuk mengisi nama user..
    username = prompt("Please enter your name:", "");
    if(username != null && username != "") {
//jika sudah mengisi nama maka kita buat cookienya agar browser mengingat nama yang
//telah anda masukan dengan menggunakan setCookie(c_name, value, exdays)
//dibawah ini nama cookienya username, nilainya isi dari Prompt tadi, dan masa aktifnya
// selama 365 hari
      setCookie("username", username, 365);
      g.innerHTML = "Kunjungan pertama anda " + username
    }
  }
}//Dibawah ini eksekusi javascriptnya
window.addEventListener("DOMContentLoaded",checkCookie,false)
</script>
</head>
<body>
<p><b id='g'></b></p>
</body>
</html>

Anda juga bisa simpan script tersebut dengan ekstensi .html dan membukanya menggunakan MOZILLA FIREFOX karena Browser Chrome tidak mendukung Cookie Offline.

Untuk penjelasan lebih lanjut mengenai scriptnya bisa langsung ke websitenya W3Schools kode diatas adalah contoh penerapan dari fungsi javascript cookie, jika anda ingin javascript cookie ini pada hostingan anda silahkan copy kodenya dibawah ini :)

function getCookie(c_name) {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if(c_start == -1) {
    c_start = c_value.indexOf(c_name + "=");
  }
  if(c_start == -1) {
    c_value = null;
  } else {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if(c_end == -1) {
      c_end = c_value.length;
    }
    c_value = unescape(c_value.substring(c_start, c_end));
  }
  return c_value;
}
function setCookie(c_name, value, exdays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
  document.cookie = c_name + "=" + c_value;
}