Tutorial Instalasi

Overview

Apa itu IoT MQTT?

Sistem monitoring IoT real-time yang menghubungkan sensor fisik dengan dashboard web melalui protokol MQTT.

🌡️ Gauge Suhu

29.5

°C — Temperature

💧 Gauge Kelembaban

65.2

% — Humidity

📈 Grafik Sensor Real-time

🔌 Kontrol Relay

💡

Relay 1

ON

💡

Relay 2

OFF

📊

Gauge Real-time

Visualisasi suhu dan kelembaban dengan gauge animasi yang diperbarui langsung dari MQTT.

📈

Line Chart

Grafik historis 20 data terakhir dengan dual axis untuk suhu dan kelembaban.

🔌

Kontrol Relay

Toggle relay 2 channel dengan animasi lampu dan ring berputar saat aktif.

📡

MQTT WebSocket

Koneksi langsung dari browser ke broker MQTT publik tanpa server tambahan.

🗄️

Simpan ke MySQL

Setiap data sensor otomatis tersimpan ke database untuk histori jangka panjang.

⚙️

Setting Dinamis

Konfigurasi broker, topic, dan nama website langsung dari halaman setting.

Arsitektur

Alur Data Sistem

Bagaimana data mengalir dari sensor fisik ke dashboard web secara real-time.

🌡️

DHT11

Sensor Suhu & Hum

GPIO 4

🔲

ESP32

Publish JSON

TCP 1883

☁️

MQTT Broker

HiveMQ / EMQX

WSS 8884

🌐

Web Browser

Dashboard PHP

HTTP POST

🗄️

MySQL

Simpan Data

ℹ️

Catatan Penting: Browser menggunakan WSS (WebSocket Secure, port 8884) untuk koneksi MQTT, sedangkan ESP32 menggunakan TCP biasa (port 1883). Keduanya terhubung ke broker yang sama.

📤 ESP32 → Broker (Topic: iot/dht11)

🟡 JSON

{
  "temperature": 29.5,
  "humidity": 65.2,
  "relay1": 0,
  "relay2": 1
}

📥 Web → Broker (Topic: iot/relay)

🟡 JSON

{
  "relay1": 1,
  "relay2": 0
}

Persiapan

Yang Dibutuhkan

Pastikan semua komponen hardware dan software sudah tersedia sebelum memulai.

🔧 Hardware

ESP32 (DevKit v1 atau sejenisnya)
Mikrokontroler utama dengan WiFi built-in
Sensor DHT11
Sensor suhu & kelembaban, 3 atau 4 pin
Relay 2 Channel (5V, aktif LOW)
Modul relay untuk kontrol perangkat listrik
Kabel Jumper (Male-to-Female)
Untuk menghubungkan komponen ke ESP32
Breadboard (opsional)
Untuk prototyping yang lebih rapi
Kabel USB Micro/Type-C
Untuk upload program dan power ESP32

💻 Software

XAMPP (Apache + MySQL + PHP)
Download di apachefriends.org
Arduino IDE 2.x
Download di arduino.cc
ESP32 Board Package
Tambahkan via Board Manager di Arduino IDE
Library Arduino (4 library)
PubSubClient, DHT, Adafruit Sensor, ArduinoJson
Browser Modern
Chrome, Firefox, Edge (support WebSocket)
Koneksi Internet
Untuk akses broker MQTT publik

Instalasi

Instalasi Website

Ikuti langkah-langkah berikut secara berurutan untuk menginstal website IoT MQTT di XAMPP.

1

Install & Jalankan XAMPP

Download XAMPP dari apachefriends.org, install, lalu jalankan Apache dan MySQL dari XAMPP Control Panel.

XAMPP Control Panel

● Running Apache Port: 80, 443 START ✓

● Running MySQL Port: 3306 START ✓

⚠️

Pastikan port 80 (Apache) dan 3306 (MySQL) tidak digunakan aplikasi lain. Jika konflik, ubah port di XAMPP Config.

2

Letakkan File Project

Pastikan folder project sudah berada di direktori htdocs XAMPP.

📁 Path

C:\xampp\htdocs\sma28mqttweb\

Struktur folder yang harus ada:

📁 sma28mqttweb/ ├── 📁 api/ │ ├── sensor_data.php ← API data sensor │ ├── relay.php ← API kontrol relay │ └── settings.php ← API pengaturan ├── 📁 assets/css/ │ └── style.css ← Dark theme ├── 📁 assets/js/ │ └── dashboard.js ← MQTT + Chart + Gauge ├── 📁 config/ │ ├── database.php ← Koneksi MySQL │ └── settings.php ← Helper settings ├── 📁 esp32/ │ └── esp32_iot_mqtt.ino ← Kode Arduino ├── 📁 includes/ │ ├── header.php │ └── footer.php ├── dashboard.php ← Halaman utama ├── setting.php ← Halaman setting ├── install.php ← Installer DB └── index.php ← Redirect

