Membuat grafik dengan dengan bahasa pemorgraman php
Membuat grafik dengan php itu sangat mudah, simpel dan sederhana. Sebelum kita mulai membuat grafik dengan php kita siapkan terlebih dahulu siapkan peralatan apa aja yang kita butuhkan untuk memnuat grafik dengan php :
1. Boostrap
Nah kalian sudah pasti sering dengar apa itu boostrap, boostrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web kalian bisa download boostrap di http://getbootstrap.com/ . agar tampilanya menarik .
2. XAMPP
Apa itu XAMPP, sebuah software yang fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl.
Membuat grafik dengan php itu wajib mengunakan yang namanya database karena kita harus menyimpan datanya.
3. Editor kesayangan anda
tidak banyak yang saya bahas pada editor ini karena ini cukup banyak juga. kalian bisa mengunakan editor kesayangan anda kalo saya disini sih mengunakan Dreamweaver Cs6. masih banyak editor yang bisa kalian gunakan seperti notepad ++, sublime, dan masih banyak lainya.
untuk membuat grafik dengan php pertama tama kalian buat database seperti ini seperti yang sudah saya posting sebelumnya.
Baca juga : Membuat database SQL
setelah membuat database diatas silahkan kalian membuat koneksi.php
koneksi.php
<?php
mysql_connect("localhost","root","") or die ("Koneksi Gagal");
mysql_select_db("coding_cerdas") or die ("Database Tidak Terakses");
?>
|
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Batekom.com [DEMO]</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/blog-post.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="http://batekom.com">Coding Cerdas </a>
</div>
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Content Column -->
<div class="col-lg-12">
<!-- Blog Post -->
<!-- Title -->
<h1>MEMBUAT GRAFIK DENGAN PHP</h1>
<!-- Author -->
<p class="lead">
by <a href="#">CodingCerdas</a>
</p>
<hr>
<!-- Post Content -->
<?php include "column.php";?>
<hr>
-
</div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © <a href="http://batekom.com">Batekom.com</a> 2015</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
column.php
<?php
//Include Koneksi
include "koneksi.php";
//Membuat Query
$q=mysql_query("select * from rekapmhs");
?>
<!-- File yang diperlukan dalam membuat chart -->
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#view').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Jumlah Mahasiswa per Program Studi'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Program Studi'
]
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
<?php
while($r=mysql_fetch_array($q)){
echo "{ name: '".$r["nmprogdi"]."',data: [".$r["jmlmhs"]."]},";
}
?>
]
});
});
</script>
<div id="view" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
Cukup Simpel dan mudahkan
bagi yang males ngoding atau bongkar bongkar kalian bisa download grafiknya disini..
semoga ilmunya bisa bermanfaat ya gays.
1 comments:
Click here for commentsWhat's up to every single one, it's really a fastidious for me to go to see this web site, it includes precious Information.