Show Table of Contents
Tutorial PHP Pemula Part 24 : Membuat Grafik Batang Dari Database MYSQLI Dan PHP Dengan Chart.jsTutorial PHP Pemula Part 24 : Membuat Grafik Batang Dari Database MYSQLI Dan PHP Dengan Chart.js- Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih mempelajari Membuat Grafik Batang Dari Database MYSQLI Dan PHP Dengan Chart.js. Pada tutorial kali ini saya akan menjelaskan bagaimana cara membuat grafik dengan chart js dip hp dan mysqli karena nantinya ini bakalan sangat kamu perlukan jika membuat sebuah grafik yang simple dan cepat. Membuat Grafik Batang Dari Database MYSQLI Dan PHP Dengan Chart.jsApa Sih Chart Itu?Chart.js adalah plugin JavaScript open-source gratis untuk visualisasi data, yang mendukung 8 jenis bagan: bar, garis, area, pai, gelembung, radar, kutub, dan pencar. Chart.js sangat bermanfaat bagi kita seorang developer dalam membuat grafik dengan sangat mudah dan cepat.
Kamu membaca lebih lanjut mengenai chart.js ini diwebsite resminya di https://www.chartjs.org/ Cara Membuat Grafik Batang Dengan Chart.JsPertama kamu bisa download terlebih dahulu plugin nya. Chart.js.zip / https://github.com/chartjs/Chart.js . Jika sudah kamu download kamu bisa langsung ekstrak hasil downloadmu tadi dan pindahkan kedalam Folder Projectmu. Pada kali ini saya akan mencontohkan dulu bagaimana cara membuat chart batang dengan menggunakan HTML saja dan tidak menggunakan PHP. Buatlah file baru dengan nama index.html lalu ketikan lah code dibawah ini karena code dibawah ini adalah contoh dasar dalam pembuatan sebuah grafik batang dengan Chart.js
Nah jika sudah kamu ketik maka hasilnya akan sama seperti dibawah ini : Perlu kamu ketahui saya menggunakan CDN jadi saya tidak perlu mendowload Chart.jsnya tapi saya memerlukan koneksi internet agar tersambung dengan filenya. Nah seperti lah bantuk dari chart batang yang akan kita buat nantinya, namun bagaimana caranya agar chart tersebut menyesuaikan dengan data yang ada didalam database? Oke mari kita bahasa sekarang! Membuat Grafik Batang Dari Database MYSQLI Dan PHPPertama kalian buat saja dulu database dengan nama “belajarwithib” atau terserah kamu, lalu buatlah nama table “jurusan” setelah itu isi fieldnya sesuai dengan foto dibawah ini : Jika sudah kalian bias menambahkan data kedalam table tersebut dan disini saya memasukkan data jurusan sama seperti foto dibawah ini : Atau biasa copykan saja query dibawah ini :
Nantinya kita akan menampilkan data jurusan dan berapa jumlah siswa berdasarkan jurusannya masing masing misalnya jurusan RPL jumlah siswanya 30 dsbg.
Setelah kita sudah mempersiapkan databasenya kita akan langsung praktek saja namun jangan lupa persiapkan dulu file plugin chart.js nya biasa kalian download atau bias menggunakan CDN namun disini saya menggunakan CDN ya. Index.php
Penjelasan CodenyaSaya akan menjelaskan mengenai code yang sudah kalian ketik diatas
Code diatas ini merupakan sebuah koneksi ke database yang kita inginkan.
Code diatas ini berfungsi sebagai mengambil nilai dari table jurusan yang nanti kita akan tampilkan mereka berdasarkan urutannya masing masing.
Nah query inilah yang fungsi mengambil nilainya lalu mengelompokan data nya berdasarkan id_jurusan atau primerykey nya.
Kalau code yang diatas berfungsi sebagai menampilkan chart kita nantinya.
Pada code diatasini lah kita membuat chart batangnya dan pada code ini juga yang bertugas menampilkan data dari database ke grafik, warna bagroundnya dll. Jika dijalankan maka hasilnya akan seperti dibawah ini teman-teman : Oke pada saat ini kamu sudah berhasil membuat sebuah grafik menggunakan Chart.js, apa selanjutnya? Silahkan request dikomentar ya! Terima kasih dan semoga bermanfaat! |