CSS yang merupakan kependekan dari Cascading Style Sheets adalah kumpulan kode yang digunakan untuk mempercantik tampilan website, css mengatur suatu objek harus seperti apa, berwarna apa, bentuknya bagaimana, ukurannya seberapa besar, dan lain sebagainya. CSS Biasanya digunakan di html, php, asp, dan lain lain.

Image Credit by Telegraph.co.uk
Membuat CSS itu tergolong gampang-gampang susah. Dan pada suatu hari saya pernah kecolongan CSS Saya, dimana seseorang dengan mudahnya melakukan copy paste kode css dengan fitur View Page Source yang ada di browser, saya mencari cara proteksi css di google. Akhirnya saya menemukannya :D. Okay kita mulai mempelajarinya disini.
Contoh saya gunakan css dibawah :
filenamenya style.css
Kita Ganti nama filenya menjadi berakhiran .php ( contoh : style.css menjadi style.php )
Selanjutnya kita ganti kode diatas menjadi kode berikut
CSS Sudah diproteksi dengan bantuan session php, dimana jika session tidak ditemukan atau tidak cocok maka kode css tidak akan ditampilkan, namun browser hanya akan menampilkan tulisan “CSS PROTECTED”, sampai disini kode ini sudah oke, tetapi belum bisa digunakan.
:: Cara Penggunaan
Kalau ingin menggunakan kode berikut. ( Taruh di index.php / lainnya ), disini kita memprotek isi dari style.php yang isinya adalah kode css dengan menggunakan session di php.
:) Silahkan dicoba.
DEMO
Untuk demo silahkan lihat disini.
TIPS LAIN
Untuk menggunakan CSS nya cukup mudah. Namun jangan menggunakan link href, tetapi gunakan @import seperti berikut ini.
Menyamarkan style.php menjadi style.css
dan sedikit lagi. Trik menghilangkan ekstensi .php
dan menggantinya dengan .css
agar kode dapat diproteksi kita menggunakan .htaccess
( mod_rewrite ). Bagaimana caranya?
Begini Caranya :
Bagaimana ? Anda bisa ? Coba dulu. Silahkan Berkomentar bila ada masalah, atau belum mengerti.
HASIL
Berikut file CSS yang di protek:
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.css
Kelemahan
Tidak ada sistem yang sempurna, trik inipun tidak sepenuhnya memproteksi file css kita, misal dengan bantuan firebug kode css masih bisa dilihat, hal ini dikarenakan browser talah mendownload dahulu script css nya dan menyimpannya dikomputer kita untuk diproses oleh browser. Namun trik ini tetap ada gunanya, walaupun kita tidak bisa sepenuhnya membuat ini aman, setidaknya dengan ini sudah cukup menyulitkan orang untuk melakukan copy-paste kode seenaknya, terutama yang belum mengerti tools seperti firebug.
Referensi: Bersumber dari teman, DozaCrack.org entah juga namanya doza crack. hehe Saya bertanya di facebook.
saya sudah coba view-source, terus nemu import style.css, saya coba ganti index.php dengan style.css langsung di address url, sourcenya kebaca bos,.. :)
URL nya yang mana?
Ini saya copy kan URL nya, bagian mana yang bisa dilihat?
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.css
atau ini
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
1. tahapannya gini bos, saya buka url http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/ yang ada di tutorialnya.
2. saya klik kanan pilih view-source, nanti sourcenya kebuka tuh diwindow baru, kalau ngak salah dengan url view-source:http://view-source:tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/
3. diaddress bar yang udah ada langsung saya tambahkan aja style.php pada akhir urlnya, jadinya view-source:tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php dan tekan enter.
4. stylenya terlihat,.
5. kalau direfresh baru dia protected,. :D
ya gan,,sama seperti yang dibilang,kalo direfresh baru protected dia -_-
jadi gimana solusinya biar tanpa perlu direfresh sudah muncul tulisan protected? :D
view-source:http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
nyimak aja, soalnya aku belum pernah khusus pemrograman
css itu client side – pasti keliatan bagaimanapun juga
pake inspect element juga masih bisa kok min :)
Iya, kan sudah dikasih tau di artikel dan di demonya :)
Tahu tidak mas/om, tentang proteksi file font di hxxp://www.fontspring.com/
Dari tab Network Chrome Inspector bisa terlihat data yang ditransfer, tapi ketika dibuka file font tersebut isinya kosong. Jadi tidak bisa dicuri hehe…
Tahu tidak mas/om, tentang proteksi file font di hxxp://www.fontspring.com/
Dari tab Network Chrome Inspector bisa terlihat data yang ditransfer, tapi ketika dibuka file font tersebut isinya kosong. Jadi tidak bisa dicuri hehe…
iya, gimana tu om bikinnya?
Karya kita dicomot itu emang ngga enak, tapi kalo udah di ranah digital, saya pribadi coba tanamkan dalam diri bahwa kemungkinan itu udah jadi bagian di sini :D
gak work, coba ctrl+a dulu lalu ctrl+u
cek demonya tadi :v
bagi saya tidak perlu css itu dilindung. Yang penting adalah kandungan halaman itu mesti diprotek
bener.
Memang, yang harus kita proteksi adalah Konten, bukan dengan proteksi anti copy paste. Tapi keaslian konten tsb
bisa dobaca dgn mudah kok di chrome terbaru..?
ga work… tutorial gagal..
bagian mana yang gagal?
makasih mas, tapi masih belu paham :D
Tutorialnya bagus, proteksi sederhana dan untuk melihat isi style.css yang diubah namanya ke style.php, sangat mudah, ketik saja
[code]
"view-source:http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php"
[/code]
di address bar Firefox, maka akan muncul source code CSS-nya.
gak muncul kok, coba aja buka demo nya trus ketik view-source:URL kayak gitu. Gak keliatan source nya
Bisa gan, ini buktinya [IMG]http://i61.tinypic.com/9vfvrs.png[/IMG]
kalau mengamankan css kayak tokobagus itu gimana ya??
Di minify maksudnya? bisa pake ini http://cssminifier.com/
atau jika kamu menggunakna sass maka bisa otomatis di kompres jika mau :)
Proteksinya masih kurang ketat masbro, ketika di inspect element masih kelihatan style.css nya. Btw, good job :D
thanks gan berhasil….
cara yang paling ampuh bejimane ya bang ? biar gak bisa di colong css sama open source.. punya wap satu yang copy template nya jutaan.. pusing kalo karya sendiri di copy orang.. gak pada kreatif.. mending copy cssnya sama tampilannya.. tag tag nya jg dicopy itu yg paling nyebelin..
Nice share gan tp kayanya masih tetep bisa di copas :)
lumayan buat nambah informasi
thank atas artikelnya semoga ke depan tambah sukses
wah jadi cara nya seperti itu ya gan
saya simak n pelajari dlu gan
tanks info yh
Gan kok masih bisa di source cssnya?
masih belum bisa gan, ada plugin yang kerjanya seperti itu gak gan?
aku gagal gan heu.. gmna nih
Proteksinya masih agak lemah, saat di inspect element masih kelihatan style.css nya. tapi bagus :D
ane belum berhasil gan
padahal sudah mengikuti langkah-langkahnya
masih belum ngerti, itu nyimpen kodenya dmana gan ?
atau adakah cara lain selain dengan kode, masih kurang faham dengan pemrograman.
masih belum bisa Gan, ada cara yang lebih mudah ngga? hhehe
NIH ISI CSSNYA PROTEKSI PROTEKSI GUNDULMU NDUL
*{
margin:0; padding:0;
}
body{
background: #EB984F;
color: #34495E;
line-height:1.5em;
}
a{
color: #505F6E;
}
.container{
width: 800px;
margin:30px auto;
background: #F4D03F;
}
/* CSS TWD, Ini rahasia */
header{
padding: 30px 15px;
margin:10px;
border-bottom:1px solid #F4D030;
}
section{
padding: 30px 15px;
margin:10px;
}
Jago bisa tau, gak banyak lho yang sehebat sampean mas :)
bismillah mulai belajar untuk bisa html-htmlan…
Itu kompi lu yang kurang sehat gan makanya css nya ga keliatan. Di kompi ane yang sehat masih keliatan koq css nya :p
itu tiggal copy ke css kan gan
Iya
Ijin coba gan…
ijin praktek gan