Otomatisasi Rumah Menggunakan Captive Portal: 9 Langkah

2025 Pengarang: John Day | [email protected]. Terakhir diubah: 2025-01-23 14:49

Di sini, kita akan membuat proyek yang sangat menarik dari otomatisasi rumah berbasis Captive Portal menggunakan nodeMCU dari awal.. Jadi, mari kita mulai..

Langkah 1: Deklarasi Awal

Deklarasikan pin IO dari nodeMCU untuk melakukan Action, File Header dan kode untuk membuat server DNS..ditunjukkan pada gambar..

Langkah 2: Kode Html untuk Front End I.e. Halaman masuk

Seperti yang ditunjukkan pada gambar, mendeklarasikan kode html dalam variabel string yang kami kirim ke pengguna akhir untuk validasi Kode Akses.

*Untuk menangkap data yang dimasukkan oleh pengguna di sini kami menggunakan panel jangkar dan tag href

*Pada dasarnya Anchor tag digunakan untuk menambahkan halaman web lain di dalam halaman web dan tag href menentukan tujuan tautan.

*Tapi, di sini kami menerima data yang dimasukkan oleh pengguna dalam bidang Kode Akses melalui Anchor Pane dan tag href…

bagaimana, saya akan menyebutkan tentang dua metode menangkap input dari antarmuka web ke tujuan programmer kami..

Langkah 3: Penggunaan Metode WebServer.arg() dan WebServer.on()

Seperti yang saya sebutkan di langkah sebelumnya saya akan memberi tahu Anda dua metode berbeda..

1) Dengan Menggunakan metode webServer.arg():

Di sini, kami menentukan atribut autofocus bersama dengan elemen seperti yang ditunjukkan pada gambar, apa yang dilakukan autofokus adalah bahwa itu adalah atribut boolean ketika itu benar berarti menyajikannya memastikan bahwa elemen input menjadi fokus saat halaman dimuat.

dan kemudian, kita memanggil metode args() pada objek server. Metode ini akan mengembalikan jumlah parameter kueri yang diteruskan pada HTTP dan menerapkan pernyataan bersyarat untuk melakukan tindakan yang sesuai.

2) Dengan Menggunakan dan atribut href:

Di sini, kami menentukan elemen kontrol kami (seperti tombol) di dalam dan menetapkan string, char, tautan yang ingin Anda validasi menggunakan pernyataan bersyarat dan kemudian kami memanggil webServer.on() untuk menerima input untuk validasi.

Seperti yang ditunjukkan..

Langkah 4: Jika Pengguna Salah Mengetik Kredensial

Apa yang telah saya lakukan, cukup ubah kode halaman login yang ada dan tambahkan tajuk baru yang menginformasikan bahwa pengguna telah memasukkan kredensial yang salah..

Pertama, validasi kredensial jika salah, arahkan pengguna ke halaman login baru yang diedit yang menampilkan pesan kesalahan.

Seperti yang ditunjukkan..

Langkah 5: Cara Menambahkan Gambar ke Halaman Web Anda

Ini sangat sederhana, karena di sini kami tidak menyimpan gambar kami ke penyimpanan fisik sehingga kami menyediakan jalur untuk mengambil gambar yang biasanya kami lakukan untuk halaman html.

jadi yang kami lakukan hanyalah mengonversi gambar kami ke base64 dan menempelkannya di kode halaman kami Seperti yang ditunjukkan..

Langkah 6: Komponen Apa yang Kita Butuhkan

1)- nodeMCU

2)- Arduino IDE untuk mem-flash nodeMCU

3)-kabel jumper (F-2-F)

4)-Modul Relay

5) -Smartphone atau laptop berkemampuan WiFi untuk diuji

Langkah 7: Koneksi

Tambahkan modul relai ke pin IO yang dideklarasikan dalam kode.

Hubungkan Relay ke peralatan listrik yang ingin Anda kendalikan seperti yang ditunjukkan pada gambar..

Langkah 8: Sekarang Uji dan Nikmati

Langkah 9: Kode Ada Di Sini

Silakan tulis komentar Anda yang berharga..