Tutorial Codeigniter 4 : Membuat Grafik dengan menggunakan Library Chart.js
 |
| Penggunaan Library Chart.js Untuk Membuat Laporan Dalam Bentuk Diagram/grafik |
Pada tutorial sebelumnya, kita telah membuat grafik dengan memanfaatkan library chart.js yang dapat anda lihat pada link berikut https://www.artmedia.id/2022/12/penggunaan-library-chart-untuk-membuat-laporan-dalam-bentuk-diagram-grafik.html
Maka dalam tutorial kali ini kita akan membuat sebuah aplikasi dengan data yang ditampilkan dalam bentuk grafik dan tentunya kita masih menggunakan framework codeigniter. Ada beberapa bahan-bahan yang perlu disiapkan seperti :
1. Codeigniter
Codeigniter merupakan framework php utama yang akan kita gunakan dalam tutorial ini. Sebelumnya saya sudah membahas mengenai cara instal codeigniter anti gagal dan anda dapat melihat di link https://www.artmedia.id/2022/08/cara-instal-codeigniter-4-melalui-composer-anti-gagal.html
2. Chart.js
Chart.js adalah salah satu library yang mendukung grafik dengan ukuran yang ringan. Library ini sangat sederhana untuk menggambarkan grafik garis (line), batang (bar), area dan bentuk donat (donut charts) dan lain sebagainya. Untuk penggunaannya telah kita bahas pada link ini https://www.artmedia.id/2022/12/penggunaan-library-chart-untuk-membuat-laporan-dalam-bentuk-diagram-grafik.html
File chart.js yang telah anda unduh, anda dapat menempatkannya pada folder public seperti pada gambar di bawah ini :
Setting Database
Database yang akan kita gunakan dengan nama “my-apps”, apabila anda belum membuat database tersebut maka silahkan dibuat terlebih dahulu, dan buat tabel "sales" seperti pada gambar di bawah baru kemudian isikan data dummy.
Membuat Route
Buka file app/config/routes.php dan tambahkan perintah route di dalamnya
$routes->get('sales', 'Sales::index');
Membuat Controller
Dalam membuat file controller, saya menggunakan command line, silahkan ketikkan perintah seperti di bawah ini :
php spark create:controller sales
Perbedaan versi pada codeigniter terkadang terdapat peraturan baru dalam membuat file controller dengan menggunakan command. Apabila dengan perintah di atas menghasilkan pesan kesalahan, maka anda dapat mencoba kembali dengan perintah ini php spark make:controller sales
Apabila berhasil, maka akan ada file controller baru pada folder app/controllers/sales.php. Buka file tersebut dan ketikkan syntax seperti di bawah ini :
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\SalesModel;
class Sales extends BaseController{
public function __construct(){
helper('form');
}
public function index(){
$this->SalesModel = new SalesModel();
$data=array(
'sales'=>$this->SalesModel->get_sales()
);
return view('v_sales',$data);
}
}
Membuat Model
Dapat anda lihat pada file controller yang sebelumnya kita buat. Kita memanggil file model dengan nama SalesModel. Seperti biasa, untuk membuat model kita dapat menggunakan perintah php spark make:model SalesModel
Buka file model yang terdapat pada folder app/Models/SalesModel.php kemudian ketikkan syntax di bawah ini :
<?php
namespace App\Models;
use CodeIgniter\Model;
class SalesModel extends Model{
public function get_sales(){
return $this->db->table('sales')->get()->getResultArray();
}
}
Membuat View
View merupakan tampilan aplikasi yang dapat kita lihat melalui browser. Ini merupakan langkah akhir dalam pembuatan aplikasi grafik kita yang datanya di ambil dari sebuah database. Buat file view dengan nama v_sales.php di dalam folder app/Views dan buat terlebih dahulu perintah simulasi (pengetasan) apakah data dari database dapat ditampilkan atau tidak dengan perintah di bawah ini :
<?php
print_r($sales);
?>
Atau bisa juga dengan perintah :
<?php
foreach ($sales as $key => $value){
$thn[]= $value['year'];
$prft[]= $value['profit'];
}
echo json_encode($thn);
?>
Kemudian, apabila datanya telah berhasil ditampilkan, maka anda dapat lanjut membuat syntax grafik-nya dengan code seperti di bawah ini :
<?php
foreach ($sales as $key => $value){
$thn[]= $value['year'];
$prft[]= $value['profit'];
}
?>
<html>
<head>
<title>chart</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="<?= base_url() ?>/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: <?php echo json_encode($thn)?>,
datasets: [{
label: 'Profit Income',
data: <?php echo json_encode($prft) ?>,
//background-color & border-color
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>
Tutorial Codeigniter 4 : Cara Instal Codeigniter 4 Melalui Composer
Tutorial Codeigniter 4 : Cara Membuat CRUD dengan Mudah
Panduan Cara Installasi MySQL di Windows 10
Membuat database dan tabel dengan HeidiSQL