Node.js + Express + MySQL สร้างระบบเพิ่มลบแก้ไข

สวัสดีครับในบทความนี้จะเป็นการแนะนำการสร้าง เว็บไซต์ที่มีระบบเพิ่ม ลบ แก้ไข ข้อมูลในฐานข้อมูล MySQL บน Node.js เป็น Project ที่ง่ายและเป็นพื้นฐานของการพัฒนาเว็บไซต์

Node.js คืออะไร?

Node.js เป็น Open-Source Javascript Server Environment สำหรับนำ Javascript ออกมาทำงานนอก Web Browser ทำงานด้วย V8 JavaScript Engine เนื่องจากเดิมแล้ว Javascript เป็นภาษาที่ทำงานอยู่ใน Web Browser

สามารถใช้เขียนโปรแกรมที่ทำงานบน Command-line Interface ได้เหมือนภาษาทั่วไป แต่ในบทความนี้เราจะนำมาทำ web-application กัน โดยจะใช้ตัวช่วยคือโมดูลที่ชื่อว่า Express.js ซึ่งจะทำให้โค้ดของเราสั้นลง

ใช้ Express VS ไม่ใช้ Express

สำหรับการแสดงข้อมูลผ่าน Protocol HTTP เราสามารถใช้เพียงโมดูล http ก็ได้ ดังโค้ดนี้

const http = require('http');
 
const server = http.createServer((req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.write(...);
    res.end();
});
 
server.listen(8080, ()=> {
    console.log("Server listening on port 8080")
});

หากเปลี่ยนมาใช้ Express.js จะพบว่า สามารถจัดการกับ HTTP และสามารถ Routing ได้ง่ายกว่า

const express = require('express');
const app = express();
 
app.get('/', (req, res) => {
    res.send(...);
});
 
app.listen(8080, () => {
    console.log('server listening on port 8080');
});

ด้วยความสามารถนี้ของ Express.js ทำให้ Project ที่เราจะมาทำกันในวันนี้คือ หน้าเว็บที่สามารถเพิ่มลบแก้ไขสินค้าได้ สามารถนำมาเขียนโดยใช้ Express.js ได้ง่ายและรวดเร็ว โดยเราจะเก็บข้อมูลสินค้าไว้ใน MySQL โดยมีโครงสร้าง ตามคำสั่งดังนี้

CREATE TABLE products(id INT(6) AUTO_INCREMENT,product_name VARCHAR(100) NOT NULL, product_price INT(6) DEFAULT 0, PRIMARY KEY(id));

โครงสร้างของ Node.js + Express + EJS

ในการสร้าง Project นี้ จำเป็นจะต้องใช้โมดูลอย่างน้อย 4 โมดูล ได้แก่

• express
• path ใช้สำหรับทำงานร่วมกับ Directory ต่างๆ
• body-parser ใช้สำหรับรับส่งข้อมูลจาก forms
• mysql2 ใช้สำหรับเชื่อมต่อกับฐานข้อมูล MySQL

Arrow Fucntion Expression.

สำหรับคนที่เห็นโค้ดผมแล้วยัง งงๆ กับสัญลักษณ์ () => {} สิ่งนี้เรียกว่า "Arrow Function"

function() {
  //do somethings
}

() => {
  //do somethings
}

ทั้งสองอย่างคืออันเดียวกัน อันล่างคือการประกาศ "Arrow Function" กับอันบนคือการประกาศ Function แบบธรรมดา

Request & Response

ตั้งแต่บรรทัด 12 ถึง 18 เป็นโครงสร้างการ Routing หน้าเว็บของ express จะเห็นได้ว่ามี callbacks variables สองตัวคือ "req" และ "res" อธิบายคร่าวๆ คือ

req = request จะเก็บข้อมูลคำขอของ clients ซึ่งจะรวมไปถึง ข้อมูลจาก forms ข้อมูล params และ query ใน URL ตัวอย่าง query คือ ?page=1 ตัวอย่าง params คือ /pages/1

res = response จะเป็นตัวแปรที่จะเรียกใช้เมื่อต้องการตอบสนองคำขอของ clients เช่น จะสั่งให้แสดงหน้าเว็บเพจ หรือจะส่งข้อมูลใดๆกลับไปหา clients ก็จะสั่งผ่านตัวแปร res

สำหรับหน้า home ซึ่งอยู่ใน path "/" เราจะแสดงรายการสินค้าทั้งหมดก่อน และจะมีตัวเลือกให้เพิ่ม แก้ไข หรือลบ เราจึงต้องใช้ฟังค์ชั่น query() ของ mysql2 ร่วมกับ ตัวแปร db ซึ่งรับค่าจากไฟล์ db.js ในการส่งข้อมูลไปที่ MySQL Database เพื่อขอข้อมูลเก็บไว้ใน callbacks ของ query() ซึ่งตัวแปรอันแรกที่อยู่ใน callbacks ของ query() ใช้สำหรับเก็บ Error หากมีข้อผิดพลาดต่างๆ ของคำสั่ง SQL ที่เราส่งไป จะเก็บในตัวแปรที่ชื่อว่า err ส่วนอันที่สองเก็บผลลัพท์จะใช้ชื่อว่า products ดังภาพ

คำสั่งที่เราจะใช้คือ SELECT * FROM products ORDER BY id DESC เพื่อให้ได้ข้อมูลสินค้าทั้งหมดมา เรียงจาก id มากลงไปน้อย

ในไฟล์ db.js ก็จะเป็นการเชื่อมต่อเข้ากับ MySQL และ ส่งออกตัวแปรดังกล่าวออกไปผ่านคำสั่ง module.export ซึ่งเราจะเรียกใช้ไฟล์ดังกล่าวด้วยคำสั่ง require() และเก็บค่าในไฟล์นั้นไว้ในตัวแปรต่างๆ คล้ายกับการเรียกใช้โมดูล (ดังภาพแรกบรรทัดที่ 10)

เมื่อรู้วิธีการ Routing แล้ว เราก็จะสร้าง route ต่างๆ สำหรับ เพิ่ม ลบ แก้ไข ขึ้นมาดังนี้

จาก Routing ของ "/edit/:id" และ "/delete/:id" จะเห็นได้ว่า เมื่อจะนำตัวแปรต่างๆ เข้าไปในคำสั่ง SQL จำเป็นจะต้องส่งผ่าน blind params เป็นค่าเริ่มต้น คือจะใส่ ? ลงไปในคำสั่ง และจะถูกแทนที่ด้วยตัวแปรใน [] ตามลำดับ

ในไฟล์ views/home.ejs จะเป็นการ forEach ข้อมูลที่อยู่ใน Objects "products" ออกมาแสดง

ไฟล์ views/edit.ejs จะเป็น forms สำหรับแก้ไข

ไฟล์ views/add.ejs จะเป็น forms สำหรับเพิ่มสินค้า

ผลลัพท์

ในหน้า "/" สามารถ แก้ไข ลบ หรือเพิ่มสินค้าได้

เพิ่มสินค้า "Cold Beer" ราคา 50

แก้ไขสินค้า "Cold Beer" เป็นราคาใหม่คือ 45