619 lines
19 KiB
HTML
619 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Basic Page Info -->
|
|
<meta charset="utf-8" />
|
|
<title>Ayo Ramal</title>
|
|
|
|
<!-- Site favicon -->
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="logo atas"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="static/vendors/images/favicon-32x32.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="static/vendors/images/favicon-16x16.png"
|
|
/>
|
|
|
|
<!-- Mobile Specific Metas -->
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1"
|
|
/>
|
|
|
|
<!-- Google Font -->
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" type="text/css" href="static/vendors/styles/core.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="static/vendors/styles/icon-font.min.css"
|
|
/>
|
|
<link rel="stylesheet" type="text/css" href="static/vendors/styles/style.css" />
|
|
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script
|
|
async
|
|
src="https://www.googletagmanager.com/gtag/js?id=G-GBZ3SGGX85"
|
|
></script>
|
|
<script
|
|
async
|
|
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2973766580778258"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
gtag("js", new Date());
|
|
|
|
gtag("config", "G-GBZ3SGGX85");
|
|
</script>
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function (w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != "dataLayer" ? "&l=" + l : "";
|
|
j.async = true;
|
|
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, "script", "dataLayer", "GTM-NXZMQSS");
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
</head>
|
|
<body>
|
|
<div class="pre-loader">
|
|
<div class="pre-loader-box">
|
|
<div class="loader-logo">
|
|
<img src="https://www.icegif.com/wp-content/uploads/2022/06/icegif-293.gif" alt="" />
|
|
</div>
|
|
<div class="loader-progress" id="progress_div">
|
|
<div class="bar" id="bar1"></div>
|
|
</div>
|
|
<div class="percent" id="percent1">0%</div>
|
|
<div class="loading-text">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<div class="menu-icon bi bi-list"></div>
|
|
<div
|
|
class="search-toggle-icon bi bi-search"
|
|
data-toggle="header_search"
|
|
></div>
|
|
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="dashboard-setting user-notification">
|
|
<div class="dropdown">
|
|
<a
|
|
class="dropdown-toggle no-arrow"
|
|
href="javascript:;"
|
|
data-toggle="right-sidebar"
|
|
>
|
|
<i class="dw dw-settings2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="user-info-dropdown">
|
|
<div class="dropdown">
|
|
<a
|
|
class="dropdown-toggle"
|
|
href="#"
|
|
role="button"
|
|
data-toggle="dropdown"
|
|
>
|
|
<span class="user-icon">
|
|
<img src="static/vendors/images/photo1.jpg" alt="" />
|
|
</span>
|
|
<span class="user-name">Ross C. Lopez</span>
|
|
</a>
|
|
<div
|
|
class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list"
|
|
>
|
|
<a class="dropdown-item" href="profile.html"
|
|
><i class="dw dw-user1"></i> Profile</a
|
|
>
|
|
<a class="dropdown-item" href="profile.html"
|
|
><i class="dw dw-settings2"></i> Setting</a
|
|
>
|
|
<a class="dropdown-item" href="faq.html"
|
|
><i class="dw dw-help"></i> Help</a
|
|
>
|
|
<a class="dropdown-item" href="login.html"
|
|
><i class="dw dw-logout"></i> Log Out</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="github-link">
|
|
<a href="#"
|
|
><img
|
|
style="width: 80px;"
|
|
src="https://media.tenor.com/tGFp68ulbMIAAAAi/pom-bot.gif" alt=""
|
|
/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-sidebar">
|
|
<div class="sidebar-title">
|
|
<h3 class="weight-600 font-16 text-blue">
|
|
Layout Settings
|
|
<span class="btn-block font-weight-400 font-12"
|
|
>User Interface Settings</span
|
|
>
|
|
</h3>
|
|
<div class="close-sidebar" data-toggle="right-sidebar-close">
|
|
<i class="icon-copy ion-close-round"></i>
|
|
</div>
|
|
</div>
|
|
<div class="right-sidebar-body customscroll">
|
|
<div class="right-sidebar-body-content">
|
|
<h4 class="weight-600 font-18 pb-10">Header Background</h4>
|
|
<div class="sidebar-btn-group pb-30 mb-10">
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="btn btn-outline-primary header-white active"
|
|
>White</a
|
|
>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="btn btn-outline-primary header-dark"
|
|
>Dark</a
|
|
>
|
|
</div>
|
|
|
|
<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
|
|
<div class="sidebar-btn-group pb-30 mb-10">
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="btn btn-outline-primary sidebar-light"
|
|
>White</a
|
|
>
|
|
<a
|
|
href="javascript:void(0);"
|
|
class="btn btn-outline-primary sidebar-dark active"
|
|
>Dark</a
|
|
>
|
|
</div>
|
|
|
|
<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
|
|
<div class="sidebar-radio-group pb-10 mb-10">
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebaricon-1"
|
|
name="menu-dropdown-icon"
|
|
class="custom-control-input"
|
|
value="icon-style-1"
|
|
checked=""
|
|
/>
|
|
<label class="custom-control-label" for="sidebaricon-1"
|
|
><i class="fa fa-angle-down"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebaricon-2"
|
|
name="menu-dropdown-icon"
|
|
class="custom-control-input"
|
|
value="icon-style-2"
|
|
/>
|
|
<label class="custom-control-label" for="sidebaricon-2"
|
|
><i class="ion-plus-round"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebaricon-3"
|
|
name="menu-dropdown-icon"
|
|
class="custom-control-input"
|
|
value="icon-style-3"
|
|
/>
|
|
<label class="custom-control-label" for="sidebaricon-3"
|
|
><i class="fa fa-angle-double-right"></i
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
|
|
<div class="sidebar-radio-group pb-30 mb-10">
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebariconlist-1"
|
|
name="menu-list-icon"
|
|
class="custom-control-input"
|
|
value="icon-list-style-1"
|
|
checked=""
|
|
/>
|
|
<label class="custom-control-label" for="sidebariconlist-1"
|
|
><i class="ion-minus-round"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebariconlist-2"
|
|
name="menu-list-icon"
|
|
class="custom-control-input"
|
|
value="icon-list-style-2"
|
|
/>
|
|
<label class="custom-control-label" for="sidebariconlist-2"
|
|
><i class="fa fa-circle-o" aria-hidden="true"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebariconlist-3"
|
|
name="menu-list-icon"
|
|
class="custom-control-input"
|
|
value="icon-list-style-3"
|
|
/>
|
|
<label class="custom-control-label" for="sidebariconlist-3"
|
|
><i class="dw dw-check"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebariconlist-4"
|
|
name="menu-list-icon"
|
|
class="custom-control-input"
|
|
value="icon-list-style-4"
|
|
checked=""
|
|
/>
|
|
<label class="custom-control-label" for="sidebariconlist-4"
|
|
><i class="icon-copy dw dw-next-2"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebariconlist-5"
|
|
name="menu-list-icon"
|
|
class="custom-control-input"
|
|
value="icon-list-style-5"
|
|
/>
|
|
<label class="custom-control-label" for="sidebariconlist-5"
|
|
><i class="dw dw-fast-forward-1"></i
|
|
></label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input
|
|
type="radio"
|
|
id="sidebariconlist-6"
|
|
name="menu-list-icon"
|
|
class="custom-control-input"
|
|
value="icon-list-style-6"
|
|
/>
|
|
<label class="custom-control-label" for="sidebariconlist-6"
|
|
><i class="dw dw-next"></i
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reset-options pt-30 text-center">
|
|
<button class="btn btn-danger" id="reset-settings">
|
|
Reset Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="left-side-bar">
|
|
<div class="brand-logo">
|
|
<a href="#">
|
|
|
|
<img
|
|
style="width: 50px;"
|
|
src="https://www.icegif.com/wp-content/uploads/2023/10/icegif-939.gif" alt=""
|
|
class="dark-logo" />
|
|
<p class="dark-logo" style="font-size: 20px; color: black; font-weight: bold; font-style: italic; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;" > Ayo Ramal</p>
|
|
|
|
<img
|
|
style="width: 20px; margin-right: 10px;"
|
|
src="static/doctor.png"
|
|
alt=""
|
|
class="light-logo"
|
|
/>
|
|
<p class="light-logo" style="font-size: 20px; color: white; font-weight: bold; font-style: italic; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;" > Ayo Ramal</p>
|
|
|
|
</a>
|
|
<div class="close-sidebar" data-toggle="left-sidebar-close">
|
|
<i class="ion-close-round"></i>
|
|
</div>
|
|
</div>
|
|
<div class="menu-block customscroll">
|
|
<div class="sidebar-menu">
|
|
<ul id="accordion-menu">
|
|
<li>
|
|
<a href="http://localhost/steven/" class="dropdown-toggle no-arrow">
|
|
<span class="micon bi bi-house"></span
|
|
><span class="mtext">Home</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
<li class="dropdown">
|
|
<a href="javascript:;" class="dropdown-toggle">
|
|
<span class="micon bi bi-hdd-stack"></span
|
|
><span class="mtext">Data Master</span>
|
|
</a>
|
|
<ul class="submenu">
|
|
<li><a href="http://localhost/steven/curah_hujan/list">Curah Hujan</a></li>
|
|
<li><a href="http://localhost/steven/demam_berdarah/list">Deman Berdarah</a></li>
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="javascript:;" class="dropdown-toggle">
|
|
<span class="micon bi bi-diagram-3"></span
|
|
><span class="mtext">Peramalan</span>
|
|
</a>
|
|
<ul class="submenu">
|
|
<li class="dropdown">
|
|
<a href="javascript:;" class="dropdown-toggle">
|
|
<span class="micon fa fa-plug"></span
|
|
><span class="mtext">Curah Hujan </span>
|
|
</a>
|
|
<ul class="submenu child">
|
|
<li><a href="http://127.0.0.1:5000/dif2">Uji Stationer</a></li>
|
|
<li><a href="http://127.0.0.1:5000/curah_hujan">Evaluasi Model</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="javascript:;" class="dropdown-toggle">
|
|
<span class="micon fa fa-plug"></span
|
|
><span class="mtext">Demam Berdarah </span>
|
|
</a>
|
|
<ul class="submenu child">
|
|
<li><a href="http://127.0.0.1:5000/dif">Uji Stationer</a></li>
|
|
<li><a href="http://127.0.0.1:5000/">Evaluasi Model</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="http://localhost/steven/hasil" class="dropdown-toggle no-arrow">
|
|
<span class="micon bi bi-hdd-stack"></span
|
|
><span class="mtext">Hasil Peramalan</span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="javascript:;" class="dropdown-toggle">
|
|
<span class="micon bi bi-receipt-cutoff"></span
|
|
><span class="mtext">Laporan</span>
|
|
</a>
|
|
<ul class="submenu">
|
|
<li><a href="http://localhost/steven/laporan/curah_hujan">Curah Hujan</a></li>
|
|
<li><a href="http://localhost/steven/laporan/demam_berdarah">Deman Berdarah</a></li>
|
|
|
|
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="dropdown-divider"></div>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-menu-overlay"></div>
|
|
|
|
<div class="main-container">
|
|
<div class="pd-ltr-20 xs-pd-20-10">
|
|
<div class="min-height-200px">
|
|
<div class="page-header">
|
|
<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
|
|
|
<p style="font-size: medium; font-weight: bold; text-align: center;" >Masukkan Order ARIMA untuk pengujian<p>
|
|
|
|
<!-- input -->
|
|
<form method="POST" action="/">
|
|
<label for="p_order" style="font-size: medium; font-weight: bold;">Nilai p:</label>
|
|
<input type="text" id="p_order" name="p_order" required style="margin-right: 10px; border-radius: 5%;">
|
|
|
|
<label for="d_order" style="font-size: medium; font-weight: bold;">Nilai d:</label>
|
|
<input type="text" id="d_order" name="d_order" required style="margin-right: 10px; border-radius: 5%;">
|
|
|
|
<label for="q_order" style="font-size: medium; font-weight: bold;">Nilai q:</label>
|
|
<input type="text" id="q_order" name="q_order" required style="margin-right: 10px; border-radius: 5%;">
|
|
|
|
<button
|
|
type="submit"
|
|
value="submit"
|
|
class="btn btn-primary"
|
|
data-toggle="button"
|
|
aria-pressed="false"
|
|
autocomplete="off"
|
|
>
|
|
Lanjut
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- body -->
|
|
<div class="body">
|
|
|
|
|
|
<div class="page-header">
|
|
<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
|
|
|
<p style="font-size: medium; font-weight: bold; text-align: center;" >Data yang akan digunakan</p>
|
|
<table class="table table-bordered" style="border: 3px solid black;">
|
|
<thead style="border: 3px solid black;">
|
|
<tr style="border: 3px solid black;">
|
|
<th scope="col">Data</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody style="border: 3px solid black;">
|
|
<tr style="border: 3px solid black;">
|
|
<th style="border: 3px solid black;">-></th>
|
|
{% for value in data_series %}
|
|
<th style="border: 3px solid black;">
|
|
|
|
{{ value }}
|
|
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="page-header">
|
|
<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
|
<p style="font-size: medium; font-weight: bold; text-align: center;" >Ringkasan</p>
|
|
<center>
|
|
<pre style="background-color: azure; width: fit-content; border-radius: 3%;">{{ model_summary }}</pre>
|
|
</center>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-header">
|
|
<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
|
|
|
<p style="font-size: medium; font-weight: bold; text-align: center;" >Nilai P-Value</p>
|
|
<table class="table table-bordered" style="border: 3px solid black;">
|
|
<thead style="border: 3px solid black;">
|
|
<tr style="border: 3px solid black;">
|
|
<th scope="col">Nilai P-Value</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody style="border: 3px solid black;">
|
|
<tr style="border: 3px solid black;">
|
|
<th style="border: 3px solid black;">-></th>
|
|
{% for value in p_value %}
|
|
<th style="border: 3px solid black;">
|
|
|
|
{{ value }}
|
|
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-header">
|
|
<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
|
|
|
<p style="font-size: medium; font-weight: bold; text-align: center;" >Hasil peramalan</p>
|
|
<div class="table-responsive">
|
|
<table class="data-table table stripe hover" style="border: 1px solid black;">
|
|
<thead style="border: 1px solid black;">
|
|
<tr style="border: 1px solid black;">
|
|
<th scope="col">Jumlah Penderita</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody style="border: 1px solid black;">
|
|
<tr style="border: 1px solid black;">
|
|
<th style="border: 1px solid black;">-></th>
|
|
{% for value in forecast %}
|
|
<th style="border: 1px solid black; font-size: 15px;">
|
|
|
|
{{ value }}
|
|
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p>Untuk melihat hasil berada di halaman <a href="http://localhost/steven/hasil"> hasil </a></p>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tambahkan tombol Simpan -->
|
|
<form method="POST" action="/save_forecast">
|
|
<input type="hidden" name="forecast_values" value="{{ forecast|join(',') }}">
|
|
<button type="submit" class="btn btn-primary">Simpan</button>
|
|
</form>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- welcome modal start -->
|
|
<div class="welcome-modal">
|
|
<button class="welcome-modal-close">
|
|
<i class="bi bi-x-lg"></i>
|
|
</button>
|
|
<center>
|
|
<img style="width: 200px;"
|
|
|
|
src="https://media.tenor.com/DTECWx21ELMAAAAi/its-on-im-ready.gif"
|
|
|
|
></img>
|
|
</center>
|
|
<!-- welcome modal end -->
|
|
<!-- js -->
|
|
<script src="static/vendors/scripts/core.js"></script>
|
|
<script src="static/vendors/scripts/script.min.js"></script>
|
|
<script src="static/vendors/scripts/process.js"></script>
|
|
<script src="static/vendors/scripts/layout-settings.js"></script>
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript
|
|
><iframe
|
|
src="https://www.googletagmanager.com/ns.html?id=GTM-NXZMQSS"
|
|
height="0"
|
|
width="0"
|
|
style="display: none; visibility: hidden"
|
|
></iframe
|
|
></noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
</body>
|
|
</html>
|