Langkah Demi Langkah | BETA VERSION

Internet of Things dengan ESP8266

Arduino, MQTT JS, Web PHP
Bootstrap dan MySQL.

This cover has been designed using assets from Freepik.com

Penyusun:

Ajang Rahmat
Daftar Isi
Daftar Isi..................................................................................................................... 1
Profil Penyusun......................................................................................................... 2
A. Persiapan Sebelum Tempur................................................................................. 3
A.1. Penginstalan Arduino IDE...............................................................................3
A.2. Add Library Board ESP8266 pada Arduino IDE............................................. 3
A.3. Penginstalan XAMPP......................................................................................4
A.4. Penginstalan Sublime Code Editor................................................................. 5
Komponen Yang Digunakan................................................................................................. 6
B. Merangkai dan Testing Hardware........................................................................ 7
B.1. Membaca Nilai Sensor Cahaya LDR.............................................................. 7
B.2. Menyalakan Lampu Melalui Relay.................................................................. 9
B.3. Menghubungkan ke WiFi & MQTT Broker.................................................... 10
C. Final Rangkaian dan Final Program.................................................................. 13
C.1. Final Rangkaian Alat.....................................................................................13
C.2. Final Program Arduino..................................................................................13
C.2.1. Menambahkan Library:.........................................................................13
C.2.2. Konfigurasi WiFi dan MQTT:................................................................ 14
C.2.3. Membuat Object, Konfigurasi Pin dan Variabel Millis:.......................... 15
C.2.4. Fungsi Koneksi WiFi.............................................................................15
C.2.5. Fungsi Koneksi MQTT..........................................................................16
C.2.6. Fungsi Menerima Pesan MQTT........................................................... 17
C.2.7. Fungsi Membaca dan Mengirim Data Sensor...................................... 18
C.2.8. Konfigurasi Awal...................................................................................18
C.2.9. Loop Utama..........................................................................................19
D. Real Time Controlling Dan Monitoring Web..................................................... 20
D.1. Buat dan Buka Proyek Baru......................................................................... 20
D.2. Buat File mqtt-library.js................................................................................. 21
D.3. Buat File scripts.js.........................................................................................21
D.4. Buat File index.php....................................................................................... 23
E. Mari Lebih Kreatif Membuat Desain Web.......................................................... 25
Tunggu Versi Full Version…................................................................................................26

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 1
Profil Penyusun
Masih bingung mau diisi apa, ya udah barangkali mau mutualan di Media Sosial bisa
coba follow aja:

● Instagram : https://instagram.com/ajangrahmat
● Facebook : https://www.facebook.com/ajangrahmat
● YouTube : https://www.youtube.com/@ProgrammerSehat
● TikTok : https://www.tiktok.com/@programmersehat

Kalo ada pembahasan yang lebih serius bisa kontak langsung:

● Email : [email protected]
● WhatsApp : 0812-8793-1296

Tetap ilmu padi abang kuh 🙂

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 2
A. Persiapan Sebelum Tempur

A.1. Penginstalan Arduino IDE

Terdapat 2 pilihan Arduino IDE, sekarang ada versi 2 juga.

Akan tetapi untuk pemula saya rekomendasikan versi 1 aja, tepatnya Arduino IDE
versi 1.8.19, silahkan download melalui link berikut:

https://downloads.arduino.cc/arduino-1.8.19-windows.exe

Cara Instalasi:

1. Buka berkas instalasi yang telah Kamu unduh (.exe).

2. Ikuti petunjuk instalasi yang muncul di layar. Biasanya, Kamu hanya perlu
mengklik "Next" atau "Install" beberapa kali.
3. Setelah instalasi selesai, Arduino IDE sudah siap digunakan.

A.2. Add Library Board ESP8266 pada Arduino IDE

1. Buka Arduino IDE:

Buka Arduino IDE yang sudah Kamu instal di komputer Kamu.

2. Buka Preferences:
Pergi ke menu "File" di Arduino IDE dan pilih "Preferences".

3. Tambahkan URL Board Manager ESP8266:

