August 9, 2011 at 4:05 am Leave a comment

membuat grafik chart karena saya akan memberikan tutorial cara membuat grafik statistik hanya dengan perintah PHP sederhana dan ditunjang oleh CSS (Cascade Style Sheet).  Kasus kali ini, akan menerapkan  representasi data mahasiswa berdasarkan jenis kelaminnya. Andaikan kita memiliki tabel database dan datanya sebagai berikut:

1.CREATE TABLE `mhs` (
2.`nim` varchar(10),
3.`nama` varchar(10),
4.`jenisKelamin` varchar(10),
5.PRIMARY KEY  (`nim`)
6.);
1.INSERT INTO `mhs` VALUES ('A001', 'A', 'LAKI-LAKI');
2.INSERT INTO `mhs` VALUES ('A002', 'B', 'LAKI-LAKI');
3.INSERT INTO `mhs` VALUES ('A003', 'C', 'LAKI-LAKI');
4.INSERT INTO `mhs` VALUES ('A004', 'D', 'PEREMPUAN');
5.INSERT INTO `mhs` VALUES ('A005', 'E', 'LAKI-LAKI');

Untuk outputnya, kita nanti akan berusaha membuat script yang menampilkan grafik seperti di bawah ini

Grafik dengan PHP dan CSS

Perhatikan gambar di atas, bahwa ketika kita dekatkan mouse ke grafik batangnya maka akan muncul keterangan data statistiknya. Efek tersebut kita buat tanpa menggunakan script apapun, kecuali hanya CSS doang. Simpel tapi menarik bukan?

Trus.. gimana ide dasar membuat grafiknya? terutama membuat grafik batangnya? Dalam hal ini grafik batang kita buat menggunakan CSS sedangkan panjang pendeknya grafik batang tersebut tergantung jumlah data yang kita hitung menggunakan script PHP.

Untuk membuat sebuah batang dengan CSS, kita cukup membuat tag seperti ini:

1.<div style="height: 10px; width: 10%; background-color: red;" title="..."></div>

Atribut ‘height’ digunakan untuk mengatur lebar dari batang (dalam hal ini menggunakan satuan pixel). Selanjutnya ‘width’ untuk menentukan panjang batang. Anda bisa menggunakan satuan pixel maupun prosentase. Bila Anda menggunakan prosentase maka prosentase yang dimaksud adalah relatif terhadap panjang jendela browser. Misalkan diberikan ‘width: 10%’ maka panjang batang adalah 10% dari panjang jendela browser. Sedangkan atribut ‘background-color’ untuk mengatur warna batang, dan ‘title’ untuk memberikan title dari batang tersebut. Efek pemberian ‘title’ tampak seperti pada gambar output di atas yaitu akan muncul keterangan (tool tips) ketika mouse mengenai batang tersebut.

Nah… untuk selanjutnya kita hanya bermain-main pada atribut ‘width’ dan ‘title’ untuk membuat tampilan output seperti di atas. Kedua atribut ini nanti kita buat dinamis tergantung jumlah datanya.

Trus.. untuk mengatur panjang pendeknya batang gimana caranya? caranya adalah dengan menggunakan skala. Wah.. ada matematikanya ya? jelas donk… wah mentang-mentang yang nulis artikel ini orang matematika ya? he.. 3x nggak juga, karena kebetulan topik ini ada sangkut pautnya dengan matematika :-)

Nah.. bagaimana penggunaan skalanya? OK kita misalkan kita tentukan panjang grafik maksimum adalah 30% dari panjang jendela browser. Karena 30% ini panjang maksimum, maka kejadian ini akan terjadi ketika ada item data yang jumlahnya 100%. Sebagai contoh misalkan ada 10 mahasiswa, dan semuanya pria (prosentase pria 100%). Dengan demikian grafik batang untuk pria ini panjangnya adalah 30%. Nah.. dari asumsi ini, kita tinggal atur skalanya berarti untuk item data sejumlah n% maka panjang batangnya adalah (n*30/100)%. OK, paham ya idenya?

