Cara menggunakan barchart php mysql

Selamat datang di warung belajar, melanjutkan pembahasan dari seri tutorial PHP, pada part 55 kita akan belajar membuat grafik untuk menampilkan data dari database mysql dengan php menggunakan Chart.js

Nội dung chính Show

Persiapan Library Chart.js
Buat Folder Project
Membuat Database
Membuat File Koneksi.php
Membuat Grafik Penjualan Per Barang
Membuat Laporan Penjualan Per Bulan
Membuat Grafik PIE
Source Code Hasil Belajar
Tutorial Seminggu Menguasai PHP Dan MySQL
Tutorial HTML White Box – Panduan Belajar HTML Lengkap
Tutorial Web Programming Black Box – Tutorial Belajar HTML, CSS, Bootstrap 4, PHP OOP, dan MySQL – Study Kasus Membuat Aplikasi Sistem Management Stok Barang
Tutorial Membuat Aplikasi Dengan Codeigniter, Javascript Dan Ajax Jquery
Tutorial Membangun Layanan SMS Gateway Berbasis Client Server
Tutorial Membuat Aplikasi Dinamis Dengan HTML CSS Boostrap PHP Dan MySQL
TUTORIAL MEMBANGUN APLIKASI BERBASIS WEB DENGAN PHP MYSQL DAN BOOTSTRAP
Tutorial Tips Dan Trik Aplikatif Master PHP

Chart.js adalah salah satu library Javascript yang digunakan untuk membuat grafik.

Pada tutorial ini kita akan membuat grafiknya untuk menampilkan data dari database MySQL.

Persiapan Library Chart.js

Sebelumnya kita memulai kita akan persiapkan dulu library Chart.js, silahkan buka website resmi Chart.js :

https://www.chartjs.org/

didalamnya terdapat banyak jenis chart yang bisa anda buat dengan menggunakan Chart.js, anda melihat contoh grafiknya di menu sample : https://www.chartjs.org/samples/latest/

Kita persiapkan dulu library Chart.js, silahkan mengakses alamat :

https://github.com/chartjs/Chart.js/releases

akan terdapat library chart.js dengan versi yang paling baru, saat tutorial ini dibuat chart.js ada diversi 2.8.0.

Untuk mempermudah anda dalam download library Chart.js, kita sudah siapkan link downloadnya, untuk download library chart.js : Klik Disini

Buat Folder Project

Berikutnya silahkan buat folder projectnya.

Karena dalam contoh ini kita menggunakan xampp, sehingga kita akan simpan file project di drive C:/xampp/htdocs

Dalam contoh ini kita akan buat folder dengan nama belajarchart, sehingga folder project kita ada di direktori C:/xampp/htdocs/belajarchart

Pada direktori tersebut, silahkan letakkan file Chart.js hasil download sebelumnya, lalu berikutnya silahkan buat 4 file PHP lainnya :

grafik_bulan.php
grafik_pie.php
index.php
koneksi.php

baik saya asumsikan teman – teman sudah membuat folder project, serta telah mempersiapkan file seperti gambar diatas.

Membuat Database

Berikutnya silahkan buat sebuah database dengan nama db_penjualan, yang didalamnya terdapat 2 tabel, antara lain :

tabel tb_barang

tabel tb_penjualan

Untuk mempermudah anda dalam membuat database, tabel, serta record didalam tabel, anda bisa menggunakan perintah SQL dibawah ini :

100

101

102

103

104

105

106

107

108

109

110

111

112

113

--phpMyAdmin SQL Dump

--version4.8.4

--https://www.phpmyadmin.net/

--Host:127.0.0.1

--Waktu pembuatan:12Jul2019pada16.18

--Versi server:10.1.37-MariaDB

--Versi PHP:7.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT=0;

START TRANSACTION;

SET time_zone="+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

--Database:`db_penjualan`

CREATE DATABASE IFNOTEXISTS`db_penjualan`DEFAULTCHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE`db_penjualan`;

-- --------------------------------------------------------

--Struktur dari tabel`tb_barang`

