บทที่ 6 การพัฒนาเว็บแอปพลิเคชันสำหรับจัดการข้อมูล

Web Application Development for Data Management)

6.1 บทนำ

ระบบเครือข่ายและระบบ Internet of Things (IoT) ในปัจจุบันไม่ได้ประกอบด้วยอุปกรณ์ที่ทำหน้าที่รับส่งข้อมูลเพียงอย่างเดียว แต่ยังต้องมีระบบสำหรับจัดเก็บ จัดการ และนำข้อมูลมาใช้งาน ตัวอย่างเช่น ระบบตรวจวัดอุณหภูมิภายในอาคาร อาจประกอบด้วย ESP32 ที่ทำหน้าที่อ่านค่าจากเซนเซอร์และส่งข้อมูลผ่านเครือข่ายมายัง Server จากนั้น Server จะบันทึกข้อมูลลงในฐานข้อมูลเพื่อให้สามารถนำข้อมูลมาใช้งานภายหลังได้

ในบทที่ผ่านมาได้ศึกษาการสร้างฐานข้อมูลด้วย PostgreSQL การเชื่อมต่อฐานข้อมูลด้วยภาษา Python และการใช้ FastAPI เพื่อให้บริการข้อมูลผ่านเครือข่าย อย่างไรก็ตาม การจัดการข้อมูลโดยใช้คำสั่ง SQL โดยตรงไม่สะดวกสำหรับผู้ใช้งานทั่วไป จึงจำเป็นต้องสร้างเป็น Web Application เพื่อรองรับการใช้งานที่ง่ายและสะดวกกว่า

การสร้าง Web Application ผู้ใช้สามารถกรอกข้อมูลผ่าน Web Form และให้ Web Application ส่งข้อมูลไปยัง Server เพื่อบันทึกลงฐานข้อมูลโดยอัตโนมัติ

Web Application จึงช่วยให้ผู้ใช้งานสามารถจัดการข้อมูลผ่าน Web Browser โดยไม่จำเป็นต้องเขียนคำสั่ง SQL โดยตรง

6.2 สถาปัตยกรรมของ Web Application

Web Application โดยทั่วไปสามารถแบ่งองค์ประกอบสำคัญออกเป็น 3 ส่วน ได้แก่

1. Frontend เป็นส่วนที่ติดต่อกับผู้ใช้งาน ทำหน้าที่รับข้อมูลและแสดงผลข้อมูล เช่น หน้าเว็บ แบบฟอร์ม ปุ่ม และตาราง

2. Backend เป็นส่วนที่ทำงานอยู่บน Server ทำหน้าที่รับ Request จาก Client ประมวลผล ตรวจสอบข้อมูล และติดต่อกับฐานข้อมูล

3. Database ทำหน้าที่จัดเก็บและบริหารจัดการข้อมูลอย่างเป็นระบบ

สำหรับระบบที่ใช้ในรายวิชานี้ สามารถกำหนดเทคโนโลยีในแต่ละส่วนได้ดังนี้



การแบ่งระบบออกเป็นส่วนต่าง ๆ ทำให้สามารถพัฒนาและดูแลระบบได้ง่ายขึ้น และยังช่วยป้องกันไม่ให้ Client ติดต่อกับฐานข้อมูลโดยตรง

6.3 Frontend และ Backend

ในการพัฒนา Web Application นักศึกษาควรเข้าใจความแตกต่างระหว่าง Frontend และ Backend

Frontend คือส่วนของโปรแกรมที่ทำงานบน Web Browser และเป็นส่วนที่ผู้ใช้งานสามารถมองเห็นและโต้ตอบได้ เช่น

ส่วน Backend ทำงานอยู่บน Server และผู้ใช้งานไม่สามารถมองเห็นกระบวนการทำงานโดยตรง

เมื่อผู้ใช้กดปุ่ม บันทึกข้อมูล จะเกิดกระบวนการ

ในรายวิชานี้จะใช้ FastAPI เป็น Backend เนื่องจากสามารถพัฒนาด้วยภาษา Python และสามารถเชื่อมต่อกับ PostgreSQL ที่ได้ศึกษามาแล้วได้โดยตรง

6.4 HTML Form

HTML Form เป็นองค์ประกอบของหน้าเว็บที่ใช้สำหรับรับข้อมูลจากผู้ใช้งาน เช่น ข้อความ ตัวเลข วันที่ หรือค่าที่เลือกจากรายการ

ตัวอย่าง Form สำหรับลงทะเบียนอุปกรณ์ IoT

โดยการสร้าง form ด้วย html มีโค้ดดังลักษณะดังนี้


<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>ลงทะเบียนอุปกรณ์ IoT</title>
</head>


<body>

    <h1>ลงทะเบียนอุปกรณ์ IoT</h1>

    <form>

        <p>
            <label for="device_id">Device ID</label><br>
            <input type="text"
                   id="device_id"
                   name="device_id">
        </p>

        <p>
            <label for="device_name">Device Name</label><br>
            <input type="text"
                   id="device_name"
                   name="device_name">
        </p>

        <p>
            <label for="location">Location</label><br>
            <input type="text"
                   id="location"
                   name="location">
        </p>

        <p>
            <label for="ip_address">IP Address</label><br>
            <input type="text"
                   id="ip_address"
                   name="ip_address">
        </p>

        <button type="button">
            บันทึกข้อมูล
        </button>

    </form>

</body>

</html>  

      

6.5 HTML Form เบื้องต้น

HTML Form เป็นส่วนประกอบของเว็บเพจที่ใช้สำหรับ รับข้อมูลจากผู้ใช้งาน (Data Input) เช่น ข้อความ ตัวเลข วันที่ รหัสอุปกรณ์ ตำแหน่งติดตั้ง หรือหมายเลข IP Address ข้อมูลที่ผู้ใช้กรอกสามารถนำไปประมวลผลด้วย JavaScript หรือส่งผ่านเครือข่ายไปยัง Server เพื่อจัดเก็บลงฐานข้อมูลได้

สำหรับระบบเครือข่ายและระบบ Internet of Things (IoT) สามารถนำ HTML Form มาใช้สร้างส่วนติดต่อสำหรับจัดการข้อมูล เช่น การลงทะเบียนอุปกรณ์ ESP32 การกำหนดตำแหน่งติดตั้งอุปกรณ์ หรือการตั้งค่าพารามิเตอร์ต่าง ๆ ของระบบ

ตัวอย่างเช่น ระบบที่พัฒนาขึ้นในบทนี้มีตาราง device สำหรับจัดเก็บข้อมูลอุปกรณ์ดังนี้

แทนที่จะให้ผู้ใช้งานเพิ่มข้อมูลด้วยคำสั่ง SQL โดยตรง สามารถสร้าง HTML Form สำหรับรับข้อมูลจากผู้ใช้ได้

เมื่อผู้ใช้กรอกข้อมูลแล้ว ข้อมูลเหล่านี้สามารถนำไปส่งต่อให้ FastAPI เพื่อบันทึกลง PostgreSQL ได้ในขั้นตอนต่อไป

โครงสร้างของ HTML

โดยมีลักษณะของโค้ดดังนี้


<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>ลงทะเบียนอุปกรณ์ IoT</title>
</head>


<body>

    <h1>ลงทะเบียนอุปกรณ์ IoT</h1>

   

   

</body>

</html>  

      

6.5โครงสร้าง HTML

โครงสร้าง HTML (HTML Structure) คือรูปแบบการจัดเรียงองค์ประกอบ (Elements) ในเอกสารเว็บเพจที่ใช้ภาษา HTML (HyperText Markup Language) โดย HTML ทำหน้าที่เป็นโครงร่างหลักของเว็บไซต์ ซึ่งประกอบด้วยแท็ก (Tags) ต่างๆ ที่กำหนดเนื้อหาและลักษณะขององค์ประกอบในเว็บเพจ

องค์ประกอบสำคัญของโครงสร้าง HTML

HTML จะเริ่มต้นด้วยการประกาศประเภทของเอกสาร (Document Type Declaration) และมีองค์ประกอบพื้นฐานที่ครอบคลุมการจัดหน้าเว็บเพจในส่วนต่างๆ ดังนี้:

1. DOCTYPE Declaration

เป็นการบอกเบราว์เซอร์ว่าเอกสารนี้ใช้ HTML5

2. องค์ประกอบหลักของ HTML

HTML แบ่งโครงสร้างเป็นสองส่วนใหญ่ ๆ คือ ส่วนหัว (Head) และส่วนเนื้อหา (Body) ซึ่งครอบคลุมใน <html>...</html> แท็ก

- <head> คือ ส่วนหัวของเอกสาร ซึ่งเป็นที่รวมของข้อมูลที่ไม่แสดงบนหน้าจอ แต่มีความสำคัญสำหรับการทำงานของเว็บเพจ เช่น เมตาแท็ก (Meta Tags), ชื่อของหน้าเว็บ (Title), และการอ้างอิงถึงไฟล์ CSS หรือ JavaScript ภายนอก และต้องปิดด้วย </head> เสมอ

