ESP32 Send Temperature and Humidity Data to localhost XAMPP for Absolute Beginners Step by Step

Hello friends welcome to my video on how to send temperature and humidity data from an esp32 to a local host Zam server in this video I'll be walking through the entire process step by step starting with setting up the Arduino IDE for esp32 installation of xampp on your computer creating a database in phpmyadmin writing PHP script to store data to mySQL database and finally writing the code to send the temperature and humidity data to localhost by the end of this video you'll have a working prototype that you can customize and build upon to create your own projects in this project I am using the xampp as a local server it will be used to receive temperature and humidity data from esp32 and then store the data into the database zamp is an open source software stack that includes Apache server mySQL database and PHP scripting language Apache is a web server component of xampp you can use it to host a web page that will display the temperature and humidity data in real time next I am also using the MySQL server it is a database component of xampp and it will be used to store the temperature data in the database table finally I am also using the PHP scripting language I will use it to write PHP script to insert data into the database let's start our project by setting up the Arduino IDE for esp32 here first you need to install the esp32 board you can install it from the boards manager which is located in the tools menu of Arduino IDE here you just need to install the version 2.0.4 next you need to install the DHT sensor Library you can install it from the library manager here search for DHT sensor Library then install the latest version of the library with all the dependencies this library is required to work with DHT 11 temperature and humidity sensor now the Arduino IDE setup is complete next here is the wiring diagram you just follow it to make connections here I have connected the esp32 and dht11 sensor on the breadboard you need to double check the wiring to avoid Hardware damage so make the connections carefully next step is to download the xampp server to do this we'll go to the Apache friends website it is the official website for xampp once you are on the website you'll see a list of available downloads for different operating systems you will need to select the download that's appropriate for your operating system for example I am using Windows so I'll select the windows version of Zam once you have selected the appropriate download just click on the download button and wait for the download to finish once the download is complete you will need to navigate to the download location and here you just run the installer to install the Zam the installation process is straightforward and it should take only a few minutes you simply follow the prompts to complete the installation if you see a warning from your firewall make sure to allow access to the Apache server during the installation process your computer might reboot to make changes in the system now we have installed the zamp on the computer next you need to start the server to start the Zam server you will need to launch the Zam control panel this can be done by navigating to the xampp installation directory you just open the Zam folder from C drive and here locate the file xampp control dot XZ then open the file by double clicking on it once the zamp control panel is open you will see the list of services including Apache and MySQL you can start both Services by clicking on start button next to each service make sure that both Apache and MySQL are running green status indicates that the both services are up and running if you see a warning from your firewall make sure to allow access to the Apache server now both Apache and MySQL are running so we are ready to start using xampp as a local server now that we've installed and started the Zam server Let's test it to make sure that it is working correctly to do this you just open a web browser and type the Local Host in the address bar then press enter this should take you to the xampp welcome page if you see the zamp welcome page it means that our server is up and running from here we can navigate to different sections of xampp such as PHP my admin it is the tool that will be used to create the database and table next step is to create a new database so click on the phpmyadmin this should bring up the phpmyadmin login page by default zamf comes with a root user account with no password so to log into phpmyadmin you can simply enter root as the username and leave the password field blank then click on login it will take you to the dashboard of the phpmyadmin you can also check the default username and password by clicking on user accounts tab on the next screen you can see username root with no password here just look at no written in red color if you want to change the password then just click on edit and on the next page click on the change password button it will take you the next screen here type your new password in the text boxes after entering the password you just click on go button and it will change the database password next step is to create a database so look at the left hand side of the screen here you can see a section called databases this section provides a list of all the available databases and allows you to select a specific database to work with by clicking on a database name you can view its tables fields and other related information as well as you can perform various database operations such as creating new tables executing SQL queries and so on next to create a new database you just click on new button next give your database a name for this project let's call it sensor DB then click on create button to create the database you will see a message confirming that the database has been created your new database will now appear in the list of databases on the left hand side of the screen next you need to create a table to store the temperature and humidity data so click on the database you just created after selecting the database you will see create table screen here you will need to enter the table name so enter dht11 in the table name field next under the number of columns field enter 4 to create four fields this is because we need to create four columns in our table we will use First Column for storing ID next two columns for temperature and humidity and the last column will be used to store the current date and time next click on create button it will take you to the next screen here enter the First Column name as ID next under the type field select integer as data type next set the auto increment attribute to true this means that every time a new record is added to the dht11 table the ID column will automatically increment to the next available number this helps to ensure that each record in the table has a unique identifier next set the second column name as temperature this column will be used to store the temperature data coming from the esp32 next set the data type as integer next set the third column name as humidity the data type of this field will also be integer we will use last field to store the current date and time it will allow you to track changes in temperature and humidity over time next set its data type as date time and set the default value to current timestamp the last step is to click on the save button at the bottom to create the new table that's it you have successfully created a new table named dht11 on your Local Host server the table will also appear in the list of databases on the left hand side of the screen you just need to click on it to see the data saved in the table right now the table is empty because we have just created it and not added any data to it yet so now let's check if the database is working by adding some data to dht11 table I will use SQL query to insert data into the table so click on SQL tab to open the SQL editor here I will write a query to store data into the table so here I have added the query let's understand it the first part of the query is insert into this statement used to insert the data into the table the next part is dht11 this is the name of the table where the data will be inserted next I have added the name of the columns where I want to store the temperature and humidity data next here is a list of the actual values that I want to insert into the table the first value is 23 and it will be stored in the temperature column the second value 42 and it will be stored in the humidity column now the query is completed you click on the Go Button to execute the query here you can see the message one row inserted it means that the data is inserted into the table let's check it by clicking on the browse button here you can see the data is inserted in the temperature and humidity column now it's time to test it by writing PHP script to insert some fake data in the database this will help us to make sure that everything is working correctly before we start sending the real data from the esp32 to write a PHP script first you need to create a project folder where you will store all the project files so navigate to the xampp installation directory from C drive here open the HD docs folder this is where you will create your project folder so create a new folder and give it a name such as dht11 underscore project now the project folder is created next we will create a new PHP file in this folder give your file a name for this project let's call it testdata.php now open this file with your favorite text editor I am using notepad plus plus which is a really quick and easy to use text editor let's write some code I will start by adding opening and closing tags of PHP and between the tags I will print a message on the screen hello test is okay this text will be displayed when we will open this file in the web browser now save the file by pressing Ctrl s make sure you must save this file in the dht11 project folder with PHP extension next open your web browser and enter the URL localhost forward slash then write the project folder name which is dht11 underscore project then slash and then write the file name that we have created earlier which is test underscore data dot PHP now press enter to load the page you can see the text is displayed on the screen now it's time to write a PHP script to insert fake data in the database to see if database is working properly this will help us to make sure that everything is working correctly before we start sending the real data from the esp32 so again open the file test data.php here we will add some PHP code so let's start by defining some variables to store important information like our database username and password and some other information we need four variables for this the first one is for hostname which is localhost in our case next we need to enter the database username as we discussed earlier the default username of database as root with no password so enter the username root and we don't need to set a password for it so leave the password field empty the last variable is database and here we will enter the name of the database that we have created earlier so write the database name sensor DB next we will establish a connection to the database by using a function called MySQL connect this function required four parameters we have already stored the parameters in the variables above that our hostname username password and database name next I will add an if condition to handle the situation if the connection to the database fails so if the connection fails then the program will stop running and an error message will be displayed to explain the reason for the error next if the program successfully connect to the database then we will just display a message database connection is okay before writing the script to insert data in the table we will test the project to make sure that everything is working properly so open the file in the web browser here I will just refresh the page because I have already opened the file here we have an error message unknown database name sensor DB it means the database name is wrong so moves back to the code file here make sure that the name of the database is the same as the name we used when we created it here the spelling of the database name is not correct so I will just fix it now let's test it again to make sure that everything is working properly as you can see the connection to the database is now successful next we will write SQL query to save the data into the dth11 table we will use the same query that we have created before so I will just paste the query here finally we'll execute our SQL query using the MySQL Query function I have also added the if condition here and it will print out a message to indicate whether the query was successful or not so here's the final code for our testdata.php file now we have written a PHP script so we will test it using the web browser if everything is working correctly we should see a message indicating that a new record is created successfully to make sure that the data has been inserted into the database go back to phpmyadmin here click on sensor DB database then click on dht11 table to select it here you can see the temperature and humidity data that we have just inserted in the table next I will make one more change in the code currently the temperature and humidity data is hard-coded in the SQL query which is not a good practice so instead of hard-coded data I will use variables so first I will delete the value for the temperature and then set the variable name t for temperature the same way I will set the variable name H for humidity next above the SQL query I will declare two variables the first one is T it will be used to store the temperature and the second variable is H and it will be used to store the humidity this way if we want to change the temperature or humidity values we can simply modify the variables and the query will automatically use the new values using variables as a good programming practice because it makes the code more flexible and easier to modify in the future and that's it for this section in the next section we will write our esp32 code to send data to the xam server here first I will include libraries that are required for the project to function properly the first one is the Wi-Fi library and this Library will be used for connecting to the Wi-Fi network the next library is the HTTP client library and it will be used to send HTTP requests from esp32 to our localhost server next we need to define the address of the web server where we want to send our temperature data here first you need to enter the IP address of your computer which you can easily find by opening the command prompt so open the command prompt on your computer here you can use the ipconfig command to display the IP address of your computer now here you can see the IP address of the computer next you just need to enter this IP address in the esp32 code which is 192.168.100.6 after that we need to enter the name of the folder where we have saved our project file we have already created the project folder in the xampp directory which is dht11 underscore project and we will enter the same folder name here in the esp32 code finally we need to enter the name of the PHP file where we want to send our data we have created this file in the dht11 project folder here is the PHP file test data.php and we will enter the same file name in the esp32 code now the URL is ready if you are not sure about the URL you can copy it and then paste it into your web browser if you see a success message in your browser it means the URL is properly configured just remember you must start the Apache and MySQL Services before testing the URL next I will Define two variables SSID and password that we will use to connect to my Wi-Fi router or mobile hotspot you should replace the values inside the quotes with the SSID and password of your own network next I will Define two more variables for temperature and humidity which will store the sensor data that we will send to the Local Host in this example I have both initialized to 50 but in the next section of the video we will replace the temperature and humidity data with the real data coming from the dht-11 sensor let's move to the setup function here first I will use serial dot begin function to set up serial communication between the esp32 and your computer I will just use it for debugging purpose next I will establish a connection to the Wi-Fi router by calling connect Wi-Fi function this function will attempt to connect to the Wi-Fi network using the SSID and password that we have defined earlier I have already written this function and I will just add it below the loop function this function contains a sample code that is used in many esp32 projects that require Wi-Fi connectivity it is a standard code for connecting to any Wi-Fi network you can also use this function in other projects you make with the esp32 board so you don't have to create a new function every time you want to connect to a Wi-Fi network and here I have called it in the setup function and it will take care of the Wi-Fi connection next let's move in the loop function here first I will check whether the esp32 is connected to the Wi-Fi network if it is not then it calls the connect Wi-Fi function to attempt to reconnect to the Wi-Fi next I have created a string variable called post data it holds the temperature data that we want to send to the local server here first I have added the temperature value which is 50. it is the same temperature value that we have defined above next the same way I have added the humidity value which is also 50 as we have defined before the complete string is look something like this now we have defined the post data string with temperature data stored in it now we will send this data to the server using the HTTP post request so we will create a new HTTP client object called http it will be used to send an HTTP post request to the web server next let's establish a connection to the xam server here is begin function of the HTTP client object this function will connect the esp32 to the web page which is defined in this URL variable in this example it is testdata.php which we have created earlier so the esp32 will connect to the test data.php file and we will send temperature data to this file to send the temperature data to the server we will use post method this method will send an HTTP post request to the server with the temperature data we have stored this data in the post data variable an HTTP post method will send it to the testdata.php file now the temperature data is received at the server so we will store it to our database table first we will check if there is any valid data received or not using the if condition and if we have some valid temperature and humidity data then we will store that data into these variables so first I will store the temperature data into the T variable that we have defined for temperature the same way I will store the humidity data to H variable that's it this file is ready to store the temperature data into the database so let's move back to our esp32 code to complete it here I have used HTTP code variable to store the response code from the server if the data is successfully posted to the server then we will receive the response 200. next I will Define another variable called payload it will store the response message from the server the message looks something like this database connection is okay new record created successfully these are the same messages that we have seen earlier while we are testing our PHP file in case of error the payload string contains the error message but the reason of the error finally I will print the URL post data HTTP code and payload variables to the serial monitor for testing purpose here I forget to include a special message called header header helps the server to understand the type of information sending to it now the code is ready to upload so without wasting time let's upload it to our esp32 board once the code is uploaded open serial monitor here you can see the esp32 device started sending temperature and humidity data to the localhost server here the HTTP code 200 means that the data was successfully sent to the Local Host you also look at the response message database connection is ok new record created successfully let's verify it from the mySQL database here click on the browse button to reload the table data here you can see the data has been stored in our database table next I will add the dht-11 sensor in the esp32 code to send the real temperature data to the server here first I will include DHT sensor Library then I will Define the DHT sensor pin to pin number 19 which corresponds to the digital pin on the esp32 where the dht-11 sensor is connected in the next line I will Define the type of the sensor which is dht11 finally I will create dht11 sensor object it will be used to read temperature data from the sensor next I will set the temperature and humidity variables to zero this is because I will use these variables to store the actual data that comes from the dht-11 sensor next I will start the communication with the dht11 sensor using the dht11 dot begin function it is required to call this function before attempting to read any data from the sensor next I will read temperature and humidity data from dht11 sensor and then I will store it into these variables to do this I will create a new function called load dht11 data I have added it just below the loop function this function will read the temperature data from the dht11 sensor and then store it in the variables that I have already defined above for storing temperature and humidity data next I will call this new function inside the main Loop function this way every time the loop runs the latest temperature and humidity data will be stored in the variables above that's all the remaining code will stay the same without any change now hit upload button to upload the code to our esp32 once the code is uploaded open serial monitor here you can see our project is started sending temperature and humidity data to the Local Host now we will check if the data has been saved to the mySQL database here click on the browse button to see the most recent data that has been saved you can see the latest data is now stored in the database that's all for today if you have any questions please leave a comment below see you in the next video bye

Channel: Ahmad Logs

Views: 47,887

Keywords: esp32 dht11 sensor, esp32 send data to localhost, esp32 xampp, esp32 temperature and humidigy sensor, esp32 send data to xampp, esp32 mysql database, php esp32, php mysql esp32, mysql database esp32, esp32 send data to mysql, dht11, dht11 temperature and humidity sensor

Id: VEN5kgjEuh8

Length: 30min 34sec (1834 seconds)

Published: Mon Apr 03 2023