3

Install Database Otomatis

Buka browser dan akses URL berikut untuk membuat database, tabel, dan data default secara otomatis:

🌐 URL

http://localhost/sma28mqttweb/install.php

📡 IoT MQTT — Installer

✅ Koneksi MySQL berhasil

✅ Database iot_mqtt siap

✅ Tabel sensor_data siap

✅ Tabel relay_status siap

✅ Tabel settings siap

✅ Default settings disimpan

✅ Sample data sensor ditambahkan

🎉 Instalasi selesai!

✅

Setelah instalasi berhasil, klik tombol "Buka Dashboard" atau akses langsung http://localhost/sma28mqttweb/

4

Verifikasi Instalasi

Buka dashboard dan pastikan semua komponen tampil dengan benar:

🌐 URL

http://localhost/sma28mqttweb/dashboard.php

Navbar tampil dengan status MQTT "Connecting..."
Gauge suhu dan kelembaban tampil (nilai 0 dulu)
Grafik line chart tampil dengan sample data
Dua relay card tampil dengan toggle switch
Setelah beberapa detik, status MQTT berubah jadi "Connected" (hijau)

ESP32

Setup ESP32

Konfigurasi Arduino IDE, install library, rangkai hardware, dan upload kode ke ESP32.

🔌 Diagram Wiring

ESP32 Pin Connections

── DHT11 Sensor ──

GPIO 4 → DHT11 DATA pin Signal data suhu & kelembaban

3.3V → DHT11 VCC pin Power supply sensor

GND → DHT11 GND pin Ground sensor

── Relay 2 Channel (Aktif LOW) ──

GPIO 26 → Relay Module IN1 Kontrol Relay 1 (LOW=ON)

GPIO 27 → Relay Module IN2 Kontrol Relay 2 (LOW=ON)

5V → Relay Module VCC Power relay (butuh 5V)

GND → Relay Module GND Ground relay

📐 Diagram Koneksi

        ┌─────────────────────────────────────────┐
        │              ESP32 DevKit               │
        │                                         │
        │  3.3V ──────────────────── VCC  [DHT11] │
        │  GND  ──────────────────── GND  [DHT11] │
        │  GPIO4 ─────────────────── DATA [DHT11] │
        │                                         │
        │  5V   ──────────────────── VCC  [RELAY] │
        │  GND  ──────────────────── GND  [RELAY] │
        │  GPIO26 ────────────────── IN1  [RELAY] │
        │  GPIO27 ────────────────── IN2  [RELAY] │
        └─────────────────────────────────────────┘

  [RELAY] ──── COM1/NO1 ──── Beban Listrik 1 (Lampu/Pompa)
  [RELAY] ──── COM2/NO2 ──── Beban Listrik 2 (Lampu/Pompa)

📦 Install Library Arduino

💡

Buka Arduino IDE → menu Sketch → Include Library → Manage Libraries, lalu cari dan install 4 library berikut:

1

PubSubClient

by Nick O'Leary — Library MQTT untuk Arduino/ESP32

2

DHT sensor library

by Adafruit — Driver sensor DHT11/DHT22

3

Adafruit Unified Sensor

by Adafruit — Dependensi wajib untuk DHT library

4

ArduinoJson

by Benoit Blanchon — Parse & buat JSON payload

🔲 Tambah Board ESP32 ke Arduino IDE

1

Buka Preferences

Arduino IDE → File → Preferences (atau Ctrl+Comma)

2

Tambah Board Manager URL

Di field "Additional boards manager URLs", tambahkan:

🔗 URL

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

3

Install Board Package

Buka Tools → Board → Boards Manager, cari esp32, install package dari Espressif Systems.

4

Pilih Board

Setelah install, pilih Tools → Board → ESP32 Arduino → ESP32 Dev Module

📝 Konfigurasi Kode ESP32

Buka file esp32/esp32_iot_mqtt.ino, ubah bagian berikut sesuai jaringan Anda:

⚡ Arduino C++

// ── WiFi ─────────────────────────────────────────
const char* WIFI_SSID     = "NAMA_WIFI_ANDA";    // ← Ganti ini
const char* WIFI_PASSWORD = "PASSWORD_WIFI";     // ← Ganti ini

