Sunday, May 13, 2012

jQuery Decoder - Alamat Email

Posted by dav On 7:24 AM
Bismillah. Alhamdulillah. Diantara sekian banyak profesi didunia maya, ada diantaranya yang bekerja untuk mengumpulkan alamat email dari berbagai halaman situs web. Profesi ini memang masih menjadi kontroversi karena sebagian para pengumpul alamat email ini tidak peduli kepada siapa mereka kemudian menjual sekumpulan alamat email yang sudah diperolehnya. Ketika sebuah perusahaan memperoleh sekumpulan alamat email ini, biasanya mereka gunakan untuk mengirimkan informasi tentang suatu produk yang mereka buat. Namun bagaimana kalau sekumpulan alamat email ini diterima oleh orang-orang yang berniat jahat, misal dengan mengirimkan email berupa informasi palsu untuk memancing target, kemudian target tergiur dengan iming-iming sejumlah uang, dan ujung-ujungnya tertipu. Apapun tujuannya, jika ada diantaranya yang memperkenalkan suatu produk atau informasi yang tidak melalui persetujuan pemilik email, maka hal ini sudah termasuk tindakan spamming. Kita sebagai blogger juga punya cara untuk meminimalisir spamming dan memperkecil pencurian alamat email oleh orang yang tidak bertanggung jawab, yaitu dengan metode encode alamat email.

Deskripsi

Ada banyak metode encode yang bisa kita gunakan, dari mulai metode encode URL, HEX, dan BASE64. Pada artikel kali ini kita akan menggunakan metode encode dan decode HEX. Apa itu encode(r), decode(r) dan HEX?
  • Encode adalah kegiatan mengubah informasi dari satu format atau kode ke format atau kode lain.
  • Decode adalah kegiatan mengembalikan informasi dari satu format atau kode yang telah di encode agar kembali menjadi format atau kode asalnya.
  • Encoder adalah perangkat, sirkuit, perangkat lunak, algoritma atau orang yang mengubah informasi dari satu format atau kode ke format atau kode yang lain dengan tujuan standardisasi, kecepatan, kerahasiaan, keamanan, atau menyimpan dengan mengecilkan ukuran.
  • Decoder adalah ... (silahkan isi sendiri).
  • HEX atau sering juga disebut Hexadecimal adalah salah satu jenis bilangan matematik yang terdiri dari 16 karakter (atau sering di sebut BASE16). Bilangan matematik ini terdiri dari 16 karakter dimulai dari simbol 0-9 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) dan A-F (A, B, C, D, E, F).

Proses Encode

Setelah memahami pengertian Encode(r), Decode(r) dan HEX maka selanjutnya mari kita mulai melakukan encode alamat email. Langkah Encode Email seperti dibawah ini:
Alamat email asal:
bloggertuneup@yahoo.com
Kemudian saya tulis terbalik:
yahoo.com@bloggertuneup
Alamat email ditukar posisi (reverse) dengan tujuan menghindari script yang mampu melakukan decode otomatis. Dan nanti decoder yang akan kita gunakan sudah secara otomatis pula membalikan alamat email tersebut.
Alamat email hasil encode dengan karakter HEX:
7961686F6F2E636F6D40626C6F6767657274756E657570
Saya menggunakan Encoder dari Stephen Ostermiller [BASE64 and URL Encoding and Decoding]
Kemudian alamat email hasil encode disusun seperti ini:
_79_61_68_6F_6F_2E_63_6F_6D_40_62_6C_6F_67_67_65_72_74_75_6E_65_75_70
Jangan menggunakan underscore (_) tapi gunakan spasi. Underscore hanya untuk memudahkan saja.

Skenario HTML

Setelah melakukan encode alamat email, sekarang kita menyusun skenario HTML-nya. Skenario HTML ini dibuat agar pada saat halaman di load maka alamat email akan ditampilan sebagai karakter HEX. Saat pengunjung meng-klik tombol decode maka alamat email asal akan ditampilkan dalam keadaan siap klik. Maka kode HTML ditulis seperti ini:
<span>
<tt><span id="email"> 79 61 68 6F 6F 2E 63 6F 6D 40 62 6C 6F 67 67 65 72 74 75 6E 65 75 70</span></tt>
<a class="tomboldec" href="#">Klik untuk Decode</a>
</span>
Jika diperhatikan skenario HTML diatas maka terdiri dari 2 bagian besar, yaitu (bagian kesatu) alamat email hasil encode HEX yang dimulai dengan tag <tt>. Tag <tt> ini biasanya digunakan untuk memberikan tanda tentang suatu informasi dan mengubah bentuk font menjadi teletype. Sedangkan bagian kedua yaitu tombol (yang di wakili anchor link) dengan class tomboldec. Ketika link ini di klik maka proses decode alamat email hasil encode HEX akan diubah menjadi alamat email aslinya.

Skenario CSS

Kode CSS dibawah ini sebenarnya hanya digunakan untuk memanipulasi penampilan link (tombol decode). Sifatnya sebagai tambahan saja.
a.tomboldec {
text-decoration: none;
}
.tomboldec {
background-color: #EEEEEE;
border: medium none;
border-radius: 4px;
color: #000000;
margin: 2px;
padding: 2px 4px;
}
.tomboldec:hover {
background-color: #DDDDDD;
}

Skenario jQuery

Script jQuery ini berperan sebagai decoder untuk mengubah alamat email yang sudah di encode menjadi karakter HEX agar dapat ditampilkan sebagaimana alamat email asal. Script ditulis seperti dibawah ini:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function() {
jQuery('.tomboldec').click(function(){
var $demail = jQuery('#email');
var bagian = decodeURIComponent($demail.text().replace(/ /g, '%')).split('@');
bagian.reverse();
var email = bagian.join('@');
$demail.replaceWith(jQuery('<a/>', {href: 'mailto:' + email, text: email}));
jQuery('.tomboldec').remove();
});
});
//]]></script>
(Karena sedang dikejar target, mengenai penjelasan per baris script-nya menyusul)

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar: