{"id":3845,"date":"2025-07-05T05:07:52","date_gmt":"2025-07-05T05:07:52","guid":{"rendered":"https:\/\/iotthinghub.com\/?p=3845"},"modified":"2025-07-05T05:45:56","modified_gmt":"2025-07-05T05:45:56","slug":"live-sensor-data-display-%f0%9f%8c%90-creating-a-free-sub-domain-hosting","status":"publish","type":"post","link":"https:\/\/iotthinghub.com\/?p=3845","title":{"rendered":"Live Sensor Data Display \ud83c\udf10 Creating a free Sub-Domain & Hosting"},"content":{"rendered":"\n

In this article we learn something different, something new. We will develop a full website to display your sensor data in your own website. The website hosting & domain is full free & support pHp script for your works. Let\u2019s start. At first you have to sign in the following website along with only your email address, no other personal data-<\/p>\n\n\n\n

Website : https:\/\/www.awardspace.com\/<\/a><\/p>\n\n\n\n

For creating & setup your first website please sees my YouTube Video. Since it involves lots of steps & all steps are in the Video. Since it involve no coding just watch the video & create your first site. Now let\u2019s move on the process. In the file manager section expend the parameter & in <wp-content> section pastes a pHp file. The section is something like this-<\/p>\n\n\n\n

https:\/\/cp1.awardspace.net\/file-manager\/www\/YourDomain.atwebpages.com\/wp-content<\/a><\/p>\n\n\n\n

The pHp file-<\/p>\n\n\n

\n<?php\nheader("Access-Control-Allow-Origin: *");\nheader("Content-Type: application\/json");\n\n$dataFile = __DIR__ . '\/sensor-data.json';\n\nif ($_SERVER['REQUEST_METHOD'] === 'POST') {\n    $temperature = $_POST['temperature'] ?? null;\n    $humidity = $_POST['humidity'] ?? null;\n\n    if ($temperature !== null && $humidity !== null) {\n         $data = $ temperature . "," . $ humidity;\n        file_put_contents($dataFile, json_encode([\n            'temperature' => $temperature,\n            'humidity' => $humidity,\n            'timestamp' => date('Y-m-d H:i:s')\n        ]));\n        file_put_contents("sensor-data.txt", $data);\n        echo json_encode(['status' => 'success']);\n    } else {\n        echo json_encode(['status' => 'error', 'message' => 'Missing fields']);\n    }\n    exit;\n}\n\nif (file_exists($dataFile)) {\n    echo file_get_contents($dataFile);\n} else {\n    echo json_encode(['temperature' => null, 'humidity' => null]);\n}\n<\/pre><\/div>\n\n\n
This is a very simple file with no API key & email notification. It is used for your testing purpose. In my previous article we develop a program to send heat alarm to my WhatsApp number. You can use that CallMeBoT function for WhatsApp notification. Name any to your pHp file. Let\u2019s check if our pHp file works or not. Paste YourDomain & pHpName with your original domain & pHp name & hit enter button into the browser-<\/p>\n\n\n\n
http:\/\/YourDomain.atwebpages.com\/wp-content\/pHpName.php<\/a><\/p>\n\n\n\n
You Get something like this in JSON format.<\/p>\n\n\n
\ntemperature\u00a0     : " null "\nhumidity\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : " null "\n<\/pre><\/div>\n\n\n
Now it\u2019s time to send some data to the pHp server. The HTTP POST method is used to send data to a server to create or update a resource. Unlike GET requests, which append parameters to the URL, POST requests include data in the request body, making them more secure and suitable for larger payloads.<\/p>\n\n\n\n
How to Send a POST Request: -X POST: Specifies the HTTP method, -H: Adds headers (e.g., Content-Type, -d: Includes the request body. POST Request Body Formats-<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Important Headers in POST Requests \u2013<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Handling Responses: Common HTTP Status Codes-<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In postman application-<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Since our browser only support GET request, so that we can\u2019t test it on browser. Whatever value you put you get the value by entering the URL into the browser. If you get any error just simply see my YouTube Video, it will help you. Second step is to create a HTML request from your server. You can do it by creating a Custom HTML section in a new article. You have to paste the following program to the Custom HTML part-<\/p>\n\n\n
\n<div id="sensor">\n  <p> Temp: <span id="temp">--<\/span> \u00b0C<\/p>\n  <p> Humidity: <span id="hum">--<\/span> %<\/p>\n  <p>Last updated: <span id="time">--<\/span><\/p>\n<\/div>\n\n<script>\nasync function loadSensorData() {\n  try {\n    const res = await fetch('\/wp-content\/sensor- sensor-data.txt ');\n    const data = await res.json();\n    document.getElementById("temp").textContent = data.temperature;\n    document.getElementById("hum").textContent = data.humidity;\n    document.getElementById('time').textContent = data.timestamp;\n  } catch (e) {\n    console.error("Error fetching sensor data:", e);\n  }\n}\nsetInterval(loadSensorData, 1);\nloadSensorData();\n<\/script>\n<\/pre><\/div>\n\n\n
This script will display the data of temperature & humidity of the pHp file. You can check the changing of data using POSTMAN application. Now the final step is the programming section of Arduino. Now it times to download some driver for our project. Let\u2019s begin with some settings- <\/p>\n\n\n\n