- <body > คือ ส่วนเนื้อหาที่ผู้ใช้จะเห็นและโต้ตอบได้ ซึ่งประกอบด้วยข้อความ รูปภาพ ลิงก์ ฟอร์ม ฯลฯ เนื้อหาหลักทั้งหมดจะอยู่ใน </body >

ตัวอย่าง

3. Elements form

<form> ใช้สำหรับกำหนดบริเวณของแบบฟอร์ม โดย Element ต่าง ๆ ที่ใช้รับข้อมูลจากผู้ใช้จะถูกวางอยู่ภายใน </form>

HTML Form สามารถส่งข้อมูลไปยัง Server ได้โดยตรงผ่าน HTTP แต่ในบทนี้จะใช้ Form เป็นส่วนรับข้อมูล แล้วใช้ JavaScript เป็นตัวอ่านและควบคุมการส่งข้อมูลไปยัง FastAPI ซึ่งจะศึกษาในหัวข้อต่อไป

3. Elements input

<input> เป็น Element ที่ใช้รับข้อมูลจากผู้ใช้ โดยสามารถกำหนดประเภทของข้อมูลด้วย Attribute type

4.Element <button> ใช้สำหรับสร้างปุ่มเพื่อให้ผู้ใช้สั่งให้โปรแกรมดำเนินการบางอย่าง

ทดลองสร้างฟอร์มรับข้อมูลด้วย html โดยใช้โค้ดตัวอย่างนี้ แล้วบันทึกไฟล์เป็น test_form.html


<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>ลงทะเบียนอุปกรณ์ IoT</title>
</head>


<body>

    <h1>ลงทะเบียนอุปกรณ์ IoT</h1>

    <form>

        <p>
            <label for="device_id">Device ID</label><br>
            <input type="text"
                   id="device_id"
                   name="device_id">
        </p>

        <p>
            <label for="device_name">Device Name</label><br>
            <input type="text"
                   id="device_name"
                   name="device_name">
        </p>

        <p>
            <label for="location">Location</label><br>
            <input type="text"
                   id="location"
                   name="location">
        </p>

        <p>
            <label for="ip_address">IP Address</label><br>
            <input type="text"
                   id="ip_address"
                   name="ip_address">
        </p>

        <button type="button">
            บันทึกข้อมูล
        </button>

    </form>

</body>

</html>  

      

JavaScript เบื้องต้นสำหรับเว็บแอปพลิเคชัน

JavaScript เป็นภาษาโปรแกรมที่นิยมใช้สำหรับเพิ่มความสามารถในการทำงานให้กับเว็บเพจ โดยโปรแกรม JavaScript สามารถทำงานภายใน Web Browser และสามารถเข้าถึงองค์ประกอบต่าง ๆ ของเอกสาร HTML รับข้อมูลจากผู้ใช้ ประมวลผลข้อมูล และติดต่อกับ Server ผ่านเครือข่ายได้

ในหัวข้อที่ผ่านมา HTML ถูกใช้สำหรับสร้างส่วนติดต่อกับผู้ใช้ เช่น ช่องกรอกข้อมูลและปุ่มต่าง ๆ อย่างไรก็ตาม HTML เพียงอย่างเดียวมีหน้าที่หลักในการกำหนดโครงสร้างของหน้าเว็บ หากต้องการให้หน้าเว็บสามารถทำงานตามเหตุการณ์ต่าง ๆ เช่น เมื่อผู้ใช้กดปุ่ม อ่านค่าที่กรอกจาก Form สร้างข้อมูล JSON หรือส่งข้อมูลไปยัง FastAPI จำเป็นต้องใช้ภาษา JavaScript เข้ามาช่วยควบคุมการทำงาน

สำหรับระบบที่พัฒนาขึ้นในรายวิชานี้ JavaScript จะทำหน้าที่เป็นส่วนสำคัญของ Client ดังนี้

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

การเขียน JavaScript ใน HTML

สามารถเขียน JavaScript ภายในเอกสาร HTML โดยใช้ Element

ตัวอย่าง


    <!DOCTYPE html>
   <html lang="th">

<head>
    <meta charset="UTF-8">
    <title>JavaScript Example</title>
</head>

<body>

    <h2>JavaScript Example</h2>

    <script>

        console.log("Hello JavaScript");

    </script>

</body>

</html>

      

ผลที่ได้

โดยคำสั่ง console.log("Hello JavaScript"); ใช้สำหรับแสดงข้อความใน Console ของ Web Browser ซึ่งเหมาะสำหรับใช้ตรวจสอบการทำงานของโปรแกรมในระหว่างการพัฒนา เพื่อใช้ดู หรือตรวจสอบข้อมูล

