Sabtu, 21 Juli 2012

Script PHP Untuk Membuat Web Thumbnail / Screen Shot

Apakah Anda ingin membuat webthumbnail? Apa itu ya ‘Web  Thumbnail’? Web thumbnail adalah semacam gambar screen shot atau hasil capture dari tampilan sebuah situs web tertentu. Web thumbnail ini sebenarnya dapat dibuat manual tapi sangat ribet karena anda harus membuka situs web yang mau dicapture tampilannya, kemudian dengan software image tertentu Anda harus capture tampilannya, lalu menyimpan hasil capture menjadi sebuah file image. Ribet kan? Namun kini Anda tidak perlu ribet lagi, karena sudah ada script PHP untuk memudahkan proses pembuatan web thumbnail ini.
Untuk membuat web thumbnail dengan script PHP, Anda tidak perlu bersusah payah membuatnya karena telah tersedia sebuah class yang bisa Anda gunakan secara free alias gratis. Berterima kasihlah kepada Lukasz Cepowski, yang telah membuat class PHP untuk web thumbnail ini. Silakan Anda mendownload script webthumnail.php di www.phpclasses.org
Script Class webthumbnail yang dibuat oleh Lukasz Cepowski ini memanfaatkan API dari layanan webthumbnail.org sebuah situs yang memungkinkan mengenerate screen shot suatu situs web.
Setelah file webthumbnail.php selesai diunduh, selanjutnya bagaimana cara penggunaannya?
Berikut ini contoh script untuk membuat web thumbnail atau mengcapture tampilan website lalu menyimpan file hasil capturenya ke dalam sebuah direktori.
capture1.php
<?php
require 'webthumbnail.php';

// path file hasil capture
$path = 'd:/images/thumb.jpg';

$thumb = new Webthumbnail("http://blog.rosihanari.net");
$thumb
    ->setWidth(512)
    ->setHeight(512)
    ->captureToFile($path);

echo "Thumbnail sudah disimpan di ".$path;
?>
Contoh script di atas apabila dijalankan akan mengcapture tampilan dari situs http://blog.rosihanari.net lalu menyimpan file capturenya di d:/images/thumb.jpg. Adapun ukuran image hasil capture adalah 512 x 512 pixel. Oya, pastikan script webthumbnail.php nya terletak dalam satu folder yang sama dengan capture1.php.
atau Anda juga bisa menampilkan image hasil capturenya langsung ke dalam browsernya, hanya dengan membuat script sbb:
capture2.php
<?php
require 'webthumbnail.php';

$thumb = new Webthumbnail("http://blog.rosihanari.net");
$thumb
    ->setWidth(512)
    ->setHeight(512)
    ->captureToBrowser();
?>
Jenis image yang dihasilkan dari script di atas adalah PNG image.OK, mudah bukan? selamat mencoba ya…

Update Data Suatu Tabel Bersumber Dari Tabel Lain Dengan Query SQL

