[ New ] MVC với 1 Order Pattern Trong Nodejs [ Extends ]

Tiếp nối bài trước về MVC bài này sẽ thêm database vào và config nodejs

Bài MVC tại đây

Mục lục

Để kết nối với MySQL, bạn phải cài đặt server MySQL và sử dụng thư viện mysql hoặc mysql2 trong Node.

js.

Cách cập nhật cấu trúc MVC của bạn để kết nối với MySQL là như sau.

Cài đặt MySQL và mysql2.

Để bắt đầu, bạn phải cài đặt MySQL server và thư viện mysql2 cho Node.

js.

Để thực hiện điều này, hãy chạy lệnh sau trong thư mục dự án của bạn:

Cấu trúc thư mục theo MVC

project-root/
│
├── index.html
│
├── css/
│   └── styles.css
│
├── js/
│   ├── models/
│   │   ├── Order.js
│   │   └── database.js
│   │
│   ├── views/
│   │   └── OrderView.js
│   │
│   ├── controllers/
│   │   └── OrderController.js
│   │
│   └── app.js
│
├── server/
│   └── server.js
│
└── assets/
    └── images/
        └── logo.png

Thêm file database.

js vào models hoặc tách riêng ra 1 folder điều được

import mysql from 'mysql2';

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'yourusername', // Thay thế bằng tên người dùng MySQL của bạn
    password: 'yourpassword', // Thay thế bằng mật khẩu MySQL của bạn
    database: 'ordersdb'
});

connection.connect((err) => {
    if (err) {
        console.error('Error connecting to MySQL database:', err);
        return;
    }
    console.log('Connected to MySQL database.');

    const createTableQuery = `
        CREATE TABLE IF NOT EXISTS orders (
            id INT AUTO_INCREMENT PRIMARY KEY,
            product VARCHAR(255) NOT NULL,
            quantity INT NOT NULL,
            price DECIMAL(10, 2) NOT NULL
        )
    `;

    connection.query(createTableQuery, (err, results) => {
        if (err) {
            console.error('Error creating orders table:', err);
            return;
        }
        console.log('Orders table created or already exists.');
    });
});

export default connection;

Tạo kết nối đến cơ sở dữ liệu qua query string

host: localhost

port 3306

Bạn nên build 1 phpmyadmin để tiện quản lý

Hoặc đây nhá

mysql+pymysql://root:@localhost/my_hikari

Cập Nhật Model Để Sử Dụng Cơ Sở Dữ Liệu MySQL

import db from './database.js';

class Order {
    static getAllOrders(callback) {
        const sql = "SELECT * FROM orders";
        db.query(sql, (err, results) => {
            if (err) {
                throw err;
            }
            callback(results);
        });
    }

    static createOrder(product, quantity, price, callback) {
        const sql = "INSERT INTO orders (product, quantity, price) VALUES (?,?,?)";
        db.query(sql, [product, quantity, price], (err, results) => {
            if (err) {
                throw err;
            }
            callback({ id: results.insertId, product, quantity, price });
        });
    }
}

export default Order;

Model kết nối với database tiếng hành lấy dữ liệu

Dùng SQL Query nên hời phèn, bạn có thể đổi qua dùng ORM tại đây nhá nó sẽ bảo mật hơn gấp 10 tỷ lần

ORM

Cập Nhật Controller Để Sử Dụng Model Mới

import Order from '../models/Order.js';
import OrderView from '../views/OrderView.js';

class OrderController {
    constructor(view) {
        this.view = view;
        this.loadOrders();
    }

    loadOrders() {
        Order.getAllOrders((orders) => {
            this.view.displayOrders(orders);
        });
    }

    addOrder(product, quantity, price) {
        Order.createOrder(product, quantity, price, (newOrder) => {
            this.loadOrders(); // Reload orders after adding new order
        });
    }
}

export default OrderController;

Tiến hành load model lên Controller

Cập Nhật View Để Hiển Thị Dữ Liệu

class OrderView {
    constructor() {
        this.app = document.getElementById('app');
        this.orderList = this.createElement('ul', 'order-list');
        this.app.append(this.orderList);
    }

    createElement(tag, className) {
        const element = document.createElement(tag);
        if (className) element.classList.add(className);
        return element;
    }

    displayOrders(orders) {
        while (this.orderList.firstChild) {
            this.orderList.removeChild(this.orderList.firstChild);
        }

        orders.forEach(order => {
            const li = this.createElement('li');
            li.textContent = `Order ${order.id}: ${order.product} x ${order.quantity} - $${order.price.toFixed(2)}`;
            this.orderList.append(li);
        });
    }
}

export default OrderView;

Thiết Lập Máy Chủ Để Xử Lý Yêu Cầu (Backend)

Để tiết kiệm thời gian nên không tách backend và fontend nên tôi tận dụng lại model có sẵn, nếu theo nguyên tắt bạn nên tách riêng ra nhá thành 2 source

import express from 'express';
import bodyParser from 'body-parser';
import Order from '../js/models/Order.js';

const app = express();
const PORT = 3000;

app.use(bodyParser.json());

app.get('/api/orders', (req, res) => {
    Order.getAllOrders((orders) => {
        res.json(orders);
    });
});

app.post('/api/orders', (req, res) => {
    const { product, quantity, price } = req.body;
    Order.createOrder(product, quantity, price, (newOrder) => {
        res.status(201).json(newOrder);
    });
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Khởi Tạo Ứng Dụng và Kết Nối Tới Backend

import OrderView from './views/OrderView.js';
import OrderController from './controllers/OrderController.js';

document.addEventListener('DOMContentLoaded', () => {
    const app = new OrderController(new OrderView());
});

Cách tạo database

Tạo sẵn database ordersdb; Dùng docker hoặc xampp bạn có thể tìm tài liệu trên mạng
Kết nối với database qua Xampp hoặc docker mysql

Giống thế này

Dùng phpmyadmin để quản lý database

Cách chạy source code bên trên

node server/server.js

Cơ sở dữ liệu thiết lập: Mã trong js/models/database.

js cho phép kết nối và thiết lập cơ sở dữ liệu MySQL.

Model Cập nhật: File js/models/Order.

js đã được cập nhật để cho phép sử dụng cơ sở dữ liệu MySQL cho các hoạt động CRUD.

Điều chỉnh điều khiển: Model js/controllers/OrderController.

js sử dụng để lấy và thêm đơn hàng từ cơ sở dữ liệu.

Điều chỉnh tầm nhìn: js/views/OrderView.

js cho phép hiển thị đơn hàng từ cơ sở dữ liệu.

Thiết lập máy chủ: server/server.

js thiết lập máy chủ Express để đáp ứng các yêu cầu API.

Cấu trúc này giúp bạn có một ứng dụng MVC đầy đủ với kết nối dễ bảo trì và mở rộng cơ sở dữ liệu MySQL.

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Google Maps: @khuongkara

#Base Code #Souce Code

Npm: @tools.mtips5s.com

Bộ công cụ My Self: @github

Npm: @npm

Docker: @docker

Chúc các bạn thành công!