Menginput Data ke dalam ESP32 Menggunakan HTML Form

April 26, 2020

Halo teman - teman semua !!

Kembali lagi bersama aku, dalam blog pendidikan ini. Kali ini aku akan berbagai ilmu lagi mengenai ESP32 yaitu bagaimana cara menginput data dengan HTML Form menggunakan ESP32. Dalam blog ini akan diajari cara melakukannya secara jelas dan terinci. Aku mengerjakan proyek ini dengan panduan website www.randomnerdtutorials.com. Oleh karena itu aku mengucapkan terimakasih sekali kepada blog ini, karena dengan adanya bantuan web ini pengerjaan proyek ini menjadi terlihat cukup sederhana. Tanpa banyak berbasas - basi lagi, langsung aja kita masuk ke pembahasan caranya. Cekidot!!!

Code

Dalam pengerjaan proyek ini, kalian hanya membutuhkan ESP32 dan PC. Berikut adalah kode yang harus kalian salin ke dalam Arduino IDE. Jangan lupa untuk mengganti bagian SSID dan Password sesuai dengan milik kalian.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-esp8266-input-data-html-form/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

#include <Arduino.h>
#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>

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 <ESP_IP>/get?input1=<inputMessage>
  server.on("/get", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    String inputParam;
    // GET input1 value on <ESP_IP>/get?input1=<inputMessage>
    if (request->hasParam(PARAM_INPUT_1)) {
      inputMessage = request->getParam(PARAM_INPUT_1)->value();
      inputParam = PARAM_INPUT_1;
    }
    // GET input2 value on <ESP_IP>/get?input2=<inputMessage>
    else if (request->hasParam(PARAM_INPUT_2)) {
      inputMessage = request->getParam(PARAM_INPUT_2)->value();
      inputParam = PARAM_INPUT_2;
    }
    // GET input3 value on <ESP_IP>/get?input3=<inputMessage>
    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 +
                                     "<br><a href=\"/\">Return to Home Page</a>");
  });
  server.onNotFound(notFound);
  server.begin();
}

void loop() {
  
}

Demonstration

Setelah kalian selesai membuat konfigurasi SSID dan Password kalian, upload kode tersebut ke dalam ESP32 milik kalian. Setelah selesai, buka Serial Monitor dengan baud rate 115200 dan tekan tombol EN pada ESP32 untuk menemukan IP Address dari ESP milik kalian.

Setelah itu buka browser kalian dan ketikkan IP Address tersebut. Maka akan muncul tampilan sebagai berikut.

Kalian bisa mencoba memasukkan inputan di salah satu kolom. Aku beri contoh, aku memasukkan namaku sendiri yaitu "Daniel Hutabalian" ke dalam input 1 seperti ini.

Setelah itu, klik submit dan akan muncul tulisan seperti ini yang menandakan data telah berhasil di-input ke dalam ESP32.

Setelah itu, kembali lagi ke serial monitor kalian. Kalian akan melihat bahwa data yang kalian masukkan akan muncul di dalam Serial Monitor yang menandakan ESP32 telah berhasil menyimpan data tersebut. Berikut adalah contoh milikku.

Berikut adalah video demonstrasinya agar lebih jelas dilihat oleh kalian.

Penutup

Demikianlah penjelasan dari aku teman - teman. Apabila ada yang kurang jelas atau kurang mengerti mengenai penjelasanku, dapat menanyakannya di kolom komentar. Secepat mungkin aku akan membalas pesan atau pertanyaan dari kalian. Terimakasih buat teman - teman yang sudah membaca artikel blog ini dan sampai jumpa di artikel blog berikutnnya !!!

Referensi : https://randomnerdtutorials.com/esp32-esp8266-input-data-html-form/

Cari Blog Ini

KARYA DANIEL