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

🗃️ BÀI 22: TÍCH HỢP FLASK + CHART.JS + DATABASE – DASHBOARD TRUY XUẤT BIỂU ĐỒ TỪ SQL

🎯 1. Mục tiêu

  • Dùng SQLite database thay vì CSV

  • Lưu dữ liệu sinh viên (id, name, score) vào DB

  • Truy xuất bằng Flask API

  • Trực quan hóa bằng Chart.js (biểu đồ realtime)

🧰 2. Thư viện sử dụng

  • Flask: Web framework

  • SQLite3: DB đơn giản tích hợp sẵn trong Python

  • Chart.js: Biểu đồ đẹp trong trình duyệt

🧱 3. Cấu trúc thư mục

css
flask_sql_dashboard/
├── app.py
├── database.db   # tự tạo bằng code
├── templates/
│   └── index.html

⚙️ 4. File app.py – Flask + SQLite

python
from flask import Flask, request, jsonify, render_template
import sqlite3

app = Flask(__name__)
DB_FILE = "database.db"

# Tạo bảng nếu chưa có
def init_db():
    with sqlite3.connect(DB_FILE) as conn:
        c = conn.cursor()
        c.execute('''
            CREATE TABLE IF NOT EXISTS students (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                name TEXT NOT NULL,
                score REAL NOT NULL
            )
        ''')
        conn.commit()

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/api/students", methods=["GET", "POST"])
def students():
    conn = sqlite3.connect(DB_FILE)
    c = conn.cursor()

    if request.method == "POST":
        data = request.get_json()
        c.execute("INSERT INTO students (name, score) VALUES (?, ?)", (data["name"], data["score"]))
        conn.commit()
        return jsonify({"message": "Thêm thành công"}), 201

    # GET
    c.execute("SELECT id, name, score FROM students")
    rows = c.fetchall()
    conn.close()

    students = [{"id": r[0], "name": r[1], "score": r[2]} for r in rows]
    return jsonify(students)

if __name__ == "__main__":
    init_db()
    app.run(debug=True)

🖼️ 5. File templates/index.html – Giao diện + biểu đồ

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dashboard 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-top: 10px; width: 100%; padding: 8px; }
    canvas { max-width: 100%; margin-top: 30px; }
  </style>
</head>
<body>
  <h2>Thêm sinh viên</h2>
  <input type="text" id="name" placeholder="Tên sinh viên">
  <input type="number" id="score" placeholder="Điểm" min="0" max="10">
  <button onclick="addStudent()">Thêm</button>

  <h2>Biểu đồ điểm sinh viên</h2>
  <canvas id="chart"></canvas>

  <script>
    let chart;

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

    async function renderChart() {
      const data = await fetchStudents();
      const labels = data.map(sv => sv.name);
      const scores = data.map(sv => sv.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(54, 162, 235, 0.6)"
          }]
        },
        options: {
          responsive: true,
          scales: {
            y: { beginAtZero: true, max: 10 }
          }
        }
      });
    }

    async function addStudent() {
      const name = document.getElementById("name").value;
      const score = parseFloat(document.getElementById("score").value);

      if (!name || isNaN(score)) {
        alert("Nhập đầy đủ và đúng định dạng");
        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 = "";
      renderChart();
    }

    renderChart();
    setInterval(renderChart, 5000);
  </script>
</body>
</html>

▶️ 6. Chạy ứng dụng

bash
python app.py

Truy cập tại: http://127.0.0.1:5000

✅ 7. Kết quả

  • Form cho phép nhập tên và điểm → lưu vào DB SQLite

  • Biểu đồ bar cập nhật mỗi 5 giây → realtime nhẹ

  • Không cần reload, hoàn toàn frontend JS kết nối API Flask

🧱 8. Ưu điểm so với CSV

Tiêu chíCSVSQLite
Đồng bộ nhiều người❌✅
Tìm kiếm / lọc nhanh❌✅
Đảm bảo dữ liệuThấpCao
Mở rộng quy môKhóTốt hơn
Kết nối dashboard, BI toolsHạn chếDễ dàng

✅ 9. Kết luận

  • Bạn đã học cách tích hợp:

    • Frontend: HTML + JS + Chart.js

    • Backend: Flask REST API

    • Database: SQLite

  • Đây là nền tảng mini-dashboard rất phù hợp với:

    • Hệ thống thống kê

    • Tool nội bộ IT/QA

    • Theo dõi điểm số, log, số liệu server

=============================
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
Sửa bài viết
Sửa bài viết By lúc Sửa bài viết
Labels:

ĐỌC NHIỀU
Trần Văn Bình - Oracle Database Master