Kamis, April 15, 2021
mikroavr.com
No Result
View All Result
  • Login
  • Arduino
    • Sensor
    • program Arduino
  • Project
  • Produk
  • IOT
No Result
View All Result
mikroavr
No Result
View All Result
Home Arduino

Setting Parameter Dengan ESP32 HTML Form melalui Access Point

Jimmi Sitepu by Jimmi Sitepu
Desember 10, 2020
0 0
0
Setting Parameter Dengan ESP32 HTML Form melalui Access Point
0
SHARES
485
VIEWS
Share on FacebookShare on Twitter

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?

READ ALSO

Sensor Tekanan Air Dan Udara Dengan Arduino

Mengirim Data Sensor Suhu dengan Komunikasi LoRa

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,

  1. Input text pertama kita beri nama wifi_name
  2. Input text ke dua kita beri nama pass_name
  3. 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

Tags: esp32iot
ShareTweetShare
Previous Post

Mengirim Data Sensor Suhu dengan Komunikasi LoRa

Next Post

Sensor Tekanan Air Dan Udara Dengan Arduino

Jimmi Sitepu

Jimmi Sitepu

Hobbyist Embedded System, Robotic, IOT and write all about them. So we have nice quote "Learning and Sharing"

Related Posts

Arduino

Sensor Tekanan Air Dan Udara Dengan Arduino

Desember 20, 2020
Mengirim Data Sensor Suhu dengan Komunikasi LoRa
Arduino

Mengirim Data Sensor Suhu dengan Komunikasi LoRa

November 26, 2020
Memproteksi Program Esp32 dengan Chip Id
Arduino

Memproteksi Program Esp32 dengan Chip Id

November 25, 2020
Mengenal Pin Out ESP32 Agar Tidak Salah Dalam Penggunaan nya
Arduino

Mengenal Pin Out ESP32 Agar Tidak Salah Dalam Penggunaan nya

Oktober 2, 2020
Merubah ATmega128 menjadi Arduino ATmega128
Arduino

Merubah ATmega128 menjadi Arduino ATmega128

September 29, 2020
LoRa Shield Arduino Support Arduino Uno, Arduino mega dan Arduino Mega128
Arduino

LoRa Shield Arduino Support Arduino Uno, Arduino mega dan Arduino Mega128

Oktober 15, 2020
Next Post

Sensor Tekanan Air Dan Udara Dengan Arduino

Macam Macam Gerbang Logika Pada Sistem Elektronika Digital

Macam Macam Gerbang Logika Pada Sistem Elektronika Digital

Please login to join discussion

Tulisan Terbaru

Macam Macam Gerbang Logika Pada Sistem Elektronika Digital

Macam Macam Gerbang Logika Pada Sistem Elektronika Digital

Januari 4, 2021

Sensor Tekanan Air Dan Udara Dengan Arduino

Desember 20, 2020
Setting Parameter Dengan ESP32 HTML Form melalui Access Point

Setting Parameter Dengan ESP32 HTML Form melalui Access Point

Desember 10, 2020
Mengirim Data Sensor Suhu dengan Komunikasi LoRa

Mengirim Data Sensor Suhu dengan Komunikasi LoRa

November 26, 2020
Memproteksi Program Esp32 dengan Chip Id

Memproteksi Program Esp32 dengan Chip Id

November 25, 2020
Mengenal Pin Out ESP32 Agar Tidak Salah Dalam Penggunaan nya

Mengenal Pin Out ESP32 Agar Tidak Salah Dalam Penggunaan nya

Oktober 2, 2020

Browse by Category

  • Arduino
  • Ebook
  • ESP32
  • IOT
  • jasa
  • Komponen
  • PCB
  • Produk
  • program Arduino
  • Project
  • Rangkaian
  • Sensor
  • Tips
  • Uncategorized

Recent News

Macam Macam Gerbang Logika Pada Sistem Elektronika Digital

Macam Macam Gerbang Logika Pada Sistem Elektronika Digital

Januari 4, 2021

Sensor Tekanan Air Dan Udara Dengan Arduino

Desember 20, 2020
  • About US
  • Blog
  • MIKROAVR

© 2020 mikroavr.com - Learning and sharing.

No Result
View All Result
  • About US
  • Blog
  • MIKROAVR

© 2020 mikroavr.com - Learning and sharing.

Welcome Back!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In