TRẦN VĂN BÌNH MASTER: 🔄 BÀI 27: TÍCH HỢP API REST VÀ GIAO DIỆN ADMIN

Chủ Nhật, 20 tháng 7, 2025

🔄 BÀI 27: TÍCH HỢP API REST VÀ GIAO DIỆN ADMIN – KẾT NỐI FRONTEND + BACKEND

🎯 1. Mục tiêu

Gọi REST API từ giao diện web bằng JavaScript
Cho phép:
- Thêm sinh viên
- Hiển thị danh sách sinh viên
- Xoá sinh viên (có xác nhận)
- Vẽ biểu đồ realtime
Không cần reload trang, trải nghiệm hiện đại

📦 2. Chuẩn bị backend Flask API

Ta dùng lại phần Flask REST API đã triển khai (bài 23), chỉ cần thêm API xóa:

python
@app.route("/api/students/<int:id>", methods=["DELETE"])
def delete_student(id):
    s = Student.query.get_or_404(id)
    db.session.delete(s)
    db.session.commit()
    return jsonify({"message": "Đã xoá"}), 200

📁 3. Giao diện `templates/admin.html`

✅ HTML + Fetch API:

html
<!DOCTYPE html>
<html>
<head>
  <title>Quản trị sinh viên</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body { font-family: Arial; padding: 20px; max-width: 800px; margin: auto; }
    input, button { margin: 5px 0; padding: 6px; }
    canvas { margin-top: 20px; max-width: 100%; }
  </style>
</head>
<body>
  <h2>Quản trị sinh viên</h2>

  <label>Tên:</label><br>
  <input id="name"><br>
  <label>Điểm:</label><br>
  <input id="score" type="number" step="0.1"><br>
  <button onclick="addStudent()">➕ Thêm</button>

  <h3>Danh sách sinh viên</h3>
  <ul id="student-list"></ul>

  <h3>Biểu đồ điểm</h3>
  <canvas id="chart"></canvas>

  <script>
    let chart;

    async function fetchStudents() {
      const res = await fetch("/api/students");
      return await res.json();
    }

    async function renderChart(students) {
      const labels = students.map(s => s.name);
      const scores = students.map(s => s.score);

      if (chart) chart.destroy();

      const ctx = document.getElementById("chart").getContext("2d");
      chart = new Chart(ctx, {
        type: "bar",
        data: {
          labels,
          datasets: [{
            label: "Điểm sinh viên",
            data: scores,
            backgroundColor: "rgba(75, 192, 192, 0.6)"
          }]
        },
        options: { scales: { y: { beginAtZero: true, max: 10 } } }
      });
    }

    async function renderList() {
      const students = await fetchStudents();
      const ul = document.getElementById("student-list");
      ul.innerHTML = "";
      for (const s of students) {
        const li = document.createElement("li");
        li.textContent = `${s.name} (${s.score})`;
        const btn = document.createElement("button");
        btn.textContent = "❌ Xoá";
        btn.onclick = () => deleteStudent(s.id);
        li.appendChild(btn);
        ul.appendChild(li);
      }
      renderChart(students);
    }

    async function addStudent() {
      const name = document.getElementById("name").value;
      const score = parseFloat(document.getElementById("score").value);
      if (!name || isNaN(score)) {
        alert("Nhập đầy đủ thông tin.");
        return;
      }

      await fetch("/api/students", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, score })
      });

      document.getElementById("name").value = "";
      document.getElementById("score").value = "";
      renderList();
    }

    async function deleteStudent(id) {
      if (!confirm("Bạn có chắc muốn xoá?")) return;
      await fetch(`/api/students/${id}`, { method: "DELETE" });
      renderList();
    }

    renderList();
  </script>
</body>
</html>

🧪 4. Thử nghiệm

Chức năng	Kết quả mong đợi
Thêm sinh viên	Giao diện cập nhật ngay
Xoá sinh viên	Có hộp thoại xác nhận
Biểu đồ	Tự động cập nhật
Không reload trang	✅ Trải nghiệm mượt

🔁 5. Tổng hợp các API đã dùng

API	Method	Mô tả
`/api/students`	GET	Lấy danh sách
`/api/students`	POST	Thêm
`/api/students/<id>`	DELETE	Xoá

✅ 6. Kết luận

Bạn vừa:

✅ Tích hợp frontend gọi Flask API bằng Fetch
✅ Tạo giao diện quản trị động, hiện đại
✅ Kết hợp quản trị + biểu đồ trên cùng một trang
✅ Viết ứng dụng frontend đơn giản không cần React/Vue

