TRẦN VĂN BÌNH MASTER: 🌐 BÀI 20: TÍCH HỢP REST API VÀO GIAO DIỆN WEB VỚI HTML + JAVASCRIPT

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

🌐 BÀI 20: TÍCH HỢP REST API VÀO GIAO DIỆN WEB VỚI HTML + JAVASCRIPT

📦 1. Mục tiêu

Giao diện nhập tên + điểm sinh viên
Dữ liệu gửi về Flask API qua fetch()
Hiển thị danh sách sinh viên lấy từ API
Không cần reload trang (AJAX-style)

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

pgsql
flask_api_web/
├── app.py
├── templates/
│   └── index.html
├── students.csv

🧠 3. File `app.py` – Flask API + giao diện

python
from flask import Flask, jsonify, request, render_template
import pandas as pd
import os

app = Flask(__name__)
CSV_FILE = "students.csv"

def load_data():
    if os.path.exists(CSV_FILE):
        return pd.read_csv(CSV_FILE)
    return pd.DataFrame(columns=["id", "name", "score"])

def save_data(df):
    df.to_csv(CSV_FILE, index=False)

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

@app.route("/api/students", methods=["GET", "POST"])
def students():
    df = load_data()

    if request.method == "GET":
        return jsonify(df.to_dict(orient="records"))

    data = request.get_json()
    new_id = df["id"].max() + 1 if not df.empty else 1
    data["id"] = int(new_id)
    df = pd.concat([df, pd.DataFrame([data])], ignore_index=True)
    save_data(df)
    return jsonify({"message": "Thêm thành công", "id": new_id})

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

🎨 4. File `templates/index.html` – Giao diện web

html
<!DOCTYPE html>
<html>
<head>
    <title>Giao diện REST API</title>
    <style>
        body { font-family: Arial; max-width: 600px; margin: auto; padding: 20px; }
        input, button { padding: 8px; margin: 5px 0; width: 100%; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    </style>
</head>
<body>
    <h2>Thêm sinh viên</h2>
    <input type="text" id="name" placeholder="Tên">
    <input type="number" id="score" placeholder="Điểm">
    <button onclick="addStudent()">Thêm</button>

    <h3>Danh sách sinh viên</h3>
    <table>
        <thead><tr><th>ID</th><th>Tên</th><th>Điểm</th></tr></thead>
        <tbody id="studentTable"></tbody>
    </table>

    <script>
        async function fetchStudents() {
            const res = await fetch("/api/students");
            const data = await res.json();
            const table = document.getElementById("studentTable");
            table.innerHTML = "";
            data.forEach(sv => {
                table.innerHTML += `<tr><td>${sv.id}</td><td>${sv.name}</td><td>${sv.score}</td></tr>`;
            });
        }

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

            if (!name || isNaN(score)) {
                alert("Vui lòng nhập tên và điểm hợp lệ");
                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 = "";
            fetchStudents();  // refresh bảng
        }

        fetchStudents();  // tải danh sách ban đầu
    </script>
</body>
</html>

▶️ 5. Cách chạy

Mở terminal tại thư mục chứa app.py
Chạy:

bash
python app.py

Mở trình duyệt tại http://127.0.0.1:5000/

✅ 6. Kết quả

Nhập tên + điểm → gửi POST tới API /api/students
Giao diện tự động gọi lại GET để cập nhật bảng
Không reload trang → hiệu ứng “realtime nhẹ”

🔄 7. Mở rộng sau bài học

Nâng cấp	Gợi ý
Xóa / sửa sinh viên	Thêm nút trên từng dòng và xử lý bằng `DELETE`, `PUT`
Tìm kiếm sinh viên	Dùng `input` kết hợp `filter()` trong JS
Biểu đồ tương tác	Dùng `Chart.js` hoặc `Plotly.js` vẽ ngay trong trình duyệt
Sử dụng fetch để gọi API ngoài	Như lấy dữ liệu thời tiết, crypto, covid...

✅ 8. Kết luận

Bạn vừa xây một ứng dụng web frontend dùng HTML + JS gọi REST API Flask backend
Hiểu cơ chế này = nắm nền tảng để xây fullstack: web → API → database
Mô hình này có thể mở rộng ra SPA, dashboard, mobile app (React Native, Flutter...)

=============================
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