Temukan bidang "Additional Board Manager URLs" di jendela preferensi.
Jika Kamu belum menambahkan URL untuk ESP8266, tambahkan URL
berikut ini:
http://arduino.esp8266.com/stable/package_esp8266com_index.json
Jika Kamu sudah memiliki URL lain, pisahkan dengan koma.
Klik tombol "OK" untuk menutup jendela preferensi.

4. Buka Board Manager:

Pergi ke menu "Tools" > "Board" > "Boards Manager...".

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 3
 5. Instalasi ESP8266 Core:
Di kotak pencarian di pojok kanan atas, ketik "esp8266".
Kamu akan melihat "esp8266 by ESP8266 Community".
Sebelum Install Pilih Versi 2.7.4
Klik pada tombol "Install" di sebelahnya.
Tunggu sampai proses instalasi selesai.

6. Pilih Board ESP8266:

Setelah instalasi selesai, pergi ke menu "Tools" > "Board".
Pilih "ESP8266 Boards" dan kemudian pilih NodeMCU 1.0 (ESP-12E
Module).

A.3. Penginstalan XAMPP

Silahkan download melalui link berikut:

https://sourceforge.net/projects/xampp/files/XAMPP%20Windo
ws/8.1.25/xampp-windows-x64-8.1.25-0-VS16-installer.exe

Cara Instalasi:

1. Buka file installer yang telah diunduh (.exe).

Jika muncul peringatan seperti ini, klik OK saja.

2. Ikuti petunjuk instalasi yang muncul. Pilih komponen yang ingin Kamu instal
(biasanya Apache, MySQL, PHP, dan phpMyAdmin sudah dipilih secara
default).

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 4
 3. Pilih lokasi instalasi (Biarkan saja di Data C) dan tunggu hingga proses
instalasi selesai.
4. Setelah instalasi selesai, XAMPP akan diinstal di direktori yang Kamu
pilih. Pastikan untuk mengingat direktori ini karena Kamu akan
menggunakannya untuk mengakses file konfigurasi dan data proyek Kamu.

A.4. Penginstalan Sublime Code Editor

Silahkan download melalui link berikut:

https://www.sublimetext.com/download_thanks?target=win-x64

Cara instalasi:

1. Klik dua kali file .exe yang telah diunduh.

2. Ikuti instruksi di layar, terima perjanjian lisensi jika perlu.
3. Pilih lokasi instalasi (Biarin Aja Gak Usah Diubah) dan klik "Berikutnya."
4. Secara opsional, centang kotak untuk membuat pintasan di menu Start dan
klik "Instal."
5. Klik "Selesai" untuk menyelesaikan instalasi.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 5
Komponen Yang Digunakan
Berikut adalah komponen yang digunakan pada praktikum, kamu bisa beli sendiri di
marketplace atau bisa beli di tokopedia kami:

● NodeMCU Amica ESP8266

● ESP Expansion Shield +Relay

2 komponen tersebut kalau mau beli di Kelas Robot, bisa lewat link berikut:
https://www.tokopedia.com/kelasrobot/nodemcu-amica-shield-nodemcu-amica
-kelas-robot-v1-amica

● Module LDR Sensor

Komponen tersebut kalo mau beli di Kelas Robot, bisa lewat link berikut:
https://www.tokopedia.com/kelasrobot/ldr-sensor-cahaya-analog-sensor-for-ar
duino

● Kabel Jumper Female - Female

● Lampu 220 Volt
● Fitting Lampu 220 Volt
● Kabel AC 220 Volt
● Steker Colokan Listrik

Komponen yang lampu, fitting, kabel dan steker bisa beli di toko listrik terdekat aja
ya, cukup mudah dicari dan didapatkan.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 6
B. Merangkai dan Testing Hardware

B.1. Membaca Nilai Sensor Cahaya LDR

Silahkan pasang Module LDR pada Nodemcu, seperti gambar berikut:

Module LDR NodeMCU

VCC 5V
I/O A0
GND GND

Selanjutnya silahkan buka Arduino IDE, kemudian gunakan coding berikut:

byte pinSensor = A0;

int nilaiSensor = 0;
int nilaiPersen = 0;

void setup() {
Serial.begin(115200);
}

void loop() {
nilaiSensor = analogRead(pinSensor);

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 7
 nilaiPersen = map(nilaiSensor, 0, 1023, 0, 100);
Serial.print(nilaiSensor);
Serial.print(", ");
Serial.println(nilaiPersen);
delay(1000);
}

Kemudian sebelum Upload, jangan lupa untuk Pilih Board dan Port yang sesuai,
pada menu Tools.

Kemudian jika sudah Done Uploading, silahkan buka Serial Monitor.

Hasilnya seperti ini:

Catatan:

Jangan lupa untuk Baud Rate di set jadi 115200.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 8
B.2. Menyalakan Lampu Melalui Relay

Untuk rangkaian berikutnya, sebaiknya hati-hari karena kita akan membuat

rangkaian tegangan tinggi. Silahkan ikuti gambar berikut:

Silahkan gunakan coding dibawah ini:

byte relay = D5;

void setup() {
pinMode(relay, OUTPUT);
digitalWrite(relay, HIGH);
}

void loop() {
digitalWrite(relay, LOW);
delay(2000);
digitalWrite(relay, HIGH);
delay(3000);
}

Jika sudah di upload, hasilnya lampu akan menyala selama 2 detik kemudian mati
selama 3 detik dan akan berulang terus menerus.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 9
B.3. Menghubungkan ke WiFi & MQTT Broker

WiFi sudah tersedia pada Board NodeMCU ESP8266, artinya Kamu tidak perlu
merangkai apapun kali ini.

Akan tetapi wajib untuk menambahkan Library MQTT.

Silahkan Download terlebih dahulu library .ZIP melalui link berikut:

https://github.com/256dpi/arduino-mqtt/archive/refs/
heads/master.zip
Hasil download arduino-mqtt-master.zip tidak perlu di ekstrak, langsung
tambahkan saja ke Arduino IDE dengan cara:

1. Buka Arduino IDE: Buka Arduino IDE di komputer Kamu.

2. Buka Menu "Sketch": Di bagian atas IDE, Kamu akan melihat menu-bar. Klik
menu "Sketch".
3. Pilih "Include Library": Di dalam menu "Sketch", arahkan kursor ke "Include
Library".
4. Pilih "Add .ZIP Library": Setelah Kamu mengarahkan kursor ke "Include
Library", Kamu akan melihat opsi "Add .ZIP Library". Klik opsi ini.
5. Cari File ZIP: Sebuah jendela dialog akan muncul. Gunakan jendela dialog ini
untuk menelusuri dan memilih file ZIP library yang telah Kamu unduh
sebelumnya.
6. Klik "Open": Setelah Kamu menemukan file ZIP library yang tepat, klik
"Open".
7. Tunggu Proses Selesai: Arduino IDE akan mengimpor library dari file ZIP
yang Kamu pilih. Tunggu sampai proses ini selesai.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 10
Baik jika proses menambahkan Library ke Arduino IDE sudah berhasil, silakan
gunakan coding dibawah ini:

#include <ESP8266WiFi.h>
#include <MQTT.h>
const char ssid[] = "Nokia G10";
const char pass[] = "tes12345";
WiFiClient net;
MQTTClient client;
unsigned long lastMillis = 0;

void connect() {
while (WiFi.status() != WL_CONNECTED) {
Serial.println("WiFi.");
delay(1000);
}
String clientId = "ESP8266Client-" + String(random(0xffff),
HEX);
while (!client.connect(clientId.c_str(), "public", "public")) {
Serial.println("MQTT.");
delay(1000);
}
Serial.println("\nconnected!");
client.subscribe("/hello");
}

void messageReceived(String &topic, String &payload) {

Serial.println("incoming: " + topic + " - " + payload);
}

void setup() {
Serial.begin(115200);
WiFi.begin(ssid, pass);
client.begin("broker.emqx.io", net);
client.onMessage(messageReceived);
}

void loop() {
client.loop();
if (!client.connected()) {
connect();
}

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 11
 if (millis() - lastMillis > 1000) {
lastMillis = millis();
client.publish("/hello", "world");
}
}

