Scribd
Upload
3 views11 pages

Sistem Informasi Energi Listrik

The document outlines the HTML and JavaScript code for a web-based energy information system, including functionality for displaying real-time, daily, and monthly energy data. It features a responsive design using Bootstrap and integrates with Grafana for data visualization. Additionally, it includes PHP scripts for calculating daily and monthly energy consumption and costs, providing an API for data retrieval.

Uploaded by

Luthfi Azzikri
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views11 pages

Sistem Informasi Energi Listrik

The document outlines the HTML and JavaScript code for a web-based energy information system, including functionality for displaying real-time, daily, and monthly energy data. It features a responsive design using Bootstrap and integrates with Grafana for data visualization. Additionally, it includes PHP scripts for calculating daily and monthly energy consumption and costs, providing an API for data retrieval.

Uploaded by

Luthfi Azzikri
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1.

​ Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistem Informasi Energi Listrik</title>
<link rel="stylesheet"
href="[Link]
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #eaf4fc;
}
header {
background-color: #007BFF;
color: white;
padding: 10px 20px;
display: flex;
align-items: center;
}
header img {
height: 50px;
margin-right: 15px;
}
header h1 {
margin: 0;
font-size: 20px;
}
nav {
background-color: #0056b3;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
nav a:hover {
background-color: #003d80;
border-radius: 5px;
}
.container {
margin-top: 20px;
}
.card {
margin-bottom: 20px;
}
.info-box {
background-color: white;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.[Link] {
background-color: #d4edda;
}
.[Link] {
background-color: #f8d7da;
}
</style>
<script src="[Link]
</head>
<body>
<header>
<img src="[Link]" alt="Logo">
<div>
<h1>Sistem Informasi<br>Energi Listrik</h1>
</div>
</header>
<nav>
<a href="#" onclick="loadHome()">Home</a>
<a href="#" onclick="loadDaily()">Daily</a>
<a href="#" onclick="loadMonthly()">Monthly</a>
</nav>
<div id="content" class="container"></div>

<script>
// Function to load Home page
function loadHome() {
$('#content').html(`
<div class="row">
<div class="col-12 text-start text-muted small mb-2">
<span id="currentDate"></span>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Grafik Daya Realtime</h5>
<iframe src="grafana-panel-url" style="width: 100%; height: 300px;
border: none;"></iframe>
</div>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Nilai Daya Realtime</h5>
<iframe src="grafana-value-panel-url" style="width: 100%; height:
300px; border: none;"></iframe>
</div>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="info-box" id="costBox">
<h6>Biaya Penggunaan Listrik</h6>
<p>Total Today: <span id="totalToday">Loading...</span> Rp</p>
<p>Avg per Hour: <span id="avgPerHour">Loading...</span> Rp/hour</p>
<p>Total Prev. Day: <span id="totalPrevDay">Loading...</span> Rp</p>
<p>Avg Prev. Day: <span id="avgPrevDay">Loading...</span>
Rp/hour</p>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="info-box" id="summaryBox">
<h6>Summary Realtime</h6>
<p>Selisih Avg: <span id="avgDifference">Loading...</span> Rp</p>
<p>Status: <span id="efficiencyStatus">Loading...</span></p>
</div>
</div>
</div>
`);
updateDate();
}

// Function to update date


function updateDate() {
const now = new Date();
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
$('#currentDate').text([Link]('id-ID', options));
}

// Function to load Daily page


function loadDaily() {
$('#content').html(`
<!-- Daily Content -->
`);
}

// Function to load Monthly page


function loadMonthly() {
$('#content').html(`
<!-- Monthly Content -->
`);
}

// Default load home


$(document).ready(() => loadHome());
</script>
</body>
</html>

2.​ kode daily page


function loadDaily() {
$('#content').html(`
<div class="row">
<div class="col-lg-4 col-12 mb-3">
<label for="dailyDate" class="form-label">Pilih Hari dan Tanggal</label>
<input type="date" id="dailyDate" class="form-control"
onchange="updateDailyContent()">
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Grafik Energi Harian</h5>
<iframe id="dailyGraph" src="" style="width: 100%; height: 300px; border:
none;"></iframe>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Tabel Energi dan Biaya Harian</h5>
<iframe id="dailyTable" src="" style="width: 100%; height: 300px; border:
none;"></iframe>
</div>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="info-box" id="dailyCostBox">
<h6>Biaya Penggunaan Listrik Harian</h6>
<p>Total Today: <span id="dailyTotalToday">Loading...</span> Rp</p>
<p>Avg per Hour: <span id="dailyAvgPerHour">Loading...</span> Rp/hour</p>
<p>Total Prev. Day: <span id="dailyTotalPrevDay">Loading...</span> Rp</p>
<p>Avg Prev. Day: <span id="dailyAvgPrevDay">Loading...</span>
Rp/hour</p>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="info-box" id="dailySummaryBox">
<h6>Summary Harian</h6>
<p>Selisih Avg: <span id="dailyAvgDifference">Loading...</span> Rp</p>
<p>Status: <span id="dailyEfficiencyStatus">Loading...</span></p>
</div>
</div>
</div>
`);
}

3.​ kode untuk monthly page

function loadMonthly() {
$('#content').html(`
<div class="row">
<div class="col-lg-4 col-12 mb-3">
<label for="monthlyDate" class="form-label">Pilih Bulan dan Tahun</label>
<input type="month" id="monthlyDate" class="form-control"
onchange="updateMonthlyContent()">
</div>
</div>
<div class="row">
<div class="col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Grafik Energi Bulanan</h5>
<iframe id="monthlyGraph" src="" style="width: 100%; height: 300px; border:
none;"></iframe>
</div>
</div>
</div>
<div class="col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Tabel Energi dan Biaya Bulanan</h5>
<iframe id="monthlyTable" src="" style="width: 100%; height: 300px; border:
none;"></iframe>
</div>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="info-box" id="monthlyCostBox">
<h6>Biaya Penggunaan Listrik Bulanan</h6>
<p>Total This Month: <span id="monthlyTotalThisMonth">Loading...</span>
Rp</p>
<p>Avg per Day: <span id="monthlyAvgPerDay">Loading...</span> Rp/day</p>
<p>Total Prev. Month: <span id="monthlyTotalPrevMonth">Loading...</span>
Rp</p>
<p>Avg Prev. Month: <span id="monthlyAvgPrevMonth">Loading...</span>
Rp/day</p>
</div>
</div>
<div class="col-lg-6 col-12 mb-3">
<div class="info-box" id="monthlySummaryBox">
<h6>Summary Bulanan</h6>
<p>Selisih Avg: <span id="monthlyAvgDifference">Loading...</span> Rp</p>
<p>Status: <span id="monthlyEfficiencyStatus">Loading...</span></p>
</div>
</div>
</div>
`);
}

4.​ kode untuk update data daily


function updateDailyContent() {
const selectedDate = $('#dailyDate').val();
if (selectedDate) {
const grafanaGraphURL =
`[Link]
const grafanaTableURL = `[Link]

$('#dailyGraph').attr('src', grafanaGraphURL);
$('#dailyTable').attr('src', grafanaTableURL);

// Update kotak informasi harian


// (Integrasikan dengan perhitungan dari database Anda)
}
}

5.​ kode untuk update data mothly


function updateMonthlyContent() {
const selectedMonth = $('#monthlyDate').val();
if (selectedMonth) {
const grafanaGraphURL =
`[Link]
const grafanaTableURL =
`[Link]

$('#monthlyGraph').attr('src', grafanaGraphURL);
$('#monthlyTable').attr('src', grafanaTableURL);

// Update kotak informasi bulanan


// (Integrasikan dengan perhitungan dari database Anda)
}
}

6.​ kode API data harian

Membuat API untuk Menghitung Data Harian

File: api/daily_data.php

<?php
header('Content-Type: application/json');
$mysqli = new mysqli("localhost", "username", "password", "demokit_elisa");

if ($mysqli->connect_error) {
die(json_encode(["error" => $mysqli->connect_error]));
}

$date = $_GET['date']; // Format: YYYY-MM-DD


$rate = 1444.70;

// Hitung energi harian


$query = "SELECT SUM(VLN * A * PF * (1/60)) AS total_energy FROM Dummy_hf_pm
WHERE DATE(timestamp) = ?";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("s", $date);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_assoc();

$total_energy = $data['total_energy'] ?? 0;
$total_today = $total_energy * $rate;
$avg_per_hour = $total_today / 24;

// Hitung energi hari sebelumnya


$query_prev = "SELECT SUM(VLN * A * PF * (1/60)) AS total_energy FROM
Dummy_hf_pm WHERE DATE(timestamp) = DATE_SUB(?, INTERVAL 1 DAY)";
$stmt_prev = $mysqli->prepare($query_prev);
$stmt_prev->bind_param("s", $date);
$stmt_prev->execute();
$result_prev = $stmt_prev->get_result();
$data_prev = $result_prev->fetch_assoc();

$total_prev_energy = $data_prev['total_energy'] ?? 0;
$total_prev_day = $total_prev_energy * $rate;
$avg_prev_hour = $total_prev_day / 24;

$response = [
"total_today" => round($total_today, 2),
"avg_per_hour" => round($avg_per_hour, 2),
"total_prev_day" => round($total_prev_day, 2),
"avg_prev_hour" => round($avg_prev_hour, 2),
"avg_difference" => round($avg_per_hour - $avg_prev_hour, 2)
];

echo json_encode($response);
?>

7.​ kode API data bulanan


Membuat API untuk Menghitung Data Bulanan
File: api/monthly_data.php

<?php
header('Content-Type: application/json');
$mysqli = new mysqli("localhost", "username", "password", "demokit_elisa");

if ($mysqli->connect_error) {
die(json_encode(["error" => $mysqli->connect_error]));
}

$month = $_GET['month']; // Format: YYYY-MM


$rate = 1444.70;

// Hitung energi bulanan


$query = "SELECT SUM(VLN * A * PF * (1/60)) AS total_energy FROM Dummy_hf_pm
WHERE DATE_FORMAT(timestamp, '%Y-%m') = ?";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("s", $month);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_assoc();

$total_energy = $data['total_energy'] ?? 0;
$total_this_month = $total_energy * $rate;

// Hitung energi bulan sebelumnya


$query_prev = "SELECT SUM(VLN * A * PF * (1/60)) AS total_energy FROM
Dummy_hf_pm WHERE DATE_FORMAT(timestamp, '%Y-%m') =
DATE_FORMAT(DATE_SUB(STR_TO_DATE(?, '%Y-%m-01'), INTERVAL 1 MONTH),
'%Y-%m')";
$stmt_prev = $mysqli->prepare($query_prev);
$stmt_prev->bind_param("s", $month);
$stmt_prev->execute();
$result_prev = $stmt_prev->get_result();
$data_prev = $result_prev->fetch_assoc();

$total_prev_energy = $data_prev['total_energy'] ?? 0;
$total_prev_month = $total_prev_energy * $rate;

// Jumlah hari dalam bulan


$days_in_month = date("t", strtotime("$month-01"));
$days_in_prev_month = date("t", strtotime("-1 month", strtotime("$month-01")));

$avg_per_day = $total_this_month / $days_in_month;


$avg_prev_day = $total_prev_month / $days_in_prev_month;

$response = [
"total_this_month" => round($total_this_month, 2),
"avg_per_day" => round($avg_per_day, 2),
"total_prev_month" => round($total_prev_month, 2),
"avg_prev_day" => round($avg_prev_day, 2),
"avg_difference" => round($avg_per_day - $avg_prev_day, 2)
];

echo json_encode($response);
?>

8.​ Frontend (JavaScript)


Memperbarui Kotak Informasi Harian
function updateDailyContent() {
const selectedDate = $('#dailyDate').val();
if (selectedDate) {
$.ajax({
url: `api/daily_data.php?date=${selectedDate}`,
method: 'GET',
success: function (data) {
$('#dailyTotalToday').text(data.total_today);
$('#dailyAvgPerHour').text(data.avg_per_hour);
$('#dailyTotalPrevDay').text(data.total_prev_day);
$('#dailyAvgPrevDay').text(data.avg_prev_hour);

// Update summary box


const diff = data.avg_difference;
const summaryBox = $('#dailySummaryBox');
$('#dailyAvgDifference').text(diff);

if (diff < 0) {
[Link]('background-color', 'green');
$('#dailyEfficiencyStatus').text('More efficient than previous day');
} else {
[Link]('background-color', 'red');
$('#dailyEfficiencyStatus').text('Less efficient than previous day');
}
},
error: function (error) {
[Link]('Error fetching daily data:', error);
}
});
}
}

memperbarui kotak informasi bulann


function updateMonthlyContent() {
const selectedMonth = $('#monthlyDate').val();
if (selectedMonth) {
$.ajax({
url: `api/monthly_data.php?month=${selectedMonth}`,
method: 'GET',
success: function (data) {
$('#monthlyTotalThisMonth').text(data.total_this_month);
$('#monthlyAvgPerDay').text(data.avg_per_day);
$('#monthlyTotalPrevMonth').text(data.total_prev_month);
$('#monthlyAvgPrevMonth').text(data.avg_prev_day);

// Update summary box


const diff = data.avg_difference;
const summaryBox = $('#monthlySummaryBox');
$('#monthlyAvgDifference').text(diff);

if (diff < 0) {
[Link]('background-color', 'green');
$('#monthlyEfficiencyStatus').text('More efficient than previous month');
} else {
[Link]('background-color', 'red');
$('#monthlyEfficiencyStatus').text('Less efficient than previous month');
}
},
error: function (error) {
[Link]('Error fetching monthly data:', error);
}
});
}
}
Penyesuaian
Pastikan URL Grafana di fungsi sebelumnya juga mengikuti tanggal/bulan yang dipilih.
Ganti "username", "password", dan "localhost" sesuai konfigurasi database Anda.
Tes API dengan tools seperti Postman untuk memastikan hasil perhitungan benar.

You might also like