{"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 &amp; Hosting"},"content":{"rendered":"\n<p class=\"has-text-color has-link-color wp-elements-76727393f17e84c620c3c1e7820c0a6a wp-block-paragraph\" style=\"color:#5c5c5c\">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 &amp; domain is full free &amp; 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<p class=\"has-text-align-center has-black-color has-text-color has-link-color wp-elements-84addff75749116f0b68591dec930bfa wp-block-paragraph\">Website : <a href=\"https:\/\/www.awardspace.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.awardspace.com\/<\/a><\/p>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-abfa5272ebf36a0bab555bc4a454d699 wp-block-paragraph\" style=\"color:#5c5c5c\">For creating &amp; setup your first website please sees my YouTube Video. Since it involves lots of steps &amp; all steps are in the Video. Since it involve no coding just watch the video &amp; create your first site. Now let\u2019s move on the process. In the file manager section expend the parameter &amp; in &lt;wp-content> section pastes a pHp file. The section is something like this-<\/p>\n\n\n\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-d40d17312ff803b0d3e46252b5c9f775 wp-block-paragraph\" style=\"color:#6c8a97\"><a href=\"https:\/\/cp1.awardspace.net\/file-manager\/www\/YourDomain.atwebpages.com\/wp-content\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/cp1.awardspace.net\/file-manager\/www\/YourDomain.atwebpages.com\/wp-content<\/a><\/p>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-99b1d0cac08aaf24fce7406f18b30efa wp-block-paragraph\" style=\"color:#5c5c5c\">The pHp file-<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; auto-links: false; title: ; quick-code: false; notranslate\" title=\"\">\n&lt;?php\nheader(&quot;Access-Control-Allow-Origin: *&quot;);\nheader(&quot;Content-Type: application\/json&quot;);\n\n$dataFile = __DIR__ . &#039;\/sensor-data.json&#039;;\n\nif ($_SERVER&#x5B;&#039;REQUEST_METHOD&#039;] === &#039;POST&#039;) {\n    $temperature = $_POST&#x5B;&#039;temperature&#039;] ?? null;\n    $humidity = $_POST&#x5B;&#039;humidity&#039;] ?? null;\n\n    if ($temperature !== null &amp;&amp; $humidity !== null) {\n         $data = $ temperature . &quot;,&quot; . $ humidity;\n        file_put_contents($dataFile, json_encode(&#x5B;\n            &#039;temperature&#039; =&gt; $temperature,\n            &#039;humidity&#039; =&gt; $humidity,\n            &#039;timestamp&#039; =&gt; date(&#039;Y-m-d H:i:s&#039;)\n        ]));\n        file_put_contents(&quot;sensor-data.txt&quot;, $data);\n        echo json_encode(&#x5B;&#039;status&#039; =&gt; &#039;success&#039;]);\n    } else {\n        echo json_encode(&#x5B;&#039;status&#039; =&gt; &#039;error&#039;, &#039;message&#039; =&gt; &#039;Missing fields&#039;]);\n    }\n    exit;\n}\n\nif (file_exists($dataFile)) {\n    echo file_get_contents($dataFile);\n} else {\n    echo json_encode(&#x5B;&#039;temperature&#039; =&gt; null, &#039;humidity&#039; =&gt; null]);\n}\n<\/pre><\/div>\n\n\n<p class=\"has-text-color has-link-color wp-elements-69197d21692fa2c471c8fd904fe03121 wp-block-paragraph\" style=\"color:#5c5c5c\">This is a very simple file with no API key &amp; 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 &amp; pHpName with your original domain &amp; pHp name &amp; hit enter button into the browser-<\/p>\n\n\n\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-0f5b159663969bd3cf850ea69eb5bf78 wp-block-paragraph\" style=\"color:#6c8a97\"><a href=\"http:\/\/YourDomain.atwebpages.com\/wp-content\/pHpName.php\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/YourDomain.atwebpages.com\/wp-content\/pHpName.php<\/a><\/p>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-ea282403997b07a8407359f3b6b692de wp-block-paragraph\" style=\"color:#5c5c5c\">You Get something like this in JSON format.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; auto-links: false; title: ; quick-code: false; notranslate\" title=\"\">\ntemperature\u00a0     : &quot; null &quot;\nhumidity\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 : &quot; null &quot;\n<\/pre><\/div>\n\n\n<p class=\"has-text-color has-link-color wp-elements-77be09f0807fc5f77c13efc73a0b7cce wp-block-paragraph\" style=\"color:#5c5c5c\">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<p class=\"has-text-color has-link-color wp-elements-132efa562b40134749307be259ab3a97 wp-block-paragraph\" style=\"color:#5c5c5c\">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 class=\"wp-block-image aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"235\" src=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-2-1024x235.jpg\" alt=\"\" class=\"wp-image-3861\" srcset=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-2-1024x235.jpg 1024w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-2-300x69.jpg 300w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-2-768x176.jpg 768w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-2.jpg 1393w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-9372f26aadccc9ff846186e5a65a0f40 wp-block-paragraph\" style=\"color:#5c5c5c\">Important Headers in POST Requests \u2013<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"153\" src=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-3-1024x153.jpg\" alt=\"\" class=\"wp-image-3864\" srcset=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-3-1024x153.jpg 1024w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-3-300x45.jpg 300w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-3-768x114.jpg 768w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-3.jpg 1402w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-564b1ab1f27f9d6bfb77dcfe564b1a65 wp-block-paragraph\" style=\"color:#5c5c5c\">Handling Responses: Common HTTP Status Codes-<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"226\" src=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-4-1024x226.jpg\" alt=\"\" class=\"wp-image-3865\" srcset=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-4-1024x226.jpg 1024w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-4-300x66.jpg 300w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-4-768x170.jpg 768w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Table-4.jpg 1395w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-4decdf4f9701fea332374bf9f0f6de35 wp-block-paragraph\" style=\"color:#5c5c5c\">In postman application-<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"211\" src=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Data-1-1024x211.jpg\" alt=\"\" class=\"wp-image-3868\" style=\"width:699px;height:auto\" srcset=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Data-1-1024x211.jpg 1024w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Data-1-300x62.jpg 300w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Data-1-768x159.jpg 768w, https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Data-1.jpg 1211w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-e32a6b54057f933603439fdaec766963 wp-block-paragraph\" style=\"color:#5c5c5c\">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<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; auto-links: false; title: ; quick-code: false; notranslate\" title=\"\">\n&lt;div id=&quot;sensor&quot;&gt;\n  &lt;p&gt; Temp: &lt;span id=&quot;temp&quot;&gt;--&lt;\/span&gt; \u00b0C&lt;\/p&gt;\n  &lt;p&gt; Humidity: &lt;span id=&quot;hum&quot;&gt;--&lt;\/span&gt; %&lt;\/p&gt;\n  &lt;p&gt;Last updated: &lt;span id=&quot;time&quot;&gt;--&lt;\/span&gt;&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nasync function loadSensorData() {\n  try {\n    const res = await fetch(&#039;\/wp-content\/sensor- sensor-data.txt &#039;);\n    const data = await res.json();\n    document.getElementById(&quot;temp&quot;).textContent = data.temperature;\n    document.getElementById(&quot;hum&quot;).textContent = data.humidity;\n    document.getElementById(&#039;time&#039;).textContent = data.timestamp;\n  } catch (e) {\n    console.error(&quot;Error fetching sensor data:&quot;, e);\n  }\n}\nsetInterval(loadSensorData, 1);\nloadSensorData();\n&lt;\/script&gt;\n<\/pre><\/div>\n\n\n<p class=\"has-text-color has-link-color wp-elements-8520c1ccb39232a20b04dc4b88a741ec wp-block-paragraph\" style=\"color:#5c5c5c\">This script will display the data of temperature &amp; 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-&nbsp;<\/p>\n\n\n\n<ul style=\"color:#252525\" class=\"wp-block-list has-text-color has-link-color wp-elements-16695f588a9e35830f4eea61869eaa2d\">\n<li>Install the latest version of Arduino : <a href=\"https:\/\/www.arduino.cc\/en\/software\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.arduino.cc\/en\/software\/<\/a><\/li>\n\n\n\n<li>In Arduino: File>Preferences>Setting > <a href=\"http:\/\/arduino.esp8266.com\/stable\/package_esp8266com_index.json\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/arduino.esp8266.com\/stable\/package_esp8266com_index.json<\/a><\/li>\n\n\n\n<li>In Arduino Install: Tools>Board>esp8266<\/li>\n\n\n\n<li>In Arduino: Tools>Board>esp8266>Generic ESP8266 Module<\/li>\n\n\n\n<li>In Arduino Install: Library Manager > DHT sensor library<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-d4ec21aef9b72acb62273674449d9d8d wp-block-paragraph\" style=\"color:#5c5c5c\">Final Code For Ardino:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: arduino; auto-links: false; title: ; quick-code: false; notranslate\" title=\"\">\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;ESP8266HTTPClient.h&gt;\n#include &lt;WiFiClient.h&gt;\n#include &lt;DHT.h&gt;\n\n\/\/ WiFi credentials\nconst char* ssid = &quot;YourWiFiName&quot;;\nconst char* password = &quot;YourWiFiPassword&quot;;\n\n\/\/ Your server URL\nconst char* serverUrl = &quot;http:\/\/YourDomain.atwebpages.com\/wp-content\/phpName.php&quot;; \n\n\/\/ DHT11 settings\n#define DHTPIN 2     \/\/ GPIO2 of ESP01\n#define DHTTYPE DHT11\nDHT dht(DHTPIN, DHTTYPE);\n\/\/ Create a WiFiClient\nWiFiClient client;\nvoid setup() {\n  Serial.begin(115200);\n  WiFi.begin(ssid, password);\n  dht.begin();\n\n  Serial.println(&quot;Connecting to WiFi...&quot;);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected&quot;);\n}\n\nvoid loop() {\n  if (WiFi.status() == WL_CONNECTED) {\n    float humidity = dht.readHumidity();\n    float temperature = dht.readTemperature();\n\n    if (isnan(humidity) || isnan(temperature)) {\n      Serial.println(&quot;Failed to read from DHT sensor!&quot;);\n      return;\n    }\n    Serial.printf(&quot;Temperature : %.2f \u00b0C \\r\\n&quot;, temperature);\n    Serial.printf(&quot;Humidity : %.2f %% \\r\\n&quot;, humidity);\n    HTTPClient http;\n    http.begin(client, serverUrl);\n    http.addHeader(&quot;Content-Type&quot;, &quot;application\/x-www-form-urlencoded&quot;);\n\n    \/\/ Build the POST data\n    String postData = &quot;temperature=&quot; + String(temperature, 1) + &quot;&amp;humidity=&quot; + String(humidity, 1);\n\n    int httpResponseCode = http.POST(postData);\n\n    if (httpResponseCode &gt; 0) {\n      Serial.print(&quot;HTTP Response code: &quot;);\n      Serial.println(httpResponseCode);\n      Serial.println(http.getString());\n    } else {\n      Serial.print(&quot;Error on sending POST: &quot;);\n      Serial.println(httpResponseCode);\n    }\n\n    http.end(); \/\/ Free resources\n  } else {\n    Serial.println(&quot;WiFi Disconnected, trying to reconnect...&quot;);\n    WiFi.begin(ssid, password);\n  }\n\n  delay(10000); \/\/ Send data every 10 seconds\n}\n<\/pre><\/div>\n\n\n<p class=\"has-text-color has-link-color wp-elements-f350bfccb41bd219d845e2f7cd68a7e6 wp-block-paragraph\" style=\"color:#5c5c5c\">For Arduino program we use http.addHeader(&#8220;Content-Type&#8221;, &#8220;application\/x-www-form-urlencoded&#8221;) for proper Header for POST request &amp; http.POST method for posting data. One important thing that every time you request for a POST method you must terminate with http.end() method otherwise the request give an error signal. Don\u2019t use 2 time http.end() at the same time, it\u2019s also give an error signal. One interesting thing that at first time we setup for a server it respond the first time will and in next time its shows error response signal &amp; frequently WiFi disconnected. This issue arise when Power Problem. In that situation just solder the all component either in PCB or PCB board, avoid breadboard.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Part2: \ud83d\udcf6 Sensor Data Display \ud83c\udf10 Programing Section Section\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/2sWeim343bE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Live-Server-API.rar\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--50)\" target=\"_blank\" rel=\"noreferrer noopener\">All File<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-color has-link-color has-medium-font-size wp-elements-6917eb3ce12b89742ea3f3268bb848fa wp-block-paragraph\" style=\"color:#252525\"><a href=\"https:\/\/iotthinghub.com\/wp-content\/uploads\/2025\/07\/Live-Server-API.rar\">Live Server API.rar<\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 &amp; domain is full free &amp; support pHp script for your works. Let\u2019s start. At first you have to sign in the following website along with only your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-3845","post","type-post","status-publish","format-standard","hentry","category-esp01esp8266"],"_links":{"self":[{"href":"https:\/\/iotthinghub.com\/index.php?rest_route=\/wp\/v2\/posts\/3845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iotthinghub.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iotthinghub.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iotthinghub.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iotthinghub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3845"}],"version-history":[{"count":22,"href":"https:\/\/iotthinghub.com\/index.php?rest_route=\/wp\/v2\/posts\/3845\/revisions"}],"predecessor-version":[{"id":3884,"href":"https:\/\/iotthinghub.com\/index.php?rest_route=\/wp\/v2\/posts\/3845\/revisions\/3884"}],"wp:attachment":[{"href":"https:\/\/iotthinghub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iotthinghub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iotthinghub.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}