Webserver Control Output dengan ESP32 dan LED
Berikut adalah jobsheet praktikum tentang **Webserver Control Output Menggunakan ESP32 dan LED**.
Tujuan
1. Memahami cara membuat webserver menggunakan ESP32.
2. Mengontrol output (LED) melalui webserver.
Alat dan Bahan
1. ESP32
2. LED
3. Resistor 220Ω
4. Kabel jumper
5. Breadboard
6. Laptop/PC untuk pemrograman
Prasyarat
1. Memahami dasar pemrograman ESP32 menggunakan Arduino IDE.
2. Memahami cara kerja dasar LED dan webserver.
Skema Rangkaian
1. LED pada ESP32
– Sambungkan kaki panjang LED (anoda) ke pin GPIO 2 (atau pin lain yang Anda pilih).
– Sambungkan kaki pendek LED (katoda) ke resistor 220Ω, dan ujung resistor lainnya ke ground (GND).
Langkah-langkah Praktikum
1. Setting Arduino IDE
– Pastikan sudah menginstall board ESP32 di Arduino IDE.
– Pilih board ESP32 yang sesuai (misalnya ESP32 Dev Module) di **Tools > Board**.
– Pilih port yang sesuai di **Tools > Port**.
2. Pemrograman Webserver
– Buka Arduino IDE, buat sketch baru, dan salin kode berikut ini:
#include <WiFi.h>
#include <WebServer.h>
// Ganti dengan SSID dan password WiFi Anda
const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";
// Inisialisasi objek WebServer pada port 80
WebServer server(80);
// Pin LED yang digunakan
const int ledPin = 2;
void setup() {
// Mulai serial komunikasi
Serial.begin(115200);
// Sambungkan ke WiFi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Menampilkan alamat IP ESP32
Serial.println(WiFi.localIP());
// Set pin LED sebagai output
pinMode(ledPin, OUTPUT);
// Definisikan route untuk halaman utama dan kontrol LED
server.on("/", HTTP_GET, []() {
String html = "<html><body>";
html += "<h1>ESP32 Webserver</h1>";
html += "<p><a href=\"/on\"><button>Turn ON LED</button></a></p>";
html += "<p><a href=\"/off\"><button>Turn OFF LED</button></a></p>";
html += "</body></html>";
server.send(200, "text/html", html);
});
server.on("/on", HTTP_GET, []() {
digitalWrite(ledPin, HIGH); // LED ON
server.sendHeader("Location", "/"); // Redirect kembali ke halaman utama
server.send(303); // Status Code untuk redirect
});
server.on("/off", HTTP_GET, []() {
digitalWrite(ledPin, LOW); // LED OFF
server.sendHeader("Location", "/"); // Redirect kembali ke halaman utama
server.send(303); // Status Code untuk redirect
});
// Mulai web server
server.begin();
}
void loop() {
// Jalankan server untuk mendengarkan request
server.handleClient();
}
```3. Upload ke ESP32
– Setelah sketch selesai, klik tombol **Upload** di Arduino IDE untuk meng-upload program ke ESP32.
– Setelah upload selesai, buka Serial Monitor untuk melihat alamat IP ESP32 yang terhubung ke jaringan WiFi.
4. Akses Webserver
– Buka browser di perangkat yang sama dengan jaringan WiFi ESP32.
– Masukkan alamat IP ESP32 yang muncul di Serial Monitor pada browser.
– Halaman web akan muncul dengan dua tombol: **Turn ON LED** dan **Turn OFF LED**.
5. Kontrol LED
– Klik tombol **Turn ON LED** untuk menyalakan LED.
– Klik tombol **Turn OFF LED** untuk mematikan LED.
Pembahasan
– **Webserver:** Webserver pada ESP32 digunakan untuk menerima request dari browser dan memberikan respon berupa halaman HTML. Server ini juga dapat mengontrol output (LED) berdasarkan request yang diterima.
– **Kontrol LED:** Pada contoh ini, LED dihubungkan ke pin GPIO 2, dan program mengubah status pin tersebut berdasarkan request yang diterima di URL `/on` dan `/off`.
Tanya Jawab
1. **Apa yang terjadi jika alamat IP ESP32 tidak muncul di Serial Monitor?**
– Pastikan ESP32 terhubung ke WiFi dengan benar, dan periksa koneksi kabel serta pengaturan SSID dan password WiFi.
2. **Dapatkah LED dikendalikan lebih dari satu pin?**
– Bisa, Anda hanya perlu menambahkan pin lain dan membuat route tambahan untuk mengontrol LED lainnya.
Tugas Pengembangan Praktikum Webserver Control Output dengan ESP32 dan LED**
Bagian 1: Pengenalan dan Persiapan
1. Mempelajari Struktur Webserver ESP32:
– Pelajari cara kerja WebServer di ESP32, termasuk konsep routing (URL yang digunakan untuk kontrol LED).
– Diskusikan konsep HTTP request dan response pada server.
2. Menyiapkan Perangkat dan Koneksi:
– Pastikan ESP32 sudah terhubung ke jaringan WiFi.
– Verifikasi koneksi antara ESP32 dan LED dengan menyalakan LED secara manual menggunakan program sederhana.
Bagian 2: Modifikasi Program Webserver
1. Mengubah Tampilan Web
– Modifikasi kode HTML pada webserver sehingga tampilan lebih interaktif. Misalnya, menambahkan status LED yang berubah setiap kali tombol ditekan (misalnya “LED is ON” atau “LED is OFF”).
Tugas:
– Perbarui halaman web agar menampilkan status LED, bukan hanya tombol ON/OFF.
2. Menambahkan Kontrol LED dengan Waktu Delay:
– Programkan LED untuk menyala selama 5 detik setelah tombol “Turn ON LED” ditekan, kemudian secara otomatis mati setelah 5 detik. Hal yang sama berlaku untuk tombol “Turn OFF LED”.
Tugas:
– Implementasikan fitur untuk menambahkan delay 5 detik setelah menyalakan LED dan matikan LED setelah 5 detik.
3. Menambahkan Tampilan untuk Mengubah LED pada Pin Lain:
– Tambahkan kontrol untuk LED tambahan yang terhubung ke pin lain (misalnya GPIO 4), dan buat halaman web untuk mengontrol LED kedua ini.
Tugas:
– Modifikasi program untuk mengontrol LED kedua menggunakan pin GPIO 4 dan tambahkan tombol untuk menghidupkan dan mematikan LED kedua di halaman web.
Bagian 3: Pengujian dan Debugging
1. Pengujian Koneksi dan Fungsi:
– Setelah semua perubahan selesai, lakukan pengujian dengan mengakses webserver melalui browser.
– Pastikan LED dapat dikendalikan dari halaman web sesuai dengan yang diinginkan.
2. Menangani Error dan Bug:
– Jika ada error atau bug, debug kode dengan memeriksa serial monitor dan memperbaiki bagian yang tidak berfungsi, seperti kesalahan pin atau URL yang salah.
Bagian 4: Pengembangan Fitur Tambahan
1. Menambahkan Fitur Kontrol LED dengan Slider:
– Implementasikan kontrol LED menggunakan slider untuk mengatur kecerahan LED (dengan menggunakan PWM). Pastikan LED dapat diprogram untuk berangsur-angsur menyala sesuai dengan posisi slider.
Tugas:
– Tambahkan slider pada halaman web untuk mengontrol kecerahan LED dengan PWM.
2. Implementasi Kontrol LED dengan Timer:
– Tambahkan timer di halaman web yang memungkinkan pengguna untuk menentukan berapa lama LED harus menyala sebelum mati. Misalnya, slider timer yang memungkinkan pengaturan waktu antara 1 hingga 60 detik.
Tugas:
– Buat pengaturan waktu dengan slider untuk LED, sehingga LED dapat menyala sesuai durasi yang diinginkan.
3. Mencatat Data Kontrol ke Serial Monitor:
– Modifikasi program untuk menampilkan status kontrol LED di serial monitor setiap kali tombol ditekan atau slider digeser. Tampilkan waktu dan status LED (ON/OFF) serta pin yang terkontrol.
Tugas:
– Modifikasi kode untuk mencatat setiap interaksi dengan LED di serial monitor, termasuk pin yang dikendalikan dan durasi LED menyala.
Bagian 5: Penyelesaian dan Laporan
1.Menyusun Laporan Praktikum:
– Setiap peserta diminta untuk membuat laporan yang mencakup:
– Penjelasan tentang webserver yang dibuat.
– Modifikasi yang dilakukan selama praktikum (tampilan web, kontrol LED, slider, timer).
– Kendala yang dihadapi dan bagaimana cara mengatasinya.
Baca juga: ESP32: Panduan Komprehensif untuk Pemula hingga Ahli (IoT, Pemrograman, & Proyek) untuk memahami roadmap lengkap belajar ESP32 dari dasar hingga proyek IoT.
