Create A Local ESP32 IoT Dashboard Using PHP And MYSQL

Building an ESP32 IoT Dashboard allows you to visualize real-time sensor data locally without using cloud services. This guide shows you how to collect data from your ESP32, store it in a MySQL database using XAMPP, and display it on a simple web dashboard using PHP and Chart.js.

What is an ESP32 IoT Dashboard?

An ESP32 IoT Dashboard is a web-based interface that allows you to view live sensor data from your ESP32 microcontroller. It is commonly used in smart home and industrial IoT applications to track variables such as temperature, humidity, or motion in real time.

Tools and Components Required

ESP32 Development Board
DHT11 Temperature/Humidity Sensor
Wi-Fi Network
XAMPP Server Installed on Windows
Arduino IDE Installed
Chart.js and PHP for Dashboard Visualization

Step 1: Set Up XAMPP and MySQL Database

1. Start XAMPP

Launch the XAMPP Control Panel
Start Apache and MySQL

2. Create MySQL Database and Table

Open your browser and go to http://localhost/phpmyadmin
Click on Databases, create a new one named esp_data
Click on the new database, then SQL.

Then click on SQL, and run this SQL command:

CREATE TABLE sensor_data (
  id INT AUTO_INCREMENT PRIMARY KEY,
  temperature FLOAT,
  humidity FLOAT,
  reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

As shown:

This table will store temperature and humidity values with a timestamp.

Step 2: Create PHP Script to Insert ESP32 Data in MySQL

Navigate to C:\xampp\htdocs\ and create a new file called insert.php. Add the following code:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "esp_data";

$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$temperature = $_GET['temperature'];
$humidity = $_GET['humidity'];

$sql = "INSERT INTO sensor_data (temperature, humidity) VALUES ('$temperature', '$humidity')";

if ($conn->query($sql) === TRUE) {
  echo "Data inserted successfully";
} else {
  echo "Error: " . $conn->error;
}

$conn->close();
?>

This script receives temperature and humidity from the ESP32 and inserts them into the database.

STEP3: Create the ESP32 IoT Dashboard

To visualize your data, create a file called dashboard.php in the same C:\xampp\htdocs\ folder:

<!DOCTYPE html>
<html>
<head>
  <title>ESP32 IoT Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <h2>ESP32 IoT Dashboard - Real-time Data</h2>
  <canvas id="sensorChart" width="400" height="200"></canvas>

  <?php
  $conn = new mysqli("localhost", "root", "", "esp_data");
  $sql = "SELECT * FROM sensor_data ORDER BY reading_time DESC LIMIT 20";
  $result = $conn->query($sql);

  $temperature = [];
  $humidity = [];
  $timestamps = [];

  while ($row = $result->fetch_assoc()) {
    $temperature[] = $row['temperature'];
    $humidity[] = $row['humidity'];
    $timestamps[] = $row['reading_time'];
  }

  $conn->close();
  ?>

  <script>
    const ctx = document.getElementById('sensorChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: <?php echo json_encode(array_reverse($timestamps)); ?>,
        datasets: [{
            label: 'Temperature (°C)',
            data: <?php echo json_encode(array_reverse($temperature)); ?>,
            borderColor: 'red',
            fill: false
          },
          {
            label: 'Humidity (%)',
            data: <?php echo json_encode(array_reverse($humidity)); ?>,
            borderColor: 'blue',
            fill: false
          }
        ]
      }
    });
  </script>
</body>
</html>

Step 4: Write ESP32 Code to Send Data

Open Arduino IDE and upload the following sketch to your ESP32.

//ESP32 IoT Dashboard
#include <WiFi.h>
#include <HTTPClient.h>
#include "DHT.h"

#define DHTPIN 27         // Connect DHT11 data pin to GPIO 27 (change if needed)
#define DHTTYPE DHT11     // Define sensor type DHT11

DHT dht(DHTPIN, DHTTYPE);

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

String serverName = "http://192.168.1.100/insert.php"; // Replace with your PC's IP

void setup() {
  Serial.begin(115200);
  dht.begin();  // Initialize DHT sensor
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }

  Serial.println("Connected to WiFi");
}

void loop() {
  float temperature = dht.readTemperature();  // Celsius
  float humidity = dht.readHumidity();

  // Check if readings are valid
  if (isnan(temperature) || isnan(humidity)) {
    Serial.println("Failed to read from DHT sensor!");
    delay(5000);
    return;
  }
   // Print values to Serial Monitor
  Serial.print("Temperature: ");
  Serial.print(temperature);
  Serial.println(" °C");
  
  Serial.print("Humidity: ");
  Serial.print(humidity);
  Serial.println(" %");

  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;

      String postData = "temperature=" + String(temperature, 2) + "&humidity=" + String(humidity, 2);
 http.begin(serverName+"?"+postData);
    int responseCode = http.POST("");

    if (responseCode > 0) {
      String response = http.getString();
      Serial.println("Server Response: " + response);
    } else {
      Serial.println("Error sending data to server.");
    }

    http.end();
  } else {
    Serial.println("WiFi not connected");
  }

  delay(10000); // Wait 10 seconds before sending again
}
//ESP32 IoT Dashboard

Replace 192.168.1.100 with your actual PC IP address (use ipconfig in CMD to find it). Add your SSID and Password in code.

Setting Up the Arduino IDE

1. Installing ESP32 boards in arduino IDE

Before starting, make sure you have the ESP32 boards installed in your Arduino IDE:

How To Install ESP32 And ESP8266 Boards In Arduino IDE (Step-by-Step Guide) – ArduinoYard

2. Install Required Libraries

Make sure you have the following libraries installed in your Arduino IDE:

In Arduino IDE, Go to Sketch > Include Library > Manage Libraries.

Search for DHT Sensor Library (for reading data from the DHT11).

WIRING DIAGRAM

Connect the VCC pin of the DHT11 to the VIN pin of the ESP32.
Connect the GND pin of the DHT11 to the GND pin of the ESP32.
Connect the Data pin of the DHT11 to GPIO 27 of the ESP32.

Step 5: Test and View ESP32 Data in MySQL

Upload the code in your ESP32 and open the Serial Monitor
Ensure it connects to Wi-Fi and sends a POST request every 10 seconds
Visit http://localhost/phpmyadmin, open esp_data database
Check the sensor_data table to see values being inserted in real-time

Now your ESP32 data in MySQL is being stored successfully using XAMPP.

Serial Monitor:

ESP32 Data in MySQL Table:

Final Step: View Your ESP32 IoT Dashboard

Make sure Apache and MySQL are running in XAMPP.
Upload the ESP32 sketch and open Serial Monitor to verify data sending.
Open your browser and go to http://localhost/dashboard.php

You should now see a live ESP32 IoT Dashboard showing temperature and humidity values in real-time!

Troubleshooting Tips

Error connecting to server: Double-check the server IP and that Apache is running
No data in database: Check for SQL or PHP errors in the script
ESP32 can’t connect to Wi-Fi: Ensure your SSID/password are correct
Firewall blocking requests: Allow Apache and MySQL through Windows Firewall

Conclusion

In this project, you’ve learned how to create a local ESP32 IoT Dashboard using:

ESP32 + DHT11 for data collection
PHP + MySQL (via XAMPP) for data storage
Chart.js for data visualization

This local solution is ideal for private networks, education, or prototyping before deploying to the cloud.

incase you missed the previous parts:

How To Install XAMPP Server On Windows: A Step-by-Step Guide – ArduinoYard

How To Connect ESP32 With XAMPP

Storing ESP32 Data In MySQL Database Using XAMPP: An Easy Guide – ArduinoYard

Create a local ESP32 IoT Dashboard Using PHP and MYSQL