ESP32 in Your Area: Input Data on HTML from ESP32

Halo, ketemu lagi di blog ESP32 in Your Area.

Gimana blog-blog selama ini?

Gak terasa nih udah mau akhir semester.

Awalnya aku buat blog ini karena buat tugas dari suatu mata kuliah tapi sampai saat ini aku menikmati setiap project yang aku kerjakan untuk dipublikasikan di blog ini hehe..

Oke ini adalah blog dua terakhir dari aku (semoga nanti aku bisa ngoprek dan publish di blog ini lagi meskipun sudah lewat semester mata kuliah ini ya, AMINN)

Nah di modul ini, kita akan membuat bagaimana caranya menginput data ke HTML melalui ESP32.

Kita hanya memerlukan ESP32 Dev Board (30 pins), Arduino IDE, dan tentunya USB Cable.

Jangan lupa untuk mendowload librarynya.

Caranya, download as ZIP pada kedua github tersebut, lalu extract.

Kemudian rename dengan menghapus kata "-master" pada kedua filenya.

Terakhir, pindahkan file tersebut ke folder library Arduino IDE (direktori tempat kamu menyimpan dan melakukan instalasi Arduino IDE).

Dan ini dia kode programnya.

#include 
#ifdef ESP32
  #include 
  #include 
#else
  #include 
  #include 
#endif
#include 

AsyncWebServer server(80);

// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const char* PARAM_INPUT_1 = "input1";
const char* PARAM_INPUT_2 = "input2";
const char* PARAM_INPUT_3 = "input3";

// HTML web page to handle 3 input fields (input1, input2, input3)
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>ESP Input Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head><body>
  <form action="/get">
    input1: <input type="text" name="input1">
    <input type="submit" value="Submit">
  </form><br>
  <form action="/get">
    input2: <input type="text" name="input2">
    <input type="submit" value="Submit">
  </form><br>
  <form action="/get">
    input3: <input type="text" name="input3">
    <input type="submit" value="Submit">
  </form>
</body></html>)rawliteral";

void notFound(AsyncWebServerRequest *request) {
  request->send(404, "text/plain", "Not found");
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("WiFi Failed!");
    return;
  }
  Serial.println();
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Send web page with input fields to client
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

  // Send a GET request to /get?input1=
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on /get?input1=
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
    }
    // GET input2 value on /get?input2=
    else if (request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_2)->value();
      inputParam = PARAM_INPUT_2;
    }
    // GET input3 value on /get?input3=
    else if (request->hasParam(PARAM_INPUT_3)) {
      inputMessage = request->getParam(PARAM_INPUT_3)->value();
      inputParam = PARAM_INPUT_3;
    }
    else {
      inputMessage = "No message sent";
      inputParam = "none";
    }
    Serial.println(inputMessage);
    request->send(200, "text/html", "HTTP GET request sent to your ESP on input field (" 
                                     + inputParam + ") with value: " + inputMessage +
                                     "
Return to Home Page");
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {
   }

Untuk dua variabel di bawah ini, isi ssid dengan nama koneksi yang sedang tersambung ke device kalian (singkatnya WiFi siapa yang sedang digunakan) dan tentunya password itu diisi dengan password dari koneksi yang tersambung ke device.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Setelah itu, upload deh projectnya.

Setelah sukses, buka serial monitor dan jangan lupa untuk menekan tombol en (atau enable) pada ESP32 Board.

Tunggu, hingga muncul seperti ini.

Masukkan IP Address yang ditampilkan pada serial monitor Arduino IDE ke address bar pada web browser kamu. Jika berhasil, akan tampak seperti gambar di atas.

Kemudian jika kalian input lalu klik submit, maka akan ditampilkan seperti gambar di bawah ini.