Membuat Grafik Highcharts Dengan Php MyAdmin Menggunakan Ajax Bootsrap

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
August 03, 2018

Selamat Malam sobat blogger kali ini kami akan share bagaimana membuat Grafik Highcharts Dengan Php MyAdmin. Kami telah banyak membahas cara membuat grafik menggunakan Google chart, tetapi kali ini kami memperluas konten kami dengan membuat grafik menggunakan highcharts.



Read More: 
Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 1
Cara Menggunakan Google Chart (Line Chart) Pada PHP Part 2

Yang pertama kita lakukan adalah membuat databasenya terlebih dahulu. disni kami membuat database dengan nama chart



 -- phpMyAdmin SQL Dump
-- version 4.8.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Jun 04, 2018 at 04:00 AM
-- Server version: 10.1.32-MariaDB
-- PHP Version: 7.2.5

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


-- --------------------------------------------------------

--
-- Table structure for table `tblcomplaints`
--

CREATE TABLE `tblcomplaints` (
  `complaintNumber` int(11) NOT NULL,
  `userId` int(11) NOT NULL,
  `floor` int(11) NOT NULL,
  `room` varchar(50) NOT NULL,
  `facilityName` varchar(50) NOT NULL,
  `buildingName` varchar(50) NOT NULL,
  `typedamage` varchar(50) NOT NULL,
  `complaintDetails` mediumtext NOT NULL,
  `complaintFile` varchar(50) DEFAULT NULL,
  `regDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `remark` mediumtext NOT NULL,
  `techName` varchar(50) NOT NULL,
  `status` varchar(25) DEFAULT NULL,
  `lastUpdationDate` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tblcomplaints`
--

INSERT INTO `tblcomplaints` (`complaintNumber`, `userId`, `floor`, `room`, `facilityName`, `buildingName`, `typedamage`, `complaintDetails`, `complaintFile`, `regDate`, `remark`, `techName`, `status`, `lastUpdationDate`) VALUES
(1, 1, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'Sementara di proses pak ya', 'admin', 'in process', '2018-05-23 05:24:19'),
(2, 2, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-23 11:30:33'),
(3, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-24 04:47:28'),
(4, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test ya', 'admin', 'closed', '2018-05-24 14:47:07'),
(5, 5, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'test', 'admin', 'in process', '2018-05-24 14:50:36'),
(6, 6, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', 'admin', 'in process', '2018-05-29 09:18:09'),
(7, 7, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', 'sementara di proses pak ya', 'admin', 'in process', '2018-05-23 05:25:17'),
(8, 8, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(9, 9, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(10, 10, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-01-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(11, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', 'admin', 'in process', '2018-05-24 15:30:21'),
(12, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', 'sementara jalan pak ya', 'admin', 'in process', '2018-05-23 05:26:05'),
(13, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', 'admin', 'closed', '2018-05-24 04:48:13'),
(14, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(15, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(16, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(17, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(18, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(19, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(20, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-02-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(21, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(22, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(23, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'selesai pak', 'admin', 'closed', '2018-05-24 04:48:46'),
(24, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'Di proses pak ya', 'admin', 'in process', '2018-05-24 15:20:39'),
(25, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(26, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(27, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(28, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(29, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(30, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-03-21 04:41:41', 'mantap', 'admin', 'in process', '2018-05-24 15:21:30'),
(31, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(32, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(33, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(34, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(35, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(36, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(37, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', 'Selesai Pak ya', 'admin', 'closed', '2018-05-24 15:15:30'),
(38, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(39, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(40, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(41, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(42, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', 'admin', 'in process', '2018-05-24 15:43:13'),
(43, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(44, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', 'sementara pak', 'admin', 'in process', '2018-05-24 15:14:57'),
(45, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(46, 10, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-04-10 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(47, 1, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(48, 2, 1, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(49, 3, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(50, 4, 2, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(51, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(52, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(53, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'closed', '2018-05-24 15:30:10'),
(54, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(55, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'in process', '2018-05-24 15:31:16'),
(56, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(57, 5, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(58, 6, 3, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(59, 7, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(60, 8, 4, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00'),
(61, 9, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', 'admin', 'in process', '2018-05-24 15:29:55'),
(62, 20, 5, 'Engineering and Technolog', 'Platform', 'Campus Building', 'Urgent', 'Test Pak ya', '', '2018-05-20 04:41:41', '', '', NULL, '0000-00-00 00:00:00');


--
-- Indexes for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  ADD PRIMARY KEY (`complaintNumber`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tblcomplaints`
--
ALTER TABLE `tblcomplaints`
  MODIFY `complaintNumber` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=63;
COMMIT; 

Selanjutnya yang harus kalian lakukan adalah memanggil database, tetapi ssebelum memanggil database kita harus terkoneksi dengan daabase yang tadi kalian masukkan, berikut cara koneksinya. Buat file baru dengan nama config.php

 <?php
// conection
define('DB_SERVER','localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'chart');
$con = mysqli_connect(DB_SERVER,DB_USER,DB_PASS,DB_NAME);
// Check connection
if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Berikutnya yang mesti anda lakukan adalah membuat formnya, disini kami menggunakan Ajax Bootsrap. berikut tampilan formnya, kemudian beri nama index.php pada form ini kami akan memanggil database di atas berdasarkan bulan.

 <?php session_start();
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
  <title>LINE CHART</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>

  
  <?php
  $tahun=date("Y");
  $total = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints where YEAR(regDate)='$tahun'");
  $data = mysqli_fetch_row($total);
  $totalall = $data[0];

  $hasil1 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='01' and YEAR(regDate)='$tahun'");
  $data1 = mysqli_fetch_row($hasil1);
  $jumlah1 = $data1[0];


  $hasil2 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='02' and YEAR(regDate)='$tahun'");
  $data2 = mysqli_fetch_row($hasil2);
  $jumlah2 = $data2[0];


  $hasil3 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='03' and YEAR(regDate)='$tahun'");
  $data3 = mysqli_fetch_row($hasil3);
  $jumlah3 = $data3[0];


  $hasil4 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='04' and YEAR(regDate)='$tahun'");
  $data4 = mysqli_fetch_row($hasil4);
  $jumlah4 = $data4[0];


  $hasil5 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='05' and YEAR(regDate)='$tahun'");
  $data5 = mysqli_fetch_row($hasil5);
  $jumlah5 = $data5[0];


  $hasil6 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='06' and YEAR(regDate)='$tahun'");
  $data6 = mysqli_fetch_row($hasil6);
  $jumlah6 = $data6[0];


  $hasil7 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='07' and YEAR(regDate)='$tahun'");
  $data7 = mysqli_fetch_row($hasil7);
  $jumlah7 = $data7[0];


  $hasil8 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='08' and YEAR(regDate)='$tahun'");
  $data8 = mysqli_fetch_row($hasil8);
  $jumlah8 = $data8[0];


  $hasil9 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='09' and YEAR(regDate)='$tahun'");
  $data9 = mysqli_fetch_row($hasil9);
  $jumlah9 = $data9[0];


  $hasil10 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='10' and YEAR(regDate)='$tahun'");
  $data10 = mysqli_fetch_row($hasil10);
  $jumlah10 = $data10[0];

  $hasil11 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='11' and YEAR(regDate)='$tahun'");
  $data11 = mysqli_fetch_row($hasil11);
  $jumlah11 = $data11[0];


  $hasil12 = mysqli_query($con,"SELECT count(*) as jum FROM tblcomplaints WHERE MONTH(regDate)='12' and YEAR(regDate)='$tahun'");
  $data12 = mysqli_fetch_row($hasil12);
  $jumlah12 = $data12[0];

  ?>


</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="#">GOOGLE CHART</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
       <ul class="dropdown-menu"></ul>
     </li>
   </ul>
 </div>
</nav>
<br />
<h2 align="center">LINE CHART</h2>
<br />
<form method="post">
 <div class="form-group">
   <div id="container"></div>
 </div>
</form>

</div>


<script>
  Highcharts.chart('container', {

    chart: {
      type: 'column'
    },

    title: {
      text: 'The Complaint Chart'
    },
    subtitle: {
      text: 'Total Complaint, Not Process, In Process, and Closed Complaint, Periode: <?php $tgl=date('Y'); echo $tgl; ?>'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
    },


    tooltip: {
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
     shared: true
   },

   plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'Total Complaint',
    data: [<?php echo $jumlah1 = $data1[0]; ?>, <?php echo $jumlah2 = $data2[0]; ?>, <?php echo $jumlah3 = $data3[0]; ?>, <?php echo $jumlah4 = $data4[0]; ?>, <?php echo $jumlah5 = $data5[0]; ?>, <?php echo $jumlah6 = $data6[0]; ?>, <?php echo $jumlah7 = $data7[0]; ?>, <?php echo $jumlah8 = $data8[0]; ?>, <?php echo $jumlah9 = $data9[0]; ?>, <?php echo $jumlah10 = $data10[0]; ?>, <?php echo $jumlah11 = $data11[0]; ?>, <?php echo $jumlah12 = $data12[0]; ?>],
  },]
});
</script>

</body>
</html> 

Kami sengaja langsung membuat form dan menghubungkannya kedabase langsung karena kita ingin melihat partisipasi anda untuk berkomentar di bawah. Sekian share kali ini semoga apa yang kami share bermanfaat bagi kalian semua. 


Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER