XOOPS輕鬆架 - 線上書籍

:::

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

1. 我們的編輯表單有個「Youtube連結」的項目，當使用者有填寫該欄位時，我們就以影片取代輪播圖
2. 一樣問一下AI怎麼做： 
    ```markup
    若有Youtube的影片播放網址，並將該網址送至smarty5樣板，如{$youtube}，請問要如何才能在樣板中用BootStrap5的Ratios來內嵌並播放該影片？此外，該如何取得該影片的縮圖？
    ```
 
### 作法一：

1. AI給了一個函數，我們先將 `getYoutubeInfo($url)` 放到 `function.php` 中： 
    ```php
    <?php
    function getYoutubeInfo($url) {
        $videoId = "";
        if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $url, $match)) {
            $videoId = $match[1];
        }
        
        if ($videoId) {
            return [
                'videoId' => $videoId,
                'embedUrl' => "https://www.youtube.com/embed/$videoId",
                'thumbnailUrl' => "https://img.youtube.com/vi/$videoId/0.jpg"
            ];
        }
        
        return null;
    }
    
    // 假設 $youtube 是從數據庫或其他來源獲得的 YouTube URL
    $youtube = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
    
    // 獲取 YouTube 影片信息
    $youtubeInfo = getYoutubeInfo($youtube);
    
    // 將信息傳遞給 Smarty
    $smarty->assign('youtubeInfo', $youtubeInfo);
    
    ```
2. 然後分別修改修改 `show()` 及` all()`，判斷 `youtube_url `若有值，就去取得該影片的相關資訊： 
    ```php
    function show(int $id): array
    {
        global $pdo;
    
        try {
            ...略...
    
            $filtered_result['media_json'] = convertMediaToJson($filtered_result['media']);
            $filtered_result['main_image'] = array_key_first($filtered_result['media']);
            $filtered_result['youtube'] = '';
            if ($filtered_result['youtube_url']) {
                $filtered_result['youtube'] = getYoutubeInfo($filtered_result['youtube_url']);
            }
    
            return $filtered_result;
    
            ...略...
        }
    }
    ```
    
     
    ```php
    function all(int $start = 0, int $limit = 10): array
    {
        global $pdo;
    
        ...略...
    
        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            
        ...略...
            $row['media_json'] = convertMediaToJson($row['media']);
            $row['main_image'] = array_key_first($row['media']);
            $row['summary'] = truncate_string($row['news_content'], 200);
            $row['youtube'] = '';
            if ($row['youtube_url']) {
                $row['youtube'] = getYoutubeInfo($row['youtube_url']);
            }
    
            $results[] = $row;
        }
    
        return $results;
    }
    ```
3. 接著將播放Youtube的部份取出，存成` templates/youtube.tpl `樣板 
    ```markup
    
    <div class="ratio ratio-16x9">
        <iframe src="{$youtube.embedUrl}" title="YouTube video" allowfullscreen></iframe>
    </div>
    ```
 
### 作法二：

1. 上課時，AI給另一種作法，直接用樣板搞定，一樣存成` templates/youtube.tpl `樣板： 
    ```markup
    {if $type =='youtube' && $youtube}
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/{$youtube|regex_replace:'/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*$/':'$1'}" 
                    title="YouTube video" 
                    allowfullscreen>
            </iframe>
        </div>
    {/if}
    ```
 
### 必要的動作：

1. 不管哪種作法，都必須修改有引入 `article.tpl` 的樣板，包括：`templates/main.tpl`及`templates/show.tpl`，在引入 `article.tpl `時，多加 `youtube=$news.youtube type=$news.upload_type` 這兩個參數： 
    ```markup
    {foreach $all_news as $key => $news}
        {if $key==0}
            {include file="article.tpl" slider=true title=$news.news_title date=$news.report_date school=$news.school_name count=$news.views author=$news.publisher content=$news.news_content link=$news.related_link youtube=$news.youtube type=$news.upload_type thumb=""}
        {else}
            {include file="article.tpl" slider=false title=$news.news_title date=$news.report_date school=$news.school_name count=$news.views author=$news.publisher content=$news.summary link=$news.related_link youtube=$news.youtube type=$news.upload_type thumb=$news.main_image}
        {/if}
    {/foreach}
    
    ```
    
     
    ```markup
    {include file="article.tpl" slider=true title=$news.news_title date=$news.report_date school=$news.school_name count=$news.views author=$news.publisher content=$news.news_content link=$news.related_link youtube=$news.youtube type=$news.upload_type thumb=""}
    
    ```
2. 如此，便可修改`templates/article.tpl`，根據`$type`來判斷是要顯示輪播圖或是影片 
    ```markup
    <article class="my-4">
        {if $slider}
            {if $type=="youtube" && $youtube}
                {include file="youtube.tpl"}
            {else}
                {include file="slider.tpl"}
            {/if}
        {/if}
    
        ...略...
    
        <div class="row">
            {if $thumb}
                <div class="col-md-4 mb-3">
                    {*作法一*}
                    {if $type=="youtube" && $youtube}
                        <img src="{$youtube.thumbnailUrl}" class="img-fluid" alt="{$title}圖片">
                    {else}
                        <img src="{$thumb}" class="img-fluid" alt="{$title}圖片">
                    {/if}
    
    
    
    
                    {*作法二*}
                    {if $type =='youtube' && $youtube}
                        {$youtube_id = $youtube|regex_replace:'/^.*(?:youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|v=)([^#\&\?]*).*$/':'$1'}
                        <img src="https://img.youtube.com/vi/{$youtube_id}/0.jpg" alt="YouTube Thumbnail" style="width: 100%;">
                    {else}
                        <img src="{$thumb}" class="img-fluid mb-3" alt="圖片" style="width: 100%;">
                    {/if}
                </div>
                
                ...略...
            {else}
                ...略...
            {/if}
        </div>
    </article>
    ```
    
    作法一和作法二使用其中一種即可
3. 若是選擇用影片，就會秀出影片了  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/firefox_tlzfuWuHx3.png)
4. 縮圖也改為自動擷取的縮圖  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/firefox_nrylfjtbLe.png)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器