Selamat datang di website CopypasteKode, Pada tutorial kali ini kita akan masuk pada seri tutorial part #5 yaitu membuat halaman dashboard.
Karena tutorial kali merupakan tutorial bersambung, maka dari itu saya sarankan teman-teman yang mengikuti tutorial ini agar mulai dari tutorial part #1 hingga selesai, agar teman-teman tidak mengalami kesulitan dalam mengikuti seri tutorial kali ini, berikut adalah seri tutorial sebelumnya :
- #1 Database & Koneksi Database
- #2 Membuat Folder Project dan Koneksi Database
- #3 Integrasi Template AdminLTE versi 3
- #4 Crud with Jquery Datatables + Sweet Alert 2
Disini saya mengasumsikan teman-teman sudah mengikuti seri tutorial part sebelumnya pada link diatas.
Seperti biasa sebelum kita masuk pada tutorial, penting untuk mengetahui prosedur atau langkah-langkah yang akan kita lakukan pada tutorial kali ini, dengan tujuan tutorial-nya lebih mudah dipahami dan lebih terstruktur, berikut langkah-langkah-nya :
- Membuat halaman dashboard
- Membuat membuat grafik dengan Chart.js
Membuat Halaman Dashboard
Buat file baru dengan nama dashboard.php, seperti berikut :
Kemudian isikan script berikut pada dashboard.php
<?php
session_start();
include "koneksi.php";
$thisPage = "Dashboard";
include "template/header.php";
include "template/sidebar.php";
include "template/topbar.php";
?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h3>Dashboard</h3>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<?php $uri_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$uri_segments = explode('/', $uri_path); ?>
<li class="breadcrumb-item"><a href="<?= $uri_segments[0]; ?>"><?= $uri_segments[1]; ?></a></li>
<li class="breadcrumb-item active"><?= $uri_segments[2]; ?></li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<section class="content">
<div class="container-fluid">
<div class="row">
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<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 Berdasarkan 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 Berdasarkan Jenis Kelamin</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-pie">
<canvas id="myPieChart"></canvas>
</div>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</div>
</section>
<?php
include "template/footer.php";
?>
Membuat Grafik dengan Chart.js
Buka file footer.php yang berada didalam folder template, lalu tambahkan script berikut :
<script src="public/plugins/chart.js/chart.min.js"></script>Letakkan script diatas seperti contoh gambar berikut :
setelah itu buka kembali file dashboard.php, kemudian tambahkan script berikut :
<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
include "koneksi.php";
$sql = "select DISTINCT prodi from tbl_mahasiswa order by prodi asc";
$hasil = mysqli_query($kon, $sql);
while ($data = mysqli_fetch_array($hasil)) {
$prodi = $data['prodi'];
echo '"' . $prodi . '",';
}
?>],
datasets: [{
label: "Jumlah",
backgroundColor: "#4e73df",
hoverBackgroundColor: "#2e59d9",
borderColor: "#4e73df",
data: [<?php
$sql = "select DISTINCT prodi from tbl_mahasiswa order by prodi asc";
$hasil = mysqli_query($kon, $sql);
while ($data = mysqli_fetch_array($hasil)) {
$prodi = $data['prodi'];
$jumlah = mysqli_num_rows(mysqli_query($kon, "select prodi from tbl_mahasiswa where prodi='$prodi'"));
echo '"' . $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: [<?= mysqli_num_rows(mysqli_query($kon, "select * from tbl_mahasiswa where jenis_kelamin='Laki-laki'")); ?>, <?= mysqli_num_rows(mysqli_query($kon, "select * from tbl_mahasiswa where jenis_kelamin='Perempuan'")); ?>],
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: true,
caretPadding: 5,
responsive: true,
maintainAspectRatio: false,
},
legend: {
display: false
},
cutoutPercentage: 70,
},
});
</script>
Letakkan script chart diatas pada file dashboard.php, setelah <?php include "template/footer.php";
Setelah itu teman-teman buka kembali halaman dashboard pada web browser kemudian refresh tab yang teman-teman gunakan, maka akan tampil sebagai berikut :
Sampai disini kita telah berhasil membuat halaman dashboard beserta grafik dengan plugins chart.js.
Gimana teman-teman mudah bukan.? bukkkaannn...!! 😂eiittss mudah dong pastinya jika teman-teman mengikuti semua langkah-langkah diatas tanpa skip-skip.
Saya rasa cukup sampai disini dulu tutorial part #5 kali ini, jika ada teman-teman yang ingin bertanya jangan ragu untuk mengunjungi kolom komentar dibawah dan sampai jumpa pada tutorial part-part selanjutnya semoga bermanfaat bye...byee 👋
Tags
PHP