Scribd
Upload
106 views16 pages

Final PHP Code

The PHP code files provide functionality for accessing a database and updating/retrieving sensor data and LED state information stored in database tables. Specifically, the files define a Database class to connect to and interact with the database. Additional files handle updating sensor data and LED state in database tables, retrieving data to display on a web page, and updating the LED states in response to user input.

Uploaded by

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

Final PHP Code

The PHP code files provide functionality for accessing a database and updating/retrieving sensor data and LED state information stored in database tables. Specifically, the files define a Database class to connect to and interact with the database. Additional files handle updating sensor data and LED state in database tables, retrieving data to display on a web page, and updating the LED states in response to user input.

Uploaded by

aabapurbo2083
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

//

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>> database.php
// PHP code to access the database.
<?php
class Database {
private static $dbName = 'REPLACE_WITH_YOUR_DATABASE_NAME'; // Example:
private static $dbName = 'myDB';
private static $dbHost =
'REPLACE_WITH_YOUR_HOST_NAME_OR_SERVER_NAME'; // Example: private static $dbHost =
'localhost';
private static $dbUsername = 'REPLACE_WITH_YOUR_USERNAME'; // Example:
private static $dbUsername = 'myUserName';
private static $dbUserPassword = 'REPLACE_WITH_YOUR_PASSWORD'; // //
Example: private static $dbUserPassword = 'myPassword';

private static $cont = null;

public function __construct() {


die('Init function is not allowed');
}

public static function connect() {


// One connection through whole application
if ( null == self::$cont ) {
try {
self::$cont = new PDO( "mysql:host=".self::$dbHost.";"."dbname=".self::
$dbName, self::$dbUsername, self::$dbUserPassword);
} catch(PDOException $e) {
die($e->getMessage());
}
}
return self::$cont;
}

public static function disconnect() {


self::$cont = null;
}
}
?>
//
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<

###################################################################################
#########
###################################################################################
#########
###################################################################################
#########
###################################################################################
#########

//
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>> updateDHT11data_and_recordtable.php
// PHP code to update and record DHT11 sensor data and LEDs state in table.
<?php
require 'database.php';

//---------------------------------------- Condition to check that POST value is


not empty.
if (!empty($_POST)) {
//........................................ keep track POST values
$id = $_POST['id'];
$temperature = $_POST['temperature'];
$humidity = $_POST['humidity'];
$status_read_sensor_dht11 = $_POST['status_read_sensor_dht11'];
$led_01 = $_POST['led_01'];
$led_02 = $_POST['led_02'];
//........................................

//........................................ Get the time and date.


date_default_timezone_set("Asia/Jakarta"); // Look here for your timezone :
https://www.php.net/manual/en/timezones.php
$tm = date("H:i:s");
$dt = date("Y-m-d");
//........................................

//........................................ Updating the data in the table.


$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// replace_with_your_table_name, on this project I use the table name
'esp32_table_dht11_leds_update'.
// This table is used to store DHT11 sensor data updated by ESP32.
// This table is also used to store the state of the LEDs, the state of the
LEDs is controlled from the "home.php" page.
// This table is operated with the "UPDATE" command, so this table will only
contain one row.
$sql = "UPDATE replace_with_your_table_name SET temperature = ?, humidity = ?,
status_read_sensor_dht11 = ?, time = ?, date = ? WHERE id = ?";
$q = $pdo->prepare($sql);
$q->execute(array($temperature,$humidity,$status_read_sensor_dht11,$tm,$dt,
$id));
Database::disconnect();
//........................................

//........................................ Entering data into a table.


$id_key;
$board = $_POST['id'];
$found_empty = false;

$pdo = Database::connect();

//:::::::: Process to check if "id" is already in use.


while ($found_empty == false) {
$id_key = generate_string_id(10);
// replace_with_your_table_name, on this project I use the table name
'esp32_table_dht11_leds_record'.
// This table is used to store and record DHT11 sensor data updated by ESP32.

// This table is also used to store and record the state of the LEDs, the
state of the LEDs is controlled from the "home.php" page.
// This table is operated with the "INSERT" command, so this table will
contain many rows.
// Before saving and recording data in this table, the "id" will be checked
first, to ensure that the "id" that has been created has not been used in the
table.
$sql = 'SELECT * FROM replace_with_your_table_name WHERE id="' . $id_key .
'"';
$q = $pdo->prepare($sql);
$q->execute();

if (!$data = $q->fetch()) {
$found_empty = true;
}
}
//::::::::

//:::::::: The process of entering data into a table.


$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// replace_with_your_table_name, on this project I use the table name
'esp32_table_dht11_leds_record'.
// This table is used to store and record DHT11 sensor data updated by ESP32.
// This table is also used to store and record the state of the LEDs, the state
of the LEDs is controlled from the "home.php" page.
// This table is operated with the "INSERT" command, so this table will contain
many rows.
$sql = "INSERT INTO replace_with_your_table_name
(id,board,temperature,humidity,status_read_sensor_dht11,LED_01,LED_02,time,date)
values(?, ?, ?, ?, ?, ?, ?, ?, ?)";
$q = $pdo->prepare($sql);
$q->execute(array($id_key,$board,$temperature,$humidity,
$status_read_sensor_dht11,$led_01,$led_02,$tm,$dt));
//::::::::

Database::disconnect();
//........................................
}
//----------------------------------------

