[Ethernet shield IoT #2] Arduino Ethernet Shield Web Server With HTML/CSS/JavaScript

Easy IoT With Arduino
Technologies For Everyone
2 min readMar 21, 2017

จากตอนที่แล้วเราสามารถต่ออินเทอร์เน็ต กับ Arduino ได้แล้ว ในบทความนี้เราจะมาพูดถึงการสร้าง Webserver ด้วย ภาษา HTML,CSS and JavaScript

Download Sketch : https://pastebin.com/4U4ZJp1e

หลังจาก Download มาแล้วให้ เปลี่ยน IP Address, Gateway, Subnet

วิธีการหา IP Address ของ Arduino : http://bit.ly/2nFP7Yu
วิธีการหา Gateway, Subnet ของคุณ : https://tips.thaiware.com/221.html

จากนั้นนำเข้า Web Browser ใส่ URL เป็น IP Address ของ Arduino
หากได้ผลดังภาพแล้ว แสดงว่า Web Server ทำงานได้แล้ว

จากนั้นสามารถนำ File Website ที่ต้องการ ลงไปใน SD Card
Example Website : http://bit.ly/2n9ory1

นำ SD Card ใส่เข้ากับ Ethernet Shield

จากนั้นลอง เปิดหน้าเว็บด้านบนอีกที จะได้หน้าเว็บดังรูป

เท่านี้ก็สามารถใช้งาน Arduino ให้เป็น Web Server ได้แล้ว
โดยแสดงผลได้ทั้ง HTML,CSS และ JavaScript

ในบทความต่อไป เราจะมาแนะนำการใช้ Ethernet shield ร่วมกับ Arduino ให้เป็น Web Client ในการดึงข้อมูลจาก Web Site เพื่อนำมาประมวลผล

--

--