cegah copy paste konten web dengan javascript dan css anti plagiarism

Oleh: adminpartheon - 06-10-2022   -   16:36

Bagikan :

cegah copy paste javascript css anti plagiarism

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:

copy paste javascript css contoh 1

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:

  • <script type='text/javascript' src='http://127.0.0.1/firstweb/js/jquery.min.js'></script> perintah pada head ini digunakan untuk mengimpor library jquery. File jquery.min.js sebagai library saya tempatkan difolder js pada folder root codeigniter.
  • $(document).ready(function(){ $(".kotak_konten").bind("contextmenu",function(e){ return false; }); });. Ini merupakan perintah jquery dimana perintah ini dilakukan ketika browser telah mereload semua objek html (event document ready) dan siap menjalankan perintah javascript jquery didalamnya. Pada contoh diatas perintah yang dikerjakan adalah memblok event klik kanan pada objek dengan class kotak_konten, dimana event klik kanan mouse dipresentasikan dengan nama contextmenu dan perintah blocknya dengan return false.

hasil output pada browser contoh dari yang bisa mengeluarkan context menu setelah klik kanan menjadi tidak bisa, seperti dibawah ini:

context menu block with javascriptPada 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:

  • user-select : untuk browser chrome, opera
  • moz-user-select: untuk mozzila
  • webkit-user-select: untuk safari apple
  • ms-user-select: untuk ie 10+

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:

playstore_install

Artikel terkait

Cara amankan akun google waktu hp kamu hilang
Cara amankan akun google waktu hp kamu hilang
Belajar membuat website, Framework php+xampp part 1
Belajar membuat website, Framework php+xampp part 1
belajar javascript membuat fungsi thousand separator nominal uang
belajar javascript membuat fungsi thousand separator nominal uang
Belajar membuat website install codeigniter php
Belajar membuat website install codeigniter php
Belajar membuat website, MVC codeigniter dan halaman pertamamu
Belajar membuat website, MVC codeigniter dan halaman pertamamu
TIPS BIKIN LINK IN BIO INSTAGRAM
TIPS BIKIN LINK IN BIO INSTAGRAM
Artikel lainnya
cek kabel putus dengan multimeter atau avometer digital visero a830L
Seringkali peralatan elektronik kita tidak berfungsi karena adanya ganggunan dalam komponennya, salah satunya adalah kabel putus. Artikel kali ini akan membahas cara cek kabel putus dengan multimeter digital.
cara membuat function mysql database
selain query kita dapat membuat sebuah fungsi untuk mempermudah operasi database, bagaimana caranya ? yuks kita baca artikel berikut ini.
fungsi resistor beserta cara ukur lewat kode warna resistor dan multimeter
Kali ini kita akan bahas pengertian komponen elektro yaitu resistor beserta cara ukurnya berdasarkan kode warna dan multimeter digital
5 youtuber cerita menarik tuk menemani harimu
Sambil kerja dikomputer mendengarkan cerita-cerita menarik dapat kamu coba untuk mengusir kebosanan dan meningkatkan produktifitasmu, yuk coba dengarkan 5 youtuber Indonesia yang pandai bercerita ini.
Khasiat tanaman pecut kuda
Jarang orang mengetahui tanaman pecut kuda, padahal khasiat dan kegunaannya sangat banyak. berikut adalah kegunaan pecut kuda
5 lagu barat klasik romantis
Kangen sama pasangan? cobain lagu-lagu klasik ini supaya makin kangen dengan pasanganmu. Lagu klasik barat yang memorable dan romantis habis
input date html tutorial dan cara pakainya
Dalam membuat website pasti ada saatnya kita menggunakan isian tanggal, dalam artikel berikut kita akan mengupas cara dan petunjuk pengunaan input date untuk mempermudah operasi tanggal.
4 youtuber bule yang cerita tentang indonesia mulai dari wisata, budaya sampai makanan
pesona indonesia mampu memikat hati orang asing, 4 youtuber ini membuat vlog tentang beberapa wisata didaerah Indonesia. Siapakah 4 youtuber tersebut, yuks kita simak youtuber yang sering ditonton admin..
5 youtuber review film untuk menambah list film yang akan kamu tonton
ga ada waktu buat nonton film atau bingung film yang bagus yang mana, yuk cek 5 youtuber spesialist membahas film-film yang menarik lewat artikel ini.
belajar javascript membuat fungsi untuk merubah angka menjadi kalimat terbilang
Sesi belajar javascript kali ini akan membahas pembuatan fungsi untuk merubah sebuah angka menjadi kalimat terbilang.
tutorial cara mengukur tegangan DC dengan multimeter digital
artikel berikut akan mereview multimeter digital visero A830L dan petunjuk pemakaian untuk mengukur tegangan DC
isi tinta printer canon e400 hitam
Simak artikel berikut ini untuk mengisi tinta cartidge hitam printer canon e400 beserta cara reset manual
4 film barat dengan jagoan yang tak terkalahkan
Anda senang dengan film barat? suka dengan aksi perkelahian yang memacu adrenalin? berakhir happy ending? yuk simak artikel berikut ini buat menambah list film yang akan kamu tonton
Tutorial php cara membuat thousand separator nominal uang
Artikel berikut akan membahas cara merubah nominal uang menjadi lebih enak dibaca dengan menambah separator ribuan, ratusan ribu, dll didalam pemprograman PHP.
Raline Shah profil
Raline shah dikenal sebagai artis Indonesia yang pergaulannya luas, dari mohammad hadid sampai artis asia internasional lainnya masuk lingkaran pertemanannya. Berikut adalah biodata raline shah artis yang bukan kaleng-kaleng