1. Membuat Grafis berbasis web dengan PHP
A. PENDAHULUAN
Komputer merupakan alat yang diciptakan untuk mempermudah dan mempercepat
aktivitas manusia. Baik dalam bidang pekerjaan maupun hobi, di jaman seperti ini seakan-
akan manusia tak bisa hidup tanpa komputer. Di sini kita akan membahas kegunaan komputer
untuk menciptakan suatu desain grafis yang bagus sesuai yang kita inginkan.
Sering kita mendengar istilah komputer grafis dalam dunia teknologi. Istilah Computer
Graphics memiliki beberapa arti, seperti representasi dan manipulasi data piktorial oleh
komputer dari berbagai teknologi yang digunakan untuk membuat dan memanipulasi data
gambar-gambar tersebut, gambar yang dihasilkan, dan sub-bidang ilmu komputer yang
mempelajari metode untuk mensintesis digital dan memanipulasi konten visual, lihat studi
komputer grafis lebih lanjut. Grafis itu sendiri dibedakan menjadi grafis vektor dan bitmap.
Grafis vektor adalah objek gambar yang dibentuk melalui kombinasi titik-titik dan garis
dengan menggunakan rumusan matematika tertentu. Grafis Bitmap adalah objek gambar
yang dibentuk berdasarkan titik-titik dan kombinasi warna. Program aplikasi untuk membuat
grafis vektor dan bitmap itu banyak sekali macamnya, seperti Page Maker, Corel Photo Paint,
CorelDraw, Adobe Photoshop dan masih banyak lagi yang lainnya.
Dewasa ini juga internet sedang marak di berbagai belahan dunia, dalam berbagai
bidang jasa web sudah tidak asing lagi di telinga kita. Selain menggunakan aplikasi atau
program seperti yang telah disebutkan tadi kita juga bisa membuat grafis untuk langsung
ditempatkan di web dengan program bernama PHP (Personal Home Page tools).
Menggambar di PHP tidak seperti menggambar dengan program-program pada umumnya. Di
sini kita lebih ditekankan menggunakan bahasa pemrograman, karena memang ini digunakan
untuk membuat suatu program. Dan keuntungannya apabila kita membuat suatu gambar
melalui ini tidak terlalu memakan banyak memori untuk di upload ke server. Jadi apabila
seseorang ingin membuka web yang kita buat tidak terlalu lama loadingnya. Besarnya hanya
beberapa kilobyte saja, juga dalam PHP menggunakan sifat server-side berarti pengerjaan
skrip akan dilakukan di server, baru kemudian hasilnya dikirimkan ke browser. Skrip tidak
dapat “diintip” dengan menggunakan fasilitas view HTML source. Jadi, hasil karya kita tidak
gampang dicopy oleh orang lain. Untuk lebih lanjut kita akan bahas tentang karya grafis
melalui PHP

