MODUL 09 (SPESIALIS IOT): PROTOKOL HTTP & EMBEDDED WEB SERVER

📌 META MODUL & PRASYARAT

Bidang Spesialisasi: Web Protocols & Embedded HTTP Servers.
Target Pembaca: Pembelajar yang sudah menguasai Konektivitas WiFi (Modul 08).
Learning Outcome:
Memahami arsitektur Request-Response pada protokol HTTP (Hypertext Transfer Protocol).
Mampu membuat Embedded Web Server di dalam ESP32 untuk kontrol sakelar relay via browser HP.
Mampu menggunakan metode HTTP GET dan HTTP POST dari ESP32.
Memahami struktur HTTP Status Code (200 OK, 404 Not Found, 500 Internal Error).
Estimasi Waktu Belajar: 120 Menit.
Tingkat Kesulitan: 🟢 Pemula - Menengah (Level 9 / 40).
Prasyarat: Modul 08 (Konektivitas WiFi ESP32).

📚 GLOSARIUM & DAFTAR ISTILAH BARU

Istilah	Definisi Sederhana	Analogi
HTTP Request	Pesan permintaan yang dikirim oleh Klien (Browser/ESP32) ke Server.	Pelanggan memesan makanan di restoran ke pelayan.
HTTP Response	Pesan balasan beserta isi data yang dikirim oleh Server kembali ke Klien.	Pelayan menyajikan makanan yang dipesan ke meja pelanggan.
HTTP GET	Metode HTTP untuk meminta/mengambil data dari server tanpa mengubah data.	Membaca daftar menu makanan.
HTTP POST	Metode HTTP untuk mengunggah/mengirimkan data baru ke server.	Mengirimkan formulir pesanan ke dapur.
HTTP 200 OK	Kode status yang menandakan permintaan berhasil diproses sempurna.	Pesanan makanan berhasil disajikan.

9. HTTP Protocol & Embedded Web Server ESP32

🧠 ARSITEKTUR HTTP EMBEDDED WEB SERVER ESP32

=======================================================================
            ALUR KERJA EMBEDDED WEB SERVER ESP32 & CLIENT HP
=======================================================================

   [ SMARTPHONE / BROWSER ]                              [ ESP32 WEB SERVER ]
      (IP: 192.168.1.50)                                 (IP: 192.168.1.105)
              │                                                   │
              ├─── HTTP GET http://192.168.1.105/relay/on ───────►│
              │                                                   │ (Nyalakan Relay GPIO 4)
              │◄── HTTP 200 OK (HTML: "Relay Berhasil ON") ───────┤
              │                                                   │
              ├─── HTTP GET http://192.168.1.105/status ─────────►│
              │                                                   │ (Membaca Sensor DHT22)
              │◄── HTTP 200 OK (JSON: {"temp":28.5}) ─────────────┤

⚡ CHEAT SHEET KODE EMBEDDED WEB SERVER ESP32

#include <WiFi.h>
#include <WebServer.h>

WebServer server(80); // Jalankan server pada Port 80
const int RELAY_PIN = 4;

void handleRoot() {
  String html = "<html><body><h1>ESP32 IoT Controller</h1>";
  html += "<p><a href='/on'><button style='font-size:20px;'>NYALAKAN RELAY</button></a></p>";
  html += "<p><a href='/off'><button style='font-size:20px;'>MATIKAN RELAY</button></a></p>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void handleOn() {
  digitalWrite(RELAY_PIN, LOW); // Active Low
  server.send(200, "text/plain", "Status Relay: ON");
}

void handleOff() {
  digitalWrite(RELAY_PIN, HIGH);
  server.send(200, "text/plain", "Status Relay: OFF");
}

void setup() {
  pinMode(RELAY_PIN, OUTPUT);
  digitalWrite(RELAY_PIN, HIGH);
  WiFi.begin("WiFi_SSID", "Password123");
  while (WiFi.status() != WL_CONNECTED) { delay(500); }
  
  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.begin();
}

void loop() {
  server.handleClient(); // Proses permintaan masuk dari HP/Browser
}

Latihan & Quiz Evaluasi Modul

Progres Quiz: 0 / 2 Soal

SOAL #1

Kode status HTTP manakah yang mengindikasikan bahwa halaman web tidak ditemukan (*Not Found*)?

SOAL #2

Metode HTTP manakah yang paling aman dan tepat digunakan untuk mengirimkan data sensor sensitif atau formulir akun ke server?

Kunci Jawaban & Pembahasan

Kunci Jawaban: 1. c. 404 Not Found, 2. b. POST.

Apakah Anda siap lanjut ke Modul 10: REST API & Parsing Data JSON pada ESP32?

Protokol HTTP & Embedded Web Server ESP32