Hướng dẫn chi tiết cách xây dựng Hệ thống quản lý trường học (SMS) bằng MERN Stack

Khám phá cách xây dựng một Hệ thống Quản lý Trường học hiện đại và hiệu quả bằng MERN Stack với hướng dẫn chi tiết từng bước cùng các đoạn mã minh họa.

Mục lục

Giới thiệu về Hệ thống Quản lý Trường học và MERN Stack

Trong thời đại số hóa ngày nay, các tổ chức giáo dục như trường học, trung tâm đào tạo đang tìm kiếm giải pháp để tối ưu hóa quy trình hoạt động, từ quản lý học sinh, giáo viên đến lịch học và điểm danh. Một **Hệ thống Quản lý Trường học (School Management System – SMS)** chính là câu trả lời. SMS giúp số hóa mọi hoạt động, tạo môi trường tương tác hiệu quả giữa ban giám hiệu, giáo viên, học sinh và phụ huynh.

Để xây dựng một hệ thống như vậy một cách mạnh mẽ, linh hoạt và có thể mở rộng, việc lựa chọn công nghệ phù hợp là rất quan trọng. **MERN Stack** nổi lên như một lựa chọn phổ biến và hiệu quả. MERN là viết tắt của MongoDB, Express.js, React.js, và Node.js. Sự kết hợp này cung cấp một bộ công cụ JavaScript end-to-end, giúp phát triển ứng dụng web full-stack nhanh chóng và hiệu quả.

MongoDB: Cơ sở dữ liệu NoSQL linh hoạt, lưu trữ dữ liệu dạng tài liệu (document).
Express.js: Framework back-end tối giản, mạnh mẽ cho Node.js, giúp xây dựng API dễ dàng.
React.js: Thư viện JavaScript cho front-end, xây dựng giao diện người dùng tương tác và hiệu quả.
Node.js: Môi trường chạy JavaScript phía server, cho phép xây dựng back-end bằng JavaScript.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn từng bước xây dựng một Hệ thống Quản lý Trường học cơ bản nhưng đầy đủ chức năng sử dụng toàn bộ sức mạnh của MERN Stack, bao gồm cả các đoạn mã code minh họa.

Các chức năng chính sẽ được xây dựng

Hướng dẫn này sẽ tập trung vào việc xây dựng các module cốt lõi của một SMS:

Xác thực người dùng: Quản lý đăng ký, đăng nhập cho các vai trò khác nhau (quản trị viên, giáo viên, học sinh).
Quản lý học sinh và giáo viên: Thêm, xem, cập nhật, xóa thông tin học sinh và giáo viên.
Lên lịch học: Tổ chức và hiển thị lịch trình các lớp học.
Theo dõi điểm danh: Ghi lại và xem lại trạng thái điểm danh của học sinh.
Giao diện người dùng cơ bản với React: Xây dựng trang tổng quan (Dashboard) để hiển thị dữ liệu.

Bắt đầu: Cài đặt dự án

Bước đầu tiên là thiết lập môi trường phát triển cho cả phần back-end và front-end của ứng dụng MERN.

Thiết lập Back-end (Node.js & Express.js)

Chúng ta sẽ tạo một thư mục cho back-end, khởi tạo dự án Node.js và cài đặt các thư viện cần thiết. Các thư viện này bao gồm Express để xây dựng API, Mongoose để làm việc với MongoDB, dotenv để quản lý biến môi trường, bcryptjs để mã hóa mật khẩu, jsonwebtoken để tạo và xác thực token JWT, và cors để xử lý các yêu cầu từ front-end.

mkdir backend && cd backend
npm init -y
npm install express mongoose dotenv bcryptjs jsonwebtoken cors

Các gói này sẽ cung cấp nền tảng vững chắc để xây dựng server API của chúng ta.

Thiết lập Front-end (React.js)

Tiếp theo, chúng ta sẽ tạo một ứng dụng React mới bằng `create-react-app` (hoặc Vite, Next.js tùy chọn, nhưng trong hướng dẫn này dùng CRA cho đơn giản) và cài đặt các thư viện cần thiết cho việc giao tiếp API và định tuyến.

npx create-react-app frontend
cd frontend
npm install axios react-router-dom

axios là một thư viện HTTP client phổ biến giúp gửi yêu cầu đến back-end API dễ dàng hơn, trong khi react-router-dom cần thiết để quản lý các route (đường dẫn) trong ứng dụng React.

Xây dựng Hệ thống Xác thực (Authentication System)

