ทำ Web server เพื่อรับข้อมูลจาก Sensor และควบคุมอุปกรณ์ต่างๆ ตอนที่ 1 การส่งข้อมูลผ่านหน้าเว็บ

สอน ทำ Web server ไว้ใช้ที่บ้านแบบไม่ต้องมีค่าใช้จ่ายใดๆ เพื่อรับข้อมูลจาก Sensor และควบคุมอุปกรณ์ต่างๆ แบบง่ายๆ เพียงแค่มีคอมพิวเตอร์ 1 เครื่อง และบอร์ดไมโครคอนโทรลเลอร์ขนาดจิ๋วอย่าง NodeMCU หนึ่งตัว ก่อนที่เราจะเข้าสู่เนื่อหา เรามาทำความเข้าใจคอนเซ็ปต์ของการสื่อสารข้อมูลผ่านอินเตอร์เน็ตกันก่อนนะครับว่าเป็นยังไง
        ทุกวันนี้เวลาที่เราจะส่งและรับข้อมูลผ่านอินเตอร์เน็ตหรือเปิดเว็บไซต์อะไรก็ตาม อุปกรณ์ที่เราใช้งานนั้นต้องมีการเชื่อมต่ออินเตอร์เน็ต ไม่ว่าจะเป็นการเชื่อมต่อผ่านสาย LAN , Wi-Fi หรือผู้ให้บริการอินเตอร์เน็ตที่เราเรียกกันย่อๆ ว่า ISP (Internet Service Provider) อย่าง CAT, true, 3BB หรือ ToT ซึ่งมีโครงสร้างและรูปแบบการเชื่อมต่อเครือข่ายดังแสดงในรูปที่ 1

รูปที่ 1 โครงสร้างเครือข่ายคอมพิวเตอร์

ในการส่งและรับข้อมูลระหว่างเครือข่ายคอมพิวเตอร์ อุปกรณ์ของเรา ในที่นี้ขอเรียกว่าไคลเอนต์นะครับ จะมีบราวเซอร์ทำหน้าที่ร้องขอและรับข้อมูล (โดยใช้ HTTP Protocol) จากเซิฟเวอร์มาแสดงผล ซึ่งในส่วนของเซิฟเวอร์เองก็จะรอรับการร้องขอแล้วส่งข้อมูล (โดยใช้ HTTP Protocol) ที่ถูกร้องขอกลับไป ดังแสดงในรูปที่ 2

รูปที่ 2 รูปแบบการส่งและรับข้อมูลระหว่าง ไคลเอนต์ และ เซิฟเวอร์

ข้อความ HTTP มีสองชนิด คือ request (ข้อความขอบริการ), response (ข้อความตอบกลับ)

การส่งข้อมูลไปยังเซิฟเวอร์ ใช้วิธีใส่ข้อมูลลงไปในข้อความขอบริการ (request) ซึ่งเป็นเทคนิคหนึ่งที่ใช้ในการส่งข้อมูล เดี๋ยวเราจะมาลองใช้วิธีนี้กันนะครับ

ตัวอย่าง URL ที่เราใส่ข้อมูลลงไปในข้อความขอบริการ
http://localhost/lovecoding/get_data.php?data1=lovecoding&data2=blogger

หมายเหตุ การส่งข้อมูลผ่านหน้าเว็บมีหลายรูปแบบ สำหรับวิธีการที่จะทดสอบเป็นวิธีการส่งข้อมูลแบบ GET ผ่าน HTML Forms

ก่อนที่เราจะทำการส่งข้อมูลเดี๋ยวเรามาติดตั้งโปรแกรมที่ใช้ในการจำลอง Web Server กันก่อนนะครับ สำหรับโปรแกรมที่เราจะใช้กันวันนี้ก็คือโปรแกรม Xampp

ทำความรู้จักกับโปรแกรม Xampp กันซักหน่อยสำหรับคนที่ยังไม่รู้จัก
        Xampp คือ โปรแกรมสำหรับจำลองเครื่องคอมพิวเตอร์ของเราให้ทำงานในลักษณะของ Web Server เพื่อไว้ทดสอบ สคริปหรือเว็บไซต์ในเครื่องของเรา โดยสามารถ ดาวน์โหลดโปรแกรมได้ที่นี่ หลังจากดาวน์โหลดโปรแกรมมาแล้ว ให้เราทำการติดตั้งโปรแกรมซึ่งวิธีการติดตั้งก็ง่ายมากครับ ให้ดับเบิ้ลคลิกที่ไฟล์.exe ที่เราดาวน์โหลดมา จากนั้นก็ให้คลิกที่ Next ไปเรื่อยๆ จนถึงหน้าสุดท้ายก็คือ Finist เป็นอันเสร็จสิ้นครับวิธีการติดตั้งโปรแกรม แค่นี้เราก็สามารถที่จะจำลองเครื่องคอมพิวเตอร์ของเราให้เป็น Web Server ได้แล้ว การเปิดใช้งาน Service ของโปรแกรม Xampp ให้เราคลิกที่ไอคอนสีส้มที่เขียนว่า Xampp Control Panel ซึ่งอยู่ที่หน้าเดสก์ท็อปของเรา จากนั้นจะปรากฏหน้าต่างคอนโซลขึ้นมาให้เราคลิก Start ที่ลูกศรสีแดงชี้อยู่เพื่อเปิด Service ของ Web Server ดังแสดงในรูปที่ 3