//---------------------------------------- Function to create "id" based on


numbers and characters.
function generate_string_id($strength = 16) {
$permitted_chars =
'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$input_length = strlen($permitted_chars);
$random_string = '';
for($i = 0; $i < $strength; $i++) {
$random_character = $permitted_chars[mt_rand(0, $input_length - 1)];
$random_string .= $random_character;
}
return $random_string;
}
//----------------------------------------
?>
//
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<

###################################################################################
#########
###################################################################################
#########
###################################################################################
#########
###################################################################################
#########

//
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>> getdata.php
// PHP file to get DHT11 sensor data and LEDs state stored in table in database to
display on "home.php" page.
// This file is also accessed by ESP32 to get the state of the LEDs, the state of
the LEDs is controlled from the "home.php" page.
<?php
include 'database.php';

//---------------------------------------- Condition to check that POST value is


not empty.
if (!empty($_POST)) {
// keep track post values
$id = $_POST['id'];

$myObj = (object)array();

//........................................
$pdo = Database::connect();
// replace_with_your_table_name, on this project I use the table name
'esp32_table_dht11_leds_update'.
// This table is used to store DHT11 sensor data updated by ESP32.
// This table is also used to store the state of the LEDs, the state of the
LEDs is controlled from the "home.php" page.
// To store data, this table is operated with the "UPDATE" command, so this
table contains only one row.
$sql = 'SELECT * FROM replace_with_your_table_name WHERE id="' . $id . '"';
foreach ($pdo->query($sql) as $row) {
$date = date_create($row['date']);
$dateFormat = date_format($date,"d-m-Y");

$myObj->id = $row['id'];
$myObj->temperature = $row['temperature'];
$myObj->humidity = $row['humidity'];
$myObj->status_read_sensor_dht11 = $row['status_read_sensor_dht11'];
$myObj->LED_01 = $row['LED_01'];
$myObj->LED_02 = $row['LED_02'];
$myObj->ls_time = $row['time'];
$myObj->ls_date = $dateFormat;

$myJSON = json_encode($myObj);

echo $myJSON;
}
Database::disconnect();
//........................................
}
//----------------------------------------
?>
//
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<

###################################################################################
#########
###################################################################################
#########
###################################################################################
#########
###################################################################################
#########

//
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>> updateLEDs.php
// PHP code to update the state of the LEDs, the state of the LEDs is controlled
from the "home.php" page.
<?php
require 'database.php';

//---------------------------------------- Condition to check that POST value is


not empty.
if (!empty($_POST)) {
//........................................ keep track post values
$id = $_POST['id'];
$lednum = $_POST['lednum'];
$ledstate = $_POST['ledstate'];
//........................................

//........................................
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// replace_with_your_table_name, on this project I use the table name
'esp32_table_dht11_leds_update'.
// This table is used to store DHT11 sensor data updated by ESP32.
// This table is also used to store the state of the LEDs, the state of the
LEDs is controlled from the "home.php" page.
// To store data, this table is operated with the "UPDATE" command, so this
table contains only one row.
$sql = "UPDATE replace_with_your_table_name SET " . $lednum . " = ? WHERE id
= ?";
$q = $pdo->prepare($sql);
$q->execute(array($ledstate,$id));
Database::disconnect();
//........................................
}
//----------------------------------------
?>
//
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<
###################################################################################
#########
###################################################################################
#########
###################################################################################
#########
###################################################################################
#########

