เรียนรู้วิธีการสร้างระบบ CRUD ที่มีประสิทธิภาพ พร้อมการออกแบบ UI สวยงามด้วย Bootstrap
ขั้นตอนแรกคือการสร้างโปรเจคด้วย Express Generator และติดตั้ง dependencies ที่จำเป็น
npx express-generator --view=ejs crud-app
cd crud-app
npm install
npm install mysql2
สร้างไฟล์ 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)
);
ต่อไปให้ปรับเส้นทางในไฟล์ 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;
สร้างไฟล์ EJS สำหรับจัดการ UI ของแต่ละหน้า
ไฟล์ index.ejs
สำหรับแสดงรายการทั้งหมด:
Users List
Add New User
ID
Name
Email
Role
Actions
<% users.forEach(user => { %>
<%= user.id %>
<%= user.name %>
<%= user.email %>
<%= user.role %>
Edit
Delete
<% }) %>
ไฟล์ add.ejs
สำหรับเพิ่มข้อมูลใหม่:
Add New User
ไฟล์ edit.ejs
สำหรับแก้ไขข้อมูล:
Edit User
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;
ขั้นตอนสุดท้ายคือการรันโปรเจคเพื่อทดสอบระบบ
npm start
จากนั้นเปิดเบราว์เซอร์ไปที่ http://localhost:3000