Dasar ESP8266 - Web Server Internal
Halo sobat Nanobot, pada postingan ini kita akan belajar membuat web server internal di dalam ESP8266. Web server ini berfungsi sebagai User Interface dari alat yang kita buat bisa untuk mengatur perintah alat atau hanya sebagai tampilan saja. Tertarik membuatnya? Mari kita buat

Apa itu web server?
Web Server adalah layanan yang berfungsi sebagai penerima permintaan yang dikirimkan melalui browser, kemudian memberikan tanggapan dalam bentuk halaman situs atau lebih umum disebut HTML
Pada percobaan ini perangkat yang dibutuhkan adalah
- NodeMcu (Dapat dibeli di toko kami, KLIK DISINI )
- Shield NodeMcu (Dapat dibeli di toko kami, KLIK DISINI)
- Kabel data dengan port micro USB (Dapat dibeli di toko kami, KLIK DISINI )
- Laptop
Berikut ini adalah programnya
/* Tutorial Web server internal ESP8266
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> //Library Web Server pada ESP8266
const char* ssid = "xxxx"; //Ubah sesuai WiFi yang digunakan
const char* password = "xxxxxx"; //Ubah sesuai WiFi yang digunakan
ESP8266WebServer server(80); //Menyatakan Webserver pada port 80
void setup() {
Serial.begin(115200);
delay(10);
// Konfigurasi WiFi
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Membuat tampilan Webpage
server.on("/", []() {
server.send(200, "text/plain", "Ini tampilan awal web server kita");
});
// Bagian ini opsional jika ingin membuat page lain
server.on("/kedua", []() {
server.send(200, "text/plain", "Ini tampilan halaman lain");
});
server.begin();
Serial.println("Webserver dijalankan");
}
void loop() {
server.handleClient();
}
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> //Library Web Server pada ESP8266
const char* ssid = "xxxx"; //Ubah sesuai WiFi yang digunakan
const char* password = "xxxxxx"; //Ubah sesuai WiFi yang digunakan
ESP8266WebServer server(80); //Menyatakan Webserver pada port 80
void setup() {
Serial.begin(115200);
delay(10);
// Konfigurasi WiFi
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
// Membuat tampilan Webpage
server.on("/", []() {
server.send(200, "text/plain", "Ini tampilan awal web server kita");
});
// Bagian ini opsional jika ingin membuat page lain
server.on("/kedua", []() {
server.send(200, "text/plain", "Ini tampilan halaman lain");
});
server.begin();
Serial.println("Webserver dijalankan");
}
void loop() {
server.handleClient();
}
Langkah percobaan :
Pertama, masukkan program ke dalam Arduino IDE
Gambar 1. Program dalam Arduino IDE
Kedua, Upload program ke NodeMcu. Jangan lupa atur board ke NodeMcu dan sesuaikan port nya
Gambar 2. Pengaturan Board dan Port
Ketiga, Buka serial monitor lalu perhatikan IP address yang muncul
Gambar 3. IP address di serial monitor
Keempat, buka browser dan ketik IP address tersebut maka browser akan menampilkan web server yang sudah kita buat
Gambar 4. Tampilan awal web server
Kelima, jika kita tambahkan "/kedua" dibelakang IP address maka kita akan masuk ke halaman lainnya
Gambar 5. Tampilan web kedua
Mudah bukan? Jika kalian ingin menampilkan web server yang lebih bagus silahkan belajar tentang HTML dan CSS
Sekian tutorial web server ini, jika ada kesulitan silahkan komentar dibawah yaa
Komentar
Posting Komentar