6-3 套用真實圖片到輪播圖中

1. 問AI：

   有個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
   
   /**
    * 將媒體陣列轉換為指定格式的 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']

   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

   有個PHP陣列如下，元素數量不一： 
   $media['原圖路徑']='縮圖路徑';
   如何取出第一個元素？

    

5. AI的回應是

   // 獲取第一個元素的鍵（原圖路徑）
   $firstKey = array_key_first($media);
   
   // 獲取第一個元素的值（縮圖路徑）
   $firstValue = reset($media);
   

    

6. 我們要取出的是鍵，因此，再次修改 show() 函數，將原本的 $filtered_result['media_json'] 多加一個 $filtered_result['main_image'] 即可

   $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} 即可

   <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">
                   <!-- 縮圖將通過 JavaScript 動態添加 -->
               </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. 我們的單一頁面就完成囉！