สามารถเข้าถึงได้โดย การเปิดไฟล์ html ที่ต้องการ แล้วคลิ๊กขวาของเม้าส์ แล้วเลือก inspect จะเห็นหน้าต่าง Console ดังในรูป

ตัวแปรใน JavaScript

ตัวแปรใช้สำหรับจัดเก็บข้อมูลที่โปรแกรมต้องนำไปใช้งาน เช่น Device ID อุณหภูมิ ความชื้น หรือ IP Address JavaScript สามารถประกาศตัวแปรด้วย let และ const ตัวอย่าง

let เหมาะสำหรับค่าที่สามารถเปลี่ยนแปลงได้ภายหลัง เช่นครั้งแรกอาจจะกำหนด let temperature = 30.5; แต่ในโค้ดภายหลังอาจจะต้องการเปลี่ยนแปลง temperature = 31.2;

ส่วน const ใช้กับตัวแปรที่ไม่ต้องการให้กำหนดค่าใหม่

ชนิดของข้อมูล

JavaScript รองรับข้อมูลหลายชนิด เช่น ข้อความ ตัวเลข ค่าตรรกะ Object และ Array

www3.school

การแสดงข้อมูล

การทดลองโปรแกรม JavaScript เบื้องต้นสามารถใช้ console.log() สำหรับแสดงข้อมูล ตัวอย่าง

การใช้ Console มีประโยชน์มากในการตรวจสอบข้อมูลก่อนส่งไปยัง Server ทำให้สามารถตรวจสอบข้อมูลที่ถูกต้องการจะส่งไปยัง Server

ฟังก์ชันใน JavaScript

ฟังก์ชัน (Function) คือชุดคำสั่งที่สร้างขึ้นเพื่อทำงานบางอย่าง และสามารถเรียกใช้งานเมื่อต้องการได้ ตัวอย่างเช่น

แล้วเรียกใช้ฟังก์ชันด้วย คำสั่ง showMessage();

หรืออาจจะเรียกใช้งานจากปุ่มกดใน HTML ได้ เช่น

เมื่อผู้ใช้กดปุ่ม Browser จะเรียกฟังก์ชัน saveDevice()

การอ่านข้อมูลจาก Form

หากต้องการสร้างฟอร์มเพื่อรับข้อมูล จากผู้ใช้งานให้กรอกข้อมูลในช่องของฟอร์มตามที่กำหนด ดังรูป

สามารถใช้ภาษา HTML สร้างฟอร์มเพื่อรับข้อมูลดังโค้ดตัวอย่างนี้

และสามารถเขียน JavaScript ดังนี้ เพื่อรับข้อมูลมาเก็บไว้ในตัวแปรของ JavaScript

ตัวอย่าง ให้ทดลองนำโค้ดในตัวอย่างนี้ไปสร้างเป็นไฟล์ html แล้วรัน


  <!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Device Form</title>
</head>
<body>

    <form onsubmit="event.preventDefault(); readData();">
        <p>
            <label>Device ID</label><br>
            <input type="text" id="device_id">
        </p>

        <p>
            <label>Device Name</label><br>
            <input type="text" id="device_name">
        </p>

        <p>
            <label>Location</label><br>
            <input type="text" id="location">
        </p>

        <p>
            <label>IP Address</label><br>
            <input type="text" id="ip_address">
        </p>

        <!-- เพิ่มปุ่มสำหรับกดเรียกใช้ฟังก์ชัน readData -->
        <p>
            <button type="submit">Submit</button>
        </p>
    </form>

    <script>
    function readData() {
        const device_id = document.getElementById("device_id").value;
        const device_name = document.getElementById("device_name").value;
        const location = document.getElementById("location").value;
        const ip_address = document.getElementById("ip_address").value;

        console.log("Device ID:", device_id);
        console.log("Device Name:", device_name);
        console.log("Location:", location);
        console.log("IP Address:", ip_address);
    }
    </script>

</body>
</html>

      

หากทดลองรัน เมื่อกรอกข้อมูลลงในแต่และช่องกรอกข้อมูลของฟอร์ม แล้วกดปุ่ม ข้อมูลจะถูกเก็บไว้ในตัวแปรของ JavaScript โดยสั่งเกตได้จากการนำไปแสดงไว้ใน console ดังรูป

Object ใน JavaScript

