{"id":92139,"date":"2023-03-27T09:35:11","date_gmt":"2023-03-27T09:35:11","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=92139"},"modified":"2023-03-27T10:24:33","modified_gmt":"2023-03-27T10:24:33","slug":"cloud-weather-station-esp32-esp8266","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/cloud-weather-station-esp32-esp8266\/","title":{"rendered":"DIY Cloud Weather Station with ESP32\/ESP8266 (MySQL Database and PHP)"},"content":{"rendered":"\n<p>Build a cloud weather station dashboard to visualize your ESP32 or ESP8266 sensor readings from anywhere in the world. You&#8217;ll visualize your sensor data displayed on gauges and on a table. The ESP32 or ESP8266 will make an HTTP POST request to a PHP script to insert your data into a MySQL database.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Cloud-Weather-Station-PHP.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"DIY Cloud Weather Station with ESP32\/ESP8266 MySQL Database and PHP\" class=\"wp-image-129677\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Cloud-Weather-Station-PHP.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Cloud-Weather-Station-PHP.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Cloud-Weather-Station-PHP.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Cloud-Weather-Station-PHP.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclgray\"><em>Updated on 27 March 2023<\/em><\/p>\n\n\n\n<p>Previously, we&#8217;ve stored sensor readings in a database and displayed<a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-mysql-database-php\/\"> them on a table<\/a> or <a href=\"https:\/\/randomnerdtutorials.com\/visualize-esp32-esp8266-sensor-readings-from-anywhere\/\">charts that you can access from anywhere<\/a> using your own server. Now, I\u2019ve decided to take a few steps further and add some more information to the web page.<\/p>\n\n\n\n<p>I&#8217;ve added two gauges to display the latest temperature and humidity readings as well as some statistics about the minimum, maximum and average readings from a number of readings that you can define. You can also visualize all the latest readings on a table and you can select how many readings you want to show.<\/p>\n\n\n\n<p>To build this project, you&#8217;ll use these technologies:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ESP32 or ESP8266 programmed with Arduino IDE<\/li>\n\n\n\n<li>Hosting server and domain name<\/li>\n\n\n\n<li>PHP script to insert data into MySQL and display it on a web page<\/li>\n\n\n\n<li>MySQL database to store readings<\/li>\n<\/ul>\n\n\n\n<p><strong>Table of Contents<\/strong><\/p>\n\n\n\n<p>This project is divided into the following main sections:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#host-php-mysql\" title=\"\">Hosting Your PHP Application and MySQL Database<\/a><\/li>\n\n\n\n<li><a href=\"#set-up-mysql-database\" title=\"\">Preparing Your MySQL Database<\/a><\/li>\n\n\n\n<li><a href=\"#php-script-receive-insert-data\" title=\"\">PHP Script HTTP POST &#8211; Receive and Insert Data in MySQL Database<\/a><\/li>\n\n\n\n<li><a href=\"#php-script-database-functions\" title=\"\">PHP Script for Database Functions<\/a><\/li>\n\n\n\n<li><a href=\"#php-script-display-readings-gauge-table\" title=\"\">PHP Script &#8211; Display Database Readings on Gauges and Table<\/a><\/li>\n\n\n\n<li><a href=\"#set-up-esp32-esp8266\" title=\"\">Setting Up the ESP32 or ESP8266<\/a><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video Demonstration<\/h2>\n\n\n\n<p>To see how the project works, you can watch the following video demonstration:<\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/C6BfIcshUy8?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">0. Download Source Code<\/h2>\n\n\n\n<p>For this project, you&#8217;ll need these files:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SQL query to create your table: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/SensorData_Table.sql\" target=\"_blank\">SensorData_Table.sql<\/a><\/li>\n\n\n\n<li>Insert and access database readings: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/esp-database.php\" target=\"_blank\">esp-database.php<\/a><\/li>\n\n\n\n<li>Handle HTTP Post requests: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/esp-post-data.php\" target=\"_blank\">esp-post-data.php<\/a><\/li>\n\n\n\n<li>CSS file to style your web page: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/esp-style.css\" target=\"_blank\">esp-style.css<\/a><\/li>\n\n\n\n<li>Display your sensor readings: <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/esp-weather-station.php\" target=\"_blank\">esp-weather-station.php<\/a><\/li>\n\n\n\n<li>Arduino Sketch for <strong>ESP32<\/strong>: <a href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/HTTPS_ESP32_Cloud_Weather_Station.ino\" target=\"_blank\" rel=\"noopener\" title=\"\">HTTPS_ESP32_Cloud_Weather_Station.ino<\/a><\/li>\n\n\n\n<li>Arduino Sketch for <strong>ESP8266 :<\/strong> <a href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/HTTPS_ESP8266_Cloud_Weather_Station.ino\" target=\"_blank\" rel=\"noopener\" title=\"\">HTTPS_ESP8266_Cloud_Weather_Station.ino<\/a><\/li>\n\n\n\n<li>If your server doesn&#8217;t support HTTPS, use this Arduino Sketch (compatible with the ESP32 and ESP8266: <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/ESP_HTTP_POST_MySQL.ino\" target=\"_blank\" rel=\"noreferrer noopener\">ESP_HTTP_POST_MySQL.ino<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/archive\/master.zip\" target=\"_blank\"><strong>Download all projects files<\/strong><\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"host-php-mysql\">1. Hosting Your PHP Application and MySQL Database<\/h2>\n\n\n\n<p>The goal of this project is to have your own domain name and hosting account that allows you to store sensor readings from the ESP32 or ESP8266. You can visualize the readings from anywhere in the world by accessing your own server domain. <\/p>\n\n\n\n<p>Here&#8217;s a high-level overview of how the project works:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Gauge-weather-station-project-overview.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"1000\" height=\"920\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Gauge-weather-station-project-overview.png?resize=1000%2C920&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Hosting PHP Application and MySQL Database ESP32 ESP8266 Gauge weather station project overview\" class=\"wp-image-92140\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Gauge-weather-station-project-overview.png?w=1000&amp;quality=100&amp;strip=all&amp;ssl=1 1000w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Gauge-weather-station-project-overview.png?resize=300%2C276&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Gauge-weather-station-project-overview.png?resize=768%2C707&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure><\/div>\n\n\n<ol class=\"wp-block-list\">\n<li>You have an ESP32 or ESP8266 that sends sensor readings to your own server. For this, you have your board connected to your router;<\/li>\n\n\n\n<li>In your server, there\u2019s a PHP script that allows you to store your readings in a MySQL database;<\/li>\n\n\n\n<li>Then, another PHP script will display the web page with the gauges, table, and all the other information;<\/li>\n\n\n\n<li>Finally, you can visualize the readings from anywhere in the world by accessing your own domain name.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Hosting Services<\/h3>\n\n\n\n<p>I recommend using one of the following hosting services that can handle all the project requirements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/randomnerdtutorials.com\/bluehost\" target=\"_blank\">Bluehost (user-friendly with cPanel)<\/a>: free domain name when you sign up for the 3-year plan. I recommend choosing the unlimited websites option;<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" style=\"font-size: inherit; background-color: initial;\" href=\"https:\/\/randomnerdtutorials.com\/digitalocean\" target=\"_blank\">Digital Ocean<\/a><span style=\"font-size: inherit; background-color: initial;\">: Linux server that you manage through a command line. I only recommended this option for advanced users.<\/span><\/li>\n<\/ul>\n\n\n\n<p>Those two services are the ones that I use and personally recommend, but you can use any other hosting service. Any hosting service that offers PHP and MySQL will work with this tutorial. If you don&#8217;t have a hosting account, I recommend <a href=\"https:\/\/randomnerdtutorials.com\/bluehost\">signing up for Bluehost<\/a>.<\/p>\n\n\n\n<p style=\"text-align:center\"><a href=\"https:\/\/randomnerdtutorials.com\/bluehost\" target=\"_blank\" class=\"button\" rel=\"noopener noreferrer\">Get Hosting and Domain Name with Bluehost \u00bb<\/a><\/p>\n\n\n\n<p>When buying a hosting account, you&#8217;ll also have to purchase a domain name. This is what makes this project interesting: you&#8217;ll be able to go to your domain name (https:\/\/example.com) and see your ESP readings.<\/p>\n\n\n\n<p>If you like our projects, you might consider signing up for one of the recommended hosting services, because you&#8217;ll be supporting our work.<\/p>\n\n\n\n<p class=\"rntbox rntclgreen\"><strong>Note: <\/strong> you can also run a <a href=\"https:\/\/randomnerdtutorials.com\/raspberry-pi-apache-mysql-php-lamp-server\/\">LAMP (Linux, Apache, MySQL, PHP) server<\/a> on a Raspberry Pi to <a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-raspberry-pi-lamp-server\/\">access data in your local network<\/a>. However, the purpose of this tutorial is to publish readings in your own domain name that you can access from anywhere in the world. This allows you to easily access your ESP readings without relying on a third-party IoT platform.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-up-mysql-database\">2. Preparing Your MySQL Database<\/h2>\n\n\n\n<p>After signing up for a <a aria-label=\"hosting and setting up a domain name (opens in a new tab)\" href=\"https:\/\/randomnerdtutorials.com\/bluehost\" target=\"_blank\" rel=\"noreferrer noopener\">hosting account and setting up a domain name<\/a>, you can login to your cPanel or similar dashboard. After that, follow the next steps to create your database, username, password, and SQL table.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a database and user<\/h3>\n\n\n\n<p>Open the &#8220;<strong>Advanced<\/strong>&#8221; tab:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"794\" height=\"543\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cpanel-bluehost-advanced-tab.jpg?resize=794%2C543&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Bluehost Advanced tab\" class=\"wp-image-92154\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cpanel-bluehost-advanced-tab.jpg?w=794&amp;quality=100&amp;strip=all&amp;ssl=1 794w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cpanel-bluehost-advanced-tab.jpg?resize=300%2C205&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cpanel-bluehost-advanced-tab.jpg?resize=768%2C525&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 794px) 100vw, 794px\" \/><\/figure><\/div>\n\n\n<p><strong>1.<\/strong> Type &#8220;database&#8221; in the search bar and select &#8220;MySQL Database Wizard&#8221;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"826\" height=\"300\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/A-CPanel-select-MySQL-database-wizard-to-create-db.png?resize=826%2C300&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"CPanel select MySQL database wizard to create db\" class=\"wp-image-88086\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/A-CPanel-select-MySQL-database-wizard-to-create-db.png?w=826&amp;quality=100&amp;strip=all&amp;ssl=1 826w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/A-CPanel-select-MySQL-database-wizard-to-create-db.png?resize=300%2C109&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/A-CPanel-select-MySQL-database-wizard-to-create-db.png?resize=768%2C279&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/figure><\/div>\n\n\n<p><strong>2.<\/strong> Enter your desired Database name. In my case, the database name is <span class=\"rnthl rntliteral\">esp_data<\/span>. Then, press the &#8220;Next Step&#8221; button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"609\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Create-MySQL-Database.png?resize=609%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 CPanel Create MySQL Database\" class=\"wp-image-88072\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Create-MySQL-Database.png?w=609&amp;quality=100&amp;strip=all&amp;ssl=1 609w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Create-MySQL-Database.png?resize=300%2C207&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/figure><\/div>\n\n\n<p><strong>Note: <\/strong> later you&#8217;ll have to use the database name with the prefix that your host gives you (my database prefix in the screenshot above is blurred). I&#8217;ll refer to it as <span class=\"rnthl rntliteral\">example_esp_data<\/span> from now on.<\/p>\n\n\n\n<p><strong>3.<\/strong> Type your Database username and set a password. You must save all those details because you&#8217;ll need them later to establish a database connection with your PHP code.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"590\" height=\"615\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Create-MySQL-Database-User-Password.png?resize=590%2C615&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 CPanel Create MySQL Database User and Password\" class=\"wp-image-88073\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Create-MySQL-Database-User-Password.png?w=590&amp;quality=100&amp;strip=all&amp;ssl=1 590w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Create-MySQL-Database-User-Password.png?resize=288%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 288w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/figure><\/div>\n\n\n<p>That&#8217;s it! Your new database and user were created successfully. Now, save all your details because you&#8217;ll need them later:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Database name<\/strong>: example_esp_data<\/li>\n\n\n\n<li><strong>Username<\/strong>: example_esp_board<\/li>\n\n\n\n<li><strong>Password<\/strong>: your password<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a SQL table<\/h3>\n\n\n\n<p>After creating your database and user, go back to cPanel dashboard and search for &#8220;phpMyAdmin&#8221;.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"315\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Open-PHPMyAdmin.png?resize=570%2C315&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 CPanel Open PHPMyAdmin\" class=\"wp-image-88076\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Open-PHPMyAdmin.png?w=570&amp;quality=100&amp;strip=all&amp;ssl=1 570w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Open-PHPMyAdmin.png?resize=300%2C166&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/figure><\/div>\n\n\n<p>In the left sidebar, select your database name <span class=\"rnthl rntliteral\">example_esp_data<\/span> and open the &#8220;SQL&#8221; tab. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"521\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-PHPMyAdmin-Open-Database.png?resize=797%2C521&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 PHPMyAdmin Open Database\" class=\"wp-image-88078\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-PHPMyAdmin-Open-Database.png?w=797&amp;quality=100&amp;strip=all&amp;ssl=1 797w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-PHPMyAdmin-Open-Database.png?resize=300%2C196&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-PHPMyAdmin-Open-Database.png?resize=768%2C502&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 797px) 100vw, 797px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntcorange\"><strong>Important: <\/strong> make sure you&#8217;ve opened the <span class=\"rnthl rntliteral\">example_esp_data<\/span> database. Then, click the SQL tab. If you don&#8217;t follow these exact steps and run the SQL query, you might create a table in the wrong database.<\/p>\n\n\n\n<p>Copy the SQL query in the following snippet:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">CREATE TABLE SensorData (\r\n    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,\r\n    sensor VARCHAR(30) NOT NULL,\r\n    location VARCHAR(30) NOT NULL,\r\n    value1 VARCHAR(10),\r\n    value2 VARCHAR(10),\r\n    value3 VARCHAR(10),\r\n    reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP\r\n)\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/SensorData_Table.sql\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Paste it in the SQL query field (highlighted with a red rectangle) and press the &#8220;Go&#8221; button to create your table:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-Create-SQL-Table.png?resize=1024%2C509&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 PHPMyAdmin Create SQL Table\" class=\"wp-image-85943\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-Create-SQL-Table.png?resize=1024%2C509&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-Create-SQL-Table.png?resize=300%2C149&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-Create-SQL-Table.png?resize=768%2C381&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-Create-SQL-Table.png?w=1031&amp;quality=100&amp;strip=all&amp;ssl=1 1031w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>After that, you should see your newly created table called <span class=\"rnthl rntliteral\">SensorData<\/span> in the <span class=\"rnthl rntliteral\">example_esp_data<\/span> database as shown in the figure below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-View-SQL-Database.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1148\" height=\"382\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-View-SQL-Database.png?resize=1148%2C382&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 PHPMyAdmin View SQL Database\" class=\"wp-image-85945\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-View-SQL-Database.png?w=1148&amp;quality=100&amp;strip=all&amp;ssl=1 1148w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-View-SQL-Database.png?resize=300%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-View-SQL-Database.png?resize=768%2C256&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-PHPMyAdmin-View-SQL-Database.png?resize=1024%2C341&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1148px) 100vw, 1148px\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"php-script-receive-insert-data\">3. PHP Script HTTP POST &#8211; Receive and Insert Data in MySQL Database<\/h2>\n\n\n\n<p>In this section, we&#8217;re going to create a PHP script that is responsible for receiving incoming requests from the ESP32 or ESP8266 and inserting the data into a MySQL database.<\/p>\n\n\n\n<p>If you&#8217;re using a hosting provider with cPanel, you can search for &#8220;File Manager&#8221;:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/ESP32-ESP8266-CPanel-Open-Edit-PHP-Files.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 CPanel Open Edit PHP Files with File Manager\"\/><\/figure><\/div>\n\n\n<p>Then, select the <strong>public_html<\/strong> option and press the &#8220;+ File&#8221; button to create a new <em>.php<\/em> file.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"849\" height=\"346\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-CPanel-Create-New-PHP-File.png?resize=849%2C346&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 CPanel Create New PHP File\" class=\"wp-image-85940\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-CPanel-Create-New-PHP-File.png?w=849&amp;quality=100&amp;strip=all&amp;ssl=1 849w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-CPanel-Create-New-PHP-File.png?resize=300%2C122&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-ESP8266-CPanel-Create-New-PHP-File.png?resize=768%2C313&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 849px) 100vw, 849px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclblue\"><strong>Note: <\/strong> if you&#8217;re following this tutorial and you&#8217;re not familiar with PHP or MySQL, I recommend creating these exact files. Otherwise, you&#8217;ll need to modify the ESP sketch provided with different URL paths. <\/p>\n\n\n\n<p>Create a new file in <strong>\/public_html<\/strong> with this exact name and extension: <em>esp-post-data.php<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"249\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-post-data-PHP-file.png?resize=500%2C249&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Create esp post data PHP file\" class=\"wp-image-92143\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-post-data-PHP-file.png?w=500&amp;quality=100&amp;strip=all&amp;ssl=1 500w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-post-data-PHP-file.png?resize=300%2C149&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Edit the newly created file (<em>esp-post-data.php<\/em>) and copy the following snippet:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">&lt;!--\n  Rui Santos\n  Complete project details at https:\/\/RandomNerdTutorials.com\/cloud-weather-station-esp32-esp8266\/\n\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files.\n\n  The above copyright notice and this permission notice shall be included in all\n  copies or substantial portions of the Software.\n--&gt;\n&lt;?php\n  include_once('esp-database.php');\n\n  \/\/ Keep this API Key value to be compatible with the ESP code provided in the project page. If you change this value, the ESP sketch needs to match\n  $api_key_value = &quot;tPmAT5Ab3j7F9&quot;;\n\n  $api_key= $sensor = $location = $value1 = $value2 = $value3 = &quot;&quot;;\n\n  if ($_SERVER[&quot;REQUEST_METHOD&quot;] == &quot;POST&quot;) {\n    $api_key = test_input($_POST[&quot;api_key&quot;]);\n    if($api_key == $api_key_value) {\n      $sensor = test_input($_POST[&quot;sensor&quot;]);\n      $location = test_input($_POST[&quot;location&quot;]);\n      $value1 = test_input($_POST[&quot;value1&quot;]);\n      $value2 = test_input($_POST[&quot;value2&quot;]);\n      $value3 = test_input($_POST[&quot;value3&quot;]);\n\n      $result = insertReading($sensor, $location, $value1, $value2, $value3);\n      echo $result;\n    }\n    else {\n      echo &quot;Wrong API Key provided.&quot;;\n    }\n  }\n  else {\n    echo &quot;No data posted with HTTP POST.&quot;;\n  }\n\n  function test_input($data) {\n    $data = trim($data);\n    $data = stripslashes($data);\n    $data = htmlspecialchars($data);\n    return $data;\n  }\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/esp-post-data.php\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"php-script-database-functions\">4. PHP Script for Database Functions<\/h2>\n\n\n\n<p>Create a new file in <strong>\/public_html<\/strong> that is responsible for inserting and accessing data in your database. Name your file: <em>esp-database.php<\/em> <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"249\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-database-PHP-file.png?resize=500%2C249&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Create esp database PHP file\" class=\"wp-image-92142\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-database-PHP-file.png?w=500&amp;quality=100&amp;strip=all&amp;ssl=1 500w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-database-PHP-file.png?resize=300%2C149&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Copy that PHP script:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">&lt;!--\n  Rui Santos\n  Complete project details at https:\/\/RandomNerdTutorials.com\/cloud-weather-station-esp32-esp8266\/\n\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files.\n\n  The above copyright notice and this permission notice shall be included in all\n  copies or substantial portions of the Software.\n--&gt;\n&lt;?php\n  $servername = &quot;localhost&quot;;\n\n  \/\/ REPLACE with your Database name\n  $dbname = &quot;REPLACE_WITH_YOUR_DATABASE_NAME&quot;;\n  \/\/ REPLACE with Database user\n  $username = &quot;REPLACE_WITH_YOUR_USERNAME&quot;;\n  \/\/ REPLACE with Database user password\n  $password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n  function insertReading($sensor, $location, $value1, $value2, $value3) {\n    global $servername, $username, $password, $dbname;\n\n    \/\/ Create connection\n    $conn = new mysqli($servername, $username, $password, $dbname);\n    \/\/ Check connection\n    if ($conn-&gt;connect_error) {\n      die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);\n    }\n\n    $sql = &quot;INSERT INTO SensorData (sensor, location, value1, value2, value3)\n    VALUES ('&quot; . $sensor . &quot;', '&quot; . $location . &quot;', '&quot; . $value1 . &quot;', '&quot; . $value2 . &quot;', '&quot; . $value3 . &quot;')&quot;;\n\n    if ($conn-&gt;query($sql) === TRUE) {\n      return &quot;New record created successfully&quot;;\n    }\n    else {\n      return &quot;Error: &quot; . $sql . &quot;&lt;br&gt;&quot; . $conn-&gt;error;\n    }\n    $conn-&gt;close();\n  }\n  \n  function getAllReadings($limit) {\n    global $servername, $username, $password, $dbname;\n\n    \/\/ Create connection\n    $conn = new mysqli($servername, $username, $password, $dbname);\n    \/\/ Check connection\n    if ($conn-&gt;connect_error) {\n      die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);\n    }\n\n    $sql = &quot;SELECT id, sensor, location, value1, value2, value3, reading_time FROM SensorData order by reading_time desc limit &quot; . $limit;\n    if ($result = $conn-&gt;query($sql)) {\n      return $result;\n    }\n    else {\n      return false;\n    }\n    $conn-&gt;close();\n  }\n  function getLastReadings() {\n    global $servername, $username, $password, $dbname;\n\n    \/\/ Create connection\n    $conn = new mysqli($servername, $username, $password, $dbname);\n    \/\/ Check connection\n    if ($conn-&gt;connect_error) {\n      die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);\n    }\n\n    $sql = &quot;SELECT id, sensor, location, value1, value2, value3, reading_time FROM SensorData order by reading_time desc limit 1&quot; ;\n    if ($result = $conn-&gt;query($sql)) {\n      return $result-&gt;fetch_assoc();\n    }\n    else {\n      return false;\n    }\n    $conn-&gt;close();\n  }\n\n  function minReading($limit, $value) {\n     global $servername, $username, $password, $dbname;\n\n    \/\/ Create connection\n    $conn = new mysqli($servername, $username, $password, $dbname);\n    \/\/ Check connection\n    if ($conn-&gt;connect_error) {\n      die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);\n    }\n\n    $sql = &quot;SELECT MIN(&quot; . $value . &quot;) AS min_amount FROM (SELECT &quot; . $value . &quot; FROM SensorData order by reading_time desc limit &quot; . $limit . &quot;) AS min&quot;;\n    if ($result = $conn-&gt;query($sql)) {\n      return $result-&gt;fetch_assoc();\n    }\n    else {\n      return false;\n    }\n    $conn-&gt;close();\n  }\n\n  function maxReading($limit, $value) {\n     global $servername, $username, $password, $dbname;\n\n    \/\/ Create connection\n    $conn = new mysqli($servername, $username, $password, $dbname);\n    \/\/ Check connection\n    if ($conn-&gt;connect_error) {\n      die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);\n    }\n\n    $sql = &quot;SELECT MAX(&quot; . $value . &quot;) AS max_amount FROM (SELECT &quot; . $value . &quot; FROM SensorData order by reading_time desc limit &quot; . $limit . &quot;) AS max&quot;;\n    if ($result = $conn-&gt;query($sql)) {\n      return $result-&gt;fetch_assoc();\n    }\n    else {\n      return false;\n    }\n    $conn-&gt;close();\n  }\n\n  function avgReading($limit, $value) {\n     global $servername, $username, $password, $dbname;\n\n    \/\/ Create connection\n    $conn = new mysqli($servername, $username, $password, $dbname);\n    \/\/ Check connection\n    if ($conn-&gt;connect_error) {\n      die(&quot;Connection failed: &quot; . $conn-&gt;connect_error);\n    }\n\n    $sql = &quot;SELECT AVG(&quot; . $value . &quot;) AS avg_amount FROM (SELECT &quot; . $value . &quot; FROM SensorData order by reading_time desc limit &quot; . $limit . &quot;) AS avg&quot;;\n    if ($result = $conn-&gt;query($sql)) {\n      return $result-&gt;fetch_assoc();\n    }\n    else {\n      return false;\n    }\n    $conn-&gt;close();\n  }\n?&gt;\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/esp-database.php\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Before saving the file, you need to modify the <span class=\"rnthl rntliteral\">$dbname<\/span>, <span class=\"rnthl rntliteral\">$username<\/span> and <span class=\"rnthl rntliteral\">$password<\/span> variables with your unique details:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Your Database name\n$dbname = \"example_esp_data\";\n\/\/ Your Database user\n$username = \"example_esp_board\";\n\/\/ Your Database user password\n$password = \"YOUR_USER_PASSWORD\";<\/code><\/pre>\n\n\n\n<p>After adding the database name, username and password, save the file and continue with this tutorial. If you try to access your domain name in the next URL path, you&#8217;ll see the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;example.com\/esp-post-data.php<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"679\" height=\"235\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/esp-post-data-example-PHP-file.png?resize=679%2C235&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"esp post data via HTTP example PHP file\" class=\"wp-image-92150\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/esp-post-data-example-PHP-file.png?w=679&amp;quality=100&amp;strip=all&amp;ssl=1 679w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/esp-post-data-example-PHP-file.png?resize=300%2C104&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"php-script-display-readings-gauge-table\">5. PHP Script &#8211; Display Database Readings on Gauges and Table<\/h2>\n\n\n\n<p>You&#8217;ll also need to add a CSS file to style your dashboard, name it: <em>esp-style.css<\/em>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"249\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-style-CSS-file.png?resize=500%2C249&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Create esp style CSS file\" class=\"wp-image-92144\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-style-CSS-file.png?w=500&amp;quality=100&amp;strip=all&amp;ssl=1 500w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-style-CSS-file.png?resize=300%2C149&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Copy that CSS to your file and save it:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-css\">\/**\n  Rui Santos\n  Complete project details at https:\/\/RandomNerdTutorials.com\/cloud-weather-station-esp32-esp8266\/\n\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files.\n\n  The above copyright notice and this permission notice shall be included in all\n  copies or substantial portions of the Software.\n**\/\nbody {\n    width: 60%;\n    margin: auto;\n    text-align: center;\n    font-family: Arial;\n    top: 50%;\n    left: 50%;\n}\n\n@media screen and (max-width: 800px) {\n    body {\n        width: 100%;\n    }\n}\n\ntable {\n    margin-left: auto;\n    margin-right: auto;\n}\n\ndiv {\n    margin-left: auto;\n    margin-right: auto;\n}\n\nh2 { font-size: 2.5rem; }\n\n.header {\n\t padding: 1rem;\n\t margin: 0 0 2rem 0;\n\t background: #f2f2f2;\n}\n\nh1 {\n    font-size: 2rem;\n    font-family: Arial, sans-serif;\n    text-align: center;\n    text-transform: uppercase;\n}\n\n.content {\n    display: flex;\n}\n\n@media screen and (max-width: 500px) \/* Mobile *\/ {\n    .content {\n        flex-direction: column;\n    }\n}\n\n.mask {\n    position: relative;\n    overflow: hidden;\n    display: block;\n    width: 12.5rem;\n    height: 6.25rem;\n    margin: 1.25rem;\n}\n\n.semi-circle {\n    position: relative;\n    display: block;\n    width: 12.5rem;\n    height: 6.25rem;\n    background: linear-gradient(to right, #3498db 0%, #05b027 33%, #f1c40f 70%, #c0392b 100%);\n    border-radius: 50% 50% 50% 50% \/ 100% 100% 0% 0%;\n}\n\n.semi-circle::before {\n    content: &quot;&quot;;\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    z-index: 2;\n    display: block;\n    width: 8.75rem;\n    height: 4.375rem;\n    margin-left: -4.375rem;\n    background: #fff;\n    border-radius: 50% 50% 50% 50% \/ 100% 100% 0% 0%;\n}\n\n.semi-circle--mask {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 12.5rem;\n    height: 12.5rem;\n    background: transparent;\n    transform: rotate(120deg) translate3d(0, 0, 0);\n    transform-origin: center center;\n    backface-visibility: hidden;\n    transition: all 0.3s ease-in-out;\n}\n\n.semi-circle--mask::before {\n    content: &quot;&quot;;\n    position: absolute;\n    top: 0;\n    left: 0%;\n    z-index: 2;\n    display: block;\n    width: 12.625rem;\n    height: 6.375rem;\n    margin: -1px 0 0 -1px;\n    background: #f2f2f2;\n    border-radius: 50% 50% 50% 50% \/ 100% 100% 0% 0%;\n}\n\n.gauge--2 .semi-circle { background: #3498db; }\n\n.gauge--2 .semi-circle--mask { transform: rotate(20deg) translate3d(0, 0, 0); }\n\n#tableReadings { border-collapse: collapse; }\n\n#tableReadings td, #tableReadings th {\n    border: 1px solid #ddd;\n    padding: 10px;\n}\n\n#tableReadings tr:nth-child(even){ background-color: #f2f2f2; }\n\n#tableReadings tr:hover { background-color: #ddd; }\n\n#tableReadings th {\n    padding: 10px;\n    background-color: #2f4468;\n    color: white;\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/esp-style.css\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Finally, create another PHP file in the <strong>\/public_html<\/strong> directory that will display all the database content on a web page. Name your new file: <em>esp-weather-station.php <\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"249\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-weather-station-PHP-file.png?resize=500%2C249&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Create esp weather station PHP file\" class=\"wp-image-92145\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-weather-station-PHP-file.png?w=500&amp;quality=100&amp;strip=all&amp;ssl=1 500w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Create-esp-weather-station-PHP-file.png?resize=300%2C149&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Edit the newly created file (<em>esp-weather-station.php<\/em>) and copy the following code:<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">&lt;!--\n  Rui Santos\n  Complete project details at https:\/\/RandomNerdTutorials.com\/cloud-weather-station-esp32-esp8266\/\n\n  Permission is hereby granted, free of charge, to any person obtaining a copy\n  of this software and associated documentation files.\n\n  The above copyright notice and this permission notice shall be included in all\n  copies or substantial portions of the Software.\n--&gt;\n&lt;?php\n    include_once('esp-database.php');\n    if (isset($_GET[&quot;readingsCount&quot;])){\n      $data = $_GET[&quot;readingsCount&quot;];\n      $data = trim($data);\n      $data = stripslashes($data);\n      $data = htmlspecialchars($data);\n      $readings_count = $_GET[&quot;readingsCount&quot;];\n    }\n    \/\/ default readings count set to 20\n    else {\n      $readings_count = 20;\n    }\n\n    $last_reading = getLastReadings();\n    $last_reading_temp = $last_reading[&quot;value1&quot;];\n    $last_reading_humi = $last_reading[&quot;value2&quot;];\n    $last_reading_time = $last_reading[&quot;reading_time&quot;];\n\n    \/\/ Uncomment to set timezone to - 1 hour (you can change 1 to any number)\n    \/\/$last_reading_time = date(&quot;Y-m-d H:i:s&quot;, strtotime(&quot;$last_reading_time - 1 hours&quot;));\n    \/\/ Uncomment to set timezone to + 7 hours (you can change 7 to any number)\n    \/\/$last_reading_time = date(&quot;Y-m-d H:i:s&quot;, strtotime(&quot;$last_reading_time + 7 hours&quot;));\n\n    $min_temp = minReading($readings_count, 'value1');\n    $max_temp = maxReading($readings_count, 'value1');\n    $avg_temp = avgReading($readings_count, 'value1');\n\n    $min_humi = minReading($readings_count, 'value2');\n    $max_humi = maxReading($readings_count, 'value2');\n    $avg_humi = avgReading($readings_count, 'value2');\n?&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot;&gt;\n\n        &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;esp-style.css&quot;&gt;\n        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n        &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n    &lt;header class=&quot;header&quot;&gt;\n        &lt;h1&gt;\ud83d\udcca ESP Weather Station&lt;\/h1&gt;\n        &lt;form method=&quot;get&quot;&gt;\n            &lt;input type=&quot;number&quot; name=&quot;readingsCount&quot; min=&quot;1&quot; placeholder=&quot;Number of readings (&lt;?php echo $readings_count; ?&gt;)&quot;&gt;\n            &lt;input type=&quot;submit&quot; value=&quot;UPDATE&quot;&gt;\n        &lt;\/form&gt;\n    &lt;\/header&gt;\n&lt;body&gt;\n    &lt;p&gt;Last reading: &lt;?php echo $last_reading_time; ?&gt;&lt;\/p&gt;\n    &lt;section class=&quot;content&quot;&gt;\n\t    &lt;div class=&quot;box gauge--1&quot;&gt;\n\t    &lt;h3&gt;TEMPERATURE&lt;\/h3&gt;\n              &lt;div class=&quot;mask&quot;&gt;\n\t\t\t  &lt;div class=&quot;semi-circle&quot;&gt;&lt;\/div&gt;\n\t\t\t  &lt;div class=&quot;semi-circle--mask&quot;&gt;&lt;\/div&gt;\n\t\t\t&lt;\/div&gt;\n\t\t    &lt;p style=&quot;font-size: 30px;&quot; id=&quot;temp&quot;&gt;--&lt;\/p&gt;\n\t\t    &lt;table cellspacing=&quot;5&quot; cellpadding=&quot;5&quot;&gt;\n\t\t        &lt;tr&gt;\n\t\t            &lt;th colspan=&quot;3&quot;&gt;Temperature &lt;?php echo $readings_count; ?&gt; readings&lt;\/th&gt;\n\t            &lt;\/tr&gt;\n\t\t        &lt;tr&gt;\n\t\t            &lt;td&gt;Min&lt;\/td&gt;\n                    &lt;td&gt;Max&lt;\/td&gt;\n                    &lt;td&gt;Average&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;&lt;?php echo $min_temp['min_amount']; ?&gt; &amp;deg;C&lt;\/td&gt;\n                    &lt;td&gt;&lt;?php echo $max_temp['max_amount']; ?&gt; &amp;deg;C&lt;\/td&gt;\n                    &lt;td&gt;&lt;?php echo round($avg_temp['avg_amount'], 2); ?&gt; &amp;deg;C&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;box gauge--2&quot;&gt;\n            &lt;h3&gt;HUMIDITY&lt;\/h3&gt;\n            &lt;div class=&quot;mask&quot;&gt;\n                &lt;div class=&quot;semi-circle&quot;&gt;&lt;\/div&gt;\n                &lt;div class=&quot;semi-circle--mask&quot;&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;p style=&quot;font-size: 30px;&quot; id=&quot;humi&quot;&gt;--&lt;\/p&gt;\n            &lt;table cellspacing=&quot;5&quot; cellpadding=&quot;5&quot;&gt;\n                &lt;tr&gt;\n                    &lt;th colspan=&quot;3&quot;&gt;Humidity &lt;?php echo $readings_count; ?&gt; readings&lt;\/th&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;Min&lt;\/td&gt;\n                    &lt;td&gt;Max&lt;\/td&gt;\n                    &lt;td&gt;Average&lt;\/td&gt;\n                &lt;\/tr&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;&lt;?php echo $min_humi['min_amount']; ?&gt; %&lt;\/td&gt;\n                    &lt;td&gt;&lt;?php echo $max_humi['max_amount']; ?&gt; %&lt;\/td&gt;\n                    &lt;td&gt;&lt;?php echo round($avg_humi['avg_amount'], 2); ?&gt; %&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n    &lt;\/section&gt;\n&lt;?php\n    echo   '&lt;h2&gt; View Latest ' . $readings_count . ' Readings&lt;\/h2&gt;\n            &lt;table cellspacing=&quot;5&quot; cellpadding=&quot;5&quot; id=&quot;tableReadings&quot;&gt;\n                &lt;tr&gt;\n                    &lt;th&gt;ID&lt;\/th&gt;\n                    &lt;th&gt;Sensor&lt;\/th&gt;\n                    &lt;th&gt;Location&lt;\/th&gt;\n                    &lt;th&gt;Value 1&lt;\/th&gt;\n                    &lt;th&gt;Value 2&lt;\/th&gt;\n                    &lt;th&gt;Value 3&lt;\/th&gt;\n                    &lt;th&gt;Timestamp&lt;\/th&gt;\n                &lt;\/tr&gt;';\n\n    $result = getAllReadings($readings_count);\n        if ($result) {\n        while ($row = $result-&gt;fetch_assoc()) {\n            $row_id = $row[&quot;id&quot;];\n            $row_sensor = $row[&quot;sensor&quot;];\n            $row_location = $row[&quot;location&quot;];\n            $row_value1 = $row[&quot;value1&quot;];\n            $row_value2 = $row[&quot;value2&quot;];\n            $row_value3 = $row[&quot;value3&quot;];\n            $row_reading_time = $row[&quot;reading_time&quot;];\n            \/\/ Uncomment to set timezone to - 1 hour (you can change 1 to any number)\n            \/\/$row_reading_time = date(&quot;Y-m-d H:i:s&quot;, strtotime(&quot;$row_reading_time - 1 hours&quot;));\n            \/\/ Uncomment to set timezone to + 7 hours (you can change 7 to any number)\n            \/\/$row_reading_time = date(&quot;Y-m-d H:i:s&quot;, strtotime(&quot;$row_reading_time + 7 hours&quot;));\n\n            echo '&lt;tr&gt;\n                    &lt;td&gt;' . $row_id . '&lt;\/td&gt;\n                    &lt;td&gt;' . $row_sensor . '&lt;\/td&gt;\n                    &lt;td&gt;' . $row_location . '&lt;\/td&gt;\n                    &lt;td&gt;' . $row_value1 . '&lt;\/td&gt;\n                    &lt;td&gt;' . $row_value2 . '&lt;\/td&gt;\n                    &lt;td&gt;' . $row_value3 . '&lt;\/td&gt;\n                    &lt;td&gt;' . $row_reading_time . '&lt;\/td&gt;\n                  &lt;\/tr&gt;';\n        }\n        echo '&lt;\/table&gt;';\n        $result-&gt;free();\n    }\n?&gt;\n\n&lt;script&gt;\n    var value1 = &lt;?php echo $last_reading_temp; ?&gt;;\n    var value2 = &lt;?php echo $last_reading_humi; ?&gt;;\n    setTemperature(value1);\n    setHumidity(value2);\n\n    function setTemperature(curVal){\n    \t\/\/set range for Temperature in Celsius -5 Celsius to 38 Celsius\n    \tvar minTemp = -5.0;\n    \tvar maxTemp = 38.0;\n        \/\/set range for Temperature in Fahrenheit 23 Fahrenheit to 100 Fahrenheit\n    \t\/\/var minTemp = 23;\n    \t\/\/var maxTemp = 100;\n\n    \tvar newVal = scaleValue(curVal, [minTemp, maxTemp], [0, 180]);\n    \t$('.gauge--1 .semi-circle--mask').attr({\n    \t\tstyle: '-webkit-transform: rotate(' + newVal + 'deg);' +\n    \t\t'-moz-transform: rotate(' + newVal + 'deg);' +\n    \t\t'transform: rotate(' + newVal + 'deg);'\n    \t});\n    \t$(&quot;#temp&quot;).text(curVal + ' \u00baC');\n    }\n\n    function setHumidity(curVal){\n    \t\/\/set range for Humidity percentage 0 % to 100 %\n    \tvar minHumi = 0;\n    \tvar maxHumi = 100;\n\n    \tvar newVal = scaleValue(curVal, [minHumi, maxHumi], [0, 180]);\n    \t$('.gauge--2 .semi-circle--mask').attr({\n    \t\tstyle: '-webkit-transform: rotate(' + newVal + 'deg);' +\n    \t\t'-moz-transform: rotate(' + newVal + 'deg);' +\n    \t\t'transform: rotate(' + newVal + 'deg);'\n    \t});\n    \t$(&quot;#humi&quot;).text(curVal + ' %');\n    }\n\n    function scaleValue(value, from, to) {\n        var scale = (to[1] - to[0]) \/ (from[1] - from[0]);\n        var capped = Math.min(from[1], Math.max(from[0], value)) - from[0];\n        return ~~(capped * scale + to[0]);\n    }\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/esp-weather-station.php\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>If you try to access your domain name in the following URL path, you&#8217;ll see the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;example.com\/esp-weather-station.php<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"697\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/esp32-esp8266-cloud-weather-station-no-data-yet.png?resize=750%2C697&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Weather Station Empty Test Dashboard\" class=\"wp-image-129669\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/esp32-esp8266-cloud-weather-station-no-data-yet.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/esp32-esp8266-cloud-weather-station-no-data-yet.png?resize=300%2C279&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>That&#8217;s it! If you see that web page with empty values in your browser, it means that everything is ready. In the next section, you&#8217;ll learn how to insert data from your ESP32 or ESP8266 into the database.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-up-esp32-esp8266\">6. Setting Up the ESP32 or ESP8266<\/h2>\n\n\n\n<p>This project is compatible with both the ESP32 and ESP8266 boards. You just need to assemble a simple circuit and upload the sketch provided to insert temperature, humidity, pressure, and more into your database every 10 minutes. The sketch is slightly different for each board.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/08\/esp32-vs-esp8266-devlopment-boards.jpg?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 vs ESP8266 Development Boards\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Parts Required<\/h3>\n\n\n\n<p>For this example, we&#8217;ll get sensor readings from the BME280 sensor. Here&#8217;s a list of parts you need to build the circuit for this project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\">ESP32 board<\/a>&nbsp;(read <a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\">Best ESP32 dev boards<\/a>)<\/li>\n\n\n\n<li>Alternative &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\">ESP8266<\/a> board (read <a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Best ESP8266 dev boards<\/a>)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/bme280-sensor-module\/\" target=\"_blank\">BME280 sensor<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\">Jumper wires<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\">Breadboard<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Schematics<\/h3>\n\n\n\n<p>The BME280 sensor module we\u2019re using communicates via I2C communication protocol, so you need to connect it to the ESP32 or ESP8266 I2C pins.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">BME280 wiring to ESP32<\/h4>\n\n\n\n<p>The ESP32 I2C pins are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GPIO 22:<\/strong>&nbsp;SCL (SCK)<\/li>\n\n\n\n<li><strong>GPIO 21:<\/strong>&nbsp;SDA (SDI)<\/li>\n<\/ul>\n\n\n\n<p>So, assemble your circuit as shown in the next schematic diagram (<a href=\"https:\/\/randomnerdtutorials.com\/esp32-bme280-arduino-ide-pressure-temperature-humidity\/\">Guide for ESP32 with BME280<\/a> and <a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-with-bme280-mini-weather-station\/\">ESP32 BME280 Web Server<\/a>).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"652\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/03\/ESP32-bme280_bb.png?resize=750%2C652&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"BME280 wiring to ESP32\" class=\"wp-image-56623\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/03\/ESP32-bme280_bb.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/03\/ESP32-bme280_bb.png?resize=300%2C261&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclblue\"><strong>Recommended reading:<\/strong> <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\">ESP32 Pinout Reference Guide<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">BME280 wiring to ESP8266<\/h4>\n\n\n\n<p>The ESP8266 I2C pins are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>GPIO 5&nbsp;<\/strong>(D1): SCL (SCK)<\/li>\n\n\n\n<li><strong>GPIO 4&nbsp;<\/strong>(D2): SDA (SDI)<\/li>\n<\/ul>\n\n\n\n<p>Assemble your circuit as in the next schematic diagram if you&#8217;re using an ESP8266 board (<a href=\"https:\/\/randomnerdtutorials.com\/esp8266-bme280-arduino-ide\/\">read Guide for ESP8266 with BME280<\/a>).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"532\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP8266-BME280-Arduino-IDE.png?resize=705%2C532&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"BME280 wiring to ESP8266\" class=\"wp-image-85980\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP8266-BME280-Arduino-IDE.png?w=705&amp;quality=100&amp;strip=all&amp;ssl=1 705w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP8266-BME280-Arduino-IDE.png?resize=300%2C226&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 705px) 100vw, 705px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclblue\"><strong>Recommended reading:<\/strong> <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-pinout-reference-gpios\/\">ESP8266 Pinout Reference Guide<\/a> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installing Libraries<\/h3>\n\n\n\n<p>We\u2019ll program the ESP32\/ESP8266 using Arduino IDE, so you must have the ESP add-on installed in your Arduino IDE. <\/p>\n\n\n\n<p>Follow one of the next tutorials depending on the board you&#8217;re using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-the-esp32-board-in-arduino-ide-windows-instructions\/\">Install the ESP32 Board in Arduino IDE<\/a> &#8211; you also need to <a href=\"https:\/\/randomnerdtutorials.com\/esp32-bme280-arduino-ide-pressure-temperature-humidity\/\">install the BME280 Library and Adafruit_Sensor library<\/a><\/li>\n\n\n\n<li><a style=\"font-size: inherit; background-color: initial;\" href=\"https:\/\/randomnerdtutorials.com\/how-to-install-esp8266-board-arduino-ide\/\">Install the ESP8266 Board in Arduino IDE<\/a> &#8211; you also need to <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-bme280-arduino-ide\/\">install the BME280 Library and Adafruit_Sensor library<\/a> <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"esp32-code\">ESP32 Code<\/h3>\n\n\n\n<p>Follow this section if you\u2019re using an ESP32.&nbsp;<a href=\"#esp8266-code\" title=\"\">For an ESP8266 click here<\/a>.<\/p>\n\n\n\n<p>After installing the necessary board add-ons, copy the following code to your Arduino IDE, but don\u2019t upload it yet. You need to make some changes to make it work for you.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\r\n  Rui Santos\r\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-mysql-database-php\/\r\n  \r\n  Permission is hereby granted, free of charge, to any person obtaining a copy\r\n  of this software and associated documentation files.\r\n  \r\n  The above copyright notice and this permission notice shall be included in all\r\n  copies or substantial portions of the Software.\r\n\r\n*\/\r\n\r\n#include &lt;WiFi.h&gt;\r\n#include &lt;WiFiClientSecure.h&gt;\r\n#include &lt;HTTPClient.h&gt;\r\n#include &lt;Wire.h&gt;\r\n#include &lt;Adafruit_Sensor.h&gt;\r\n#include &lt;Adafruit_BME280.h&gt;\r\n\r\n\/\/ Replace with your network credentials\r\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\r\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\r\n\r\n\/\/ REPLACE with your Domain name and URL path or IP address with path\r\nconst char* serverName = &quot;https:\/\/example.com\/esp-post-data.php&quot;;\r\n\r\n\/\/ Keep this API Key value to be compatible with the PHP code provided in the project page. \r\n\/\/ If you change the apiKeyValue value, the PHP file \/post-esp-data.php also needs to have the same key \r\nString apiKeyValue = &quot;tPmAT5Ab3j7F9&quot;;\r\n\r\nString sensorName = &quot;BME280&quot;;\r\nString sensorLocation = &quot;Office&quot;;\r\n\r\n\/*#include &lt;SPI.h&gt;\r\n#define BME_SCK 18\r\n#define BME_MISO 19\r\n#define BME_MOSI 23\r\n#define BME_CS 5*\/\r\n\r\n#define SEALEVELPRESSURE_HPA (1013.25)\r\n\r\nAdafruit_BME280 bme;  \/\/ I2C\r\n\/\/Adafruit_BME280 bme(BME_CS);  \/\/ hardware SPI\r\n\/\/Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);  \/\/ software SPI\r\n\r\nvoid setup() {\r\n  Serial.begin(115200);\r\n  \r\n  WiFi.begin(ssid, password);\r\n  Serial.println(&quot;Connecting&quot;);\r\n  while(WiFi.status() != WL_CONNECTED) { \r\n    delay(500);\r\n    Serial.print(&quot;.&quot;);\r\n  }\r\n  Serial.println(&quot;&quot;);\r\n  Serial.print(&quot;Connected to WiFi network with IP Address: &quot;);\r\n  Serial.println(WiFi.localIP());\r\n\r\n  \/\/ (you can also pass in a Wire library object like &amp;Wire2)\r\n  bool status = bme.begin(0x76);\r\n  if (!status) {\r\n    Serial.println(&quot;Could not find a valid BME280 sensor, check wiring or change I2C address!&quot;);\r\n    while (1);\r\n  }\r\n}\r\n\r\nvoid loop() {\r\n  \/\/Check WiFi connection status\r\n  if(WiFi.status()== WL_CONNECTED){\r\n    WiFiClientSecure *client = new WiFiClientSecure;\r\n    client-&gt;setInsecure(); \/\/don't use SSL certificate\r\n    HTTPClient https;\r\n    \r\n    \/\/ Your Domain name with URL path or IP address with path\r\n    https.begin(*client, serverName);\r\n    \r\n    \/\/ Specify content-type header\r\n    https.addHeader(&quot;Content-Type&quot;, &quot;application\/x-www-form-urlencoded&quot;);\r\n    \r\n    \/\/ Prepare your HTTP POST request data\r\n    String httpRequestData = &quot;api_key=&quot; + apiKeyValue + &quot;&amp;sensor=&quot; + sensorName\r\n                          + &quot;&amp;location=&quot; + sensorLocation + &quot;&amp;value1=&quot; + String(bme.readTemperature())\r\n                          + &quot;&amp;value2=&quot; + String(bme.readHumidity()) + &quot;&amp;value3=&quot; + String(bme.readPressure()\/100.0F) + &quot;&quot;;\r\n    Serial.print(&quot;httpRequestData: &quot;);\r\n    Serial.println(httpRequestData);\r\n    \r\n    \/\/ You can comment the httpRequestData variable above\r\n    \/\/ then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)\r\n    \/\/String httpRequestData = &quot;api_key=tPmAT5Ab3j7F9&amp;sensor=BME280&amp;location=Office&amp;value1=24.75&amp;value2=49.54&amp;value3=1005.14&quot;;\r\n\r\n    \/\/ Send HTTP POST request\r\n    int httpResponseCode = https.POST(httpRequestData);\r\n     \r\n    \/\/ If you need an HTTP request with a content type: text\/plain\r\n    \/\/https.addHeader(&quot;Content-Type&quot;, &quot;text\/plain&quot;);\r\n    \/\/int httpResponseCode = https.POST(&quot;Hello, World!&quot;);\r\n    \r\n    \/\/ If you need an HTTP request with a content type: application\/json, use the following:\r\n    \/\/https.addHeader(&quot;Content-Type&quot;, &quot;application\/json&quot;);\r\n    \/\/int httpResponseCode = https.POST(&quot;{\\&quot;value1\\&quot;:\\&quot;19\\&quot;,\\&quot;value2\\&quot;:\\&quot;67\\&quot;,\\&quot;value3\\&quot;:\\&quot;78\\&quot;}&quot;);\r\n    \r\n    if (httpResponseCode&gt;0) {\r\n      Serial.print(&quot;HTTP Response code: &quot;);\r\n      Serial.println(httpResponseCode);\r\n    }\r\n    else {\r\n      Serial.print(&quot;Error code: &quot;);\r\n      Serial.println(httpResponseCode);\r\n    }\r\n    \/\/ Free resources\r\n    https.end();\r\n  }\r\n  else {\r\n    Serial.println(&quot;WiFi Disconnected&quot;);\r\n  }\r\n  \/\/Send an HTTP POST request every 30 seconds\r\n  delay(30000);  \r\n}\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/HTTPS_ESP32_Cloud_Weather_Station.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Setting your network credentials<\/h4>\n\n\n\n<p>You need to modify the following lines with your network credentials: SSID and password. The code is well commented on where you should make the changes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid     = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Setting your serverName<\/h4>\n\n\n\n<p>You also need to type your domain name, so the ESP publishes the readings to your own server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* serverName = \"https:\/\/example.com\/esp-post-data.php\";<\/code><\/pre>\n\n\n\n<p>Now, you can upload the code to your board.<\/p>\n\n\n\n<p><strong>Note:&nbsp;<\/strong>Most servers require you to make HTTPS requests. The code above makes HTTPS requests to be compliant with the requirements of most cloud servers nowadays.<\/p>\n\n\n\n<p class=\"rntbox rntclgray\">Your server doesn\u2019t support HTTPS?&nbsp;<a href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/ESP_HTTP_POST_MySQL.ino\" target=\"_blank\" rel=\"noopener\" title=\"\">Use this code instead<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">How the code works<\/h4>\n\n\n\n<p>This project is already quite long, so we won&#8217;t cover in detail how the code works, but here&#8217;s a quick summary:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Import all the libraries to make it work;<\/li>\n\n\n\n<li>Set variables that you might want to change (<span class=\"rnthl rntliteral\">apiKeyValue<\/span>, <span class=\"rnthl rntliteral\">sensorName<\/span>, <span class=\"rnthl rntliteral\">sensorLocation<\/span>);<\/li>\n\n\n\n<li>The <span class=\"rnthl rntliteral\">apiKeyValue<\/span> is just a random string that you can modify. It&#8217;s used for security reasons, so only anyone that knows your API key can publish data to your database;<\/li>\n\n\n\n<li>Initialize the serial communication for debugging purposes;<\/li>\n\n\n\n<li>Establish a Wi-Fi connection with your router;<\/li>\n\n\n\n<li>Initialize the BME280 to get readings;<\/li>\n\n\n\n<li>Initialize a secure WiFi client.<\/li>\n<\/ul>\n\n\n\n<p>Then, in the <span class=\"rnthl rntliteral\">loop()<\/span> is where you actually make the HTTP POST request every 10 minutes with the latest BME280 readings:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Your Domain name with URL path or IP address with path\nhttp.begin(serverName);\n\n\/\/ Specify content-type header\nhttp.addHeader(\"Content-Type\", \"application\/x-www-form-urlencoded\");\n\n\/\/ Prepare your HTTP POST request data\nString httpRequestData = \"api_key=\" + apiKeyValue + \"&amp;sensor=\" + sensorName                      + \"&amp;location=\" + sensorLocation + \"&amp;value1=\" + String(bme.readTemperature())                      + \"&amp;value2=\" + String(bme.readHumidity()) + \"&amp;value3=\" + String(bme.readPressure()\/100.0F) + \"\";\n\nint httpResponseCode = http.POST(httpRequestData);<\/code><\/pre>\n\n\n\n<p>You can comment the <span class=\"rnthl rntliteral\">httpRequestData<\/span> variable above that concatenates all the BME280 readings and use the <span class=\"rnthl rntliteral\">httpRequestData<\/span> variable below for testing purposes:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String httpRequestData = \"api_key=tPmAT5Ab3j7F9&amp;sensor=BME280&amp;location=Office&amp;value1=24.75&amp;value2=49.54&amp;value3=1005.14\";<\/code><\/pre>\n\n\n\n<p class=\"rntbox rntclblue\">Learn more about HTTPS Requests with the ESP32:&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/esp32-https-requests\/\">ESP32 HTTPS Requests (Arduino IDE)<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"esp8266-code\">ESP8266 Code<\/h3>\n\n\n\n<p>Follow this section if you\u2019re using an ESP8266.&nbsp;<a href=\"#esp32-code\" title=\"\">For an ESP32 check the section above<\/a>.<\/p>\n\n\n\n<p>After installing the necessary board add-ons and libraries, copy the following code to your Arduino IDE, but don\u2019t upload it yet. You need to make some changes to make it work for you.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\r\n  Rui Santos\r\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp32-esp8266-mysql-database-php\/\r\n  \r\n  Permission is hereby granted, free of charge, to any person obtaining a copy\r\n  of this software and associated documentation files.\r\n  \r\n  The above copyright notice and this permission notice shall be included in all\r\n  copies or substantial portions of the Software.\r\n\r\n*\/\r\n\r\n#include &lt;ESP8266WiFi.h&gt;\r\n#include &lt;ESP8266HTTPClient.h&gt;\r\n#include &lt;WiFiClientSecureBearSSL.h&gt;\r\n#include &lt;Wire.h&gt;\r\n#include &lt;Adafruit_Sensor.h&gt;\r\n#include &lt;Adafruit_BME280.h&gt;\r\n\r\n\/\/ Replace with your network credentials\r\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\r\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\r\n\r\n\/\/ REPLACE with your Domain name and URL path or IP address with path\r\nconst char* serverName = &quot;https:\/\/example.com\/esp-post-data.php&quot;;\r\n\r\n\/\/ Keep this API Key value to be compatible with the PHP code provided in the project page. \r\n\/\/ If you change the apiKeyValue value, the PHP file \/post-esp-data.php also needs to have the same key \r\nString apiKeyValue = &quot;tPmAT5Ab3j7F9&quot;;\r\n\r\nString sensorName = &quot;BME280&quot;;\r\nString sensorLocation = &quot;Office&quot;;\r\n\r\n\/*#include &lt;SPI.h&gt;\r\n#define BME_SCK 18\r\n#define BME_MISO 19\r\n#define BME_MOSI 23\r\n#define BME_CS 5*\/\r\n\r\n#define SEALEVELPRESSURE_HPA (1013.25)\r\n\r\nAdafruit_BME280 bme;  \/\/ I2C\r\n\/\/Adafruit_BME280 bme(BME_CS);  \/\/ hardware SPI\r\n\/\/Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);  \/\/ software SPI\r\n\r\nvoid setup() {\r\n  Serial.begin(115200);\r\n  \r\n  WiFi.begin(ssid, password);\r\n  Serial.println(&quot;Connecting&quot;);\r\n  while(WiFi.status() != WL_CONNECTED) { \r\n    delay(500);\r\n    Serial.print(&quot;.&quot;);\r\n  }\r\n  Serial.println(&quot;&quot;);\r\n  Serial.print(&quot;Connected to WiFi network with IP Address: &quot;);\r\n  Serial.println(WiFi.localIP());\r\n\r\n  \/\/ (you can also pass in a Wire library object like &amp;Wire2)\r\n  bool status = bme.begin(0x76);\r\n  if (!status) {\r\n    Serial.println(&quot;Could not find a valid BME280 sensor, check wiring or change I2C address!&quot;);\r\n    while (1);\r\n  }\r\n}\r\n\r\nvoid loop() {\r\n  \/\/Check WiFi connection status\r\n  if(WiFi.status()== WL_CONNECTED){\r\n\r\n    std::unique_ptr&lt;BearSSL::WiFiClientSecure&gt;client(new BearSSL::WiFiClientSecure);\r\n\r\n    \/\/ Ignore SSL certificate validation\r\n    client-&gt;setInsecure();\r\n    \r\n    \/\/create an HTTPClient instance\r\n    HTTPClient https;\r\n    \r\n    \/\/ Your Domain name with URL path or IP address with path\r\n    https.begin(*client, serverName);\r\n    \r\n    \/\/ Specify content-type header\r\n    https.addHeader(&quot;Content-Type&quot;, &quot;application\/x-www-form-urlencoded&quot;);\r\n    \r\n    \/\/ Prepare your HTTP POST request data\r\n    String httpRequestData = &quot;api_key=&quot; + apiKeyValue + &quot;&amp;sensor=&quot; + sensorName\r\n                          + &quot;&amp;location=&quot; + sensorLocation + &quot;&amp;value1=&quot; + String(bme.readTemperature())\r\n                          + &quot;&amp;value2=&quot; + String(bme.readHumidity()) + &quot;&amp;value3=&quot; + String(bme.readPressure()\/100.0F) + &quot;&quot;;\r\n    Serial.print(&quot;httpRequestData: &quot;);\r\n    Serial.println(httpRequestData);\r\n    \r\n    \/\/ You can comment the httpRequestData variable above\r\n    \/\/ then, use the httpRequestData variable below (for testing purposes without the BME280 sensor)\r\n    \/\/String httpRequestData = &quot;api_key=tPmAT5Ab3j7F9&amp;sensor=BME280&amp;location=Office&amp;value1=24.75&amp;value2=49.54&amp;value3=1005.14&quot;;\r\n\r\n    \/\/ Send HTTP POST request\r\n    int httpResponseCode = https.POST(httpRequestData);\r\n     \r\n    \/\/ If you need an HTTP request with a content type: text\/plain\r\n    \/\/http.addHeader(&quot;Content-Type&quot;, &quot;text\/plain&quot;);\r\n    \/\/int httpResponseCode = https.POST(&quot;Hello, World!&quot;);\r\n    \r\n    \/\/ If you need an HTTP request with a content type: application\/json, use the following:\r\n    \/\/http.addHeader(&quot;Content-Type&quot;, &quot;application\/json&quot;);\r\n    \/\/int httpResponseCode = https.POST(&quot;{\\&quot;value1\\&quot;:\\&quot;19\\&quot;,\\&quot;value2\\&quot;:\\&quot;67\\&quot;,\\&quot;value3\\&quot;:\\&quot;78\\&quot;}&quot;);\r\n        \r\n    if (httpResponseCode&gt;0) {\r\n      Serial.print(&quot;HTTP Response code: &quot;);\r\n      Serial.println(httpResponseCode);\r\n    }\r\n    else {\r\n      Serial.print(&quot;Error code: &quot;);\r\n      Serial.println(httpResponseCode);\r\n    }\r\n    \/\/ Free resources\r\n    https.end();\r\n  }\r\n  else {\r\n    Serial.println(&quot;WiFi Disconnected&quot;);\r\n  }\r\n  \/\/Send an HTTP POST request every 30 seconds\r\n  delay(30000);  \r\n}\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/raw\/master\/code\/HTTPS_ESP8266_Cloud_Weather_Station.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Setting your network credentials<\/h4>\n\n\n\n<p>You need to modify the following lines with your network credentials: SSID and password. The code is well commented on where you should make the changes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replace with your network credentials\nconst char* ssid     = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Setting your serverName<\/h4>\n\n\n\n<p>You also need to type your domain name, so the ESP publishes the readings to your own server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* serverName = \"https:\/\/example.com\/esp-post-data.php\";<\/code><\/pre>\n\n\n\n<p>Now, you can upload the code to your board.<\/p>\n\n\n\n<p><strong>Note:&nbsp;<\/strong>Most servers require you to make HTTPS requests. The code above makes HTTPS requests to be compliant with the requirements of most cloud servers nowadays.<\/p>\n\n\n\n<p class=\"rntbox rntclgray\">Your server doesn\u2019t support HTTPS?&nbsp;<a href=\"https:\/\/github.com\/RuiSantosdotme\/Cloud-Weather-Station-ESP32-ESP8266\/blob\/master\/code\/ESP_HTTP_POST_MySQL.ino\" target=\"_blank\" rel=\"noopener\" title=\"\">Use this code instead<\/a>.<\/p>\n\n\n\n<p class=\"rntbox rntclblue\">Learn more about HTTPS Requests with the ESP8266:&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-https-requests\/\">ESP8266 NodeMCU HTTPS Requests (Arduino IDE)<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>After completing all the steps, let your ESP board collect some readings and publish them to your server. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-BME280-Arduino-IDE-MySQL.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 BME280 Arduino IDE MySQL\" class=\"wp-image-86000\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-BME280-Arduino-IDE-MySQL.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/ESP32-BME280-Arduino-IDE-MySQL.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>If everything is correct, this is what you should see in your Arduino IDE Serial Monitor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"504\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Arduino-IDE-Serial-Monitor-ESP32-ESP8266-Weather-Station.png?resize=1200%2C504&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Arduino IDE Serial Monitor ESP32 ESP8266 Weather Station\" class=\"wp-image-92158\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Arduino-IDE-Serial-Monitor-ESP32-ESP8266-Weather-Station.png?w=1228&amp;quality=100&amp;strip=all&amp;ssl=1 1228w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Arduino-IDE-Serial-Monitor-ESP32-ESP8266-Weather-Station.png?resize=300%2C126&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Arduino-IDE-Serial-Monitor-ESP32-ESP8266-Weather-Station.png?resize=1024%2C430&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/Arduino-IDE-Serial-Monitor-ESP32-ESP8266-Weather-Station.png?resize=768%2C323&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p>If you open your domain name in this URL path:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;example.com\/esp-weather-station.php<\/code><\/pre>\n\n\n\n<p>You should see the latest 20 readings stored in your database. There are two gauges that show the latest temperature and humidity readings, and a timestamp.<\/p>\n\n\n\n<p>Refresh the web page to see the latest readings:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1021\" height=\"920\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cloud-weather-station-esp32-esp8266.png?resize=1021%2C920&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Weather Station Data Example Temperature Humidity Gauges\" class=\"wp-image-129670\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cloud-weather-station-esp32-esp8266.png?w=1021&amp;quality=100&amp;strip=all&amp;ssl=1 1021w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cloud-weather-station-esp32-esp8266.png?resize=300%2C270&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/cloud-weather-station-esp32-esp8266.png?resize=768%2C692&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1021px) 100vw, 1021px\" \/><\/figure><\/div>\n\n\n<p>There&#8217;s a field where you can type the number of readings to visualize, as well as the number of readings for these statistics: minimum, maximum, and average. By default, it\u2019s set to 20. For example, if you type 30 and press the update button, you\u2019ll see that your web page updates and recalculates all the values.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"135\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/input-field-esp32-esp8266-weather-station.png?resize=561%2C135&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"input field esp32 esp8266 weather station\" class=\"wp-image-92191\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/input-field-esp32-esp8266-weather-station.png?w=561&amp;quality=100&amp;strip=all&amp;ssl=1 561w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/input-field-esp32-esp8266-weather-station.png?resize=300%2C72&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure><\/div>\n\n\n<p>The web page is also mobile responsive, so you can use any device to access it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Weather-Station-Data-Example-Temperature-Humidity-Gauges-mobile-responsive-smartphone.jpg?resize=428%2C621&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 Weather Station Data mobile responsive web page smartphone\" class=\"wp-image-92187\" width=\"428\" height=\"621\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Weather-Station-Data-Example-Temperature-Humidity-Gauges-mobile-responsive-smartphone.jpg?w=479&amp;quality=100&amp;strip=all&amp;ssl=1 479w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Weather-Station-Data-Example-Temperature-Humidity-Gauges-mobile-responsive-smartphone.jpg?resize=207%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 207w\" sizes=\"(max-width: 428px) 100vw, 428px\" \/><\/figure><\/div>\n\n\n<p>You can also go to phpMyAdmin to manage the data stored in your <span class=\"rnthl rntliteral\">SensorData<\/span> table. You can delete it, edit, etc&#8230;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/esp8266-mysql-database-phpmyadmin-arduino-demonstration.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"707\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/esp8266-mysql-database-phpmyadmin-arduino-demonstration.png?resize=693%2C707&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 View Sensor Readings PHPMyAdmin SQL Database\" class=\"wp-image-129591\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/esp8266-mysql-database-phpmyadmin-arduino-demonstration.png?w=693&amp;quality=100&amp;strip=all&amp;ssl=1 693w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/06\/esp8266-mysql-database-phpmyadmin-arduino-demonstration.png?resize=294%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 294w\" sizes=\"(max-width: 693px) 100vw, 693px\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial you&#8217;ve learned how to publish sensor data into a database in your own server domain that you can access from anywhere in the world. This requires that you have your own <a rel=\"noreferrer noopener\" aria-label=\"server and domain name (opens in a new tab)\" href=\"https:\/\/randomnerdtutorials.com\/bluehost\" target=\"_blank\">server and domain name<\/a> (alternatively, you can use a <a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-raspberry-pi-lamp-server\/\">Raspberry Pi LAMP Server for local access<\/a>).<\/p>\n\n\n\n<p>I encourage you to change the web page appearance, add more features (<a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-send-email-notification\/\">like email notifications<\/a>), publish data from different sensors, use multiple ESP boards, and much more.<\/p>\n\n\n\n<p><strong>You might also like reading:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-send-email-notification\/\">ESP32\/ESP8266 Send Email Notification using PHP Script<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/visualize-esp32-esp8266-sensor-readings-from-anywhere\/\">Visualize Your Sensor Readings from Anywhere in the World (ESP32\/ESP8266 + MySQL + PHP) using Charts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-relay-module-ac-web-server\/\">ESP32 Relay Module Web Server<\/a><\/li>\n<\/ul>\n\n\n\n<p>Learn more about the ESP32 and ESP8266 with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\" title=\"\">Home Automation using ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\">Build Web Servers with ESP32 and ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/firebase-esp32-esp8266-ebook\/\">Firebase Web App with ESP32 and ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/smart-home-ebook\/\">SMART HOME with Raspberry Pi, ESP32, and ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">Free ESP32 Projects and Tutorials\u2026<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\" title=\"\">Free ESP8266 Projects and Tutorials&#8230;<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thank you for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Build a cloud weather station dashboard to visualize your ESP32 or ESP8266 sensor readings from anywhere in the world. You&#8217;ll visualize your sensor data displayed on gauges and on a &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"DIY Cloud Weather Station with ESP32\/ESP8266 (MySQL Database and PHP)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/cloud-weather-station-esp32-esp8266\/#more-92139\" aria-label=\"Read more about DIY Cloud Weather Station with ESP32\/ESP8266 (MySQL Database and PHP)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":129677,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[281,276,277,299,264],"tags":[],"class_list":["post-92139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-project","category-esp32","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/12\/ESP32-ESP8266-Cloud-Weather-Station-PHP.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/92139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=92139"}],"version-history":[{"count":9,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/92139\/revisions"}],"predecessor-version":[{"id":129703,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/92139\/revisions\/129703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/129677"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=92139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=92139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=92139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}