教學PPT下載：下載

JJWT與更新檔：下載，請用新的jar檔，以免連線失敗

範例網頁檔下載：原始檔，編譯後

範例SQL檔下載：下載，需先建立資料庫「test」

教學影片1：Youtube

教學影片2：Youtube

個人經驗分享，可用於「雲科大工管系資料庫與網頁設計課程」

1. 1. 下載範例：dialog_ajax_sample，解壓縮至htdocs資料夾。
   2. 建立div，指定id(範例：dialog_id)，標題title，style先設定隱藏，對話框內容可以先留空不用寫，例：<div id=”dialog_id” title=”對話框標題” style=”display:none;”>對話框內內容</div>。
   3. 呼叫Ajax，參考：https://www.ccliang.me/webdevelopment05/#section3
   4. JQuery將其資料填入div範圍內，參考：https://www.ccliang.me/webdevelopment05/#section2
   5. 呼叫dialog方法，參考：JQuery Dialog基本使用

1. JQuery官網：https://jqueryui.com/dialog/，CDN：https://code.jquery.com/
2. 下載完整範例：dialog_sample
3. Dialog是JQuery UI的其中一個項目，所以引用Jquery UI的CSS與JS即可使用。
4. 引用CSS檔：<link rel=”stylesheet” type=”text/css” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css“>
5. 引用JQuery檔：<script src=”https://code.jquery.com/jquery-3.6.0.min.js“></script>
6. 引用JQuery UI檔：<script src=”https://code.jquery.com/ui/1.13.0/jquery-ui.js“></script>
7. 建立div，指定id(範例：dialog_id)，標題title，style先設定隱藏，例：<div id=”dialog_id” title=”對話框標題” style=”display:none;”>對話框內內容</div>。
8. 宣告Dialog參數「config」變數，寬度width:’數字’,高度height:’數字/auto’,位置position:{ my: “center”, at: “center”, of: window }，讓對話框顯示在視窗的水平置中、垂直置中位置。
9. 呼叫Dialog，「$(“#dialog_id“).dialog(config);」。

1. DataTable的官網：https://datatables.net/，CDN：https://cdn.datatables.net/。
   
2. 下載完整範例：datatable_sample
3. 引用CSS檔：<link rel=”stylesheet” type=”text/css” href=”https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css”>
4. 先引用JQuery檔：<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
5. 再引用JS檔：<script src=”https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js”></script>
6. 建立表格，指定表格id(範例：table_id)，結構：<thead></thead>之間為欄位名，<tbody></tbody>之間為各列內容。
7. 範例表格：
   <table id=”table_id” class=”display”>
   <thead>
   <tr>
   <th>欄位名稱1</th>
   <th>欄位名稱2</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>第1行第1列</td>
   <td>第1行第2列</td>
   </tr>
   <tr>
   <td>第2行第1列</td>
   <td>第2行第2列</td>
   </tr>
   </tbody>
   </table>
8. 設定datatable參數，oLanguage：語言檔路徑、sPaginationType：分頁的形式、order：資料排序依據
9. 語言檔下載：dataTables.zh-tw，要注意語言檔路徑，若未讀到語言檔，則會顯示預設語言(英文)。
10. datatable參數範例：
    var opt={
    “oLanguage”:{“sUrl”:”dataTables.zh-tw.txt”},
    “sPaginationType”:”full_numbers”,
    “order”: [[ 0, ‘asc’ ]]
    };
11. 呼叫datatable：$(‘#table_id‘).DataTable(opt);
12. 結果：
    

1. MSSQL安裝檔：https://www.microsoft.com/en-us/sql-server/sql-server-downloads，下載「Developer版」。
   
2. 下載完畢，即可點擊安裝。
   
3. 選擇「下載媒體(D)」，以下載完整版檔案。
   
4. 選擇下載路徑，並點選「下載」。
   
5. 等待下載作業。
   
6. 點選「開啟資料夾」，然後關閉MSSQL下載畫面，確定要結束嗎?點選「是」。
   
7. 對ISO檔點右鍵「掛接」。
   
8. 點選「setup」。
   
9. 點選左側選單「安裝」，點選「新增SQL Server獨立安裝或將功能加入至現有安裝」。
   
10. 如有序號，可輸入序號，如無請使用免費版。
    
11. 同意授權。
    
12. 依需求啟用更新。
    
13. MSSQL會檢查環境是否通過，如無嚴重錯誤，可進行下一步。
    
14. 選擇欲安裝之功能，可直接全選。
    
15. 使用預設執行個體。
    
16. 確認各服務執行的帳號。
    
17. 使用Windows驗證，並點選「加入目前使用者」。
    
18. 點選「加入目前使用者」。
    
19. 目前不須此功能，直接點選下一步。
    
20. 顯示所安裝之清單，點選「安裝」。
    
21. 等待安裝作業。
    
22. 完成SQL Server主程式安裝。
    
23. 點選「安裝SQL Server 管理工具」。
    
24. 點選「下載 SQL Server Management Studio (SSMS) 18.9」。
    
25. 點選「SSMS-Setup-CHT」檔案。
    
26. 點選「安裝」。
    
27. 等待安裝作業。
    
28. 完成SQL Server管理工具安裝。
    
29. 開啟 「SQL Server Management Studio」。
    
30. 點選「連線」，即可進行資料庫操作。