This project continues in my series of passing data about the web using embedded systems on the front-end. In this project we will be using the easiest embedded device of them all, the ESP8266 with the Arduino IDE. This project won't discuss installing the ESP8266 firmware libraries into your Arduino IDE, as there are many tutorials on the web on how to accomplish that. We will also assume you have the SiLabs driver also installed for your ESSP8266. You will need a simple and ubiquitous DHT (either model DHT11 or DHT22 will do) environmental sensor and download the associated library. I recommend the one from Adafruit as it works with both the Arduino and the ESP8266 despite the variance in pin-outs.
I have previously posted tutorials on populating various third-party websites with our sensor data. We have seen how it works with ThingSpeak.com, Google Sheets, and even the Things.io using the MQTT protocol from the client side.
This project will entail using an Arduino script, which will look very similar to the scripts from my other projects posted on Hackster. We will be posting our DHT11 data, just as we have done in previous projects, to the web on the server side. The HTTP header requirements tend to be similar across all these back-end, IoT enabled, platforms. Two things normally required by the server side whether we are using a HTTP/HTTPS POST or GET command is the actual data to be sent and the payload size of that data in bytes. Sometimes additional parameters are required by the back-end. For most personal hosted websites, the data (as a String) and data payload (data.length()
) in bytes are all that’s required on the server side.
On the back-end we will be creating a very simple PHP script. PHP is a powerful, fast, but highly abstracted language and prone to unintended consequences. We could accomplish the same thing in JavaScript with a brute force URL parse using RegEx or Node.js, which is emerging as the newest best standard for back-end IoT active data manipulation. However, PHP is easier to understand and has the advantage of built-in REST commands as part of the language itself. We will be sending data to the newly created PHP page, first through a direct URL inputting of pseudo-data, and then through the command-line cURL tool, and then finally through the included Arduino sketch.
The sensor data sent to our PHP page will then write to a hosted HTML page which will be appended and time-stamped for our records. Technically the PHP $_GET
would be the most appropriate PHP built-in type to receive data but I found the more puissant $_REQUEST
to be both more dependable and robust.
Below is an intricate and complex abstraction of the process from the client side Arduino sketch to the server side PHP script for appending to our display page:
dataSender.ino (ESP8266)------>dataCollector.php---->dataDisplayer.html
Two things to note before we get started:
1. We will be sending sensor data to your personal hosted web page (or mine, if you use my links). You will have to list your personal directory hierarchy correctly in the Arduino script where noted after the POST command. Also, if the sketch fails you may need to use the CURL command line tool to examine exactly what your domain host requires for a successful use of REST headers and parameters.
2. My PHP script initially crashed my personal site. To fix the issue I had to contact my domain host and have them switch off some super secret, superfluously sequestered security settings. It is quite likely your host may interpret your sending of simple sensor data remotely and anonymously as a low-rent Russian-hacking DDoS or XSS attack. I have developed server-side measures to confute and stultify such Cross-site Scripting code injection attacks. You could sign up for a free website to try this project first there if keeping your personal website continuously up is a mission-critical exigency.
You may also send your data to my webpage at:
www.embedded-iot.net/dht11/dataCollector.php
Then, to see your data, point your browser to:
www.embedded-iot.net/dht11/dataDisplayer.html
Note: Unless you live on the west coast of the USA the time-stamp will be incorrect - I apologize profoundly for this.
Step One: Create a New PHP WebpageCopy and paste the included PHP script into a new xxx.php file you create in your domain hierarchy. I recommend you make a sub-directory folder branching from your Homepage (index). In my case, I branched off from my homepage at www.embedded-iot.net/dht11/dataCollector.php. After you create a new file and paste the included PHP code, you should make sure you end the file with the .php extension so that it's recognized as a PHP page by your domain. An interesting fact to note is that you can mix HTML and PHP on the same page as long as it ends with a .php extension; alternately, you cannot mix PHP and HTML if you denote your file with the .html extension. In my example, I've included some HTML code with the PHP code just so that we can use some localized testing right from the URL navbar and see the results instantly without having to go to the redirected HTML page.
Let's next test our PHP webpage to make sure it's working correctly in creating our HTML display page and it's getting populated promptly with our pseudo-data. Once we confirm that our project is working correctly with our pseudo-data, we can move on and test it with our ESP8266 running our Arduino sketch remotely. We will test it two ways: first by directly inputting fake environmental data into our URL bar, and confirming we get the correct results.
Our pseudo-data input string for our URL bar is:
Below is a picture of what we should expect from both our manually created PHP page (dataColletor.php) and our auto-generated HTML page (dataDisplayer.html).
And now let's check that our dataDisplayer.html file was created successfully.
Next let's use a tool that will not only test our webpage remotely, but will display specific output to help diagnose any problems and provide HTTP header info that may be helpful in manipulating the included Arduino script so that it works with your own domain host. The tool is called cURL, it is free and is implemented from the bash prompt within a console window. I won't explain how to install cURL but there is a lot of info on installing and setting up the tool into your specific OS available from the web.
The CURL command that will give us all the data we need, as well as update our web page with more pseudo-data as listed below. You can copy and paste the input below (all on one line) after starting CURL and getting the Bash shell prompt $. This command gives us a verbose output (-v) of a POST command is:
curl -v -d "Humidity=66&Temperature_Cel=77&Temperature_Fehr=88&HeatIndex_Cel=99&HeatIndex_Fehr=00" http://www.embedded-iot.net/dht11/dataCollector.php
Pay special attention to your HTTP headers like Content-Type and the POST extension. You may need to alter the code in your Arduino sketch if your output looks different than my cURL output listed above.
Now we can again check out the dataDisplayer.html file to check if it got updated correctly with our new POST data from the cURL. Our auto-generated file is appended so we can keep an updated file of readings as long as we want until we clear our dataDisplayer file.
Now we have come to the last step because we know the server side is functioning correctly with our PHP script. Opening our Arduino IDE and pasting in our included Arduino script for the ESP8266 running nodeMCU. As always, you must change the sketch to your own network name and network password. If you want to first test it with my webpage, I have left those URLs in as comments on the sketch as well. Otherwise, you can enter your own webpage to upload your sensor data into your own PHP file to be displayed on your own webpage.
Hope you enjoyed the project and feel free to ask any questions.
-SDB
Comments