Setting Parameter Termudah Dengan ESP32 HTML Form

Why ESP32 Form

Mengapa ESP32 form Html? ini adalah kata pertama saya dalam membuat artikel ini? Apa sih benefit nya? ke untungan nya? jika kita melihat beberapa alat seperti router pada indihome, yang semua konfigurasi parameter nya melalui form browser. Sehingga memudahkan dalam setting parameter. Awal nya menggunakan button dan LCD. Dengan Form html ini, jauh lebih mudah, bahkan menghemat komponen dan waktu. Button hemat, LCD hemat.

ESP32, chip kecil yang memiliki wifi dan bluetooth ini bisa di jadikan access point, hostpot. Kemudian akses ip nya di browser smartphone kita, kemudian input parameter yang ada di form html nya. Parameter ini bisa kita olah, apakah di simpan di EEPROM internal atau spiff di ESP32 nya. Dengan cara seperti ini. Produk custome ESP32 kita nanti nya bisa di jual ke user tanpa harus di rekode. Tingal setting parameter jalan. 🙂 keren bukan?

Membaca Sensor URM14 RS485 dengan ESP32 Arduino

4G GSM Modul Arduino SIM7600 Cocok Untuk ESP32, STM32 atau Arduino Mega

Nah, sekarang bagaimana kah cara nya? setting parameter dengan ESP32 Form? apakah ada cara termudah? apakah kali ini mikroavr.com membuat tutorial yang lebih mudah dari tutorial yang sudah ada? yuk kita buat.

Kode Setting Parameter

Kita akan membuat 3 parameter dalam settingan ini, yang pertama adalah SSID wifi, Password wifi dan terakhir adalah token. Untuk form paramater nya adalah sebagai berikut.

Ada tiga input text,

Input text pertama kita beri nama wifi_name
Input text ke dua kita beri nama pass_name
dan input text ke tiga kita beri nama token

Ketiga nama di atas akan kita ambil data nya melalui form HTML nya. yuk kita lihat source code nya

Program ESP32 form HTML

Program nya sebagai berikut:

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

//IPAddress local_ip(192,168,8,8);
//IPAddress gateway(192,168,8,9);
//IPAddress subnet(255,255,255,0);

/* Set these to your desired credentials. */const char *ssid = "mikroavr";
const char *password = "12345678";

WebServer server(80);

const char index_html[] PROGMEM= R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  body {font-family: Arial, Helvetica, sans-serif;}
  form {border: 3px solid #f1f1f1;}
  
  input[type=text], input[type=number] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.container {
  padding: 16px;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
  </style>
</head>
<body>
  <h2> SETTING PARAMETER</h2>
  <form action="/setting">
  <div class = "container">
    <label for="uname"><b>SSID</b></label>
    <input type="text" step="any" placeholder="nama wifi" name="wifi_name" required>

    <label for="psw"><b>PASS</b></label>
    <input type="password"  step="any" placeholder="password" name="pass_name" required>
    
    <label for="uname"><b>TOKEN</b></label>
    <input type="text" placeholder="TOKEN AUTH" name="token" required>
    <button type="submit">SAVE</button>
    </div>
  </form>
</body>
</html>
)rawliteral";


void handleRoot() {
  server.send(200, "text/html", index_html);
}

void handleSetting(){
  String str_wifi_name = server.arg("wifi_name");
  String str_pass_name= server.arg("pass_name");
  String str_token = server.arg("token");

  Serial.print("nama wifi : ");Serial.println(str_wifi_name);
  Serial.print("pass wifi : ");Serial.println(str_pass_name);
  Serial.print("token auth: ");Serial.println(str_token);
  
  server.send(200, "text/html", index_html);
  delay(1000);
}
void setup() {
  delay(1000);
  Serial.begin(115200);
   
  Serial.println();
  Serial.print("Configuring access point...");
  /* You can remove the password parameter if you want the AP to be open. */  //WiFi.softAPConfig(local_ip,gateway,subnet);
  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  
  server.on("/", handleRoot);
  server.on("/setting",handleSetting);
  server.begin();
  Serial.println("HTTP server started");
}
void loop() {
  server.handleClient();
}

Penjelasan Kode

 /* Set these to your desired credentials. */ 
const char *ssid = "mikroavr"; 
const char *password = "12345678"; 
WebServer server(80);

Kode di atas akan menjadi nama dan password ESP32 sebagai FORM. jadi untuk akses wifi nya, pilih nama wifi nya dan password nya sesuai dengan program di atas.

Selanjut nya yang penting adalah program di bagian HTML form nya. Perhatikan code program pada gambar di bawah ini

Perhatikan name pada input text di gambar di sampin

parameter input text pada program di atas akan kita ambil dengan code seperti di bawah ini.

 
void handleSetting(){   
String str_wifi_name = server.arg("wifi_name");   
String str_pass_name= server.arg("pass_name");   
String str_token = server.arg("token");   
Serial.print("nama wifi : ");Serial.println(str_wifi_name);   
Serial.print("pass wifi : ");Serial.println(str_pass_name);   
Serial.print("token auth: ");Serial.println(str_token);      
server.send(200, "text/html", index_html);   delay(1000); }

Nah setelah kita mendapatkan parameter nya, tinggal kita rubah sesuai dengan kebutuhan kita. Silahkan di kembangkan tutorial dia atas sesuai dengan ke butuhan teman-teman. Oh ia ada satu hal penting jika teman-teman ingin menjadikan ESP32 sebagai Access point pada mode setting parameter, kemudian ESP32 sebagai client ( akses internet ke hostpot) setelah setting parameter. Cara ini bisa di atasi dengan menggunakan dip switch. Jika dip switch di on kan akan masuk ke mode setting parameter. setelah di save bisa di off kan dip switch sebagai mode running.

Sekian dulu tutorial kita hari ini, Jika teman-teman tertarik dengan ESP32 atau hal lain bisa whatsapp kita dengan clik tombol di bawah ini,

Thanks