Misalkan Anda memiliki sebuah tabel A dalam suatu database. Akan tetapi ada suatu field dari tabel A tersebut yang belum lengkap datanya. Akan tetapi, ada sebuah tabel lain, misalkan B dalam database yang sama, ternyata memiliki data yang lebih lengkap. Nah… dari kondisi ini, bagaimana caranya melengkapi data dari tabel A tersebut bersumber dari tabel B?
Dulu, untuk kasus seperti di atas, saya biasa menggunakan script untuk proses update datanya. Selanjutnya script tersebut saya jalankan, dan proses update data selesai. Namun, hal ini terasa repot karena kita harus membuat scriptnya terlebih dahulu. Kini, saya tidak perlu repot lagi untuk melakukan hal tersebut karena ternyata proses update data tabel yang datanya bersumber dari tabel lain ini bisa langsung dilakukan via query SQL.
Untuk memudahkan penjelasan, saya contohkan dua buah tabel sbb:
Tabel ‘mhs’
Tabel 'mhs'
Tabel ‘dummy’
Tabel 'dummy'
Dalam tabel ‘mhs’ di atas, ada sebuah field ‘tgllhr’ yang masih kosong. Tugas kita adalah mengisi data pada field ‘tgllhr’ ini, dimana datanya mengambil dari tabel ‘dummy’.
Sebelum kita buat query SQL untuk proses update data tabelnya, terlebih dahulu coba kita perhatikan kedua tabel tersebut. Di dalam kedua tabel tersebut terdapat sebuah field nim. Field inilah yang nantinya menjadi acuan dalam proses update data. Pastikan field yang ada dalam tabel acuan, dalam hal ini field ‘nim’ dalam tabel ‘dummy’, bersifat unik. Apabila field dalam tabel acuan ini tidak unik, maka nanti bisa terjadi ketidakkonsistenan data dan ini bisa bahaya.
Nah.. sekarang bagaimana bentuk query SQL nya? ini dia
UPDATE mhs, dummy SET mhs.tgllhr = dummy.tgllhr WHERE mhs.nim = dummy.nim;
Mengapa di dalam nama tabel setelah UPDATE … perlu dituliskan ‘mhs, dummy’? ya.. karena kita bekerja di 2 buah tabel. Selanjutnya maksud dari ‘SET mhs.tgllhr = dummy.tgllhr‘ adalah data pada field ‘tgllhr’ dari tabel ‘mhs’ akan diisi dengan data yang diambil dari field ‘tgllhr’ dari tabel ‘dummy’. Sedangkan guna dari ‘WHERE mhs.nim = dummy.nim‘ adalah menunjukkan acuan bahwa data yang diupdate adalah berdasarkan nim yang sama dari kedua tabel.
Mudah dan cepat bukan?? Semoga tips dari saya ini berguna bagi Anda.

Script PHP Menampilkan Artikel Terkait

Apakah Anda sedang belajar membuat script CMS sendiri? Jika ya, rasanya belum lengkap deh tanpa fitur yang menampilkan daftar artikel yang terkait dengan sebuah artikel yang sedang dibaca oleh pengunjung blog. Dengan adanya fitur ini, pengunjung akan diarahkan ke artikel lain yang masih berhubungan dengan artikel yang sedang dibacanya sehingga bisa menambah wawasan lebih bagi mereka. Sedangkan efek positif bagi Anda sebagai pemilik situs adalah meningkatnya impression atau page view situs Anda, dan juga membuat visitor lebih tahan berlama-lama untuk menjelajahi situs Anda.
Apabila Anda menggunakan WordPress atau blogging software yang lain, maka fitur untuk menampilkian artikel terkait ini bisa langsung ditanam menggunakan plugin yang disediakan, misalnya YARPP. Namun, bagi Anda yang membuat CMS sendiri tentunya hal ini menjadi tantangan tersendiri. Oleh karena itu dalam artikel ini, saya akan mencoba memaparkan ide untuk membuat modul script yang menampilkan artikel terkait dengan PHP.

Misalkan kita mempunyai CMS dengan struktur tabel database untuk menyimpan data artikel seperti di bawah ini:
CREATE TABLE `artikel` (
  `id` int(11) AUTO_INCREMENT,
  `judul` varchar(100),
  `konten` text,
  `tanggal` date,
  PRIMARY KEY (`id`)
);
dan andaikan kita sudah memiliki data artikel sbb:
Selanjutnya, kita buat script untuk menampilkan detail isi artikelnya berdasarkan id artikel nya.
artikel.php
<?php
// koneksi ke database
mysql_connect('localhost', 'username', 'password');
mysql_select_db('database');

// membaca id artikel
$idartikel = abs((int) $_GET['id']);

// membaca data detail artikel berdasarkan id artikel
$query = "SELECT * FROM artikel WHERE id = '$idartikel'";
$hasil = mysql_query($query);
$data  = mysql_fetch_array($hasil);
?>

