วิธีการทำระบบ CRUD ด้วย Express, MySQL, และ EJS

เรียนรู้วิธีการสร้างระบบ CRUD ที่มีประสิทธิภาพ พร้อมการออกแบบ UI สวยงามด้วย Bootstrap

1. เตรียมโปรเจค

ขั้นตอนแรกคือการสร้างโปรเจคด้วย Express Generator และติดตั้ง dependencies ที่จำเป็น


npx express-generator --view=ejs crud-app
cd crud-app
npm install
npm install mysql2
            

2. ตั้งค่าการเชื่อมต่อกับ MySQL

สร้างไฟล์ db.js เพื่อทำการเชื่อมต่อกับฐานข้อมูล MySQL และสร้างฐานข้อมูลและตารางที่จำเป็น


// db.js
const mysql = require('mysql2');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'yourpassword',
  database: 'crud_db'
});

connection.connect((err) => {
  if (err) throw err;
  console.log('Connected to MySQL');
});

module.exports = connection;
            

จากนั้นให้สร้างฐานข้อมูลและตาราง:


CREATE DATABASE crud_db;
USE crud_db;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100),
  role VARCHAR(50)
);
            

3. สร้างเส้นทางสำหรับ CRUD ใน Express

ต่อไปให้ปรับเส้นทางในไฟล์ index.js เพื่อจัดการการทำงาน CRUD


// index.js
const express = require('express');
const router = express.Router();
const db = require('./db');

// Read
router.get('/', (req, res) => {
  db.query('SELECT * FROM users', (err, results) => {
    if (err) throw err;
    res.render('index', { users: results });
  });
});

// Create
router.get('/add', (req, res) => {
  res.render('add');
});

router.post('/add', (req, res) => {
  const { name, email, role } = req.body;
  db.query('INSERT INTO users (name, email, role) VALUES (?, ?, ?)', [name, email, role], (err) => {
    if (err) throw err;
    res.redirect('/');
  });
});

// Update
router.get('/edit/:id', (req, res) => {
  const { id } = req.params;
  db.query('SELECT * FROM users WHERE id = ?', [id], (err, results) => {
    if (err) throw err;
    res.render('edit', { user: results[0] });
  });
});

router.post('/edit/:id', (req, res) => {
  const { id } = req.params;
  const { name, email, role } = req.body;
  db.query('UPDATE users SET name = ?, email = ?, role = ? WHERE id = ?', [name, email, role, id], (err) => {
    if (err) throw err;
    res.redirect('/');
  });
});

// Delete
router.get('/delete/:id', (req, res) => {
  const { id } = req.params;
  db.query('DELETE FROM users WHERE id = ?', [id], (err) => {
    if (err) throw err;
    res.redirect('/');
  });
});

module.exports = router;
            

4. สร้าง View ด้วย EJS

สร้างไฟล์ EJS สำหรับจัดการ UI ของแต่ละหน้า

ไฟล์ index.ejs สำหรับแสดงรายการทั้งหมด:


Users List

Add New User <% users.forEach(user => { %> <% }) %>
ID Name Email Role Actions
<%= user.id %> <%= user.name %> <%= user.email %> <%= user.role %> Edit Delete

ไฟล์ add.ejs สำหรับเพิ่มข้อมูลใหม่:


Add New User

ไฟล์ edit.ejs สำหรับแก้ไขข้อมูล:


Edit User

5. แก้ไขไฟล์ app.js


const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

// เรียกใช้ไฟล์ db.js
const db = require('./db');

// เรียกใช้เส้นทาง (routes) ที่คุณสร้างไว้ใน index.js
const indexRouter = require('./routes/index');

const app = express();

// ตั้งค่า view engine เป็น EJS
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// middleware ต่างๆ ที่จำเป็น
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// กำหนดให้ใช้เส้นทางที่เราสร้างไว้
app.use('/', indexRouter);

// จัดการ error หากไม่พบเส้นทาง (404)
app.use(function (req, res, next) {
  next(createError(404));
});

// จัดการ error อื่นๆ
app.use(function (err, req, res, next) {
  // ตั้งค่าให้แสดง error
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // แสดงหน้า error
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

            

6. รันโปรเจค

ขั้นตอนสุดท้ายคือการรันโปรเจคเพื่อทดสอบระบบ


npm start
            

จากนั้นเปิดเบราว์เซอร์ไปที่ http://localhost:3000