Langkah-Langkah Proteksi Gambar pada Website

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com


Jerry Wijaya
jerry.wijaya@yahoo.com
Lisensi Dokumen:
Copyright © 2003-2006 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
Sebenarnya, hampir tidak ada cara yang efektif untuk melindungi gambar yang telah Anda
publikasikan melalui website agar tidak bisa dicopy orang lain tanpa izin. Bagaimanapun, gambar
yang telah Anda tampilkan di situs Anda akan tetap bisa dicopy oleh orang lain. Minimal, orang
masih bisa menekan tombol “Print Screen” pada keyboardnya dan mem-paste-kan gambarnya pada
software pengolah gambar, walaupun ada program khusus untuk mencegah proses capturing image
ini. Namun, paling tidak, Anda masih bisa melakukan beberapa cara untuk mempersulit orang lain
mengambil gambar Anda tersebut.
Di sini saya akan mencoba menyampaikan beberapa tips untuk melindungi (mempersulit orang lain
menyalin) gambar yang Anda publikasikan di website Anda. Berikut ini beberapa tips tersebut.
Simpan gambar Anda pada folder dengan nama yang tidak umum. Hindari menyimpan gambar
yang Anda anggap penting pada folder-folder dengan nama image, images, picture, picture,
gambar, pic, pics, dan sebagainya.
Agar orang lain tidak bisa mencetak halaman situs Anda yang berisi gambar yang Anda proteksi
langsung ke printer, tambahkan kode berikut ke tag html Anda.
a href="http://www.SitusAnda.com/index.html">
Kode di atas akan memerintahkan untuk mencetak halaman awal situs Anda (index.html) jika
ada orang yang ingin mencetak halaman situs Anda. Sisipkan kode tersebut di antara tag
dan pada tag html Anda.
Cegah klik kanan ( tidak berlaku jika javascript di-disable ) dan save as ( berjalan di IE ).

Kode di atas akan menghasilkan pop-up pesan "Gambar dilindungi hak cipta © 2006" setiap kali
ada klik kanan. Pop-up terlihat seperti pada gambar berikut.
Gambar 1. Alert pada browser Internet Explorer
Gambar 2. Alert pada browser Firefox
Sisipkan kode tersebut di antara tag dan pada tag html Anda.
2

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
Jika Anda hanya ingin memprotek klik-kanan pada gambar-gambar tertentu saja dari halaman
situs Anda, gunakan script javascript berikut ini pada header html Anda, lalu panggil fungsinya
dari tag gambar.

Sekarang, panggil fungsi popupPesan dari tag gambar Anda.

Pada IE 6 dan Firefox (browser yang lain belum dicoba), yang memiliki plugin Image Toolbar,
setiap kali mouse Anda melewati gambar maka toolbar ini akan muncul. Toolbar ini akan
mengizinkan Anda untuk mencetak atau menyimpan gambar. Untuk mencegahnya, sisipkan
kode tersebut di antara tag dan pada tag html Anda untuk men-disable Image
Toolbar pada seluruh gambar yang ada di halaman situs Anda.

Sisipkan kode tersebut di antara tag dan pada tag html Anda.
Sementara, untuk mencegah tampilnya Image Toolbar pada gambar-gambar tertentu saja, Anda
bisa gunakan tag “ GALLERYIMG="no" ” pada tag gambar Anda.

Halaman situs yang Anda buka biasanya otomatis akan menyimpan cache pada direktori cache
yang telah ditentukan. Artinya, gambar yang ada pada halaman situs Anda pun akan tersimpan
pula di direktori cache klien. Untuk mencegah hal ini, sisipkan kode tersebut di antara tag
dan pada tag html Anda.


Kode di atas berfungsi untuk memberitahu browser agar tidak menyimpan gambar pada cache
klien.
Untuk mencegah user di IE 6 dari pen-drag-an dan pen-drop-an gambar ke tempat lain (di-drag
lalu di copy dengan Ctrl+C), ganti tag dengan kode berikut.

3

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
Protek gambar Anda dengan menggunakan kode php berikut. Sebagai contoh, kita buat satu file
pemanggil gambar dengan nama tampilkan_gambar.php
// File tampilkan_gambar.php
// Ambil nama file dari variabel global 'gambar'
$nama_gambar = $_GET['gambar'];
// Tentukan direktori gambar, misal direktorinya adalah:
// misal windows: c:/folder_gambar/gambar_terbaru
// misal linux: /home/folder_gambar/gambar_terbaru
$direktori_gambar = "/home/folder_gambar/gambar_terbaru/";
// Tampilkan gambar
readfile ( $direktori_gambar . $nama_gambar );
?>
Untuk menampilkan gambar dengan nama “nama_gambar.jpg” yang ada di direktori
“c:/folder_gambar/gambar_terbaru”, kita gunakan kode berikut ini.

