XOOPS輕鬆架 - 線上書籍

:::

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

1. 產生內嵌語法通常有兩種方式，一種是用iframe，另一種是用JSONP的方式。前者限制較多，後者比較難做，因此，我們用後者的方式，反正麻煩的事都問AI： 
    ```markup
    網站想要提供一個用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
    <?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` 
    ```javascript
    // 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. 最後，只要網站能產生以下語法給使用者即可： 
    ```markup
    <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` 的內容為： 
    ```markup
    <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>

執行範例

``` 6. 如此就完成囉！ ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/55/firefox_gS7FnKqMHV.png)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

執行範例

書籍目錄

快速登入

計數器