Xác thực là nền tảng của bất kỳ hệ thống quản lý nào, đảm bảo chỉ những người dùng có quyền mới có thể truy cập các chức năng phù hợp. Chúng ta sẽ xây dựng hệ thống đăng ký và đăng nhập dựa trên vai trò người dùng (admin, teacher, student).

Model User (MongoDB)

Định nghĩa schema cho người dùng trong MongoDB sử dụng Mongoose. Schema này sẽ bao gồm tên, email, mật khẩu (đã mã hóa) và vai trò của người dùng.

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true, required: true }, // email là duy nhất và bắt buộc
  password: String, // Mật khẩu đã mã hóa
  role: { type: String, enum: ['admin', 'teacher', 'student'], default: 'student' }, // Vai trò người dùng
});

// Middleware trước khi lưu: Mã hóa mật khẩu
userSchema.pre('save', async function (next) {
  if (!this.isModified('password')) return next(); // Chỉ mã hóa nếu mật khẩu bị thay đổi
  this.password = await bcrypt.hash(this.password, 12); // Mã hóa mật khẩu với salt factor 12
  next();
});

module.exports = mongoose.model('User', userSchema);

Chú ý sử dụng middleware `pre(‘save’)` để tự động mã hóa mật khẩu trước khi lưu vào cơ sở dữ liệu, sử dụng thư viện `bcryptjs`.

Routes Xác thực (Node.js/Express)

Xây dựng các endpoint API để xử lý đăng ký và đăng nhập người dùng. Endpoint đăng ký sẽ tạo người dùng mới với mật khẩu đã mã hóa. Endpoint đăng nhập sẽ kiểm tra email và mật khẩu, sau đó trả về một JSON Web Token (JWT) nếu thông tin hợp lệ. JWT sẽ được sử dụng để xác thực các yêu cầu tiếp theo.

const express = require('express');
const router = express.Router();
const User = require('../models/User');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');

