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.
