Cara Membuat Grafik Batang dengan PHP, HTML dan CSS

Posted by Admin on

Tuesday, February 20, 2018

Suatu program dapat mengelola data-data dan menghasilkan informasi yang dibutuhkan bagi penggunanya. Biasanya informasi tersebut berupa angka-angka hasil olahan yang mungkin memerlukan ketelitian khusus untuk membandingkan informasi yang satu dengan yang lainnya. Dalam hal ini suatu output visual menjadi solusi dalam menyelesaikan permasalahan mengenai perbandingan ini. Mengapa? Karena dengan output berbentuk grafik kita langsung dapat melihat hasilnya dimana secara mendasar tentu akan dapat dipastikan mana yang mengalami peningkatan dan penurunan.

Membuat Aplikasi Web Live Date And Time Dengan HTML dan Js

Baca : Aplikasi Pengecekan Kata Dengan Fungsi PHP levenshtein

Untuk membuat grafik ini sebenarnya cukup banyak tutorial yang berada di internet dimana dapat kita gunakan sesuai dengan kebutuhan. Namun dalam artikel tutorial kali ini kita mencoba untuk membuat diagram tersebut dengan menggunakan bahasa pemrograman PHP, HTML dan CSS. Tentu hasilnya mungkin tidak terlalu wow, namun kita dapat belajar bagaiman proses terbentuknya diagram tersebut mulai dari data mentah hingga terbentuk grafik. Mari kita coba kerjakan.

Data awal kita cukup menggunakan array sebagai penampun data yang akan digunakan.


$data[1][1] = “Andi Budiman”;
$data[1][2] = 105;
$data[2][1] = “Cecilia Aviani”;
$data[2][2] = 125;
$data[3][1] = “Ferry Antoni”;
$data[3][2] = 87;
$data[4][1] = “Jessica”;
$data[4][2] = 95;

Data diatas merupakan array 2 demensi dengan index 1 untuk menampun nama, sedangkan index 2 untuk menampung hasil penjualan bulanan. Dalam hal ini sebagai contoh kasus kita mencoba untuk membuat diagram penjualan dengan ketentuan:

Target bulanan 100 sales
Bonus target adalah selisih penjualan dikali Rp 25.000
Pendapatan Bulanan adalah Gaji Pokok Sebesar Rp 2.500.000 ditambah dengan bonus target.

Mari kita kerjakan kodingnya.


<!DOCTYPE html>
<html>
<head>
 <title>Membuat Grafik Dengan PHP, HTML dan CSS</title>
</head>
<body>
<h1>Laporan Penjualan Bulan Januari 2018</h1>
<hr>
<?php
//fungsi nominal
function nominal($uang)
{
 return number_format($uang, 0, ',','.');
}
//inisiasi data awal
$data[1][1] = "Andi Budiman";
$data[1][2] = 105;
$data[2][1] = "Cecilia Aviani";
$data[2][2] = 125;
$data[3][1] = "Ferry Antoni";
$data[3][2] = 87;
$data[4][1] = "Jessica";
$data[4][2] = 95;

//dapatkan nilai total penjualan 
for($i=1;$i<=count($data);$i++) { $totalpj += $data[$i][2]; }

//dapatkan persentase
for($i=1;$i<=count($data);$i++) { 
 $data[$i][3] = ($data[$i][2]/$totalpj)*100;
 $data[$i][3] = round($data[$i][3], 2); //bulatkan nilai persentase
}
?>
<div class="batas">
 <b>Grafik Penjualan Karyawan (Persentase Terhadap Total)</b>
 <hr>
 <table width="100%" border="0">
 <?php for($i=1;$i<=count($data);$i++) { ?>
 <tr>
  <td align="left" width="150"><?php echo $data[$i][1];?></td>
  <td align="left">
  <?php 
  echo "<div style='width:{$data[$i][3]}%; background-color:Yellow;'>";
  echo " ({$data[$i][3]}%) {$data[$i][2]} ";
  echo "</div>";
  ?>  
  </td>
 </tr>
 <?php } ?>
 </table>
 <hr>
 <b>Grafik Penjualan Karyawan (Persentase Terhadap Target (100 Sales))</b>
 <hr>
 <table width="390" border="0">
 <tr>
  <td align="left" width="150">Target</td>
  <?php
  $max = 200;
  for($i=1;$i<=4;$i++) { 
   $range = ($i/$max)*100*100;
   echo "<td align='right' width='50' style='border-right:1px solid black;' bgcolor='#ccc'>$range</td>";
  }
  ?>
 </tr>
 <?php
 for($i=1;$i<=count($data);$i++) { 
 $data[$i][3] = ($data[$i][2]/200)*100;
 $data[$i][3] = round($data[$i][3], 2); //bulatkan nilai persentase
 }
 ?>
 <?php 
 for($i=1;$i<=count($data);$i++) 
 { 
  $persen = ($data[$i][2]/100)*100;
 ?>
 <tr>
  <td align="left" width="150"><?php echo $data[$i][1];?></td>
  <td align="left" colspan="4">
  <?php 
  echo "<div style='width:{$data[$i][3]}%; background-color:Yellow;'>";
  echo "{$data[$i][2]} ";
  echo "</div>";
  ?>  
  </td>
 </tr>
 <?php } ?>
 </table>
 <hr>
 <b>Income Bulanan</b>
 <hr>
 <table width="100%" border="1">
 <tr>
  <th>Nama</th>
  <th width="100">Gaji Pokok</th>
  <th width="100">Bonus</th>
  <th width="100">Total</th>
 </tr>
 <?php 
 for($i=1;$i<=count($data);$i++) { 
 $gp    = 2500000;
 if($data[$i][2] > 100) {
  $bonus = ($data[$i][2] - 100) * 25000; //hitung bonus
 } else { $bonus = 0; }
 $total = $gp + $bonus;
 ?>
 <tr>
  <td align="left"><?php echo $data[$i][1];?></td>
  <td align="right"><?php echo nominal($gp);?></td>
  <td align="right"><?php echo nominal($bonus);?></td>
  <td align="right"><?php echo nominal($total);?></td>
 </tr>
 <?php } ?>
 </table>
</div>
</body>
</html>

Berikut diatas adalah kode lengkap dari aplikasi ini, untuk pembuatan nominal kita menggunakan function sendiri, dimana default dari integer tidak menyertakan pemisah ribuan. Untuk itu perlu dibuat sebuah fungsi yang dapat menghandel hal tersebut.
Aplikasi diatas memiliki 2 tampilan grafik, dimana grafik yang pertama adalah grafik dengan sudut pandang persentase dari total penjualan dibulan itu. Sedangkan grafik kedua adalah grafik dengan sudut pandang persentase terhadap target. Jika ada yang ingin ditanyakan boleh meninggalkan komentar dibawah ini ^^ selamat mencoba yah

Hasil