بِسْمِ اللَّهِ Mudah-mudahan tutorial Codeigniter 4 – Membuat Dashboard Sederhana ini bermanfaat
Dashboard dalam sebuah aplikasi atau website adalah salah satu bagian penting. Dengan dashboard kita bisa menganalisa kinerja dari aplikasi atau website. Dan juga tidak menutup kemungkinan dengan dashboard tersebut kita bisa mengambil keputusan terkait dengan data atau informasi yang ada dashboard tersebut. Contoh disini saya mencoba membuat dashboard tentang jumlah pengunjung per hari selama 7 hari terakhir.
Persiapan Codeigniter 4 – Membuat Dashboard Sederhana
Untuk melanjutkan tutorial pastikan sudah:
Harus sudah mengerjakan tentang Pengunjung/Visitor di tutorial ini
Atau mengerjakan Versi original
Pada tutorial tentang Pengunjung/Visitor sebelumnya datanya disimpan ke tabel visitor. Pada tabel tersebut sudah cukup lengkap informasi yang diperlukan untuk membuat dashboard, terima kasih banyak kepada Versi original. Kita tinggal menambahkan query untuk keperluan dashboard tersebut. Baik sekarang kita langsung saja ke coding.
Pertama
Update model \app\Models\VisitorModel.php yaitu dengan menambahkan fungsi get_data_for_last_week. Scriptnya sebagai berikut:
function get_data_for_last_week() {
$query = $this->db->query('SELECT SUM(no_of_visits) as visits,
DATE_FORMAT(access_date,"%d-%m-%Y") AS day
FROM ' . $this->table . '
WHERE DATE(access_date) >= CURDATE() - INTERVAL 7 DAY
GROUP BY DATE(access_date)');
if ($query->resultID->num_rows > 0) {
return $query->getResult();
}
return NULL;
}
Kedua
Yang paling atas setelah namespace tambahkan script berikut
use App\Models\VisitorModel;
Selanjutnya mengupdate fungsi index pada controller \app\Controllers\Home.php dengan script sebagai berikut
public function index()
{
...
$visitorModel = new VisitorModel();
$data['datalastweek'] = $visitorModel->get_data_for_last_week();
...
}
Ketiga
Selanjutnya menampilkan data ke dalam dashboard, disini komponen yang digunakan adalah Chart.js. Saya mengambil dan mengotak-atiknya dari template SB Admin. Buka view index yang ada di \app\Views\index.php dan update dengan script berikut untuk judul dan tempat chart, juga menambah judul bagian Berita.
<h1 class="h3 mb-4 text-gray-800">Pengunjung</h1>
<!-- Content Row -->
<div class="row">
<div class="col-xl-4">
<!-- Area Chart -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">7 Hari Terakhir</h6>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
<hr>
</div>
</div>
</div>
</div>
<!-- Berita terbaru -->
<h1 class="h3 mb-4 text-gray-800">Berita Terbaru</h1>
Menambahkan section untuk javascript sebagai berikut:
<?= $this->section('script-js') ?>
<script src="<?= base_url() ?>/assets/vendor/chart.js/Chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function number_format(number, decimals, dec_point, thousands_sep) {
// * example: number_format(1234.56, 2, ',', ' ');
// * return: '1 234,56'
number = (number + '').replace(',', '').replace(' ', '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function(n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
<?php
$i = 1;
$count = count($datalastweek);
foreach ($datalastweek as $data) {
if ($i == $count) {
echo "'" . $data->day . "'";
} else {
echo "'" . $data->day . "',";
}
$i++;
}
?>
],
datasets: [{
label: "Pengunjung",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [
<?php
$i = 1;
$count = count($datalastweek);
foreach ($datalastweek as $data) {
if ($i == $count) {
echo "" . $data->visits . "";
} else {
echo "" . $data->visits . ",";
}
$i++;
}
?>
],
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '' + number_format(value);
}
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
callbacks: {
label: function(tooltipItem, chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
}
}
}
}
});
});
</script>
<?= $this->endSection() ?>
Silakan update index.php tersebut sedemikian rupa sehingga hasil akhir scriptnya sebagai berikut:
<?= $this->extend('template/index') ?>
<?= $this->section('page-content') ?>
<h1 class="h3 mb-4 text-gray-800">Pengunjung</h1>
<!-- Content Row -->
<div class="row">
<div class="col-xl-4">
<!-- Area Chart -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">7 Hari Terakhir</h6>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
<hr>
</div>
</div>
</div>
</div>
<!-- Berita terbaru -->
<h1 class="h3 mb-4 text-gray-800">Berita Terbaru</h1>
<div class="row">
<?php
foreach($news as $row):
$rowNews = "row".$row->id;
echo $$rowNews;
endforeach;
?>
</div>
<div class="row">
<a href="<?= base_url() ?>/news/index_all" class="btn btn-primary btn-icon-split btn-block">
<span class="icon text-white-50">
<i class="fas fa-flag"></i>
</span>
<span class="text">Lihat Semua Berita</span>
</a>
</div>
<?= $this->endSection() ?>
<?= $this->section('script-js') ?>
<script src="<?= base_url() ?>/assets/vendor/chart.js/Chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function number_format(number, decimals, dec_point, thousands_sep) {
// * example: number_format(1234.56, 2, ',', ' ');
// * return: '1 234,56'
number = (number + '').replace(',', '').replace(' ', '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function(n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
<?php
$i = 1;
$count = count($datalastweek);
foreach ($datalastweek as $data) {
if ($i == $count) {
echo "'" . $data->day . "'";
} else {
echo "'" . $data->day . "',";
}
$i++;
}
?>
],
datasets: [{
label: "Pengunjung",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [
<?php
$i = 1;
$count = count($datalastweek);
foreach ($datalastweek as $data) {
if ($i == $count) {
echo "" . $data->visits . "";
} else {
echo "" . $data->visits . ",";
}
$i++;
}
?>
],
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '' + number_format(value);
}
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
callbacks: {
label: function(tooltipItem, chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
}
}
}
}
});
});
</script>
<?= $this->endSection() ?>
Akhirnya
Saatnya melihat hasilnya. Berikut ini tampilan dashboard
Demikian tutorial Codeigniter 4 – Membuat Dashboard Sederhana. Silakan dilanjutkan dan dikembangkan lagi.
Untuk contohnya bisa dilihat di https://demo.belajardisiniaja.com/
Mudah-mudahan tutorial ini bermanfaat.
