ฐานความรู้

สำหรับ HTTP standard เรามีวิธีสื่อสารระหว่างกันได้ 4 แบบคือ

อย่างไรก็ตามในการพัฒนาเว็บแอพพลิเคชั่นส่วนใหญ่ ผู้ใช้นิยมใช้งานผ่านเว็บไซต์ฟอร์ม (Form) ซึ่งจะสามารถใช้วิธีการสื่อสารได้แค่ GET และ POST เท่านั้น ดังนั้น Best practice ที่เราแนะนำให้ใช้คือ

1. แก้ไข app.js ให้รับการส่งข้อมูลแบบ GET

ในตัวอย่างนี้เราสมมุติให้มีการส่งค่าตัวแปรเพื่อเป็นการระบุจำนวน record สูงสุดที่เราจะทำการอ่านจาก database ในโค้ดเราจะทำการกำหนดชื่อตัวแปรนี้ว่า limit

หลังแก้ไข เราจะมี Route /api/read สำหรับการอ่านจาก database ทั้งหมด และ /api/read/:limit สำหรับการอ่านจาก database แบบมีจำกัดจำนวน record

app.get("/api/read", (req, res) => {

    // backend operations

    res.send({

        message: "perform read on database"

    });

});

app.get("/api/read/:limit", (req, res) => {

    // backend operations

    res.send({

        message: "perform read on database",

        limit: ("limit on read: " + req.params.limit + " records")

    });

});

2. แก้ไข app.js ให้รับการส่งข้อมูลแบบ POST

ในตัวอย่างแบบฟอร์มที่เราสร้างในข้อ 2.5.1 จะเห็นได้ว่ามีการส่งค่าจากฟอร์มมาเป็นตัวแปร 2 ตัว ชื่อว่า name และ surname เราจะทำการแก้ไขให้ /api/create รับค่าตัวแปรจากฟอร์มดังนี้

app.post("/api/create", (req, res) => {

    // backend operations

    res.send({

        message: "perform create a record on database",

        formData_name: req.body.name,

        formData_surname: req.body.surname

    });

});

3. เพิ่ม middleware สำหรับการประมวลผลข้อมูล POST จาก Form

เราจะใช้ package ที่ชื่อว่า body-parser ในการช่วยประมวลผลข้อมูลระหว่างทาง (middleware) หลังการประมวลผล ตัวแปร POST จาก Form จะมาอยู่ในตัวแปร req.body ในโค้ด Node.js

ทำการ install package body-parser

แก้ไข app.js ให้มีการเรียกใช้ middleware โดยเพิ่มโค้ดไปดังนี้

// create instance

const app = express();



// middleware

var bodyParser = require('body-parser')

app.use(bodyParser.json());       // to support JSON-encoded bodies

app.use(bodyParser.urlencoded({   // to support URL-encoded bodies

    extended: true

}));

4. สร้างฟอร์ม (Form)

ที่ไฟล์ index.html เราจะแก้ไข เพิ่มฟอร์มทดสอบสำหรับการส่งค่าแบบ "POST"

5. สั่งรัน Node.js

6. ทดสอบแอพพลิเคชั่น โดยเปิดเว็บบราวเซอร์

ที่หน้าแรก http://localhost:3000 จะแสดง Form ให้ใส่ name และ surname

เมื่อกดปุ่ม “Submit” จะพบข้อความตอบกลับจาก /api/create เป็น name และ surname ตามที่เราส่งไป ดังรูป

ที่ URL http://localhost:3000/api/read จะพบข้อความตอบกลับจาก /api/read จำลองการอ่านค่าจาก database แบบ unlimit

ที่ URL http://localhost:3000/api/read/100 จะพบข้อความตอบกลับจาก /api/read/:limit จำลองการอ่านค่าจาก database แบบ limit 100 record