<html>
    <head>
       <title><?php echo $data['judul']?></title>
    </head>
    <body>
        <h1><?php echo $data['judul']?></h1>
        <small><em>Tanggal publikasi: <?php echo $data['tanggal']?></em></small>

        <div>
            <?php echo $data['konten']?>
        </div>

        <div>
           <h3>Artikel Terkait</h3>
           <?php
             include "function.php";
             artikelTerkait($idartikel);
           ?>
        </div>
    </body>
</html>
Script di atas digunakan untuk menampilkan konten dari sebuah artikel berdasarkan id artikelnya, dimana untuk menampilkan konten suatu artikel menggunakan URL http://namahost/artikel.php?id=…
Perhatikan perintah
$idartikel = abs((int) $_GET['id']);
perintah tersebut digunakan untuk mencegah SQL injection melalui GET method sebagaimana yang dulu pernah saya tulis artikelnya.
Jika kita perhatikan dari script di atas, maka di bawah isi artikelnya ada bagian sbb:
<div>
  <h3>Artikel Terkait</h3>
  <?php
    include "function.php";
    artikelTerkait($idartikel);
  ?>
</div>
Bagian tersebut digunakan untuk menampilkan daftar artikel yang terkait dengan artikel yang sedang dibaca. Untuk menampilkan daftar artikel yang terkait dengan artikel ber ID $idartikel, saya menggunakan sebuah function dengan nama artikelTerkait($idartikel) dimana $idartikel adalah parameternya. Function ini saya letakkan di file function.php yang terpisah dari script artikel.php. Kalaupun Anda meletakkan functionnya dalam file yg sama dengan artikel.php juga tidak ada masalah :-)
Selanjutnya kita tinjau apa isi dari function artikelTerkait(). Dalam contoh ini, keterkaitan artikel yang dimaksud di sini ditinjau dari kemiripan judul artikelnya. Adapun idenya adalah, kita baca semua judul artikel yang ada dalam database kecuali artikel yang menjadi acuan (artikel ber ID $idartikel). Selanjutnya untuk semua judul artikel ini, kita lihat kemiripannya dengan judul dari artikel yang ber ID $idartikel ini. Kita bisa melihat kemiripan dari judul artikel ini menggunakan function similar_text() yang pernah saya bahas di artikel lain tentang uji kemiripan teks.
Kemudian, karena hasil dari penggunakan similar_text() ini berupa angka dalam bentuk prosentase kemiripan, maka sebaiknya kita membuat semacam batas minimal prosentase atau threshold, yang nantinya digunakan untuk memberi batas minimal kemiripannya. Sebagai contoh misalkan daftar artikel terkait yang ditampilkan hanya artikel yang memiliki tingkat kemiripan 50% ke atas. Hal ini berfungsi untuk memfilter mana artikel yang benar-benar mirip atau tidak. Artikel yang jauh dari mirip, akan memiliki prosentase kemiripan kecil. Tapi besar kecilnya threshold ini sepenuhnya terserah Anda, karena Andalah yang menentukan.
Hal yang menjadi pemikiran berikutnya adalah, bagaimana jika jumlah artikel yang terkait itu ada banyak, misalkan ada 100 buah? tentunya tidak mungkin kita tampilkan semua karena halaman page artikelnya bisa jadi penuh dengan judul-judul artikel sehingga tidak menarik bagi pengunjung. Oleh karena itu kita sebaiknya batasi jumlah artikel terkaitnya. Untuk mengimplementasikan hal ini, setiap judul artikel yang kemiripannya di atas threshold, maka kita simpan ke dalam sebuah array. Selama jumlah artikel dalam array tersebut belum memenuhi batas maksimum jumlah artikel nya, maka judul-judul terkait itu bisa ditambahkan dalam array. Setelah proses ini selesai, barulah kita tampilkan list judul artikel terkaitnya yang ada dalam array tersebut.
Nah… dari ide di atas, kita bisa membuat scriptnya sbb:
function.php
<?php

// koneksi ke database
mysql_connect('localhost', 'username', 'password');
mysql_select_db('database');

