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
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 :
//www.chartjs.org/
didalamnya terdapat banyak jenis chart yang bisa anda buat dengan menggunakan Chart.js, anda melihat contoh grafiknya di menu sample : //www.chartjs.org/samples/latest/
Kita persiapkan dulu library Chart.js, silahkan mengakses alamat :
//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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 :
|
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
Chủ Đề |