Sebelum Upload Silahkan Masukan Nama WiFi dan Password pada variabel ssid
dan pass. Jika Berhasil output pada Serial Monitor akan muncul seperti ini:

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 12
C. Final Rangkaian dan Final Program

C.1. Final Rangkaian Alat

Module LDR NodeMCU

VCC 5V
I/O A0
GND GND

C.2. Final Program Arduino

Silakan masukan satu persatu coding berikut, sambil melihat penjelasan codingnya
ya, agar lebih memahami setiap perintahnya:

C.2.1. Menambahkan Library:

// Library
#include <ESP8266WiFi.h>
#include <MQTT.h>

1. ESP8266WiFi.h: Library ini digunakan agar perangkat ESP8266 dapat

terhubung ke jaringan WiFi.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 13
 2. MQTT.h: Library ini digunakan agar perangkat ESP8266 dapat berkomunikasi
dengan server MQTT untuk mengirim dan menerima pesan dari perangkat
lain yang terhubung ke server yang sama.

C.2.2. Konfigurasi WiFi dan MQTT:

// Konfigurasi WiFi
const char ssid[] = "namaWiFi";
const char pass[] = "passwordWiFi";

// Konfigurasi MQTT
const char mqttServer[] = "broker.emqx.io";
const int mqttPort = 1883;
String topicRelay = "STMIK/ALFATH/78762181/relay";
String topicSensor = "STMIK/ALFATH/78762181/sensor";

1. const char ssid[] = "namaWiFi";: Ini menetapkan nama jaringan WiFi yang
ingin dihubungkan oleh perangkat.
2. const char pass[] = "passwordWiFi";: Ini menetapkan kata sandi WiFi yang
sesuai dengan jaringan yang ditentukan sebelumnya.
3. const char mqttServer[] = "broker.emqx.io";: Ini menetapkan alamat server
MQTT yang akan digunakan oleh perangkat.
4. const int mqttPort = 1883;: Ini menetapkan port MQTT yang digunakan oleh
server.
5. String topicRelay = "STMIK/ALFATH/78762181/relay";: Ini menetapkan
topik untuk komunikasi relay melalui MQTT.
6. String topicSensor = "STMIK/ALFATH/78762181/sensor";: Ini menetapkan
topik untuk komunikasi sensor melalui MQTT.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 14
C.2.3. Membuat Object, Konfigurasi Pin dan Variabel Millis:

// Membuat Object
WiFiClient net;
MQTTClient client;

// Konfigurasi Pin
const byte pinSensor = A0;
const byte pinRelay = D5;

// Variabel Status dan Waktu

unsigned long lastMillis = 0;

1. WiFiClient net; dan MQTTClient client;: Membuat objek net dari kelas
WiFiClient dan objek client dari kelas MQTTClient untuk mengelola koneksi
WiFi dan MQTT.
2. const byte pinSensor = A0; dan const byte pinRelay = D5;:
Mengkonfigurasi pin yang digunakan dalam program, di mana pinSensor
untuk sensor (A0) dan pinRelay untuk relay (D5).
3. unsigned long lastMillis = 0;: Mendeklarasikan variabel lastMillis sebagai
unsigned long dan menginisialisasinya dengan nilai 0, kemungkinan
digunakan untuk melacak waktu terakhir suatu operasi dilakukan dalam
program menggunakan fungsi millis().

C.2.4. Fungsi Koneksi WiFi

// Fungsi Koneksi WiFi

void connectWiFi() {
Serial.print("[WiFi] Connecting...");
WiFi.begin(ssid, pass);
while (WiFi.status() != WL_CONNECTED) {
Serial.println("[WiFi] Connecting to WiFi...");
delay(1000);
}
Serial.println("[WiFi] Connected!");
Serial.println(WiFi.localIP());
}

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 15
Fungsi connectWiFi() bertujuan untuk menghubungkan perangkat ke jaringan WiFi
yang telah ditentukan sebelumnya. Proses koneksi dilakukan sebagai berikut:

1. Mencetak pesan "[WiFi] Connecting..." ke Serial Monitor untuk menandakan