function artikelTerkait($id)
{
    // batas threshold 40%
    $threshold = 40;
    // jumlah maksimum artikel terkait yg ditampilkan 3 buah
    $maksArtikel = 3;

    // array yang nantinya diisi judul artikel terkait
    $listArtikel = Array();

    // membaca judul artikel dari ID tertentu (ID artikel acuan)
    // judul ini nanti akan dicek kemiripannya dengan artikel yang lain
    $query = "SELECT judul FROM artikel WHERE id = '$id'";
    $hasil = mysql_query($query);
    $data  = mysql_fetch_array($hasil);
    $judul = $data['judul'];

    // membaca semua data artikel selain ID artikel acuan
    $query = "SELECT id, judul FROM artikel WHERE id <> '$id'";
    $hasil = mysql_query($query);
    while ($data = mysql_fetch_array($hasil))
    {
        // cek similaritas judul artikel acuan dengan judul artikel lainnya
        similar_text($judul, $data['judul'], $percent);
        if ($percent >= $threshold)
        {
            // jika prosentase kemiripan judul di atas threshold
            if (count($listArtikel) <= $maksArtikel)
            {
               // jika jumlah artikel belum sampai batas maksimum, tambahkan ke dalam array
               $listArtikel[] = "<li><a href='artikel.php?id=".$data['id']."'>".$data['judul']."</a></li>";
            }
        }
    } 

    // jika array listartikel tidak kosong, tampilkan listnya
    // jika kosong, maka tampilkan 'tidak ada artikel terkait'
    if (count($listArtikel) > 0)
    {
        echo "<ul>";
        for ($i=0; $i<=count($listArtikel)-1; $i++)
        {
            echo $listArtikel[$i];
        }
        echo "</ul>";
    }
    else echo "<p>Tidak ada artikel terkait</p>";
}
?>
Mudah bukan membuatnya? Hasil dari script artikel.php?id=… jika dijalankan di browser adalah sebagai berikut:
Nah… selanjutnya Anda bisa kembangkan sendiri script di atas, misalnya jika di dalam CMS Anda ada semacam kata kunci atau tag, maka artikel terkait bisa berdasarkan tag tersebut atau kategori artikel. Bisa juga, list artikel terkait yang muncul disorting dahulu dengan tingkat kemiripan paling tinggi terletak di urutan paling atas misalnya.
Selamat mencoba…

Rabu, 02 Mei 2012

Simple Basic Log in with html 5

Lately, I have looking into my google analytics and google webmaster tools account for this site and I have seen that most of the hits VoidWeb is getting for is due to my post “Design HTML5 Form in Zend Framework with Zend_Form“. Since that post was very specific to Zend Framework, I thought let me post about making a simple HTML5 login form. So here we go;
To start with, I hope you guys are already aware of HTML5 and its basics. If not, I would recommend you to to go through it under the following links:
1. HTML5 Unleashed: Tips, Tricks and Techniques by W3Avenue
2. HTML5 Tutorial by W3Schools
3. Dive into HTML5
Now, if you are conversant with HTML5, then lets continue. We are going to use the HTML5 sample markup provided by W3Avenue here and will make a login form from that.

Step 1: Creating Basic HTML5 Page

First, we will create the basic html page structure.
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>HTML5 Semantic Markup Demo: Cross Browser</title>
 <link rel="stylesheet" href="html5reset.css" type="text/css" />
 <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
 <!--[if lt IE 9]>
 <script src="html5.js"></script>
 <![endif]-->
</head>
<body>
 <header>
 <hgroup>
 <h1>Page Header</h1>
 <h2>Page Sub Heading</h2>
 </hgroup>
 </header>
<nav>
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Contact</a></li>

 </ul>
 </nav>
<article>
<!-- Login Form will go here -->
</article>

<aside>
<header>
 <h1>Siderbar Heading</h1>
 </header>
 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio. Donec sit amet augue metus, nec sollicitudin est. Donec iaculis porttitor viverra. Sed sed magna ac lectus pharetra iaculis at quis tellus. Nunc quis lorem sit amet nulla viverra mattis. Aenean suscipit libero accumsan sapien fermentum non aliquet lorem rutrum.</p>

 </aside>