ตัวแปรพิเศษที่เก็บข้อมูลหลายค่าพร้อมกันได้ โดยจัดเก็บในรูปแบบคู่ของคีย์และค่า (Key-Value Pairs) ซึ่งเรียกว่า Properties หรือ Method ช่วยให้เราจำลองข้อมูลของสิ่งต่างๆ เช่น คน รถ หรือสินค้า ไว้ในตัวแปรเดียวได้อย่างเป็นระบบ

โครงสร้างและวิธีสร้าง Object

- เขียนครอบด้วยเครื่องหมายปีกกา { }

- กำหนดชื่อคีย์ตามด้วยโคลอน : แล้วใส่ค่าของข้อมูล

- คั่นแต่ละชุดข้อมูลด้วยเครื่องหมายจุลภาค

ตัวอย่าง

เมื่อมีข้อมูลหลายค่า การเก็บข้อมูลแยกเป็นตัวแปรจำนวนมากอาจไม่สะดวก JavaScript สามารถรวมข้อมูลที่เกี่ยวข้องกันไว้ใน Object





Object มีความสำคัญต่อ Web Application เนื่องจากมีโครงสร้างใกล้เคียงกับข้อมูล JSON ที่ใช้แลกเปลี่ยนระหว่าง Client และ Server





JavaScript กับการโปรแกรมเครือข่าย

แม้ JavaScript จะเป็นภาษาที่ใช้ในการพัฒนาเว็บ แต่ในรายวิชาการโปรแกรมเครือข่าย จุดสำคัญคือ JavaScript สามารถทำหน้าที่เป็น โปรแกรมฝั่ง Client ที่ติดต่อกับ Server ผ่านเครือข่าย

ในระบบที่กำลังพัฒนา JavaScript จะรับข้อมูลจาก HTML แล้วส่งข้อมูลไปยัง FastAPI


ในมุมของ Client–Server Programming จึงสามารถมองได้ว่า JavaScript = Client Program และ FastAPI = Server Program โดยทั้งสองส่วนแลกเปลี่ยนข้อมูลกันผ่าน HTTP

ตัวอย่างโปรแกรมรวม HTML และ JavaScript แสดงการรับข้อมูลจาก Form และนำมาสร้างเป็น JavaScript Object


<!DOCTYPE html>
<html lang="th">

<head>

    <meta charset="UTF-8">

    <title>IoT Device</title>

</head>

<body>

    <h2>ลงทะเบียนอุปกรณ์ IoT</h2>

    <form>

        <p>
            Device ID<br>
            <input type="text" id="device_id">
        </p>

        <p>
            Device Name<br>
            <input type="text" id="device_name">
        </p>

        <p>
            Location<br>
            <input type="text" id="location">
        </p>

        <p>
            IP Address<br>
            <input type="text" id="ip_address">
        </p>

        <button type="button"
                onclick="readData()">

            อ่านข้อมูล

        </button>

    </form>


    <script>

        function readData() {

            const device_id =
                document.getElementById("device_id").value;

            const device_name =
                document.getElementById("device_name").value;

            const location =
                document.getElementById("location").value;

            const ip_address =
                document.getElementById("ip_address").value;


            const device = {

                device_id: device_id,
                device_name: device_name,
                location: location,
                ip_address: ip_address

            };


            console.log(device);

        }

    </script>

</body>

</html>


เมื่อรันโค้ดจะได้ดังรูป


หรือใช้โค้ดตัวอย่างด้านล่างเพื่อแสดงข้อมูล object บน Browser โดยนำโค้ดตัวอย่างไปสร้างเป็นไฟล์ HTML แล้วรัน


   <!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>อ่านข้อมูลจาก HTML Form</title>

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 40px;
        }

        h2 {
            color: navy;
        }

        table {
            border-collapse: collapse;
        }

        td {
            padding: 8px;
        }

        input {
            width: 250px;
            padding: 6px;
        }

        button {
            padding: 8px 18px;
            margin-top: 10px;
        }

        #result {
            margin-top: 25px;
            padding: 15px;
            border: 1px solid #999;
            background-color: #f5f5f5;
            width: 450px;
        }
    </style>

</head>

