XOOPS輕鬆架 - 線上書籍

:::

用AI學PHP8
========

1. 問AI： 
    ```markup
    有個PHP陣列如下，元素數量不一：
    $media['原圖路徑']='縮圖路徑';
    例如：
    $media['uploads/1/main_qwe.jpg']='uploads/1/thumb_qwe.jpg';
    $media['uploads/1/main_asd.jpg']='uploads/1/thumb_asd.jpg';
    
    請做成PHP8函數已轉成像這樣的 json格式：
    [
        { thumb: '縮圖路徑1', full: '原圖路徑1' },
        { thumb: '縮圖路徑2', full: '原圖路徑2' },
        { thumb: '縮圖路徑3', full: '原圖路徑3' },
    ]
    ```
2. AI回答如下，我們將 `convertMediaToJson()` 函數加至` index.php `的最下方： 
    ```php
    <?php
    
    /**
     * 將媒體陣列轉換為指定格式的 JSON 字符串
     *
     * @param array<string, string> $media 原始媒體陣列，鍵為原圖路徑，值為縮圖路徑
     * @param bool $prettyPrint 是否美化輸出的 JSON（默認為 false）
     * @return string JSON 格式的字符串
     */
    function convertMediaToJson(array $media, bool $prettyPrint = false): string
    {
        $restructuredMedia = array_map(
            fn($full, $thumb) => ['thumb' => $thumb, 'full' => $full],
            array_keys($media),
            array_values($media)
        );
    
        return json_encode(
            $restructuredMedia,
            $prettyPrint ? JSON_PRETTY_PRINT : 0
        );
    }
    
    // 使用示例：
    $media = [
        'uploads/1/main_qwe.jpg' => 'uploads/1/thumb_qwe.jpg',
        'uploads/1/main_asd.jpg' => 'uploads/1/thumb_asd.jpg',
    ];
    
    $jsonMedia = convertMediaToJson($media, true);
    echo $jsonMedia;
    
    ```
    
    使用 `json_encode` 函數將結果陣列轉換為JSON格式。`JSON_PRETTY_PRINT` 選項使輸出的JSON更易讀。
3. 順便修改 `show()` 函數，再傳回資料前，將原本的 `$filtered_result['media'] `轉成新格式並存入 `$filtered_result['media_json']` 
    ```php
    function show(int $id): array
    {
        global $pdo;
    
        try {
            // 準備 SQL 語句
            $sql = "SELECT * FROM school_news WHERE id = ?";
            $stmt = $pdo->prepare($sql);
    
            // 執行查詢
            $stmt->execute([$id]);
    
            // 獲取結果
            $result = $stmt->fetch(PDO::FETCH_ASSOC);
    
            if (!$result) {
                throw new Exception("找不到 ID 為 {$id} 的資料");
            }
    
            // 處理 JSON 格式的欄位
            if (isset($result['media']) && is_string($result['media'])) {
                $result['media'] = json_decode($result['media'], true) ?? [];
            }
    
            // 過濾資料以防止 XSS 攻擊
            $filtered_result = array_map(function ($value) {
                if (is_string($value)) {
                    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
                } elseif (is_array($value)) {
                    return array_map(function ($v) {
                        return is_string($v) ? htmlspecialchars($v, ENT_QUOTES, 'UTF-8') : $v;
                    }, $value);
                }
                return $value;
            }, $result);
    
            $filtered_result['media_json'] = convertMediaToJson($filtered_result['media']);
    
            return $filtered_result;
    
        } catch (PDOException $e) {
            // 記錄資料庫錯誤
            error_log("Database Error: " . $e->getMessage());
            throw new Exception("資料庫查詢錯誤");
        } catch (Exception $e) {
            // 記錄其他錯誤
            error_log("Error: " . $e->getMessage());
            throw $e;
        }
    }
    ```
4. 設定主圖，需要取出第一個圖片，因此也問問AI 
    ```markup
    有個PHP陣列如下，元素數量不一： 
    $media['原圖路徑']='縮圖路徑';
    如何取出第一個元素？
    ```
5. AI的回應是 
    ```php
    // 獲取第一個元素的鍵（原圖路徑）
    $firstKey = array_key_first($media);
    
    // 獲取第一個元素的值（縮圖路徑）
    $firstValue = reset($media);
    
    ```
6. 我們要取出的是鍵，因此，再次修改 `show()` 函數，將原本的 `$filtered_result['media_json'] `多加一個 `$filtered_result['main_image'] `即可 
    ```php
    $filtered_result['media_json'] = convertMediaToJson($filtered_result['media']);
    $filtered_result['main_image'] = array_key_first($filtered_result['media']);
    ```
7. 最後，修改一下 `templates/slider.tpl` 就大功告成了，將主圖片換成 `{$news.main_image} `再將 const images的值換成 `{$news.media_json} `即可 
    ```markup
    <div class="alert alert-info">
        <div class="row">
            <div class="col-md-3 order-md-1 order-2 mb-3 mb-md-0">
                <div class="thumbnail-container" id="thumbnailContainer">
                    
                </div>
            </div>
            <div class="col-md-9 order-md-2 order-1">
                <img id="mainImage" src="{$news.main_image}" alt="主圖片">
            </div>
        </div>
    </div>
    <script src="slider.js"></script>
    <script>
    
        const images = {$news.media_json};
        const carousel = createImageCarousel(images, 'mainImage', 'thumbnailContainer');
    </script>
    ```
8. 我們的單一頁面就完成囉！  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/firefox_pgYl1usOhy.png)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D2023

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器