<footer>
 Page Footer
 </footer>
</body>
</html>
 
 
In the above code, we have first defined the HTML parent tags <!doctype html> which tells the page is HTML5. Then we have head tag, in which we have specified the charset as UTF-8, title tag which says about the title of the page. The next two lines where we have defined the css stylesheets which will actually take care of rendering our html5 form properly in different browsers. The first stylesheet will reset all the html elements and second stylesheet defines the style of the page.
The next line which includes the javascript file is required because the HTML5 elements is not supported properly in IE < 9.
Then we have the closing head tag and then body tag where our html5 login page structure will come. In the body tag, we have defined the header tag, which is the page heading. It generally take the standard header of your site. After that, we have nav tag, wherein we define the navigation menu’s. Then finally, we are having the article tag, where our html5 login form will come. Apart for these, we have aside and footer tag which define the sidebar and footer of the page respectively. You can adjust these items with respect to your site layout.

Step 2: Creating HTML5 Login Form

The actual stuff begins from here. As we all know that, HTML5 is focusing more on creating a semantic meaning from the page. Every page is considered as an article and you can divide your page into different sections and can give proper meaning to each of them.
We will also create it in the same meaningful way. Inside the article tag, we will first define the heading for our form in the article’s header tag.

....

<article>
 <header>
 <h1>Simple HTML5 Login Form</h1>
 <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
 </header>
 
Next, we will provide a simple message to the user looking to the page as a content of article inside the p tag. We have started the section after the message in which we will create our html5 login form.
We will define the form method, action and type attributes. We will create the input elements similar to which we create earlier. The first is username which would be a text field, second is password which is a password field. Last we have submit button and reset button.
You can see a new attribute with username and password field i.e. required. The purpose of this attribute is to make sure that the form will only be submitted when these fields are filled with some values. It is similar to the null or empty checks which we do on either client side using javascript or server side using php.


<p>Please provide the authentication credentials to continue:</p>
 <section>
 <form method="POST" action="#" enctype="application/x-www-form-urlencoded">
 <p>Username: <input type="text" name="username" id="username" size="25" required/></p>
 <p>Password: <input type="password" name="passwd" id="passwd" size="25" required/></p>
 <p>
 <input type="submit" name="submit" id="submit" value="Submit"/>
 <input type="reset" name="reset" id="reset" value="Reset"/>
 </p>
 </form>
 </section>
 </article>

...
 
So that is all for creating a simple HTML5 login form. There is nothing new except the new tags or attributes but only the division of pages semantically using HTML5. If you wish to see the demo of the above content, please click below.

Click for HTML5 Login Form Demo

Click for W3C Experimental Validator for HTML5 Login Form

The full source code for the HTML5 login form is provided below.

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>HTML5 Semantic Markup Demo: Cross Browser</title>
 <link rel="stylesheet" href="html5reset.css" type="text/css" />
 <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
 <!--[if lt IE 9]>
 <script src="html5.js"></script>
 <![endif]-->
</head>
<body>
 <header>
 <hgroup>
 <h1>Page Header</h1>
 <h2>Page Sub Heading</h2>
 </hgroup>
 </header>

 <nav>

 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Contact</a></li>

 </ul>
 </nav>

 <article>
 <header>
 <h1>Simple HTML5 Login Form</h1>
 <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
 </header>

 <p>Please provide the authentication credentials to continue:</p>
 <section>
 <form method="POST" action="#" enctype="application/x-www-form-urlencoded">
 <p>Username: <input type="text" name="username" id="username" size="25" required/></p>
 <p>Password: <input type="password" name="passwd" id="passwd" size="25" required/></p>
 <p>
 <input type="submit" name="submit" id="submit" value="Submit"/>
 <input type="reset" name="reset" id="reset" value="Reset"/>
 </p>
 </form>
 </section>
 </article>

 <aside>

 <header>
 <h1>Siderbar Heading</h1>
 </header>
 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio. Donec sit amet augue metus, nec sollicitudin est. Donec iaculis porttitor viverra. Sed sed magna ac lectus pharetra iaculis at quis tellus. Nunc quis lorem sit amet nulla viverra mattis. Aenean suscipit libero accumsan sapien fermentum non aliquet lorem rutrum.</p>

 </aside>

 <footer>
 Page Footer
 </footer>

