<?php
// listp.php

// Path to SQLite database file
$dbFile = __DIR__ . '/webdb.db';

try {
    if (!file_exists($dbFile)) {
        throw new Exception('Database file not found.');
    }

    // Connect to SQLite database using PDO
    $pdo = new PDO('sqlite:' . $dbFile);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Query all products
    $stmt = $pdo->query('SELECT PID, pname, price, type FROM prod');
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    $error = $e->getMessage();
    $products = [];
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Product List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f9f9f9;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            background: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        img {
            max-width: 80px;
            height: auto;
            display: block;
        }
        .error {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>產品列表 (Product List)</h1>

    <?php if (isset($error)): ?>
        <p class="error">錯誤: <?= htmlspecialchars($error) ?></p>
    <?php else: ?>
        <?php if (count($products) === 0): ?>
            <p>沒有產品資料。</p>
        <?php else: ?>
            <table>
                <thead>
                    <tr>
                        <th>產品圖片</th>
                        <th>產品編號 (PID)</th>
                        <th>產品名稱 (Name)</th>
                        <th>價格 (Price)</th>
                        <th>分類 (Type)</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($products as $product): ?>
                        <tr>
                            <td>
                                <?php 
                                $imgPath = htmlspecialchars($product['PID']) . '.jpg';
                                if (file_exists(__DIR__ . '/' . $imgPath)): ?>
                                    <img src="<?= $imgPath ?>" alt="<?= htmlspecialchars($product['pname']) ?>" />
                                <?php else: ?>
                                    <span>無圖片</span>
                                <?php endif; ?>
                            </td>
                            <td><?= htmlspecialchars($product['PID']) ?></td>
                            <td><?= htmlspecialchars($product['pname']) ?></td>
                            <td><?= htmlspecialchars($product['price']) ?></td>
                            <td><?= htmlspecialchars($product['type']) ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    <?php endif; ?>

</body>
</html>


美化此一程式，使其UI接近現代美觀之電子商務網站，使用php、html、css、js在同個檔案中一次產生完全部程式碼。