<body>

    <h2>ลงทะเบียนอุปกรณ์ IoT</h2>

    <form>

        <table>

            <tr>
                <td>Device ID</td>
                <td>
                    <input type="text"
                           id="device_id"
                           placeholder="ESP32-01">
                </td>
            </tr>

            <tr>
                <td>Device Name</td>
                <td>
                    <input type="text"
                           id="device_name"
                           placeholder="Temperature Sensor">
                </td>
            </tr>

            <tr>
                <td>Location</td>
                <td>
                    <input type="text"
                           id="location"
                           placeholder="Room 101">
                </td>
            </tr>

            <tr>
                <td>IP Address</td>
                <td>
                    <input type="text"
                           id="ip_address"
                           placeholder="192.168.1.101">
                </td>
            </tr>

        </table>

        <button type="button"
                onclick="readData()">
            อ่านข้อมูล
        </button>

    </form>

    <div id="result">
        <b>ผลลัพธ์</b><br><br>
        ยังไม่มีข้อมูล
    </div>


    <script>

        function readData() {

            // อ่านค่าจาก Form

            const device_id =
                document.getElementById("device_id").value;

            const device_name =
                document.getElementById("device_name").value;

            const location =
                document.getElementById("location").value;

            const ip_address =
                document.getElementById("ip_address").value;


            // สร้าง JavaScript Object

            const device = {

                device_id: device_id,
                device_name: device_name,
                location: location,
                ip_address: ip_address

            };


            // แสดงใน Console

            console.log(device);


            // แสดงใน Alert

            alert("อ่านข้อมูลจาก Form สำเร็จ");


            // แสดงบนหน้าเว็บ

            document.getElementById("result").innerHTML =
                "<h3>ข้อมูลที่อ่านได้</h3>" +
                "<b>Device ID :</b> " + device.device_id + "<br>" +
                "<b>Device Name :</b> " + device.device_name + "<br>" +
                "<b>Location :</b> " + device.location + "<br>" +
                "<b>IP Address :</b> " + device.ip_address;

        }

    </script>

</body>

</html>

      

เมื่อรันไฟล์ของโด้ดตัวอย่างจะได้ดังรูป


JSON และการแลกเปลี่ยนข้อมูล

ในหัวข้อที่ผ่านมาได้ศึกษาการใช้ JavaScript อ่านข้อมูลจาก HTML Form และเก็บข้อมูลไว้ในรูปแบบของตัวแปรและ Object อย่างไรก็ตาม ข้อมูลที่อยู่ภายใน JavaScript Object ยังไม่สามารถส่งผ่านเครือข่ายได้โดยตรง หากต้องการส่งข้อมูลจาก Web Browser ไปยัง Server จำเป็นต้องจัดรูปแบบข้อมูลให้อยู่ในมาตรฐานที่ทั้ง Client และ Server สามารถเข้าใจตรงกัน

รูปแบบข้อมูลที่ได้รับความนิยมมากที่สุดในปัจจุบันคือ JSON (JavaScript Object Notation) ซึ่งเป็นรูปแบบการแลกเปลี่ยนข้อมูลที่มีโครงสร้างเรียบง่าย อ่านง่าย และสามารถใช้งานร่วมกับภาษาโปรแกรมได้หลากหลาย เช่น JavaScript, Python, Java, C# และภาษาอื่น ๆ

ในการพัฒนา Web Application และระบบ IoT ส่วนใหญ่ ข้อมูลที่รับส่งระหว่าง Client และ Server จะอยู่ในรูปแบบ JSON

ระบบที่พัฒนาขึ้นในรายวิชานี้มีลำดับการทำงานดังนี้


จากภาพจะเห็นว่า JSON เป็นตัวกลางที่ใช้สำหรับแลกเปลี่ยนข้อมูลระหว่าง Web Browser และ FastAPI

ความหมายของ JSON

JSON ย่อมาจาก JavaScript Object Notation เป็นรูปแบบการจัดเก็บข้อมูลในลักษณะ Key–Value หรือ ชื่อข้อมูล–ค่าของข้อมูล


ลักษณะข้อมูลแบบ JSON จะมีลักษณะดังนี้

- ข้อมูลทั้งหมดอยู่ภายใน { }

- ชื่อข้อมูล (Key) อยู่ภายในเครื่องหมาย " "

- ค่าของข้อมูล (Value) อยู่หลังเครื่องหมาย :

- แต่ละรายการคั่นด้วยเครื่องหมาย ,

โดยโครงสร้างข้อมูล JSON มีลักษณะดังนี้


ชนิดของข้อมูล JSON

JSON สามารถเก็บข้อมูลได้หลายประเภท เช่น




ข้อดีของ JSON

JSON ได้รับความนิยมในการพัฒนา Web Application และระบบ IoT เนื่องจากมีข้อดีหลายประการ ได้แก่

1.โครงสร้างข้อมูลอ่านง่ายและเข้าใจได้ง่าย

2.ใช้พื้นที่ในการส่งข้อมูลน้อยกว่า XML

3.รองรับภาษาโปรแกรมหลายภาษา

4.ใช้งานร่วมกับ REST API ได้อย่างมีประสิทธิภาพ

5.รองรับข้อมูลที่มีโครงสร้างซับซ้อนได้

