JQuery Dialog基本使用-Ajax

    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基本使用

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);」。

DataTable基本使用

  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. 結果:

Microsoft SQL Server 2019 安裝

  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. 點選「連線」,即可進行資料庫操作。

網頁設計01-環境建立(2hr)

一、課程介紹(20min)

  1. 課程大綱:
    1. 環境建立(XAMPP、DW、Laravel)
    2. 資料庫(MySQL)
    3. 通訊協定與靜態網頁(HTTP、TCP/IP、Domain/DNS、HTML、CSS、SEO)
    4. 動態網頁-php(基本函數操作、PDO資料庫連線)
    5. JavaScript(jQuery、Ajax)
    6. 【實作】傳統php
    7. WebAPI與MVC概念
    8. Laravel-web(Migrations、Model、Seeding、Eloquent ORM、Controllers、Routing、Middleware、Localization、Views)
    9. Laravel-api、其他應用(JWT、API、Mail、JS統計圖表、Line機器人、網頁拖曳、Google Map、影音串流)
    10. 伺服器(資訊安全、Windows Server/Linux、域名、路由器轉埠、HTTPS、多網域設定、伺服器壓力測試)
    11. 【實作】Laravel-web+api
  2. 上課方式:
    1. 所有課程資料皆放於部落格文章
    2. 所有影片將放於各篇文章最後章節
    3. 以實際示範操作為主軸,理論概念說明為輔助
    4. 課後若有小作業,以書面word截圖程式畫面,並上傳至FTP(帳號密碼另外公告)
    5. Project:
      1.  2~3人一組
      2. 題目:自訂
      3. 資料表:至少2張表,需有關連、外加user 1張表
      4. 功能:各單一表的CURD、複合表的CURD、Ajax功能
      5. 頁面:全頁RWD、Laravel-web 90% 與 Laravel-api 10%
  3. 預期成效:
    1. 架設RWD網頁(含jQuery/Ajax)
    2. 完整的後端功能(含API)
    3.  基礎Windows Server/Linux操作
    4. 職缺參考: 
      1.  104人力銀行:
        1. https://www.104.com.tw/job/6ln3f
        2. https://www.104.com.tw/job/3ckkh
        3. https://www.104.com.tw/job/4sgoa
        4. https://www.104.com.tw/job/6edq4
        5. https://www.104.com.tw/job/6b4t1
      2. 1111人力銀行
        1. https://www.1111.com.tw/job/91256029/?ks=php
        2. https://www.1111.com.tw/job/91203363/?ks=php
        3. https://www.1111.com.tw/job/85999217/?ks=php
        4. https://www.1111.com.tw/job/91302886/?ks=php
        5. https://www.1111.com.tw/job/91302185/?ks=php

二、Xampp安裝/簡介/設定 (25min)

  1. 下載Xampp: https://www.apachefriends.org/zh_tw/download.html
  2. 若Xampp的Apache有錯誤,可下載Visual C++可轉散發套件:https://drive.google.com/open?id=0B0D-Bv7NZUTENnVJSlA2Wk81MDAhttps://daimom3020.blogspot.com/2018/09/windows-server-2012-r2-api-ms-win-crt.html
  3. 簡介:將網頁設計之所需環境如Apache(伺服器環境),MySQL(資料庫),PHP(動態語言), phpMyAdmin(資料庫管理工具), FTP(檔案傳輸)等軟體整合,快速安裝。
  4. 安裝與設定: https://github.com/shyangs/blog/issues/24

三、Dreamweaver 安裝/簡介/操作界面介紹 (30min+20min練習)

  1. 下載DW: https://drive.google.com/file/d/0B0D-Bv7NZUTEZjV5UXFuZjZ4WFU/view?usp=sharing&resourcekey=0-RVcckjtlT9yq9ZQpqIW1_A
  2. 簡介:它使用所見即所得的介面,亦有HTML編輯的功能。(https://zh.wikipedia.org/wiki/Adobe_Dreamweaver)
  3. DW工作區介紹:https://helpx.adobe.com/tw/dreamweaver/using/dreamweaver-workflow-workspace.html

四、 Laravel安裝/簡介(25min)

  1. 下載composer: https://getcomposer.org/download/
  2. 安裝: https://laravel.tw/docs/5.3
  3. 簡介: https://laravel.tw/

五、課程影片(片長:00:29:32)

  • 1
  • 2