// ── MQTT Broker ──────────────────────────────────
const char* MQTT_BROKER   = "broker.hivemq.com"; // Broker publik
const int   MQTT_PORT     = 1883;               // TCP port ESP32
const char* CLIENT_ID     = "esp32_iot_001";    // ID unik

// ── Topics ───────────────────────────────────────
const char* TOPIC_SENSOR  = "iot/dht11";        // Publish sensor
const char* TOPIC_RELAY   = "iot/relay";        // Subscribe relay

// ── Interval Kirim Data ──────────────────────────
const unsigned long PUBLISH_INTERVAL = 5000;       // 5 detik

⚠️

Penting: Topic di ESP32 harus sama persis dengan topic yang diset di halaman Setting website. Default: iot/dht11 dan iot/relay.

⬆️ Upload ke ESP32

①

Hubungkan ESP32 ke PC

Gunakan kabel USB. Pastikan driver CH340/CP2102 sudah terinstall agar port COM terdeteksi.

②

Pilih Port COM

Arduino IDE → Tools → Port → pilih port COM yang muncul (misal COM3, COM5).

③

Upload Sketch

Klik tombol Upload (→) atau tekan Ctrl+U. Tunggu hingga muncul "Done uploading".

④

Monitor Serial

Buka Tools → Serial Monitor, set baud rate 115200. Lihat log koneksi WiFi dan MQTT.

📟 Output Serial Monitor (Normal)

📟 Serial Monitor — 115200 baud

=== IoT MQTT ESP32 ===
Connecting to WiFi: MyWiFi.....
WiFi OK! IP: 192.168.1.105
Connecting MQTT: broker.hivemq.com:1883
MQTT Connected!
Subscribed: iot/relay
Publish → iot/dht11 : {"temperature":29.5,"humidity":65.2,"relay1":0,"relay2":0}
Publish → iot/dht11 : {"temperature":29.8,"humidity":64.9,"relay1":0,"relay2":0}
Pesan masuk [iot/relay]: {"relay1":1,"relay2":0}
Relay1 → ON

MQTT

Konfigurasi MQTT

Atur broker MQTT melalui halaman Setting website. Mendukung broker publik gratis tanpa registrasi.

📡 Pengaturan MQTT Broker

MQTT Broker Host

broker.hivemq.com

Port (WSS)

8884

Topic Sensor

iot/dht11

Topic Relay

iot/relay

💾 Simpan Pengaturan

☁️ Daftar Broker MQTT Publik Gratis

Broker	Host	Port TCP (ESP32)	Port WSS (Browser)	Auth	Status
HiveMQ	`broker.hivemq.com`	`1883`	`8884`	Tidak	✓ Recommended
EMQX	`broker.emqx.io`	`1883`	`8084`	Tidak	✓ Aktif
Mosquitto	`test.mosquitto.org`	`1883`	`8081`	Tidak	✓ Aktif
HiveMQ Cloud	`*.hivemq.cloud`	`8883`	`8884`	Ya (TLS)	Free Tier

🌐 Browser (Web Dashboard)

Menggunakan WebSocket Secure (WSS)
Port default: 8884 (HiveMQ)
URL format: wss://broker:port/mqtt
Diatur di halaman Setting → Port WSS

🔲 ESP32 (Mikrokontroler)

Menggunakan TCP biasa
Port default: 1883
Diatur di kode Arduino: MQTT_PORT
Tidak perlu SSL untuk broker publik

⚠️

Perhatian Topic: Topic di website Setting dan di kode ESP32 harus identik (case-sensitive). Contoh: iot/dht11 ≠ IoT/DHT11.

Penggunaan

Cara Menggunakan Dashboard

Panduan lengkap menggunakan setiap fitur di halaman Dashboard dan Setting.

①

🌡️ Gauge Suhu & Kelembaban

Dua gauge animasi menampilkan nilai real-time. Jarum bergerak otomatis setiap ada data baru dari MQTT. Warna berubah sesuai zona: biru (normal) → kuning (sedang) → merah (tinggi).

②

📈 Grafik Line Chart

Menampilkan 20 data terakhir dengan dua garis: merah untuk suhu (axis kiri) dan biru untuk kelembaban (axis kanan). Data baru ditambahkan real-time dari MQTT, data lama otomatis digeser.

③

🔌 Kontrol Relay

Klik toggle switch untuk ON/OFF relay. Saat ON: ikon lampu menyala dengan efek glow, ring berputar, badge berubah hijau. Perintah dikirim ke ESP32 via MQTT dan disimpan ke database.

④

📡 Status MQTT

Indikator di pojok kanan navbar menunjukkan status koneksi: ● Connected (hijau berkedip), ● Error (merah), atau "Connecting..." (abu-abu).