bahwa proses koneksi sedang dimulai.
2. Memulai proses koneksi WiFi dengan menggunakan nama jaringan WiFi
(SSID) dan kata sandi (password) yang telah ditentukan sebelumnya dengan
menggunakan perintah WiFi.begin(ssid, pass).
3. Memasuki loop while untuk menunggu hingga perangkat terhubung ke
jaringan WiFi. Selama perangkat belum terhubung (WiFi.status() !=
WL_CONNECTED), akan mencetak pesan "[WiFi] Connecting to WiFi..." ke
Serial Monitor setiap detik dengan menggunakan Serial.println() dan
delay(1000).
4. Setelah perangkat terhubung ke jaringan WiFi, mencetak pesan "[WiFi]
Connected!" ke Serial Monitor untuk menandakan bahwa koneksi telah
berhasil.
5. Mencetak alamat IP lokal perangkat ke Serial Monitor menggunakan
WiFi.localIP() untuk memperoleh informasi IP perangkat yang terhubung ke
jaringan WiFi.

C.2.5. Fungsi Koneksi MQTT

// Fungsi Koneksi MQTT

void connectMQTT() {
String clientId = "ESP8266-" + String(random(0xffff), HEX);
client.begin(mqttServer, mqttPort, net);
client.onMessage(messageReceived);
while (!client.connect(clientId.c_str())) {
Serial.println("[MQTT] Connecting to MQTT...");
delay(1000);
}
Serial.println("[MQTT] Connected!");
client.subscribe(topicRelay, 0);
}

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 16
Fungsi connectMQTT() bertujuan menghubungkan perangkat ke server MQTT yang
telah ditentukan sebelumnya. Proses koneksi:

1. Membuat clientId unik dengan menggabungkan "ESP8266-" dengan nilai

random dalam format hexadecimal.
2. Memulai koneksi ke server MQTT menggunakan client.begin(mqttServer,
mqttPort, net) dengan alamat dan port server serta objek koneksi WiFi yang
telah ditentukan sebelumnya.
3. Looping menunggu hingga perangkat terhubung ke server MQTT. Selama
belum terhubung, mencetak pesan "[MQTT] Connecting to MQTT..." setiap
detik.
4. Setelah terhubung, mencetak pesan "[MQTT] Connected!" untuk
menandakan kesuksesan koneksi.
5. Mendaftarkan perangkat untuk menerima pesan dari topik topicRelay,
memungkinkan menerima pesan dari perangkat lain di server MQTT yang
sama.

C.2.6. Fungsi Menerima Pesan MQTT

// Fungsi Menerima Pesan MQTT

void messageReceived(String &topic, String &payload) {
Serial.println("[MQTT] Message received: " + topic + " - " +
payload);
if (topic == topicRelay) {
digitalWrite(pinRelay, payload == "ON" ? LOW : HIGH);
}
}

Fungsi messageReceived() bertujuan untuk menangani pesan yang diterima dari

server MQTT. Prosesnya:

1. Mencetak pesan "[MQTT] Message received: [topic] - [payload]" ke Serial

Monitor, menampilkan topik dan payload dari pesan yang diterima.
2. Memeriksa apakah topik pesan sama dengan topicRelay. Jika ya, maka:

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 17
 3. Mengatur status pin relay sesuai dengan nilai payload. Jika payload adalah
"ON", maka pin relay akan dinyalakan (LOW), dan jika payload bukan "ON",
maka pin relay akan dimatikan (HIGH).

C.2.7. Fungsi Membaca dan Mengirim Data Sensor

// Fungsi Membaca dan Mengirim Data Sensor

void readAndPublishSensorData() {
int sensorValue = analogRead(pinSensor);
int percentValue = map(sensorValue, 0, 1023, 0, 100);
Serial.print(sensorValue);
Serial.print(", ");
Serial.println(percentValue);
client.publish(topicSensor, String(percentValue), 0, true);
}

Fungsi readAndPublishSensorData() bertujuan untuk membaca data dari sensor,

mengirimnya melalui MQTT, dan dipublikasikan ke topik yang ditentukan. Prosesnya:

1. Membaca nilai sensor analog menggunakan analogRead(pinSensor).

2. Mengkonversi nilai sensor menjadi persentase menggunakan fungsi map().
3. Mencetak nilai sensor dan persentase ke Serial Monitor.
4. Mengirim data persentase sensor melalui MQTT menggunakan
client.publish() ke topik topicSensor.

C.2.8. Konfigurasi Awal

// Konfigurasi Awal
void setup() {
pinMode(pinRelay, OUTPUT);
digitalWrite(pinRelay, HIGH);
Serial.begin(115200);
}

Bagian dari program yang berisi konfigurasi awal yang dilakukan saat perangkat
dijalankan. Prosesnya adalah sebagai berikut:

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 18
 1. pinMode(pinRelay, OUTPUT);: Mengatur pin yang digunakan untuk relay
(pinRelay) sebagai OUTPUT, yang berarti pin tersebut akan digunakan untuk
mengirimkan sinyal keluar dari perangkat.
2. digitalWrite(pinRelay, HIGH);: Mengatur nilai awal pin relay menjadi HIGH,
yang artinya relay dalam keadaan mati saat perangkat pertama kali
dijalankan.
3. Serial.begin(115200);: Memulai komunikasi serial dengan kecepatan
baudrate 115200 bps, sehingga perangkat dapat berkomunikasi dengan
komputer atau perangkat lain melalui Serial Monitor.

C.2.9. Loop Utama

// Loop Utama
void loop() {
client.loop();
if (!client.connected()) {
connectWiFi();
connectMQTT();
}
if (millis() - lastMillis > 1000) {
lastMillis = millis();
readAndPublishSensorData();
}
}

Bagian dari program yang berisi loop utama yang dijalankan secara terus-menerus
oleh perangkat. Prosesnya adalah sebagai berikut:

1. client.loop();: Memeriksa dan menangani pesan masuk atau keluar dari klien
MQTT.
2. if (!client.connected()) { connectWiFi(); connectMQTT(); }: Memeriksa
apakah klien MQTT terhubung dengan server. Jika tidak, maka melakukan
koneksi ulang ke WiFi dan MQTT.
3. if (millis() - lastMillis > 1000) { lastMillis = millis();
readAndPublishSensorData(); }: Memeriksa apakah sudah waktunya untuk
membaca data sensor dan mengirimnya melalui MQTT. Jika sudah melewati

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 19
 interval 1 detik, maka membaca dan mengirim data sensor, kemudian
mengupdate nilai lastMillis.

D. Real Time Controlling Dan Monitoring Web

D.1. Buat dan Buka Proyek Baru

Silahkan buka Xampp Control Panel, ada di Folder Local Disk (C:) > xampp,
buka file xampp-control.

Silakan Start Apache:

Kemudian di folder xampp, masuk ke folder htdocs, dan buat folder baru dengan
nama iotcloud pada folder htdocs.

Selanjutnya silahkan buka Sublime, lalu di Sublime ke menu File > Open Folder…
iotcloud yang ada di htdocs.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 20
D.2. Buat File mqtt-library.js

Buat file baru dengan tekan ctrl+n, lalu copas code yang ada di link berikut:

https://gist.githubusercontent.com/ajangrahmat/834
b0457db230d073f606b97ad63cc60/raw/53286d2580a
95fb6e0bcaa7867236792b21f6871/mqtt-library.js
Lalu paste, dan simpan dengan tekan ctrl+s dan beri nama mqtt-library.js

D.3. Buat File scripts.js

Kemudian isi dengan coding dibawah ini:

const brokerUrl = 'ws://broker.emqx.io:8083/mqtt';

const topicRelay = "STMIK/ALFATH/78762181/relay";
const topicSensor = "STMIK/ALFATH/78762181/sensor";

const client = new MQTTClient(brokerUrl);

const options = { qos: 1, retain: true };

client.onConnect = () => {
client.subscribe(topicSensor);
client.subscribe(topicRelay);
};

