In this tutorial, we will learn how to create your own localhost server which will act like thingspeak server. Where you can send sensor data and visualize the data in the table as well as in graph form.
In my previous tutorial How to send sensor data to thingspeak you can learn, how to send the sensor data to an external/cloud server. But in this tutorial, we will create our own server locally. We will create a server within our network this means the devices or computers connected to the same network can view the sensor data. Simply we can define this as we are in an INTRANET connection.
Software Requirements:
- XAMPP server (Download from HERE)
Follow this How to download and install XAMPP server tutorial to know the complete process of how to download and install the XAMPP server. This tutorial is a combination of video, picture, and guide to download and install the software package.
Step One to create web application
STEP 1: Goto C drive the default drive where XAMPP is supposed to install.
STEP 2: Navigate to htdocs folder and create a folder with your project name (mine: sensor)
STEP 3: Open the sensor folder and create a file name index.php and write down the below code.
<?php
include('dbconn.php');
$query = "SELECT * FROM sensor";
$results = mysqli_query($conn,$query);
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<title>Sensor Data</title>
</head>
<body style="padding-top:20px">
<center><h1>Logging sensor data</h1></center>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<div class="container py-5">
<div class="card">
<div class="card-header">
Sensor Data
</div>
<div class="card-body">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Slno</th>
<th>Date/Time</th>
<th>Humidity</th>
<th>Temperature</th>
</tr>
</thead>
<tbody>
<?php
foreach($results as $i => $result){
$dt = $result['datevalue']." ".$result['timevalue'];
?>
<tr>
<td><?=$i+1;?></td>
<td><?=$dt?></td>
<td><?=$result['humi']?></td>
<td><?=$result['temp']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
STEP 4: Now go to the browser and type http://localhost/phpmyadmin and create a database with sensordata database name.
STEP 5: After creating the database create a table with the sensor table name and create five fields as shown below.
| name | data type | data length |
| id | INT | 11 |
| datevalue | VARCHAR | 50 |
| timevalue | VARCHAR | 50 |
| humi | VARCHAR | 10 |
| temp | VARCHAR | 10 |
STEP 6: Now create a database connection file dbconn.php within the sensor folder. Use the below code to connect the database.
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "sensordata";
$conn = mysqli_connect($host, $user, $password, $dbname);
if(!$conn){
die("Error in connection !!!");
}//else{
//echo "Connected create successfully ...";
//}
?>
STEP 7: Now create a receiver.php file that will receive the data when you try to send from the ESP8266 module. And copy and paste the below code.
<?php
include('dbconn.php');
date_default_timezone_set('Asia/Calcutta');
$current_date = date("Y-m-d");
$current_time = date("H:i:s");
if($_GET['type']=="DHT"){
//$timedate = $current_date." ". $current_time;
$humi = $_GET['humi'];
$temp = $_GET['temp'];
$query = "INSERT INTO sensor(datevalue, timevalue, humi, temp) VALUES('$current_date','$current_time','$humi','$temp')";
$result = mysqli_query($conn,$query);
if($result){
echo "Success_Insert";
}
else{
echo "Error_Insert";
}
}
?>
The below code will display the graph of sensor data and every 20 seconds it will refresh.
<?php
include('dbcon.php');
$query = "SELECT * FROM sensor";
$results = mysqli_query($conn,$query);
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<title>test</title>
</head>
<body>
<center><h1 style="padding-top:20px">Logging Sensor Data</h1></center>
<div class="container py-5">
<div class="card">
<div class="card-header">
Data graph
</div>
<div class="card-body">
<canvas id="myChart" width="400" height="150"></canvas>
</div>
</div>
</div>
<div class="container" style="padding-top:20px">
<div class="card">
<div class="card-header">
Sensor Data
</div>
<div class="card-body">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>SlNo</th>
<th>Time Stamp</th>
<th>Humidity</th>
<th>Temperature</th>
</tr>
</thead>
<tbody>
<?php
foreach($results as $i => $result){
$dt = $result['datevalue']." ".$result['timevalue'];
?>
<tr>
<td><?=$i?></td>
<td><?=$dt?></td>
<td><?=$result['humi']?></td>
<td><?=$result['temp']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
<script>
$(document).ready(function() {
$('#example').DataTable();
showGraph();
} );
function showGraph()
{
{
$.post("chart-data.php",
function (data)
{
console.log(data);
var timedata = [];
var humidata = [];
var tempdata = [];
for (var i in data) {
timedata.push(data[i].timevalue);
humidata.push(data[i].humi);
tempdata.push(data[i].temp);
}
var ctx = document.getElementById('myChart').getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: timedata,
datasets: [{
label: 'Humidity',
borderColor: 'rgb(98, 215, 245)',
data: humidata
},
{
label: 'Temperature',
borderColor: 'rgb(255, 99, 99)',
data: tempdata
}
]
},
// Configuration options go here
options: {
scales: {
xAxes: [{
ticks: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Sensor Data'
}
}]
}
}
});
});
}
}
setInterval(function(){
showGraph();
}, 20000);
</script>How to send sensor data to the local server. Please follow my previous tutorial on how to send sensor data to thingspeak server.
Video Tutorial:
0 Comments
Please do not enter any spam link in the comment box.