SERVER WEB VS KLIEN WEB
Sebuah web server baik software, hardware, atau kombinasi keduanya yang berisi file yang dibutuhkan untuk memproses dan mengirimkan halaman web. Klien web hanyalah perangkat apa pun yang dapat mengirim permintaan HTTP/web ke server web. HTTP atau Hypertext Transfer Protocol adalah protokol unik yang digunakan server web dan klien web untuk berkomunikasi.
Untuk mendemonstrasikan, misalkan Anda ingin mengunjungi www.kamisukarobot.com . Jadi Anda memasukkan URL situs web ke browser web Anda. Setelah beberapa detik, dengan asumsi Anda terhubung ke internet, beranda kamisukarobot.com muncul.
Dalam contoh ini, komputer Anda adalah klien web. Komputer Anda mengirimkan permintaan web menggunakan aplikasi browser web, yaitu Chrome atau Firefox. Peramban web mengirimkan permintaan ke server web yang menghosting Dasar-Dasar Sirkuit, yang kemudian mengembalikan data yang diperlukan untuk menampilkan beranda Dasar-Dasar Sirkuit.
Server web yang menghosting situs web biasanya adalah komputer yang dibuat khusus yang menyimpan sejumlah besar data. Mereka memiliki alamat IP yang unik juga.
SERVER WEB ARDUINO
Tetapi Anda tidak memerlukan semua itu kecuali Anda berencana membangun situs web besar. Arduino yang dipasangkan dengan modul ESP8266 sudah cukup untuk server web sederhana. Dengan server web Arduino, Anda sudah dapat menyimpan halaman web dan memperluas kontrol atas sensor Anda dan perangkat lain yang terhubung. Hal-hal seperti membaca nilai sensor dan mengaktifkan sakelar relai sekarang dapat dilakukan di mana saja melalui koneksi WiFi.
Selain itu, server web yang dapat diakses di mana saja melalui internet disebut server global . Sementara itu, server web yang hanya dapat dikunjungi di Jaringan Area Lokal (LAN) Anda disebut server lokal .
Ada banyak cara untuk membuat server global. Dalam tutorial ini, kita akan menggunakan metode yang disebut port forwarding .
PERMINTAAN WEB
Untuk mendapatkan data dari server web, klien web menggunakan permintaan HTTP. Ada beberapa jenis permintaan HTTP, tetapi Anda hanya perlu mempelajari dua untuk membuat server Arduino. Permintaan ini disebut HTTP GET dan HTTP POST.
HTTP GET adalah permintaan web yang mengambil data dari browser web. Itu tidak mengubah apa pun di server. Itu hanya mengambil data darinya.
HTTP POST adalah permintaan web yang mengirimkan data ke server. Itu menambahkan sesuatu yang baru ke server.
Contoh khas dari permintaan GET adalah penjelajahan situs web yang sederhana. Di sisi lain, permintaan POST digunakan dalam mengetik teks ke halaman web, misalnya, nama pengguna dan kata sandi.
MODUL ESP8266-01
- 802.11 b/g/n
- MCU 32-bit daya rendah terintegrasi
- ADC 10-bit terintegrasi
- Tumpukan protokol TCP/IP terintegrasi
- Sakelar TR terintegrasi, balun, LNA, penguat daya, dan jaringan yang cocok
- PLL terintegrasi, regulator, dan unit manajemen daya
- Mendukung keragaman antena
- WiFi 2.4 GHz, mendukung WPA/WPA2
- Mendukung mode operasi STA/AP/STA + AP
- Mendukung Fungsi Tautan Cerdas untuk perangkat Android dan iOS
- Mendukung Fungsi Tautan Cerdas untuk perangkat Android dan iOS
- SDIO 2.0, (H) SPI, UART, I2C, I2S, IRDA, PWM, GPIO
- GND – Tanah
- GPIO2 – Pin I/O yang dapat diprogram dengan resistor pull-up internal
- GPIO0 – Pin I/O yang dapat diprogram dengan resistor pull-up internal
- RX – UART Menerima pin
- VCC – 3.3v
- REST – Pin Reset Eksternal, Aktif RENDAH
- CH_PD – Pin Pengaktifan Chip. Aktif TINGGI
- TX – Pin transmisi UART
- Arduino Uno
- Modul ESP8266 ESP-01
- 2 x 1kΩ resistor
- Protoboard
- Kabel jumper
- Kemudian, sambungkan ESP-01 ke Arduino, seperti gambar di bawah ini:
Verifikasi koneksi menggunakan perintah AT ini: AT+CIFSR
Perintah AT ini memberikan alamat IP dan MAC dari ESP-01. Pastikan untuk mencatat alamat IP dan MAC Anda karena kami akan menggunakannya nanti untuk tujuan penerusan portal.
MENGAKTIFKAN KONEKSI
Kita juga harus mengatur ESP-01 untuk mendukung banyak koneksi karena kita membutuhkannya sebagai server. Untuk melakukannya, masukkan perintah ini di monitor serial:AT+CIPMUX=1
Jika Anda perlu mengubahnya kembali menjadi satu koneksi, ganti 1 pada perintah AT+CIPMUX dengan 0.
Selanjutnya, mulai server menggunakan perintah: AT+CIPSERVER=1,80.
Angka pertama menunjukkan status port. Nilai 0 berarti tertutup sedangkan nilai 1 berarti terbuka. Di sisi lain, angka kedua menunjukkan nomor port. Port 80 adalah nomor port default untuk protokol HTTP, yang juga kami gunakan untuk halaman HTML.
Pada titik ini, kami telah membuat koneksi antara router rumah Anda dan ESP-01. Kami sekarang siap untuk mengirim permintaan HTTP dari komputer Anda ke modul.
MENGIRIM DAN MENERIMA DATA
Untuk mengirim permintaan GET, cukup masukkan alamat IP ESP-01 Anda ke browser web komputer Anda. Ini akan mengirim respons pada monitor serial Anda. Respons berisi beberapa informasi berguna seperti detail file yang akan diambil, nama browser yang digunakan untuk permintaan, sistem operasi, dan sebagainya.
Perhatikan bahwa browser web Anda tidak menampilkan apa pun. Itu karena masih belum ada data yang bisa diambil.
Mari kita kirim "Hello World" yang biasa untuk menguji koneksi kita. Ketik perintah berikut di monitor serial Anda:AT+CIPSEND=0,12
Angka pertama menunjukkan saluran apa data akan dikirim. Sedangkan angka kedua menunjukkan jumlah karakter yang akan dikirim. Karena kita akan mengirim "Hello World", kita perlu mengatur angka kedua menjadi 12 agar terkirim seluruhnya, termasuk spasi.
Setelah menekan enter, simbol > akan muncul. Ini berarti bahwa server sudah menunggu pesan. Selanjutnya, ketik Hello World pada monitor serial Anda. Setelah beberapa saat, monitor akan menampilkan SEND OK. Terakhir, untuk menampilkan data di browser web Anda, tutup saluran komunikasi dengan mengetikkan perintah berikut: AT+CIPCLOSE=0.
Segera setelah Anda menekan enter, pesan Hello World akan muncul di browser web Anda.
MENYIAPKAN SERVER GLOBAL
Sekarang setelah kita selesai dengan server lokal, kita lanjutkan dengan menghubungkan ESP-01 ke internet. Di bagian ini, kita akan membuat server global yang menampilkan tanggal, waktu, suhu, dan kelembapan pada halaman web yang dapat Anda akses di mana saja.
Dengan menggunakan bagian-bagian yang tercantum di bawah ini, buat modul Arduino dan ESP8266 ESP-01 Anda seperti yang ditunjukkan pada gambar di bawah ini:
- Arduino Uno
- Modul ESP8266 ESP-01
- Sensor suhu dan kelembaban DHT22
- 2 x 10kΩ resistor
- 1 x 1kΩ resistor
- 1 x 2.2kΩ resistor
- Papan protoboard
- Kabel jumper
Sebelumnya, kami menggunakan monitor serial untuk mengirim perintah AT ke ESP-01. Kali ini kita akan melakukan pemrograman yang sebenarnya.
MENGHUBUNGKAN KOMPONEN ANDA
Hubungkan pin RST (Reset) Arduino ke GND (Ground). Mengatur RST ke GND menonaktifkan chip Arduino sehingga kita dapat menggunakan papan sebagai programmer ESP. Selanjutnya, kami menyalakan ESP-01. Tidak seperti sebelumnya, kami tidak akan menggunakan suplai 3.3V dari Arduino. Kami akan membutuhkan lebih banyak arus karena kami sekarang menggunakan sensor. Untungnya, pin 5V memasok arus yang cukup untuk keduanya, tetapi kita membutuhkan pembagi tegangan untuk mengubah tegangan menjadi 3,3V. Hubungkan resistor 1kΩ dan 2.2kΩ secara seri, seperti pada gambar di atas. Hubungkan ujung seri ke tanah. Terakhir, sambungkan kaki lain dari resistor 1kΩ ke rel positif papan tempat memotong roti. Rel daya harus sudah memasok 3.3V.
Selanjutnya, kami menyalakan DHT22. Modul DHT22 membutuhkan 3.3V – 5V untuk bekerja. Anda dapat menghubungkannya ke salah satu suplai. Jika Anda ingin menggunakan 5V, sambungkan ke pin sebelum pembagi tegangan. Kemudian, gunakan resistor pull-up 10k di sepanjang jalur data yang menghubungkan DHT22 dan ESP-01.
Kemudian, untuk menginisialisasi modul ESP-01, sambungkan pin EN/CH-PD (Enable) ke catu daya 3.3V. Gunakan resistor pull-up 10k.
Akhirnya. sambungkan pin GPIO 0 ESP-01 ke GND untuk memulai mode program.
MEMPROGRAM ESP8266
Untuk memprogram chip ESP8266 menggunakan Arduino IDE, Anda harus menginstal board terlebih dahulu kemudian dilanjutkan sebagai berikut:
1. Di Arduino IDE, buka File >> Preferences.
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#define DHTPin 2
#define DHTTYPE DHT22
DHT dht(DHTPin, DHTTYPE);
WiFiUDP ntpUDP;
const long utcOffsetInSeconds = 28800;
NTPClient timeClient(ntpUDP, "pool.ntp.org", utcOffsetInSeconds);
unsigned long epochTime = timeClient.getEpochTime();
struct tm *ptm = gmtime ((time_t *)&epochTime);
const char* ssid = "WiFi Name";
const char* password = "WiFi Password";
ESP8266WebServer server(80);
String SendHTML(float TemperatureWeb,float HumidityWeb, String TimeWeb, String DateWeb);
void handle_OnConnect();
void handle_NotFound();
float Temperature;
float Humidity;
String formattedTime;
String Date;
int Day;
int Month;
int Year;
void setup() {
Serial.begin(115200);
pinMode(DHTPin, INPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("Connected to WiFi");
Serial.print("IP: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
dht.begin();
timeClient.begin();
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
timeClient.update();
unsigned long epochTime = timeClient.getEpochTime();
String formattedTime = timeClient.getFormattedTime();
struct tm *ptm = gmtime ((time_t *)&epochTime);
int monthDay = ptm->tm_mday;
int currentMonth = ptm->tm_mon+1;
int currentYear = ptm->tm_year+1900;
formattedTime = timeClient.getFormattedTime();
Date = String(currentYear) + "-" + String(currentMonth) + "-" + String(monthDay);
Temperature = dht.readTemperature();
Humidity = dht.readHumidity();
server.send(200, "text/html", SendHTML(Temperature,Humidity,formattedTime,Date));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(float TemperatureWeb,float HumidityWeb, String TimeWeb,String DateWeb){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP8266 Global Server</title>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 Global Server</h1>\n";
ptr +="<p>Date: ";
ptr +=(String)DateWeb;
ptr +="</p>";
ptr +="<p>Time: ";
ptr +=(String)TimeWeb;
ptr +="</p>";
ptr +="<p>Temperature: ";
ptr +=(int)TemperatureWeb;
ptr +="C</p>";
ptr +="<p>Humidity: ";
ptr +=(int)HumidityWeb;
ptr +="%</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>
#include <NTPClient.h>
#include <WiFiUdp.h>Kemudian, untuk terhubung ke WiFi rumah Anda, masukkan kredensial jaringan Anda di sini:
const char* ssid = "WiFi Name";
const char* password = "WiFi Password"; Selanjutnya, kami menginisialisasi instance WifiUDP dan NTPClient. Menyiapkan objek NTPClient membutuhkan objek WiFiUDP, server NTP, dan offset untuk menentukan zona waktu Anda. Kami menggunakan pool.ntp.org sebagai alamat server NTP. Ini secara otomatis mendeteksi server waktu terdekat dari lokasi Anda. Terakhir, untuk offset UTC untuk zona waktu Anda, gunakan rumus ini:
UTC X = X * 60 * 60
Saya di GMT+8 jadi bagi saya,
UTC 8 = 8 * 60 * 60 = 28800
WiFiUDP ntpUDP;
const long utcOffsetInSeconds = 28800;
NTPClient timeClient(ntpUDP, "pool.ntp.org", utcOffsetInSeconds);Fungsi waktu epoch mengembalikan jumlah detik yang telah berlalu sejak 1 Januari 1970. Kami menggunakan fungsi ini bersama dengan struktur waktu untuk mendapatkan tanggal.
unsigned long epochTime = timeClient.getEpochTime();
struct tm *ptm = gmtime ((time_t *)&epochTime);Sekarang kita buka port 80 menggunakan ESP8266WebServer server(80);.
Kemudian, untuk pengaturan, kami menginisialisasi monitor serial pada 115200 untuk membuat petunjuk dan menampilkan informasi. Selain itu, menggunakan fungsi awal, kami terhubung ke WiFi, memulai server kemudian menginisialisasi sensor DHT dan server waktu.
void setup() {
Serial.begin(115200);
pinMode(DHTPin, INPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("Connected to WiFi");
Serial.print("IP: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
dht.begin();
timeClient.begin();
}Mengikuti pengaturan adalah loop. Bagian loop hanya berisi satu baris. Baris ini adalah fungsi dari perpustakaan ESPWebserver. Ini memantau keberadaan klien web dan menangani permintaan HTTP, seperti POST dan GET.
void loop() {
server.handleClient();
}Jika handleClient()mendeteksi permintaan dari Klien Web dan berhasil terhubung, sketsa akan diarahkan ke handle_OnConnect()fungsi. Atau, jika ada kesalahan dengan koneksi, itu pergi ke handle_NotFound().
void handle_OnConnect(){
}void handle_NotFound(){
}Di dalam handle_OnConnect()fungsi tersebut terdapat perintah yang mengambil pembacaan tanggal, waktu, suhu, dan kelembaban saat ini dari perpustakaan masing-masing. Menggunakan struktur waktu yang kita tetapkan sebelumnya, kita mendapatkan tanggal saat ini. Sedangkan untuk waktu, kami menggunakan getFormattedTime()langsung dari library NTPClient.
Hal yang sama berlaku untuk suhu dan kelembaban, di mana kami menggunakan dht.readTemperature()dan dht.readHumidity()langsung dari perpustakaan DHT. Akhirnya, server.send()mengembalikan data ke klien.
void handle_OnConnect() {
timeClient.update();
epochTime = timeClient.getEpochTime();
String Time = timeClient.getFormattedTime();
tm *ptm = gmtime ((time_t *)&epochTime);
int monthDay = ptm->tm_mday;
int currentMonth = ptm->tm_mon+1;
int currentYear = ptm->tm_year+1900;
Time = timeClient.getFormattedTime();
Date = String(currentYear) + "-" + String(currentMonth) + "-" + String(monthDay);
Temperature = dht.readTemperature();
Humidity = dht.readHumidity();
server.send(200, "text/html", SendHTML(Temperature,Humidity,Time,Date));
}Last but not least, kami gunakan SendHTML()untuk membuat halaman web sesuai dengan data yang telah kami kumpulkan.
String SendHTML(float TemperatureWeb,float HumidityWeb, String TimeWeb,String DateWeb){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP8266 Global Server</title>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP8266 Global Server</h1>\n";
ptr +="<p>Date: ";
ptr +=(String)DateWeb;
ptr +="</p>";
ptr +="<p>Time: ";
ptr +=(String)TimeWeb;
ptr +="</p>";
ptr +="<p>Temperature: ";
ptr +=(int)TemperatureWeb;
ptr +="C</p>";
ptr +="<p>Humidity: ";
ptr +=(int)HumidityWeb;
ptr +="%</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}DEMONSTRASI
Unggah kode ke ESP-01. Pilih "Modul ESP8266 Generik" sebagai papan. Pastikan untuk memilih nomor port yang benar juga.
Setelah mengunggah, buka monitor serial dan Anda akan melihat sesuatu seperti ini:
Kunjungi alamat IP yang diberikan menggunakan browser web apa pun.
Mantap Suhu....
BalasHapusmakasih gan
Hapushai kak izin bleh mnta alamat gmailnya, ingin nanya" sputar arduino jika brkenan
BalasHapusPosting Komentar