Menampilkan Halaman HTML dari File Terpisah di ESP8266/ESP32

Dalam proyek ESP8266 Web Server, sering kali kita perlu menampilkan halaman web dengan HTML, CSS, dan JavaScript agar tampilannya lebih menarik dan interaktif. Alih-alih menulis kode HTML langsung di dalam kode Arduino, kita bisa menyimpan file terpisah menggunakan SPIFFS (SPI Flash File System) atau LittleFS. Dengan cara ini, struktur proyek menjadi lebih rapi dan modular.

Pada blog ini, kita akan membahas:

✔ Mengapa menyimpan HTML di file terpisah lebih baik?
✔ Cara menyimpan dan menampilkan file HTML dari ESP
✔ Kode contoh untuk membaca file HTML dari SPIFFS/LittleFS

Mengapa Menyimpan HTML di File Terpisah?

✔ Memudahkan pengeditan – Kamu bisa mengubah tampilan tanpa perlu memodifikasi kode firmware.
✔ Menghemat memori program – HTML disimpan di SPIFFS/LittleFS, bukan di flash yang digunakan oleh program utama.
✔ Lebih rapi dan modular – Bisa memisahkan file CSS, JavaScript, dan HTML seperti dalam aplikasi web normal.

Struktur File Proyek

Sebelum mulai coding, kita buat struktur folder seperti ini:

/ESP8266_WebServer
│── data/                → Folder untuk menyimpan file web
│   ├── index.html       → Halaman utama
│   ├── style.css        → Styling halaman
│   ├── script.js        → JavaScript untuk interaksi
│── ESP8266_WebServer.ino → Kode utama untuk ESP8266

Folder data/ akan digunakan oleh SPIFFS atau LittleFS untuk menyimpan file HTML.

Kode ESP8266/ESP32 untuk Membaca HTML dari SPIFFS/LittleFS

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

const char* ssid = "SSID";
const char* password = "PASSWORD";
AsyncWebServer server(80);

void setup() {
    Serial.begin(115200);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) delay(500);

    SPIFFS.begin();
    
    // Menyajikan file HTML, CSS, dan JS dari SPIFFS
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/index.html", "text/html");
    });
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/style.css", "text/css");
    });
    server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/script.js", "application/javascript");
    });

    server.begin();
}

void loop() {}

Upload File ke SPIFFS

1. Buka Arduino IDE
2. Instal plugin “ESP8266/ESP32 SPIFFS uploader”
3. Buka “Tools > ESP8266 Sketch Data Upload”
4. File HTML, CSS, dan JS akan diunggah ke SPIFFS!

Kesimpulan

✔ Menggunakan SPIFFS atau LittleFS memungkinkan penyimpanan file HTML secara terpisah di ESP.
✔ Metode ini mempermudah pengeditan dan menghemat memori program utama.
✔ Dapat dikembangkan lebih lanjut dengan AJAX atau WebSocket untuk membuat tampilan lebih dinamis.