Membaca Sensor DHT via Web Server menggunakan Nodemcu (Access Point Mode dan Station Mode)
Halo sobat Nanobot, di tutorial sebelumnya kita sudah belajar bagaimana menggunakan Nodemcu, membuat web server dan menyalakan LED menggunakan Nodemcu via web. Pada tutorial kali ini kita akan belajar membaca sensor via web menggunakan Nodemcu. Mau tahu caranya? Ikuti langkah langkah selanjutnya ya
Pada percobaan ini peralatan yang dibutuhkan antara lain :
- Nodemcu
- Shield Nodemcu
- Sensor DHT11
- Kabel Jumper
Sama seperti sebelumnya kita akan membuat versi Access Point dan Station Mode
Langkah pertama, sambungkan sensor dengan Nodemcu sesuai dengan gambar dibawah ini
Gambar 1. Rangkaian Elektronis
Kedua. kita buat program
Program membaca sensor DHT11 via Web Server (Access Point Mode)
/* Tutorial Membaca Sensor DHT dengan Web Server Internal ESP8266 (Access Point Mode)
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h> //Library ESP8266
#include <ESP8266WebServer.h> //Library Web Server
#include <dht.h> //Library DHT
//Konfigurasi DHT
#define sensor D5 //Pin sensor
dht DHT;
float suhu;
float kelembapan;
//Konnfigurasi SSID dan password
const char* ssid = "Nanobot Workshop";
const char* password = "nanobot11";
//Konfigurasi web server
ESP8266WebServer server(80);
void setup() {
Serial.begin(115200);
delay(100);
pinMode(sensor,INPUT);
//Pengaturan WiFi
Serial.println("Memulai Access Point .... ");
boolean result = WiFi.softAP(ssid, password);
if(result == true) {
Serial.println("Access point siap digunakan");
Serial.print("IP Address = ");
Serial.println(WiFi.softAPIP());
}
delay(100);
//Pengaturan Web Server
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("Web Server siap digunakan");
}
void loop() {
server.handleClient();
DHT.read11(sensor);
Serial.print("Kelembaban udara = ");
Serial.print(DHT.humidity);
Serial.print("% ");
Serial.print("Suhu = ");
Serial.print(DHT.temperature);
Serial.println(" C ");
delay(1000);
}
void handle_OnConnect() {
DHT.read11(sensor);
suhu = DHT.temperature;
kelembapan = DHT.humidity;
server.send(200, "text/html", SendHTML(suhu, kelembapan));
}
void handle_NotFound() {
server.send(404, "text/plain", "NOT FOUND");
}
//Tampilan Website
String SendHTML(float suhuStatus, float kelembapanStatus) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta name=\"viewport\" content=\"widht=device-width, initial-scale=1.0, user-scalabe=no\">\n";
ptr += "<meta http-equiv=\"refresh\" content=\"2\">\n";
ptr += "<title> ESP8266 Weather Report</title>\n";
ptr += "<style>html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top:50px;} h1 {color:#444444; margin:50px auto 30px;}\n";
ptr += "p {font-size:24px; color:#444444; margin-bottom:10px;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1> ESP8266 Weather Report </h1>\n";
ptr += "<p> Suhu : ";
ptr += (int)suhuStatus;
ptr += " C</p>";
ptr += "<p> Kelembapan : ";
ptr += (int)kelembapanStatus;
ptr += "%</p>";
ptr += "</div>";
ptr += "</body>";
ptr += "</html>";
return ptr;
}
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h> //Library ESP8266
#include <ESP8266WebServer.h> //Library Web Server
#include <dht.h> //Library DHT
//Konfigurasi DHT
#define sensor D5 //Pin sensor
dht DHT;
float suhu;
float kelembapan;
//Konnfigurasi SSID dan password
const char* ssid = "Nanobot Workshop";
const char* password = "nanobot11";
//Konfigurasi web server
ESP8266WebServer server(80);
void setup() {
Serial.begin(115200);
delay(100);
pinMode(sensor,INPUT);
//Pengaturan WiFi
Serial.println("Memulai Access Point .... ");
boolean result = WiFi.softAP(ssid, password);
if(result == true) {
Serial.println("Access point siap digunakan");
Serial.print("IP Address = ");
Serial.println(WiFi.softAPIP());
}
delay(100);
//Pengaturan Web Server
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("Web Server siap digunakan");
}
void loop() {
server.handleClient();
DHT.read11(sensor);
Serial.print("Kelembaban udara = ");
Serial.print(DHT.humidity);
Serial.print("% ");
Serial.print("Suhu = ");
Serial.print(DHT.temperature);
Serial.println(" C ");
delay(1000);
}
void handle_OnConnect() {
DHT.read11(sensor);
suhu = DHT.temperature;
kelembapan = DHT.humidity;
server.send(200, "text/html", SendHTML(suhu, kelembapan));
}
void handle_NotFound() {
server.send(404, "text/plain", "NOT FOUND");
}
//Tampilan Website
String SendHTML(float suhuStatus, float kelembapanStatus) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta name=\"viewport\" content=\"widht=device-width, initial-scale=1.0, user-scalabe=no\">\n";
ptr += "<meta http-equiv=\"refresh\" content=\"2\">\n";
ptr += "<title> ESP8266 Weather Report</title>\n";
ptr += "<style>html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top:50px;} h1 {color:#444444; margin:50px auto 30px;}\n";
ptr += "p {font-size:24px; color:#444444; margin-bottom:10px;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1> ESP8266 Weather Report </h1>\n";
ptr += "<p> Suhu : ";
ptr += (int)suhuStatus;
ptr += " C</p>";
ptr += "<p> Kelembapan : ";
ptr += (int)kelembapanStatus;
ptr += "%</p>";
ptr += "</div>";
ptr += "</body>";
ptr += "</html>";
return ptr;
}
Program membaca sensor DHT11 via Web Server (Station Mode)
/* Tutorial Membaca Sensor DHT dengan Web Server Internal ESP8266 (Station Mode)
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h> //Library ESP8266
#include <ESP8266WebServer.h> //Library Web Server
#include <dht.h> //Library DHT
//Konfigurasi DHT
#define sensor D5 //Pin sensor
dht DHT;
float suhu;
float kelembapan;
//Konnfigurasi SSID dan password (Ubah SSID dan password sesuai WiFi yang akan dihubungkan)
const char* ssid = "xxxxxxxxxx";
const char* password = "xxxxxxxx";
//Konfigurasi web server
ESP8266WebServer server(80);
void setup() {
Serial.begin(115200);
delay(100);
pinMode(sensor,INPUT);
//Pengaturan WiFi
Serial.print("Menyambungkan ke ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() !=WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi Terhubung");
Serial.print("IP Address : ");
Serial.println(WiFi.localIP());
//Pengaturan Web Server
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("Web Server siap digunakan");
}
void loop() {
server.handleClient();
DHT.read11(sensor);
Serial.print("Kelembaban udara = ");
Serial.print(DHT.humidity);
Serial.print("% ");
Serial.print("Suhu = ");
Serial.print(DHT.temperature);
Serial.println(" C ");
delay(1000);
}
void handle_OnConnect() {
DHT.read11(sensor);
suhu = DHT.temperature;
kelembapan = DHT.humidity;
server.send(200, "text/html", SendHTML(suhu, kelembapan));
}
void handle_NotFound() {
server.send(404, "text/plain", "NOT FOUND");
}
//Tampilan Website
String SendHTML(float suhuStatus, float kelembapanStatus) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta name=\"viewport\" content=\"widht=device-width, initial-scale=1.0, user-scalabe=no\">\n";
ptr += "<meta http-equiv=\"refresh\" content=\"2\">\n";
ptr += "<title> ESP8266 Weather Report</title>\n";
ptr += "<style>html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top:50px;} h1 {color:#444444; margin:50px auto 30px;}\n";
ptr += "p {font-size:24px; color:#444444; margin-bottom:10px;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1> ESP8266 Weather Report </h1>\n";
ptr += "<p> Suhu : ";
ptr += (int)suhuStatus;
ptr += " C</p>";
ptr += "<p> Kelembapan : ";
ptr += (int)kelembapanStatus;
ptr += "%</p>";
ptr += "</div>";
ptr += "</body>";
ptr += "</html>";
return ptr;
}
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h> //Library ESP8266
#include <ESP8266WebServer.h> //Library Web Server
#include <dht.h> //Library DHT
//Konfigurasi DHT
#define sensor D5 //Pin sensor
dht DHT;
float suhu;
float kelembapan;
//Konnfigurasi SSID dan password (Ubah SSID dan password sesuai WiFi yang akan dihubungkan)
const char* ssid = "xxxxxxxxxx";
const char* password = "xxxxxxxx";
//Konfigurasi web server
ESP8266WebServer server(80);
void setup() {
Serial.begin(115200);
delay(100);
pinMode(sensor,INPUT);
//Pengaturan WiFi
Serial.print("Menyambungkan ke ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() !=WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi Terhubung");
Serial.print("IP Address : ");
Serial.println(WiFi.localIP());
//Pengaturan Web Server
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("Web Server siap digunakan");
}
void loop() {
server.handleClient();
DHT.read11(sensor);
Serial.print("Kelembaban udara = ");
Serial.print(DHT.humidity);
Serial.print("% ");
Serial.print("Suhu = ");
Serial.print(DHT.temperature);
Serial.println(" C ");
delay(1000);
}
void handle_OnConnect() {
DHT.read11(sensor);
suhu = DHT.temperature;
kelembapan = DHT.humidity;
server.send(200, "text/html", SendHTML(suhu, kelembapan));
}
void handle_NotFound() {
server.send(404, "text/plain", "NOT FOUND");
}
//Tampilan Website
String SendHTML(float suhuStatus, float kelembapanStatus) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta name=\"viewport\" content=\"widht=device-width, initial-scale=1.0, user-scalabe=no\">\n";
ptr += "<meta http-equiv=\"refresh\" content=\"2\">\n";
ptr += "<title> ESP8266 Weather Report</title>\n";
ptr += "<style>html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top:50px;} h1 {color:#444444; margin:50px auto 30px;}\n";
ptr += "p {font-size:24px; color:#444444; margin-bottom:10px;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1> ESP8266 Weather Report </h1>\n";
ptr += "<p> Suhu : ";
ptr += (int)suhuStatus;
ptr += " C</p>";
ptr += "<p> Kelembapan : ";
ptr += (int)kelembapanStatus;
ptr += "%</p>";
ptr += "</div>";
ptr += "</body>";
ptr += "</html>";
return ptr;
}
Ketiga, upload program yang sudah dibuat. Jangan lupa sesuaikan dengan port dan board sebelum upload. Setelah proses upload selesai buka serial monitor. (Jika tampilan tidak sama coba reset Nodemcu)
Gambar 2. Serial Monitor (Access Point Mode)
Gambar 3. Serial Monitor (Station Mode)
Keempat, ketik IP address yang tertera di serial monitor
Gambar 4. Hasil Percobaan (Access Point Mode)
Gambar 5. Hasil Percobaan (Station Mode)
Selesai, mudah bukan? Jika ada kesulitan silahkan tanyakan di komentar yaa
Komentar
Posting Komentar