บทที่ 7 การแสดงผลข้อมูลด้วยเว็บแอปพลิเคชัน

    from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import psycopg

# -------------------------
# FastAPI
# -------------------------

app = FastAPI()

# -------------------------
# CORS
# -------------------------

app.add_middleware(

    CORSMiddleware,

    allow_origins=["*"],

    allow_credentials=True,

    allow_methods=["*"],

    allow_headers=["*"]

)

# -------------------------
# PostgreSQL
# -------------------------

conn = psycopg.connect(

    host="localhost",
    dbname="iot_database",
    user="postgres",
    password="**********",
    port=5432

)

print("เชื่อมต่อ PostgreSQL สำเร็จ")

# -------------------------
# JSON Model
# -------------------------

class Device(BaseModel):

    device_id: str
    device_name: str
    location: str
    ip_address: str


# ==========================================================
# POST : เพิ่มข้อมูลอุปกรณ์
# ==========================================================

@app.post("/device")
def add_device(device: Device):

    try:

        with conn.cursor() as cur:

            cur.execute(
                """
                INSERT INTO device
                (
                    device_id,
                    device_name,
                    location,
                    ip_address
                )

                VALUES
                (%s,%s,%s,%s)
                """,

                (
                    device.device_id,
                    device.device_name,
                    device.location,
                    device.ip_address
                )

            )

        conn.commit()

        print("บันทึกข้อมูลสำเร็จ")

        return {

            "status":"OK",
            "message":"บันทึกข้อมูลสำเร็จ"

        }

    except Exception as e:

        conn.rollback()

        print(e)

        return {

            "status":"ERROR",
            "message":str(e)

        }


# ==========================================================
# GET : อ่านข้อมูลทั้งหมด
# ==========================================================

@app.get("/device")
def get_device():

    try:

        with conn.cursor() as cur:

            cur.execute(
                """
                SELECT

                    device_id,
                    device_name,
                    location,
                    ip_address

                FROM device

                ORDER BY device_id
                """
            )

            rows = cur.fetchall()

        device_list = []

        for row in rows:

            device_list.append({

                "device_id": row[0],
                "device_name": row[1],
                "location": row[2],
                "ip_address": row[3]

            })

        return device_list

    except Exception as e:

        print(e)

        return {

            "status":"ERROR",
            "message":str(e)

        }


    

    <!DOCTYPE html>
<html lang="th">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Device List</title>

    <style>

        body{

            font-family: Arial, Helvetica, sans-serif;
            margin:40px;
            background:#f5f5f5;

        }

        h2{

            color:#003366;

        }

        table{

            width:100%;
            border-collapse:collapse;
            background:white;

        }

        th{

            background:#003366;
            color:white;
            padding:10px;

        }

        td{

            border:1px solid #cccccc;
            padding:8px;
            text-align:center;

        }

        tr:nth-child(even){

            background:#eeeeee;

        }

        button{

            padding:10px 20px;
            font-size:16px;
            margin-bottom:20px;

        }

    </style>

</head>

<body>

<h2>รายการอุปกรณ์ IoT</h2>

<button onclick="loadDevice()">

โหลดข้อมูล

</button>

<table>

<thead>

<tr>

<th>ลำดับ</th>
<th>Device ID</th>
<th>Device Name</th>
<th>Location</th>
<th>IP Address</th>

</tr>

</thead>

<tbody id="deviceTable">

</tbody>

</table>


<script>

async function loadDevice(){

    try{

        //------------------------------------------------
        // เรียก FastAPI
        //------------------------------------------------

        const response =
            await fetch("http://127.0.0.1:8000/device");


        //------------------------------------------------
        // JSON -> JavaScript Object
        //------------------------------------------------

        const devices =
            await response.json();


        console.log(devices);


        //------------------------------------------------
        // สร้างตาราง
        //------------------------------------------------

        let html="";

        devices.forEach(function(device,index){

            html +=

            "<tr>"+

            "<td>"+(index+1)+"</td>"+

            "<td>"+device.device_id+"</td>"+

            "<td>"+device.device_name+"</td>"+

            "<td>"+device.location+"</td>"+

            "<td>"+device.ip_address+"</td>"+

            "</tr>";

        });


        //------------------------------------------------
        // แสดงผล
        //------------------------------------------------

        document.getElementById("deviceTable").innerHTML=html;

    }

    catch(error){

        console.log(error);

        alert("ไม่สามารถเชื่อมต่อ FastAPI ได้");

    }

}

</script>

</body>

</html>