// Endpoint đăng ký người dùng mới
router.post('/register', async (req, res) => {
  try {
    const { name, email, password, role } = req.body;
    // Kiểm tra xem email đã tồn tại chưa
    const existingUser = await User.findOne({ email });
    if (existingUser) {
        return res.status(400).json({ error: 'Email đã được sử dụng.' });
    }
    const user = new User({ name, email, password, role });
    await user.save();
    res.status(201).json({ message: 'Đăng ký người dùng thành công.' });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Endpoint đăng nhập
router.post('/login', async (req, res) => {
  try {
    const { email, password } = req.body;
    const user = await User.findOne({ email });

    // Kiểm tra người dùng tồn tại và mật khẩu
    if (!user || !(await bcrypt.compare(password, user.password))) {
      return res.status(401).json({ error: 'Email hoặc mật khẩu không hợp lệ.' });
    }

    // Tạo JWT
    const token = jwt.sign({ id: user._id, role: user.role }, process.env.JWT_SECRET, {
        expiresIn: '1h' // Token hết hạn sau 1 giờ
    }); // JWT_SECRET nên được lưu trong biến môi trường

    res.json({ token, user: { id: user._id, name: user.name, role: user.role } }); // Trả về token và thông tin người dùng cơ bản
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

module.exports = router;

Để sử dụng `process.env.JWT_SECRET`, bạn cần cài đặt và cấu hình thư viện `dotenv` trong file server chính của mình.

Quản lý Học sinh

Module quản lý học sinh cho phép hệ thống lưu trữ, truy xuất và cập nhật thông tin về tất cả học sinh trong trường.

Model Student (MongoDB)

Định nghĩa schema cho học sinh.

const mongoose = require('mongoose');

const studentSchema = new mongoose.Schema({
  name: { type: String, required: true },
  age: Number,
  grade: String,
  parentContact: String, // Thông tin liên lạc phụ huynh
  // Có thể thêm các trường khác như ngày sinh, địa chỉ, giới tính...
});

module.exports = mongoose.model('Student', studentSchema);

Routes Student (Node.js/Express)

Xây dựng các endpoint API cơ bản cho phép thao tác CRUD (Create, Read, Update, Delete) trên dữ liệu học sinh. Ở đây chỉ minh họa GET (đọc tất cả) và POST (tạo mới).

const express = require('express');
const router = express.Router();
const Student = require('../models/Student');
// Cần middleware xác thực và phân quyền ở đây cho ứng dụng thực tế

// Lấy danh sách tất cả học sinh
router.get('/', async (req, res) => {
  try {
    const students = await Student.find();
    res.json(students);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Tạo học sinh mới
router.post('/', async (req, res) => {
  try {
    const student = new Student(req.body);
    await student.save();
    res.status(201).json(student);
  } catch (error) {
    res.status(400).json({ error: error.message }); // Lỗi validate hoặc dữ liệu không hợp lệ
  }
});

// Cần thêm các routes GET /:id (lấy theo ID), PUT /:id (cập nhật), DELETE /:id (xóa)

Quản lý Giáo viên

Tương tự như học sinh, module quản lý giáo viên giúp lưu trữ và quản lý thông tin của đội ngũ giáo viên.

Model Teacher (MongoDB)

Định nghĩa schema cho giáo viên.

const mongoose = require('mongoose');

const teacherSchema = new mongoose.Schema({
  name: { type: String, required: true },
  subject: String, // Môn dạy
  email: { type: String, unique: true },
  phone: String,
  // Có thể thêm bằng cấp, ngày vào làm...
});

module.exports = mongoose.model('Teacher', teacherSchema);

Routes Teacher (Node.js/Express)

Các endpoint API cơ bản cho phép thao tác với dữ liệu giáo viên (GET và POST được minh họa).

const express = require('express');
const router = express.Router();
const Teacher = require('../models/Teacher');
// Cần middleware xác thực và phân quyền ở đây

// Lấy danh sách tất cả giáo viên
router.get('/', async (req, res) => {
  try {
    const teachers = await Teacher.find();
    res.json(teachers);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Tạo giáo viên mới
router.post('/', async (req, res) => {
  try {
    const teacher = new Teacher(req.body);
    await teacher.save();
    res.status(201).json(teacher);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// Cần thêm các routes GET /:id, PUT /:id, DELETE /:id

Lên lịch học (Class Scheduling)

Module này giúp tổ chức các lớp học, liên kết giáo viên và học sinh với từng lớp cụ thể.

Model Class (MongoDB)

Schema lớp học sẽ tham chiếu đến giáo viên (một giáo viên dạy nhiều lớp) và học sinh (nhiều học sinh trong một lớp).

const mongoose = require('mongoose');

const classSchema = new mongoose.Schema({
  className: { type: String, required: true },
  teacher: { type: mongoose.Schema.Types.ObjectId, ref: 'Teacher', required: true }, // Tham chiếu đến Giáo viên
  students: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Student' }], // Tham chiếu đến nhiều Học sinh
  scheduleTime: String, // Ví dụ: "Thứ 2, 8:00 - 9:30"
  // Có thể thêm phòng học, môn học cụ thể...
});

module.exports = mongoose.model('Class', classSchema);

Sử dụng `mongoose.Schema.Types.ObjectId` và `ref` để thiết lập mối quan hệ giữa các collection trong MongoDB.

Routes Class (Node.js/Express)

Các endpoint cho phép quản lý lớp học. Khi lấy danh sách lớp học, chúng ta sử dụng phương thức `populate()` của Mongoose để tự động lấy thông tin chi tiết của giáo viên và học sinh liên quan thay vì chỉ ID.

const express = require('express');
const router = express.Router();
const Class = require('../models/Class');
// Cần middleware xác thực và phân quyền

// Lấy danh sách tất cả lớp học, bao gồm thông tin giáo viên và học sinh
router.get('/', async (req, res) => {
  try {
    const classes = await Class.find().populate('teacher students'); // Sử dụng populate để lấy chi tiết teacher và students
    res.json(classes);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Tạo lớp học mới
router.post('/', async (req, res) => {
  try {
    const newClass = new Class(req.body);
    await newClass.save();
    // Có thể populate kết quả trả về nếu cần
    res.status(201).json(newClass);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// Cần thêm các routes GET /:id, PUT /:id, DELETE /:id

Theo dõi Điểm danh (Attendance Tracking)

Module điểm danh cho phép ghi lại và xem lại trạng thái tham gia lớp học của từng học sinh vào những ngày cụ thể.

Model Attendance (MongoDB)

Schema điểm danh sẽ lưu trữ thông tin học sinh, ngày điểm danh và trạng thái (có mặt/vắng mặt).

const mongoose = require('mongoose');

const attendanceSchema = new mongoose.Schema({
  student: { type: mongoose.Schema.Types.ObjectId, ref: 'Student', required: true }, // Tham chiếu đến Học sinh
  date: { type: Date, default: Date.now }, // Ngày điểm danh, mặc định là ngày hiện tại
  status: { type: String, enum: ['present', 'absent', 'late', 'excused'], default: 'present' }, // Trạng thái điểm danh
  // Có thể thêm trường class: { type: mongoose.Schema.Types.ObjectId, ref: 'Class' } để điểm danh theo lớp cụ thể
});

module.exports = mongoose.model('Attendance', attendanceSchema);

Routes Attendance (Node.js/Express)

Endpoint để ghi nhận điểm danh và xem lại lịch sử điểm danh của một học sinh cụ thể.

const express = require('express');
const router = express.Router();
const Attendance = require('../models/Attendance');
// Cần middleware xác thực và phân quyền

// Ghi nhận điểm danh
router.post('/', async (req, res) => {
  try {
    const attendance = new Attendance(req.body); // body nên chứa student ID và status (nếu khác default)
    await attendance.save();
    res.status(201).json(attendance);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

// Lấy lịch sử điểm danh của một học sinh
router.get('/:studentId', async (req, res) => {
  try {
    const records = await Attendance.find({ student: req.params.studentId }).populate('student'); // Có thể populate student nếu cần
    res.json(records);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Tích hợp Front-end (React)

Sau khi xây dựng các API back-end, chúng ta cần một giao diện người dùng để tương tác với hệ thống. React là lựa chọn tuyệt vời cho điều này.

Trang Dashboard cơ bản (React)

Xây dựng một trang Dashboard đơn giản hiển thị danh sách học sinh và giáo viên bằng cách gọi các API back-end đã tạo.

import React, { useEffect, useState } from 'react';
import axios from 'axios'; // Import axios để gọi API

const Dashboard = () => {
  const [students, setStudents] = useState([]); // State lưu danh sách học sinh
  const [teachers, setTeachers] = useState([]); // State lưu danh sách giáo viên
  const [loading, setLoading] = useState(true); // State theo dõi trạng thái tải dữ liệu
  const [error, setError] = useState(null); // State lưu lỗi nếu có

  useEffect(() => {
    // Hàm fetch dữ liệu
    const fetchData = async () => {
        try {
            setLoading(true);
            // Gọi API lấy danh sách học sinh
            const studentsRes = await axios.get('http://localhost:5000/api/students'); // Đảm bảo back-end chạy trên port 5000
            setStudents(studentsRes.data);

            // Gọi API lấy danh sách giáo viên
            const teachersRes = await axios(http://localhost:5000/api/teachers);
            setTeachers(teachersRes.data);

            setLoading(false);
        } catch (err) {
            setError("Không thể tải dữ liệu. Vui lòng kiểm tra server.");
            setLoading(false);
            console.error("Error fetching data:", err);
        }
    };

    fetchData(); // Chạy hàm fetch khi component mount
  }, []); // Dependency rỗng, chỉ chạy 1 lần khi mount

  if (loading) return <div>Đang tải...</div>;
  if (error) return <div style={{ color: 'red' }}>Lỗi: {error}</div>;


  return (
    <div>
      <h1>Chào mừng đến với Hệ thống Quản lý Trường học</h1>

      <section>
        <h2>Danh sách Học sinh</h2>
        {students.length === 0 ? (
            <p>Chưa có học sinh nào trong hệ thống.</p>
        ) : (
            <ul>
              {students.map(s => (
                <li key={s._id}>{s.name} - Lớp: {s.grade} - Liên hệ PH: {s.parentContact}</li>
              ))}
            </ul>
        )}
      </section>
      <br /> {/* Thêm khoảng cách */}

      <section>
        <h2>Danh sách Giáo viên</h2>
        {teachers.length === 0 ? (
            <p>Chưa có giáo viên nào trong hệ thống.</p>
        ) : (
            <ul>
              {teachers.map(t => (
                <li key={t._id}>{t.name} - Môn dạy: <strong>{t.subject}</strong> - Email: {t.email}</li>
              ))}
            </ul>
        )}
      </section>

      {/* Có thể thêm các section hiển thị Lịch học, Điểm danh tại đây */}

    </div>
  );
};

export default Dashboard;

Component này sử dụng hook `useEffect` để gọi API khi component được render lần đầu và `useState` để lưu trữ dữ liệu nhận được từ API. `axios.get` được dùng để gửi yêu cầu HTTP GET tới các endpoint back-end.

Kết luận

Qua hướng dẫn này, bạn đã nắm được cách xây dựng một Hệ thống Quản lý Trường học cơ bản sử dụng MERN Stack. Hệ thống này cung cấp các chức năng cốt lõi:

Hệ thống xác thực người dùng với các vai trò khác nhau.
Các module quản lý cho phép thao tác với dữ liệu học sinh và giáo viên.
Module lên lịch học có mối quan hệ với giáo viên và học sinh.
Chức năng theo dõi và ghi nhận điểm danh.
Giao diện người dùng React đơn giản để hiển thị dữ liệu tổng quan.

Đây chỉ là điểm khởi đầu. Để hệ thống sẵn sàng cho môi trường thực tế, bạn cần xem xét mở rộng các chức năng như:

Triển khai middleware xác thực và phân quyền cho tất cả các route API nhạy cảm.
Thêm chức năng cập nhật, xóa, xem chi tiết cho từng đối tượng (học sinh, giáo viên, lớp học, điểm danh).
Xây dựng giao diện người dùng đầy đủ cho tất cả các chức năng quản lý (form thêm mới, trang chỉnh sửa…).
Validate dữ liệu đầu vào ở cả front-end và back-end.
Thêm chức năng tìm kiếm, phân trang, lọc dữ liệu.
Phát triển các tính năng nâng cao như quản lý điểm số, thông báo, báo cáo (xuất PDF), giao diện lịch trực quan.
Tối ưu hóa hiệu suất và bảo mật.

Bạn có thể triển khai ứng dụng này trên các nền tảng đám mây như Render (cho back-end và dịch vụ database nếu không dùng MongoDB Atlas) và Netlify/Vercel (cho front-end). MongoDB Atlas cung cấp dịch vụ cơ sở dữ liệu MongoDB trên đám mây miễn phí và trả phí.

Với kiến thức và nền tảng đã xây dựng, bạn hoàn toàn có thể phát triển dự án này thành một hệ thống quản lý trường học hoàn chỉnh cho mục đích cá nhân, dự án freelance hoặc startup của mình.

Hướng dẫn chi tiết cách xây dựng Hệ thống quản lý trường học (SMS) bằng MERN Stack

Giới thiệu về Hệ thống Quản lý Trường học và MERN Stack

Các chức năng chính sẽ được xây dựng

Bắt đầu: Cài đặt dự án

Thiết lập Back-end (Node.js & Express.js)

Thiết lập Front-end (React.js)

Xây dựng Hệ thống Xác thực (Authentication System)

Model User (MongoDB)

Routes Xác thực (Node.js/Express)

Quản lý Học sinh

Model Student (MongoDB)

Routes Student (Node.js/Express)

Quản lý Giáo viên

Model Teacher (MongoDB)

Routes Teacher (Node.js/Express)

Lên lịch học (Class Scheduling)

Model Class (MongoDB)

Routes Class (Node.js/Express)

Theo dõi Điểm danh (Attendance Tracking)

Model Attendance (MongoDB)

Routes Attendance (Node.js/Express)

Tích hợp Front-end (React)

Trang Dashboard cơ bản (React)

Kết luận

Evotek đồng hành cùng bạn

Call us

(+84) 8.2468.9999

Đăng nhập

Reset Password

Tạo tài khoản Nhà E

Hướng dẫn chi tiết cách xây dựng Hệ thống quản lý trường học (SMS) bằng MERN Stack

Giới thiệu về Hệ thống Quản lý Trường học và MERN Stack

Các chức năng chính sẽ được xây dựng

Bắt đầu: Cài đặt dự án

Thiết lập Back-end (Node.js & Express.js)

Thiết lập Front-end (React.js)

Xây dựng Hệ thống Xác thực (Authentication System)

Model User (MongoDB)

Routes Xác thực (Node.js/Express)

Quản lý Học sinh

Model Student (MongoDB)

Routes Student (Node.js/Express)

Quản lý Giáo viên

Model Teacher (MongoDB)

Routes Teacher (Node.js/Express)

Lên lịch học (Class Scheduling)

Model Class (MongoDB)

Routes Class (Node.js/Express)

Theo dõi Điểm danh (Attendance Tracking)

Model Attendance (MongoDB)

Routes Attendance (Node.js/Express)

Tích hợp Front-end (React)

Trang Dashboard cơ bản (React)

Kết luận

Share this post

Recent News Articles

20 Kỹ Thuật TypeScript Thực Tế Mà Mọi Nhà Phát Triển Nên Biết

Caching: Một Lớp Trừu Tượng Hiệu Quả, Không Chỉ Là Tối Ưu Hiệu Suất

Giới Thiệu tmux-rs: Hành Trình Chuyển Đổi tmux từ C Sang Rust

Evotek đồng hành cùng bạn

Đăng nhập

Reset Password

Tạo tài khoản Nhà E

Call us

(+84) 8.2468.9999