6.สามารถนำข้อมูลไปใช้กับ Web Dashboard, Mobile Application และระบบ Cloud ได้โดยตรง

ด้วยเหตุนี้ JSON จึงกลายเป็นมาตรฐานของการแลกเปลี่ยนข้อมูลผ่านเครือข่ายในปัจจุบัน

ความสัมพันธ์ระหว่าง JavaScript Object และ JSON

อาจสังเกตว่า JavaScript Object มีลักษณะคล้ายกับ JSON มาก ดังลักษณะในรูป


ความแตกต่างคือ

- JavaScript Object เป็นข้อมูลที่โปรแกรม JavaScript ใช้งานภายใน Browser

- JSON เป็นข้อความ (Text) ที่ใช้ส่งผ่านเครือข่าย

ซึ่งสามารถแสดงความสัมพันธ์ได้ดังนี้


การแปลง Object เป็น JSON

การแปลงข้อมูลจาก JavaScript เป็นข้อมูล JSON นั้น มีคำสั่ง JSON.stringify() สำหรับแปลง JavaScript Object ให้เป็น JSON ตัวอย่าง


จะได้ผลลัพธ์เป็น

{"device_id":"ESP32-01","device_name":"Temperature Sensor","location":"Room 101","ip_address":"192.168.1.101"}

แม้ว่าจะเห็นเป็นข้อความเพียงบรรทัดเดียว แต่ข้อมูลยังคงอยู่ในรูปแบบ JSON

การแปลง JSON กลับเป็น Object

เมื่อ Server ส่งข้อมูล JSON กลับมายัง Browser หากต้องการนำข้อมูลไปใช้งานใน JavaScript จะต้องแปลงกลับเป็น Object JavaScript ใช้คำสั่ง JSON.parse()


การแลกเปลี่ยนข้อมูลระหว่าง Client และ Server

โดย Client เป็นคอมพิวเตอร์กรอกข้อมูลลงในฟอร์ม และเมื่อกดปุ่มจะมีการเรียกฟังก์ชันของ JavaScript อ่านข้อมูลจากฟอร์มไปเก็บไว้ในตัวแปร แล้วแปลงเป็นข้อมูล JSON เพื่อส่งไปยัง FastAPI ของ Server ซึ่งมีกระบวนการดังรูป



ตัวอย่างการสร้างระบบกรอกข้อมูลอุปกรณ์ลงในฐานข้อมูล postgres ผ่านทางฟอร์ม HTMLและ javascript

ให้ทำการรันไฟล์ python ที่ทำหน้าที่เป็น Server เชื่อมต่อกับฐานข้อมูลผ่าน fastAPI ให้นำโค้ดตัวอย่างนี้ไปสร้างเป็นไฟล์ python เป็นชื่อไฟล์ server_fastAPI.py แล้วเปลี่ยนรหัสผ่านสำหรับเชื่อมต่อกับฐานข้อมูล โดยก่อนหน้านี้ Server ต้องติดตั้ง fastAPI และ unicorn ไว้แล้ว


from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import psycopg

# -------------------------
# FastAPI
# -------------------------
app = FastAPI()
# -------------------------
# CORS
# -------------------------

app.add_middleware(

    CORSMiddleware,

    allow_origins=["*"],

    allow_credentials=True,

    allow_methods=["*"],

    allow_headers=["*"]
)

# -------------------------
# PostgreSQL
# -------------------------
conn = psycopg.connect(
    host="localhost",
    dbname="iot_database",
    user="postgres",
    password="*********",
    port=5432
)

print("เชื่อมต่อ PostgreSQL สำเร็จ")


# -------------------------
# JSON Model
# -------------------------
class Device(BaseModel):

    device_id: str
    device_name: str
    location: str
    ip_address: str


# -------------------------
# POST /device
# -------------------------
@app.post("/device")
def add_device(device: Device):

    try:

        with conn.cursor() as cur:

            cur.execute(
                """
                INSERT INTO device
                (device_id,
                 device_name,
                 location,
                 ip_address)

                VALUES
                (%s,%s,%s,%s)
                """,

                (
                    device.device_id,
                    device.device_name,
                    device.location,
                    device.ip_address
                )

            )

        conn.commit()

        print("บันทึกข้อมูลสำเร็จ")

        return {

            "status": "OK",
            "message": "บันทึกข้อมูลสำเร็จ"

        }

    except Exception as e:

        conn.rollback()

        print(e)

        return {

            "status": "ERROR",
            "message": str(e)

        }


 