Untuk mencegah adanya image link dari situs lain (mencuri bandwith situs Anda), gunakan
syntax php “HTTP_REFERER” sehingga gambar hanya bisa ditampilkan pada situs Anda saja.
// Nama situs Anda
$situs_anda = www.SitusAnda.com;
// Referer yang memanggil halaman situs Anda
$referer = getenv ( "HTTP_REFERER" );
// Jika referer adalah domain Anda sendiri, maka…
if ( eregi ( "^https?://$situs_anda/", $referer ))
{
// Masukan kode pada poin 5 (tampilkan gambar.php)
.......
}
// Jika referer bukan domain Anda, maka…
else
{
// Tampilkan header http not found
header ( "HTTP/1.0 404 Not Found" );
// Keluar dan hentikan jalannya script php ini
exit();
}
?>
4

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
Jika Anda tidak ingin gambar yang Anda publikasikan melalui situs Anda disimpan oleh server
mesin pencari seperti Google, AltaVista, dan lain-lain, Anda bisa menambahkan meta tag pada
head tag () pada halaman situs Anda dan sebuah file robots.txt.
Isi dari meta tag robots mengandung direktif: [NO]INDEX dan [NO]FOLLOW. Direktif INDEX
menentukan apakah sebuah robot boleh/perlu meng-index halaman dan direktif FOLLOW
menentukan apakah sebuah robot boleh/perlu mengikuti/menelusuri link pada halaman tersebut.
Jika Anda tidak ingin robot meng-index dan atau menelusuri link pada halaman Anda, anda bisa
menyisipkan kode berikut di antara tag dan pada tag html Anda.