</body>
</html>

 

 

 

Kamis, 26 April 2012

Script php untuk membuat grafik

Grafik chart sering digunakan untuk mempermudah pembacaan data statistik. Dari grafik chart, kita juga dapat dengan mudah dan cepat dalam membaca informasi tentang suatu data. Nah… bagi Anda yang telanjur jatuh cinta dengan PHP, kira-kira bisa tidak ya menampilkan data statistik ke dalam bentuk chart? Jawabannya jelas BISA donk… Bahkan kita dapat mengintegrasikan chart tersebut dengan database, maksudnya data statistik yang tersimpan dalam database nantinya akan direpresentasikan ke dalam bentuk chart.
Kalau PHP bisa digunakan untuk membuat chart? lantas… gimana caranya? Sulitkah membuatnya?
Pada saat sekarang dimana banyak orang yang baik hati, para pecinta PHP tidak perlu lagi repot-repot membuat script chart. Mengapa? ya… karena ada orang yang baik hati dalam membuat modul chart yang siap pakai. Tugas para programmer hanyalah membuat script untuk mengintegrasikan modul chart tersebut dengan data yang dimilikinya, serta mengatur tampilan chartnya saja.
Wah asyik nih… trus nama modulnya apa yah? Nama modulnya adalah JpGraph. Pada artikel yang lain, saya telah menunjukkan cara penggunaannya untuk keperluan verifikasi form supaya terhindar dari spam. Sedangkan kini, saya akan tunjukkan cara penggunaanya untuk menampilkan chart dari data mysql.
Untuk kali ini, saya akan ambil studi kasus tentang data statistik penduduk suatu negara. Misalkan struktur tabel yang digunakan adalah sbb:
1.CREATE TABLE sensus (
2.negara varchar(20),
3.tahun varchar(4),
4.jmlpria int(11),
5.jmlwanita int(11),
6.PRIMARY KEY  (negara, tahun)
7.)
dan berikut ini adalah sampel datanya
01.INSERT INTO `sensus` VALUES ('A''1990''20''31');
02.INSERT INTO `sensus` VALUES ('B''1990''30''42');
03.INSERT INTO `sensus` VALUES ('C''1990''32''16');
04.INSERT INTO `sensus` VALUES ('A''1991''41''17');
05.INSERT INTO `sensus` VALUES ('B''1991''24''32');
06.INSERT INTO `sensus` VALUES ('C''1991''34''17');
07.INSERT INTO `sensus` VALUES ('A''1992''52''35');
08.INSERT INTO `sensus` VALUES ('B''1992''12''22');
09.INSERT INTO `sensus` VALUES ('C''1992''34''34');
OK… sekarang akan kita coba menampilkan chart berbentuk garis yang merepresentasikan jumlah total penduduk negara A untuk setiap tahun.
01.<?php
02.include ("modul/jpgraph.php");
03.include ("modul/jpgraph_line.php");
04. 
05.// membuat array inisial untuk jumlah penduduk dan tahunnya
06.$dataJum array();
07.$dataTh array();
08. 
09.// koneksi ke db
10.mysql_connect("localhost","root","root");
11.mysql_select_db("data");
12. 
13.// query SQL untuk mencari jumlah totol penduduk untuk setiap tahun pada negara A
14.$query "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
15.$hasil = mysql_query($query);
16.while ($data = mysql_fetch_array($hasil))
17.{
18.// hasil data query ditambahkan ke dalam array jumlah pendudukan dan tahun
19.array_unshift($dataJum$data['jum']);
20.array_unshift($dataTh$data['tahun']);
21.}
22. 
23.// membuat grafik dengan size 300x200 px
24.$graph new Graph(300,200,"auto");
25.$graph->SetScale("textlin");
26. 
27.// menampilkan data jumlah penduduk ke dalam plot garis
28.$lineplot=new LinePlot($dataJum);
29.$graph->Add($lineplot);
30. 
31.// mengatur margin plot
32.$graph->img->SetMargin(40,20,20,40);
33. 
34.// menampilkan title dari grafik
35.$graph->title->Set("Grafik Jumlah Penduduk Negara A");
36. 
37.// menampilkan label pada sumbu x grafik
38.$graph->xaxis->title->Set("Tahun");
39. 
40.// menampilkan label pada sumbu y grafik
41.$graph->yaxis->title->Set("Jumlah");
42. 
43.// menampilkan titik data pada sumbu x (tahun)
44.$graph->xaxis->SetTickLabels($dataTh);
45. 
46.// mengatur jenis font pada title grafik
47.$graph->title->SetFont(FF_FONT1,FS_BOLD);
48. 
49.// memberi warna biru pada plot garis
50.$lineplot->SetColor("blue");
51. 
52.// memberikan efek shadow pada image
53.$graph->SetShadow();
54. 
55.// tampilkan grafik ke browser
56.$graph->Stroke();
57.?>
Perhatikan perintah berikut ini
1.include ("jpgraph.php");
2.include ("jpgraph_line.php");
Buat apa tuh kedua perintah? Kedua perintah akan memanggil modul jpgraph dan modul untuk membuat chart garis. Tanpa kedua modul file tersebut, chart garis tidak muncul, namun yang muncul adalah error . Anda dapat mendownload modul-modul tersebut di bagian bawah artikel ini.
Oya data yang akan ditampilkan dengan Jpgraph basisnya adalah array, sehingga dalam script di atas kita buat data dalam bentuk array.
Hasil dari script di atas adalah sbb:


Kita juga dapat membuat chart garis dan batang menjadi satu (combined). Berikut ini adalah script untuk menggabungkan kedua bentuk chart menjadi satu. Contoh ini sekaligus menjawab pertanyaan mbak Dian dalam komentar yang dituliskannya.
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

$dataJum = array();
$dataTh = array();

mysql_connect("localhost","root","root");
mysql_select_db("data");

$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
 array_unshift($dataJum, $data['jum']);
 array_unshift($dataTh, $data['tahun']);
}

$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin");

// menampilkan plot batang dari data jumlah penduduk
$bplot = new BarPlot($dataJum);
$graph->Add($bplot);

// menampilkan plot garis dari data jumlah penduduk
$lineplot=new LinePlot($dataJum);
$graph->Add($lineplot);

$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Grafik Jumlah Penduduk Negara A");
$graph->xaxis->title->Set("Tahun");
$graph->yaxis->title->Set("Jumlah");
$graph->xaxis->SetTickLabels($dataTh);

$graph->title->SetFont(FF_FONT1,FS_BOLD);

$lineplot->SetColor("blue");
$bplot->SetFillColor("red");

$graph->SetShadow();
$graph->Stroke();
?>
Untuk membuat chart batang, kita gunakan modul jpgraph_bar.php. Hasil dari script di atas adalah

Kita juga dapat membuat chart garis dan batang menjadi satu (combined). Berikut ini adalah script untuk menggabungkan kedua bentuk chart menjadi satu.
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

$dataJum = array();
$dataTh = array();

mysql_connect("localhost","root","root");
mysql_select_db("data");

$query = "SELECT tahun, jmlpria + jmlwanita as jum FROM sensus WHERE negara = 'A'";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
 array_unshift($dataJum, $data['jum']);
 array_unshift($dataTh, $data['tahun']);
}

$graph = new Graph(300,200,"auto");
$graph->SetScale("textlin");

// menampilkan plot batang dari data jumlah penduduk
$bplot = new BarPlot($dataJum);
$graph->Add($bplot);

