🌤️ DIY IoT Weather Station

Build a Professional Weather Monitoring System with ESP8266 & BME280

Complete Guide with Cloud Dashboard | Total Cost: ~$10-15

📖 What You’ll Build

In this comprehensive tutorial, you’ll create a complete IoT weather station that:

• ✅ Measures temperature, humidity, pressure, and altitude
• ✅ Sends data to your cloud server every 3 minutes
• ✅ Displays real-time data on a beautiful animated dashboard
• ✅ Stores all readings in a MySQL database
• ✅ Supports WiFi configuration via mobile (no code re-upload needed!)
• ✅ Shows historical charts and trends

📸

⚠️ Important Warning

The BME280 sensor operates at 3.3V ONLY. Do NOT connect to 5V or you will damage the sensor!

1 Setup Arduino IDE

1.1 Install Arduino IDE

Download and install from arduino.cc/en/software

1.2 Add ESP8266 Board Support

1. Open Arduino IDE
2. Go to File → Preferences
3. In “Additional Board Manager URLs”, add:
   http://arduino.esp8266.com/stable/package_esp8266com_index.json
4. Click OK
5. Go to Tools → Board → Boards Manager
6. Search for “ESP8266”
7. Install “esp8266 by ESP8266 Community”

1.3 Install Required Libraries

Go to Sketch → Include Library → Manage Libraries, then search and install:

• ✅ Adafruit BME280
• ✅ Adafruit Unified Sensor
• ✅ WiFiManager by tzapu

2 Upload Arduino Code

2.1 Get the Code

Download the complete Arduino sketch from GitHub:

2.2 Configure Settings

Open the sketch and modify these lines at the top:

// Change this to your server URL
char serverUrl[150] = "https://yourdomain.com/esp12e/receive_data.php";

// WiFi portal name (optional)
const char* apName = "Haneef_Weather_Setup";
const char* apPassword = "haneef123";

2.3 Upload to ESP8266

1. Connect ESP8266 to computer via USB
2. Select Tools → Board → NodeMCU 1.0 (ESP-12E Module)
3. Select Tools → Port → [Your COM Port]
4. Click Upload button (→)
5. Wait for “Done uploading” message
6. Open Serial Monitor (Ctrl+Shift+M)
7. Set baud rate to 115200

3 Setup Server (PHP & MySQL)

3.1 Create Database

1. Login to your cPanel
2. Go to MySQL Databases
3. Create a new database (e.g., weather_db)
4. Create a database user with password
5. Add user to database with ALL PRIVILEGES
6. Note down: database name, username, password

3.2 Upload PHP Files

Download all server files from GitHub:

Using File Manager or FTP:

1. Create folder: /public_html/esp12e/
2. Upload all 4 PHP files to this folder
3. Edit config.php with your database credentials

3.3 Edit config.php

Update these values with your database information:

define('DB_HOST', 'localhost');
define('DB_NAME', 'your_database_name');     // Change this
define('DB_USER', 'your_database_username'); // Change this
define('DB_PASS', 'your_database_password'); // Change this

3.4 Create Database Table

1. Visit: https://yourdomain.com/esp12e/setup_database.php
2. You should see: “✓ Table created successfully!”
3. IMPORTANT: Delete setup_database.php after setup (security!)

4 Upload Dashboard

Download the beautiful animated dashboard:

1. Upload index.html to /public_html/esp12e/
2. Visit: https://yourdomain.com/esp12e/
3. You should see the dashboard (may show “Loading…” until data arrives)

Dashboard Features:

• 🎨 Animated background particles
• 📊 Real-time charts (Chart.js)
• ⏱️ Timeline of recent readings
• 📈 Trend indicators (↑↓)
• 📱 Mobile responsive design
• 🔄 Auto-refresh every 3 minutes

📸

5 Configure WiFi (First Time)

After uploading code, the ESP8266 will create a WiFi hotspot:

Normal Operation

• ✅ Device automatically sends data every 3 minutes
• ✅ Dashboard auto-refreshes every 3 minutes
• ✅ All data is stored in database permanently
• ✅ View real-time readings and historical charts
• ✅ Access from anywhere via your domain

Monitoring Serial Output

Open Serial Monitor (115200 baud) to see:

========================================
       SENSOR READINGS
========================================
Temperature: 28.45 °C
Humidity:    65.20 %
Pressure:    1013.25 hPa
Altitude:    15.30 m
========================================

Sending data to server...
✓ Server Response Code: 200
✓ Data sent successfully!

Next update in 3 minutes...

Changing WiFi Network

Method 1: Press and hold reset button for 5 seconds

Method 2: Power off, add this line to code temporarily, upload, then remove:

wifiManager.resetSettings(); // Add in setup(), upload, then remove

Change Data Update Interval

Modify this line in Arduino code (value in milliseconds):

const long interval = 180000; // 3 minutes

// Examples:
// 60000   = 1 minute
// 300000  = 5 minutes
// 600000  = 10 minutes
// 1800000 = 30 minutes

Add Email Alerts

Add this to receive_data.php after data is saved:

// Send email if temperature exceeds threshold
if ($temperature > 35) {
  $subject = "High Temperature Alert!";
  $message = "Temperature: {$temperature}°C at " . date('Y-m-d H:i:s');
  mail('[email protected]', $subject, $message);
}

Clean Old Data Automatically

Add a cron job in cPanel to run this SQL monthly:

DELETE FROM sensor_data 
WHERE timestamp < DATE_SUB(NOW(), INTERVAL 30 DAY);

Export Data to CSV

Create export.php to download data:

<?php
require_once 'config.php';
header('Content-Type: text/csv');
header('Content-Disposition: attachment; filename="weather_data.csv"');

$conn = getDBConnection();
$stmt = $conn->query("SELECT * FROM sensor_data ORDER BY timestamp DESC");

echo "Timestamp,Temperature,Humidity,Pressure,Altitude\n";
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  echo "{$row['timestamp']},{$row['temperature']},{$row['humidity']},{$row['pressure']},{$row['altitude']}\n";
}
?>

Get All Files from GitHub

Complete project with Arduino code, PHP files, and dashboard

Don’t forget to star the repository if you find it helpful! ⭐

📁 Project Structure

weather-station/
├── arduino/
│   └── weather_station.ino       (ESP8266 code)
├── server/
│   ├── config.php                (Database config)
│   ├── receive_data.php          (Receive sensor data)
│   ├── get_data.php              (Retrieve data for dashboard)
│   └── setup_database.php        (Create table - delete after use)
├── dashboard/
│   └── index.html                (Beautiful web dashboard)
├── wiring/
│   └── circuit_diagram.png       (Wiring diagram)
└── README.md                     (Documentation)

🎉 Congratulations!

You’ve successfully built a professional IoT weather station!

This project demonstrates cloud connectivity, real-time data visualization, and modern web development. You can now expand it with additional sensors, features, and integrations!

⭐ If you found this helpful, please star the GitHub repository!

📢 Share this project with fellow makers and IoT enthusiasts!

Last Updated: May 28, 2026

Made with ❤️ by Haneef Puttur