จากนั้นให้ใช้ CMD ทำการรันโปรแกรมฝั่ง Server ด้วยคำสั่ง uvicorn server_fastAPI:app --reload ก็จะปรากฏข้อความดังรูป


ซึ่งเป็นการรัน server รอไว้สำหรับการติดต่อมาจาก Client ซึ่งในที่นี้คือการใช้ฟอร์มเพื่อกรอกข้อมูลจาก form ของ HTML และใช้ JavaScript ส่งข้อมูลแบบ JSON มาให้ fastAPI

ให้ทำการสร้างไฟล์ HTML + JavaScript โดยใช้โค้ดตัวอย่างนี้


<!DOCTYPE html>
<html lang="th">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>ลงทะเบียนอุปกรณ์ IoT</title>

    <style>

        body{

            font-family:Arial;
            margin:40px;

        }

        table{

            border-collapse:collapse;

        }

        td{

            padding:8px;

        }

        input{

            width:300px;
            padding:6px;

        }

        button{

            margin-top:15px;
            padding:10px 20px;
            font-size:16px;

        }

        #result{

            margin-top:25px;
            padding:15px;
            border:1px solid gray;
            width:500px;

        }

    </style>

</head>

<body>

<h2>ลงทะเบียนอุปกรณ์ IoT</h2>

<form>

<table>

<tr>

    <td>Device ID</td>

    <td>

        <input
            type="text"
            id="device_id"
            placeholder="ESP32-01">

    </td>

</tr>

<tr>

    <td>Device Name</td>

    <td>

        <input
            type="text"
            id="device_name"
            placeholder="Temperature Sensor">

    </td>

</tr>

<tr>

    <td>Location</td>

    <td>

        <input
            type="text"
            id="location"
            placeholder="Room 101">

    </td>

</tr>

<tr>

    <td>IP Address</td>

    <td>

        <input
            type="text"
            id="ip_address"
            placeholder="192.168.1.101">

    </td>

</tr>

</table>

<button
        type="button"
        onclick="saveDevice()">

    บันทึกข้อมูล

</button>

</form>

<div id="result">

รอการส่งข้อมูล...

</div>


<script>

async function saveDevice(){

    // --------------------------
    // อ่านข้อมูลจาก Form
    // --------------------------

    const device = {

        device_id:
            document.getElementById("device_id").value,

        device_name:
            document.getElementById("device_name").value,

        location:
            document.getElementById("location").value,

        ip_address:
            document.getElementById("ip_address").value

    };


    console.log("JavaScript Object");

    console.log(device);


    // --------------------------
    // แปลงเป็น JSON
    // --------------------------

    const jsonData =
        JSON.stringify(device);


    console.log("JSON");

    console.log(jsonData);


    try{

        // --------------------------
        // ส่งข้อมูลไป FastAPI
        // --------------------------

        const response =
            await fetch(

                "http://127.0.0.1:8000/device",

                {

                    method:"POST",

                    headers:{

                        "Content-Type":"application/json"

                    },

                    body:jsonData

                }

            );


        const result =
            await response.json();


        console.log(result);


        document.getElementById("result").innerHTML=

            "<h3>ผลการบันทึกข้อมูล</h3>" +

            "<b>Status :</b> " +
            result.status +
            "<br><br>" +

            "<b>Message :</b> " +
            result.message;


        alert(result.message);

    }

    catch(error){

        console.log(error);

        alert("ไม่สามารถเชื่อมต่อ FastAPI ได้");

    }

}

</script>

</body>

</html>
 

ให้รันไฟล์ html ที่สร้างขึ้นมา จะปรากฏหน้าต่างดังรูป


ให้กรอกข้อมูลเพื่อของอุปกรณ์เพื่อลงทะเบียนรายการอุปกรณ์ และกด บันทึกผลดังรูป จะปรากฏข้อความตอบรับการเก็บข้อมูลยังฐานข้อมูลดังรูป



และให้สังเกตที่ฝั่ง server จะเห็นข้อความการตอบรับดังรูป


จากนั้นให้ตรวจสอบข้อมูลในฐานข้อมูลของ postgres โดยใช้คำสั่งสั่ง select * from device; จะต้องปรากฏข้อมูลรายการอุปกรณ์ ESP32 ที่ได้ทำการบันทึกไว้ผ่่านทาง form HTML ดังรูป


ให้ทำการเปิดไฟล์ HTML form แล้วทำการกรอกเพิ่มรายการจำนวน 10 รายการ แล้วทดสอบดูว่าในฐานข้อมูลมีจำนวนรายการครบตามจำนวนที่กรอกเพิ่มหรือไม่

หัวข้อ