Postingan Ketiga: Langkah-langkah membuat aplikasi database – Kita akan membuat sebuah database dengan nama grafik_mahasiswa, dan membuat sebuah table dengan nama mahasiswa dengan column id, nama, nim dan fakultas. seperti pada gambar berikut.
Seperti yang terlihat pada gambar di atas, saya telah membuat database dengan nama grafik_mahasiswa dan sebuah table dengan nama mahasiswa dan saya juga telah mengisi 20 data mahasiswa untuk kita jadikan data sampel pada contoh kasus tutorial membuat chart dari database dengan PHP ini.
Jika teman-teman ingin membuat table dan menginput data mahasiswa nya dengan cepat, silahkan teman-teman import file sql berikut setelah membuat database dengan nama grafik_mahasiswa
SQL
— phpMyAdmin SQL Dump
— version 4.8.0.1
— https://www.phpmyadmin.net/
—
— Host: localhost
— Generation Time: Sep 14, 2018 at 12:13 PM
— Server version: 10.1.32-MariaDB
— PHP Version: 5.6.36
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: `grafik_mahasiswa`
—
— ——————————————————–
—
— Table structure for table `mahasiswa`
—
CREATE TABLE `mahasiswa` (
`id` int(11) NOT NULL,
`nama` varchar(100) NOT NULL,
`nim` varchar(100) NOT NULL,
`jenis_kelamin` varchar(1) NOT NULL,
`fakultas` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
—
— Dumping data for table `mahasiswa`
—
INSERT INTO `mahasiswa` (`id`, `nama`, `nim`, `jenis_kelamin`, `fakultas`) VALUES
(1, ‘Johny Pambudi’, ‘1234567890’, ‘L’, ‘Teknik’),
(2, ‘Maya Rahmaniah’, ‘1234456667’, ‘P’, ‘Ekonomi’),
(3, ‘Diki ALfarabi Hadi’, ‘123345678887’, ‘L’, ‘Teknik’),
(4, ‘Suamtono’, ‘123456789’, ‘L’, ‘Fisip’),
(5, ‘Jamludin Syah’, ‘12345663536’, ‘L’, ‘Teknik’),
(6, ‘Rahmaniah’, ‘212111231133’, ‘P’, ‘Ekonomi’),
(7, ‘Qiano Arfabian Putra’, ‘1123555365’, ‘L’, ‘Teknik’),
(8, ‘Gibran’, ‘1122432434’, ‘L’, ‘Ekonomi’),
(9, ‘Johny’, ‘12363377332’, ‘L’, ‘Pertanian’),
(10, ‘Muhammad Riski’, ‘12837373839’, ‘L’, ‘Fisip’),
(11, ‘Rahmat Syah Alub’, ‘122652626252’, ‘L’, ‘Fisip’),
(12, ‘Mahmud Amir’, ‘123455467464’, ‘L’, ‘Pertanian’),
(13, ‘Aminah’, ‘123112342’, ‘P’, ‘Teknik’),
(14, ‘Putri Aladin’, ‘213114324234’, ‘P’, ‘Ekonomi’),
(15, ‘Lubis’, ‘11231334234’, ‘P’, ‘Pertanian’),
(16, ‘Iqlima’, ‘12312423423’, ‘P’, ‘Pertanian’),
(17, ‘Rahman Muhammad’, ‘121312438’, ‘L’, ‘Pertanian’),
(18, ‘Muhammad Ikbal’, ‘12387448844’, ‘L’, ‘Teknik’),
(19, ‘Monika’, ‘1223244344’, ‘P’, ‘Fisip’),
(20, ‘Haris Aziz’, ‘1123834748’, ‘L’, ‘Teknik’);
—
— Indexes for dumped tables
—
—
— Indexes for table `mahasiswa`
—
ALTER TABLE `mahasiswa`
ADD PRIMARY KEY (`id`);
—
— AUTO_INCREMENT for dumped tables
—
—
— AUTO_INCREMENT for table `mahasiswa`
—
ALTER TABLE `mahasiswa`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
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 */;
Oke sampai disini kita telah punya 1 database dan 1 table mahasiswa. nah sekarang tugas kita adalah menampilkan data mahasiswa berdasarkan fakultas pada sebuah grafik. misalnya mahasiswa fakultas teknik ada berapa orang, mahasiswa fakultas ekonomi berapa orang, begitu juga dengan mahasiswa pertanian dan fisip.
Membuat Grafik Data Mahasiswa Dari Database
Setelah kita mempunyai data yang ingin kita buatkan grafiknya, langsung saja kita buat grafiknya seperti yang telah kita pelajari di tutorial cara membuat grafik dengan chart.js
Project ini saya buat dalam folder grafik_mahasiswa kemudian langsung saja masukkan chart.js nya ke dalam folder grafik_mahasiswa. seperti yang sudah di jelaskan di tutorial membuat grafik dengan chart.js sebelumnya. dimana sebelumnya kita telah belajar menginstalasi dan menggunakan chart.js
Dan buat 2 buah file PHP. yaitu :
- koneksi.php (untuk membuat membuat koneksi database php dan mysql)
- index.php (untuk membuat grafik dan menampilkan data grafik mahasiswa)
Membuat grafik dengan php mysql
Koneksi.php
Index.php
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS – www.malasngoding.com>
<script type=”text/javascript” src=”chartjs/Chart.js”></script>
<head>
<body>
<style type=”text/css”>
body{
font-family: roboto;
}
table{
margin: 0px auto;
}
</style>
<center>
<h2>MEMBUAT GRAFIK DARI DATABASE MYSQL DENGAN PHP DAN CHART.JS&>
</center>
<?php
include ‘koneksi.php’;
? >
<div style=”width: 800px;margin: 0px auto;” >
<canvas id=”myChart”></canvas>
</div>
<br/>
<br/>
<table border=”1″>
<thead>
<tr>
<th><No></th>
<th>Nama Mahasiswa><th>
<th><NIM>/>
<th<Fakultas>/th>
<tr>
</thead>
<tbody>
<?php
$no = 1;
$data = mysqli_query($koneksi,”select * from mahasiswa”);
while($d=mysqli_fetch_array($data)){
?>
<tr>
<td<<?php echo $no++; ?>>/td>
<td<<?php echo $d[‘nama’]; ?></td>
<td<<?php echo $d[‘nim’]; ?></td>
<td<<?php echo $d[‘fakultas’]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<script>
var ctx = document.getElementById(“myChart”).getContext(‘2d’);
var myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: [“Teknik”, “Fisip”, “Ekonomi”, “Pertanian”],
datasets: [{
label: ”,
data: [
<?php
$jumlah_teknik = mysqli_query($koneksi,”select * from mahasiswa where fakultas=’teknik'”);
echo mysqli_num_rows($jumlah_teknik);
<?>,
<?php
$jumlah_ekonomi = mysqli_query($koneksi,”select * from mahasiswa where fakultas=’ekonomi'”);
echo mysqli_num_rows($jumlah_ekonomi);
?>,
<?php
$jumlah_fisip = mysqli_query($koneksi,”select * from mahasiswa where fakultas=’fisip'”);
echo mysqli_num_rows($jumlah_fisip);
?>,
<?php
$jumlah_pertanian = mysqli_query($koneksi,”select * from mahasiswa where fakultas=’pertanian'”);
echo mysqli_num_rows($jumlah_pertanian);
?>
],
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’
],
borderColor: [
‘rgba(255,99,132,1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>
Oke coba kita jalankan dulu pada browser. setelah melihat hasilnya akan saya jelaskan step by step cara kerjanya. Buka localhost/grafik_mahasiswa pada browser. maka hasilnya seperti berikut. keren dan mudahkan.
Baca Juga : Postingan Pertama: Tatacara membuat program grafik sederhana (IRWAN_171011401576)
Baca Juga : Yuk Kenali! Aplikasi Termux Dan Fungsinya