Dengan demikian, berdasarkan ide di atas berarti sebelum mulai membuat grafiknya, kita harus dapatkan dulu data prosentase setiap item data, dalam hal ini jumlah laki-lakinya berapa prosen begitu pula perempuannya. Setelah jumlah prosentase masing-masing diketahui, barulah kita gunakan untuk mengatur panjang grafik batang menggunakan skala di atas.

So.. script untuk membuat grafik statistik mahasiswa berdasarkan jenis kelamin kita buat sbb:

01.<?php
02.
03.// koneksi ke mysql
04.mysql_connect("dbhost", "dbuser", "dbpass");
05.mysql_select_db("dbname");
06.
07.// mencari jumlah laki-laki dari database
08.$query = "SELECT count(*) AS jumCowok FROM mhs WHERE jenisKelamin = 'LAKI-LAKI'";
09.$hasil = mysql_query($query);
10.$data  = mysql_fetch_array($hasil);
11.$jumCowok = $data['jumCowok'];
12.
13.// mencari jumlah perempuan dari database
14.$query = "SELECT count(*) AS jumCewek FROM mhs WHERE jenisKelamin = 'PEREMPUAN'";
15.$hasil = mysql_query($query);
16.$data  = mysql_fetch_array($hasil);
17.$jumCewek = $data['jumCewek'];
18.
19.// menghitung total mahasiswa
20.$total = $jumCowok + $jumCewek;
21.
22.// menghitung prosentase laki-laki dan perempuan
23.$prosenCowok = $jumCowok/$total * 100;
24.$prosenCewek = $jumCewek/$total * 100;
25.
26.// menentukan panjang grafik batang berdasarkan prosentase
27.$panjangGrafikCowok = $prosenCowok * 30 / 100;
28.$panjangGrafikCewek = $prosenCewek * 30 / 100;
29.
30.?>
31.
32.<h2>Statistik Mahasiswa Berdasarkan Jenis Kelamin</h2>
33.
34.<p><b>Laki-laki</b> (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCowok; ?>%; background-color: red;" title="Laki-laki (Jumlah: <?php echo $jumCowok; ?> | <?php echo $prosenCowok; ?>%)"></div></p>
35.
36.<p><b>Perempuan</b> (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%) <div style="height: 10px; width: <?php echo $panjangGrafikCewek; ?>%; background-color: red;" title="Perempuan (Jumlah: <?php echo $jumCewek; ?> | <?php echo $prosenCewek; ?>%)"></div></p>

Nah.. mudah bukan membuatnya?

Oya.. satu lagi yang perlu saya tambahkan. Lantas.. bagaimana bila kejadiannya keseluruhan mahasiswanya laki-laki atau perempuan? pastilah nantinya ada prosentase yang 0% dan akibatnya grafik batangnya tidak muncul karena width nya ’0%’. Sebenarnya tidak apa-apa sih, namun.. kok kayaknya kurang seru. Meskipun prosentasenya 0%, tapi paling tidak kita munculkan sedikit grafiknya meskipun hanya dengan panjang 1%. Untuk membuat ini, kita harus tambahkan statement IF pada script di atas yaitu pada bagian penentuan panjang grafiknya, sehingga pada bagian tersebut menjadi:

1.if ($prosenCowok == 0) $panjangGrafikCowok = 1;
2.else $panjangGrafikCowok = $prosenCowok * 30 / 100;
3.
4.if ($prosenCewek == 0) $panjangGrafikCewek = 1;
5.else $panjangGrafikCewek = $prosenCewek * 30 / 100;

 

Entry filed under: PHP Programming. Tags: .

ReCaptcha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Calendar

August 2011
M T W T F S S
« Jul    
1234567
891011121314
15161718192021
22232425262728
293031  

Most Recent Posts