// menampilkan plot garis dari data jumlah penduduk
$lineplot=new LinePlot($dataJum);
$graph->Add($lineplot);

$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Grafik Jumlah Penduduk Negara A");
$graph->xaxis->title->Set("Tahun");
$graph->yaxis->title->Set("Jumlah");
$graph->xaxis->SetTickLabels($dataTh);

$graph->title->SetFont(FF_FONT1,FS_BOLD);

$lineplot->SetColor("blue");
$bplot->SetFillColor("red");

$graph->SetShadow();
$graph->Stroke();
?>
Untuk membuat chart batang, kita gunakan modul jpgraph_bar.php. Hasil dari script di atas adalah


Script yang terakhir… sekarang kita coba tampilkan chart batang yang menunjukkan data statistik jumlah masing-masing pria dan wanita untuk setiap negara pada tahun 1990. Dalam hal ini chart batang akan dikelompokkan berdasarkan jenis kelamin. Nah… ini dia scriptnya
<?php
include ("modul/jpgraph.php");
include ("modul/jpgraph_line.php");
include ("modul/jpgraph_bar.php");

// inisialisasi array untuk jumlah pria, wanita dan negara

$dataPria = array();
$dataWanita = array();
$dataNegara = array();

// koneksi ke mysql

mysql_connect("localhost","root","root");
mysql_select_db("data");

// query SQL untuk menampilkan nama negara dan jumlah prianya pada tahun 1990

$query = "SELECT negara, jmlpria, jmlwanita FROM sensus WHERE tahun = '1990' ORDER BY negara DESC";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
    // menambahkan data hasil query ke array
    array_unshift($dataNegara, $data['negara']);
    array_unshift($dataPria, $data['jmlpria']);
    array_unshift($dataWanita, $data['jmlwanita']);
}

// membuat image dengan ukuran 400x200 px
$graph = new Graph(400,200,"auto");
$graph->SetScale("textlin");

// menampilkan diagram batang untuk data pria dengan warna orange
// pada diagram batang ditampilkan value data
$bplot1 = new BarPlot($dataPria);
$bplot1->SetFillColor("orange");
$bplot1->value->show();

// menampilkan diagram batang untuk data wanita dengan warna biru
// pada diagram batang ditampilkan value data
$bplot2 = new BarPlot($dataWanita);
$bplot2->SetFillColor("blue");
$bplot2->value->show();

// mengelompokkan grafik batang berdasarkan pria dan wanita
$gbplot = new GroupBarPlot(array($bplot1,$bplot2));
$graph->Add($gbplot);

// membuat legend untuk keterangan pria dan wanita
$bplot1->SetLegend("Pria");
$bplot2->SetLegend("Wanita");
$graph->legend->Pos(0.05,0.5,"right","center");

// mengatur margin image
$graph->img->SetMargin(40,110,20,40);

// menampilkan title grafik dan nama masing-masing sumbu
$graph->title->Set("Grafik Jumlah Penduduk Negara Th 1990");
$graph->xaxis->title->Set("Negara");
$graph->yaxis->title->Set("Jumlah");

// menampilkan nama negara ke sumbu x
$graph->xaxis->SetTickLabels($dataNegara);

// format font title grafik
$graph->title->SetFont(FF_FONT1,FS_BOLD);

// menampilkan efek shadow pada image
$graph->SetShadow();

// menampilkan image ke browser
$graph->Stroke();
?>
Untuk lebih menarik dan lebih informatif kita tambahkan sebuah legend pada grafik tersebut. Legend tersebut menunjukkan warna berbeda untuk pria dan wanita. Hasil dari script di atas adalah


Menarik dan mudah bukan? Bila Anda ingin mendownload semua script di atas termasuk file-file modulnya, silakan download di bawah ini
Download Script dan Modul JpGraph
Update:
Ada tambahan script untuk JpGraph untuk keperluan modul languange nya. Tanpa script ini, JpGraph akan terjadi error. Silakan diekstrak di dalam folder hasil ekstrak script di atas.
Download Languange