From 0c3380e87eabed989610e50ee1e666e89f7cbbb7 Mon Sep 17 00:00:00 2001
From: Devabaskara <utoyodeva72@gmail.com>
Date: Wed, 17 Jul 2024 15:36:51 +0700
Subject: [PATCH] Upload files to "Kode Program Website dan Flow Node_RED"

---
 .../Flow Node-RED.json                        | 1824 +++++++++++++++++
 .../Website Monitoring.html                   |  479 +++++
 .../database.php                              |   55 +
 3 files changed, 2358 insertions(+)
 create mode 100644 Kode Program Website dan Flow Node_RED/Flow Node-RED.json
 create mode 100644 Kode Program Website dan Flow Node_RED/Website Monitoring.html
 create mode 100644 Kode Program Website dan Flow Node_RED/database.php

diff --git a/Kode Program Website dan Flow Node_RED/Flow Node-RED.json b/Kode Program Website dan Flow Node_RED/Flow Node-RED.json
new file mode 100644
index 0000000..a9b25e4
--- /dev/null
+++ b/Kode Program Website dan Flow Node_RED/Flow Node-RED.json	
@@ -0,0 +1,1824 @@
+[
+{
+"id": "25d34f27b4868406",
+"type": "tab",
+"label": "Mengontrol Arus Listrik",
+"disabled": false,
+"info": "",
+"env": []
+},
+{
+"id": "7a6b9f35c292afc3",
+"type": "tab",
+"label": "Saldo dan Biaya",
+"disabled": false,
+"info": "",
+"env": []
+},
+{
+"id": "5bdc7ce5a11533eb",
+"type": "tab",
+"label": "Cut Off Relay Saldo 0",
+"disabled": false,
+"info": "",
+"env": []
+},
+{
+"id": "7d83b851da4ca275",
+"type": "tab",
+"label": "Cut Off Limit Power",
+"disabled": false,
+"info": "",
+"env": []
+},
+{
+"id": "620c1fe405b2305c",
+"type": "tab",
+"label": "Firebase",
+"disabled": false,
+"info": "",
+"env": []
+},
+{
+"id": "0125ce50650cdbb1",
+"type": "mqtt-broker",
+"name": "",
+"broker": "192.168.100.77",
+"port": "1883",
+"clientid": "",
+"autoConnect": true,
+"usetls": false,
+"protocolVersion": "4",
+"keepalive": "60",
+"cleansession": true,
+"autoUnsubscribe": true,
+"birthTopic": "",
+"birthQos": "0",
+"birthPayload": "",
+"birthMsg": {},
+"closeTopic": "",
+"closeQos": "0",
+"closePayload": "",
+"closeMsg": {},
+"willTopic": "",
+"willQos": "0",
+"willPayload": "",
+"willMsg": {},
+"userProps": "",
+"sessionExpiry": ""
+},
+{
+"id": "fa40befd634f6505",
+"type": "ui_tab",
+"name": "Data PZEM",
+"icon": "dashboard",
+"order": 1,
+"disabled": false,
+"hidden": false
+},
+{
+"id": "8f55eed720bf095f",
+"type": "ui_group",
+"name": "Voltage",
+"tab": "fa40befd634f6505",
+"order": 1,
+"disp": true,
+"width": 6,
+"collapse": false,
+"className": ""
+},
+{
+"id": "6e87a68e244538ad",
+"type": "ui_base",
+"theme": {
+"name": "theme-light",
+"lightTheme": {
+"default": "#0094CE",
+"baseColor": "#0094CE",
+"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
+"edited": true,
+"reset": false
+},
+"darkTheme": {
+"default": "#097479",
+"baseColor": "#097479",
+"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
+"edited": false
+},
+"customTheme": {
+"name": "Untitled Theme 1",
+"default": "#4B7930",
+"baseColor": "#4B7930",
+"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
+"reset": false
+},
+"themeState": {
+"base-color": {
+"default": "#0094CE",
+"value": "#0094CE",
+"edited": false
+},
+"page-titlebar-backgroundColor": {
+"value": "#0094CE",
+"edited": false
+},
+"page-backgroundColor": {
+"value": "#fafafa",
+"edited": false
+},
+"page-sidebar-backgroundColor": {
+"value": "#ffffff",
+"edited": false
+},
+"group-textColor": {
+"value": "#1bbfff",
+"edited": false
+},
+"group-borderColor": {
+"value": "#ffffff",
+"edited": false
+},
+"group-backgroundColor": {
+"value": "#ffffff",
+"edited": false
+},
+"widget-textColor": {
+"value": "#111111",
+"edited": false
+},
+"widget-backgroundColor": {
+"value": "#0094ce",
+"edited": false
+},
+"widget-borderColor": {
+"value": "#ffffff",
+"edited": false
+},
+"base-font": {
+"value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
+}
+},
+"angularTheme": {
+"primary": "indigo",
+"accents": "blue",
+"warn": "red",
+"background": "grey",
+"palette": "light"
+}
+},
+"site": {
+"name": "Node-RED Dashboard",
+"hideToolbar": "false",
+"allowSwipe": "false",
+"lockMenu": "false",
+"allowTempTheme": "true",
+"dateFormat": "DD/MM/YYYY",
+"sizes": {
+"sx": 48,
+"sy": 48,
+"gx": 6,
+"gy": 6,
+"cx": 6,
+"cy": 6,
+"px": 0,
+"py": 0
+}
+}
+},
+{
+"id": "1bdf55346025b1d0",
+"type": "ui_group",
+"name": "Current",
+"tab": "fa40befd634f6505",
+"order": 2,
+"disp": true,
+"width": 6,
+"collapse": false,
+"className": ""
+},
+{
+"id": "d781f5579504374a",
+"type": "ui_group",
+"name": "Power",
+"tab": "fa40befd634f6505",
+"order": 3,
+"disp": true,
+"width": 6,
+"collapse": false,
+"className": ""
+},
+{
+"id": "e2bc4d5579d196e3",
+"type": "ui_group",
+"name": "Energy",
+"tab": "fa40befd634f6505",
+"order": 4,
+"disp": true,
+"width": 6,
+"collapse": false,
+"className": ""
+},
+{
+"id": "82c2598a7df32280",
+"type": "ui_group",
+"name": "Data Pengguna",
+"tab": "fa40befd634f6505",
+"order": 6,
+"disp": true,
+"width": "6",
+"collapse": false,
+"className": ""
+},
+{
+"id": "af509f56f60c0440",
+"type": "ui_group",
+"name": "Saldo",
+"tab": "fa40befd634f6505",
+"order": 7,
+"disp": true,
+"width": "6",
+"collapse": false,
+"className": ""
+},
+{
+"id": "368a06ae66c9d89d",
+"type": "MySQLdatabase",
+"name": "database",
+"host": "localhost",
+"port": "3306",
+"db": "tugas_akhir",
+"tz": "",
+"charset": "UTF8"
+},
+{
+"id": "074ba01f214bc3d6",
+"type": "firebase admin",
+"name": "monitoring"
+},
+{
+"id": "dbefbdc8.9cabc",
+"type": "MySQLdatabase",
+"name": "MySQL",
+"host": "your_mysql_host",
+"port": "3306",
+"db": "your_database_name",
+"tz": "",
+"charset": "UTF8"
+},
+{
+"id": "f8fdb5806f64e201",
+"type": "mqtt in",
+"z": "25d34f27b4868406",
+"name": "",
+"topic": "pzemout1/voltage",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 130,
+"y": 40,
+"wires": [
+[
+"52b98d9d4572bd7d"
+]
+]
+},
+{
+"id": "c02c0161a85e5339",
+"type": "mqtt in",
+"z": "25d34f27b4868406",
+"name": "",
+"topic": "pzemout2/current",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 120,
+"y": 100,
+"wires": [
+[
+"52b98d9d4572bd7d"
+]
+]
+},
+{
+"id": "81687c757398290b",
+"type": "mqtt in",
+"z": "25d34f27b4868406",
+"name": "",
+"topic": "pzemout3/power",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 120,
+"y": 160,
+"wires": [
+[
+"79c83e88aaa8237b",
+"52b98d9d4572bd7d"
+]
+]
+},
+{
+"id": "95fa3837587efb2a",
+"type": "mqtt in",
+"z": "25d34f27b4868406",
+"name": "",
+"topic": "pzemout4/energy",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 120,
+"y": 220,
+"wires": [
+[
+"52b98d9d4572bd7d"
+]
+]
+},
+{
+"id": "79c83e88aaa8237b",
+"type": "mqtt out",
+"z": "25d34f27b4868406",
+"name": "",
+"topic": "pzemin3/power",
+"qos": "",
+"retain": "",
+"respTopic": "",
+"contentType": "",
+"userProps": "",
+"correl": "",
+"expiry": "",
+"broker": "0125ce50650cdbb1",
+"x": 340,
+"y": 200,
+"wires": []
+},
+{
+"id": "52b98d9d4572bd7d",
+"type": "join",
+"z": "25d34f27b4868406",
+"name": "",
+"mode": "custom",
+"build": "object",
+"property": "payload",
+"propertyType": "msg",
+"key": "topic",
+"joiner": "\\n",
+"joinerType": "str",
+"accumulate": false,
+"timeout": "5",
+"count": "4",
+"reduceRight": false,
+"reduceExp": "",
+"reduceInit": "",
+"reduceInitType": "",
+"reduceFixup": "",
+"x": 330,
+"y": 100,
+"wires": [
+[
+"ee4e6b5c3f2f7a84",
+"dca38fa29783e0c4"
+]
+]
+},
+{
+"id": "e790d8601f2fd2d3",
+"type": "mysql",
+"z": "25d34f27b4868406",
+"mydb": "368a06ae66c9d89d",
+"name": "",
+"x": 800,
+"y": 100,
+"wires": [
+[
+"cd8c84ab0cda04b3"
+]
+]
+},
+{
+"id": "cd8c84ab0cda04b3",
+"type": "debug",
+"z": "25d34f27b4868406",
+"name": "Arus Listrik",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "payload",
+"targetType": "msg",
+"statusVal": "",
+"statusType": "auto",
+"x": 950,
+"y": 100,
+"wires": []
+},
+{
+"id": "ee4e6b5c3f2f7a84",
+"type": "function",
+"z": "25d34f27b4868406",
+"name": "Prepare Gauge Data",
+"func": "return [\n    { topic: 'voltage', payload: msg.payload['pzemout1/voltage'] },\n    { topic: 'power', payload: msg.payload['pzemout3/power'] },\n    { topic: 'current', payload: msg.payload['pzemout2/current'] },\n    { topic: 'energy', payload: msg.payload['pzemout4/energy'] }\n];",
+"outputs": 4,
+"timeout": "1",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 540,
+"y": 180,
+"wires": [
+[
+"1840e6f34845c4b0"
+],
+[
+"fbbcd4a3f38e7caa"
+],
+[
+"4dd1205bc48b63da"
+],
+[
+"05a9a857d2e89922"
+]
+]
+},
+{
+"id": "05a9a857d2e89922",
+"type": "ui_gauge",
+"z": "25d34f27b4868406",
+"name": "Energy Gauge",
+"group": "e2bc4d5579d196e3",
+"order": 3,
+"width": 0,
+"height": 0,
+"gtype": "gage",
+"title": "Energy",
+"label": "kWh",
+"format": "{{value}}",
+"min": 0,
+"max": 1000,
+"colors": [
+"#00b500",
+"#e6e600",
+"#ca3838"
+],
+"seg1": "",
+"seg2": "",
+"diff": false,
+"className": "",
+"x": 900,
+"y": 280,
+"wires": []
+},
+{
+"id": "4dd1205bc48b63da",
+"type": "ui_gauge",
+"z": "25d34f27b4868406",
+"name": "Current Gauge",
+"group": "1bdf55346025b1d0",
+"order": 2,
+"width": 0,
+"height": 0,
+"gtype": "gage",
+"title": "Current",
+"label": "A",
+"format": "{{value}}",
+"min": 0,
+"max": 50,
+"colors": [
+"#00b500",
+"#e6e600",
+"#ca3838"
+],
+"seg1": "",
+"seg2": "",
+"diff": false,
+"className": "",
+"x": 900,
+"y": 240,
+"wires": []
+},
+{
+"id": "fbbcd4a3f38e7caa",
+"type": "ui_gauge",
+"z": "25d34f27b4868406",
+"name": "Power Gauge",
+"group": "d781f5579504374a",
+"order": 1,
+"width": 0,
+"height": 0,
+"gtype": "gage",
+"title": "Power",
+"label": "W",
+"format": "{{value}}",
+"min": 0,
+"max": 2000,
+"colors": [
+"#00b500",
+"#e6e600",
+"#ca3838"
+],
+"seg1": "",
+"seg2": "",
+"diff": false,
+"className": "",
+"x": 900,
+"y": 200,
+"wires": []
+},
+{
+"id": "1840e6f34845c4b0",
+"type": "ui_gauge",
+"z": "25d34f27b4868406",
+"name": "Voltage Gauge",
+"group": "8f55eed720bf095f",
+"order": 0,
+"width": 0,
+"height": 0,
+"gtype": "gage",
+"title": "Voltage",
+"label": "V",
+"format": "{{value}}",
+"min": 0,
+"max": 240,
+"colors": [
+"#00b500",
+"#e6e600",
+"#ca3838"
+],
+"seg1": "",
+"seg2": "",
+"diff": false,
+"className": "",
+"x": 900,
+"y": 160,
+"wires": []
+},
+{
+"id": "6e4d3b0d.0f19f4",
+"type": "delay",
+"z": "25d34f27b4868406",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "1",
+"rateUnits": "second",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 660,
+"y": 100,
+"wires": [
+[
+"e790d8601f2fd2d3"
+]
+]
+},
+{
+"id": "dca38fa29783e0c4",
+"type": "function",
+"z": "25d34f27b4868406",
+"name": "Prepare SQL",
+"func": "var voltage = msg.payload['pzemout1/voltage'] || 0;\nvar power = msg.payload['pzemout3/power'] || 0;\nvar current = msg.payload['pzemout2/current'] || 0;\nvar energy = msg.payload['pzemout4/energy'] || 0;\n\nmsg.topic = \"CALL insert_combined_sensor_data(?, ?, ?, ?)\";\nmsg.payload = [voltage, power, current, energy];\n\nreturn msg;",
+"outputs": 1,
+"timeout": 0,
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 510,
+"y": 100,
+"wires": [
+[
+"6e4d3b0d.0f19f4"
+]
+]
+},
+{
+"id": "449d39cc.74b39c",
+"type": "mqtt in",
+"z": "7a6b9f35c292afc3",
+"name": "",
+"topic": "home/biaya",
+"qos": "2",
+"datatype": "auto",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": false,
+"inputs": 0,
+"x": 250,
+"y": 100,
+"wires": [
+[
+"4935cfa1d746c6e5"
+]
+]
+},
+{
+"id": "1b89104b.f9dd69",
+"type": "debug",
+"z": "7a6b9f35c292afc3",
+"name": "Saldo dan Biaya",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "payload",
+"targetType": "msg",
+"statusVal": "",
+"statusType": "auto",
+"x": 1100,
+"y": 120,
+"wires": []
+},
+{
+"id": "f9e49e944f3e9c91",
+"type": "ui_gauge",
+"z": "7a6b9f35c292afc3",
+"name": "",
+"group": "82c2598a7df32280",
+"order": 1,
+"width": 0,
+"height": 0,
+"gtype": "gage",
+"title": "biaya",
+"label": "Rp",
+"format": "{{value}}",
+"min": 0,
+"max": "500000",
+"colors": [
+"#00b500",
+"#e6e600",
+"#ca3838"
+],
+"seg1": "",
+"seg2": "",
+"diff": false,
+"className": "",
+"x": 990,
+"y": 180,
+"wires": []
+},
+{
+"id": "03653e140504c2b8",
+"type": "mqtt in",
+"z": "7a6b9f35c292afc3",
+"name": "",
+"topic": "home/Sisa_saldo_str",
+"qos": "2",
+"datatype": "auto",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": false,
+"inputs": 0,
+"x": 280,
+"y": 160,
+"wires": [
+[
+"4935cfa1d746c6e5"
+]
+]
+},
+{
+"id": "f70b72e84ed876bb",
+"type": "ui_gauge",
+"z": "7a6b9f35c292afc3",
+"name": "",
+"group": "af509f56f60c0440",
+"order": 1,
+"width": 0,
+"height": 0,
+"gtype": "gage",
+"title": "SALDO",
+"label": "Rp",
+"format": "{{value}}",
+"min": 0,
+"max": "500000",
+"colors": [
+"#00b500",
+"#e6e600",
+"#ca3838"
+],
+"seg1": "",
+"seg2": "",
+"diff": false,
+"className": "",
+"x": 1000,
+"y": 220,
+"wires": []
+},
+{
+"id": "839065eb37a5ec79",
+"type": "mysql",
+"z": "7a6b9f35c292afc3",
+"mydb": "368a06ae66c9d89d",
+"name": "",
+"x": 920,
+"y": 120,
+"wires": [
+[
+"1b89104b.f9dd69"
+]
+]
+},
+{
+"id": "648e6bec8df1f372",
+"type": "function",
+"z": "7a6b9f35c292afc3",
+"name": "Prepare Gauge Data",
+"func": "return [\n    { topic: 'saldo', payload: msg.payload['home/biaya'] },\n    { topic: 'biaya', payload: msg.payload['home/Sisa_saldo_str'] }\n];\n",
+"outputs": 2,
+"timeout": "1",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 660,
+"y": 180,
+"wires": [
+[
+"f9e49e944f3e9c91"
+],
+[
+"f70b72e84ed876bb"
+]
+]
+},
+{
+"id": "4935cfa1d746c6e5",
+"type": "join",
+"z": "7a6b9f35c292afc3",
+"name": "",
+"mode": "custom",
+"build": "object",
+"property": "payload",
+"propertyType": "msg",
+"key": "topic",
+"joiner": "\\n",
+"joinerType": "str",
+"accumulate": false,
+"timeout": "5",
+"count": "2",
+"reduceRight": false,
+"reduceExp": "",
+"reduceInit": "",
+"reduceInitType": "",
+"reduceFixup": "",
+"x": 470,
+"y": 120,
+"wires": [
+[
+"648e6bec8df1f372",
+"3a77456f1212e94f"
+]
+]
+},
+{
+"id": "c953a7d37d73e73b",
+"type": "delay",
+"z": "7a6b9f35c292afc3",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "1",
+"rateUnits": "second",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 780,
+"y": 120,
+"wires": [
+[
+"839065eb37a5ec79"
+]
+]
+},
+{
+"id": "3a77456f1212e94f",
+"type": "function",
+"z": "7a6b9f35c292afc3",
+"name": "Prepare SQL",
+"func": "var saldo = msg.payload['home/Sisa_saldo_str'] || 0;\nvar biaya = msg.payload['home/biaya'] || 0;\n\n\nmsg.topic = \"CALL insert_combined_biaya_data(?, ?)\";\nmsg.payload = [saldo, biaya];\n\nreturn msg;",
+"outputs": 1,
+"timeout": 0,
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 630,
+"y": 120,
+"wires": [
+[
+"c953a7d37d73e73b"
+]
+]
+},
+{
+"id": "d2d15ad8d7647032",
+"type": "mqtt out",
+"z": "5bdc7ce5a11533eb",
+"name": "",
+"topic": "home/Sisa_saldo_strin",
+"qos": "",
+"retain": "",
+"respTopic": "",
+"contentType": "",
+"userProps": "",
+"correl": "",
+"expiry": "",
+"broker": "0125ce50650cdbb1",
+"x": 500,
+"y": 300,
+"wires": []
+},
+{
+"id": "5e3eb55a0eab8b85",
+"type": "mysql",
+"z": "5bdc7ce5a11533eb",
+"mydb": "368a06ae66c9d89d",
+"name": "",
+"x": 560,
+"y": 140,
+"wires": [
+[
+"a71359fa0f06167f",
+"49466667ad194c38"
+]
+]
+},
+{
+"id": "c55ee54e2ffa1ae7",
+"type": "inject",
+"z": "5bdc7ce5a11533eb",
+"name": "Trigger",
+"props": [
+{
+"p": "payload"
+},
+{
+"p": "topic",
+"vt": "str"
+}
+],
+"repeat": "1",
+"crontab": "",
+"once": false,
+"onceDelay": 0.1,
+"topic": "",
+"payload": "",
+"payloadType": "date",
+"x": 180,
+"y": 140,
+"wires": [
+[
+"5f37aad96e108257"
+]
+]
+},
+{
+"id": "5f37aad96e108257",
+"type": "function",
+"z": "5bdc7ce5a11533eb",
+"name": "Set SQL Query",
+"func": "msg.topic = \"SELECT * FROM biaya_reference ORDER BY timestamp DESC LIMIT 1;\";\nreturn msg;\n",
+"outputs": 1,
+"timeout": "",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 360,
+"y": 140,
+"wires": [
+[
+"5e3eb55a0eab8b85"
+]
+]
+},
+{
+"id": "a71359fa0f06167f",
+"type": "function",
+"z": "5bdc7ce5a11533eb",
+"name": "Process Result",
+"func": "if (msg.payload.length > 0) {\n    let firstResult = msg.payload[0];  \n    msg.payload = firstResult.saldo;  \n    msg.topic = \"home/Sisa_saldo_strin\";\n} else {\n    msg.payload = null;\n    msg.topic = \"home/Sisa_saldo_strin\";\n}\nreturn msg;\n",
+"outputs": 1,
+"timeout": "",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 200,
+"y": 240,
+"wires": [
+[
+"d2d15ad8d7647032",
+"f579c19beb3a3516"
+]
+]
+},
+{
+"id": "f195ca992ecf7b9b",
+"type": "ui_switch",
+"z": "5bdc7ce5a11533eb",
+"name": "",
+"label": "Saldo Habis",
+"tooltip": "",
+"group": "d781f5579504374a",
+"order": 2,
+"width": 0,
+"height": 0,
+"passthru": true,
+"decouple": "false",
+"topic": "switch",
+"topicType": "str",
+"style": "",
+"onvalue": "ON",
+"onvalueType": "str",
+"onicon": "",
+"oncolor": "",
+"offvalue": "OFF",
+"offvalueType": "str",
+"officon": "",
+"offcolor": "",
+"animate": true,
+"className": "",
+"x": 690,
+"y": 240,
+"wires": [
+[
+"93718c042e3bf988",
+"ace092a18f00466a"
+]
+]
+},
+{
+"id": "93718c042e3bf988",
+"type": "mqtt out",
+"z": "5bdc7ce5a11533eb",
+"name": "",
+"topic": "home/relay1",
+"qos": "",
+"retain": "",
+"respTopic": "",
+"contentType": "",
+"userProps": "",
+"correl": "",
+"expiry": "",
+"broker": "0125ce50650cdbb1",
+"x": 910,
+"y": 220,
+"wires": []
+},
+{
+"id": "ace092a18f00466a",
+"type": "mqtt out",
+"z": "5bdc7ce5a11533eb",
+"name": "",
+"topic": "home/relay2",
+"qos": "",
+"retain": "",
+"respTopic": "",
+"contentType": "",
+"userProps": "",
+"correl": "",
+"expiry": "",
+"broker": "0125ce50650cdbb1",
+"x": 910,
+"y": 280,
+"wires": []
+},
+{
+"id": "f579c19beb3a3516",
+"type": "function",
+"z": "5bdc7ce5a11533eb",
+"name": "Control Relays",
+"func": "if (msg.payload > 0) {\n    return [\n        { payload: \"ON\", topic: \"home/relay1\" }, \n        { payload: \"ON\", topic: \"home/relay2\" }\n    ];\n} else {\n    return [\n        { payload: \"OFF\", topic: \"home/relay1\"} ,\n        { payload: \"OFF\", topic: \"home/relay2\" }\n    ];\n}\n", 
+"outputs": 1,
+"x": 480,
+"y": 240,
+"wires": [
+[
+"f195ca992ecf7b9b"
+]
+]
+},
+{
+"id": "49466667ad194c38",
+"type": "debug",
+"z": "5bdc7ce5a11533eb",
+"name": "Cut Off Saldo 0",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "payload",
+"targetType": "msg",
+"statusVal": "",
+"statusType": "auto",
+"x": 840,
+"y": 140,
+"wires": []
+},
+{
+"id": "028ca1c7ec14ac7f",
+"type": "function",
+"z": "7d83b851da4ca275",
+"name": "power control",
+"func": "if (msg.payload.length > 0) {\n    let firstResult = msg.payload[0];  \n    let power = firstResult.power;\n    if (power > 70) {\n        msg.payload \"OFF\"; \n    } else {\n        msg.payload = \"ON\";\n    }\n} else {\n    msg.payload = null;\n}\nreturn msg;\n",
+"outputs": 1,
+"timeout": "",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 220,
+"y": 240,
+"wires": [
+[
+"82316ecfbdb054aa"
+]
+]
+},
+{
+"id": "a8ebd539197d74d4",
+"type": "function",
+"z": "7d83b851da4ca275",
+"name": "Set SQL Query",
+"func": "msg.topic = \"SELECT * FROM sensor_reference1 ORDER BY timestamp DESC LIMIT 1;\";\nreturn msg;\n",
+"outputs": 1,
+"timeout": "",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 380,
+"y": 140,
+"wires": [
+[
+"2eedb6bd4716d51d"
+]
+]
+},
+{
+"id": "82316ecfbdb054aa",
+"type": "ui_switch",
+"z": "7d83b851da4ca275",
+"name": "",
+"label": "Limit Power",
+"tooltip": "",
+"group": "d781f5579504374a",
+"order": 2,
+"width": 0,
+"height": 0,
+"passthru": true,
+"decouple": "false",
+"topic": "switch",
+"topicType": "str",
+"style": "",
+"onvalue": "ON",
+"onvalueType": "str",
+"onicon": "",
+"oncolor": "",
+"offvalue": "OFF",
+"offvalueType": "str",
+"officon": "",
+"offcolor": "",
+"animate": true,
+"className": "",
+"x": 490,
+"y": 240,
+"wires": [
+[
+"f0c8cbc49f692dcb",
+"f038494bc7c08732"
+]
+]
+},
+{
+"id": "f0c8cbc49f692dcb",
+"type": "mqtt out",
+"z": "7d83b851da4ca275",
+"name": "",
+"topic": "home/relay1",
+"qos": "",
+"retain": "",
+"respTopic": "",
+"contentType": "",
+"userProps": "",
+"correl": "",
+"expiry": "",
+"broker": "0125ce50650cdbb1",
+"x": 710,
+"y": 220,
+"wires": []
+},
+{
+"id": "f038494bc7c08732",
+"type": "mqtt out",
+"z": "7d83b851da4ca275",
+"name": "",
+"topic": "home/relay2",
+"qos": "",
+"retain": "",
+"respTopic": "",
+"contentType": "",
+"userProps": "",
+"correl": "",
+"expiry": "",
+"broker": "0125ce50650cdbb1",
+"x": 710,
+"y": 280,
+"wires": []
+},
+{
+"id": "2eedb6bd4716d51d",
+"type": "mysql",
+"z": "7d83b851da4ca275",
+"mydb": "368a06ae66c9d89d",
+"name": "",
+"x": 570,
+"y": 140,
+"wires": [
+[
+"028ca1c7ec14ac7f",
+"b526572e317ba023"
+]
+]
+},
+{
+"id": "fbf1020ec022dc4b",
+"type": "inject",
+"z": "7d83b851da4ca275",
+"name": "Trigger",
+"props": [
+{
+"p": "payload"
+},
+{
+"p": "topic",
+"vt": "str"
+}
+],
+"repeat": "1",
+"crontab": "",
+"once": false,
+"onceDelay": 0.1,
+"topic": "",
+"payload": "",
+"payloadType": "date",
+"x": 200,
+"y": 140,
+"wires": [
+[
+"a8ebd539197d74d4"
+]
+]
+},
+{
+"id": "b526572e317ba023",
+"type": "debug",
+"z": "7d83b851da4ca275",
+"name": "Cut Off Limit Power",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "payload",
+"targetType": "msg",
+"statusVal": "",
+"statusType": "auto",
+"x": 810,
+"y": 140,
+"wires": []
+},
+{
+"id": "b99cab8831dc72fa",
+"type": "mqtt in",
+"z": "620c1fe405b2305c",
+"name": "",
+"topic": "pzemout1/voltage",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 220,
+"y": 80,
+"wires": [
+[
+"a2291e567f0e5df9"
+]
+]
+},
+{
+"id": "f32d474e6c660fab",
+"type": "mqtt in",
+"z": "620c1fe405b2305c",
+"name": "",
+"topic": "pzemout2/current",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 220,
+"y": 140,
+"wires": [
+[
+"d8a7c5c146b917eb"
+]
+]
+},
+{
+"id": "2db6f362d3cb8276",
+"type": "mqtt in",
+"z": "620c1fe405b2305c",
+"name": "",
+"topic": "pzemout4/energy",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 220,
+"y": 200,
+"wires": [
+[
+"612b460f12d5e95a"
+]
+]
+},
+{
+"id": "ba5bd0b9ef801e15",
+"type": "Firestore out",
+"z": "620c1fe405b2305c",
+"name": "",
+"collection": "monitoring",
+"document": "power",
+"operation": "set",
+"admin": "074ba01f214bc3d6",
+"eject": false,
+"x": 720,
+"y": 260,
+"wires": [
+[
+"8268df2e31f1c2b1"
+]
+]
+},
+{
+"id": "60c799c1cf7e9922",
+"type": "debug",
+"z": "620c1fe405b2305c",
+"name": "current",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "true",
+"targetType": "full",
+"statusVal": "",
+"statusType": "auto",
+"x": 920,
+"y": 140,
+"wires": []
+},
+{
+"id": "48d242f44302f359",
+"type": "Firestore out",
+"z": "620c1fe405b2305c",
+"name": "",
+"collection": "monitoring",
+"document": "current",
+"operation": "set",
+"admin": "074ba01f214bc3d6",
+"eject": false,
+"x": 720,
+"y": 140,
+"wires": [
+[
+"60c799c1cf7e9922"
+]
+]
+},
+{
+"id": "d8a7c5c146b917eb",
+"type": "function",
+"z": "620c1fe405b2305c",
+"name": "current",
+"func": "const current = msg.payload;\n\nmsg.payload = {\n    current: current\n};\n\nreturn msg;",
+"outputs": 1,
+"timeout": "0",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 420,
+"y": 140,
+"wires": [
+[
+"dcbaa96856f27019"
+]
+]
+},
+{
+"id": "56268fc7eafd0f57",
+"type": "debug",
+"z": "620c1fe405b2305c",
+"name": "voltage",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "true",
+"targetType": "full",
+"statusVal": "",
+"statusType": "auto",
+"x": 920,
+"y": 80,
+"wires": []
+},
+{
+"id": "08e7e0e9c216e80e",
+"type": "Firestore out",
+"z": "620c1fe405b2305c",
+"name": "",
+"collection": "monitoring",
+"document": "voltage",
+"operation": "set",
+"admin": "074ba01f214bc3d6",
+"eject": false,
+"x": 720,
+"y": 80,
+"wires": [
+[
+"56268fc7eafd0f57"
+]
+]
+},
+{
+"id": "a2291e567f0e5df9",
+"type": "function",
+"z": "620c1fe405b2305c",
+"name": "voltage",
+"func": "const voltage = msg.payload;\n\nmsg.payload = {\n    voltage: voltage\n};\n\nreturn msg;",
+"outputs": 1,
+"timeout": "0",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 420,
+"y": 80,
+"wires": [
+[
+"13b15a2eebee1102"
+]
+]
+},
+{
+"id": "fdd01177790d7bb8",
+"type": "debug",
+"z": "620c1fe405b2305c",
+"name": "energy",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "true",
+"targetType": "full",
+"statusVal": "",
+"statusType": "auto",
+"x": 910,
+"y": 200,
+"wires": []
+},
+{
+"id": "86abcfdd6d6ffdb5",
+"type": "Firestore out",
+"z": "620c1fe405b2305c",
+"name": "",
+"collection": "monitoring",
+"document": "energy",
+"operation": "set",
+"admin": "074ba01f214bc3d6",
+"eject": false,
+"x": 720,
+"y": 200,
+"wires": [
+[
+"fdd01177790d7bb8"
+]
+]
+},
+{
+"id": "612b460f12d5e95a",
+"type": "function",
+"z": "620c1fe405b2305c",
+"name": "energy",
+"func": "const energy = msg.payload;\n\nmsg.payload = {\n    energy: energy\n};\n\nreturn msg;",
+"outputs": 1,
+"timeout": "0",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 430,
+"y": 200,
+"wires": [
+[
+"bb423d8490a7c6ab"
+]
+]
+},
+{
+"id": "f3970796d6299093",
+"type": "mqtt in",
+"z": "620c1fe405b2305c",
+"name": "",
+"topic": "pzemout3/power",
+"qos": "2",
+"datatype": "auto-detect",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": true,
+"rh": 0,
+"inputs": 0,
+"x": 220,
+"y": 260,
+"wires": [
+[
+"616f9bf3cd4ebe75"
+]
+]
+},
+{
+"id": "8268df2e31f1c2b1",
+"type": "debug",
+"z": "620c1fe405b2305c",
+"name": "power",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "true",
+"targetType": "full",
+"statusVal": "",
+"statusType": "auto",
+"x": 910,
+"y": 260,
+"wires": []
+},
+{
+"id": "616f9bf3cd4ebe75",
+"type": "function",
+"z": "620c1fe405b2305c",
+"name": "power",
+"func": "const power = msg.payload;\n\nmsg.payload = {\n    power: power\n};\n\nreturn msg;",
+"outputs": 1,
+"timeout": "0",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 430,
+"y": 260,
+"wires": [
+[
+"a555d018be2a4d53"
+]
+]
+},
+{
+"id": "2c4b6b3671617172",
+"type": "mqtt in",
+"z": "620c1fe405b2305c",
+"name": "",
+"topic": "home/biaya",
+"qos": "2",
+"datatype": "auto",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": false,
+"inputs": 0,
+"x": 210,
+"y": 320,
+"wires": [
+[
+"af937fa63be45f05"
+]
+]
+},
+{
+"id": "5f1b222f6d9386cd",
+"type": "Firestore out",
+"z": "620c1fe405b2305c",
+"name": "",
+"collection": "monitoring",
+"document": "biaya",
+"operation": "set",
+"admin": "074ba01f214bc3d6",
+"eject": false,
+"x": 720,
+"y": 320,
+"wires": [
+[
+"8e18aacf51f1b9db"
+]
+]
+},
+{
+"id": "8e18aacf51f1b9db",
+"type": "debug",
+"z": "620c1fe405b2305c",
+"name": "biaya",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "true",
+"targetType": "full",
+"statusVal": "",
+"statusType": "auto",
+"x": 910,
+"y": 320,
+"wires": []
+},
+{
+"id": "af937fa63be45f05",
+"type": "function",
+"z": "620c1fe405b2305c",
+"name": "biaya",
+"func": "const biaya = msg.payload;\n\nmsg.payload = {\n    biaya: biaya\n};\n\nreturn msg;",
+"outputs": 1,
+"timeout": "0",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 430,
+"y": 320,
+"wires": [
+[
+"b71b914547a93a8e"
+]
+]
+},
+{
+"id": "71fe6196d3b71187",
+"type": "mqtt in",
+"z": "620c1fe405b2305c",
+"name": "",
+"topic": "home/Sisa_saldo_str",
+"qos": "2",
+"datatype": "auto",
+"broker": "0125ce50650cdbb1",
+"nl": false,
+"rap": false,
+"inputs": 0,
+"x": 240,
+"y": 380,
+"wires": [
+[
+"6d147314a516b854"
+]
+]
+},
+{
+"id": "d424afa2039a4662",
+"type": "Firestore out",
+"z": "620c1fe405b2305c",
+"name": "",
+"collection": "monitoring",
+"document": "saldo",
+"operation": "set",
+"admin": "074ba01f214bc3d6",
+"eject": false,
+"x": 720,
+"y": 380,
+"wires": [
+[
+"cdb4ffa631050bef"
+]
+]
+},
+{
+"id": "cdb4ffa631050bef",
+"type": "debug",
+"z": "620c1fe405b2305c",
+"name": "saldo",
+"active": true,
+"tosidebar": true,
+"console": false,
+"tostatus": false,
+"complete": "true",
+"targetType": "full",
+"statusVal": "",
+"statusType": "auto",
+"x": 910,
+"y": 380,
+"wires": []
+},
+{
+"id": "6d147314a516b854",
+"type": "function",
+"z": "620c1fe405b2305c",
+"name": "saldo",
+"func": "const saldo = msg.payload;\n\nmsg.payload = {\n    saldo: saldo\n};\n\nreturn msg;",
+"outputs": 1,
+"timeout": "0",
+"noerr": 0,
+"initialize": "",
+"finalize": "",
+"libs": [],
+"x": 430,
+"y": 380,
+"wires": [
+[
+"925a5da7cf3a392b"
+]
+]
+},
+{
+"id": "925a5da7cf3a392b",
+"type": "delay",
+"z": "620c1fe405b2305c",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "2",
+"rateUnits": "minute",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 560,
+"y": 380,
+"wires": [
+[
+"d424afa2039a4662"
+]
+]
+},
+{
+"id": "b71b914547a93a8e",
+"type": "delay",
+"z": "620c1fe405b2305c",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "2",
+"rateUnits": "minute",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 560,
+"y": 320,
+"wires": [
+[
+"5f1b222f6d9386cd"
+]
+]
+},
+{
+"id": "a555d018be2a4d53",
+"type": "delay",
+"z": "620c1fe405b2305c",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "2",
+"rateUnits": "minute",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 560,
+"y": 260,
+"wires": [
+[
+"ba5bd0b9ef801e15"
+]
+]
+},
+{
+"id": "bb423d8490a7c6ab",
+"type": "delay",
+"z": "620c1fe405b2305c",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "2",
+"rateUnits": "minute",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 560,
+"y": 200,
+"wires": [
+[
+"86abcfdd6d6ffdb5"
+]
+]
+},
+{
+"id": "dcbaa96856f27019",
+"type": "delay",
+"z": "620c1fe405b2305c",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "2",
+"rateUnits": "minute",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 560,
+"y": 140,
+"wires": [
+[
+"48d242f44302f359"
+]
+]
+},
+{
+"id": "13b15a2eebee1102",
+"type": "delay",
+"z": "620c1fe405b2305c",
+"name": "Trigger",
+"pauseType": "rate",
+"timeout": "5",
+"timeoutUnits": "seconds",
+"rate": "1",
+"nbRateUnits": "2",
+"rateUnits": "minute",
+"randomFirst": "1",
+"randomLast": "5",
+"randomUnits": "seconds",
+"drop": true,
+"allowrate": false,
+"outputs": 1,
+"x": 560,
+"y": 80,
+"wires": [
+[
+"08e7e0e9c216e80e"
+]
+]
+}
+]
+
diff --git a/Kode Program Website dan Flow Node_RED/Website Monitoring.html b/Kode Program Website dan Flow Node_RED/Website Monitoring.html
new file mode 100644
index 0000000..79f1d6b
--- /dev/null
+++ b/Kode Program Website dan Flow Node_RED/Website Monitoring.html	
@@ -0,0 +1,479 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Monitoring Website</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/justgage@1.4.0/dist/justgage.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+<style>
+body {
+font-family: Arial, sans-serif;
+background-color: #f4f4f4;
+margin: 0;
+padding: 0;
+box-sizing: border-box;
+}
+h1 {
+text-align: center;
+margin-top: 20px;
+color: #333;
+}
+.container {
+display: flex;
+flex-direction: column;
+align-items: center;
+margin: 20px auto;
+background-color: #fff;
+border-radius: 10px;
+box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+overflow: hidden;
+width: 80%;
+max-width: 1200px;
+}
+.data-display-container {
+display: flex;
+justify-content: space-around;
+width: 100%; 
+
+padding: 20px;
+box-sizing: border-box;
+}
+.data-display
+font-size: 1.2em;
+color: #333;
+}
+.data-display .icon {
+margin-right: 5px;
+}
+.row {
+display: flex;
+justify-content: space-between;
+flex-wrap: wrap;
+width: 100%;
+}
+.gauge-container, .chart-container {
+width: 45%;
+padding: 20px;
+box-sizing: border-box;
+text-align: center;
+}
+.gauge {
+width: 400px;
+height: 200px;
+margin: 0 auto; 
+}
+.gauge-title, .chart-title {
+margin-bottom: 10px;
+color: #555;
+}
+.gauge-title .fas, .chart-title .fas {
+margin-right: 5px;
+}
+</style>
+</head>
+<body>
+<h1>Data Monitoring</h1>
+
+<div class="container">
+<div class="data-display-container">
+<div class="data-display">
+<span class="icon">🔋</span><span id="voltage-value">-</span> V
+</div>
+<div class="data-display">
+<span class="icon">🔌</span><span id="current-value">-</span> A
+</div>
+<div class="data-display">
+<span class="icon">⚡</span><span id="power-value">-</span> W
+</div>
+<div class="data-display">
+<span class="icon">💡</span><span id="energy-value">-</span> kWh
+</div>
+<div class="data-display">
+<span class="icon">💸</span>Rp <span id="biaya-value">-</span> 
+</div>
+<div class="data-display">
+<span class="icon">💳</span>Rp <span id="sisasaldo-value">-</span>
+</div>
+</div>
+</div>
+<div class="container">
+<div class="row">
+<div class="gauge-container">
+<div class="gauge-title">🔋 Voltage Gauge</div>
+<div class="gauge" id="voltage-gauge"></div>
+</div>
+<div class="chart-container">
+<div class="chart-title">🔋 Voltage</div>
+<canvas id="voltage-chart" width="400" height="200"></canvas>
+</div>
+</div>
+</div>
+<div class="container">
+<div class="row">
+<div class="gauge-container">
+<div class="gauge-title">🔌 Current Gauge</div>
+<div class="gauge" id="current-gauge"></div>
+</div>
+<div class="chart-container">
+<div class="chart-title">🔌 Current</div>
+<canvas id="current-chart" width="400" height="200"></canvas>
+</div>
+</div>
+</div>
+<div class="container">
+<div class="row">
+<div class="gauge-container">
+<div class="gauge-title">⚡ Power Gauge</div>
+<div class="gauge" id="power-gauge"></div>
+</div>
+<div class="chart-container">
+<div class="chart-title">⚡ Power</div>
+<canvas id="power-chart" width="400" height="200"></canvas>
+</div>
+</div>
+</div>
+<div class="container">
+<div class="row">
+<div class="gauge-container">
+<div class="gauge-title">💡 Energy Gauge</div>
+<div class="gauge" id="energy-gauge"></div>
+</div>
+<div class="chart-container">
+<div class="chart-title">💡 Energy</div>
+<canvas id="energy-chart" width="400" height="200"></canvas>
+</div>
+</div>
+</div>
+<div class="container">
+<div class="row">
+<div class="gauge-container">
+<div class="gauge-title">💸 Biaya Gauge</div>
+<div class="gauge" id="biaya-gauge"></div>
+</div>
+<div class="chart-container">
+<div class="chart-title">💸 Biaya</div>
+<canvas id="biaya-chart" width="400" height="200"></canvas>
+</div>
+</div>
+</div>
+<div class="container">
+<div class="row">
+<div class="gauge-container">
+<div class="gauge-title">💳 Sisa Saldo Gauge</div>
+<div class="gauge" id="sisasaldo-gauge"></div>
+</div>
+<div class="chart-container">
+<div class="chart-title">💳 Sisa Saldo</div>
+<canvas id="sisasaldo-chart" width="400" height="200"></canvas>
+</div>
+</div>
+</div>
+
+<script>
+function fetchData(url) {
+return fetch(url)
+.then(response => response.json())
+.catch(error => console.error('Error fetching data:', error));
+}
+
+function updateDataDisplay(data) {
+document.getElementById('voltage-value').textContent = data.voltage;
+document.getElementById('current-value').textContent = data.current;
+document.getElementById('power-value').textContent = data.power;
+document.getElementById('energy-value').textContent = data.energy;
+document.getElementById('biaya-value').textContent = data.biaya;
+document.getElementById('sisasaldo-value').textContent = data.saldo;
+}
+
+function updateGauges(data) {
+if (!window.voltageGauge) {
+window.voltageGauge = new JustGage({
+id: "voltage-gauge",
+value: data.voltage,
+min: 0,
+max: 300,
+title: "Voltage",
+label: "V",
+decimals: 2
+});
+} else {
+window.voltageGauge.refresh(data.voltage);
+}
+if (!window.currentGauge) {
+window.currentGauge = new JustGage({
+id: "current-gauge",
+value: data.current,
+min: 0,
+max: 50,
+title: "Current",
+label: "A",
+decimals: 2
+});
+} else {
+window.currentGauge.refresh(data.current);
+}
+if (!window.powerGauge) {
+window.powerGauge = new JustGage({
+id: "power-gauge",
+value: data.power,
+min: 0,
+max: 2000,
+title: "Power",
+label: "W",
+decimals: 2
+});
+} else {
+window.powerGauge.refresh(data.power);
+}
+if (!window.energyGauge) {
+window.energyGauge = new JustGage({
+id: "energy-gauge",
+value: data.energy,
+min: 0,
+max: 1000,
+title: "Energy",
+label: "kWh",
+decimals: 3
+});
+} else {
+window.energyGauge.refresh(data.energy);
+}
+if (!window.biayaGauge) {
+window.biayaGauge = new JustGage({
+id: "biaya-gauge",
+value: data.biaya,
+min: 0,
+max: 500000,
+title: "Biaya",
+label: "Rp",
+decimals: 2
+});
+} else {
+window.biayaGauge.refresh(data.biaya);
+}
+if (!window.sisasaldoGauge) {
+window.sisasaldoGauge = new JustGage({
+id: "sisasaldo-gauge",
+value: data.saldo,
+min: 0,
+max: 500000,
+title: "Sisa Saldo",
+label: "Rp",
+decimals: 2
+});
+} else {
+window.sisasaldoGauge.refresh(data.saldo);
+}
+}
+
+let voltageChart, currentChart, powerChart, energyChart, biayaChart, sisasaldoChart;
+let chartCounter = 0;
+
+function initializeCharts() {
+const voltageCtx = document.getElementById('voltage-chart').getContext('2d');
+voltageChart = new Chart(voltageCtx, {
+type: 'line',
+data: {
+labels: [],
+datasets: [{
+label: 'Voltage (V)',
+data: [],
+borderColor: 'rgba(75, 192, 192, 1)',
+backgroundColor: 'rgba(75, 192, 192, 0.2)',
+fill: true,
+}]
+},
+options: {
+responsive: true,
+scales: {
+x: {
+type: 'linear',
+ticks: {
+beginAtZero: true
+}
+}
+}
+}
+});
+
+const currentCtx = document.getElementById('current-chart').getContext('2d');
+currentChart = new Chart(currentCtx, {
+type: 'line',
+data: {
+labels: [],
+datasets: [{
+label: 'Current (A)',
+data: [],
+borderColor: 'rgba(153, 102, 255, 1)',
+backgroundColor: 'rgba(153, 102, 255, 0.2)',
+fill: true,
+}]
+},
+options: {
+responsive: true,
+scales: {
+x: {
+type: 'linear',
+ticks: {
+beginAtZero: true
+}
+}
+}
+}
+});
+
+const powerCtx = document.getElementById('power-chart').getContext('2d');
+powerChart = new Chart(powerCtx, {
+type: 'line',
+data: {
+labels: [],
+datasets: [{
+label: 'Power (W)',
+data: [],
+borderColor: 'rgba(255, 159, 64, 1)',
+backgroundColor: 'rgba(255, 159, 64, 0.2)',
+fill: true,
+}]
+},
+options: {
+responsive: true,
+scales: {
+x: {
+type: 'linear',
+ticks: {
+beginAtZero: true
+}
+}
+}
+}
+});
+
+const energyCtx = document.getElementById('energy-chart').getContext('2d');
+energyChart = new Chart(energyCtx, {
+type: 'line',
+data: {
+labels: [],
+datasets: [{
+label: 'Energy (kWh)',
+data: [],
+borderColor: 'rgba(255, 206, 86, 1)',
+backgroundColor: 'rgba(255, 206, 86, 0.2)',
+fill: true,
+}]
+},
+options: {
+responsive: true,
+scales: {
+x: {
+type: 'linear',
+ticks: {
+beginAtZero: true
+}
+}
+}
+}
+});
+
+const biayaCtx = document.getElementById('biaya-chart').getContext('2d');
+biayaChart = new Chart(biayaCtx, {
+type: 'line',
+data: {
+labels: [],
+datasets: [{
+label: 'Biaya (Rp)',
+data: [],
+borderColor: 'rgba(54, 162, 235, 1)',
+backgroundColor: 'rgba(54, 162, 235, 0.2)',
+fill: true,
+}]
+},
+options: {
+responsive: true,
+scales: {
+x: {
+type: 'linear',
+ticks: {
+beginAtZero: true
+}
+}
+}
+}
+});
+
+const sisasaldoCtx = document.getElementById('sisasaldo-chart').getContext('2d');
+sisasaldoChart = new Chart(sisasaldoCtx, {
+type: 'line',
+data: {
+labels: [],
+datasets: [{
+label: 'Sisa Saldo (Rp)',
+data: [],
+borderColor: 'rgba(255, 99, 132, 1)',
+backgroundColor: 'rgba(255, 99, 132, 0.2)',
+fill: true,
+}]
+},
+options: {
+responsive: true,
+scales: {
+x: {
+type: 'linear',
+ticks: {
+beginAtZero: true
+}
+}
+}
+}
+});
+}
+
+function updateCharts(data) {
+chartCounter++;
+
+voltageChart.data.labels.push(chartCounter);
+voltageChart.data.datasets[0].data.push(data.voltage);
+voltageChart.update();
+
+currentChart.data.labels.push(chartCounter);
+currentChart.data.datasets[0].data.push(data.current);
+currentChart.update();
+
+powerChart.data.labels.push(chartCounter);
+powerChart.data.datasets[0].data.push(data.power);
+powerChart.update();
+
+energyChart.data.labels.push(chartCounter);
+energyChart.data.datasets[0].data.push(data.energy);
+energyChart.update();
+
+biayaChart.data.labels.push(chartCounter);
+biayaChart.data.datasets[0].data.push(data.biaya);
+biayaChart.update();
+
+sisasaldoChart.data.labels.push(chartCounter);
+sisasaldoChart.data.datasets[0].data.push(data.saldo);
+sisasaldoChart.update();
+}
+
+function fetchDataAndUpdateUI() {
+Promise.all([
+fetchData('fetch_data2.php'),
+fetchData('fetch_data3.php')
+]).then(([sensorData, biayaData]) => {
+const data = {...sensorData, ...biayaData};
+updateDataDisplay(data);
+updateGauges(data);
+updateCharts(data);
+}).catch(error => console.error('Error updating UI:', error));
+}
+
+initializeCharts();
+setInterval(fetchDataAndUpdateUI, 1000);
+</script>
+</body>
+</html>
+
diff --git a/Kode Program Website dan Flow Node_RED/database.php b/Kode Program Website dan Flow Node_RED/database.php
new file mode 100644
index 0000000..f94e4d8
--- /dev/null
+++ b/Kode Program Website dan Flow Node_RED/database.php	
@@ -0,0 +1,55 @@
+//fetch_data2
+<?php
+$servername = "localhost";
+$username = "root";
+$password = "devbas2603";
+$dbname = "tugas_akhir";
+$conn = new mysqli($servername, $username, $password, $dbname);
+if ($conn->connect_error) {
+die("Connection failed: " . $conn->connect_error);
+}
+
+$sql = "SELECT voltage, power, current, energy, timestamp FROM sensor_reference1 ORDER BY id DESC LIMIT 1"; 
+$result = $conn->query($sql);
+$data = array();
+if ($result->num_rows > 0) {
+// Output data of each row
+while ($row = $result->fetch_assoc()) {
+$data = array(
+'voltage' => $row['voltage'],
+'current' => $row['current'],
+'power' => $row['power'],
+'energy' => $row['energy']
+);
+}
+}
+$conn->close();
+header('Content-Type: application/json');
+echo json_encode($data);
+?>
+
+//fetch_data2
+<?php
+$servername = "localhost";
+$username = "root";
+$password = "devbas2603";
+$dbname = "tugas_akhir";
+$conn = new mysqli($servername, $username, $password, $dbname);
+if ($conn->connect_error) {
+die("Connection failed: " . $conn->connect_error);
+}
+$sql = "SELECT saldo, biaya, timestamp FROM biaya_reference ORDER BY id DESC LIMIT 1"; 
+$result = $conn->query($sql);
+$data = array();
+if ($result->num_rows > 0) {
+while ($row = $result->fetch_assoc()) {
+$data = array(
+'saldo' => $row['saldo'],
+'biaya' => $row['biaya']
+);
+}
+}
+$conn->close();
+header('Content-Type: application/json');
+echo json_encode($data);
+?>