=============================
Website không chứa bất kỳ quảng cáo nào, mọi đóng góp để duy trì phát triển cho website (donation) xin vui lòng gửi về STK 90.2142.8888 - Ngân hàng Vietcombank Thăng Long - TRAN VAN BINH
=============================
Nếu bạn không muốn bị AI thay thế và tiết kiệm 3-5 NĂM trên con đường trở thành DBA chuyên nghiệp hay làm chủ Database thì hãy đăng ký ngay KHOÁ HỌC ORACLE DATABASE A-Z ENTERPRISE, được Coaching trực tiếp từ tôi với toàn bộ bí kíp thực chiến, thủ tục, quy trình của gần 20 năm kinh nghiệm (mà bạn sẽ KHÔNG THỂ tìm kiếm trên Internet/Google) từ đó giúp bạn dễ dàng quản trị mọi hệ thống Core tại Việt Nam và trên thế giới, đỗ OCP.
- CÁCH ĐĂNG KÝ: Gõ (.) hoặc để lại số điện thoại hoặc inbox https://m.me/tranvanbinh.vn hoặc Hotline/Zalo 090.29.12.888
- Chi tiết tham khảo:
https://bit.ly/oaz_w
=============================
2 khóa học online qua video giúp bạn nhanh chóng có những kiến thức nền tảng về Linux, Oracle, học mọi nơi, chỉ cần có Internet/4G:
- Oracle cơ bản: https://bit.ly/admin_1200
- Linux: https://bit.ly/linux_1200
=============================
KẾT NỐI VỚI CHUYÊN GIA TRẦN VĂN BÌNH:
📧 Mail: binhoracle@gmail.com
☎️ Mobile/Zalo: 0902912888
👨 Facebook: https://www.facebook.com/BinhOracleMaster
👨 Inbox Messenger: https://m.me/101036604657441 (profile)
👨 Fanpage: https://www.facebook.com/tranvanbinh.vn
👨 Inbox Fanpage: https://m.me/tranvanbinh.vn
👨👩 Group FB: https://www.facebook.com/groups/DBAVietNam
👨 Website: https://www.tranvanbinh.vn
👨 Blogger: https://tranvanbinhmaster.blogspot.com
🎬 Youtube: https://www.youtube.com/@binhguru
👨 Tiktok: https://www.tiktok.com/@binhguru
👨 Linkin: https://www.linkedin.com/in/binhoracle
👨 Twitter: https://twitter.com/binhguru
👨 Podcast: https://www.podbean.com/pu/pbblog-eskre-5f82d6
👨 Địa chỉ: Tòa nhà Sun Square - 21 Lê Đức Thọ - Phường Mỹ Đình 1 - Quận Nam Từ Liêm - TP.Hà Nội

=============================
AI, trí tuệ nhân tạo, artificial intelligence, machine learning, deep learning, LLM, ChatGPT, DeepSeek, Grok, oracle tutorial, học oracle database, Tự học Oracle, Tài liệu Oracle 12c tiếng Việt, Hướng dẫn sử dụng Oracle Database, Oracle SQL cơ bản, Oracle SQL là gì, Khóa học Oracle Hà Nội, Học chứng chỉ Oracle ở đầu, Khóa học Oracle online,sql tutorial, khóa học pl/sql tutorial, học dba, học dba ở việt nam, khóa học dba, khóa học dba sql, tài liệu học dba oracle, Khóa học Oracle online, học oracle sql, học oracle ở đâu tphcm, học oracle bắt đầu từ đâu, học oracle ở hà nội, oracle database tutorial, oracle database 12c, oracle database là gì, oracle database 11g, oracle download, oracle database 19c, oracle dba tutorial, oracle tunning, sql tunning , oracle 12c, oracle multitenant, Container Databases (CDB), Pluggable Databases (PDB), oracle cloud, oracle security, oracle fga, audit_trail,oracle RAC, ASM, oracle dataguard, oracle goldengate, mview, oracle exadata, oracle oca, oracle ocp, oracle ocm , oracle weblogic, postgresql tutorial, mysql tutorial, mariadb tutorial, ms sql server tutorial, nosql, mongodb tutorial, oci, cloud, middleware tutorial, hoc solaris tutorial, hoc linux tutorial, hoc aix tutorial, unix tutorial, securecrt, xshell, mobaxterm, putty