รูปที่ 3 หน้าต่างสำหรับเปิดใช้งาน Service ของโปรแกรม Xampp

        เมื่อเราเปิด Service เสร็จเรียบร้อยแล้วให้เรามาทดสอบโดยการเปิดบราวเซอร์พิมพ์ URL localhost หรือ 127.0.0.1 ซึ่งเป็น Host name ของเครื่องคอมพิวเตอร์เรา จะปรากฏหน้าต่างดังแสดงในรูปที่ 4

รูปที่ 4 หน้าหลักของ Web Server

        Web Server พร้อมแล้ว ต่อมาเราจะมาเขียนโค้ดส่วนรับข้อมูลฝั่งเซิฟเวอร์กันก่อนโดยใช้ภาษา HTML และ PHP ก่อนที่จะไปเขียนโค้ดให้เราไปสร้างไฟล์ get_data.php ในไดเรกทรอรี่
C:\xampp\htdocs\ กันก่อนนะครับ พอสร้างเสร็จที่นี้เราจะมาเขียนโค้ดส่วนที่ใช้ในการรับข้อมูลที่ส่งแนบมากับ request (ข้อความขอบริการ) ซึ่งสามารถ copy โค้ดจากด้านล่างไปวางในไฟล์ get_data.php ได้เลย อย่าลืมกดบันทึกนะครับ


        สำหรับโค้ดโปรแกรมด้านบนใช้สำหรับตรวจสอบข้อมูลที่ส่งแนบมากับ request (ข้อความขอบริการ) จากไคลเอนต์ ว่ามีข้อมูลส่งมาจริงไหม ถ้ามีข้อมูลส่งมาจริงเราจะทำการแสดงผลข้อมูลที่ส่งมาบนหน้าจอ วิธีการทดสอบให้เราเปิดเว็บบราวเซอร์ แล้วเข้าไปที่ URL  http://localhost/get_data.php?data1=lovecoding&data2=blogger ดังแสดงในรูปที่ 5

รูปที่ 5 การรับข้อมูลและการแสดงผลข้อมูลบน Web Server

        เราจะเห็นข้อความที่ส่งแนบมากับคำร้องขอแสดงบนหน้าเว็บ "lovecoding blogger" ตรงข้อความที่ส่งมาเราสามารถเปลี่ยนดูได้นะครับ โดยให้เราเปลี่ยนที่ http://localhost/get_data.php?data1=lovecoding&data2=blogger แล้วลองทดสอบดูอีกครั้ง ทีนี้หน้าเว็บก็จะแสดงข้อความที่เราส่งแนบไปกับลิงค์คำร้องขอ เห็นไหมละครับว่าจริงๆ แล้ว การรับส่งข้อมูลผ่านหน้าเว็บมันไม่ได้ยากเลย ส่วนต่อไปที่เราจะทำก็คือเขียนโปรแกรมในฝั่งของบอร์ด NodeMCU ให้เชื่อมต่อเข้ากับเครือข่ายคอมพิวเตอร์แล้วส่งข้อมูลคำร้องขอมาที่เซิฟเวอร์ โดยเราจะให้แนบข้อมูลที่เราต้องการส่งมาด้วย สามารถติดตามต่อได้ในบทความถัดไปนะครับ
       บทความนี้เขียนขึ้นมาโดยใช้ความรู้ความเข้าใจของผู้เขียน ที่เคยทำการศึกษาและทดลองใช้งานมา หากมีข้อเสนอแนะหรือข้อคิดเห็นอื่นๆ เพิ่มเติม สามารถเสนอแนะมาได้เลยนะครับ

แหล่งอ้างอิง

https://www.w3schools.com/tags/att_form_method.asp

https://www.w3schools.com/html/

https://www.apachefriends.org/index.html

Computer Networking: A Top Down Approach 6th edition Jim Kurose, Keith Ross Addison-Wesley March 2012

บทความโดย รักการเขียนโค้ดดอทคอม lovecoding.com

สอบถามข้อมูลเพิ่มเติม
Facebook: รักการเขียนโค้ด ดอทคอม 
Tell: 091-4782789