//
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>> home.php
// PHP/HTML code to display DHT11 sensor data and control LEDs state.
<!DOCTYPE HTML>
<html>
<head>
<title>ESP32 WITH MYSQL DATABASE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-
fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<link rel="icon" href="data:,">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
p {font-size: 1.2rem;}
h4 {font-size: 0.8rem;}
body {margin: 0;}
.topnav {overflow: hidden; background-color: #0c6980; color: white; font-
size: 1.2rem;}
.content {padding: 5px; }
.card {background-color: white; box-shadow: 0px 0px 10px 1px
rgba(140,140,140,.5); border: 1px solid #0c6980; border-radius: 15px;}
.card.header {background-color: #0c6980; color: white; border-bottom-right-
radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 12px; border-
top-left-radius: 12px;}
.cards {max-width: 700px; margin: 0 auto; display: grid; grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.reading {font-size: 1.3rem;}
.packet {color: #bebebe;}
.temperatureColor {color: #fd7e14;}
.humidityColor {color: #1b78e2;}
.statusreadColor {color: #702963; font-size:12px;}
.LEDColor {color: #183153;}

/* ----------------------------------- Toggle Switch */


.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

.switch input {display:none;}

.sliderTS {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #D3D3D3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}

.sliderTS:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: #f7f7f7;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}

input:checked + .sliderTS {
background-color: #00878F;
}

input:focus + .sliderTS {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliderTS:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

.sliderTS:after {
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 70%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked + .sliderTS:after {
left: 25%;
content:'ON';
}

input:disabled + .sliderTS {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
/* ----------------------------------- */
</style>
</head>

<body>
<div class="topnav">
<h3>ESP32 WITH MYSQL DATABASE</h3>
</div>

<br>

<!-- __ DISPLAYS MONITORING AND CONTROLLING


___________________________________________________________________________________
_________ -->
<div class="content">
<div class="cards">

<!-- == MONITORING
===================================================================================
===== -->
<div class="card">
<div class="card header">
<h3 style="font-size: 1rem;">MONITORING</h3>
</div>

<!-- Displays the humidity and temperature values received from ESP32.
*** -->
<h4 class="temperatureColor"><i class="fas fa-thermometer-half"></i>
TEMPERATURE</h4>
<p class="temperatureColor"><span class="reading"><span
id="ESP32_01_Temp"></span> &deg;C</span></p>
<h4 class="humidityColor"><i class="fas fa-tint"></i> HUMIDITY</h4>
<p class="humidityColor"><span class="reading"><span
id="ESP32_01_Humd"></span> &percnt;</span></p>
<!--
*********************************************************************** -->

<p class="statusreadColor"><span>Status Read Sensor DHT11 : </span><span


id="ESP32_01_Status_Read_DHT11"></span></p>
</div>
<!--
===================================================================================
==================== -->

<!-- == CONTROLLING
===================================================================================
===== -->
<div class="card">
<div class="card header">
<h3 style="font-size: 1rem;">CONTROLLING</h3>
</div>

<!-- Buttons for controlling the LEDs on Slave 2.


************************** -->
<h4 class="LEDColor"><i class="fas fa-lightbulb"></i> LED 1</h4>
<label class="switch">
<input type="checkbox" id="ESP32_01_TogLED_01"
onclick="GetTogBtnLEDState('ESP32_01_TogLED_01')">
<div class="sliderTS"></div>
</label>
<h4 class="LEDColor"><i class="fas fa-lightbulb"></i> LED 2</h4>
<label class="switch">
<input type="checkbox" id="ESP32_01_TogLED_02"
onclick="GetTogBtnLEDState('ESP32_01_TogLED_02')">
<div class="sliderTS"></div>
</label>
<!--
*********************************************************************** -->
</div>
<!--
===================================================================================
==================== -->

</div>
</div>

<br>

<div class="content">
<div class="cards">
<div class="card header" style="border-radius: 15px;">
<h3 style="font-size: 0.7rem;">LAST TIME RECEIVED DATA FROM ESP32
[ <span id="ESP32_01_LTRD"></span> ]</h3>
<button onclick="window.open('recordtable.php', '_blank');">Open Record
Table</button>
<h3 style="font-size: 0.7rem;"></h3>
</div>
</div>
</div>
<!--
___________________________________________________________________________________
________________________________________________ -->

<script>
//------------------------------------------------------------
document.getElementById("ESP32_01_Temp").innerHTML = "NN";
document.getElementById("ESP32_01_Humd").innerHTML = "NN";
document.getElementById("ESP32_01_Status_Read_DHT11").innerHTML = "NN";
document.getElementById("ESP32_01_LTRD").innerHTML = "NN";
//------------------------------------------------------------

Get_Data("esp32_01");

setInterval(myTimer, 5000);

//------------------------------------------------------------
function myTimer() {
Get_Data("esp32_01");
}
//------------------------------------------------------------

//------------------------------------------------------------
function Get_Data(id) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const myObj = JSON.parse(this.responseText);
if (myObj.id == "esp32_01") {
document.getElementById("ESP32_01_Temp").innerHTML =
myObj.temperature;
document.getElementById("ESP32_01_Humd").innerHTML = myObj.humidity;
document.getElementById("ESP32_01_Status_Read_DHT11").innerHTML =
myObj.status_read_sensor_dht11;
document.getElementById("ESP32_01_LTRD").innerHTML = "Time : " +
myObj.ls_time + " | Date : " + myObj.ls_date + " (dd-mm-yyyy)";
if (myObj.LED_01 == "ON") {
document.getElementById("ESP32_01_TogLED_01").checked = true;
} else if (myObj.LED_01 == "OFF") {
document.getElementById("ESP32_01_TogLED_01").checked = false;
}
if (myObj.LED_02 == "ON") {
document.getElementById("ESP32_01_TogLED_02").checked = true;
} else if (myObj.LED_02 == "OFF") {
document.getElementById("ESP32_01_TogLED_02").checked = false;
}
}
}
};
xmlhttp.open("POST","getdata.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xmlhttp.send("id="+id);
}
//------------------------------------------------------------

//------------------------------------------------------------
function GetTogBtnLEDState(togbtnid) {
if (togbtnid == "ESP32_01_TogLED_01") {
var togbtnchecked = document.getElementById(togbtnid).checked;
var togbtncheckedsend = "";
if (togbtnchecked == true) togbtncheckedsend = "ON";
if (togbtnchecked == false) togbtncheckedsend = "OFF";
Update_LEDs("esp32_01","LED_01",togbtncheckedsend);
}
if (togbtnid == "ESP32_01_TogLED_02") {
var togbtnchecked = document.getElementById(togbtnid).checked;
var togbtncheckedsend = "";
if (togbtnchecked == true) togbtncheckedsend = "ON";
if (togbtnchecked == false) togbtncheckedsend = "OFF";
Update_LEDs("esp32_01","LED_02",togbtncheckedsend);
}
}
//------------------------------------------------------------

//------------------------------------------------------------
function Update_LEDs(id,lednum,ledstate) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("demo").innerHTML = this.responseText;
}
}
xmlhttp.open("POST","updateLEDs.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xmlhttp.send("id="+id+"&lednum="+lednum+"&ledstate="+ledstate);
}
//------------------------------------------------------------
</script>
</body>
</html>
//
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<

###################################################################################
#########
###################################################################################
#########
###################################################################################
#########
###################################################################################
#########

//
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>> recordtable.php
// PHP/HTML code to display a record table of DHT11 sensor data and LEDs state.
<!DOCTYPE HTML>
<html>
<head>
<title>ESP32 WITH MYSQL DATABASE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
p {font-size: 1.2rem;}
h4 {font-size: 0.8rem;}
body {margin: 0;}
/* ----------------------------------- TOPNAV STYLE */
.topnav {overflow: hidden; background-color: #0c6980; color: white; font-
size: 1.2rem;}
/* ----------------------------------- */

/* ----------------------------------- TABLE STYLE */


.styled-table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
border-radius: 0.5em;
overflow: hidden;
width: 90%;
}

.styled-table thead tr {
background-color: #0c6980;
color: #ffffff;
text-align: left;
}

.styled-table th {
padding: 12px 15px;
text-align: left;
}

.styled-table td {
padding: 12px 15px;
text-align: left;
}

.styled-table tbody tr:nth-of-type(even) {


background-color: #f3f3f3;
}

.styled-table tbody tr.active-row {


font-weight: bold;
color: #009879;
}

.bdr {
border-right: 1px solid #e3e3e3;
border-left: 1px solid #e3e3e3;
}

td:hover {background-color: rgba(12, 105, 128, 0.21);}


tr:hover {background-color: rgba(12, 105, 128, 0.15);}
.styled-table tbody tr:nth-of-type(even):hover {background-color: rgba(12,
105, 128, 0.15);}
/* ----------------------------------- */

/* ----------------------------------- BUTTON STYLE */


.btn-group .button {
background-color: #0c6980; /* Green */
border: 1px solid #e3e3e3;
color: white;
padding: 5px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
float: center;
}
.btn-group .button:not(:last-child) {
border-right: none; /* Prevent double borders */
}

.btn-group .button:hover {
background-color: #094c5d;
}

.btn-group .button:active {
background-color: #0c6980;
transform: translateY(1px);
}

.btn-group .button:disabled,
.button.disabled{
color:#fff;
background-color: #a0a0a0;
cursor: not-allowed;
pointer-events:none;
}
/* ----------------------------------- */
</style>
</head>

<body>
<div class="topnav">
<h3>ESP32 WITH MYSQL DATABASE</h3>
</div>

<br>

<h3 style="color: #0c6980;">ESP32_01 RECORD DATA TABLE</h3>

<table class="styled-table" id= "table_id">


<thead>
<tr>
<th>NO</th>
<th>ID</th>
<th>BOARD</th>
<th>TEMPERATURE (°C)</th>
<th>HUMIDITY (%)</th>
<th>STATUS READ SENSOR DHT11</th>
<th>LED 01</th>
<th>LED 02</th>
<th>TIME</th>
<th>DATE (dd-mm-yyyy)</th>
</tr>
</thead>
<tbody id="tbody_table_record">
<?php
include 'database.php';
$num = 0;
//------------------------------------------------------------ The
process for displaying a record table containing the DHT11 sensor data and the
state of the LEDs.
$pdo = Database::connect();
// replace_with_your_table_name, on this project I use the table name
'esp32_table_dht11_leds_record'.
// This table is used to store and record DHT11 sensor data updated by
ESP32.
// This table is also used to store and record the state of the LEDs, the
state of the LEDs is controlled from the "home.php" page.
// To store data, this table is operated with the "INSERT" command, so
this table will contain many rows.
$sql = 'SELECT * FROM replace_with_your_table_name ORDER BY date, time';
foreach ($pdo->query($sql) as $row) {
$date = date_create($row['date']);
$dateFormat = date_format($date,"d-m-Y");
$num++;
echo '<tr>';
echo '<td>'. $num . '</td>';
echo '<td class="bdr">'. $row['id'] . '</td>';
echo '<td class="bdr">'. $row['board'] . '</td>';
echo '<td class="bdr">'. $row['temperature'] . '</td>';
echo '<td class="bdr">'. $row['humidity'] . '</td>';
echo '<td class="bdr">'. $row['status_read_sensor_dht11'] . '</td>';
echo '<td class="bdr">'. $row['LED_01'] . '</td>';
echo '<td class="bdr">'. $row['LED_02'] . '</td>';
echo '<td class="bdr">'. $row['time'] . '</td>';
echo '<td>'. $dateFormat . '</td>';
echo '</tr>';
}
Database::disconnect();
//------------------------------------------------------------
?>
</tbody>
</table>

<br>

<div class="btn-group">
<button class="button" id="btn_prev" onclick="prevPage()">Prev</button>
<button class="button" id="btn_next" onclick="nextPage()">Next</button>
<div style="display: inline-block; position:relative; border: 0px solid
#e3e3e3; float: center; margin-left: 2px;;">
<p style="position:relative; font-size: 14px;"> Table : <span
id="page"></span></p>
</div>
<select name="number_of_rows" id="number_of_rows">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<button class="button" id="btn_apply"
onclick="apply_Number_of_Rows()">Apply</button>
</div>

<br>

<script>
//------------------------------------------------------------
var current_page = 1;
var records_per_page = 10;
var l = document.getElementById("table_id").rows.length
//------------------------------------------------------------

//------------------------------------------------------------
function apply_Number_of_Rows() {
var x = document.getElementById("number_of_rows").value;
records_per_page = x;
changePage(current_page);
}
//------------------------------------------------------------

//------------------------------------------------------------
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
//------------------------------------------------------------

//------------------------------------------------------------
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
//------------------------------------------------------------

//------------------------------------------------------------
function changePage(page) {
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("table_id");
var page_span = document.getElementById("page");

// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();

[...listing_table.getElementsByTagName('tr')].forEach((tr)=>{
tr.style.display='none'; // reset all to not display
});
listing_table.rows[0].style.display = ""; // display the title row

for (var i = (page-1) * records_per_page + 1; i < (page * records_per_page)


+ 1; i++) {
if (listing_table.rows[i]) {
listing_table.rows[i].style.display = ""
} else {
continue;
}
}

page_span.innerHTML = page + "/" + numPages() + " (Total Number of Rows = "


+ (l-1) + ") | Number of Rows : ";

if (page == 0 && numPages() == 0) {


btn_prev.disabled = true;
btn_next.disabled = true;
return;
}
if (page == 1) {
btn_prev.disabled = true;
} else {
btn_prev.disabled = false;
}

if (page == numPages()) {
btn_next.disabled = true;
} else {
btn_next.disabled = false;
}
}
//------------------------------------------------------------

//------------------------------------------------------------
function numPages() {
return Math.ceil((l - 1) / records_per_page);
}
//------------------------------------------------------------

//------------------------------------------------------------
window.onload = function() {
var x = document.getElementById("number_of_rows").value;
records_per_page = x;
changePage(current_page);
};
//------------------------------------------------------------
</script>
</body>
</html>
//
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
<<<<<<

You might also like