สารบัญ:
- ขั้นตอนที่ 1: การประกาศเบื้องต้น
- ขั้นตอนที่ 2: รหัส Html สำหรับส่วนหน้าเช่น หน้าเข้าสู่ระบบ
- ขั้นตอนที่ 3: การใช้ WebServer.arg() และ WebServer.on() Methods
- ขั้นตอนที่ 4: หากผู้ใช้พิมพ์ข้อมูลรับรองไม่ถูกต้อง
- ขั้นตอนที่ 5: วิธีเพิ่มรูปภาพลงในหน้าเว็บของคุณ.
- ขั้นตอนที่ 6: ส่วนประกอบใดที่เราต้องการ.
- ขั้นตอนที่ 7: การเชื่อมต่อ.
- ขั้นตอนที่ 8: ตอนนี้ทดสอบและสนุก.
- ขั้นตอนที่ 9: รหัสอยู่ที่นี่.
2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-13 06:58
ที่นี่ เราจะสร้างโครงการที่น่าสนใจมากของระบบอัตโนมัติภายในบ้านที่ใช้ Captive Portal โดยใช้ nodeMCU ตั้งแต่เริ่มต้น..เอาล่ะมาเริ่มกันเลย..
ขั้นตอนที่ 1: การประกาศเบื้องต้น
ประกาศพิน IO ของ nodeMCU เพื่อดำเนินการ ไฟล์ส่วนหัว และรหัสสำหรับสร้างเซิร์ฟเวอร์ DNS..แสดงในรูปภาพ..
ขั้นตอนที่ 2: รหัส Html สำหรับส่วนหน้าเช่น หน้าเข้าสู่ระบบ
ดังที่แสดงในภาพ ประกาศรหัส html ภายในตัวแปรสตริงที่เราส่งไปยังผู้ใช้ปลายทางเพื่อตรวจสอบรหัสการเข้าถึง
*เพื่อจับข้อมูลที่ป้อนโดยผู้ใช้ที่นี่ เราใช้ anchor pane และ href tag
*โดยทั่วไปแล้ว แท็ก Anchor จะใช้เพื่อเพิ่มหน้าเว็บอื่นภายในหน้าเว็บ และแท็ก href จะกำหนดปลายทางของลิงก์
*แต่ในที่นี้ เราได้รับข้อมูลที่ป้อนโดยผู้ใช้ในช่องรหัสการเข้าถึงผ่าน Anchor Pane และแท็ก href…
ฉันจะพูดถึงสองวิธีในการรับอินพุตจากเว็บอินเตอร์เฟสไปจนถึงโปรแกรมเมอร์ของเราสิ้นสุด..
ขั้นตอนที่ 3: การใช้ WebServer.arg() และ WebServer.on() Methods
อย่างที่ฉันพูดถึงในขั้นตอนก่อนหน้านี้ ฉันจะบอกคุณสองวิธีที่แตกต่างกัน..
1) โดยใช้วิธี webServer.arg():
ในที่นี้เราระบุแอตทริบิวต์ออโต้โฟกัสพร้อมกับองค์ประกอบตามที่แสดงในภาพ
สิ่งที่ออโต้โฟกัสทำคือมันเป็นแอตทริบิวต์บูลีนเมื่อเป็นจริงหมายความว่ามีอยู่เพื่อให้แน่ใจว่าองค์ประกอบอินพุตได้รับการเน้นเมื่อหน้าเว็บโหลด
จากนั้นเราเรียกเมธอด args() บนอ็อบเจ็กต์เซิร์ฟเวอร์ เมธอดนี้จะส่งคืนจำนวนพารามิเตอร์การสืบค้นที่ส่งผ่านบน HTTP และใช้คำสั่งแบบมีเงื่อนไขเพื่อดำเนินการตามนั้น
2) โดยใช้และแอตทริบิวต์ href:
ที่นี่ เราระบุองค์ประกอบการควบคุมของเรา (เช่นปุ่ม) ภายในและกำหนดสตริง อักขระ ลิงก์ที่คุณต้องการตรวจสอบโดยใช้คำสั่งแบบมีเงื่อนไข จากนั้นเราเรียก webServer.on() เพื่อรับอินพุตสำหรับการตรวจสอบ
ตามที่ปรากฏ..
ขั้นตอนที่ 4: หากผู้ใช้พิมพ์ข้อมูลรับรองไม่ถูกต้อง
สิ่งที่ฉันทำไป เพียงแค่เปลี่ยนรหัสหน้าเข้าสู่ระบบที่มีอยู่ และเพิ่มส่วนหัวใหม่เพื่อแจ้งว่าผู้ใช้ได้ป้อนข้อมูลประจำตัวที่ไม่ถูกต้อง..
ขั้นแรก ตรวจสอบความถูกต้องของข้อมูลรับรอง หากไม่ถูกต้อง ให้นำผู้ใช้ไปยังหน้าการเข้าสู่ระบบที่แก้ไขใหม่ซึ่งแสดงข้อความแสดงข้อผิดพลาด
ตามที่ปรากฏ..
ขั้นตอนที่ 5: วิธีเพิ่มรูปภาพลงในหน้าเว็บของคุณ.
มันง่ายมาก เพราะที่นี่เราไม่ได้เก็บภาพของเราไว้ในที่เก็บข้อมูลจริง ดังนั้นเราจึงจัดเตรียมเส้นทางในการดึงภาพนั้นที่เรามักจะทำในกรณีของหน้า html
ดังนั้นสิ่งที่เราทำคือเพียงแค่แปลงรูปภาพของเราเป็น base64 แล้ววางลงในโค้ดของเพจดังที่แสดง..
ขั้นตอนที่ 6: ส่วนประกอบใดที่เราต้องการ.
1)- nodeMCU
2) - Arduino IDE เพื่อแฟลช nodeMCU
3)-สายจัมเปอร์ (F-2-F)
4)-โมดูลรีเลย์
5) - สมาร์ทโฟนหรือแล็ปท็อปที่เปิดใช้งาน WiFi เพื่อทดสอบ
ขั้นตอนที่ 7: การเชื่อมต่อ.
เพิ่มโมดูลรีเลย์ไปยังหมุด IO ที่ประกาศไว้ในโค้ด
ต่อรีเลย์กับอุปกรณ์ไฟฟ้าที่ต้องการควบคุมตามภาพ..
ขั้นตอนที่ 8: ตอนนี้ทดสอบและสนุก.
ขั้นตอนที่ 9: รหัสอยู่ที่นี่.
กรุณาเขียนความคิดเห็นที่มีค่าของคุณ..