DIY Cloud Weather Station menggunakan DHT11, ESP32, dan PHP MYSQL
Tujuan:
Membangun sistem monitoring cuaca sederhana menggunakan ESP32/ESP8266 yang dapat menyimpan data suhu dan kelembapan ke database MySQL pada server lokal (XAMPP) dan menampilkan data dalam bentuk tabel dan grafik.
Alat dan Bahan
- Hardware:
- ESP32 atau ESP8266.
- Sensor DHT11.
- Kabel jumper.
- Breadboard.
- Software:
- Arduino IDE.
- XAMPP (untuk Apache dan MySQL).
- Browser (untuk mengakses halaman PHP).
Langkah Kerja
Ads Jadwal Training bisaioti Offline
| No | Materi | Tanggal | Waktu | Harga | Lokasi | View | Action |
|---|---|---|---|---|---|---|---|
| 1 | IOT PLC SCADA Siemens | 7-8 Juni 2025 | 08.00 - 16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 2 | IOT PLC SCADA Omron | 14 - 15 Juni 2025 | 08.00 - 16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 3 | IOT PLC SCADA Schneider | 21-22 Juni 2025 | 08.00 -16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 4 | IOT PLC SCADA Allen Bradley | 28-29 Juni 2025 | 08.00-16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
Bagian 1: Persiapan Server
- Instalasi XAMPP:
- Download dan instal XAMPP.
- Aktifkan Apache dan MySQL melalui kontrol panel XAMPP.
- Buka http://localhost/phpmyadmin dan buat database bernama weather_station.
- Buat Tabel MySQL: Jalankan query berikut di phpMyAdmin:
CREATE TABLE SensorData ( Â Â Â id INT AUTO_INCREMENT PRIMARY KEY, Â Â Â sensor VARCHAR(50), Â Â Â location VARCHAR(50), Â Â Â temperature FLOAT, Â Â Â humidity FLOAT, Â Â Â reading_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP );
Bagian 2: Membuat File PHP
- File PHP untuk menerima data:
Buat file esp-post-data.php di folder htdocs, isi dengan skrip untuk menerima data dari ESP. - File PHP untuk menampilkan data:
Buat file display-data.php untuk membaca data dari database dan menampilkan dalam tabel atau grafik.
Bagian 3: Pemrograman ESP32/ESP8266
- Library:
- Tambahkan library DHT di Arduino IDE: Adafruit_Sensor dan DHT.
- Kode ESP: Gunakan kode berikut (modifikasi URL ke http://localhost/esp-post-data.php):
#include <WiFi.h>
#include <HTTPClient.h>
#include <DHT.h>
const char* ssid = "Nama_WiFi";
const char* password = "Password_WiFi";
const char* serverName = "http://192.168.1.x/esp-post-data.php";
#define DHTPIN 4 // Pin DHT11
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
void setup() {
   WiFi.begin(ssid, password);
   while (WiFi.status() != WL_CONNECTED) delay(1000);
   dht.begin();
}
void loop() {
   if (WiFi.status() == WL_CONNECTED) {
       HTTPClient http;
       http.begin(serverName);
       http.addHeader("Content-Type", "application/x-www-form-urlencoded");
       float temp = dht.readTemperature();
       float hum = dht.readHumidity();
       String postData = "temperature=" + String(temp) + "&humidity=" + String(hum);
       http.POST(postData);
       http.end();
   }
   delay(60000);
}
File esp-post-data.php (Untuk Menerima Data)
Buat file dengan nama esp-post-data.php di folder htdocs XAMPP. Isi file dengan skrip berikut untuk menerima data dari ESP32/ESP8266 dan menyimpannya ke database MySQL:
<?php
$servername = "localhost";
$username = "root";
$password = ""; // Password MySQL Anda
$dbname = "weather_station";
// Membuat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);
// Cek koneksi
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Periksa apakah data diterima
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$temperature = $_POST['temperature'];
$humidity = $_POST['humidity'];
$sql = "INSERT INTO SensorData (sensor, location, temperature, humidity)
VALUES ('DHT11', 'Lab IoT', '$temperature', '$humidity')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
} else {
echo "No data received!";
}
$conn->close();
?>
File display-data.php (Untuk Menampilkan Data)
Buat file dengan nama display-data.php untuk membaca data dari database dan menampilkannya dalam tabel serta grafik:
<?php
$servername = "localhost";
$username = "root";
$password = ""; // Password MySQL Anda
$dbname = "weather_station";
// Membuat koneksi
$conn = new mysqli($servername, $username, $password, $dbname);
// Cek koneksi
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Membaca data dari database
$sql = "SELECT * FROM SensorData ORDER BY reading_time DESC LIMIT 20";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Station Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Weather Station Data</h1>
<table border="1">
<tr>
<th>ID</th>
<th>Sensor</th>
<th>Location</th>
<th>Temperature (°C)</th>
<th>Humidity (%)</th>
<th>Timestamp</th>
</tr>
<?php
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr>
<td>{$row['id']}</td>
<td>{$row['sensor']}</td>
<td>{$row['location']}</td>
<td>{$row['temperature']}</td>
<td>{$row['humidity']}</td>
<td>{$row['reading_time']}</td>
</tr>";
}
} else {
echo "<tr><td colspan='6'>No data available</td></tr>";
}
?>
</table>
<h2>Temperature and Humidity Chart</h2>
<canvas id="chart"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const data = {
labels: [
<?php
$result->data_seek(0); // Reset pointer
while ($row = $result->fetch_assoc()) {
echo "'{$row['reading_time']}',";
}
?>
],
datasets: [
{
label: 'Temperature (°C)',
data: [
<?php
$result->data_seek(0); // Reset pointer
while ($row = $result->fetch_assoc()) {
echo "{$row['temperature']},";
}
?>
],
borderColor: 'red',
fill: false
},
{
label: 'Humidity (%)',
data: [
<?php
$result->data_seek(0); // Reset pointer
while ($row = $result->fetch_assoc()) {
echo "{$row['humidity']},";
}
?>
],