2. B. ISI
Sebenarnya konsep dasar untuk menggambar melalui PHP ini sama dengan aplikasi-
aplikasi yang kita tahu sebelumnya, yanya mungkin kita agak kesulitan karena kode-kode
yang digunakan cukup rumit. Kesalahan kecil saja bisa berakibat halaman web yang kita buat
tidak akan tertampil. Konsep matematik di sini juga sangat diperlukan terutama pada bagian
peletakan titik koordinat, transformasi, vektor, dan beberapa materi yang masih berkaitan
dengan itu. Mungkin jika untuk lebih lanjut lagi, di sini kita juga bisa membuat chart
tentunya dengan konsep-konsep matematika yang lebih rumit lagi. Namun, tak ada yang tak
bisa kalau kita terus belajar. Seperti program lainnya langkah awal menggambar biasanya
kita memerlukan kanvas sebagai media untuk menggambar. Setelah kanvas tersedia, tentunya
dengan ukuran yang lebih besar dari gambar yang akan kita buat nantinya. Apabila sudah
terpenuhi barulah kita membuat bentuk-bentuk sesuai keinginan kita. Baik kanvas maupun
gambarnya biasanya mempunyai warna-warna tertentu. Paling tidak untuk membentuk suatu
gambar kita membutuhkan minimal dua jenis warna. Dalam suatu program pengolah atau
pembuat gambar mengenal sistim warna CMYK dan RGB yang dalam tiap warnanya
memiliki angka dari 0 sampai 255. CMYK merupakan mode warna dengan perpaduan empat
warna dasar, yaitu Cyan Magenta Yellow blacK, CMYK ini berdasarkan pada media kertas
putih. Jika pada mode warna CMYK kita tetapkan angka 0 semua, maka yang timbul adalah
warna putih dan jika kita tetapkan angka 255 untuk setiap warnanya, maka akan berubah
menjadi warna hitam. Untuk mode warna RGB ini merupakan perpaduan dari tiga warna
dasar, yaitu Red Green Blue. Mode RGB ini ditetapkan berdasarkan sifat cahaya
polikromatik. Apabila kita tetapkan angka 0 untuk setiap warnanya, maka akan berubah
menjadi warna hitam dan angka 255 untuk setiap warnanya, maka akan berubah menjadi
warna putih.
Untuk awal, kita buat gambar paling sederhana dulu. Seperti yang telah diuraikan di
atas tadi, dalam menggambar di PHP juga langkah awal kita harus menetapkan kanvasnya,
baik ukuran dan warnanya. Seperti halnya kita membuat program dengan PHP seperti
lainnya, langkah awal harus kita buka notepad yang nantinya disave dengan mengganti
formatnya menjadi .php. Berikut adalah langkah awal untuk menggambar di PHP:
<?php
header ("Content-type: image/jpeg");
$image = ImageCreate (400, 400);
$background = ImageColorAllocate ($image, 255, 255, 255);
$color = ImageColorAllocate ($image, 0, 0, 0);
ImageLine($image,0,0,300,300,$color);
Imagejpeg ($image);
?>
Hasilnya :
Untuk diperhatikan, selama ini dalam memberikan contoh-contoh
skrip PHP, selalu menggunakan tag-tag HTML, diawali dengan tag
<HTML>, <HEAD>, dan seterusnya. Namun, kali ini tag-tag tersebut
tidak digunakan, sebab fungsi header pada skrip tersebut memberikan

3. informasi bahwa output yang dikirimkan ke browser memiliki content-type berupa file
gambar, bukan file HTML. Juga tentunya tidak boleh ada spasi atau enter pada bagian
sebelum <?php. Dari informasi di atas merupakan contoh sederhana dari pembuatan gambar
di PHP. Kita lihat kodenya dan kita pahami dasarnya bahwa dalam langkah awal sebelum
kita tentukan kanvas terlebih dahulu kita tentukan eksistensi filenya. Dari kode di atas berarti
kita tahu format gambar yang dihasilkan adalah JPEG (Joint Photographics Experts Group).
Kita tentukan formatnya melalui kode :
header ("Content-type: image/jpeg");
Dan kita harus berikan keterangan :
Imagejpeg ($image);
Sebelum kita tutup dengan kode akhir php, yaitu ?>
Setelah menentukan eksistensi gambar yang akan kita buat, kita menentukan juga
ukuran kanvas yang akan kita gunakan sebagai media penggambaran, di sini kita
menggunakan resolusi 400*400 pixel dengan kode:
$image = ImageCreate (400, 400);
Jadi, apabila kita nanti akan menggambar, ukuran gambar kita jangan melebihi ukuran
kanvas tersebut. Jika ukuran gambar melebihi ukuran kanvas yang kita tentukan akan
berakibat gambar yang kita buat ada yang hilang atau tidak tertampil. Untuk pewarnaan di
sini menggunakan mode RGB dengan warna kanvas bisa dilihat pada kode :
$background = ImageColorAllocate ($image, 255, 255, 255);
Kode $image di sini bermaksud apa yang kita eksekusi berada pada kanvas yang berukuran
400*400 pixel tersebut. Dan jika kita lihat Kanvas akan berwarna putih, karena keseluruhan
memiliki angka 255 untuk tiga unsur warna berturut-turut Red, Green, Blue dan untuk warna
gambar kodenya adalah :
$color = ImageColorAllocate ($image, 0, 0, 0);
akan menggunakan warna hitam dengan karena angka 0 pada tiap unsur warna berturut-turut.
Apabila kita akan membuat lebih banyak warna lagi kita bisa menulis kode tersebut sesuai
dengan kebutuhan kita dan memvariasi tiga warna dasar dengan cara merubah angka yang
ada. Lalu berikutnya kita membuat gambar sederhana dengan kode :
ImageLine($image,0,0,300,300,$color);
Untuk maksud kode di atas adalah image yang terbentuk berupa garis lurus dengan koordinat
(x,y) yang terletak pada koordinat (0,0) dengan resolusi 300*300 pixel dan warnanya akan
menuju ke kode $color warna yang kita tetapkan sebagai warna hitam. Yang perlu kita
perhatikan lagi adalah dalam penulisan kode PHP di sini tidak boleh dispasi, dan harus sesuai
aturan, misal dalam membuat garis lurus “ImageLine” jika kita tuliskan “Image Line”
kemungkinan tidak akan terbaca pada halaman web. Karena jika terdapat kesalahan dalam
pengkodeannya tidak akan ditunjukkan pada baris berapa dan apa kesalahannya, tidak seperti
saat kita membuat kode untuk suatu syntax seperti bilangan prima dan lainnya, jadi kita harus
hati-hati dan lebih teliti.
Kita bisa membuat variasi bentuk gambar dengan menggunakan gabungan kode-kode
yang ada. Misal kita akan membuat suatu lingkaran, segi empat, poligon, bintang, dan
lainnya. Semua itu tergantung dari kreativitas kita dalam mengkombinasikan bentuk dan

