LAPORAN PRAKTIKUM
IMPLEMENTASI ESP32 WEB SERVER DENGAN SISTEM PASSKEY
BERBASIS ACCESS POINT DAN MICROSD MENGGUNAKAN WOKWI
Disusun oleh :
Fandy Fernanda Yapari 24051204227
Tri Rianto Utomo 24051204104
Rochmad Balya Imron Khan 24051204279
Sulthan Hamdani Sahvirdan 24051204129
BAB I
PENDAHULUAN
1.1 Latar Belakang
Perkembangan mikrokontroler telah memungkinkan perangkat elektronik untuk tidak hanya bekerja berdasarkan program yang tersimpan di dalam mikrokontroler, tetapi juga dapat berkomunikasi dengan perangkat lain melalui jaringan. Salah satu mikrokontroler yang mendukung kemampuan tersebut adalah ESP32. ESP32 memiliki fitur komunikasi nirkabel seperti Wi-Fi dan Bluetooth sehingga dapat digunakan untuk mengembangkan berbagai aplikasi berbasis Internet of Things (IoT).
Pada penerapannya, ESP32 dapat digunakan sebagai Access Point (AP) sehingga perangkat lain dapat terhubung langsung ke jaringan yang dibuat oleh ESP32. Selain itu, ESP32 juga dapat digunakan untuk menjalankan Web Server yang memungkinkan pengguna berinteraksi dengan sistem melalui halaman web. Konsep tersebut dapat dimanfaatkan untuk membuat sistem autentikasi sederhana menggunakan kombinasi key dan password.
Pada Modul 4, salah satu praktik yang dilakukan adalah WebServer–Passkey dengan ESP32 dalam mode Access Point. Sistem tersebut menggunakan halaman web sebagai antarmuka pengguna dan media penyimpanan untuk menyimpan pasangan key dan password. Input yang diberikan pengguna kemudian dapat dibandingkan dengan data yang tersimpan untuk menentukan apakah akses diterima atau ditolak.
Berdasarkan konsep tersebut, pada tugas ini dibuat simulasi sistem ESP32 Web Server dengan Passkey menggunakan platform Wokwi. Sistem menggunakan ESP32 sebagai pengendali utama, MicroSD sebagai media penyimpanan data key dan password, serta buzzer sebagai indikator ketika proses autentikasi berhasil. Melalui simulasi ini, dapat dipelajari penerapan komunikasi Wi-Fi, Web Server, pembacaan data dari MicroSD, serta pengendalian output berdasarkan hasil validasi data.
1.2 Rumusan Masalah
• Bagaimana membuat ESP32 bekerja sebagai Access Point?
• Bagaimana membuat Web Server sederhana menggunakan ESP32?
• Bagaimana menyimpan dan membaca data key dan password menggunakan MicroSD?
• Bagaimana melakukan validasi key dan password yang dimasukkan pengguna?
• Bagaimana menggunakan buzzer sebagai indikator ketika autentikasi berhasil?
1.3 Tujuan
• Memahami penggunaan ESP32 sebagai Access Point.
• Memahami proses pembuatan Web Server pada ESP32.
• Menerapkan MicroSD sebagai media penyimpanan data key dan password.
• Membuat sistem autentikasi sederhana menggunakan key dan password.
• Menggunakan buzzer sebagai indikator keberhasilan autentikasi.
• Melakukan simulasi sistem menggunakan Wokwi.
1.4 Manfaat
• Menambah pemahaman mengenai komunikasi Wi-Fi pada ESP32.
• Memahami konsep dasar Web Server pada mikrokontroler.
• Mengetahui cara membaca data dari media penyimpanan MicroSD.
• Melatih kemampuan membuat sistem autentikasi sederhana berbasis mikrokontroler.
• Memberikan pengalaman melakukan simulasi sistem IoT menggunakan Wokwi.
BAB II
TINJAUAN PUSTAKA
2.1 Dasar Teori
2.1.1 ESP32
ESP32 digunakan sebagai pengendali utama pada sistem. Pada proyek Wokwi, ESP32 menjalankan fungsi komunikasi Wi-Fi, Web Server, pembacaan MicroSD, dan pengendalian buzzer. Seluruh proses tersebut dijalankan melalui program yang tersimpan pada ESP32.
2.1.2 Access Point
Access Point pada proyek ini dibuat langsung oleh ESP32 menggunakan fungsi WiFi.softAP(). ESP32 membuat jaringan dengan SSID ESP32-PASSKEY dan password 12345678. Perangkat pengguna dapat terhubung ke jaringan tersebut untuk mengakses Web Server yang berjalan pada ESP32.
2.1.3 Web Server
Web Server digunakan sebagai antarmuka untuk memasukkan key dan password. Program menggunakan library WebServer dan membuat server pada port 80. Halaman utama menyediakan dua input, yaitu Key dan Pass, kemudian mengirim data ke endpoint /login menggunakan metode GET.
Program menangani alamat root melalui server.on("/", handleRoot) dan proses login melalui server.on("/login", handleLogin). Setelah menerima data, sistem melakukan pemeriksaan terhadap data yang tersimpan pada MicroSD.
2.1.4 MicroSD sebagai Media Penyimpanan
MicroSD digunakan untuk menyimpan pasangan key dan password dalam file passkey.csv. Program membuka file tersebut menggunakan SD.open("/passkey.csv"), membaca setiap baris, kemudian memisahkan key dan password berdasarkan tanda koma. Data hasil pembacaan digunakan sebagai acuan proses autentikasi.
Program menggunakan GPIO 5 sebagai chip select MicroSD. Library SPI digunakan bersama library SD untuk mengakses media penyimpanan.
2.1.5 Sistem Passkey
Sistem passkey melakukan pencocokan antara key dan password yang dimasukkan pengguna dengan data yang tersimpan pada file MicroSD. Jika kedua nilai cocok pada satu baris data, sistem memberikan status Access Granted. Jika tidak cocok, sistem memberikan status Access Denied.
2.1.6 Buzzer sebagai Output
Buzzer digunakan sebagai indikator ketika autentikasi berhasil. Buzzer terhubung pada GPIO 25. Fungsi buzzerBeep() menghasilkan nada 1000 Hz selama 500 milidetik kemudian mematikannya. Pada saat ESP32 mulai, buzzer juga digunakan sebagai indikator awal selama dua detik.
2.1.7 Wokwi
Wokwi digunakan sebagai simulator untuk menguji program ESP32, MicroSD, buzzer, Access Point, dan Web Server secara virtual. Proyek yang digunakan pada tugas ini adalah proyek Wokwi yang diberikan untuk kelompok.
2.2 Komponen yang Digunakan
BAB III
PEMBAHASAN
3.1 Deskripsi Simulasi
Simulasi menggunakan ESP32 sebagai pengendali utama. ESP32 membuat jaringan Wi-Fi sendiri dalam mode Access Point, kemudian menjalankan Web Server pada port 80. Pengguna dapat membuka halaman web untuk memasukkan key dan password.
Data key dan password yang menjadi acuan autentikasi disimpan pada file passkey.csv di MicroSD. Ketika pengguna mengirim data login, ESP32 membaca isi file tersebut dan membandingkan pasangan key dan password. Jika ditemukan pasangan yang sesuai, sistem menampilkan Access Granted dan mengaktifkan buzzer. Jika tidak sesuai, sistem menampilkan Access Denied dan buzzer tidak diaktifkan.
Alur kerja sistem adalah pengguna terhubung ke Access Point ESP32 → pengguna membuka Web Server → memasukkan key dan password → ESP32 membaca passkey.csv → sistem melakukan validasi → hasil autentikasi ditampilkan → buzzer berbunyi jika data 
3.2 Konfigurasi Rangkaian
Konfigurasi tersebut mengikuti program pada proyek Wokwi. ESP32 menjadi pusat sistem, sedangkan MicroSD menyediakan data yang digunakan untuk proses validasi dan buzzer memberikan indikator ketika autentikasi berhasil.
3.3 Program
#include <WiFi.h>
#include <WebServer.h>
#include <SPI.h>
#include <SD.h>
const char* ssid = "ESP32-PASSKEY";
const char* password = "12345678";
WebServer server(80);
#define BUZZER 25
#define SD_CS 5
void buzzerBeep() {
tone(BUZZER, 1000);
delay(500);
noTone(BUZZER);
}
bool cekPasskey(String key, String pass) {
bool cocok = false;
File file = SD.open("/passkey.csv");
if (file) {
while (file.available()) {
String line = file.readStringUntil('\n');
line.trim();
int koma = line.indexOf(',');
if (koma > 0) {
String keyFile = line.substring(0, koma);
String passFile = line.substring(koma + 1);
keyFile.trim();
passFile.trim();
if (key == keyFile && pass == passFile) {
cocok = true;
break;
}
}
}
file.close();
}
return cocok;
}
void handleRoot() {
String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 Passkey</title>
<style>
body {
font-family: Arial;
text-align: center;
margin-top: 50px;
background-color: #f2f2f2;
}
.box {
width: 300px;
margin: auto;
padding: 25px;
background-color: white;
border: 1px solid #ccc;
border-radius: 10px;
}
input {
width: 90%;
padding: 10px;
margin: 8px;
box-sizing: border-box;
}
button {
padding: 10px 25px;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<h2>ESP32 PASSKEY</h2>
<form action="/login" method="GET">
<label>Key</label><br>
<input type="text" name="key" placeholder="Masukkan Key" required>
<br>
<label>Pass</label><br>
<input type="password" name="pass" placeholder="Masukkan Password" required>
<br>
<button type="submit">SUBMIT</button>
</form>
</div>
</body>
</html>
)rawliteral";
server.send(200, "text/html", html);
}
void handleLogin() {
String key = server.arg("key");
String pass = server.arg("pass");
bool cocok = cekPasskey(key, pass);
if (cocok) {
buzzerBeep();
server.send(200, "text/html",
"<html><body style='text-align:center;'>"
"<h2>Access Granted</h2>"
"<p>Key dan password benar!</p>"
"<a href='/'>Kembali</a>"
"</body></html>");
} else {
server.send(200, "text/html",
"<html><body style='text-align:center;'>"
"<h2>Access Denied</h2>"
"<p>Key atau password salah!</p>"
"<a href='/'>Coba Lagi</a>"
"</body></html>");
}
}
void testLogin() {
if (Serial.available()) {
String input = Serial.readStringUntil('\n');
input.trim();
int koma = input.indexOf(',');
if (koma > 0) {
String key = input.substring(0, koma);
String pass = input.substring(koma + 1);
key.trim();
pass.trim();
bool cocok = cekPasskey(key, pass);
Serial.println();
Serial.println("=== HASIL LOGIN ===");
Serial.print("Key : ");
Serial.println(key);
Serial.print("Pass : ");
Serial.println(pass);
if (cocok) {
Serial.println("Access Granted!");
Serial.println("Buzzer ON");
buzzerBeep();
} else {
Serial.println("Access Denied!");
Serial.println("Buzzer OFF");
}
Serial.println("===================");
Serial.println();
}
}
}
void setup() {
Serial.begin(115200);
pinMode(BUZZER, OUTPUT);
tone(BUZZER, 1000);
delay(2000);
noTone(BUZZER);
if (!SD.begin(SD_CS)) {
Serial.println("SD Card gagal!");
} else {
Serial.println("SD Card berhasil!");
}
File file = SD.open("/passkey.csv");
if (file) {
Serial.println("Isi passkey.csv:");
while (file.available()) {
Serial.write(file.read());
}
file.close();
Serial.println();
Serial.println("File berhasil dibaca!");
} else {
Serial.println("File passkey.csv tidak ditemukan!");
}
WiFi.softAP(ssid, password);
Serial.println("WiFi AP aktif");
Serial.print("IP Address: ");
Serial.println(WiFi.softAPIP());
server.on("/", handleRoot);
server.on("/login", handleLogin);
server.begin();
Serial.println("Web Server aktif");
Serial.println();
Serial.println("Masukkan Key dan Pass dengan format:");
Serial.println("key,password");
Serial.println("Contoh: admin,1234");
}
void loop() {
server.handleClient();
testLogin();
}
3.4 Penjelasan Program
Bagian awal program memanggil library WiFi, WebServer, SPI, dan SD. WiFi digunakan untuk membuat Access Point, WebServer digunakan untuk melayani permintaan halaman web, sedangkan SPI dan SD digunakan untuk mengakses MicroSD.
Fungsi buzzerBeep() mengaktifkan buzzer pada GPIO 25 dengan frekuensi 1000 Hz selama 500 milidetik. Fungsi cekPasskey() membuka file passkey.csv, membaca setiap baris, memisahkan data berdasarkan koma, kemudian membandingkan key dan password yang diberikan dengan data pada file.
Fungsi handleRoot() membuat halaman login. Pengguna memasukkan key dan password melalui form. Data tersebut dikirim ke alamat /login. Fungsi handleLogin() mengambil parameter key dan pass, kemudian memanggil cekPasskey(). Jika cocok, halaman Access Granted dikirim dan buzzer berbunyi. Jika tidak cocok, halaman Access Denied dikirim.
Pada setup(), program memulai Serial Monitor pada 115200 baud, menyiapkan buzzer, menginisialisasi MicroSD, membaca passkey.csv, membuat Access Point, menampilkan alamat IP, dan menjalankan Web Server. Pada loop(), server menangani permintaan klien dan testLogin() memungkinkan pengujian login melalui Serial Monitor.
3.5 Data pada MicroSD
Program menggunakan file bernama passkey.csv sebagai sumber data autentikasi. Format data yang dibaca program adalah pasangan key dan password yang dipisahkan oleh tanda koma. Program membaca file secara baris per baris, kemudian memisahkan bagian sebelum koma sebagai key dan bagian setelah koma sebagai password. Nilai pada file MicroSD menjadi acuan pencocokan pada fungsi cekPasskey().
Program juga menyediakan contoh format input Serial berupa key,password dengan contoh penulisan admin,1234. Contoh tersebut merupakan format input yang ditampilkan oleh program dan bukan pernyataan bahwa pasangan tersebut merupakan isi aktual file passkey.csv.
3.6 Hasil Pengujian
Pengujian dilakukan berdasarkan fungsi yang tersedia pada proyek Wokwi, yaitu inisialisasi MicroSD, pembuatan Access Point, akses halaman Web Server, validasi key dan password, serta pengujian melalui Serial Monitor. Hasil yang perlu diamati pada simulasi adalah sebagai berikut.
Tabel tersebut menunjukkan perilaku yang diprogram pada sistem. Pengujian aktual dapat dibuktikan dengan screenshot rangkaian Wokwi, halaman login, dan Serial Monitor setelah simulasi dijalankan.
3.7 Kaitan dengan Modul 4
Proyek ini menerapkan praktik WebServer–Passkey dengan ESP32 dalam mode Access Point yang menjadi dasar pembahasan pada BAB I. Penerapannya terlihat dari ESP32 yang membuat jaringan sendiri melalui WiFi.softAP(), menjalankan Web Server pada port 80, menerima key dan password melalui halaman web, serta melakukan validasi berdasarkan data yang tersimpan.
Penggunaan MicroSD berfungsi sebagai media penyimpanan data passkey. Data dibaca dari file passkey.csv dan digunakan sebagai acuan pencocokan. Buzzer digunakan sebagai output untuk memberikan indikator ketika autentikasi berhasil.
Dengan demikian, bagian utama yang diterapkan dalam simulasi adalah komunikasi Wi-Fi, Access Point, Web Server, penyimpanan MicroSD, validasi data, dan pengendalian output buzzer.
3.8 Link Simulasi Wokwi
https://wokwi.com/projects/476954542317163521
BAB IV
PENUTUP
4.1 Kesimpulan
Simulasi ini menerapkan ESP32 sebagai Access Point dan Web Server untuk membuat sistem autentikasi berbasis key dan password. Data autentikasi dibaca dari file passkey.csv pada MicroSD, kemudian dibandingkan dengan input pengguna melalui halaman web atau Serial Monitor.
Program mengatur hasil validasi menjadi dua kondisi. Jika key dan password sesuai dengan data pada MicroSD, sistem memberikan status Access Granted dan mengaktifkan buzzer. Jika data tidak sesuai, sistem memberikan status Access Denied. Wokwi digunakan sebagai media simulasi untuk menguji rangkaian dan program secara virtual.
4.2 Saran
• Pengujian dapat dilengkapi dengan screenshot halaman login, hasil Access Granted, hasil Access Denied, dan Serial Monitor.
• Sistem dapat dikembangkan dengan menambahkan lebih banyak data passkey pada MicroSD.
• Sistem dapat dikembangkan dengan menambahkan halaman informasi atau pengelolaan data autentikasi.
• Implementasi berikutnya dapat diuji menggunakan perangkat ESP32 dan MicroSD secara langsung.
DAFTAR PUSTAKA
Kurniawan, Nyoman Yudi. Modul 04. WebServer–Passkey dengan ESP32 dalam Mode Access Point. Materi Mata Kuliah Internet of Things.
Wokwi. “SISTEM PASSKEY BERBASIS ACCESS POINT DAN MICROSD MENGGUNAKAN WOKWI.” https://wokwi.com/projects/476954542317163521
Tidak ada komentar:
Posting Komentar