CREATE TABLE`tb_barang`(

`id_barang`int(11)NOTNULL,

`barang` varchar(255)NOTNULL

)ENGINE=InnoDB DEFAULTCHARSET=latin1;

--Dumping data untuk tabel `tb_barang`

INSERT INTO`tb_barang`(`id_barang`,`barang`)VALUES

(1,'Redmi Note 7'),

(2,'Samsung M20'),

(3,'Realme 3'),

(4,'Iphone X');

-- --------------------------------------------------------

--Struktur dari tabel`tb_penjualan`

CREATE TABLE`tb_penjualan`(

`id_penjualan`int(11)NOTNULL,

`id_barang`int(11)NOTNULL,

`jumlah`int(11)NOTNULL,

`tgl_penjualan` date NOTNULL

)ENGINE=InnoDB DEFAULTCHARSET=latin1;

--Dumping data untuk tabel`tb_penjualan`

INSERT INTO`tb_penjualan`(`id_penjualan`,`id_barang`,`jumlah`,`tgl_penjualan`)VALUES

(1, 1,5,'2019-01-11'),

(2,3,3,'2019-01-04'),

(3,2,4, '2019-02-11'),

(4,2,3,'2019-03-09'),

(5,3,4,'2019-04-10'),

(6, 4,1,'2019-05-11'),

(7,1,2,'2019-05-05'),

(8,4,7, '2019-06-09'),

(9,3,2,'2019-06-11'),

(10,2,5,'2019-07-11'),

(11, 1,2,'2019-07-12');

--Indexes fordumped tables

--Indeks untuk tabel`tb_barang`

ALTER TABLE`tb_barang`

ADD PRIMARY KEY(`id_barang`);

--Indeks untuk tabel`tb_penjualan`

ALTER TABLE`tb_penjualan`

ADD PRIMARY KEY(`id_penjualan`);

--AUTO_INCREMENT untuk tabel yang dibuang

--AUTO_INCREMENT untuk tabel`tb_barang`

ALTER TABLE`tb_barang`

MODIFY`id_barang`int(11) NOTNULLAUTO_INCREMENT,AUTO_INCREMENT=5;

--AUTO_INCREMENT untuk tabel`tb_penjualan`

ALTER TABLE `tb_penjualan`

MODIFY`id_penjualan`int(11)NOTNULLAUTO_INCREMENT,AUTO_INCREMENT=12;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Baik kita asumsikan teman – teman sudah memiliki database seperti database db_penjualan diatas.

Membuat File Koneksi.php

Silahkan buka file koneksi.php yang sebelumnya kita buat, lalu isikan code dibawah ini :

$host ="localhost";

$user ="root";

$password ="";

$database ="db_penjualan";

$koneksi =mysqli_connect($host,$user,$password,$database);

Keterangan :

Perintah diatas digunakan untuk koneksi ke database db_penjualan yang sebelumnya telah kita buat.
$host dengan nilai “localhost” yang merupakan alamat server databasenya
$user dengan nilai “root” yang merupakan user dari databasenya
$password dengan nilai “” yang merupakan password untuk mengakses database, nilainya kosong karena default dari xampp untuk password user root adalah kosong
$database dengan nilai “db_penjualan” yang merupakan nama dari database yang sebelumnya telah kita buat
Baris 6 adalah perintah untuk melakukan koneksi ke database, dan hasilnya disimpan di variabel $koneksi.

Membuat Grafik Penjualan Per Barang

Baik kita asumsikan anda sudah memiliki database, dan telah membuat sebuah file koneksi.php yang digunakan untuk melakukan koneksi ke database.

Berikutnya kita akan membuat grafik Penjualan Perbarang, silahkan buka file index.php yang sebelumnya telah kita buat, lalu isikan code dibawah ini :

include('koneksi.php');

$produk=mysqli_query($koneksi,"select * from tb_barang");

while($row= mysqli_fetch_array($produk)){

$nama_produk[]=$row['barang'];

$query=mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

$row=$query->fetch_array();

$jumlah_produk[]= $row['jumlah'];

}

<!DOCTYPEhtml>

<html>

<head>

<title>MembuatGrafik MenggunakanChartJS</title>

</head>

<body>

</div>

</body>

</html>

Untuk mengakses file index.php anda bisa mengaksesnya melalui alamat : localhost/belajarchart

maka tampilannya adalah seperti berikut ini :

Maka akan ditampilkan grafik penjualan yang dibagi per barang.

Penjelasan code :

Baris 2 kita include file koneksi.php

$produk=mysqli_query($koneksi,"select * from tb_barang");

Baris 3 kita tuliskan query untuk mengambil data di tabel tb_barang

while($row=mysqli_fetch_array($produk)){

Baris 4 kita extract data hasil query di baris 3 dan datanya kita simpan di variabel $row

$nama_produk[]=$row['barang'];

Baris 5 kita buat array dengan nama $nama_produk, dimana array ini digunakan untuk menyimpan nama barang hasil query dibaris 3

$query=mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

Baris 7 kita menuliskan query untuk menjumlahkan nilai pada kolom jumlah di tabel tb_penjualan, berdasarkan id_barang disetiap perulangan data barang.

$row=$query->fetch_array();

Baris 8 kita membuat variabel $row digunakan untuk menyimpan hasil query di baris 7 kedalam bentuk array dengan perintah fetch_array

$jumlah_produk[]=$row['jumlah'];

Baris 9 kita membuat array $jumlah_produk untuk menyimpan data jumlah disetiap barang yang terjual di tabel tb_penjualan

Nah sampai sini kita memiliki 2 array :

$nama_produk yang berisi nama – nama dari barang
$jumlah_produk yang berisi jumlah penjualan dari masing – masing barang di tabel tb_penjualan

Baris 16 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

Baris 20 kita membuat sebuah object dengan menggunakan tag

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

varctx=document.getElementById("myChart").getContext('2d');

Baris 25 kita menuliskan myChart itu adalah id dari object yang kita buat di baris 20

labels:echojson_encode($nama_produk);?>,

Baris 29 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $nama_produk yang berisi daftar nama barang, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $nama_produk menjadi bentuk JSON

data:echojson_encode($jumlah_produk);?>,

Baris 32 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan per barang, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

backgroundColor:'rgba(255, 99, 132, 0.2)',

Baris 33 anda dapat memodifikasi warna dari chart, dalam contoh ini kita buat warnanya adalah warna merah

borderColor:'rgba(255,99,132,1)',

Baris 34 anda dapat memodifikasi border dari bagian chart

Membuat Laporan Penjualan Per Bulan

Berikutnya kita akan membuat laporan penjualan per bulan, silahkan buka file grafik_bulan.php, lalu isikan code dibawah ini :

include('koneksi.php');

$label= ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

for($bulan =1;$bulan<13;$bulan++)

{

$query=mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where MONTH(tgl_penjualan)='$bulan'");

$row=$query->fetch_array();

$jumlah_produk[]=$row['jumlah'];

}

<!DOCTYPE html>

<html>

<head>

<title>MembuatGrafikMenggunakanChartJS</title>

</head>

<body>

</div>

</body>

</html>

Untuk menampilkan grafiknya anda bisa mengakses alamat : localhost/belajarchart/grafik_bulan.php

Keterangan Code :

Baris 2 kita include file koneksi.php

$label= ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

Baris 3 kita membuat array $label yang berisi data bulan, dimana data bulan ini nanti akan kita jadikan label dari grafik

for($bulan=1;$bulan<13;$bulan++)

Baris 5 kita membuat perulangan dengan menggunakan perintah for, dimana for diawal dari variabel $i dengan nilai 1, dan melakukan perulangan 12 kali, ini kita gunakan untuk menjadi bulan, yang nantinya digunakan sebagai perhitungan data penjualan perbulannya

$query=mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where MONTH(tgl_penjualan)='$bulan'");

Baris 7 setiap perulangannya kita buat query untuk menghitung jumlah pada kolom jumlah dari tabel tb_penjualan yang terjadi pada bulan di variabel $i yaitu dari angka 1 – 12

$row=$query->fetch_array();

Baris 8 kita buat variabel $row untuk menyimpan hasil dari query baris 7

$jumlah_produk[]=$row['jumlah'];

Baris 9 kita membuat array $jumlah_produk, untuk menyimpan data jumlah penjumlahan disetiap bulannya.

Nah sampai sini kita memiliki 2 array :

$label yang berisi nama – nama bulan
$jumlah_produk yang berisi jumlah penjualan di masing – masing bulan

Baris 16 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

Baris 20 kita membuat sebuah object dengan menggunakan tag

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

varctx=document.getElementById("myChart").getContext('2d');

Baris 25 kita menuliskan myChart itu adalah id dari object yang kita buat di baris 20

label:'Grafik Penjualan',

Baris 31 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $label yang berisi daftar nama bulan, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $label menjadi bentuk JSON

data:echojson_encode($jumlah_produk);?>,

Baris 32 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan barang perbulan, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

Untuk warna disini kita sengaja tidak set, sehingga grafik menampilkan warna defaultnya yaitu abu – abu

Membuat Grafik PIE

Berikutnya kita akan membuat grafik PIE untuk menampilkan presentase penjualan dengan bentuk PIE, baik silahkan buka file grafik_pie.php yang sebelumnya telah kita buat, lalu isikan dengan code dibawah ini :

include('koneksi.php');

$produk=mysqli_query($koneksi,"select * from tb_barang");

while($row= mysqli_fetch_array($produk)){

$nama_produk[]=$row['barang'];

$query=mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

$row=$query->fetch_array();

$jumlah_produk[]= $row['jumlah'];

}

<!doctypehtml>

<html>

<head>

<title>PieChart</title>

</head>

<body>

</div>

</body>

</html>

Untuk menampilkan grafik, silahkan mengakses menggunakan alamat : localhost/belajarchart/

Keterangan Code :

Baris 2 kita include file koneksi.php

$produk=mysqli_query($koneksi,"select * from tb_barang");

Baris 3 kita membuat query untuk mengambil data di tabel tb_barang, dan hasil query disimpan di variabel $produk.

while($row=mysqli_fetch_array($produk)){

Baris 4 kita extract hasil query dengan menggunakan perintah while, dimana setiap datanya disimpan di variabel $row

$nama_produk[]=$row['barang'];

Baris 5 kita membuat array $nama_produk yang digunakan untuk menyimpan nama barang disetiap perulangan, array ini yang akan kita gunakan sebagai label grafik

$query=mysqli_query($koneksi,"select sum(jumlah) as jumlah from tb_penjualan where id_barang='".$row['id_barang']."'");

Baris 7 kita membuat query untuk menghitung jumlah di kolom jumlah pada tabel tb_penjualan untuk setiap barangnya, hasil query disimpan di variabel $query

$row=$query->fetch_array();

Baris 8 kita membuat variabel $row yang digunakan untuk menyimpan hasil konversi ke dalam bentuk array

$jumlah_produk[]=$row['jumlah'];

Baris 9 kita membuat array $jumlah_produk untuk digunakan menyimpan data jumlah penjualan disetiap barangnya.

Nah sampai sini kita memiliki 2 array :

$nama_produk yang berisi nama – nama barang
$jumlah_produk yang berisi jumlah penjualan di masing – masing barang

Baris 17 kita memanggil file Chart.js agar kita bisa membuat grafik dengan menggunakan Chart.js

Baris 22 kita membuat sebuah object dengan menggunakan tag

Perintah yang ada di library chart.js ini kita ambil dari dokumentasi chart.js, jadi anda tidak perlu mengetahui fungsinya perbaris yang terpenting anda mengetahui bagian – bagian pentingnya.

data:echojson_encode($jumlah_produk);?>,

Baris 29 kita menuliskan bagian data dari chart, karena sebelumnya kita telah memiliki array dengan nama $jumlah_produk yang berisi jumlah dari penjualan barang perbulan, sehingga kita tinggal menggunakan json_encode untuk konversi array $jumlah_produk menjadi bentuk JSON

label:'Presentase Penjualan Barang'

Baris 42 kita bisa set bagian judul chart

labels:echojson_encode($nama_produk);?>},

Baris 44 kita menuliskan label dari chart, karena sebelumnya kita telah memiliki array dengan nama $nama_produk yang berisi daftar nama barang, sehingga kita tinggal menggunakan perintah json_encode untuk konversi array $nama_produk menjadi bentuk JSON

varctx=document.getElementById('chart-area').getContext('2d');

Baris 51 kita menuliskan bagian ID chart-area yang kita tulis pada baris 22

Source Code Hasil Belajar

Untuk hasil belajar bisa anda download disini :

Source Code Hasil Belajar
Dokumentasi Resmi ChartJs

Baik teman – teman sekian dulu pembahasan tutorial kali ini, kita sudah belajar membuat grafik untuk menampilkan data dari database MySQL dengan PHP menggunakan ChartJS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial berikutnya.

ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?

Seperti yang anda ketahui bahwa saat ini skill di bidang pemrograman sangatlah dibutuhkan, salah satunya adalah pemograman PHP.
Untuk anda yang ingin serius belajar pemrograman PHP, Warung Belajar Memiliki Beberapa Paket Tutorial yang bisa membantu anda dalam belajar Pemrograman PHP, dari mulai step – step dasar hingga mampu membuat aplikasi berbasis web dengan menggunakan PHP.

Paket Tutorial ini berisi video tutorial belajar pemrograman berbahasa indonesia, cocok sekali untuk anda yang sedang belajar pemrograman PHP, bahkan untuk orang awam sekalipun.

Paket Tutorial ini juga dilengkapi dengan study kasus yang akan mempermudah pemahaman anda dalam belajar pemrograman, Mari berinvestasi untuk menambah skill dalam menguasai Pemrograman PHP

Tutorial Seminggu Menguasai PHP Dan MySQL
Rp80,000 Add to cart
Tutorial HTML White Box – Panduan Belajar HTML Lengkap
Rp70,000Add to cart
Tutorial Web Programming Black Box – Tutorial Belajar HTML, CSS, Bootstrap 4, PHP OOP, dan MySQL – Study Kasus Membuat Aplikasi Sistem Management Stok Barang
Rp120,000 Add to cart
Tutorial Membuat Aplikasi Dengan Codeigniter, Javascript Dan Ajax Jquery
Rp95,000 Add to cart
Tutorial Membangun Layanan SMS Gateway Berbasis Client Server
Rp145,000Add to cart
Tutorial Membuat Aplikasi Dinamis Dengan HTML CSS Boostrap PHP Dan MySQL
Rp120,000 Add to cart
TUTORIAL MEMBANGUN APLIKASI BERBASIS WEB DENGAN PHP MYSQL DAN BOOTSTRAP
Rp95,000Add to cart
Tutorial Tips Dan Trik Aplikatif Master PHP
Rp85,000Add to cart

kode php

Cara menggunakan barchart php mysql

Persiapan Library Chart.js

Buat Folder Project

Membuat Database

Membuat File Koneksi.php

Membuat Grafik Penjualan Per Barang

Membuat Laporan Penjualan Per Bulan

Membuat Grafik PIE

Source Code Hasil Belajar

ANDA INGIN SERIUS BELAJAR PEMROGRAMAN PHP ?

Tutorial Seminggu Menguasai PHP Dan MySQL

Tutorial HTML White Box – Panduan Belajar HTML Lengkap

Tutorial Web Programming Black Box – Tutorial Belajar HTML, CSS, Bootstrap 4, PHP OOP, dan MySQL – Study Kasus Membuat Aplikasi Sistem Management Stok Barang

Tutorial Membuat Aplikasi Dengan Codeigniter, Javascript Dan Ajax Jquery

Tutorial Membangun Layanan SMS Gateway Berbasis Client Server

Tutorial Membuat Aplikasi Dinamis Dengan HTML CSS Boostrap PHP Dan MySQL

TUTORIAL MEMBANGUN APLIKASI BERBASIS WEB DENGAN PHP MYSQL DAN BOOTSTRAP

Tutorial Tips Dan Trik Aplikatif Master PHP

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội