Hallo gaiz, jumpa lagi disesi ilmu dan wawasan blog partheonid.com. Kali ini kita akan membahas bagaimana caranya untuk mencegah seseorang mengcopy paste konten yang sudah susah payah kita buat khususnya konten website ( dapat berupa blogspot, wordpress, framework, ataupun level dewa dengan membangun web secara strach dari nol).
Coba bayangkan ketika anda membangun sebuah konten yang panjang dan melelahkan, tiba-tiba ada orang yang dengan mudahnya mendrag tulisan lalu copy dan paste dieditornya lalu mempublish diwebsitenya sendiri tanpa memberikan credit sumber. Jika orang normal pastinya akan ada perasaan marah, pegel, jengkel, dan uring-uringan (Enak banget aq sudah ngarang panjang lebar dia tinggal copy paste uhhhhh... dapet adsense lagi hahahaha.. ). Ya, memang ada orang yang tidak peduli karena didasari rasa ingin berbagi saja seperti admin ini (#janganmuntahya).
Okey, tanpa banyak basa basi lagi kita akan mengulik dan memulai pembahasan kali ini. Pencegahan copy paste konten web ini menggunakan javascript dan css dan hanya dapat membatasi perilaku manusia untuk select dan drag lalu copy paste, sedangkan scraping konten lewat bot / aplikasi belum diuji alias kemungkinan masih lolos. Untuk cegah copy paste bot / robot dapat ditunggu pembahasan selanjutnya oleh karena itu mohon dukungan netizen pembaca untuk terus mengikuti dan membaca artikel dari partheonid.com. Untuk pemasangan dan aturan javascript css dapat dilihat point per point dan gambar contoh sebagai berikut:
1. Buka file php dalam framework codeignitermu, jika belum pernah memakai codeigniter dapat membuka link berikut:
2. Buka file view (template tampilan) utama pada mvc / file phpmu, dalam kasus ini admin menggunakan file bernama belajar.php pada folder view.
3. Ketik blok perintah html seperti ini:
<html lang="en">
<head>
<title>Block copy & paste javascript css</title>
</head>
<body>
<div class="kotak_konten">
<h1>Block / cegah konten web dari copy paste dengan javascript css</h1>
<p>Hallo saya sedang berjemur dipantai tetapi saya takut kulit saya hitam, oleh karena itu saya memakai sunblock lotion. Tidak lupa saya menggunakan topi dan sunglass pembelian dari online shopee tokocircle untuk melindungi kepala dan mata dari teriknya sinar matahari</P>
</div>
</body>
</html>
perintah file html ini akan mengeluarkan output sebagai berikut:
dari output diatas dapat dilihat bahwa kita masih bisa select dan drag untuk mengcopy tulisan hasil dari kode diatas. Oleh karena itu, kita akan menulis baris coding untuk memblock select drag, klik kanan lalu copy paste lewat javascript dan css.
4. JAVASCRIPT. Untuk perintah javascript ini admin menggunakan library javascript yang bernama jquery untuk mempermudah penulisan. Apa itu jquery, nanti admin akan membuat sesi lainnya tentang jquery ini. Untuk sesi saat ini tulis kode dibawah ini:
<html lang="en">
<head>
<title>Block copy & paste javascript css</title>
<script type='text/javascript' src='http://127.0.0.1/firstweb/js/jquery.min.js'></script>
</head>
<body>
<div class="kotak_konten">
<h1>Block / cegah konten web dari copy paste dengan javascript css</h1>
<p>Hallo saya sedang berjemur dipantai tetapi saya takut kulit saya hitam, oleh karena itu saya memakai sunblock lotion. Tidak lupa saya menggunakan topi dan sunglass pembelian dari online shopee tokocircle untuk melindungi kepala dan mata dari teriknya sinar matahari</P>
</div>
<script>
$(document).ready(function(){
$(".kotak_konten").bind("contextmenu",function(e){
return false;
});
});
</script>
</body>
</html>
pada kode diatas dapat dilihat saya menambahkan 2 block kode, yaitu <script type="text/javascript" src="....."></script> pada bagian head dan $(document).ready(function(){ ... }) pada bagian body. Penjelasannya adalah seperti ini:
hasil output pada browser contoh dari yang bisa mengeluarkan context menu setelah klik kanan menjadi tidak bisa, seperti dibawah ini:
Pada gambar diatas dapat dilihat ketika kode belum diimplementasikan, user dapat klik kanan pada browser dan mengeluarkan contextmenu. Namun, setelah kode diimplementasikan user tidak akan bisa mengeluarkan contextmenu walau klik kanan mouse sampai jebol.
5. CSS, langkah berikutnya adalah dengan mengimplementasikan kode css untuk memblock user untuk select dan drag. Kode css yang perlu ditulis adalah sebagai berikut:
<style>
/*
tulis di <head></head>
*/
.kotak_konten
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
dengan diimplementasikan kode css diatas membuat user tidak bisa select dan drag yang kemudian dapat digunakan untuk copy paste. Kode diatas dapat ditulis di tag <head> dengan diawali tag <style> atau lebih baik lagi jika kamu taruh diexternal css. Seperti yang sudah kita ketahui sebagai developer web bahwa css memiliki perlakuan yang berbeda-beda terhadap berbagai macam browser karena perbedaan engine css yang digunakan oleh pabrikan browser tersebut. Oleh karena itu, berikut adalah penjelasan dari 4 kode css diatas:
Silahkan dicoba untuk prakteknya dijamin kontenmu bebas copy paste. Namun untuk tingkat lebih tinggi seperti block bot scrapping kemungkinan akan dibahas pada artikel selanjutnya. Insya allah admin dapat kesempatan untuk share terkait hal itu. Sampai jumpa dipembahasan lainnya gaizz....
Bagi anda pemilik usaha yang ingin menerapkan sistem komputer untuk kontrol stok, rekap laporan otomatis, laba-rugi otomatis, sistem kasir,dan barcode qrcode. Dapat mencoba aplikasi partheon stok.. GRATIS 100%. Installnya mudah cukup KLIK/TAP link gambar dibawah ini: