Send Sensor Data to a Web Server via ESP8266

Difficulty Level: Intermediate

This project demonstrates how to send sensor data to a web server using an ESP8266, and display the data on a web page. It's ideal for IoT projects that require remote monitoring of environmental conditions.

Components Required

• 1 x ESP8266 (ESP-01 or NodeMCU)
• 1 x DHT11 or DHT22 Temperature and Humidity Sensor
• Jumper wires
• Breadboard

Wiring Diagram

Follow these steps to connect the components:

For the DHT Sensor

• Connect the VCC pin of the DHT sensor to the 3.3V pin on the ESP8266.
• Connect the GND pin of the DHT sensor to the GND pin on the ESP8266.
• Connect the DATA pin to GPIO2 (D4 on NodeMCU) on the ESP8266.

Code Explanation

The ESP8266 collects temperature and humidity data from the DHT sensor and sends it to a web server. The web server receives the data and displays it on a browser in real-time.

Libraries Used

• ESP8266WiFi.h: For Wi-Fi connectivity on the ESP8266.
• DHT.h: For interfacing with the DHT11/DHT22 sensor.

Key Functions

• WiFi.begin(): Connects the ESP8266 to a Wi-Fi network using SSID and password.
• client.connect(): Establishes a TCP connection with the web server.
• client.print(): Sends data (sensor readings) to the web server.
• dht.readTemperature() and dht.readHumidity(): Reads temperature and humidity data from the DHT sensor.

Arduino Code

Below is the code to send sensor data to the web server:

#include 
#include 

#define DHTPIN 2  // Pin where the DHT sensor is connected
#define DHTTYPE DHT11  // DHT 11 or DHT22

DHT dht(DHTPIN, DHTTYPE);

// Replace with your network credentials
const char* ssid = "Your_SSID";
const char* password = "Your_PASSWORD";

// Replace with your server address
const char* server = "your_server_ip";  // Could also be a domain like "example.com"

WiFiClient client;

void setup() {
  Serial.begin(115200);
  dht.begin();
  
  // Connect to Wi-Fi network
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");
}

void loop() {
  float temp = dht.readTemperature();
  float hum = dht.readHumidity();
  
  if (isnan(temp) || isnan(hum)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }
  
  // If connected to WiFi, send data to the server
  if (client.connect(server, 80)) {
    Serial.println("Connected to server");
    String postStr = "temp=" + String(temp) + "&hum=" + String(hum);
    
    client.println("POST /post-data HTTP/1.1");
    client.println("Host: " + String(server));
    client.println("Content-Type: application/x-www-form-urlencoded");
    client.print("Content-Length: ");
    client.println(postStr.length());
    client.println();
    client.println(postStr);
    
    client.stop();
    Serial.println("Data sent to server");
  } else {
    Serial.println("Connection to server failed");
  }
  
  delay(10000);  // Wait for 10 seconds before sending the next data
}
            

Server-Side Code (PHP)

The following PHP code will receive the data sent by the ESP8266 and display it on a web page:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $temp = $_POST['temp'];
    $hum = $_POST['hum'];
    
    echo "Temperature: " . $temp . " ℃<br>";
    echo "Humidity: " . $hum . " %<br>";
} else {
    echo "No data received!";
}
?>
            

Upload and Test

1. Upload the Arduino code to your ESP8266 using the Arduino IDE.
2. Ensure the server-side PHP script is hosted on a web server (Apache, Nginx, etc.).
3. Open the Serial Monitor in the Arduino IDE to check the Wi-Fi connection status and whether the data is being sent.
4. Access the PHP page on your server to see the temperature and humidity values displayed.

Conclusion

This project demonstrates how to send sensor data (temperature and humidity) from an ESP8266 to a web server and display the data on a web page. This can be used to build a remote monitoring system for various applications.