Sejak mesin pencari menemukan sebuah file robot.txt ketika spider atau bot mereka tiba di situs
Anda, Anda bisa menentukan direktori-direktori mana saja yang Anda tidak ingin terekam oleh
mesin pencari tersebut. “Robot.txt” adalah sebuah file teks sederhana yang bisa Anda buat di
Notepad atau text editor lainnya. Nama tag dan isi pada file robots.txt tidak case sensitive.
File robots.txt harus disimpan pada direktori root pada situs Anda dimana halaman depan situs
Anda ditempatkan. Kode berikut ini mencegah semua mesin pencari dari
peng-index-an/perekaman direktori cgi-bin dan direktori images, juga mencegah peng-index-an
semua file multimedia dari penelusuran mesin pencari tertentu (AltaVista, Google, Ditto, dan
Picsearch).
User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
User-agent:
User-agent:
User-Agent:
User-Agent:
Disallow: /
vscooter
Googlebot-Image
DittoSpyder
psbot
Untuk informasi lebih lanjut mengenai meta tags dan robots.txt ini, silakan kunjungi situs-situs
yang membahas tentang Spider Hunter dan Web Robots.
Sisipkan gambar Anda sebagai background pada tag , sementara untuk gambarnya sendiri
Anda ganti dengan sebuah file gambar dalam format gif transparan dengan ukuran 1 x 1 pixel.
Di sini, file gif transparan itu saya namakan kosong.gif.
height="y">
* url('….')bisa diisi oleh url normal (http://www.blablabla...) atau alamat folder dan nama
file selama berada dalam satu situs yang sama.
x = lebar gambar nama_gambar.jpg dan y = tinggi gambar nama_gambar.jpg
Nilai x dan y bisa Anda tentukan sendiri, atau menyesuaikan dengan ukuran gambar
nama_gambar.jpg-nya dengan menggunakan perintah php imagesx untuk mengetahui lebar
gambar dan imagesy untuk mengetahui tinggi gambar.
5

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
Contoh:
$x = imagex( "alamat_folder/nama_gambar.jpg" );
$y = imagey( "alamat_folder/nama_gambar.jpg" );
?>
Untuk informasi lebih mengenai perintah ini, silakan kunjungi situs-situs yang membahas
tentang konsep image pada php.
Dengan menggunakan kode di atas, maka setiap kali orang melakukan klik kanan | Save Image
As atau klik kanan | View Image (pada browser Firefox) atau klik kanan | Save Picture As (pada
IE), dan sebagainya, maka yang mereka dapatkan hanyalah sebuah file dengan nama kosong.gif.
Sembunyikan alamat folder dan nama gambar Anda dengan konsep session pada php. Cara ini
menyimpan alamat dan nama gambar pada session untuk dibaca pada file pemanggil gambar.
Berikut ini contohnya.
// Fungsi ini akan menyimpan variabel lokasi_gambar dan
// nama_gambar pada session
function tampilkan_gambar($lokasi_gambar,$nama_gambar)
{
// Memulai session
session_start();
// Jika session lokasi_gambar telah ada sebelumnya, maka
if(isset($_SESSION['lokasi_gambar']))
{
// Hapus session tersebut
unset($_SESSION['lokasi_gambar']);
}
// Jika session nama_gambar telah ada sebelumnya, maka
if(isset($_SESSION['nama_gambar']))
{
// Hapus session tersebut
unset($_SESSION['nama_gambar']);
}
// Isi session lokasi_gambar dengan variabel
// lokasi_gambar
$_SESSION['lokasi_gambar'] = $lokasi_gambar;
// Isi session nama_gambar dengan variabel nama_gambar
$_SESSION['nama_gambar'] = $nama_gambar;
}
// Tentukan nilai variabel lokasi_gambar
$lokasi_gambar = "images/gambarku";
6

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
// Tentukan nilai variabel nama_gambar
$nama_gambar = "nama_gambar.jpg";
// Tentukan lebar gambar
$lebar = imagex("$lokasi_gambar/$nama_gambar");
// Tentukan tinggi gambar
$tinggi = imagey("$lokasi_gambar/$nama_gambar");
// Tampilkan gambar dengan memanggilnya dari file
// gambar.php
// Gambar disisipkan pada background tag
echo "
tampilkan_gambar($lokasi_gambar, $nama_gambar) . " ') no-repeat
center¥"> height="$tinggi">
";
?>
Isi file gambar.php:
// Memulai session
session_start();
// Jika tidak ada session lokasi_gambar atau session nama_gambar,
maka
if (!isset($_SESSION['lokasi_gambar']) OR
!isset($_SESSION['nama_gambar']))
{
// Keluar dan hentikan jalannya script
exit();
}
// Ambil nilai session, dan masukkan dalam variabel local
$lokasi_gambar = $_SESSION['lokasi_gambar'];
$nama_gambar = $_SESSION['nama_gambar'];
// Baca dan tampilkan gambarnya
readfile( $lokasi_gambar . $nama_gambar );
// Hapus session
unset($_SESSION['lokasi_gambar']);
unset($_SESSION['nama_gambar']);
?>
Masukkan teks/string secara otomatis kepada gambar setiap kali gambar tersebut
dipanggil/ditampilkan sebagai tanda hak cipta dengan menggunakan php.
File gambar.php pada poin 11 di atas bisa kita modifikasi untuk menampilkan suatu
karakter/teks tertentu pada gambar yang dipanggil. Berikut ini contohnya.
7

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
// Memulai session
session_start();
// Jika tidak ada session lokasi_gambar atau
// tidak ada session nama_gambar, maka
if (!isset($_SESSION['lokasi_gambar']) OR
!isset($_SESSION['nama_gambar']))
{
// Keluar dan hentikan jalannya script
exit();
}
// Ambil nilai session, dan masukkan dalam variabel local
$lokasi_gambar = $_SESSION['lokasi_gambar'];
$nama_gambar = $_SESSION['nama_gambar'];
// Isi variable gambarnya dengan gabungan variabel
// lokasi_gambar dan nama_gambar
$gambarnya = $lokasi_gambar . $nama_gambar;
// Jika file gambar yang ditentukan tidak ada, maka
if (!file_exists($gambarnya))
{
// Keluar dan hentikan jalannya script
exit();
}
// Tentukan header
header ( "Content-type: image/jpeg" );
// Variable string yang akan tampil pada gambar
$kata = "http://www.ilmukomputer.com";
// Tentukan ukuran font
$font = 16;
// Tentukan panjang dari variable kata
$lebar = ImageFontWidth($font) * strlen($kata);
// Tentukan tinggi dari font yang digunakan
$tinggi = ImageFontHeight($font);
// Buat gambarnya
$gambar = ImageCreateFromJpeg($gambarnya);
// Tentukan posisi teks pada gambar
$x = ImagesX($gambar) - $lebar - 5;
$y = ImagesY($gambar) - $tinggi - 5;
// Tentukan warna latar dan warna teks pada gambar
$warna_latar = ImageColoralLocate ($gambar, 255, 255, 255);
$warna_teks = ImageColoralLocate ($gambar, 255,255,0);
// Masukkan teks ke gambar
imagestring ($gambar, $font, $x, $y, $kata, $warna_teks);
// Buat dan tampilkan gambarnya
ImageJpeg ($gambar);
8

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
// Hapus gambar
ImageDestroy($gambar);
// Hapus session
unset($_SESSION['lokasi_gambar']);
unset($_SESSION['nama_gambar']);
?>
Keterangan:
header ("Content-type: image/jpeg");
Syntax di atas disesuaikan dengan dengan jenis image/gambar yang akan dihasilkan.
Berikut ini contohnya:
header ("Content-type: image/jpeg")
untuk menampilkan format jpg
header ("Content-type: image/gif")
untuk menampilkan format gif
header ("Content-type: image/png")
untuk menampilkan format png
dsb.
$gambar = ImageCreateFromJpeg($gambarnya);
Syntax di atas disesuaikan dengan dengan jenis image/gambar yang digunakan.
Berikut ini contohnya:
$gambar = ImageCreateFromJpeg($gambarnya)
Untuk pengambilan dari gambar berformat jpg
$gambar = ImageCreateFromGif($gambarnya);
Untuk pengambilan dari gambar berformat gif
$gambar = ImageCreateFromPng($gambarnya);
Untuk pengambilan dari gambar berformat png
dsb.
ImageJpeg ($gambar)
Syntak di atas disesuaikan dengan format image/gambar yang akan dihasilkan.
ImageJpeg ($gambar)
Menghasilkan gambar dalam format jpg
ImageGif ($gambar)
Menghasilkan gambar dalam format gif
ImagePng ($gambar)
Menghasilkan gambar dalam format png
Dsb.
Untuk informasi lebih lanjut mengenai fungsi-fungsi image pada php, silakan kunjungi
situs-situs yang membahas mengenai konsep image pada php.
Alternatif lainnya untuk melindungi gambar yang Anda publikasikan di situs Anda, Anda bisa
menggunakan program-program/script-script khusus yang didesain untuk itu. Ada banyak script
komersial yang akan membantu Anda untuk mencegah orang lain mengambil/mendownload file
gambar Anda. Mereka bisa membantu Anda mengenkripsi file gambar Anda, melindunginya
dari penyimpanan (saving), penyalinan (copying), pencetakan (printing), bahkan capturing
(biasanya dengan menekan tombol Print Screen pada keyboard dan mem-paste-kannya pada
software pengolah gambar). Untuk pencegahan dari proses capturing ini, biasanya mereka
menyediakan plugin khusus untuk dipasang pada browser klien agar bisa menampilkan gambar
tersebut. Di sini saya tidak akan menyebutkan/memberi contoh program/script komersial
tersebut. Silakan Anda mencarinya sendiri. ☺
9

Tips dan Trik IlmuKomputer.Com
Copyright © 2003-2006 IlmuKomputer.Com
Sampai di sini pembahasan saya mengenai langkah-langkah proteksi gambar di website saya anggap
selesai. Seperti yang telah saya katakan di awal, bahwa hampir tidak ada cara yang efektif untuk
benar-benar melindungi gambar yang telah Anda publikasikan melalui web dari pembajakan.
Tips-tips di atas paling tidak mencoba untuk mempersulit proses pembajakan tersebut sekaligus
memperjelas tentang hak ciptanya. Semoga tulisan ini bermanfaat bagi siapa saja yang membacanya.
Jerry Wijaya
Referensi:
1. Ebook "PHP Manual Book" from http://www.php.net/docs.php
2. Site Internet : http://www.planetsourcecode.com
3. Site Internet : http://www.hotscripts.com
4. Site Internet : http://www.dynamicdrive.com
BIOGRAFI PENULIS
Jerry Wijaya. Lahir di Jakarta pada 24 Juli 1984 dan sekarang menetap di
Bogor. Sempat mengajar mata pelajaran Pengenalan Hardware Komputer dan
Pengenalan Microsoft Office FrontPage XP di SLTP BPK Bogor dan mata
kuliah Pemograman Intranet di AMIK BSI Bogor, disamping memberikan
pelatihan-pelatihan ilmu komputer lainnya dibeberapa lembaga pelatihan
komputer. Membaca dan menulis adalah dua hobi utamanya di samping
berkomputer-ria. Sejak SD sudah menggandrungi dunia komputer, meski
demikian, ilmunya pengetahuannya di bidang komputer masih sangat sederhana.
PHP dan Visual Basic adalah favoritnya.
Jerry Wijaya kini lebih cenderung aktif di sebuah organisasi sosial kemasyarakatan berskala nasional
-sebuah organisasi yang sebenarnya tidak memiliki korelasi yang jelas dengan dunia yang selama ini
digelutinya (komputer), dan dipercaya untuk menjabat sebagai sekretaris umum, sebuah posisi yang
baru kali pertama ditempati dari sekian organisasi yang pernah digelutinya. Kesibukannya di
organisasi tersebut memakan cukup banyak waktu. Meski demikian, segala kesibukannya tidak
mengurangi jatah waktunya untuk menyalurkan hobinya -berkomputer-ria. ☺