Creating your own IoT Cloud from scratch using php, Mysql, ESP12E

Creating your own IoT Cloud from scratch using php, Mysql, ESP12E – Part 3

Introduction:

In this tutorial, we will be Creating your own IoT Cloud from scratch using php, Mysql, ESP12E. This is part 3 of tutorial series. If you are seeing this tutorial directly then I will recommend you to read the Introduction of this tutorial first.

So in part 3 of "Creating your own IoT Cloud from scratch using php, Mysql, ESP12E", we will update the DHT11 Temperature and humidity data into mysql using php apis which we created in the previous tutorial. Also, we will make an HTML webpage and using javascript and jquery, we will get the last updated data in the mysql database and show it in the HTML  webpage and also use CSS to enhance it.

We will be first wiring up our circuit on our breadboard from scratch. Keep this following circuit diagram hand and tally your breadboard circuit with the following circuit diagram on each step to avoid any mistakes.

Read-temperature-and-humidity-from-nodemcu-ESP12E-with-DHT11-and-show-it-on-HTML-webpage(Local)-circuit

Read-temperature-and-humidity-from-nodemcu-ESP12E-with-DHT11-and-show-it-on-HTML-webpage(Local)-circuit

And then wire up it on breadboard like this:

Read-temperature-and-humidity-from-nodemcu-ESP12E-with-DHT11-and-show-it-on-HTML-webpage(Local) (5)

Read-temperature-and-humidity-from-nodemcu-ESP12E-with-DHT11-and-show-it-on-HTML-webpage(Local) (5)

Video

Follow the below video step wise. The video contains full instructions along with brief explanation.

Code

Copy and paste the below Arduino code and program your esp12e or nodemcu with it. Don't forget to replace the wifi username, wifi password and host url in the below code. This part will now contain use of  php, Mysql, ESP12E and integrating them together.

 

Now Create a new folder, and download and place the below images inside the folder.

Rename the first image as "humidity" and second image as "temperature" respectively.
 
It doesn't matter where you are placing the folder. The only thing is that the above two images should be placed inside the folder carefully. And rename them as specified above.

After that simply copy and paste the below program in a code editor, and save it as "index.html". Now you have to :
1. Replace the webhost url as instructed in the video.
2. Uncomment the line of "<script src= "...."> " Depending upon where you are running this html page from local or from the hosting server.

Support me by by subscribing to my YouTube channel by hitting the below button.

youtube-iotmonk-subscribe

Please login to get access to the quiz
Creating your own IoT cloud from scratch using php, Mysql, ESP12E – Part 2.2 (Prev Lesson)
(Next Lesson) Creating your own IoT Cloud from scratch using php, Mysql, ESP12E – Part 4
Back to Creating your own IoT Cloud from scratch using php, Mysql, ESP12E

No Comments

Post a Reply