client.onMessage = (topic, message) => {

console.log('Topic:', topic);
console.log('Message:', message.toString());
if (topic === topicSensor) {
document.getElementById('sensor').innerHTML =
message.toString();
}
if (topic === topicRelay) {
if (message.toString() === "ON") {
document.getElementById('relay').style.color =
"green";
} else {
document.getElementById('relay').style.color = "red";

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 21
 }
document.getElementById('relay').innerHTML =
message.toString();
}
};

function publish_led(message) {
client.publish(topicRelay, message, options);
}

client.connect();

Itu adalah potongan kode JavaScript yang digunakan untuk menghubungkan dan
berinteraksi dengan MQTT. Mari saya jelaskan baris per baris:

1. const brokerUrl = 'ws://broker.emqx.io:8083/mqtt';: Ini adalah URL dari

MQTT broker yang digunakan. MQTT adalah protokol komunikasi yang
digunakan dalam IoT (Internet of Things) untuk mentransmisikan data antara
perangkat. Di sini, protokol WebSocket (ws://) digunakan untuk koneksi.
2. const topicRelay = "STMIK/ALFATH/78762181/relay"; dan const
topicSensor = "STMIK/ALFATH/78762181/sensor";: Ini adalah topik-topik
yang digunakan untuk berlangganan dan mempublikasikan pesan. Topik-topik
ini memungkinkan perangkat untuk berkomunikasi satu sama lain. Topic relay
digunakan untuk mengontrol relay, sedangkan sensor digunakan untuk
membaca nilai dari sensor.
3. const client = new MQTTClient(brokerUrl);: Membuat klien MQTT baru
dengan URL broker yang telah ditentukan sebelumnya.
4. const options = { qos: 1, retain: true };: Opsi konfigurasi untuk pesan yang
dipublikasikan. qos (Quality of Service) ditetapkan ke 1, yang berarti pesan
akan dikirimkan sekali dan pastikan untuk tiba. retain ditetapkan ke true, yang
menyimpan pesan terakhir yang diterbitkan pada topik tersebut dan secara
otomatis mengirim ulang kepada pelanggan yang baru berlangganan ke topik
tersebut.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 22
 5. client.onConnect = () => { ... }: Ini adalah fungsi yang akan dipanggil ketika
klien berhasil terhubung ke broker. Di dalamnya, klien berlangganan ke topik
sensor dan relay.
6. client.onMessage = (topic, message) => { ... }: Fungsi yang akan dipanggil
ketika klien menerima pesan dari broker. Ini memeriksa topik dari pesan yang
diterima, kemudian memperbarui elemen HTML sesuai dengan pesan yang
diterima. Jika pesan berasal dari topik sensor, nilai sensor akan diperbarui.
Jika pesan berasal dari topik relay, elemen HTML untuk relay akan diperbarui
dan warna teksnya akan diubah sesuai dengan pesan yang diterima.
7. function publish_led(message) { ... }: Fungsi ini digunakan untuk
menerbitkan pesan ke topik relay dengan pesan yang ditentukan sebagai
argumen. Ini memungkinkan pengendali untuk mengirimkan pesan ke relay,
mengatur apakah relay harus dihidupkan atau dimatikan.
8. client.connect();: Memulai koneksi klien ke broker MQTT. Setelah koneksi
berhasil dibuat, onConnect akan dipanggil, dan klien akan mulai
berlangganan topik-topik yang diperlukan.

D.4. Buat File index.php

Silahkan isi dengan coding berikut:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>IoT Cloud</title>
</head>

<body >
<p>Status Koneksi:
<strong id="status" style="color:red">
DISCONNECTED
</strong>
</p>

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 23
 <p>Kontrol LED</p>
<p>Status: <strong style="color:red"
id="relay">OFF</strong></p>
<button onclick="publish_led('ON')">Lampu ON</button>
<button onclick="publish_led('OFF')">Lampu OFF</button>

<p>Nilai Sensor:</p>
<h1 id="sensor">0</h1>
<script
src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script src="mqtt-library.js"></script>
<script src="scripts.js"></script>
</div>
</body>

</html>

Itu adalah kode HTML sederhana yang menampilkan elemen-elemen HTML untuk
mengontrol dan memantau perangkat IoT melalui protokol MQTT. Mari saya jelaskan
setiap bagian:

1. <!DOCTYPE html>: Mendefinisikan jenis dokumen HTML ini sebagai

dokumen HTML5.
2. <html>: Mulai dari sini elemen HTML utama.
3. <head>: Ini adalah bagian kepala dokumen HTML yang berisi meta-informasi
tentang dokumen seperti karakter set, viewport, dan judul halaman.
4. <meta charset="UTF-8">: Menetapkan karakter set dokumen ke UTF-8
untuk mendukung karakter internasional.
5. <meta name="viewport" content="width=device-width,
initial-scale=1.0">: Mendefinisikan viewport untuk perangkat seluler dengan
lebar layar yang sama dengan lebar perangkat dan faktor skala awal 1.
6. <title>IoT Cloud</title>: Menetapkan judul dokumen HTML.
7. </head>: Penutup elemen kepala.
8. <body>: Ini adalah bagian tubuh dokumen HTML yang berisi konten yang
akan ditampilkan kepada pengguna.
9. <p>Status Koneksi: <strong id="status"
style="color:red">DISCONNECTED</strong></p>: Ini adalah paragraf

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 24
 yang menunjukkan status koneksi. Status ini awalnya ditetapkan sebagai
"DISCONNECTED" dan diberi warna merah.
10. <p>Kontrol LED</p>: Ini adalah paragraf yang menunjukkan kontrol LED.
11. <p>Status: <strong style="color:red" id="relay">OFF</strong></p>: Ini
adalah paragraf yang menunjukkan status LED. Status ini awalnya ditetapkan
sebagai "OFF" dan diberi warna merah.
12. <button onclick="publish_led('ON')">Lampu ON</button> dan <button
onclick="publish_led('OFF')">Lampu OFF</button>: Ini adalah tombol
untuk menghidupkan dan mematikan LED. Ketika tombol ditekan, fungsi
publish_led() akan dipanggil dengan argumen yang sesuai ("ON" atau "OFF").
13. <p>Nilai Sensor:</p>: Ini adalah paragraf yang menunjukkan nilai sensor.
14. <h1 id="sensor">0</h1>: Ini adalah elemen judul utama yang menampilkan
nilai sensor. Nilai ini awalnya ditetapkan sebagai "0".
15. <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>: Ini
adalah tag <script> untuk memuat pustaka MQTT yang diperlukan.
16. <script src="mqtt-library.js"></script> dan <script
src="scripts.js"></script>: Ini adalah tag <script> untuk memuat file
JavaScript yang berisi logika koneksi dan pengaturan serta file JavaScript
yang berisi fungsi-fungsi khusus untuk mengontrol dan memantau perangkat
melalui protokol MQTT.
17. </body>: Penutup elemen tubuh.
18. </html>: Penutup elemen HTML utama.

E. Mari Lebih Kreatif Membuat Desain Web

Silahkan gunakan beberapa Framework CSS untuk mempermudah pengeditan
Desain Web yang lebih keren, sebagai contoh bisa gunakan:

● Bootstrap : https://getbootstrap.com
● Flowbite : https://flowbite.com
● Apache ECharts : https://echarts.apache.org

Semangat abang kuh 😀

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 25
Tunggu Versi Full Version…
Ebook atau panduan ini dibuat berdasarkan Workshop yang dilakukan selama 1
hari, jadi baru selesai sampai sini saja.

Makanya di awal disebutkan BETA VERSION.

Setelah kamu berhasil membuat praktikum Real Time Monitoring dan Controlling,
langkah berikutnya adalah Data Logger ke DBMS MySQL.

Tunggu sampai Ebook ini selesai ya.

Silahkan di praktekan terlebih dahulu dan ditunggu reviewnya, dan silahkan juga
untuk bergabung di komunitas WA kami:

https://chat.whatsapp.com/DB9gXNfc7MWImZe0Ee4eGX

***

Jika Ebook versi Full Versionnya selesai, akan diinfokan lebih awal di group
whatsapp tersebut.

Terimakasih.

IoT ESP8266 Arduino, MQTT JS, Web PHP Bootstrap dan MySQL - Hal. 26