9-5 產生內嵌語法

1. 產生內嵌語法通常有兩種方式，一種是用iframe，另一種是用JSONP的方式。前者限制較多，後者比較難做，因此，我們用後者的方式，反正麻煩的事都問AI：

   網站想要提供一個用JSONP方式的內嵌語法，給其他網站套用。
   可以指定要顯示N篇文章
   亦可選擇只要某間學校的N篇文章
   請根據以下SQL語法來產生相關功能
   產生的結果請替標題加上連結，連至 index.php?id=編號
   $pdo 物件只要引入 header.php 便可使用，無須再次連接
    <script> </script> 部份請包裝成一個獨立的.js檔
   環境為PHP8、MySQL8
   
   CREATE TABLE school_news (
     id INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '編號',
     news_title VARCHAR(255) NOT NULL COMMENT '新聞標題',
     news_content TEXT NOT NULL COMMENT '新聞內容',
     related_link VARCHAR(255) COMMENT '相關連結',
     publisher VARCHAR(100) NOT NULL COMMENT '發布者',
     school_name VARCHAR(100) NOT NULL COMMENT '學校名稱',
     report_date DATE NOT NULL COMMENT '報導日期',
     upload_type ENUM('image', 'youtube') NOT NULL COMMENT '上傳種類',
     youtube_url VARCHAR(255) COMMENT 'Youtube影片網址',
     media JSON COMMENT '多檔案JSON資訊',
     views INT UNSIGNED NOT NULL DEFAULT 0 COMMENT '點閱數',
     PRIMARY KEY (id)
   ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

    

2. AI回覆如下，PHP部份我們將之存檔為 get_news.php：

   <?php
   // get_news.php
   
   // 引入包含 $pdo 對象的文件
   require_once 'header.php';
   
   // 獲取參數
   $callback = $_GET['callback'] ?? 'callback';  // JSONP 回調函數名
   $limit = min((int)($_GET['limit'] ?? 5), 20);  // 限制最多顯示 20 篇文章
   $school = $_GET['school'] ?? '';  // 學校名稱，可選
   
   // 準備 SQL 查詢
   $sql = "SELECT id, news_title, news_content, related_link, publisher, school_name, report_date, upload_type, youtube_url, media, views 
           FROM school_news 
           WHERE 1=1";
   
   $params = [];
   
   if (!empty($school)) {
       $sql .= " AND school_name = ?";
       $params[] = $school;
   }
   
   $sql .= " ORDER BY report_date DESC LIMIT " . $limit;
   
   // 準備並執行查詢
   $stmt = $pdo->prepare($sql);
   $stmt->execute($params);
   
   // 獲取結果
   $news = $stmt->fetchAll(PDO::FETCH_ASSOC);
   
   // 處理結果
   $result = [];
   foreach ($news as $item) {
       // 將 JSON 字符串轉換為 PHP 數組
       $item['media'] = json_decode($item['media'], true);
       
       // 限制新聞內容長度
       $item['news_content'] = mb_substr(strip_tags($item['news_content']), 0, 100) . '...';
       
       // 添加新聞標題的連結
       $item['news_link'] = 'index.php?id=' . $item['id'];
       
       $result[] = $item;
   }
   
   // 輸出 JSONP
   header('Content-Type: application/javascript');
   echo $callback . '(' . json_encode($result) . ');';
   

    

3. js部份我們將之存為school_news.js

   // school_news.js
   
   (function() {
       // 創建一個全局的回調函數
       window.renderSchoolNews = function(data) {
           var newsHtml = '<ul>';
           for (var i = 0; i < data.length; i++) {
               var item = data[i];
               newsHtml += '<li>';
               newsHtml += '<h3><a href="' + item.news_link + '">' + item.news_title + '</a></h3>';
               newsHtml += '<p>' + item.news_content + '</p>';
               newsHtml += '<p>發布者: ' + item.publisher + ' | 學校: ' + item.school_name + ' | 日期: ' + item.report_date + '</p>';
               newsHtml += '</li>';
           }
           newsHtml += '</ul>';
           document.getElementById('school-news').innerHTML = newsHtml;
       };
   
       // 創建一個函數來加載新聞
       window.loadSchoolNews = function(options) {
           options = options || {};
           var script = document.createElement('script');
           var callback = options.callback || 'renderSchoolNews';
           var limit = options.limit || 5;
           var school = options.school || '';
           var url = options.url || 'https://your-domain.com/get_news.php';
   
           script.src = url + '?callback=' + callback + '&limit=' + limit + (school ? '&school=' + encodeURIComponent(school) : '');
           document.body.appendChild(script);
       };
   })();
   

    

4. 最後，只要網站能產生以下語法給使用者即可：

   <div id="school-news"></div>
   <script src="https://your-domain.com/school_news.js"></script>
   <script>
       // 在 DOM 加載完成後加載新聞
       document.addEventListener('DOMContentLoaded', function() {
           loadSchoolNews({
               limit: 5,
               school: '某某學校',
               url: 'https://your-domain.com/get_news.php'
           });
       });
   </script>
   

    

5. 我們修改 templates/embed.tpl 的內容為：

   <textarea cols="30" rows="10" class="form-control"><div id="school-news"></div>
       <script src="http://localhost/php8/school_news.js"></script>
       <script>
           // 在 DOM 加載完成後加載新聞
           document.addEventListener('DOMContentLoaded', function () {
               loadSchoolNews({
                   limit: 5,
                   school: '',
                   url: 'http://localhost/php8/get_news.php'
               });
           });
       </script>
       </textarea>
   
   <h3 class="mt-5">執行範例</h3>
   <div id="school-news"></div>
   <script src="http://localhost/php8/school_news.js"></script>
   <script>
       // 在 DOM 加載完成後加載新聞
       document.addEventListener('DOMContentLoaded', function () {
           loadSchoolNews({
               limit: 5,
               school: '',
               url: 'http://localhost/php8/get_news.php'
           });
       });
   </script>

    

6. 如此就完成囉！