Membuat Grafik Dengan Chart.js - Selamat datang di website CopyPasteCode, pada tutorial kali ini kita akan belajar bagaimana membuat grafik pada Codeigniter 4.
Sebelum masuk pada tutorial, nya ada beberapa persyaratan yang harus teman-teman penuhi terlebih dahulu, berikut adalah persyaratan nya :
Sesuai judul bahwa tutorial kita kali ini adalah membuat grafik dengan Codeigniter 4, karena itu bagi teman-teman yang belum menginstall Codeigniter versi 4 ini silahkan untuk download terlebih dahulu
Pada tutorial kali ini saya akan menggunakan plugins Chart.js untuk membuat grafik pada project Codeigniter 4 kita, teman-teman klik link diatas untuk mendownload plugins Chart.js
Sampai disini saya anggap teman-teman sudah menginstall Codeigniter versi 4 dan mendownload plugins Chart.js
Sebelum masuk pada tutorial, kita perlu mengetahui langkah-langkah apa saja yang harus kita lakukan atau kerjakan, berikut adalah langkah-langkahnya :
- Membuat Database & Tabel
- Koneksi Database
- Membuat Controllers
- Membuat Models
- Membuat Views
- Menambahkan Routes
Baiklah tanpa perlu menunggu lama langsung saja kita masuk ke tahap atau langkah yang pertama
Bagi teman-teman yang sudah mempunyai database serta tabel yang akan digunakan untuk membuat grafik dan sudah terkoneksi pada project Codeigniter 4, teman-teman bisa skip langkah 1 dan 2 diatas.
Membuat Database & tabel
Buka XAMPP Control Panel, jalankan Apache dan MySQL setelah itu buka phpMyAdmin kemudian buat database dengan nama crud, dan jalankan query berikut :
-- phpMyAdmin SQL Dump
-- version 4.9.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: May 14, 2022 at 02:01 PM
-- Server version: 10.3.16-MariaDB
-- PHP Version: 7.3.6
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: `crud`
--
-- --------------------------------------------------------
--
-- Table structure for table `mahasiswa`
--
CREATE TABLE `mahasiswa` (
`nim` char(14) NOT NULL,
`nama` varchar(100) NOT NULL,
`tempat_lahir` varchar(100) NOT NULL,
`tanggal_lahir` date NOT NULL,
`jenis_kelamin` enum('Laki-laki','Perempuan') NOT NULL,
`prodi` enum('Matematika','Sistem Informasi','Statistika') NOT NULL,
`alamat` varchar(50) DEFAULT NULL,
`email` varchar(100) DEFAULT NULL,
`no_hp` char(12) DEFAULT NULL,
`foto` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `mahasiswa`
--
INSERT INTO `mahasiswa` (`nim`, `nama`, `tempat_lahir`, `tanggal_lahir`, `jenis_kelamin`, `prodi`, `alamat`, `email`, `no_hp`, `foto`) VALUES
('229', 'Rifki', 'Jerman', '2021-11-30', 'Perempuan', 'Matematika', 'jhgfcvb', NULL, NULL, ''),
('234', 'ma\'jid', 'Singapur', '2021-11-23', 'Perempuan', 'Matematika', 'lk', NULL, NULL, ''),
('235', 'Kevin', 'Arso', '2021-12-02', 'Laki-laki', 'Statistika', 'hihi', NULL, NULL, ''),
('236', 'nikolas', 'Malaysia', '1998-11-22', 'Laki-laki', 'Matematika', 'jojo', NULL, NULL, ''),
('237', 'yanto', 'Belanda', '1997-11-01', 'Laki-laki', 'Matematika', 'haha', NULL, NULL, ''),
('238', 'Yanti', 'Ubruk', '2022-03-01', 'Laki-laki', 'Matematika', 'cwec', NULL, NULL, ''),
('239', 'mr.kisman', 'Japan', '2022-03-31', 'Perempuan', 'Matematika', 'Uprus', NULL, NULL, ''),
('253', 'andrian', 'jayapura', '2022-04-05', 'Laki-laki', 'Sistem Informasi', 'arso 11', NULL, NULL, ''),
('257', 'Mr.dedy', 'Thailand', '2022-04-07', 'Laki-laki', 'Statistika', 'tes input gambar', NULL, NULL, '1649259805_08b52b5ef9dec1b2e9f3.png'),
('258', 'yohio', 'korea', '2022-04-13', 'Perempuan', 'Statistika', 'tetes inhtrtrhput gambar', NULL, NULL, '1649261693_5dad7cdda4a79dcabf7f.png'),
('42', 'Stinkoy', 'Indonesia', '2021-05-02', 'Laki-laki', 'Sistem Informasi', 'dwdqw', NULL, NULL, '');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `mahasiswa`
--
ALTER TABLE `mahasiswa`
ADD PRIMARY KEY (`nim`);
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 */;
Copy Query SQL diatas, lalu paste pada menu SQL di phpMyAdmin, seperti contoh berikut :
Setelah membuat database dan menjalankan Query SQL diatas, maka tampilan database dan tabel kita menjadi seperti dibawah ini
Berikut adalah tampilan database dan tabel yang akan kita gunakan :
Koneksi Database
Jika teman-teman sudah membuat Database dan tabel seperti petunjuk diatas, sekarang kita akan menghubungkan database tersebut dengan project Codeigniter 4 kita.
Buka project Codeginter teman-teman pada Code Editor, disini saya menggunakan Code Editor Visual Studio Code, saya menyarankan teman-teman juga untuk menggunakan Visual Studio Code ini sebagai Code Editor.
Temukan file dengan nama env, kemudian copy file tersebut dan rename menjadi .env seperti contoh berikut :
Setelah itu buka file .env, lalu modifikasi seperti berikut :
sebelum di modifikasi
Hapus tanda # pada baris yang diberi tanda anak panah.
sesudah di modifikasi
Membuat Controllers
Untuk pembuatan Controllers disini saya akan menggunakan perintah php make:controller, untuk membuat controller secara otomatis.
Buka terminal pada vs code dengan cara Ctrl+` , kemudian ketikan perintah berikut :
php spark make:controller Grafik Tunggu sampai proses pembuatan Controllers dengan nama Grafik selesai dibuat
Setelah itu tambahkan script berikut pada controller Grafik :
<?php
namespace App\Controllers;
use App\Models\ModelGrafik;
use App\Controllers\BaseController;
class Grafik extends BaseController
{
public function __construct()
{
$this->grafik = new ModelGrafik();
}
public function index()
{
$data = [
'title' => "Grafik",
'program_studi' => $this->grafik->prodi(),
'jenis_kelamin' => $this->grafik->jenis_kelamin(),
];
return view('grafik/grafik', $data);
}
}Membuat Models
Untuk pembuatan Models, kurang lebih caranya hampir sama dengan cara membuat Controller yaitu dengan menggunakan perintah bawaan Codeigniter 4 sebagai berikut :
php spark make:model ModelGrafik Tunggu sampai proses pembuatan Models dengan nama Model_grafik selesai dibuat
Setelah itu tambahkan script berikut pada ModelGrafik :
<?php
namespace App\Models;
use CodeIgniter\Model;
class ModelGrafik extends Model
{
protected $DBGroup = 'default';
protected $table = 'mahasiswa';
protected $primaryKey = 'nim';
protected $returnType = 'array';
protected $protectFields = true;
public function prodi()
{
return $this->db->table('mahasiswa')
->select('count(*) as jumlah, prodi')->groupBy('prodi')
->get()->getResultArray();
}
public function jenis_kelamin()
{
return $this->db->table('mahasiswa')
->select('count(*) as jumlah, jenis_kelamin')->groupBy('jenis_kelamin')
->get()->getResultArray();
}
}
Membuat Views
Buka folder app/Views, lalu tambahkan folder dengan nama grafik, kemudian tambahkan file dengan nama grafik.php seperti contoh gambar berikut :
Setelah itu tambahkan script berikut pada grafik.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="<?= base_url(); ?>/dist/css/bootstrap.min.css" rel="stylesheet">
<title><?= $title; ?></title>
</head>
<body>
<div class="container">
<h2 class="text-center mt-3 mb-4">Membuat Garfik Dengan Codeigniter 4</h2>
<div class="row">
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card shadow mb-4" id="grap">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Program Studi </h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-area">
<canvas id="myBarChart"></canvas>
</div>
</div>
<div class="card-footer"></div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Jenis Kelamin</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-pie pt-2 pb-2">
<canvas id="myPieChart"></canvas>
</div>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url(); ?>/jquery/jquery.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= base_url(); ?>/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="<?= base_url(); ?>/chart.js/Chart.min.js"></script>
<script>
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';
// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php foreach ($program_studi as $key => $prodi) {
echo "'" . $prodi['prodi'] . "',";
} ?>],
datasets: [{
label: "Jumlah",
backgroundColor: "#4e73df",
hoverBackgroundColor: "#2e59d9",
borderColor: "#4e73df",
data: [<?php foreach ($program_studi as $key => $prodi) {
echo "'" . $prodi['jumlah'] . "',";
} ?>],
borderWidth: 1
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
maxTicksLimit: 60
},
maxBarThickness: 25,
///ukuran Bar grafik
}],
yAxes: [{
ticks: {
min: 1,
maxTicksLimit: 10,
padding: 5,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#FF0000",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
},
}
});
// Pie Chart Example
var ctx = document.getElementById("myPieChart"); // Selector yang akan digunakan untuk menampilkan pie
var myPieChart = new Chart(ctx, {
type: 'pie', // Tipe grafik yang akan ditampikan
data: {
labels: ["Laki-laki", "Perempuan"],
datasets: [{
data: [<?php foreach ($jenis_kelamin as $key => $jenkel) {
echo "'" . $jenkel['jumlah'] . "',";
} ?>],
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'], // Warna background grafik pie
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'], // Warna background grafik pie ketika disentuh
hoverBorderColor: "rgba(234, 236, 244, 1)", // Warna border grafik pie ketika disentuh
}],
},
options: {
maintainAspectRatio: false,
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
responsive: true,
maintainAspectRatio: false,
},
cutoutPercentage: 70,
},
});
</script>
</body>
</html>
Menambahkan Routes
Sebenarnya tanpa kita menambahkan Routes pun grafiknya sudah bisa kita tampilkan, namun kita gunakan saja, agar lebih terbiasa untuk menggunakan Routes ini karena menurut saya fitur ini juga sangat penting nantinya.
Buka folder app/Cofig, temukan file Routes.php, lalu buka file Routes.php dan tambahkan routes berikut :
$routes->get('/grafik', 'Grafik::index');Letakkan routes diatas setelah routes Home seperti contoh gambar berikut :
Testing
Jalankan Local Development Server Codeginter, lalu akses URL berikut http://localhost:8080/grafik, jika teman-teman sudah mengikuti langkah-langkah diatas maka seharusnya akan tampil seperti berikut :
Bandingkan data grafik diatas dengan data yang ada pada database, periksa apakah benar jumlah mahasiswa dengan prodi Matematika berjumlah 6 orang , mahasiswa dengan prodi Sistem Informasi berjumlah 2 orang dan mahasiswa dengan prodi Statistika berjumlah 3 orang.
Jika teman-teman mempunyai database & tabel yang berbeda dari tutorial ini silahkan lakukan, pengecekan atau validasi data untuk mamastikan bahwa grafik tersebut menampilkan data yang valid.
Saya kira kurang lebih seperti itu, tentang bagaimana cara membuat Chart atau Grafik pada Framework Codeginter 4.
Jika ada yang ingin teman-teman tanyakan, jangan ragu untuk bertanya pada kolom komentar dibawah, dan sampai jumpa pada tutorial-tutorial berikutnya, semoga bermanfaat bye..byee ^^
Tags
Codeigniter
Makasih bang, sangat membantu
BalasHapussama-sama bg, makasih udh mampir ^^
HapusSangat sangat membantu projek skripsi saya, manteppppp... terima kasih banyakk bang admin
BalasHapusSama-sama kak, terimakasih udah mampir ^^ semoga lancar ya skripsiannya
Hapushai bang aan
BalasHapushallo bang dian
Hapusbang sebelumnya terimakasih telah menyediakan tutorialnya sangat bermanfaat sangat bagus, thank youu
BalasHapussemoga bermanfaat ya kak ^^
Hapusada sekedar saran untuk bagian
BalasHapuscss bootstrap diganti dengan url online
script src diganti dengan url online
serta menggunakan url online chart.min.js
jangan menggunakan load di local supaya bisa langsung dites oleh pemula :D
siap kak, terima kasih untuk sarannya
BalasHapus