4. warna yang ada. Di sini tersaji beberapa pedoman dasar untuk membuat beberapa bentuk
yang nantinya bisa dikombinasikan.
1. Untuk bentuk elips, kodenya adalah :
ImageArc($image,150,150,150,280,0,360,$color);
Fungsi ini akan menggambar bentuk elips dengan pusat di x,y (150,150), dengan tinggi 150
dan lebar 280, serta titik awal 00 sampai 3600. Dengan demikian, jika tinggi dan lebar diisi
dengan nilai yang sama, kemudian awal 00 sampai 3600, maka yang tergambar adalah
lingkaran.
2. Untuk bentuk segiempat, kodenya adalah :
ImageRectangle($image,0,0,200,200,$color);
Parameter 0,0 merupakan titik kiri atas dari persegi empat, sedangkan 200,200 merupakan
titik kanan bawahnya.
3. Fungsi ImagePolygon()
Fungsi ini digunakan untuk menggambar polygon (kurva banyak sisi atau banyak sudut).
Kodenya adalah sebagai berikut:
imagepolygon ($image, array_sudut, jml_sudut, $color)
Parameter array_sudut adalah array yang berisi koordinat dari setiap titik sudut polygon,
misalnya $titik[0]=x1, $titik[1]=y1, $titik[2]=x2, $titik[3]=x3, dan seterusnya. Parameter
jml_sudut adalah jumlah titik sudut dari polygon yang akan digambar. Berikut akan diberikan
contoh menggambar polygon :
<?php
header ("Content-type: image/jpeg");
$image = ImageCreate (400, 400);
$background = ImageColorAllocate ($image, 255, 255, 255);
$color = ImageColorAllocate ($image, 0, 0, 0);
$titik[0]=0;
$titik[1]=0;
$titik[2]=60;
$titik[3]=30;
$titik[4]=60;
$titik[5]=100;
$titik[6]=120;
$titik[7]=190;
$titik[8]=210;
$titik[9]=60;
ImagePolygon($image,$titik,5,$color);
Imagejpeg ($image);
?>
4. Fonts
Untuk memberi teks pada image, fungsi yang digunakan adalah:

5. ImageTTFText(int image, int size, int angle, int x, int y,int color, string
font file, string text);
Terdapat 8 parameter yaitu seperti biasa image, kemudian ukuran atau tinggi tulisan. Setelah
itu kita dapat mengatur kemiringan dan posisi tulisan akan ditulis (x dan y). Warna tulisan,
jenis font dan yang terakhir adalah teks yang akan ditulis. Atau untuk memberi teks juga bisa
dengan kode :
ImageString ($image, 40, 10, 5, "gambarku", $color);
Untuk lebih jelasnya lihat contoh berikut ini:
<?php
header ("Content-type: image/jpeg");
$image = ImageCreate (400, 400);
$background = ImageColorAllocate ($image, 255, 255, 255);
$color = ImageColorAllocate ($image, 0, 0, 0);
ImageTTFText ($image, 20, 0, 10, 20, $color, "VeraSe.ttf", "gambarku");
Imagejpeg ($image);
?>
Kurang lengkap rasanya bila gambar-gambar tersebut hanya terdiri dari garis-garis tepi saja.
Kita bisa melengkapi gambar tersebut dengan warna-warna yang kita inginkan. Dengan
fungsi ImageFilled, caranya kita tinggal menyisipkan kata Filled pada bentuk-bentuk yang
akan kita buat yang tentunya berupa luasan atau bahkan bidang. Jadi, garis tidak perlu
memakai ImageFilled. Contohnya bisa kita lihat pada kode berikut ini:
<?php
header ("Content-type: image/jpeg");
$image = ImageCreate (400, 400);
$background = ImageColorAllocate ($image, 255, 255, 255);
$color = ImageColorAllocate ($image, 0, 0, 0);
ImageFilledRectangle($image, 150, 280,700, 600, $color);
Imagejpeg ($image);
?>

6. Berikut adalah contoh penggabungan dari fungsi-fungsi yang telah kita bahas di atas :
<?php
header ("Content-type: image/jpeg");
$img = ImageCreate (1100,1100);
$w1 = ImageColorAllocate ($img, 227, 57, 9);
$w2 = ImageColorAllocate ($img, 0, 0, 0);
$w3 = ImageColorAllocate ($img, 255,255,255);
$w4 = ImageColorAllocate ($img, 149,123,45);
$w5 = ImageColorAllocate ($img, 175,249,157);
ImageFill($img,0,0,$w3);
ImageFilledRectangle($img, 150, 280,700, 600, $w4);
$coordinates = array();
$coordinates[0] = 1000; // x1
$coordinates[1] = 400; // y1
$coordinates[2] = 920; // x2
$coordinates[3] = 400; // y2
$coordinates[4] = 820; // x3
$coordinates[5] = 300; // y3
$coordinates[6] = 700; // x4
$coordinates[7] = 300; // y4
$coordinates[8] = 700; // x5
$coordinates[9] = 600; // y5
$coordinates[10] = 1000; // x6
$coordinates[11] = 600; // y6
ImageFilledPolygon($img, $coordinates, 6, $w5);
$c = array();
$c[0] = 820; // x1
$c[1] = 320; // y1
$c[2] = 900; // x2
$c[3] = 400; // y2
$c[4] = 710; // x3
$c[5] = 400; // y3
$c[6] = 710; // x4
$c[7] = 320; // y4
ImageFilledPolygon($img, $c, 4, $w2);
ImageEllipse($img, 100, 150,40, 20, $w2);
ImageFilledEllipse($img, 300,600,200, 200, $w2);
ImageFilledEllipse($img, 800,600,200, 200, $w2);
ImageString ($img, 800, 800, 800, "copyright by Dani.s.h", $w4);
ImageJPEG($img);
?>
Hasilnya adalah seperti di bawah ini, jika kurang jelas bisa copy code yang ada, save dengan
nama detal.php

7. C. PENUTUP
Dari semua yang telah terurai di atas semoga semua ini bisa bermanfaat bagi
pembaca dan semua yang ada di sini memang masih sangat dasar, tetapi hasil yang
terbaik adalah tergantung dari kreativitas kita masing-masing. Lebih baik kita belajar
dari sesuatu yang sangat dasar dan sepele tetapi benar-benar kita pahami daripada
mencuri sesuatu yang besar tetapi nantinya akan membawa kita ke dalam sesuatu
yang malah disepelekan, begitu pula dalam belajar PHP. Kode-kode dasar yang ada
akan bisa menjadi suatu program yang sangat berguna bila kita memahaminya dengan
baik. Semua yang ada di dalam makalah ini saya rasa masih banyak sekali
kekurangan, oleh karena itu bantuan dan saran pembaca setelah mempelajari ini bisa
memberikan perubahan yang baik bagi penulis. Kode-kode yang ada bisa dicoba guna
mengoreksi kebenaran yang ada, apabila ada kesalahan kami mohon maaf dan semoga
itu bisa cepat diperbaiki.
Terima kasih dan semoga bermanfaat.
D. REFERENSI
 Dhimas Ronggobramantyo. Menggambar di PHP dengan GD Library . 14 Oktober
2007
 Membuat Gambar Dengan PHP (bagian 2) Oleh Hendrik Perdana Minggu, 13
September 2009
 http://wartawarga.gunadarma.ac.id/2009/11/computer-graphic/
 TIK kelas 9 SMA Bab GRAFIS VEKTOR DAN BITMAP
 Ilmo.unnes.ac.id