①

🌐 Nama Website

Ubah nama yang tampil di navbar dan tab browser. Setelah simpan, halaman akan reload otomatis untuk menerapkan nama baru.

②

📡 Broker & Port

Isi host broker MQTT dan port WSS. Untuk broker publik tanpa auth, kosongkan field Username dan Password.

③

📨 Topic MQTT

Sesuaikan topic sensor dan relay dengan yang digunakan di kode ESP32. Perubahan langsung aktif setelah halaman di-reload.

④

💾 Simpan

Klik tombol "Simpan Pengaturan". Muncul notifikasi hijau jika berhasil. Halaman otomatis reload setelah 1.5 detik.

GET POST /sma28mqttweb/api/sensor_data.php

GET — Ambil data chart (20 terakhir)

🌐 URL

GET /api/sensor_data.php?limit=20
GET /api/sensor_data.php?latest=1

POST — Simpan data baru

🟡 JSON Body

{"temperature": 29.5, "humidity": 65.2}

GET POST /sma28mqttweb/api/relay.php

GET — Status relay saat ini

🟡 Response

{"relay1": 1, "relay2": 0}

POST — Update status relay

🟡 JSON Body

{"relay1": 1, "relay2": 0}

Troubleshoot

Pemecahan Masalah

Solusi untuk masalah yang paling sering ditemui saat instalasi dan penggunaan.

❌ MQTT Status tetap "Connecting..." tidak pernah Connected ▼

❌ install.php error: "Database connection failed" ▼

❌ ESP32 gagal konek WiFi / MQTT ▼

❌ DHT11 selalu baca "nan" atau nilai tidak valid ▼

❌ Relay tidak merespons perintah dari web ▼

❌ Halaman web tampil error 404 atau blank ▼

Database

Struktur Database

Tiga tabel MySQL yang digunakan untuk menyimpan data sensor, status relay, dan pengaturan.

TABLE sensor_data

Kolom	Tipe	Keterangan
`id`	INT AUTO_INCREMENT	Primary key
`temperature`	FLOAT	Suhu dalam °C dari DHT11
`humidity`	FLOAT	Kelembaban dalam % dari DHT11
`created_at`	TIMESTAMP	Waktu data diterima (auto)

TABLE relay_status

Kolom	Tipe	Keterangan
`id`	INT AUTO_INCREMENT	Primary key
`relay1`	TINYINT(1)	Status relay 1: 0=OFF, 1=ON
`relay2`	TINYINT(1)	Status relay 2: 0=OFF, 1=ON
`updated_at`	TIMESTAMP	Waktu update terakhir (auto)

TABLE settings

setting_key	Default Value	Keterangan
`site_name`	IoT MQTT	Nama website di navbar
`mqtt_broker`	broker.hivemq.com	Host broker MQTT
`mqtt_port`	8884	Port WSS untuk browser
`mqtt_username`	(kosong)	Username broker (opsional)
`mqtt_password`	(kosong)	Password broker (opsional)
`mqtt_topic_sensor`	iot/dht11	Topic data sensor
`mqtt_topic_relay`	iot/relay	Topic kontrol relay
`mqtt_client_id`	iot_web_client	Client ID MQTT web

IoT MQTTTutorial

Apa itu IoT MQTT?

Gauge Real-time

Line Chart

Kontrol Relay

MQTT WebSocket

Simpan ke MySQL

Setting Dinamis

Alur Data Sistem

Yang Dibutuhkan

🔧 Hardware

💻 Software

Instalasi Website

Install & Jalankan XAMPP

Letakkan File Project

Install Database Otomatis

Verifikasi Instalasi

Setup ESP32

🔌 Diagram Wiring

📦 Install Library Arduino

🔲 Tambah Board ESP32 ke Arduino IDE

Buka Preferences

Tambah Board Manager URL

Install Board Package

Pilih Board

📝 Konfigurasi Kode ESP32

⬆️ Upload ke ESP32

Hubungkan ESP32 ke PC

Pilih Port COM

Upload Sketch

Monitor Serial

Konfigurasi MQTT

☁️ Daftar Broker MQTT Publik Gratis

Cara Menggunakan Dashboard

🌡️ Gauge Suhu & Kelembaban

📈 Grafik Line Chart

🔌 Kontrol Relay

📡 Status MQTT

🌐 Nama Website

📡 Broker & Port

📨 Topic MQTT

💾 Simpan

Pemecahan Masalah

Struktur Database

TABLE sensor_data

TABLE relay_status

TABLE settings

Checklist Lengkap

💻 Setup Web Server

🔲 Setup ESP32

IoT MQTT
Tutorial