membuat grafis dengan PHP

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

<?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);

?>

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:

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

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 :


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:


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 :


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 :


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

<?php





$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);

?>

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 360

0. Dengan demikian, jika tinggi dan lebar diisi

dengan nilai yang sama, kemudian awal 00 sampai 360

0, 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 :

4. Fonts

Untuk memberi teks pada image, fungsi yang digunakan adalah:

<?php





ImageTTFText ($image, 20, 0, 10, 20, $color, "VeraSe.ttf", "gambarku");

Imagejpeg ($image);

?>

<?php





ImageFilledRectangle($image, 150, 280,700, 600, $color);

Imagejpeg ($image);

?>

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:

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


$img = ImageCreate (1100,1100);

$w1 = ImageColorAllocate ($img, 227, 57, 9);

$w2 = ImageColorAllocate ($img, 0, 0, 0);

$w3 = ImageColorAllocate ($img, 255,255,255);



ImageFill($img,0,0,$w3);

ImageFilledRectangle($img, 150, 280,700, 600, $w4);

$coordinates = array();

$coordinates[0] = 1000; // x1

$coordinates[1] = 400; // y1











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);

?>

Berikut adalah contoh penggabungan dari fungsi-fungsi yang telah kita bahas di atas :

Hasilnya adalah seperti di bawah ini, jika kurang jelas bisa copy code yang ada, save dengan

nama detal.php

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

http://wartawarga.gunadarma.ac.id/2009/11/computer-graphic/

Documents

membuat grafis dengan PHP