332 lines
11 KiB
PHP
332 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Ramal - Peramalan</title>
|
|
<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
|
|
<link rel="icon" href="<?php echo base_url() ?>assets/img/icon.ico" type="image/x-icon" />
|
|
|
|
<!-- Fonts and icons -->
|
|
<?php $this->load->view('_partial/css.php') ?>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="wrapper">
|
|
<?php $this->load->view('_partial/header.php') ?>
|
|
|
|
<!-- Sidebar -->
|
|
<?php $this->load->view('_partial/sidebar') ?>
|
|
<!-- End Sidebar -->
|
|
|
|
<div class="main-panel">
|
|
<div class="content">
|
|
<div class="page-inner mt-2">
|
|
<div class="row mt--2">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center">
|
|
<h4 class="card-title">Ramalan Pengunjung</h4>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-8" style="border:1px solid #dedede; border-radius:5px;">
|
|
<form action="<?= site_url('Peramalan') ?>" method="GET">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="bulan">Bulan</label>
|
|
<?php
|
|
$bln = array('', 'JANUARI', 'FEBRUARI', 'MARET', 'APRIL', 'MEI', 'JUNI', 'JULI', 'AGUSTUS', 'SEPTEMBER', 'OKTOBER', 'NOVEMBER', 'DESEMBER');
|
|
?>
|
|
<select class="form-control" name="bulan" id="bulan" required>
|
|
<?php foreach ($bln as $key => $value) { ?>
|
|
<option value="<?= $key ?>" <?php if (isset($_GET['bulan'])) {
|
|
echo ($key == $_GET['bulan'] ? ' selected ' : '');
|
|
} else {
|
|
echo ($key == intval(date('m')) ? ' selected ' : '');
|
|
} ?>><?= $value ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Tahun</label>
|
|
<input id="tahun" name="tahun" value="<?= isset($_GET['tahun']) ? $_GET['tahun'] : date('Y') ?>" type="number" class="form-control" placeholder="Tahun" style="border: 1px solid #aaa;" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group pt-0">
|
|
<label for="id_pelayanan">Pelayanan</label>
|
|
<select class="form-control" name="id_pelayanan" id="id_pelayanan">
|
|
<option value="">Semua Pelayanan</option>
|
|
<?php foreach ($pelayanan as $pl) { ?>
|
|
<option value="<?= $pl->id ?>" <?php if (isset($_GET['id_pelayanan'])) {
|
|
echo ($pl->id == $_GET['id_pelayanan'] ? ' selected ' : '');
|
|
} ?>><?= $pl->nama ?></option>
|
|
<?php } ?>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<div class="py-2 text-center">
|
|
<a href="javascript:;" onclick="handleReset()" class="btn btn-danger">Reset</a>
|
|
<button type="submit" class="btn btn-primary">Prediksi</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-4" style="border:1px solid #dedede; border-radius:5px;">
|
|
<form id="formAlpha" method="POST">
|
|
<div class="row mt-3">
|
|
<div class="col-md-4">Alpha</div>
|
|
<div class="col-md-8">
|
|
<div class="form-group pt-0">
|
|
<input id="alpha" name="alpha" value="<?= $alpha['alpha'] ?>" class="form-control-sm" placeholder="Alpha" style="border: 1px solid #aaa;" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">Beta</div>
|
|
<div class="col-md-8">
|
|
<div class="form-group pt-0">
|
|
<input id="beta" name="beta" value="<?= $alpha['beta'] ?>" class="form-control-sm" placeholder="Beta" style="border: 1px solid #aaa;" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">Gamma</div>
|
|
<div class="col-md-8">
|
|
<div class="form-group pt-0">
|
|
<input id="gamma" name="gamma" value="<?= $alpha['gamma'] ?>" class="form-control-sm" placeholder="Gamma" style="border: 1px solid #aaa;" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">Periode</div>
|
|
<div class="col-md-8">
|
|
<div class="form-group pt-0">
|
|
<input id="periode" name="periode" value="<?= $alpha['periode'] ?>" type="number" class="form-control-sm" placeholder="Tahun" style="border: 1px solid #aaa;" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <button type="submit" class="btn btn-primary btn-sm">Ubah</button> -->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (count($data) > 0) { ?>
|
|
<!-- HASIL PREDIKSI -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center">
|
|
<h4 class="card-title">Hasil Peramalan</h4>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap justify-content-left pb-2">
|
|
<div class="px-2 pb-2 pb-md-0">
|
|
<h3 class="fw-bold mt-3 mb-0">Pelayanan : <?= isset($detail_pelayanan) ? $detail_pelayanan['nama'] : 'Semua Pelayanan' ?></h3>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-left">
|
|
<div class="px-2 pb-2 pb-md-0">
|
|
<h5 class="fw-bold mt-3 mb-0">MAD : <?= isset($MAD) ? $MAD : '-' ?></h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-left">
|
|
<div class="px-2 pb-2 pb-md-0">
|
|
<h5 class="fw-bold mt-3 mb-0">MSE : <?= isset($MSE) ? $MSE : '-' ?></h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-left">
|
|
<div class="px-2 pb-2 pb-md-0">
|
|
<h5 class="fw-bold mt-3 mb-0">MAPE : <?= isset($MAPE) ? $MAPE . ' %' : '-' ?></h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-left">
|
|
<div class="px-2 pb-2 pb-md-0">
|
|
<h5 class="fw-bold mt-3 mb-0">Rata - rata Kesalahan : <?= isset($ratarataKesalahan) ? $ratarataKesalahan : '-' ?></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- chart -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">Grafik Peramalan</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="chart-container" style="height:350px">
|
|
<canvas id="multipleLineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- table perhitungan -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">Tabel Detail</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="display table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center" style="width:5%;">No.</th>
|
|
<th style="width:15%;">Bulan</th>
|
|
<th class="text-center" style="width:5%;">Aktual</th>
|
|
<th class="text-center" style="width:10%;">Lt</th>
|
|
<th class="text-center" style="width:10%;">Bt</th>
|
|
<th class="text-center" style="width:10%;">St</th>
|
|
<th class="text-center" style="width:10%;">Ft+m</th>
|
|
<th style="width:10%;">Persentase Error</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
$no = 0;
|
|
foreach ($data as $row) {
|
|
$no++ ?>
|
|
<tr>
|
|
<td><?= $no ?>.</td>
|
|
<td><?= $row['bulan'] ?></td>
|
|
<td class="text-center"><?= $row['jumlah'] ?></td>
|
|
<td class="text-right"><?= $row['lt'] ?></td>
|
|
<td class="text-right"><?= $row['bt'] ?></td>
|
|
<td class="text-right"><?= $row['st'] ?></td>
|
|
<td class="text-right"><?= $row['ft'] ?></td>
|
|
<td class="text-right"><?= $row['error'] ?></td>
|
|
</tr>
|
|
<?php } ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php $this->load->view('_partial/footer') ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div hidden>
|
|
<?php
|
|
$namaBulan = "";
|
|
$aktualGrafik = "";
|
|
$ftGrafik = "";
|
|
foreach ($data as $row) {
|
|
$bln = $row['bulan'];
|
|
$namaBulan .= "'$bln'" . ", ";
|
|
$aktualGrafik .= $row['jumlah'] . ", ";
|
|
$ftGrafik .= $row['ft'] . ", ";
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<?php $this->load->view('_partial/js.php') ?>
|
|
|
|
<script type="text/javascript">
|
|
$('#id_pelayanan').select2();
|
|
$('#bulan').select2();
|
|
|
|
function handleReset() {
|
|
window.location.href = site_url + 'Peramalan';
|
|
}
|
|
|
|
$(document).on("submit", "#formAlpha", function (event) {
|
|
event.preventDefault();
|
|
$.ajax({
|
|
url: site_url + "/Peramalan/update_alpha",
|
|
method: "POST",
|
|
dataType: "json",
|
|
data: new FormData($("#formAlpha")[0]),
|
|
async: true,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (data) {
|
|
Toast.fire({
|
|
icon: "success",
|
|
title: data.message,
|
|
});
|
|
},
|
|
fail: function (event) {
|
|
alert(event);
|
|
},
|
|
});
|
|
});
|
|
|
|
//Chart
|
|
var multipleLineChart = document.getElementById('multipleLineChart').getContext('2d');
|
|
|
|
var myMultipleLineChart = new Chart(multipleLineChart, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [<?php echo $namaBulan; ?>],
|
|
datasets: [{
|
|
label: "Aktual",
|
|
borderColor: "#1d7af3",
|
|
pointBorderColor: "#FFF",
|
|
pointBackgroundColor: "#1d7af3",
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 2,
|
|
pointHoverBorderWidth: 1,
|
|
pointRadius: 2,
|
|
backgroundColor: 'transparent',
|
|
fill: true,
|
|
borderWidth: 2,
|
|
data: [<?php echo $aktualGrafik; ?>]
|
|
}, {
|
|
label: "Hasil Ramal",
|
|
borderColor: "#59d05d",
|
|
pointBorderColor: "#FFF",
|
|
pointBackgroundColor: "#59d05d",
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 2,
|
|
pointHoverBorderWidth: 1,
|
|
pointRadius: 2,
|
|
backgroundColor: 'transparent',
|
|
fill: true,
|
|
borderWidth: 2,
|
|
data: [<?php echo $ftGrafik; ?>]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
tooltips: {
|
|
bodySpacing: 4,
|
|
mode: "nearest",
|
|
intersect: 0,
|
|
position: "nearest",
|
|
xPadding: 10,
|
|
yPadding: 10,
|
|
caretPadding: 10
|
|
},
|
|
layout: {
|
|
padding: {
|
|
left: 15,
|
|
right: 15,
|
|
top: 15,
|
|
bottom: 15
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|